:root{
	--bg: #05060a;
	--panel: rgba(10, 12, 18, 0.70);
	--panelBorder: rgba(255,255,255,0.12);
	--text: rgba(255,255,255,0.92);
	--muted: rgba(255,255,255,0.70);
	--shadow: 0 18px 60px rgba(0,0,0,0.55);
	--topbarH: 56px;
}

*{ box-sizing: border-box; }

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	overscroll-behavior: none;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Canvas siempre al fondo */
#gameCanvas{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.ui-root{
	position: fixed;
	inset: 0;
	z-index: 8000;
	pointer-events: none; /* si no, bloquea el táctil del canvas debajo */
}

/* Rehabilitar interacción solo en overlays visibles (menús, pausa, gameover, etc.) */
.ui-root .overlay-screen.is-visible,
.ui-root .gameover.is-visible,
.ui-root .pause.is-visible{
	pointer-events: auto;
}

.ui-root .overlay-screen.is-visible *,
.ui-root .gameover.is-visible *,
.ui-root .pause.is-visible *{
	pointer-events: auto;
}

.overlay-screen{
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
	opacity: 1;
	transform: translateY(0);
	transition: opacity 180ms ease, transform 220ms ease;
}

/* Utilidad genérica para capas (topbar/gameover) */
.is-hidden{ opacity: 0; pointer-events: none; visibility: hidden; }
.is-visible{ opacity: 1; pointer-events: auto; visibility: visible; }

.overlay-screen.is-hidden{
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	visibility: hidden;
}

.overlay-screen.is-visible{
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.glass{
	background: rgba(10, 12, 18, 0.60);
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 18px 60px rgba(0,0,0,0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.panel{
	border-radius: 18px;
	padding: 18px;
	max-width: 680px;
	width: min(680px, 100%);
}

.muted{ color: rgba(255,255,255,0.72); font-weight: 600; }

.btn{
	appearance: none;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.92);
	border-radius: 14px;
	padding: 12px 14px;
	font: 800 15px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	letter-spacing: 0.3px;
	cursor: pointer;
	user-select: none;
	touch-action: manipulation;
}

.btn:active{ transform: translateY(1px); }

.btn.btn-secondary{
	font-weight: 750;
	background: rgba(255,255,255,0.04);
}

.btn.neon{
	border-color: rgba(0, 255, 245, 0.28);
	background: radial-gradient(120% 160% at 50% 0%, rgba(0,255,245,0.16), rgba(255,255,255,0.04));
	box-shadow:
		0 0 0 1px rgba(0,255,245,0.10) inset,
		0 10px 26px rgba(0,255,245,0.10);
}

/* MENU */
.menu-panel{ max-width: 520px; }
.brand{ text-align: center; margin-bottom: 14px; }
.title{ font-size: 34px; font-weight: 1000; letter-spacing: 2px; }
.subtitle{ margin-top: 4px; opacity: 0.78; font-weight: 700; }

.coins{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.25);
	margin: 0 auto 16px;
}
.coins--small{ margin: 0; padding: 8px 10px; border-radius: 12px; }
.coins-label{ opacity: 0.78; font-weight: 800; }
.coins-value{ font-variant-numeric: tabular-nums; font-weight: 1000; }

.menu-actions{ display: grid; gap: 10px; margin-top: 8px; }
.menu-footer{ text-align: center; margin-top: 14px; }

/* Botón ayuda (?) */
.btn-help{
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 14px;
	justify-self: center;
	font-size: 18px;
	font-weight: 1000;
}

/* HELP / TUTORIAL */
.help-panel{ max-width: 720px; width: min(720px, 100%); }
.help-header{ text-align: center; margin-bottom: 10px; }
.help-title{ font-size: 26px; font-weight: 1100; letter-spacing: 0.6px; }
.help-subtitle{ margin-top: 4px; }

.help-block{ margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.20); }
.help-block-title{ font-weight: 1000; letter-spacing: 0.4px; margin-bottom: 10px; }

.help-controls{ display: grid; grid-template-columns: 1fr; gap: 10px; }
.help-chip{ display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); font-weight: 900; }
.help-chip .muted{ font-weight: 900; }

.help-shapes{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.help-shape{ text-align: center; padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); }
.help-shape-visual{ font-size: 22px; letter-spacing: 1px; margin-bottom: 6px; }

.help-actions{ margin-top: 14px; display:flex; justify-content:center; }
.help-actions .btn{ width: min(420px, 100%); }

@media (max-width: 420px){
	.help-shapes{ grid-template-columns: 1fr; }
	.help-shape-visual{ font-size: 24px; }
}

/* UPDATE / INSTALL */
.update-panel{ max-width: 760px; width: min(760px, 100%); }
.update-header{ text-align: center; margin-bottom: 10px; }
.update-title{ font-size: 26px; font-weight: 1100; letter-spacing: 0.6px; }
.update-subtitle{ margin-top: 4px; }

.update-steps{
	margin: 10px 0 0;
	padding-left: 18px;
	line-height: 1.35;
}
.update-steps li{ margin: 8px 0; }
.update-steps a{ color: rgba(0,255,245,0.95); text-decoration: none; font-weight: 900; }
.update-steps a:hover{ text-decoration: underline; }

/* SHOP */
.shop-panel{ max-width: 980px; }
.shop-header{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.shop-title{ font-weight: 1000; letter-spacing: 0.6px; text-align: center; }
.shop-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.skin-card{
	border-radius: 16px;
	padding: 14px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.04);
}
.skin-title{ font-weight: 1000; letter-spacing: 0.4px; }
.skin-meta{ margin-top: 6px; }
.swatches{ display: flex; gap: 8px; margin-top: 12px; }
.swatch{ width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); }
.skin-actions{ display: flex; gap: 10px; margin-top: 14px; }
.skin-actions .btn{ flex: 1; }

/* GAME UI */
#gameUI{ justify-content: flex-start; pointer-events: none; }

.topbar{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	height: calc(var(--topbarH) + env(safe-area-inset-top));
	padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}

.ui-clickable{ pointer-events: auto; }

.hud{
	position: fixed;
	top: calc(env(safe-area-inset-top) + 10px);
	left: 10px;
	z-index: 9001;
	pointer-events: none;
}

.hud-card{ border-radius: 16px; padding: 12px 14px; pointer-events: none; }
.hud-row{ display: flex; gap: 18px; align-items: center; }
.hud-left, .hud-right{ display: flex; flex-direction: column; }
.hud-value{ font-weight: 1000; font-size: 18px; font-variant-numeric: tabular-nums; }

/* Cuenta (menú principal) */
.account-row{
	margin-top: 10px;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

/* En el menú principal, si un botón está oculto no debe ocupar espacio */
.account-row .btn.is-hidden{ display:none; }

.account-name{
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.35);
	font: 900 14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: rgba(255,255,255,0.92);
}

.account-name.is-hidden{ display:none; }

.gameover{
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
	z-index: 9100;
}

.gameover.is-hidden{ opacity: 0; pointer-events: none; visibility: hidden; }
.gameover .gameover-panel{ max-width: 520px; text-align: center; }
.gameover-title{ font-size: 22px; font-weight: 1000; letter-spacing: 0.6px; margin-bottom: 8px; }
.gameover-actions{ margin-top: 14px; }

/* Auth (login/registro) */
.auth-panel{ max-width: 520px; width: 100%; text-align: left; }
.auth-title{ font-size: 26px; font-weight: 1100; letter-spacing: 0.8px; margin-bottom: 2px; }
.auth-subtitle{ margin-bottom: 14px; }
.auth-form{ display: grid; gap: 10px; margin-top: 6px; }
.form-field{ display: grid; gap: 6px; }

.input{
	width: 100%;
	padding: 12px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.45);
	color: #fff;
	font: 800 14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	outline: none;
}

.input:focus-visible{
	box-shadow: 0 0 0 2px rgba(135, 255, 255, 0.25), 0 0 18px rgba(57, 239, 255, 0.18);
	border-color: rgba(57, 239, 255, 0.55);
}

.auth-actions{ display: grid; gap: 10px; margin-top: 12px; }
.auth-msg{ margin-top: 10px; min-height: 18px; }

/* Achievements */
.ach-panel{ max-width: 720px; width: 100%; }
.ach-header{
	display: grid;
	grid-template-columns: 110px 1fr 80px;
	gap: 10px;
	align-items: center;
}
.ach-title{ text-align: center; font-size: 22px; font-weight: 1100; letter-spacing: 0.6px; }
.ach-meta{ text-align: right; }

.ach-list{
	margin-top: 12px;
	max-height: min(62vh, 520px);
	overflow: auto;
	padding-right: 4px;
	outline: none;
}

.ach-item{
	display: grid;
	grid-template-columns: 44px 1fr 64px;
	gap: 10px;
	align-items: center;
	padding: 12px 12px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.32);
	margin-bottom: 10px;
}

.ach-icon{
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.10);
	font-size: 22px;
}

.ach-text{ display: grid; gap: 2px; }
.ach-name{ font-weight: 1100; }
.ach-desc{ opacity: 0.8; font-size: 13px; }

.ach-state{
	text-align: right;
	font-weight: 1000;
	letter-spacing: 0.3px;
}

.ach-item.is-locked{
	opacity: 0.72;
}

.ach-item.is-unlocked{
	border-color: rgba(57, 239, 255, 0.26);
	box-shadow: 0 0 0 1px rgba(57, 239, 255, 0.10), 0 0 22px rgba(57, 239, 255, 0.10);
}

.ach-item.is-unlocked .ach-icon{
	background: rgba(57, 239, 255, 0.12);
	border-color: rgba(57, 239, 255, 0.20);
}

/* Toast */
.toast-host{
	position: fixed;
	top: calc(env(safe-area-inset-top) + 12px);
	left: 0;
	right: 0;
	z-index: 9200;
	pointer-events: none;
	display: grid;
	place-items: center;
	gap: 10px;
	padding: 0 12px;
}

.toast{
	width: min(560px, 100%);
	padding: 12px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: rgba(255,255,255,0.95);
	font: 900 14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	box-shadow: 0 18px 50px rgba(0,0,0,0.35);
	transform: translateY(-10px);
	opacity: 0;
	transition: transform 220ms ease, opacity 220ms ease;
}

.toast.is-visible{
	transform: translateY(0);
	opacity: 1;
}

.toast small{ opacity: 0.8; font-weight: 800; }

/* Pause menu */
.pause{
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
	z-index: 9150;
}

.pause-panel{ max-width: 520px; text-align: center; }
.pause-title{ font-size: 28px; font-weight: 1100; letter-spacing: 1px; margin-bottom: 12px; }
.pause-actions{ display: grid; gap: 10px; margin-top: 10px; }
.pause-hint{ margin-top: 12px; }

.pause-field{ display: grid; gap: 6px; text-align: left; padding: 6px 2px; }
.pause-label{ font-size: 12px; letter-spacing: 0.3px; }
.pause-select{
	width: 100%;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(0,0,0,0.45);
	color: #fff;
	font: 800 14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	outline: none;
}

.pause-panel button:focus-visible,
.pause-panel select:focus-visible{
	box-shadow: 0 0 0 2px rgba(135, 255, 255, 0.25), 0 0 18px rgba(57, 239, 255, 0.18);
	border-color: rgba(57, 239, 255, 0.55);
}

/* Indicador para navegación con mando (no depende de focus-visible) */
.gp-focus{
	box-shadow: 0 0 0 2px rgba(135, 255, 255, 0.28), 0 0 24px rgba(57, 239, 255, 0.22) !important;
	border-color: rgba(57, 239, 255, 0.65) !important;
	transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 700px){
	.shop-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.panel{ padding: 16px; }
	.title{ font-size: 30px; }
}


/* iOS: mejor manejo de viewport dinámico */
@supports (height: 100dvh){
	html, body{ height: 100dvh; }
}

body{
	display: flex;
	flex-direction: column;
}

/* Topbar overlay (no quita espacio al juego: flota encima) */
.topbar{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 6000;
	height: calc(var(--topbarH) + env(safe-area-inset-top));
	padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none; /* deja pasar el input al canvas salvo en controles */
}

#musicControlsHost{
	pointer-events: auto;
}

/* Host para controles móviles (la propia barra se crea fixed en JS) */
#mobileControlsHost{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	z-index: 9500;
	pointer-events: none;
}

/* Reduce transparencias si el usuario lo pide */
@media (prefers-reduced-transparency: reduce){
	.glass{ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 12, 18, 0.92); }
}

@media (prefers-reduced-motion: reduce){
	.overlay-screen{ transition: none; }
}