*{
	box-sizing:border-box;
}

.ak-race-box{
	max-width:940px;
	margin:20px auto;
	background:#fff;
	border-radius:32px;
	padding:15px;
	text-align:center;
	box-shadow:0 20px 50px rgba(50,35,90,.15);
	font-family:'Segoe UI',Arial,sans-serif;
}

.ak-race-wrap{
	position:relative;
	width:100%;
	max-width:900px;
	margin:0 auto;
	border-radius:22px;
	overflow:hidden;
}

#akRabbitRaceCanvas{
	width:100%;
	max-width:760px;
	height:auto;
	display:block;
	margin:0 auto;
	border-radius:20px;
	border:3px solid #5b3b22;
	background:#77d66f;
	touch-action:none;
	user-select:none;
}

/* HUD */
#akRaceHud{
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	display:flex;
	gap:6px;
	flex-wrap:wrap;
	z-index:40;
	pointer-events:auto;
}

.ak-race-icon-pill{
	min-width:34px;
	height:30px;
	padding:0 9px;
	border-radius:999px;
	background:rgba(22,15,7,.55);
	border:1px solid rgba(255,255,255,.22);
	color:#fff;
	font-size:14px;
	font-weight:950;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:4px;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
	box-shadow:0 4px 12px rgba(0,0,0,.18);
	position:relative;
}

/* Tooltips */
.ak-race-icon-pill::after,
#akRaceHelpBtn::after,
#akRaceFullscreenBtn::after{
	content:attr(data-tip);
	position:absolute;
	left:50%;
	top:34px;
	transform:translateX(-50%);
	background:#ffe36a;
	color:#3b2800;
	font-size:11px;
	font-weight:950;
	padding:5px 9px;
	border-radius:999px;
	white-space:nowrap;
	opacity:0;
	pointer-events:none;
	transition:.18s;
	box-shadow:0 6px 14px rgba(0,0,0,.22);
	z-index:9999;
}

.ak-race-icon-pill:hover::after,
#akRaceHelpBtn:hover::after,
#akRaceFullscreenBtn:hover::after{
	opacity:1;
	top:31px;
}

#akRaceHelpBtn[data-tip=""]::after{
	display:none !important;
}

/* Botões topo */
#akRaceHelpBtn,
#akRaceFullscreenBtn{
	height:30px;
	border:none;
	border-radius:999px;
	background:rgba(255,227,106,.95);
	color:#3b2800;
	font-weight:950;
	z-index:85;
	cursor:pointer;
	border:1px solid rgba(255,255,255,.45);
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events:auto;
	position:relative;
	box-shadow:0 4px 12px rgba(0,0,0,.18);
}

#akRaceHelpBtn{
	min-width:76px;
	padding:0 12px;
	font-size:12px;
}

#akRaceFullscreenBtn{
	width:34px;
	padding:0;
	font-size:18px;
}

/* Painel objetivos */
#akRaceHelpPanel{
	position:absolute;
	top:44px;
	left:10px;
	width:218px;
	padding:10px 12px;
	border-radius:14px;
	background:rgba(20,14,8,.82);
	color:#fff;
	z-index:86;
	display:none;
	text-align:left;
	box-shadow:0 10px 26px rgba(0,0,0,.35);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	pointer-events:auto;
}

#akRaceHelpPanel.ak-open{
	display:block;
}

#akRaceHelpPanel strong{
	display:block;
	font-size:12px;
	margin-bottom:6px;
}

#akRaceHelpPanel p{
	margin:5px 0;
	font-size:11px;
	font-weight:800;
	line-height:1.25;
}

/* Cores */
.ak-race-colors{
	position:absolute;
	left:50%;
	bottom:12px;
	transform:translateX(-50%);
	display:flex;
	gap:7px;
	z-index:75;
	background:rgba(20,14,8,.42);
	padding:7px 9px;
	border-radius:999px;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
}

.ak-race-colors button{
	width:25px;
	height:25px;
	border-radius:50%;
	border:2px solid #fff;
	box-shadow:0 4px 10px rgba(0,0,0,.25);
	cursor:pointer;
}

/* Controles */
.ak-race-controls{
	position:absolute;
	right:14px;
	bottom:58px;
	display:flex;
	gap:9px;
	z-index:80;
}

.ak-race-controls button{
	width:54px;
	height:54px;
	border:none;
	border-radius:50%;
	font-size:24px;
	font-weight:950;
	cursor:pointer;
	color:#fff;
	box-shadow:0 8px 16px rgba(30,20,80,.28);
	display:flex;
	align-items:center;
	justify-content:center;
}

#akBrakeBtn{
	background:linear-gradient(135deg,#ff5b5b,#cc2222);
}

#akGasBtn{
	background:linear-gradient(135deg,#20c768,#0a9e4a);
}

#akBananaBtn{
	background:linear-gradient(135deg,#ffcf35,#ff9f1c);
	color:#3c2600;
}

.ak-race-controls button:active{
	transform:scale(.92);
}

/* Mensagem */
#akRaceMessage{
	position:absolute;
	left:50%;
	bottom:105px;
	transform:translateX(-50%);
	background:rgba(20,14,8,.58);
	color:#fff7c7;
	border-radius:999px;
	padding:5px 12px;
	font-size:10px;
	font-weight:850;
	max-width:82%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	z-index:60;
	pointer-events:none;
}

/* Overlay */
#akRaceOverlay{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:22px;
	background:rgba(28,18,8,.66);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	z-index:90;
	border-radius:20px;
}

#akRaceOverlay.ak-hide{
	display:none;
}

#akRaceOverlay h1{
	color:#fff;
	font-size:28px;
	font-weight:950;
	margin:0 0 10px;
	text-shadow:0 4px 18px rgba(0,0,0,.45);
}

#akRaceOverlay p{
	color:#ffeec4;
	max-width:430px;
	margin:0 0 24px;
	font-size:14px;
	line-height:1.55;
	font-weight:750;
}

.ak-race-start-btn{
	border:none;
	border-radius:999px;
	padding:14px 34px;
	cursor:pointer;
	color:#fff;
	font-size:18px;
	font-weight:950;
	background:linear-gradient(135deg,#ff8a22,#ffcf3b);
	box-shadow:0 10px 28px rgba(255,138,34,.45);
}

.ak-race-start-btn:hover{
	transform:scale(1.04);
}

.ak-race-start-btn.green{
	background:linear-gradient(135deg,#20c768,#10a855);
}

.ak-race-start-btn.red{
	background:linear-gradient(135deg,#ff305d,#ff7a2f);
}

/* Mobile */
@media(max-width:768px){
	.ak-race-box{
		padding:12px 8px;
		border-radius:24px;
	}

	#akRabbitRaceCanvas{
		width:100% !important;
		max-height:68vh;
	}

	#akRaceHud{
		top:8px;
		left:8px;
		gap:5px;
	}

	.ak-race-icon-pill{
		height:26px;
		min-width:28px;
		padding:0 7px;
		font-size:12px;
		background:rgba(20,14,8,.48);
	}

	#akRaceHelpBtn{
		height:26px;
		min-width:66px;
		padding:0 9px;
		font-size:10px;
	}

	#akRaceFullscreenBtn{
		width:30px;
		height:26px;
		font-size:15px;
	}

	.ak-race-controls{
		right:10px;
		bottom:54px;
	}

	.ak-race-controls button{
		width:48px;
		height:48px;
		font-size:21px;
	}

	.ak-race-colors{
		left:10px;
		right:auto;
		transform:none;
		bottom:12px;
	}

	.ak-race-colors button{
		width:22px;
		height:22px;
	}

	#akRaceMessage{
		display:none !important;
	}

	#akRaceOverlay h1{
		font-size:22px;
	}
}

/* Modo expandido */
.ak-race-wrap.ak-fullscreen-mode{
	position:fixed !important;
	inset:0 !important;
	width:100vw !important;
	height:100dvh !important;
	max-width:none !important;
	margin:0 !important;
	padding:0 !important;
	border-radius:0 !important;
	background:#101018 !important;
	z-index:999999 !important;
	overflow:hidden !important;
}

.ak-race-wrap.ak-fullscreen-mode #akRabbitRaceCanvas{
	width:100vw !important;
	height:100dvh !important;
	max-width:none !important;
	max-height:none !important;
	border:none !important;
	border-radius:0 !important;
	display:block !important;
	margin:0 !important;
}

.ak-race-wrap.ak-fullscreen-mode #akRaceOverlay{
	border-radius:0 !important;
}

@media(orientation:portrait){
	.ak-race-wrap.ak-fullscreen-mode #akRaceHud{
		top:8px !important;
		left:8px !important;
		right:8px !important;
		gap:5px !important;
		flex-wrap:nowrap !important;
		transform:scale(.92);
		transform-origin:top left;
	}

	.ak-race-wrap.ak-fullscreen-mode .ak-race-icon-pill,
	.ak-race-wrap.ak-fullscreen-mode #akRaceFullscreenBtn{
		height:25px !important;
		min-width:28px !important;
		padding:0 7px !important;
		font-size:11px !important;
	}

	.ak-race-wrap.ak-fullscreen-mode #akRaceHelpBtn{
		height:25px !important;
		min-width:72px !important;
		width:auto !important;
		padding:0 10px !important;
		font-size:10px !important;
		white-space:nowrap !important;
	}

	.ak-race-wrap.ak-fullscreen-mode .ak-race-controls button{
		width:48px !important;
		height:48px !important;
	}
}