:root { --fx: 0px; }
/* =====================================================================
   POLEANA · estilos chibi/cómic. Todo se escala con --u (px por unidad
   de diseño, sobre un lienzo de 1280×720) que calcula main.js.
   ===================================================================== */
:root {
  --u: 1px;
  --noche: #1b1a3a; --noche2: #12112a; --tinta: #26163a; --tinta2: #3b2358;
  --oro: #ffd24a; --oro2: #f0a91c; --oro3: #a8650a; --crema: #fff4dc;
  --verde: #4ccd3f; --verde2: #1f8f2b; --rojo: #f04545; --rojo2: #a81d2c; --azul: #3aa0ff; --azul2: #1b54b8;
  --morado: #8a5cff; --morado2: #4b2aa8; --ambar: #ffa62e; --ambar2: #c8620f;
  --amarillo: #ffc428; --crimson: #ec403c; --verdeJ: #5cc43c; --cyan: #32aaeb; --poli: #2e4bb0;
  --fuente: 'Lilita One', 'Nunito', system-ui, sans-serif;
  --titulo: 'Luckiest Guy', 'Lilita One', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noche2); color: #fff; font-family: var(--fuente);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; touch-action: none; }
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
button { font-family: inherit; }
input { font-family: inherit; user-select: text; -webkit-user-select: text; }

#app { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; background: var(--noche2); }
#app.girado { transform: rotate(90deg) translateY(-100%); transform-origin: top left; }
#fondo { position: absolute; inset: -3%; background: var(--noche) center/cover no-repeat; transition: filter .6s, opacity .6s, background-image .6s; }
#fondo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(10, 6, 30, .55) 100%); }
#fondo.juego { filter: blur(3px) brightness(.72) saturate(1.1); }
#fondo.menu { filter: brightness(.9); }
#escena { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; display: block; opacity: 0; transition: opacity .5s; }
#escena.visible { opacity: 1; }
#capa-etiquetas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#pantallas, #modales, #toasts, #hud { position: absolute; inset: 0; pointer-events: none; }
#pantallas > *, #modales > *, #hud > * { pointer-events: auto; }
#hud[hidden] { display: none; }
#pantallas { z-index: 1; } #hud { z-index: 2; } #modales { z-index: 50; } #toasts { z-index: 60; }

/* ---------- arranque ---------- */
#arranque { position: fixed; inset: 0; background: #12112a url(assets/fondos/entrada_corriendo.jpg) center/cover no-repeat; display: flex; align-items: center; justify-content: center; z-index: 999; transition: opacity .5s; }
#arranque.fuera { opacity: 0; pointer-events: none; }
.arranque-caja { text-align: center; font-size: 22px; color: var(--oro); text-shadow: 0 3px 0 #000; }
.arranque-moneda { width: 90px; height: 90px; margin: 0 auto 14px; background: url(assets/ui/icono_carga_moneda.webp) center/contain no-repeat; animation: girarY 1.1s linear infinite; }
@keyframes girarY { from { transform: rotateY(0) } to { transform: rotateY(360deg) } }

/* ---------- texto ---------- */
.comic { font-family: var(--titulo); letter-spacing: .02em; color: var(--oro); -webkit-text-stroke: calc(var(--u) * 2.2) var(--tinta);
  paint-order: stroke fill; text-shadow: 0 calc(var(--u) * 5) 0 var(--tinta), 0 calc(var(--u) * 8) calc(var(--u) * 10) rgba(0,0,0,.35); }
.comic-oro { background: linear-gradient(180deg, #fff6b0 0%, #ffd24a 45%, #f39a12 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: calc(var(--u) * 2.4) var(--tinta); paint-order: stroke fill; filter: drop-shadow(0 calc(var(--u) * 5) 0 var(--tinta)); font-family: var(--titulo); padding-top: .18em; line-height: 1.15; }
.contorno { color: #fff; -webkit-text-stroke: calc(var(--u) * 1.6) var(--tinta); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * 3) 0 var(--tinta); }
.chico { font-size: calc(var(--u) * 15 + var(--fx)); }

/* ---------- botones ---------- */
.btn { --c1: var(--verde); --c2: var(--verde2); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
  min-height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 26); border-radius: calc(var(--u) * 18); cursor: pointer;
  border: calc(var(--u) * 4) solid var(--tinta); color: #fff; font-size: calc(var(--u) * 24); line-height: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 70%, #fff) 0%, var(--c1) 45%, var(--c2) 100%);
  box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255,255,255,.55), inset 0 calc(var(--u) * -5) 0 rgba(0,0,0,.25), 0 calc(var(--u) * 6) 0 var(--tinta), 0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(0,0,0,.35);
  -webkit-text-stroke: calc(var(--u) * 1.5) var(--tinta); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * 2) 0 var(--tinta);
  transition: transform .08s, filter .15s; outline: 3px solid transparent; }
.btn::before { content: ''; position: absolute; inset: calc(var(--u) * -8); border-radius: calc(var(--u) * 24); border: calc(var(--u) * 3) solid var(--oro); box-shadow: 0 0 0 calc(var(--u) * 2) var(--tinta); pointer-events: none; opacity: .95; }
.btn:active, .btn.presionado { transform: translateY(calc(var(--u) * 5)); box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255,255,255,.4), 0 calc(var(--u) * 1) 0 var(--tinta); }
.btn:disabled, .btn.apagado { filter: grayscale(.9) brightness(.8); cursor: not-allowed; }
.btn.rojo { --c1: var(--rojo); --c2: var(--rojo2); } .btn.azul { --c1: var(--azul); --c2: var(--azul2); }
.btn.ambar { --c1: var(--ambar); --c2: var(--ambar2); } .btn.morado { --c1: var(--morado); --c2: var(--morado2); }
.btn.oro { --c1: #ffd84a; --c2: #d9860b; } .btn.gris { --c1: #8b8ba3; --c2: #4c4b62; }
.btn.chico { min-height: calc(var(--u) * 42); font-size: calc(var(--u) * 18 + var(--fx)); padding: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 14); }
.btn.chico::before { inset: calc(var(--u) * -6); }
.btn.grande { min-height: calc(var(--u) * 76); font-size: calc(var(--u) * 34); padding: 0 calc(var(--u) * 40); }
.btn.sinmarco::before { display: none; }
.btn .ico { height: calc(var(--u) * 30); width: auto; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.btn.chico .ico { height: calc(var(--u) * 24); }
.btn-img { background: none; border: 0; padding: 0; cursor: pointer; transition: transform .1s, filter .15s; filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 6) rgba(0,0,0,.4)); }
.btn-img img { display: block; width: 100%; height: auto; }
.btn-img:active { transform: scale(.92); }
.btn-img:hover { filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 6) rgba(0,0,0,.4)) brightness(1.08); }
.insignia { position: absolute; top: calc(var(--u) * -8); right: calc(var(--u) * -8); min-width: calc(var(--u) * 30); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 6); border-radius: 99px;
  background: radial-gradient(circle at 35% 30%, #ff8a80, #e0262e 60%, #9e0f1d); border: calc(var(--u) * 3) solid #ffd24a; box-shadow: 0 0 0 calc(var(--u) * 2) var(--tinta);
  font-size: calc(var(--u) * 17 + var(--fx)); display: flex; align-items: center; justify-content: center; color: #fff; -webkit-text-stroke: calc(var(--u) * 1) var(--tinta); paint-order: stroke fill; z-index: 3; animation: latir 1.6s infinite; }
.insignia:empty { display: none; }
@keyframes latir { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.15) } }
@keyframes flotar { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(calc(var(--u) * -8)) } }
@keyframes brillo { 0%, 100% { filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255,220,80,.6)) } 50% { filter: drop-shadow(0 0 calc(var(--u) * 18) rgba(255,220,80,1)) } }

/* ---------- paneles ---------- */
.panel { position: relative; background: linear-gradient(180deg, #2b2a5c, #1c1b43); border: calc(var(--u) * 4) solid var(--tinta); border-radius: calc(var(--u) * 22);
  box-shadow: inset 0 0 0 calc(var(--u) * 4) var(--oro2), inset 0 0 0 calc(var(--u) * 7) var(--tinta), 0 calc(var(--u) * 8) 0 var(--tinta), 0 calc(var(--u) * 18) calc(var(--u) * 30) rgba(0,0,0,.45); padding: calc(var(--u) * 20); }
.panel-crema { position: relative; background: #fbeccb; color: var(--tinta); border-radius: calc(var(--u) * 20); border: calc(var(--u) * 4) solid var(--tinta);
  box-shadow: inset 0 0 0 calc(var(--u) * 5) #e8c07a, inset 0 0 0 calc(var(--u) * 8) var(--tinta), 0 calc(var(--u) * 8) 0 var(--tinta); padding: calc(var(--u) * 18); }
.cinta { position: absolute; left: 50%; top: 0; transform: translate(-50%, -62%); padding: calc(var(--u) * 10) calc(var(--u) * 46); white-space: nowrap;
  background: linear-gradient(180deg, #5fd35a, #1f8f2b); border: calc(var(--u) * 4) solid var(--tinta); border-radius: calc(var(--u) * 14);
  box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--oro), 0 calc(var(--u) * 6) 0 var(--tinta); font-size: calc(var(--u) * 30); z-index: 2; }
.cinta::before, .cinta::after { content: ''; position: absolute; top: 28%; width: calc(var(--u) * 34); height: 72%; background: #177522; border: calc(var(--u) * 4) solid var(--tinta); z-index: -1; }
.cinta::before { left: calc(var(--u) * -26); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); }
.cinta::after { right: calc(var(--u) * -26); clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.cinta.roja { background: linear-gradient(180deg, #ff6a5e, #b21e2d); } .cinta.roja::before, .cinta.roja::after { background: #8c1520; }
.cinta.azul { background: linear-gradient(180deg, #5fb8ff, #1b54b8); } .cinta.azul::before, .cinta.azul::after { background: #163f8a; }
.cinta.morada { background: linear-gradient(180deg, #a585ff, #4b2aa8); } .cinta.morada::before, .cinta.morada::after { background: #3a1f86; }
.cerrar { position: absolute; top: calc(var(--u) * -18); right: calc(var(--u) * -18); width: calc(var(--u) * 58); height: calc(var(--u) * 58); z-index: 5; }

/* ---------- pantallas ---------- */
.pantalla { position: absolute; inset: 0; display: flex; flex-direction: column; animation: entrar .35s ease-out; }
.pantalla.saliendo { animation: salir .25s ease-in forwards; pointer-events: none; }
@keyframes entrar { from { opacity: .55; transform: scale(1.03) } to { opacity: 1; transform: none } }   /* nunca arranca invisible: si el aparato va lento, la pantalla ya se ve */
@keyframes salir { to { opacity: 0; transform: scale(.97) } }
.pos-abs { position: absolute; }
.fila { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.col { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.centro { display: flex; align-items: center; justify-content: center; }
.relleno { flex: 1; }

/* barra superior */
.barra-sup { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 88); display: flex; align-items: center; gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 10) calc(var(--u) * 20); padding-left: max(calc(var(--u) * 20), env(safe-area-inset-left)); padding-right: max(calc(var(--u) * 20), env(safe-area-inset-right)); z-index: 5; }
.chip-jugador { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 70); padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 6); cursor: pointer;
  background: linear-gradient(180deg, #226b35, #0f3f22); border: calc(var(--u) * 4) solid var(--tinta); border-radius: calc(var(--u) * 20); box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--oro), 0 calc(var(--u) * 5) 0 var(--tinta); }
.avatar { position: relative; width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: 50%; border: calc(var(--u) * 4) solid var(--oro); box-shadow: 0 0 0 calc(var(--u) * 3) var(--tinta);
  background: radial-gradient(circle at 50% 30%, #6fd0ff, #2a5fb0); overflow: hidden; flex: none; }
.avatar img { position: absolute; left: 50%; top: 4%; width: 150%; transform: translateX(-50%); }
.avatar.marco-nopal { border-color: #5cc43c; } .avatar.marco-oro { border-color: #fff09a; box-shadow: 0 0 0 calc(var(--u) * 3) var(--tinta), 0 0 calc(var(--u) * 14) #ffd24a; }
.avatar.marco-fuego { border-color: #ff6a2a; box-shadow: 0 0 0 calc(var(--u) * 3) var(--tinta), 0 0 calc(var(--u) * 16) #ff4a1a; animation: brillo 1.4s infinite; }
.nivel-estrella { position: relative; width: calc(var(--u) * 40); height: calc(var(--u) * 40); background: url(assets/ui/icono_estrella.webp) center/contain no-repeat; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 16 + var(--fx)); padding-top: calc(var(--u) * 3); }
.barra-xp { position: relative; width: calc(var(--u) * 150); height: calc(var(--u) * 18); background: #151433; border: calc(var(--u) * 3) solid var(--tinta); border-radius: 99px; overflow: hidden; box-shadow: 0 0 0 calc(var(--u) * 2) var(--oro2); }
.barra-xp > i { position: absolute; inset: 0; right: auto; background: linear-gradient(180deg, #c49bff, #7b3cff); border-radius: 99px; transition: width .6s; }
.chip-moneda { position: relative; display: flex; align-items: center; height: calc(var(--u) * 52); min-width: calc(var(--u) * 170); padding: 0 calc(var(--u) * 50) 0 calc(var(--u) * 50);
  background: #171634; border: calc(var(--u) * 4) solid var(--tinta); border-radius: 99px; box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--oro2), 0 calc(var(--u) * 4) 0 var(--tinta); font-size: calc(var(--u) * 24); justify-content: center; }
.chip-moneda > img { position: absolute; left: calc(var(--u) * -12); height: calc(var(--u) * 58); }
.chip-moneda .mas { position: absolute; right: calc(var(--u) * -6); width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%; background: radial-gradient(circle at 40% 30%, #9cf37a, #2c9c2a);
  border: calc(var(--u) * 3) solid var(--tinta); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--oro); font-size: calc(var(--u) * 30); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
.chip-moneda .sub { position: absolute; bottom: calc(var(--u) * -16); font-size: calc(var(--u) * 13 + var(--fx)); color: var(--crema); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.chip-moneda.salta > span { animation: saltito .5s; }
@keyframes saltito { 30% { transform: scale(1.35); color: var(--oro) } }

/* lobby */
.lobby-centro { position: absolute; left: 50%; top: calc(var(--u) * 78); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.btn-jugar { width: calc(var(--u) * 196); animation: flotar 3s ease-in-out infinite; }
.btn-jugar img { filter: drop-shadow(0 0 calc(var(--u) * 20) rgba(255,210,80,.6)); }
.lobby-modos { position: absolute; left: 50%; bottom: calc(var(--u) * 104); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 18); }
.modo-card { position: relative; width: calc(var(--u) * 196); height: calc(var(--u) * 132); border-radius: calc(var(--u) * 20); overflow: hidden; cursor: pointer; border: calc(var(--u) * 4) solid var(--tinta);
  box-shadow: inset 0 0 0 calc(var(--u) * 4) var(--oro), 0 calc(var(--u) * 7) 0 var(--tinta), 0 calc(var(--u) * 14) calc(var(--u) * 20) rgba(0,0,0,.4); background: #222 center/cover; transition: transform .12s; }
.modo-card:active { transform: scale(.95); }
.modo-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(20,10,40,.9)); }
.modo-card .nombre { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 26); text-align: center; font-size: calc(var(--u) * 24); z-index: 2; }
.modo-card .desc { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 8); text-align: center; font-size: calc(var(--u) * 13 + var(--fx)); color: var(--crema); z-index: 2; }
.modo-card .ico { position: absolute; left: 50%; top: calc(var(--u) * 8); transform: translateX(-50%); height: calc(var(--u) * 58); z-index: 2; filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)); }
.lado-izq, .lado-der { position: absolute; top: calc(var(--u) * 110); display: flex; flex-direction: column; gap: calc(var(--u) * 14); z-index: 4; }
.lado-izq { left: max(calc(var(--u) * 20), env(safe-area-inset-left)); } .lado-der { right: max(calc(var(--u) * 20), env(safe-area-inset-right)); align-items: flex-end; }
.btn-lateral { position: relative; width: calc(var(--u) * 96); height: calc(var(--u) * 96); border-radius: calc(var(--u) * 22); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #34336e, #1d1c47); border: calc(var(--u) * 4) solid var(--tinta); box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--oro2), 0 calc(var(--u) * 5) 0 var(--tinta); transition: transform .1s; }
.btn-lateral:active { transform: scale(.93); }
.btn-lateral img { height: calc(var(--u) * 52); filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
.btn-lateral span { font-size: calc(var(--u) * 14 + var(--fx)); margin-top: calc(var(--u) * 2); }
.btn-lateral.brilla { animation: brillo 1.5s infinite; }
.nav-inferior { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10); padding-bottom: max(calc(var(--u) * 12), env(safe-area-inset-bottom)); z-index: 5; }
.nav-inferior .btn-img { width: calc(var(--u) * 180); position: relative; }
.cofres { display: flex; gap: calc(var(--u) * 10); }
.cofre-slot { position: relative; width: calc(var(--u) * 84); height: calc(var(--u) * 84); border-radius: calc(var(--u) * 16); background: rgba(10,8,30,.65); border: calc(var(--u) * 3) dashed rgba(255,210,80,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.cofre-slot.lleno { border: calc(var(--u) * 3) solid var(--oro2); background: linear-gradient(180deg, #3a2a6e, #1f1745); }
.cofre-slot img { height: calc(var(--u) * 52); }
.cofre-slot .t { font-size: calc(var(--u) * 13 + var(--fx)); }
.cofre-slot.listo { animation: brillo 1.2s infinite; }
.cofre-slot.epico img { filter: hue-rotate(250deg) saturate(1.4); } .cofre-slot.raro img { filter: hue-rotate(160deg); } .cofre-slot.legendario img { filter: hue-rotate(40deg) saturate(2) brightness(1.2); }

/* ---------- modales ---------- */
.modal-fondo { position: absolute; inset: 0; background: rgba(8,5,25,.72); display: flex; align-items: center; justify-content: center; animation: aparecer .2s; backdrop-filter: blur(2px); }
@keyframes aparecer { from { opacity: 0 } }
.modal { position: relative; min-width: calc(var(--u) * 460); max-width: calc(var(--u) * 1100); max-height: calc(var(--u) * 640); padding: calc(var(--u) * 46) calc(var(--u) * 30) calc(var(--u) * 26); animation: popIn .35s cubic-bezier(.2,1.5,.4,1); display: flex; flex-direction: column; }
@keyframes popIn { from { transform: scale(.6); opacity: 0 } }
.modal .cuerpo { overflow-y: auto; overflow-x: hidden; flex: 1; font-size: calc(var(--u) * 20 + var(--fx)); line-height: 1.35; touch-action: pan-y; padding: calc(var(--u) * 4); }
.modal .botones { display: flex; justify-content: center; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 22); flex-wrap: wrap; }
.modal p { margin: calc(var(--u) * 6) 0; }
.cuerpo::-webkit-scrollbar { width: calc(var(--u) * 10); } .cuerpo::-webkit-scrollbar-thumb { background: var(--oro2); border-radius: 99px; }
.toast { position: absolute; left: 50%; top: calc(var(--u) * 100); transform: translateX(-50%); padding: calc(var(--u) * 12) calc(var(--u) * 26); font-size: calc(var(--u) * 21 + var(--fx)); background: rgba(20,15,50,.92);
  border: calc(var(--u) * 3) solid var(--oro); border-radius: 99px; box-shadow: 0 0 0 calc(var(--u) * 3) var(--tinta), 0 calc(var(--u) * 6) 0 var(--tinta); animation: toast 2.6s forwards; white-space: nowrap; z-index: 900; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -20px) } 10%, 85% { opacity: 1; transform: translate(-50%, 0) } 100% { opacity: 0; transform: translate(-50%, -10px) } }

/* premios */
.premios { display: flex; gap: calc(var(--u) * 18); justify-content: center; flex-wrap: wrap; }
.premio { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); min-width: calc(var(--u) * 96); padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 16); background: rgba(0,0,0,.25); border: calc(var(--u) * 3) solid rgba(255,210,80,.5); animation: popIn .4s backwards; }
.premio img { height: calc(var(--u) * 56); }
.premio b { font-size: calc(var(--u) * 24); }

/* ---------- HUD de partida ---------- */
.hud-jugadores { position: absolute; left: max(calc(var(--u) * 12), env(safe-area-inset-left)); top: calc(var(--u) * 76); display: flex; flex-direction: column; gap: calc(var(--u) * 10); z-index: 6; }
.hud-j { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 8); width: calc(var(--u) * 210); height: calc(var(--u) * 74); padding: calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 4);
  background: linear-gradient(90deg, rgba(20,18,55,.92), rgba(35,30,80,.85)); border: calc(var(--u) * 3) solid var(--tinta); border-radius: calc(var(--u) * 40) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 40);
  box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--c, #888), 0 calc(var(--u) * 4) 0 var(--tinta); transition: transform .25s, box-shadow .25s; }
.hud-j.turno { transform: translateX(calc(var(--u) * 14)) scale(1.06); box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--c), 0 0 calc(var(--u) * 22) var(--c), 0 calc(var(--u) * 4) 0 var(--tinta); }
.hud-j .avatar { width: calc(var(--u) * 62); height: calc(var(--u) * 62); border-color: var(--c); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c)); }
.hud-j .nom { font-size: calc(var(--u) * 18 + var(--fx)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 125); }
.hud-j .dato { font-size: calc(var(--u) * 15 + var(--fx)); color: var(--crema); display: flex; gap: calc(var(--u) * 8); align-items: center; }
.hud-j .dato img { height: calc(var(--u) * 20); }
.hud-j .puntitos { display: flex; gap: calc(var(--u) * 3); }
.hud-j .puntitos i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; background: rgba(255,255,255,.18); border: calc(var(--u) * 2) solid var(--tinta); }
.hud-j .puntitos i.si { background: var(--c); box-shadow: 0 0 calc(var(--u) * 6) var(--c); }
.hud-j .tag { position: absolute; right: calc(var(--u) * 6); top: calc(var(--u) * -10); font-size: calc(var(--u) * 12 + var(--fx)); background: var(--tinta2); border: calc(var(--u) * 2) solid var(--tinta); border-radius: 99px; padding: calc(var(--u) * 2) calc(var(--u) * 8); }
.hud-j .reloj { position: absolute; left: calc(var(--u) * 1); top: calc(var(--u) * 1); width: calc(var(--u) * 72); height: calc(var(--u) * 72); pointer-events: none; }
.hud-sup { position: absolute; top: calc(var(--u) * 10); left: max(calc(var(--u) * 12), env(safe-area-inset-left)); right: max(calc(var(--u) * 12), env(safe-area-inset-right)); display: flex; align-items: flex-start; gap: calc(var(--u) * 12); z-index: 7; pointer-events: none; }
.hud-sup > * { pointer-events: auto; }
.hud-btn { width: calc(var(--u) * 64); height: calc(var(--u) * 64); }
.bote { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 6); background: rgba(15,12,40,.85); border: calc(var(--u) * 3) solid var(--oro2); border-radius: 99px; box-shadow: 0 0 0 calc(var(--u) * 3) var(--tinta); font-size: calc(var(--u) * 22 + var(--fx)); }
.bote img { height: calc(var(--u) * 50); }
.bote.salta { animation: saltito .5s; }
.objetivos { margin: 0 auto; display: flex; gap: calc(var(--u) * 10); background: rgba(15,12,40,.8); border: calc(var(--u) * 3) solid var(--tinta); border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 6) calc(var(--u) * 14); font-size: calc(var(--u) * 15 + var(--fx)); box-shadow: 0 calc(var(--u) * 4) 0 var(--tinta); }
.objetivos .obj { display: flex; align-items: center; gap: calc(var(--u) * 5); opacity: .7; }
.objetivos .obj.ok { opacity: 1; color: var(--oro); }
.objetivos .obj img { height: calc(var(--u) * 22); filter: grayscale(1) brightness(.7); }
.objetivos .obj.ok img { filter: none; }
.ronda { font-size: calc(var(--u) * 15 + var(--fx)); color: var(--crema); padding: calc(var(--u) * 6) calc(var(--u) * 12); background: rgba(15,12,40,.8); border-radius: 99px; border: calc(var(--u) * 3) solid var(--tinta); }
.zona-tirar { position: absolute; right: max(calc(var(--u) * 20), env(safe-area-inset-right)); bottom: max(calc(var(--u) * 20), env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); z-index: 8; }
.btn-tirar { width: calc(var(--u) * 190); transition: transform .12s, opacity .3s, filter .3s; }
.btn-tirar.activo { animation: latirGrande 1.1s infinite; }
.btn-tirar.inactivo { opacity: .35; filter: grayscale(1); pointer-events: none; transform: scale(.85); }
@keyframes latirGrande { 0%, 100% { transform: scale(1) rotate(-2deg) } 50% { transform: scale(1.1) rotate(2deg) } }
.etq-tirar { font-size: calc(var(--u) * 30); margin-top: calc(var(--u) * -30); pointer-events: none; }
.dados-hud { display: flex; gap: calc(var(--u) * 8); }
.dado-chip { width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: calc(var(--u) * 12); background: #fff; color: var(--tinta); border: calc(var(--u) * 3) solid var(--tinta); box-shadow: 0 calc(var(--u) * 4) 0 var(--tinta); display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 30); }
.dado-chip.usado { opacity: .35; transform: scale(.85); }
.dado-chip.bono { background: linear-gradient(180deg, #fff6b0, #ffc028); width: auto; padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 22 + var(--fx)); }
.controles { position: absolute; left: max(calc(var(--u) * 16), env(safe-area-inset-left)); bottom: max(calc(var(--u) * 16), env(safe-area-inset-bottom)); display: flex; gap: calc(var(--u) * 10); z-index: 8; opacity: .62; transition: opacity .2s; }
.controles:hover, .controles:active { opacity: 1; }
.ctrl { width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%; border: calc(var(--u) * 3) solid rgba(255,255,255,.7); background: rgba(20,15,50,.45); color: #fff; font-size: calc(var(--u) * 26); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(3px); }
.ctrl:active { background: rgba(255,210,80,.5); transform: scale(.92); }
.ctrl img { width: 62%; }
.ayuda-texto { position: absolute; left: 50%; bottom: calc(var(--u) * 24); transform: translateX(-50%); font-size: calc(var(--u) * 22 + var(--fx)); padding: calc(var(--u) * 8) calc(var(--u) * 22); background: rgba(15,12,40,.8); border-radius: 99px; border: calc(var(--u) * 3) solid var(--oro2); white-space: nowrap; pointer-events: none; z-index: 7; }
.ayuda-texto:empty { display: none; }
.cartel { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 86); pointer-events: none; z-index: 20; white-space: nowrap; text-align: center; animation: cartel 1.6s forwards; }
.cartel small { display: block; font-size: calc(var(--u) * 26); font-family: var(--fuente); color: #fff; -webkit-text-stroke: calc(var(--u) * 1.4) var(--tinta); margin-top: calc(var(--u) * 6); }
@keyframes cartel { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0 } 14% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1 } 24% { transform: translate(-50%, -50%) scale(1) rotate(0) } 78% { opacity: 1 } 100% { transform: translate(-50%, -64%) scale(1); opacity: 0 } }
.etq3d { position: absolute; left: 0; top: 0; font-size: calc(var(--u) * 24); padding: calc(var(--u) * 2) calc(var(--u) * 12); background: linear-gradient(180deg, #d98bff, #8a2be2); border: calc(var(--u) * 3) solid var(--tinta); border-radius: 99px; color: #fff;
  -webkit-text-stroke: calc(var(--u) * 1.2) var(--tinta); paint-order: stroke fill; box-shadow: 0 calc(var(--u) * 3) 0 var(--tinta); white-space: nowrap; will-change: transform; }
.etq3d.come { background: linear-gradient(180deg, #ff8a80, #d91c2c); }
.etq3d.info { background: linear-gradient(180deg, #ffe9a0, #f0a91c); color: #fff; }
.flota-moneda { position: absolute; width: calc(var(--u) * 40); height: calc(var(--u) * 40); background: url(assets/ui/icono_moneda.webp) center/contain no-repeat; z-index: 30; pointer-events: none; }
.emote-vuela { position: absolute; font-size: calc(var(--u) * 64); z-index: 30; pointer-events: none; animation: emote 2.2s forwards; }
@keyframes emote { 0% { transform: scale(.2); opacity: 0 } 15% { transform: scale(1.2); opacity: 1 } 80% { opacity: 1 } 100% { transform: translateY(calc(var(--u) * -120)) scale(1); opacity: 0 } }
.emotes { position: absolute; left: calc(var(--u) * 90); bottom: calc(var(--u) * 90); display: flex; gap: calc(var(--u) * 6); padding: calc(var(--u) * 8); background: rgba(15,12,40,.9); border-radius: calc(var(--u) * 18); border: calc(var(--u) * 3) solid var(--oro2); z-index: 9; }
.emotes button { font-size: calc(var(--u) * 34); background: none; border: 0; cursor: pointer; }

/* ---------- mapa de mundos ---------- */
.mapa { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; }
.mapa::-webkit-scrollbar { display: none; }
.mapa-pista { position: relative; height: 100%; display: flex; }
.mundo { position: relative; flex: none; height: 100%; background: center/cover no-repeat; }
.mundo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,12,50,.35), rgba(20,12,50,.1) 40%, rgba(20,12,50,.55)); }
.mundo .titulo-mundo { position: absolute; top: calc(var(--u) * 96); left: calc(var(--u) * 40); font-size: calc(var(--u) * 40); z-index: 2; }
.mundo .intro { position: absolute; top: calc(var(--u) * 148); left: calc(var(--u) * 44); max-width: calc(var(--u) * 460); font-size: calc(var(--u) * 16 + var(--fx)); z-index: 2; }
.mundo svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.nodo { position: absolute; width: calc(var(--u) * 92); height: calc(var(--u) * 92); transform: translate(-50%, -50%); z-index: 3; cursor: pointer; border: 0; padding: 0; background: none; }
.nodo .disco { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff3a0, #ffc72e 45%, #d98a0b); border: calc(var(--u) * 5) solid var(--tinta);
  box-shadow: inset 0 calc(var(--u) * -6) 0 rgba(0,0,0,.2), 0 calc(var(--u) * 7) 0 var(--tinta), 0 0 0 calc(var(--u) * 5) #fff inset; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 38); color: #fff; }
.nodo.bloq .disco { background: radial-gradient(circle at 40% 30%, #b7b3cf, #6b6788); }
.nodo.bloq .disco::after { content: ''; position: absolute; inset: 22%; background: url(assets/ui/icono_candado.webp) center/contain no-repeat; }
.nodo.actual .disco { animation: latir 1.2s infinite; box-shadow: inset 0 calc(var(--u) * -6) 0 rgba(0,0,0,.2), 0 calc(var(--u) * 7) 0 var(--tinta), 0 0 calc(var(--u) * 30) #ffe36b; }
.nodo.jefe { width: calc(var(--u) * 120); height: calc(var(--u) * 120); }
.nodo.jefe .disco { background: radial-gradient(circle at 40% 30%, #ff9b8a, #e23c3c 50%, #8f1420); }
.nodo.jefe::before { content: ''; position: absolute; left: 50%; top: calc(var(--u) * -44); width: calc(var(--u) * 80); height: calc(var(--u) * 60); transform: translateX(-50%); background: url(assets/ui/icono_corona.webp) center/contain no-repeat; z-index: 4; }
.nodo .estrellas { position: absolute; left: 50%; bottom: calc(var(--u) * -30); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 1); }
.nodo .estrellas i { width: calc(var(--u) * 28); height: calc(var(--u) * 28); background: url(assets/ui/icono_estrella.webp) center/contain no-repeat; filter: grayscale(1) brightness(.45); }
.nodo .estrellas i.si { filter: none; }
.nodo .yo-marca { position: absolute; left: 50%; bottom: 88%; width: calc(var(--u) * 70); transform: translateX(-50%); animation: flotar 1.4s infinite; z-index: 5; }
.puerta-mundo { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 4; text-align: center; font-size: calc(var(--u) * 18 + var(--fx)); }
.puerta-mundo img { height: calc(var(--u) * 80); }

/* ---------- listas y tarjetas ---------- */
.rejilla { display: grid; gap: calc(var(--u) * 16); }
.tarjeta { position: relative; border-radius: calc(var(--u) * 18); background: linear-gradient(180deg, #3a3478, #221e52); border: calc(var(--u) * 4) solid var(--tinta); box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--oro2), 0 calc(var(--u) * 5) 0 var(--tinta);
  padding: calc(var(--u) * 12); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); text-align: center; }
.tarjeta.equipado { box-shadow: inset 0 0 0 calc(var(--u) * 4) var(--verde), 0 0 calc(var(--u) * 18) var(--verde), 0 calc(var(--u) * 5) 0 var(--tinta); }
.tarjeta .etiqueta { position: absolute; top: calc(var(--u) * -12); left: 50%; transform: translateX(-50%); background: var(--rojo); border: calc(var(--u) * 3) solid var(--tinta); border-radius: 99px; padding: calc(var(--u) * 2) calc(var(--u) * 12); font-size: calc(var(--u) * 14 + var(--fx)); white-space: nowrap; }
.tarjeta img.grande { height: calc(var(--u) * 110); object-fit: contain; }
.tarjeta .t { font-size: calc(var(--u) * 20 + var(--fx)); }
.tarjeta .d { font-size: calc(var(--u) * 14 + var(--fx)); color: var(--crema); }
.pestanas { display: flex; gap: calc(var(--u) * 8); justify-content: center; margin-bottom: calc(var(--u) * 14); flex-wrap: wrap; }
.pestana { padding: calc(var(--u) * 8) calc(var(--u) * 18); border-radius: calc(var(--u) * 14); background: #2a2760; border: calc(var(--u) * 3) solid var(--tinta); color: #cfc8ff; font-size: calc(var(--u) * 19 + var(--fx)); cursor: pointer; box-shadow: 0 calc(var(--u) * 4) 0 var(--tinta); }
.pestana.activa { background: linear-gradient(180deg, #ffd84a, #e98f10); color: #fff; -webkit-text-stroke: calc(var(--u) * 1.2) var(--tinta); paint-order: stroke fill; }
.fila-mision { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 12) calc(var(--u) * 16); border-radius: calc(var(--u) * 16); background: #fbeccb; color: var(--tinta); border: calc(var(--u) * 3) solid var(--tinta); margin-bottom: calc(var(--u) * 10); box-shadow: 0 calc(var(--u) * 4) 0 var(--tinta); }
.fila-mision .txt { flex: 1; font-size: calc(var(--u) * 19 + var(--fx)); }
.progreso { position: relative; height: calc(var(--u) * 20); background: #5c4a3a; border-radius: 99px; border: calc(var(--u) * 3) solid var(--tinta); overflow: hidden; margin-top: calc(var(--u) * 4); }
.progreso > i { position: absolute; inset: 0; right: auto; background: linear-gradient(180deg, #8df06a, #2ea42a); }
.progreso > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 13 + var(--fx)); color: #fff; -webkit-text-stroke: calc(var(--u) * 1) var(--tinta); paint-order: stroke fill; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--u) * 12); }
.dia { position: relative; border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 10) calc(var(--u) * 6); background: #2c2866; border: calc(var(--u) * 3) solid var(--tinta); text-align: center; box-shadow: 0 calc(var(--u) * 4) 0 var(--tinta); }
.dia img { height: calc(var(--u) * 50); } .dia .n { font-size: calc(var(--u) * 15 + var(--fx)); color: var(--crema); } .dia b { display: block; font-size: calc(var(--u) * 18 + var(--fx)); }
.dia.hoy { background: linear-gradient(180deg, #ffd84a, #e98f10); animation: latir 1.3s infinite; }
.dia.hecho { opacity: .55; } .dia.hecho::after { content: '✔'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 54); color: var(--verde); -webkit-text-stroke: calc(var(--u) * 2) var(--tinta); }
.dia.grande { grid-column: span 1; background: linear-gradient(180deg, #a585ff, #4b2aa8); }
.ruleta-caja { position: relative; width: calc(var(--u) * 420); height: calc(var(--u) * 420); margin: 0 auto; }
.ruleta-caja canvas { width: 100%; height: 100%; }
.ruleta-flecha { position: absolute; left: 50%; top: calc(var(--u) * -14); width: 0; height: 0; transform: translateX(-50%); border-left: calc(var(--u) * 22) solid transparent; border-right: calc(var(--u) * 22) solid transparent; border-top: calc(var(--u) * 44) solid var(--rojo); filter: drop-shadow(0 calc(var(--u) * 3) 0 var(--tinta)); z-index: 2; }
.pase-pista { display: flex; gap: calc(var(--u) * 10); overflow-x: auto; padding: calc(var(--u) * 14) calc(var(--u) * 4); touch-action: pan-x; }
.pase-col { flex: none; width: calc(var(--u) * 110); display: flex; flex-direction: column; gap: calc(var(--u) * 8); align-items: center; }
.pase-celda { width: 100%; height: calc(var(--u) * 110); border-radius: calc(var(--u) * 16); background: #2c2866; border: calc(var(--u) * 3) solid var(--tinta); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(var(--u) * 16 + var(--fx)); cursor: pointer; position: relative; }
.pase-celda.prem { background: linear-gradient(180deg, #5a3a1a, #3a220f); box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--oro); }
.pase-celda img { height: calc(var(--u) * 50); }
.pase-celda.listo { animation: brillo 1.2s infinite; }
.pase-celda.cobrado::after { content: '✔'; position: absolute; font-size: calc(var(--u) * 50); color: var(--verde); -webkit-text-stroke: calc(var(--u) * 2) var(--tinta); }
.pase-celda.bloq { filter: grayscale(.8) brightness(.6); }
.pase-num { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; background: var(--morado); border: calc(var(--u) * 3) solid var(--tinta); display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 20 + var(--fx)); }
.pase-num.ok { background: var(--verde); }
.campo { width: 100%; height: calc(var(--u) * 56); border-radius: calc(var(--u) * 16); border: calc(var(--u) * 4) solid var(--tinta); background: #fff; color: var(--tinta); font-size: calc(var(--u) * 24); padding: 0 calc(var(--u) * 18); box-shadow: inset 0 calc(var(--u) * 4) 0 rgba(0,0,0,.12); outline: none; }
.campo:focus { box-shadow: 0 0 0 calc(var(--u) * 4) var(--oro); }
.avatares { display: grid; grid-template-columns: repeat(8, 1fr); gap: calc(var(--u) * 10); }
.avatares .avatar { width: calc(var(--u) * 74); height: calc(var(--u) * 74); cursor: pointer; }
.avatares .avatar.sel { box-shadow: 0 0 0 calc(var(--u) * 4) var(--tinta), 0 0 calc(var(--u) * 20) var(--oro); transform: scale(1.08); }
.deslizador { width: 100%; accent-color: var(--oro); height: calc(var(--u) * 30); }
.ajuste { display: flex; align-items: center; gap: calc(var(--u) * 16); padding: calc(var(--u) * 10) 0; font-size: calc(var(--u) * 20 + var(--fx)); border-bottom: calc(var(--u) * 2) dashed rgba(255,255,255,.15); }
.ajuste > span:first-child { width: calc(var(--u) * 230); }
.toggle { width: calc(var(--u) * 110); cursor: pointer; }
.clasif { width: 100%; border-collapse: separate; border-spacing: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 19 + var(--fx)); }
.clasif td { padding: calc(var(--u) * 8) calc(var(--u) * 12); background: rgba(255,255,255,.08); }
.clasif tr.yo td { background: rgba(255,210,80,.28); }
.clasif td:first-child { border-radius: calc(var(--u) * 12) 0 0 calc(var(--u) * 12); width: calc(var(--u) * 60); text-align: center; }
.clasif td:last-child { border-radius: 0 calc(var(--u) * 12) calc(var(--u) * 12) 0; text-align: right; }
.codigo-sala { font-size: calc(var(--u) * 64); letter-spacing: .12em; }
.sillas { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 16); }
.silla { height: calc(var(--u) * 190); border-radius: calc(var(--u) * 20); background: url(assets/ui/marco_slot.webp) center/contain no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 18 + var(--fx)); }
.silla .avatar { width: calc(var(--u) * 84); height: calc(var(--u) * 84); }
.resultado-podio { display: flex; gap: calc(var(--u) * 18); align-items: flex-end; justify-content: center; margin: calc(var(--u) * 10) 0; }
.podio { text-align: center; font-size: calc(var(--u) * 16 + var(--fx)); }
.podio .avatar { margin: 0 auto calc(var(--u) * 6); }
.podio .bloque { width: calc(var(--u) * 110); border-radius: calc(var(--u) * 12) calc(var(--u) * 12) 0 0; background: linear-gradient(180deg, #ffd84a, #c7780c); border: calc(var(--u) * 3) solid var(--tinta); display: flex; align-items: flex-start; justify-content: center; font-size: calc(var(--u) * 34); padding-top: calc(var(--u) * 6); }
.estrellas-grandes { display: flex; gap: calc(var(--u) * 10); justify-content: center; margin: calc(var(--u) * 6) 0; }
.estrellas-grandes i { width: calc(var(--u) * 86); height: calc(var(--u) * 86); background: url(assets/ui/icono_estrella.webp) center/contain no-repeat; filter: grayscale(1) brightness(.4); }
.estrellas-grandes i:nth-child(2) { transform: translateY(calc(var(--u) * -16)) scale(1.15); }
.estrellas-grandes i.si { filter: none; animation: estrellaSi .6s backwards; }
@keyframes estrellaSi { 0% { transform: scale(2.4) rotate(-40deg); opacity: 0 } 70% { transform: scale(.9) } }
.gira-aviso { position: fixed; inset: 0; background: var(--noche); display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 1000; text-align: center; font-size: 24px; padding: 30px; }
.anuncio-demo { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.anuncio-caja { width: min(560px, 86vw); padding: 26px; border-radius: 20px; background: #fff; color: #333; text-align: center; font-family: system-ui, sans-serif; position: relative; }
.anuncio-caja img { width: 70%; margin: 10px auto; display: block; }
.anuncio-tag { position: absolute; left: 12px; top: 10px; font-size: 12px; background: #ffd24a; color: #000; padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.anuncio-cerrar { margin-top: 12px; padding: 10px 24px; border-radius: 99px; border: 0; background: #2b6cff; color: #fff; font-size: 16px; cursor: pointer; }
.anuncio-cerrar:disabled { background: #999; }
.carga { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 18); }   /* logo, barra y consejo centrados */
.barra-carga { position: relative; width: calc(var(--u) * 620); height: calc(var(--u) * 102); background: url(assets/ui/barra_carga_marco.webp) center/100% 100% no-repeat; }
.barra-carga > i { position: absolute; left: 10%; top: 26%; height: 48%; width: 0; background: url(assets/ui/barra_carga_relleno.webp) left center/auto 100% repeat-x; border-radius: 99px; transition: width .25s; max-width: 80%; }
.consejo { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 21 + var(--fx)); max-width: calc(var(--u) * 800); text-align: center; }
.logo-grande { width: calc(var(--u) * 640); filter: drop-shadow(0 calc(var(--u) * 12) calc(var(--u) * 16) rgba(0,0,0,.5)); animation: flotar 3.4s ease-in-out infinite; }
.pulsa { font-size: calc(var(--u) * 34); animation: latir 1.3s infinite; }
.oculto { display: none !important; }
.parpadea { animation: latir 1s infinite; }
.lista-reglas { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 14); }
.regla { display: flex; gap: calc(var(--u) * 14); align-items: flex-start; background: rgba(255,255,255,.07); border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 12); font-size: calc(var(--u) * 17 + var(--fx)); line-height: 1.3; }
.regla img { width: calc(var(--u) * 64); flex: none; }
.regla > div > b:first-child { color: var(--oro); font-size: calc(var(--u) * 20 + var(--fx)); display: block; margin-bottom: calc(var(--u) * 3); }
.regla > div > b:not(:first-child) { color: #ffe9a0; }
.modal { max-height: calc(var(--u) * 610); }
.modal .cuerpo { min-height: 0; }
.barra-sup .comic-oro, .relleno.centro .comic-oro { white-space: nowrap; }
.etq3d.resultado-dados { font-size: calc(var(--u) * 40); padding: calc(var(--u) * 4) calc(var(--u) * 22); pointer-events: none; white-space: nowrap; -webkit-text-stroke: calc(var(--u) * 1.5) var(--tinta); }
.etq3d { touch-action: none; }
/* botón de tirar abajo a la derecha, con los números que cayeron encima (se quedan hasta la siguiente tirada) */
.zona-tirar { position: absolute; right: max(calc(var(--u) * 14), env(safe-area-inset-right)); bottom: max(calc(var(--u) * 10), env(safe-area-inset-bottom)); left: auto; top: auto; transform: none; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); z-index: 8; width: calc(var(--u) * 190); }
.zona-tirar .btn-tirar { width: calc(var(--u) * 170); }
.zona-tirar .btn-tirar.inactivo { opacity: .35; filter: grayscale(1); pointer-events: none; transform: scale(.85); display: block; }
.zona-tirar .etq-tirar { display: block; margin: calc(var(--u) * -34) 0 0; font-size: calc(var(--u) * 28); }
.zona-tirar .dados-hud { min-height: calc(var(--u) * 60); justify-content: center; }
.dados-hud .dado-chip { width: calc(var(--u) * 56); height: calc(var(--u) * 56); font-size: calc(var(--u) * 34); }

.bote small { font-size: calc(var(--u) * 13 + var(--fx)); color: var(--oro); letter-spacing: .08em; }

.ayuda-texto { left: max(calc(var(--u) * 12), env(safe-area-inset-left)); right: auto; transform: none; bottom: calc(var(--u) * 14); top: auto; font-size: calc(var(--u) * 18 + var(--fx)); white-space: normal; width: calc(var(--u) * 210); max-width: none; text-align: center; border-radius: calc(var(--u) * 18); padding: calc(var(--u) * 8) calc(var(--u) * 10); box-sizing: border-box; }
/* cursor de mano cartoon (solo con ratón); al arrastrar una ficha, la mano se cierra */
@media (pointer: fine) {
  html, body, #app, #app * { cursor: url(assets/ui/cursor_mano.png) 13 2, auto !important; }
  #app input, #app textarea { cursor: text !important; }
  #app.arrastrando, #app.arrastrando * { cursor: url(assets/ui/cursor_agarra.png) 24 22, grabbing !important; }
}
/* celular en horizontal: los objetivos se ven en la ventana del nivel y en la pausa; aquí no tapan el tablero */
@media (max-height: 575px) {
  .hud-sup .objetivos { display: none; }
}

/* número de versión visible (lobby, carga y splash) */
.version-tag { position: absolute; right: max(calc(var(--u) * 12), env(safe-area-inset-right)); bottom: calc(var(--u) * 4); font-size: calc(var(--u) * 13 + var(--fx)); opacity: .85; pointer-events: none; z-index: 3; }

/* ---------- "Preparando la mesa" (al entrar a una partida) ---------- */
.carga-partida { position: absolute; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, rgba(40,24,80,.55), rgba(8,5,25,.85)); transition: opacity .35s; pointer-events: auto; }
.carga-partida.fuera { opacity: 0; pointer-events: none; }
.cp-caja { width: calc(var(--u) * 620); padding: calc(var(--u) * 26) calc(var(--u) * 34); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10); }
.cp-moneda { width: calc(var(--u) * 86); height: calc(var(--u) * 86); background: url(assets/ui/icono_carga_moneda.webp) center/contain no-repeat; animation: girarY 1.1s linear infinite; }
.cp-titulo { font-size: calc(var(--u) * 32); text-align: center; }
.cp-paso { font-size: calc(var(--u) * 20 + var(--fx)); min-height: 1.3em; }
.cp-barra { width: 100%; position: relative; margin: 0; }
.cp-barra i { transition: width .25s ease-out; }
.cp-pct { font-size: calc(var(--u) * 18 + var(--fx)); color: var(--oro); }
.cp-consejo { font-size: calc(var(--u) * 16 + var(--fx)); opacity: .9; text-align: center; }

/* ===== escenario 16:9 para los menús =====
   Todo menú se diseña en 1280×720 y se escala completo (var(--u)); se centra en la pantalla y el fondo
   cubre lo que sobra. Así se ve igual en 4:3, 16:9, 21:9, celular, tablet, 4K y 8K. */
.pantalla { inset: auto; width: calc(var(--u) * 1280); height: calc(var(--u) * 720);
  left: calc((var(--ancho, 100vw) - var(--u) * 1280) / 2); top: calc((var(--alto, 100vh) - var(--u) * 720) / 2); }
/* el mapa de niveles se desliza a lo ancho: usa toda la pantalla (sin franjas a los lados en ultrapanorámicas) */
.pantalla.p-mundos { left: 0; width: var(--ancho, 100vw); }
.pantalla.p-mundos { top: 0; height: var(--alto, 100vh); }

/* pantalla de resultado: siempre cabe, los botones nunca se salen */
.panel-resultado { overflow: hidden; }
.panel-resultado .res-contenido { min-height: 0; overflow: visible; }
.panel-resultado .premios-caja .premio { padding: calc(var(--u) * 6); min-width: calc(var(--u) * 88); }
.panel-resultado .premios-caja .premio img { height: calc(var(--u) * 44); }
.panel-resultado .premios-caja .premio b { font-size: calc(var(--u) * 21); }
.podio .bloque { font-size: calc(var(--u) * 28); padding-top: calc(var(--u) * 4); }

/* ---------- Mi equipo ---------- */
.eq-raiz { position: absolute; left: calc(var(--u) * 30); right: calc(var(--u) * 30); top: calc(var(--u) * 100); bottom: calc(var(--u) * 20); display: flex; gap: calc(var(--u) * 24); }
.eq-vista { width: calc(var(--u) * 470); flex: none; display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 16); gap: calc(var(--u) * 8); }
.eq-escenario { position: relative; width: 100%; height: calc(var(--u) * 300); border-radius: calc(var(--u) * 18); background: radial-gradient(ellipse at 50% 92%, rgba(255,210,90,.45), rgba(255,210,90,0) 60%), radial-gradient(circle at 50% 30%, #4b3c96, #1d1745 75%); border: calc(var(--u) * 3) solid var(--tinta); overflow: hidden; }
.eq-escenario::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 6%; height: 14%; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(4px); }
.eq-f, .eq-torre { position: absolute; bottom: 9%; object-fit: contain; z-index: 1; filter: drop-shadow(0 calc(var(--u) * 6) 0 rgba(0,0,0,.35)); transition: transform .25s; }
.eq-f.f1 { height: 72%; left: 50%; transform: translateX(-50%); z-index: 3; bottom: 6%; }
.eq-f.f2 { height: 55%; left: 13%; z-index: 2; bottom: 14%; }
.eq-f.f3 { height: 55%; right: 13%; z-index: 2; bottom: 14%; }
.eq-f.f4 { height: 42%; left: 2%; bottom: 30%; opacity: .9; }
.eq-torre { height: 46%; right: 2%; bottom: 28%; opacity: .95; }
.eq-nombre { font-size: calc(var(--u) * 34); text-align: center; line-height: 1.1; }
.eq-desc { font-size: calc(var(--u) * 16 + var(--fx)); text-align: center; min-height: 2.6em; opacity: .95; }
.eq-colores { display: flex; align-items: center; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 18 + var(--fx)); }
.eq-color { width: calc(var(--u) * 48); height: calc(var(--u) * 48); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--c); border: calc(var(--u) * 4) solid var(--tinta); box-shadow: 0 calc(var(--u) * 4) 0 var(--tinta); cursor: pointer; transition: transform .15s; }
.eq-color.activo { transform: scale(1.18); box-shadow: 0 0 0 calc(var(--u) * 4) #fff, 0 0 calc(var(--u) * 16) var(--c), 0 calc(var(--u) * 4) 0 var(--tinta); }
.eq-accion { margin-top: auto; min-height: calc(var(--u) * 70); display: flex; align-items: center; }
.eq-ok { font-size: calc(var(--u) * 24 + var(--fx)); color: #7dff8a; }
.eq-lista { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 14); overflow-y: auto; overflow-x: hidden; touch-action: pan-y; padding: calc(var(--u) * 6); align-content: start; }
.eq-carta { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 10) calc(var(--u) * 6); border-radius: calc(var(--u) * 18); cursor: pointer; color: #fff; font-family: inherit;
  background: linear-gradient(180deg, #3a3478, #221e52); border: calc(var(--u) * 4) solid var(--tinta); box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--oro2), 0 calc(var(--u) * 5) 0 var(--tinta); transition: transform .12s; }
.eq-carta img { height: calc(var(--u) * 104); object-fit: contain; }
.eq-carta .t { font-size: calc(var(--u) * 17 + var(--fx)); text-align: center; line-height: 1.1; }
.eq-carta.sel { transform: translateY(calc(var(--u) * -4)); box-shadow: inset 0 0 0 calc(var(--u) * 4) #fff, 0 0 calc(var(--u) * 18) #ffe08a, 0 calc(var(--u) * 5) 0 var(--tinta); }
.eq-carta.equipado { background: linear-gradient(180deg, #2f6b3d, #1b3d24); }
.pill { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 12); border-radius: 99px; border: calc(var(--u) * 3) solid var(--tinta); font-size: calc(var(--u) * 15 + var(--fx)); color: #fff; white-space: nowrap; }
.pill .ico { height: calc(var(--u) * 20); }
.pill.verde { background: #2fa84a; } .pill.azul { background: #2a72d6; } .pill.morado { background: #7a3fd0; } .pill.ambar { background: #e08a14; }

/* ---------- tutorial guiado ---------- */
.tuto-burbuja { position: absolute; left: max(calc(var(--u) * 12), env(safe-area-inset-left)); top: calc(var(--u) * 256); width: calc(var(--u) * 222); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); z-index: 9; pointer-events: none !important;
  padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 12); background: linear-gradient(180deg, #fff7e2, #f6dfae); color: var(--tinta); border: calc(var(--u) * 4) solid var(--tinta); border-radius: calc(var(--u) * 20); box-shadow: 0 calc(var(--u) * 6) 0 var(--tinta); box-sizing: border-box; }
.tuto-burbuja.entra { animation: popIn .35s cubic-bezier(.2,1.5,.4,1); }
.tuto-burbuja::after { content: ''; position: absolute; right: calc(var(--u) * -24); top: calc(var(--u) * 40); border: calc(var(--u) * 12) solid transparent; border-left-color: var(--tinta); }
.tuto-cara { width: calc(var(--u) * 54); height: calc(var(--u) * 54); object-fit: contain; flex: none; margin-top: calc(var(--u) * -4); }
.tuto-cuerpo { width: 100%; min-width: 0; text-align: center; }
.tuto-titulo { font-size: calc(var(--u) * 22); -webkit-text-stroke: 0; color: #c2410c; text-shadow: none; }
.tuto-texto { font-size: calc(var(--u) * 18 + var(--fx)); line-height: 1.3; }
.tuto-texto b { color: #9d174d; }
.tuto-saltar { pointer-events: auto; flex: none; align-self: center; font-family: inherit; font-size: calc(var(--u) * 13 + var(--fx)); color: #fff; background: rgba(38,22,52,.75); border: 0; border-radius: 99px; padding: calc(var(--u) * 4) calc(var(--u) * 10); cursor: pointer; }
.tuto-mano { position: absolute; pointer-events: none; z-index: 20; }
.tuto-mano img { height: calc(var(--u) * 86); display: block; animation: tutoToque 1s ease-in-out infinite; filter: drop-shadow(0 calc(var(--u) * 4) 0 rgba(0,0,0,.35)); }
.tuto-mano.en-tirar { left: -18%; top: 30%; }
.tuto-mano.en-tirar img { transform-origin: 20% 0; }
.tuto-mano.en-3d { margin-top: calc(var(--u) * 40); margin-left: calc(var(--u) * 14); }
@keyframes tutoToque { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(calc(var(--u) * -14)) scale(.94); } }
/* letreros y avisos: centrados y sin salirse de la pantalla */
.cartel { top: 50%; max-width: 94%; }
.cartel small { white-space: normal; }
.toast { white-space: normal; max-width: 86%; text-align: center; width: max-content; }