:root{--ui-bg:rgba(15,15,20,.65);--ui-text:#f3f6ff;--muted:#9ca3af}
  html,body{margin:0;height:100%;background:#0a0a0f;overflow:hidden;font-family:system-ui,Inter,Segoe UI,Roboto,Arial,sans-serif}
  #game{position:fixed;inset:0;will-change:transform;transform:translateZ(0);}
  .hud{position:fixed;inset:0;pointer-events:none}
  .chip{background:var(--ui-bg);color:var(--ui-text);padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);font-weight:600}
  #timerChip{display:flex;gap:8px;align-items:center}
  #timerChip .ticon{display:inline-block;font-size:16px;line-height:1}
  .top{position:absolute;top:12px;left:12px;display:flex;gap:10px;align-items:center}
  .center{position:absolute;top:12px;left:50%;transform:translateX(-50%);text-align:center}
  .center .sub{color:var(--muted);font-size:13px;margin-top:4px}
  .right{position:absolute;top:12px;right:12px;display:flex;gap:10px;align-items:center}
  .bar{width:180px;height:14px;background:rgba(255,255,255,.12);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
  .bar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ef4444,#f59e0b,#10b981)}
  .foot{position:absolute;bottom:12px;left:12px}
  .notif{position:absolute;bottom:14px;right:14px;max-width:360px;background:var(--ui-bg);color:var(--ui-text);padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);display:none}
  .notif.show{display:block}
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50;color:#fff}
  .card{width:min(840px,94vw);background:rgba(17,24,39,.92);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;text-align:center}
  .btn{padding:10px 14px;border-radius:12px;border:none;background:#2563eb;color:#fff;font-weight:700;cursor:pointer}
  .subtle{color:#9ca3af;font-size:13px;margin-top:8px}
  #minimapWrap{position:absolute;top:60px;left:12px;pointer-events:none;display:none}
  #minimap{width:180px;height:180px;border-radius:12px;background:rgba(12,14,20,.72);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 18px rgba(0,0,0,.25)}
  #minimapLabel{margin-top:6px;color:#9ca3af;text-align:center;font-size:12px}
  #minimapWrap.show{display:block}
  #fallFX{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease-out;background:radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.92) 100%);z-index:9}
  #fallFX.show{opacity:1;animation:fallspin 2s ease-in forwards}
  @keyframes fallspin{0%{transform:scale(1) rotate(0deg)}100%{transform:scale(1.35) rotate(12deg)}}
  #gameOverO h1{font-size:48px;margin:0 0 6px;letter-spacing:.08em}

/* === Touch UI ===================================================== */
:root{ --hud-scale:1; }
#touchUI { position: fixed; inset: 0; pointer-events: none; z-index: 12; display:none; }
#touchUI.show { display:block; }

/* Right: vertical stack: JUMP (bottom) -> MAP -> LOOK */
.touch-right { position:absolute; right: 14px; bottom: 14px; width: 260px; height: 260px; pointer-events:auto; touch-action:none; }
.btn-circle { position:absolute; width:64px; height:64px; border-radius:999px; color:#fff; font-weight:800; border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.35); background:rgba(37,99,235,.66); }



/* Fullscreen button pinned near top-left of HUD */
#btnFS { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); width:46px; height:46px; border-radius:999px; background:rgba(0,0,0,.40); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; border:1px solid rgba(255,255,255,.35); pointer-events:auto; z-index:13; }
/* HUD mobile tweaks (smaller + wrap) */
@media (hover: none), (pointer: coarse) {
  .hud .chip { padding: 6px 9px; font-size: 13px; }
  .bar { width: 180px; height: 16px; }
  .top, .center, .right { top: calc(8px + env(safe-area-inset-top)); }
  .top { left: calc(8px + env(safe-area-inset-left)); gap: 6px; }
  .right { right: calc(8px + env(safe-area-inset-right)); gap: 6px; }
  .center .sub { font-size: 12px; }
}
/* iOS-specific nudge */
@supports (-webkit-touch-callout: none) {
  .hud { transform: scale(0.96); transform-origin: top center; }
  #charPreview { width: 220px !important; height: 160px !important; }
}
/* Notifications safe-area */
.notif{ bottom:calc(14px + env(safe-area-inset-bottom)); right:calc(14px + env(safe-area-inset-right)); }


/* Rotate Hint */
#rotateHint { position: fixed; inset: 0; background: rgba(0,0,0,.85); color: #fff; z-index: 30; display:none; align-items:center; justify-content:center; text-align:center; padding: 24px; }
#rotateHint.show { display:flex; }
#rotateHint .card { background: rgba(17,24,39,.95); border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 24px; max-width: 560px; }
#rotateHint h3 { margin:0 0 8px; }
#rotateHint .subtle { color:#9ca3af; margin-top:8px; }


@media (hover: none), (pointer: coarse) {
  .foot { left: 0; right: 0; }
  .foot .chip { width: 100vw; text-align:center; white-space: nowrap; overflow: hidden; text-overflow: clip; font-size: 11px; padding: 6px 8px; }
}

/* Smaller single-line instruction bar at absolute bottom on mobile */
@media (hover: none), (pointer: coarse) {
  .foot { left: 0; right: 0; bottom: 0 !important; position: absolute; }
  .foot .chip { width: 100vw; text-align:center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; padding: 5px 6px; }
}


/* iPhone start overlay: smaller preview and safe-area padding */
@supports (-webkit-touch-callout: none) {
  #charPreview { width: 165px !important; height: 120px !important; }
  #playBtn { margin-top: 8px !important; }
  .overlay .card { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
}


@media (hover: none), (pointer: coarse) {
  .foot .chip { font-size: 9px !important; padding: 4px 5px !important; }
}


/* iPhone: shrink start screen ~15% */
@media (hover: none) and (pointer: coarse) and (max-width: 430px) {
  #startO .card { transform: scale(0.85); transform-origin: top center; }
}


/* iPhone: smaller start screen typography so it fully fits */
@media (hover: none) and (pointer: coarse) and (max-width: 430px) {
  #startO h1 { font-size: 28px !important; }
  #startO .subtle { font-size: 12px !important; }
  #charSelect button { font-size: 13px !important; padding: 5px 8px !important; border-radius: 10px !important; }
  #charPreview { width: 155px !important; height: 112px !important; }
  #playBtn { font-size: 14px !important; padding: 8px 10px !important; }
}

/* Version badge (bottom-left, tiny) */
#verBadge{position:fixed;left:6px;bottom:6px;z-index:9999;font:600 10px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:#9ca3af;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);padding:2px 6px;border-radius:6px;pointer-events:none}


/* iPhone small-viewport: even smaller start screen so everything fits */
@media (hover: none) and (pointer: coarse) and (max-width: 430px) {
  #startO h1 { font-size: 26px !important; }
  #startO .card { transform: scale(0.82); transform-origin: top center; }
  #startO .subtle { font-size: 11px !important; }
  #charSelect button { font-size: 12px !important; padding: 4px 8px !important; border-radius: 10px !important; }
  #charPreview { width: 150px !important; height: 108px !important; }
  #playBtn { font-size: 13px !important; padding: 7px 10px !important; }
}


  /* Hide instructions button on All Done overlay */
  #allDoneO #btnVerInstrucciones{ display:none !important; }

/* ===== Level Complete FX (3s) ===== */
#levelCompleteFX{position:fixed;inset:0;display:none;pointer-events:none;z-index:2147483647;}
#levelCompleteFX.show{display:block;}
#levelCompleteFX .fx{position:absolute;inset:0;background:rgba(0,0,0,.88);opacity:0;}
#levelCompleteFX.show .fx{animation:levelCompletePulse 3s ease-in-out forwards;}
@keyframes levelCompletePulse{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}


/* ===== Mobile trail fix: disable heavy filters while actively touching (reduces ghosting on iOS/Android) ===== */
body.touch-moving #panelPausa,
body.touch-moving .overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* === OPTIMIZACIÓN: Reemplazar backdrop-filter en móviles === */
@media (hover: none), (pointer: coarse) {
  #panelPausa {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	background: rgba(0,0,0,0.85) !important;
  }
}



/* Force overlays to be centered and above HUD */
.overlay{
  position:fixed !important; inset:0 !important; 
  display:flex;  align-items:center !important; justify-content:center !important; 
  padding:24px; z-index:10000;
}
.overlay .card{ width:min(900px,92vw); margin:0 auto; text-align:center; }
body.overlay-open #soundBtn, body.overlay-open #soundToggle, body.overlay-open #sndBtn, body.overlay-open #muteBtn, body.overlay-open .soundBtn{ display:none !important; }


  #introO, .overlay.intro {
	position: fixed !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(0,0,0,.72) !important;
	z-index: 99999 !important;
	color: var(--ui-text);
  }
  #introO .card, #introO .overlay-card, #introO .card-hero {
	width: min(860px, 92vw) !important;
	background: var(--ui-bg, var(--panel-bg, #243a23)) !important;
	color: var(--ui-text, var(--panel-text, #e8f5e9)) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	border-radius: 16px !important;
	padding: 24px !important;
	text-align: center !important;
  }
  body.intro-visible #startO,
  body.intro-visible #start,
  body.intro-visible #playerSelect,
  body.intro-visible .start-overlay {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
  }
  
  
  /* Hide all game UI while intro is up */
	body.intro-visible #hud, 
	body.intro-visible #gameUI,
	body.intro-visible canvas { filter: none; }
  
	/* Selection screen centered BEFORE pressing Jugar */
	body.prestart #startO {
	  position: fixed !important;
	  inset: 0 !important;
	  display: flex !important;
	  align-items: center !important;
	  justify-content: center !important;
	  z-index: 9998 !important;
	}
	body.prestart #startO .card,
	body.prestart #startO .panel,
	body.prestart #startO .container {
	  margin: 0 auto !important;
	}
  
	/* Make sure the intro overlay fully disappears after continue */
	.overlay.intro.hidden,
	#introO.hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; }
	
	
	
	#introVideoWrap iframe{width:100%;height:100%;border:0;border-radius:14px;display:block;}
	  /* Maintain 16:9 by default; can be overridden if desired */
	  #introVideoWrap .embed-16x9{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
	  #introVideoWrap .embed-16x9 > iframe{position:absolute;top:0;left:0;width:100%;height:100%;}



  #lightPanel{
		  position: fixed; right: 10px; bottom: 10px; z-index: 99999;
		  background: rgba(17,24,39,.9); color: #e5e7eb; border: 1px solid rgba(255,255,255,.12);
		  border-radius: 12px; padding: 10px 12px; width: 260px; font: 600 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
		  box-shadow: 0 8px 24px rgba(0,0,0,.35);
		}
		#lightPanel h4{margin:0 0 6px; font-size:13px; letter-spacing:.02em;}
		#lightPanel .row{display:flex; align-items:center; gap:8px; margin:6px 0;}
		#lightPanel .row label{flex:0 0 78px; color:#9ca3af;}
		#lightPanel .row input[type=range]{flex:1;}
		#lightPanel .val{width:42px; text-align:right; color:#e5e7eb;}
	  #levelIntroO{z-index:100001 !important;}
	  
	  
	  
	  /* === LEVEL-COMPLETE (HTML+CSS only) — injected === */
	  #levelCompleteFX{ position:fixed; inset:0; display:none; pointer-events:none; z-index:2147483647; }
	  #levelCompleteFX.show{ display:block; }
	  
	  /* Capa que hace el fundido 3s */
	  #levelCompleteFX .fx{ position:absolute; inset:0; background:rgba(0,0,0,.88); opacity:0; }
	  #levelCompleteFX.show .fx{ animation: levelCompletePulse 3s ease-in-out forwards; }
	  
	  /* Slot centrado para tu HTML/CSS personalizado */
	  #levelCompleteFX .lcfx{ position:absolute; inset:0; display:grid; place-items:center; }
	  #levelCompleteFX .lcfx-msg{
		color:#fff; font:800 22px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
		text-shadow:0 2px 12px rgba(0,0,0,.65);
	  }
	  
	  /* Si no existe el keyframes del fundido, lo declaramos */
	  @keyframes levelCompletePulse{
		0%{opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{opacity:0}
	  }
	  
	  
	  
	  
	  
	  /* Aquí comienza el css de la animación al completar un nivel   */
	  
	  /* === FIX: escenario y variables para .lcfx === */ #levelCompleteFX .lcfx{ position:absolute; inset:0; /* hace de escenario para sus hijos */ pointer-events:none; /* Puente de variables para que las animaciones funcionen aunque .lcfx sea hermana de .fx */ --fx-size: 100vmin; --fx-dur: 3s; --fx-color: #ffeb3b; --fx-accent: #2563eb; } /* === NIVEL COMPLETADO (estilo imagen) === */ .anim-banner{ position:absolute; z-index:3; top:65%; left:50%; transform:translate(-50%,-50%); padding:2vmin 6vmin; background:linear-gradient(#1e3a8a,#2563eb); border-radius:2vmin; box-shadow:0 .8vmin 2vmin rgba(0,0,0,.25); color:#fff; font:bold 3vmin/1.1 system-ui, sans-serif; letter-spacing:.2vmin; animation:anim-pop var(--fx-dur) ease forwards; } @keyframes anim-pop{ 0%{transform:translate(-50%,-50%) scale(.2);opacity:0} 50%{transform:translate(-50%,-50%) scale(1.1);opacity:1} 70%{transform:translate(-50%,-50%) scale(.96)} 100%{transform:translate(-50%,-50%) scale(1)} } .anim-star{ position:absolute; z-index:2; width:10vmin; height:10vmin; opacity:0; background: radial-gradient(circle at 35% 30%, #fff 12%, var(--fx-color) 62%, #f59e0b 100%); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); filter: drop-shadow(0 0 1.2vmin rgba(255,215,0,.8)); animation:anim-star var(--fx-dur) ease forwards; } .anim-star.center{ top:30%; left:50%; transform:translate(-50%,-50%) scale(0); animation-delay:.2s;} .anim-star.left { top:36%; left:35%; transform:translate(-50%,-50%) scale(0); animation-delay:.35s;} .anim-star.right { top:36%; left:65%; transform:translate(-50%,-50%) scale(0); animation-delay:.5s;} @keyframes anim-star{ 0%{transform:translate(-50%,-50%) scale(0);opacity:0} 35%{transform:translate(-50%,-50%) scale(1.25);opacity:1} 60%{transform:translate(-50%,-50%) scale(.92)} 100%{transform:translate(-50%,-50%) scale(1)} } .anim-glow{ position:absolute; z-index:1; top:30%; left:50%; width:34vmin; height:34vmin; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,255,0,.55), rgba(255,255,0,0) 70%); opacity:0; animation:anim-glow calc(var(--fx-dur) * 1) ease-out forwards; } @keyframes anim-glow{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.2)} 40%{opacity:.7; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.4)} } /* === Confeti en loop === */ .anim-confetti{ position:absolute; z-index:4; width:.9vmin; height:2.2vmin; top:-6%; left:50%; background:var(--c,#e91e63); opacity:.95; border-radius:.2vmin; transform:translateX(-50%) rotate(0deg); animation:anim-fall 3s linear infinite; filter: drop-shadow(0 .4vmin .6vmin rgba(0,0,0,.25)); } @keyframes anim-fall{ 0% {transform:translate(-50%, -6%) translateX(var(--x,0)) rotate(0deg)} 70% {transform:translate(-50%, 75%) translateX(var(--x,0)) rotate(270deg)} 100%{transform:translate(-50%, 112%) translateX(var(--x,0)) rotate(360deg); opacity:0} }
	  /* Aquí termina el css de la animación al completar un nivel   */
	  
	  
	  
	  
	  
	  #pickupFX{position:fixed;inset:0;pointer-events:none;z-index:2147483600}
	  #pickupFX .pulse, #pickupFX .flash, #pickupFX .sparks{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
	  #pickupFX .pulse{width:0;height:0;border-radius:50%;box-shadow:0 0 0 0 rgba(255,255,255,.65);animation:pfPulse 420ms ease-out forwards}
	  #pickupFX .flash{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%);opacity:0;animation:pfFlash 240ms ease-out forwards}
	  #pickupFX .sparks{width:120px;height:120px;opacity:.9;animation:pfSparks 380ms ease-out forwards}
	  #pickupFX .sparks::before, #pickupFX .sparks::after{content:'';position:absolute;inset:0;background:radial-gradient(circle, rgba(255,255,255,1) 0 2px, transparent 3px) no-repeat; background-size: 6px 6px; background-position: 0 0, 30px 20px, 60px 40px, 90px 10px, 15px 60px; filter:blur(.2px)}
	  @keyframes pfPulse{0%{width:0;height:0;opacity:1}100%{width:200px;height:200px;opacity:0;box-shadow:0 0 30px 8px rgba(255,255,255,.35)}}
	  @keyframes pfFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
	  @keyframes pfSparks{0%{transform:translate(-50%,-50%) scale(.8);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.15);opacity:0}}
	  
	  
	  
	  /* Show mobile controls only on touch; keep desktop controls visible */
	  @media (hover: hover) and (pointer: fine) {
		#touchUI, .touch-right { display: none !important; }
	  }




/* camera icon inside circular button */
	  .btn-circle .icon { display:inline-flex; align-items:center; justify-content:center; color:#fff; }
	  .btn-circle svg { display:block; }





/* === Player Glow (2D ring synced with timer glow) === */
	  
	  #playerGlow{
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 2147483600;
		display: none;
		/* Subtle red pulse, full-screen; center set via --pg-x / --pg-y */
		--pg-x: 50vw;
		--pg-y: 50vh;
		--pg-size: 42vmin;
		background:
		  radial-gradient(circle var(--pg-size) at var(--pg-x) var(--pg-y),
			rgba(239,68,68,.18) 0%,
			rgba(239,68,68,.12) 30%,
			rgba(239,68,68,.08) 44%,
			rgba(239,68,68,0) 60%);
		animation: glowPulse .85s ease-in-out infinite;
	  }
	  
	  /* ===== SOLUCIÓN: Ocultar el glow cuando hay un overlay ===== */
	  body.overlay-open #playerGlow {
		display: none !important;
	  }
	  
	  
	  
	  
	  
	  /* Subtle center text on player glow */
	  #playerGlow .pg-text{
		position: fixed;
		left: var(--pg-x);
		top:  var(--pg-y);
		transform: translate(-50%,-50%);
		pointer-events: none;
		font-size: clamp(12px, 2.6vmin, 20px);
		font-weight: 600;
		letter-spacing: .02em;
		color: rgba(255,245,245,.82);
		text-shadow: 0 0 6px rgba(239,68,68,.45), 0 0 14px rgba(239,68,68,.25);
		opacity: .72;
		animation: pgTextPulse 1.2s ease-in-out infinite;
	  }
	  @keyframes pgTextPulse{
		0%,100%{ opacity:.38; transform: translate(-50%,-50%) scale(.98); }
		50%    { opacity:.88; transform: translate(-50%,-50%) scale(1.00); }
	  }
	  
	  
	  
	  
	  
	  
	  /* === Debug badge to visualize touch state === */
	  #touchBadge{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:2147483647;
		font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
		color:#fff;background:rgba(37,99,235,.9);border:1px solid rgba(255,255,255,.25);
		padding:6px 10px;border-radius:999px;display:none;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.35);}
	  //body.touch-moving #touchBadge{display:block;}
	  
	  
	  
	  
	  /* === Visible motion trail overlay (mobile) === */
	  #touchTrail{
		position:fixed; inset:0;
		pointer-events:none;
		z-index:11; /* below #touchUI (12) and HUD, above #game */
		width:100vw; height:100vh;
	  }






/* === Simplified mobile buttons: keep ONLY container bottom-right positioning === */
	  /* The table controls the internal layout; neutralize any per-button absolute rules. */
	  @media (hover: none), (pointer: coarse) {
		.touch-right {
		  position: fixed !important;
		  right: 14px !important;
		  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
		  left: auto !important;
		  top: auto !important;
		  width: auto !important;
		  height: auto !important;
		  pointer-events: auto !important;
		  z-index: 12 !important;
		}
		.touch-right table {
		  border-collapse: separate !important;
		  border-spacing: 10px !important; /* spacing between buttons */
		}
		.touch-right .btn-circle {
		  position: static !important;
		  width: 60px !important;
		  height: 60px !important;
		}
		/* Neutralize any individual absolute placements */
		#btnJump, #btnMap, #btnLook, #btnRecenter, #btnLight, #btnShoot {
		  background: var(--btn-bg, rgba(255,255,255,0.08));
		  right: auto !important;
		  left: auto !important;
		  top: auto !important;
		  bottom: auto !important;
		}
	  }
	  /* On non-touch (desktop), hide the mobile table if desired */
	  @media (hover: hover) and (pointer: fine) {
		.touch-right { display: none !important; }
	  }
	  
	  
	  
	  
	  /* Phones only (Android/iPhone): hide game title (top-left) and goals (center), keep Level chip visible. */
	  @media (hover: none) and (pointer: coarse) {
		html:not(.is-ipad) .hud #lvlTitle,
		html:not(.is-ipad) .hud #goal { display: none !important; }
	  }


  /* Boot overlay */
		body.overlay-open{ overflow:hidden; }
		#bootLoading{
		  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
		  background:#000; color:#fff; z-index:2147483647; pointer-events:all;
		  opacity:1; transform:scale(1); transition: opacity 360ms ease, transform 360ms ease;
		}
		#bootLoading.fadeout{ opacity:0 !important; transform:scale(.985); pointer-events:none !important; }
		#bootLoading .card{
		  background:rgba(17,24,39,.96); border:1px solid rgba(255,255,255,.14);
		  border-radius:16px; padding:18px 22px; text-align:center; width:min(560px,92vw);
		}
		#bootMsg{ font:800 18px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; letter-spacing:.02em; }
		#bootSub{ margin-top:6px; color:#9ca3af; font-size:13px; }
	  
		/* Overlay fades: only for known overlays to avoid side effects */
		.overlay.fx { will-change: opacity; }
		.overlay.fx.show { opacity: 1 !important; visibility: visible !important; transition: opacity 420ms ease-in-out; }
		.overlay.fx.hide { opacity: 0 !important; visibility: hidden !important; transition: opacity 420ms ease-in-out; }
	  
		/* Pause special case: show = instant; hide = longer */
		#panelPausa, #panelPausa.fx.show, #panelPausa.fx.hide { transition: none !important; }
	  
		/* Character preview mini-loader */
		#charPreviewWrap{ position:relative; }
		#charPreviewLoading{
		  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
		  background:rgba(0,0,0,.60); color:#e5e7eb; border-radius:10px; z-index:999999; font-weight:800;
		}
		#charPreviewLoading.show{ display:flex; }
		
		
		/* No fades for level overlays */
		#levelIntroO, #allDoneO, #gameOverO,
		#levelIntroO.fx.show, #levelIntroO.fx.hide,
		#allDoneO.fx.show, #allDoneO.fx.hide,
		#gameOverO.fx.show, #gameOverO.fx.hide { transition: none !important; }
		
		
		
		
		
		
		/* ===== FINAL OVERRIDES (v13) ====================================== */
		/* Common variables */
		:root{ --btnSize:56px; --btnGap:8px; }
		
		/* iPhone: make start screen much more compact so it always fits */
		html.is-iphone #startO h1{ font-size:24px !important; }
		html.is-iphone #startO .subtle{ font-size:11px !important; }
		html.is-iphone #charSelect button{ font-size:12px !important; padding:4px 8px !important; border-radius:10px !important; }
		html.is-iphone #charPreview{ width:145px !important; height:104px !important; }
		html.is-iphone #startO .card{ transform:scale(0.80) !important; transform-origin: top center !important; }
		html.is-iphone #playBtn{ font-size:13px !important; padding:7px 10px !important; }
		
		
		
		/* Instruction bar: ultra-compact and stuck to bottom */
		@media (hover:none) and (pointer:coarse){
		  .foot{ left:0 !important; right:0 !important; bottom:0 !important; position:absolute !important; }
		  .foot .chip{ width:100vw !important; font-size:9px !important; padding:4px 5px !important; line-height:1.1 !important; white-space:nowrap !important; }
		}
		/* ================================================================ */
	  
	  
	  
	  
	  #lightUI{position:fixed;left:16px;bottom:16px;z-index:999999; display:none;
		background:rgba(18,22,28,.88);color:#e7eef5;border:1px solid rgba(255,255,255,.12);
		border-radius:12px;padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.3);
		font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-width:320px}
	  #lightUI .row{display:flex;align-items:center;gap:8px;margin:6px 0}
	  #lightUI input[type=range]{width:220px}
	  #lightUI .val{width:52px;text-align:right;font-variant-numeric:tabular-nums;opacity:.9}
	  #lightBtn{position:fixed;left:16px;bottom:16px;z-index:999998;width:36px;height:36px;border-radius:999px;
		border:1px solid rgba(255,255,255,.12);background:rgba(18,22,28,.88);color:#e7eef5;
		display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3)}
	  #lightUI button{background:#3b3f46;border:0;color:white;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px}
	  
	  
	  
	  #pauseOverlay{
		  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
		  background: rgba(0,0,0,.35); color:#fff; font: 800 38px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
		  letter-spacing:.06em; z-index: 99998; -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
		}
		body.paused #pauseOverlay{ display:flex; }
		
		
		
		/* Resalte de foco para navegación con gamepad (alineado al UI) */
		.gp-focus {
		  outline: 2px solid var(--ui-text);
		  box-shadow: 0 0 0 3px rgba(37,99,235,.6) inset; /* azul usado en .btn */
		  border-radius: 12px;
		}