/* Aura — sistema visual.
   Neutro claro por defecto (ni el negro con cian ni el blanco y dorado de las
   versiones anteriores): gris piedra frío, tinta casi negra, un azul "sistema"
   como único acento y el color reservado a las rarezas.
   data-theme="noche" da la variante oscura con los mismos tokens. */

:root {
  /* 24-09 noche, pedido de Cristian: menos "bonito y redondo", más cañero.
     Bloques cuadrados con sombra dura, tinta negra gruesa, fluorescentes que
     llamen a la aventura (lima, naranja, amarillo) y franjas oscuras. */
  --bg: #EDEDE6; --bg-2: #DEDED5; --sup: #FFFFFF; --sup-2: #FFFFFF;
  --tinta: #0B0C10; --tinta-2: #3C3F4A; --tinta-3: #6E7180; --linea: #0B0C10; --linea-2: #0B0C10;
  --oscuro: #0B0C10; --oscuro-2: #16181F;
  --acento: #C6FF00; --acento-tinta: #0B0C10; --acento-2: #E4FF6B; --acento-suave: rgba(198, 255, 0, .22); --brillo: rgba(198, 255, 0, .55);
  --naranja: #FF5A1F; --amarillo: #FFE600; --cian: #00E0FF; --rosa: #FF2E88;
  --ok: #00C853; --mal: #FF3B30; --aviso: #FF5A1F;
  --c-fue: #FF5A1F; --c-vel: #00B8D9; --c-nuc: #F2B400; --c-men: #2DBE4E;
  --r-comun: #8C95A6; --r-rara: #2F7BEA; --r-epica: #8B55E8; --r-legendaria: #D7A12A; --r-mitica: #FF2E88;
  --sombra: 4px 4px 0 var(--tinta);
  --radio: 3px;
  --f-titulo: 'Chakra Petch', 'Rajdhani', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-pixel: 'Silkscreen', monospace;
  color-scheme: light;
}
:root[data-theme="noche"] {
  --bg: #0B0C10; --bg-2: #050608; --sup: #16181F; --sup-2: #1C1F28;
  --tinta: #F4F5F0; --tinta-2: #B5B8C4; --tinta-3: #7C8092; --linea: #F4F5F0; --linea-2: #F4F5F0;
  --sombra: 4px 4px 0 var(--acento);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg-2); color: var(--tinta); font: 15px/1.45 var(--f-texto);
  display: flex; justify-content: center; overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* El "móvil": en escritorio se ve centrado; en el móvil ocupa todo. */
.app {
  position: relative; width: 100%; max-width: 430px; height: 100dvh; background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden;
  /* móvil de verdad: dejar sitio a la barra de estado y a la de gestos */
  padding-top: max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px));
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
}
.app::before { /* la rejilla, muy suave */
  content: ''; position: absolute; inset: 0; background: var(--bg); opacity: .93; pointer-events: none;
}
@media (min-width: 600px) { .app { height: min(932px, 100dvh - 32px); margin-top: 16px; border-radius: 6px; box-shadow: 10px 10px 0 var(--tinta); border: 3px solid var(--tinta); } }

.pantalla { position: relative; flex: 1; overflow-y: auto; padding: 14px 16px 100px; display: none; scrollbar-width: none; }
.pantalla.activa { display: block; animation: entrar .28s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

/* ── Tipografía ─────────────────────────────────────────────── */
.titulo { font: 700 13px/1 var(--f-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.h1 { font: 700 30px/1 var(--f-titulo); letter-spacing: .01em; text-transform: uppercase; }
.h2 { font: 700 18px/1.2 var(--f-titulo); letter-spacing: .03em; }
.mut { color: var(--tinta-2); } .mut-3 { color: var(--tinta-3); font-size: 13px; }
.num { font-family: var(--f-titulo); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── Cabecera del cazador ───────────────────────────────────── */
.cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar { width: 54px; height: 54px; border-radius: 3px; overflow: hidden; border: 2.5px solid var(--acento); box-shadow: 3px 3px 0 var(--naranja); flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.rango { font: 700 22px/1 var(--f-titulo); width: 44px; height: 48px; display: grid; place-items: center; flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--naranja); color: var(--tinta); }
.barra { height: 10px; border-radius: 0; background: var(--bg-2); overflow: hidden; border: 2px solid var(--tinta); }
.barra > i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--acento) 0 8px, var(--acento-2) 8px 16px); border-right: 2px solid var(--tinta); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.chips { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 2px; background: var(--oscuro); color: #fff; border: 2px solid var(--oscuro); font: 700 13px/1 var(--f-titulo); box-shadow: 2px 2px 0 var(--naranja); }
.chip svg { width: 15px; height: 15px; }

/* ── Ventana del Sistema (el guiño a los "cazadores") ───────── */
.sistema {
  position: relative; background: var(--sup); border: 2.5px solid var(--tinta); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 14px; margin-bottom: 18px;
}
/* La misión: bloque OSCURO con el fluorescente encima. */
.sistema.azul { background: var(--oscuro); color: #F4F5F0; border-color: var(--oscuro); box-shadow: 5px 5px 0 var(--acento);
  --tinta-2: #B5B8C4; --tinta-3: #8A8E9E; --sup-2: var(--oscuro-2); --linea: #2E3240; }
.sistema.azul .titulo { color: var(--acento); }
.sistema > .etiqueta {
  position: absolute; top: -11px; left: 12px; padding: 3px 8px; background: var(--acento); color: var(--acento-tinta);
  font: 700 10px/1.3 var(--f-titulo); letter-spacing: .2em; border-radius: 0; border: 2px solid var(--tinta);
}
.fila { display: flex; align-items: center; gap: 10px; }
.fila.entre { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; }
.sep { height: 1px; background: var(--linea); margin: 12px 0; }

/* ── Botones ────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 2px;
  background: var(--tinta); color: var(--bg); border: 2.5px solid var(--tinta); font: 700 14px/1 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--naranja); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--naranja); }
.btn.azul { background: var(--acento); color: var(--acento-tinta); border-color: var(--tinta); box-shadow: 3px 3px 0 var(--tinta); }
.btn.azul svg { stroke-width: 2.4; }
.btn.linea { background: var(--sup); color: var(--tinta); border: 2.5px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); }
.btn.peq { height: 36px; padding: 0 12px; font-size: 12px; border-radius: 2px; }
.btn.ancho { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ── Ejercicios de la misión ────────────────────────────────── */
.ej { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ej + .ej { border-top: 1px dashed var(--linea); }
.ej .ico { width: 44px; height: 44px; border-radius: 2px; display: grid; place-items: center; background: var(--acento); color: var(--acento-tinta); flex: none; border: 2px solid var(--acento); }
.ej .ico svg { width: 24px; height: 24px; }
.ej .dat { flex: 1; min-width: 0; }
.ej .nom { font-weight: 650; }
.ej .mini { height: 5px; margin-top: 6px; }
.ej.hecho .ico { background: transparent; color: var(--acento); }
.check { width: 28px; height: 28px; border-radius: 2px; border: 2px solid var(--linea-2); display: grid; place-items: center; flex: none; }
.check.si { background: var(--ok); border-color: var(--ok); color: #fff; }
.elegir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion { text-align: left; padding: 10px; border-radius: 2px; border: 2px solid var(--linea); background: var(--sup-2); transition: transform .08s; }
.opcion:active { transform: translate(2px, 2px); }
.opcion.sel { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 16%, var(--sup-2)); box-shadow: 3px 3px 0 var(--acento); }
.opcion .cam { font: 700 10.5px/1 var(--f-titulo); color: var(--acento); letter-spacing: .1em; margin-top: 6px; }
.sistema:not(.azul) .opcion .cam { color: var(--naranja); }

/* ── Navegación inferior ────────────────────────────────────── */
.nav { position: absolute; left: 0; right: 0; bottom: 0; height: calc(70px + max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px))); padding-bottom: max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--oscuro); border-top: 3px solid var(--acento); z-index: 5; }
.nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 700 10px/1 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: #7C8092; }
.nav button svg { width: 22px; height: 22px; }
.nav button.activa { color: var(--acento); }
.nav button.centro span.bola { width: 54px; height: 54px; margin-top: -30px; border-radius: 2px; background: var(--acento); color: var(--acento-tinta); display: grid; place-items: center; border: 3px solid var(--oscuro); box-shadow: 0 0 0 3px var(--acento), 0 0 22px var(--brillo); transform: rotate(45deg); }
.nav button.centro span.bola svg { transform: rotate(-45deg); }

/* ── CARTAS ─────────────────────────────────────────────────
   Como una carta física: marco grueso del color de la rareza con doble filo,
   placa de nivel arriba a la izquierda, rareza arriba a la derecha y el nombre
   de la clase grande abajo. El arte ocupa toda la carta. */
.carta {
  --marco: #A7AFBD; --marco-2: #5E6676; --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  position: relative; aspect-ratio: 5 / 7; border-radius: 14px; padding: 7px; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, color-mix(in srgb, var(--marco) 40%, white) 0%, var(--marco) 22%, var(--marco-2) 50%, var(--marco) 78%, color-mix(in srgb, var(--marco) 40%, white) 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.35);
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s;
  font-family: var(--f-titulo); color: #fff; user-select: none;
}
.carta .arte { position: absolute; inset: 7px; border-radius: 9px; overflow: hidden; background: #111; box-shadow: 0 0 0 1.5px rgba(0,0,0,.55), 0 0 0 3px color-mix(in srgb, var(--marco) 60%, white); }
.carta .arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.carta .sup, .carta .inf { position: absolute; left: 7px; right: 7px; z-index: 2; }
.carta .sup { top: 7px; display: flex; justify-content: space-between; align-items: flex-start; padding: 8px; }
.carta .nivel { min-width: 38px; padding: 4px 7px 5px; border-radius: 6px; text-align: center; font-size: 19px; font-weight: 700; line-height: 1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--marco) 70%, black), rgba(0,0,0,.75)); border: 1.5px solid var(--marco); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.carta .nivel small { display: block; font-size: 8px; letter-spacing: .2em; opacity: .8; margin-bottom: 2px; }
.carta .rz { padding: 4px 8px; border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; background: rgba(0,0,0,.6); border: 1px solid var(--marco); color: color-mix(in srgb, var(--marco) 55%, white); }
.carta .inf { bottom: 7px; border-radius: 0 0 9px 9px; padding: 34px 10px 9px; background: linear-gradient(transparent, rgba(4,6,12,.78) 38%, rgba(4,6,12,.92)); }
.carta .clase-grande { font-size: 25px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: .95; text-align: center;
  background: linear-gradient(180deg, #fff 20%, color-mix(in srgb, var(--marco) 50%, white)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); margin-bottom: 6px; }
.carta .linea-inf { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 3px; }
.carta .nombre { font-size: 11px; font-weight: 600; letter-spacing: .06em; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta .estrellas { font-size: 11px; letter-spacing: 1px; color: #FFD66B; text-shadow: 0 0 6px rgba(255,200,80,.8); white-space: nowrap; }
.carta .stats { display: flex; gap: 9px; font-size: 13px; font-weight: 700; }
.carta .stats b { font-size: 8.5px; letter-spacing: .12em; opacity: .7; margin-right: 3px; }
.carta .hab { font-size: 9.5px; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; opacity: .92; white-space: nowrap; }
.carta .hab i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--marco); box-shadow: 0 0 6px var(--marco); flex: none; }
.carta.r-rara { --marco: #4F9BFF; --marco-2: #1F4FB8; }
.carta.r-epica { --marco: #B07BFF; --marco-2: #5A28B0; }
.carta.r-legendaria { --marco: #F2C451; --marco-2: #9A6A10; }
/* Brillo que sigue al dedo: en todas un reflejo; en épica y legendaria, foil
   holográfico también en el MARCO, como las cartas de verdad. */
.carta .brillo { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 45%); }
.carta.r-epica .holo, .carta.r-legendaria .holo {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: color-dodge; opacity: .34;
  background:
    repeating-linear-gradient(115deg, transparent 0 6%, rgba(255,0,140,.55) 9%, rgba(255,230,0,.55) 12%, rgba(0,255,170,.55) 15%, rgba(0,160,255,.55) 18%, transparent 21% 27%),
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.45), transparent 55%);
  background-size: 260% 260%, 100% 100%; background-position: var(--mx) var(--my), 0 0; filter: saturate(1.4);
}
.carta.r-epica .holo { opacity: .2; }
.carta.r-legendaria, .carta.r-epica { background-image: conic-gradient(from calc(var(--giro, 0deg) * -1) at var(--mx) var(--my), #ff6ec4, #ffd86e, #6effc1, #6ec8ff, #b36eff, #ff6ec4); }
.carta.r-epica { background-image: linear-gradient(150deg, #E3CCFF, #B07BFF 25%, #5A28B0 50%, #B07BFF 75%, #E3CCFF); }
.carta.r-legendaria { box-shadow: 0 0 0 1px rgba(255,215,120,.6), 0 10px 30px rgba(215,161,42,.5); animation: giro 6s linear infinite; }
.carta.r-legendaria::after { /* destello que recorre el marco */
  content: ''; position: absolute; inset: 0; z-index: 4; border-radius: 14px; pointer-events: none; padding: 7px;
  background: conic-gradient(from var(--giro, 0deg), transparent 0 70%, rgba(255,255,255,.95) 78%, transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: giro 3.5s linear infinite;
}
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
@keyframes giro { to { --giro: 360deg; } }
.carta.bloqueada .arte img { filter: grayscale(1) brightness(.3) blur(1.5px); }
.carta.bloqueada .inf .linea-inf, .carta.bloqueada .nivel { visibility: hidden; }

.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rejilla .carta { padding: 4px; border-radius: 10px; } .rejilla .carta .arte { inset: 4px; border-radius: 7px; }
.rejilla .carta .sup, .rejilla .carta .inf { left: 4px; right: 4px; } .rejilla .carta .sup { top: 4px; padding: 4px; } .rejilla .carta .inf { bottom: 4px; padding: 14px 5px 5px; }
.rejilla .carta .nivel { min-width: 22px; font-size: 11px; padding: 2px 4px; } .rejilla .carta .nivel small { font-size: 5.5px; }
.rejilla .carta .rz { font-size: 6.5px; padding: 2px 4px; letter-spacing: .1em; }
.rejilla .carta .clase-grande { font-size: 12px; margin-bottom: 2px; } .rejilla .carta .linea-inf { display: none; }
.copias { position: absolute; top: -6px; right: -6px; z-index: 6; }
.insignia { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 2px; background: var(--naranja); color: #fff; border: 2px solid var(--tinta); font: 700 11px/18px var(--f-titulo); text-align: center; }
.insignia.ok { background: var(--acento); color: var(--tinta); }

.filtros { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 14px; scrollbar-width: none; }
.filtros { padding: 0 4px 4px 0; }
.filtros button { flex: none; padding: 7px 12px; border-radius: 2px; border: 2px solid var(--tinta); background: var(--sup); font: 700 12px/1 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; }
.filtros button.sel { background: var(--acento); color: var(--acento-tinta); box-shadow: 3px 3px 0 var(--tinta); }

/* ── Capas (detalle de carta, cofre, cámara, combate) ───────── */
.capa { position: absolute; inset: 0; padding-top: max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px)); z-index: 20; display: none; flex-direction: column; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); overflow-y: auto; }
.capa.abierta { display: flex; animation: entrar .25s ease; }
.capa .barra-sup { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.cerrar { width: 40px; height: 40px; border-radius: 2px; border: 2.5px solid var(--tinta); background: var(--sup); display: grid; place-items: center; box-shadow: 2px 2px 0 var(--tinta); }
.detalle { padding: 0 24px 30px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.detalle .carta { width: min(300px, 78vw); }
.detalle .carta .clase-grande { font-size: 34px; } .detalle .carta .stats { font-size: 16px; } .detalle .carta .nombre { font-size: 13px; }
.escalera { display: flex; gap: 8px; width: 100%; }
.escalera > div { flex: 1; text-align: center; font-size: 11px; font-family: var(--f-titulo); letter-spacing: .08em; color: var(--tinta-3); }
.escalera .carta { width: 100%; margin-bottom: 6px; padding: 3px; border-radius: 8px; } .escalera .carta .arte { inset: 3px; border-radius: 5px; } .escalera .carta .inf, .escalera .carta .sup { display: none; }
.escalera .yo { color: var(--naranja); font-weight: 700; }

/* Cofre */
.cofre-escena { flex: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.cofre-escena .rayos { position: absolute; width: 900px; height: 900px; background: repeating-conic-gradient(from 0deg, var(--acento-suave) 0 8deg, transparent 8deg 20deg); animation: rota 18s linear infinite; opacity: 0; transition: opacity .6s; }
.cofre-escena.abierto .rayos { opacity: 1; }
@keyframes rota { to { transform: rotate(360deg); } }
.cofre { width: 200px; height: 170px; position: relative; cursor: pointer; }
.cofre.tiembla { animation: tiembla .5s ease infinite; }
@keyframes tiembla { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.03); } 75% { transform: rotate(4deg) scale(1.03); } }
.premio { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: sale .7s cubic-bezier(.2,1.4,.3,1); }
.premio .carta { width: 230px; }
@keyframes sale { from { transform: scale(.2) rotateY(180deg); opacity: 0; } }
.aviso-rareza { font: 700 14px/1 var(--f-titulo); letter-spacing: .3em; text-transform: uppercase; }

/* Cámara */
.camara { position: absolute; inset: 0; z-index: 30; background: #000; display: none; }
.camara.abierta { display: block; }
.camara video, .camara canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* contain: se ve todo el campo de la cámara, con bandas negras si el formato no coincide */
.camara .espejo { transform: scaleX(-1); }
.camara .silueta { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.camara .silueta svg { width: 88%; height: 80%; opacity: .9; transition: opacity .4s; }
.camara .silueta.ok svg { opacity: 0; }
.hud { position: absolute; left: 0; right: 0; top: 0; padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; color: #fff; z-index: 2; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.contador { display: flex; gap: 10px; align-items: baseline; font-family: var(--f-titulo); }
.contador .grande { font-size: 64px; font-weight: 700; line-height: 1; text-shadow: 0 0 22px rgba(108,131,255,.9); }
.contador .de { font-size: 18px; opacity: .8; }
.marcas { display: flex; gap: 10px; font: 700 15px/1 var(--f-titulo); margin-top: 6px; }
.marcas .b { color: #6BF0A5; } .marcas .m { color: #FF8A8F; }
.mensaje { position: absolute; left: 16px; right: 16px; bottom: 110px; z-index: 2; padding: 12px 14px; border-radius: 14px; background: rgba(12,14,20,.72); color: #fff; font-weight: 600; text-align: center; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); transition: background .2s; }
.mensaje.mal { background: rgba(224,68,75,.88); animation: sacude .35s; }
.mensaje.bien { background: rgba(15,157,88,.85); }
@keyframes sacude { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pie-cam { position: absolute; left: 16px; right: 16px; bottom: 24px; display: flex; gap: 10px; z-index: 2; }
.flash-mal { position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(224,68,75,0); transition: box-shadow .25s; }
.flash-mal.on { box-shadow: inset 0 0 80px 20px rgba(224,68,75,.7); }

/* ── COMBATE PIXEL ──────────────────────────────────────────── */
.combate { background: #0b0d12; color: #fff; font-family: var(--f-pixel); }
.escenario { position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; image-rendering: pixelated; background: #223; }
.escenario .fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.luchador-px { position: absolute; bottom: 14%; height: 56%; width: auto; image-rendering: pixelated; transition: transform .18s steps(3); filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.luchador-px { --flip: 1; } .luchador-px.yo { left: 10%; } .luchador-px.rival { right: 10%; --flip: -1; transform: scaleX(-1); }
.luchador-px.golpea.yo { transform: translateX(40%); } .luchador-px.golpea.rival { transform: scaleX(-1) translateX(40%); }
.luchador-px.herido { animation: parpadeo .3s steps(2) 2; }
@keyframes parpadeo { 50% { opacity: .2; } }
.dmg { position: absolute; font: 16px var(--f-pixel); color: #fff; text-shadow: 2px 2px 0 #000; animation: sube 0.9s steps(8) forwards; pointer-events: none; }
.dmg.crit { color: #FFD66B; font-size: 20px; }
@keyframes sube { to { transform: translateY(-40px); opacity: 0; } }
.vidas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 14px; font-size: 11px; }
.vida { height: 10px; background: #333; border: 2px solid #fff; image-rendering: pixelated; }
.vida i { display: block; height: 100%; background: #4ADE80; transition: width .4s steps(10); }
.vida.baja i { background: #F87171; }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px; }
.acciones button { font: 12px var(--f-pixel); padding: 12px 8px; background: #1b2030; border: 2px solid #fff; color: #fff; box-shadow: 3px 3px 0 #000; text-transform: uppercase; }
.acciones button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.acciones button.esp { background: #3552F2; } .acciones button[disabled] { opacity: .35; }
.registro { padding: 6px 14px 20px; font-size: 11px; line-height: 1.6; color: #C8D0E0; min-height: 90px; }

/* Radar de cercanía */
.radar { position: relative; aspect-ratio: 1; width: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, var(--acento-suave), transparent 70%), var(--sup); border: 1px solid var(--linea); }
.radar::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg, var(--brillo), transparent 25%); animation: rota 3s linear infinite; border-radius: 50%; }
.radar .anillo { position: absolute; border: 1px dashed var(--linea-2); border-radius: 50%; inset: 25%; }
.radar .anillo.g { inset: 5%; }
.radar .punto { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; }
.radar .punto span { width: 38px; height: 38px; border-radius: 12px; overflow: hidden; border: 2px solid var(--acento); background: var(--sup-2); }
.radar .punto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }

/* Rama de evolución */
.ramas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rama { text-align: center; font: 700 10px/1.2 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.rama .gema-r { width: 44px; height: 44px; margin: 0 auto 6px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: grid; place-items: center; background: var(--bg-2); }
.rama.activa { color: var(--tinta); } .rama.activa .gema-r { box-shadow: 0 0 0 3px var(--acento-suave); }
.stat-fila { display: grid; grid-template-columns: 44px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.stat-fila .barra { height: 7px; }

.toast { position: absolute; left: 50%; top: 16px; transform: translateX(-50%) translateY(-160%); z-index: 50; padding: 10px 16px; border-radius: 2px; background: var(--acento); color: var(--acento-tinta); border: 2.5px solid var(--tinta); font-weight: 600; font-size: 14px; box-shadow: var(--sombra); transition: transform .35s cubic-bezier(.2,1.3,.3,1); max-width: 90%; text-align: center; }
.toast { pointer-events: none; }
.toast:not(.ver) { visibility: hidden; }
.toast.ver { transform: translateX(-50%) translateY(0); }
.oculto { display: none !important; }

/* Franja oscura de cabecera (la "pantalla de estado" del cazador). */
.banda { margin: -14px -16px 18px; padding: 16px 16px 14px; background: var(--oscuro); color: #F4F5F0; border-bottom: 3px solid var(--acento);
  background-image: linear-gradient(135deg, transparent 0 60%, rgba(198,255,0,.08) 60% 62%, transparent 62% 70%, rgba(255,90,31,.10) 70% 72%, transparent 72%); }
.banda .mut-3 { color: #9A9EAD; } .banda .barra { border-color: #F4F5F0; background: #23262F; } .banda .h2 { color: #fff; }
.banda .chip { background: #1C1F28; border-color: #2E3240; box-shadow: none; }
.banda .chip.lima { color: var(--acento); } .banda .chip.naranja { color: var(--naranja); } .banda .chip.amarillo { color: var(--amarillo); }
.sistema.especial { background: var(--amarillo); border-color: var(--tinta); box-shadow: 5px 5px 0 var(--naranja); }
.sistema.especial .mut, .sistema.especial .mut-3 { color: #2A2A1E; }
.sistema.especial > .etiqueta { background: var(--naranja); color: #fff; }
.interruptor { display: flex; border: 2.5px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); margin-bottom: 18px; }
.interruptor button { flex: 1; padding: 10px 6px; font: 700 12px/1.1 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; background: var(--sup); }
.interruptor button.sel { background: var(--oscuro); color: var(--acento); }
.modo-entreno [data-aventura], .modo-entreno .nav button[data-nav="aventura"], .app:not(.modo-entreno) .nav button[data-nav="entreno"] { display: none !important; }

/* ── Aspecto "Sistema": azul de cazador, oscuro y holográfico ───────────── */
:root[data-theme="sistema"] {
  --bg: #060A16; --bg-2: #03060D; --sup: #0C1326; --sup-2: #101A33;
  --tinta: #E6F1FF; --tinta-2: #9FB3D6; --tinta-3: #6A7FA6; --linea: #3DE3FF; --linea-2: #3DE3FF;
  --oscuro: #03060D; --oscuro-2: #0C1326;
  --acento: #3DE3FF; --acento-2: #9AF2FF; --acento-tinta: #03060D; --acento-suave: rgba(61,227,255,.18); --brillo: rgba(61,227,255,.6);
  --naranja: #8B6CFF; --amarillo: #3DE3FF;
  --sombra: 0 0 0 1px rgba(61,227,255,.35), 0 0 18px rgba(61,227,255,.25);
  color-scheme: dark;
}
:root[data-theme="sistema"] .sistema { border-width: 1.5px; }
:root[data-theme="sistema"] .sistema.especial { background: linear-gradient(135deg, #1A1446, #0C1326); color: var(--tinta); border-color: #8B6CFF; box-shadow: 0 0 22px rgba(139,108,255,.45); }
:root[data-theme="sistema"] .sistema.especial .mut, :root[data-theme="sistema"] .sistema.especial .mut-3 { color: var(--tinta-2); }
:root[data-theme="sistema"] .btn { box-shadow: 0 0 14px var(--brillo); }
:root[data-theme="sistema"] .h1, :root[data-theme="sistema"] .titulo { text-shadow: 0 0 12px var(--brillo); }

/* Pase */
.pase { border: 2.5px solid var(--tinta); box-shadow: var(--sombra); background: var(--sup); }
.pase-cab, .pase-fila { display: grid; grid-template-columns: 38px 1fr 1fr; gap: 6px; align-items: center; padding: 6px 8px; }
.pase-cab { font: 700 11px/1 var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; background: var(--oscuro); color: var(--acento); }
.pase-cab span:last-child { color: var(--amarillo); }
.pase-fila + .pase-fila { border-top: 1px dashed var(--tinta-3); }
.pase-fila.actual { background: var(--acento-suave); }
.pase-celda { height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px solid var(--tinta); background: var(--sup-2); font: 700 10px/1 var(--f-titulo); }
.pase-celda svg { width: 20px; height: 20px; }
.pase-celda.lista { background: var(--acento); color: var(--acento-tinta); box-shadow: 3px 3px 0 var(--tinta); animation: late 1.4s ease-in-out infinite; }
.pase-celda.hecha { opacity: .4; } .pase-celda.cerrada { background: repeating-linear-gradient(-45deg, var(--sup-2) 0 6px, var(--bg-2) 6px 12px); }
@keyframes late { 50% { transform: scale(1.04); } }
/* Calendario */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario div { border: 2px solid var(--tinta); padding: 5px 2px; text-align: center; font-size: 9.5px; line-height: 1.15; min-height: 52px; background: var(--sup-2); display: flex; flex-direction: column; gap: 3px; }
.calendario b { font: 700 9px/1 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; }
.calendario .hecho { background: var(--oscuro); color: var(--acento); }
.calendario .siguiente { outline: 3px solid var(--naranja); }
.calendario .gordo { background: var(--amarillo); color: #0B0C10; }
/* Mascotas */
.mascotas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mascota { border: 2px solid var(--tinta); background: var(--sup-2); padding: 4px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; }
.mascota img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.mascota small { font-size: 9.5px; color: var(--tinta-3); text-align: center; line-height: 1.1; }
.mascota.no img { filter: grayscale(1) brightness(.35); }
.mascota.eq { background: var(--acento); color: var(--acento-tinta); box-shadow: 3px 3px 0 var(--tinta); } .mascota.eq small { color: var(--acento-tinta); }
/* Alerta de jefe */
.alerta-jefe { position: absolute; inset: 0; z-index: 40; background: rgba(5,6,10,.93); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; animation: alerta .5s steps(4); }
.alerta-jefe img { width: 78%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--amarillo); box-shadow: 0 0 0 4px #0B0C10, 0 0 40px rgba(255,230,0,.5); margin: 14px 0; animation: tiembla .6s ease infinite; }
@keyframes alerta { 0% { background: rgba(255,59,48,.9); } }
/* Mapa */
.mapa { position: relative; border: 2.5px solid var(--tinta); box-shadow: var(--sombra); margin-bottom: 16px; overflow: hidden; }
.mapa > img { width: 100%; display: block; }
.nodo { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; }
.nodo i { width: 34px; height: 34px; display: grid; place-items: center; background: var(--oscuro); color: var(--acento); border: 2.5px solid #fff; transform: rotate(45deg); box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.nodo i svg { width: 18px; height: 18px; transform: rotate(-45deg); }
.nodo span { font: 700 9px/1.1 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(11,12,16,.82); padding: 2px 4px; margin-top: 5px; white-space: nowrap; }
.nodo.n-jefe i { color: var(--naranja); } .nodo.n-arena i { color: var(--cian); } .nodo.n-mazmorra i { color: #B07BFF; } .nodo.n-mision i { color: var(--amarillo); }
.ficha-yo { position: absolute; transform: translate(-50%, -110%); z-index: 3; width: 38px; height: 38px; border: 3px solid var(--acento); background: #000; box-shadow: 0 0 0 2px #0B0C10, 0 0 16px var(--brillo); pointer-events: none; }
.ficha-yo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.ficha-yo::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--acento); }
/* Banda */
.banda-jefe { position: relative; border: 2.5px solid var(--tinta); box-shadow: 5px 5px 0 var(--mal); margin-bottom: 16px; overflow: hidden; }
.banda-jefe img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.banda-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(5,6,10,.92) 40%); }
.etiqueta-b { display: inline-block; font: 700 10px/1 var(--f-titulo); letter-spacing: .2em; padding: 3px 6px; background: var(--mal); color: #fff; margin-bottom: 6px; }
.escenario .fondo.jefe { image-rendering: pixelated; }
.escenario .fondo.herido { animation: parpadeo .3s steps(2) 2; }

/* Variante SECRETA: marco prismático que cambia de color, foil cubista y un
   fallo de "glitch" cada pocos segundos. */
.carta.r-mitica { --marco: #FF2E88; --marco-2: #3DE3FF;
  background: conic-gradient(from var(--giro, 0deg), #FF2E88, #FFE600, #C6FF00, #3DE3FF, #8B6CFF, #FF2E88);
  animation: giro 3s linear infinite; box-shadow: 0 0 0 2px #0B0C10, 0 0 26px rgba(255,46,136,.6), 0 0 44px rgba(61,227,255,.45); }
.carta.r-mitica .holo { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: conic-gradient(from 30deg at var(--mx) var(--my), transparent 0 10%, rgba(255,46,136,.6) 12%, transparent 15% 30%, rgba(61,227,255,.6) 32%, transparent 35% 55%, rgba(255,230,0,.6) 57%, transparent 60% 80%, rgba(198,255,0,.6) 82%, transparent 85%);
  filter: saturate(1.6); }
.carta.r-mitica .arte img { animation: glitch 4s steps(1) infinite; }
@keyframes glitch { 0%, 92%, 100% { transform: none; filter: none; } 93% { transform: translate(-3px, 1px) skewX(4deg); filter: hue-rotate(90deg) saturate(2); } 95% { transform: translate(3px, -1px); filter: hue-rotate(-60deg); } 97% { transform: translate(-1px, 0) scaleY(1.02); filter: invert(.15); } }
.carta.r-mitica .rz { background: #0B0C10; color: #fff; border-color: #FF2E88; }
.cofre-escena video.cine { width: 86%; max-height: 70vh; border: 3px solid var(--r-legendaria); box-shadow: 0 0 0 3px #0B0C10, 0 0 40px rgba(215,161,42,.6); position: relative; }

/* ── Aspecto "Moderno": los mismos fluorescentes, pero redondeado y suave ──
   (25-09: a Cristian la versión cuadrada le pareció «muy pixelada»). */
:root[data-theme="moderno"] {
  --bg: #F3F4F1; --bg-2: #E6E8E3; --sup: #FFFFFF; --sup-2: #FFFFFF;
  --tinta: #101216; --tinta-2: #4A4F5C; --tinta-3: #7B8090; --linea: #DCDFE4; --linea-2: #C9CDD4;
  --sombra: 0 2px 6px rgba(16,18,22,.06), 0 10px 28px rgba(16,18,22,.08);
  --radio: 18px; --f-titulo: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
:root[data-theme="moderno"] .app::before { opacity: 1; }
:root[data-theme="moderno"] .sistema { border: 1px solid var(--linea); border-radius: 20px; }
:root[data-theme="moderno"] .sistema.azul { border: 0; border-radius: 22px; box-shadow: 0 12px 30px rgba(16,18,22,.25); background: linear-gradient(145deg, #15181F, #0B0C10); }
:root[data-theme="moderno"] .sistema.especial { border: 0; border-radius: 22px; box-shadow: 0 10px 26px rgba(255,90,31,.25); background: linear-gradient(135deg, #FFE600, #FFC400); }
:root[data-theme="moderno"] .sistema > .etiqueta { border-radius: 99px; border: 0; padding: 3px 10px; }
:root[data-theme="moderno"] .btn { border-radius: 14px; border-width: 0; box-shadow: 0 6px 16px rgba(16,18,22,.18); }
:root[data-theme="moderno"] .btn.azul { box-shadow: 0 8px 20px rgba(198,255,0,.45); }
:root[data-theme="moderno"] .btn.linea { border: 1.5px solid var(--linea-2); box-shadow: none; }
:root[data-theme="moderno"] .btn:active { transform: scale(.97); }
:root[data-theme="moderno"] .opcion, :root[data-theme="moderno"] .filtros button, :root[data-theme="moderno"] .check,
:root[data-theme="moderno"] .cerrar, :root[data-theme="moderno"] .mascota, :root[data-theme="moderno"] .pase-celda,
:root[data-theme="moderno"] .calendario div, :root[data-theme="moderno"] .ej .ico { border-radius: 14px; border-width: 1.5px; box-shadow: none; }
:root[data-theme="moderno"] .opcion.sel, :root[data-theme="moderno"] .filtros button.sel { box-shadow: 0 0 0 3px var(--acento-suave); }
:root[data-theme="moderno"] .chip { border-radius: 99px; box-shadow: none; }
:root[data-theme="moderno"] .barra { border-radius: 99px; border-width: 0; }
:root[data-theme="moderno"] .barra > i { border-radius: 99px; border: 0; background: linear-gradient(90deg, #A6F000, var(--acento)); }
:root[data-theme="moderno"] .avatar { border-radius: 16px; box-shadow: 0 0 0 3px var(--acento-suave); }
:root[data-theme="moderno"] .banda { border-radius: 0 0 26px 26px; border-bottom: 0; }
:root[data-theme="moderno"] .interruptor { border-radius: 16px; overflow: hidden; border-width: 1.5px; box-shadow: none; }
:root[data-theme="moderno"] .nav { left: 10px; right: 10px; bottom: 10px; border-radius: 24px; border-top: 0; box-shadow: 0 12px 30px rgba(0,0,0,.3); height: 68px; padding-bottom: 0; }
:root[data-theme="moderno"] .nav button.centro span.bola { border-radius: 18px; }
:root[data-theme="moderno"] .h1 { text-transform: none; letter-spacing: -.01em; }
:root[data-theme="moderno"] .toast { border-radius: 14px; border: 0; }
:root[data-theme="moderno"] .mapa, :root[data-theme="moderno"] .banda-jefe, :root[data-theme="moderno"] .pase { border-radius: 20px; border-width: 1px; }

/* Barra de botón fija abajo en las capas (bienvenida): siempre a la vista. */
.pie-fijo { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; margin: 0 -16px; padding: 12px 16px calc(14px + max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px)));
  background: linear-gradient(transparent, var(--bg) 22%); }
.pie-fijo .btn.linea { flex: none; }
#cam-voz, #cam-cerrar { width: 46px; flex: none; padding: 0; } #cam-voz svg, #cam-cerrar svg { width: 22px; height: 22px; }

/* ── Pantalla de entrada (25-09 v3): sin vídeo; el logo entra letra a letra
   al compás de la sintonía (musica/entrada.mp3, tiempos en app.js). ── */
.entrada { position: absolute; inset: 0; z-index: 90; background: #05060A; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.entrada-fondo { position: absolute; inset: -40%; opacity: .5;
  background: repeating-linear-gradient(135deg, transparent 0 34px, rgba(198,255,0,.07) 34px 36px), repeating-linear-gradient(45deg, transparent 0 60px, rgba(255,90,31,.05) 60px 62px);
  animation: deriva 6s linear infinite; }
@keyframes deriva { to { transform: translate(72px, -72px); } }
.entrada-logo { position: relative; display: flex; gap: 2px; font: 700 clamp(72px, 26vw, 120px)/1 'Chakra Petch', sans-serif; letter-spacing: .06em;
  color: #C6FF00; text-shadow: 6px 6px 0 #FF5A1F, 0 0 40px rgba(198,255,0,.5); }
.entrada-logo span { display: inline-block; opacity: 0; transform: translateY(-60px) scale(1.8) rotate(-8deg); }
.entrada-logo span.ya { animation: golpe .22s cubic-bezier(.2,1.7,.4,1) forwards; }
@keyframes golpe { 0% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.entrada-logo.final { animation: brillo .7s ease-out; }
@keyframes brillo { 0% { transform: scale(1); } 25% { transform: scale(1.14); text-shadow: 6px 6px 0 #FF5A1F, 0 0 90px #fff; } 100% { transform: scale(1); } }
.entrada-lema { position: relative; margin-top: 14px; font: 700 15px/1 'Chakra Petch', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .3s; }
.entrada-lema.ya { opacity: 1; }
.entrada-toca { position: absolute; bottom: calc(9vh + max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px))); font: 700 14px/1 'Chakra Petch', sans-serif; letter-spacing: .28em;
  text-transform: uppercase; color: #0B0C10; background: #C6FF00; padding: 12px 20px; box-shadow: 4px 4px 0 #FF5A1F; animation: late 1.6s ease-in-out infinite; cursor: pointer; }
.entrada-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.entrada-flash.ya { animation: flash .55s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }
.entrada.fuera { opacity: 0; transition: opacity .35s ease; pointer-events: none; }

/* ── Combate por turnos (25-09) ───────────────────────────────────────── */
.luchador-px { transition: filter .2s; }
.anim-estocada   { animation: estocada .38s steps(6); }
.anim-embestida  { animation: embestida .38s steps(6); }
.anim-disparo    { animation: disparo .38s steps(4); }
.anim-conjuro    { animation: conjuro .38s steps(5); filter: drop-shadow(0 0 10px #FF6A2A) brightness(1.3); }
.anim-especial   { animation: especialSalto .6s steps(8); filter: drop-shadow(0 0 16px #fff) brightness(1.6); }
.anim-rival      { animation: estocada .38s steps(6); }
.anim-especial-rival { animation: especialSalto .38s steps(6); filter: drop-shadow(0 0 16px #FF3B30) brightness(1.4); }
@keyframes estocada { 0% { transform: scaleX(var(--flip)); } 35% { transform: scaleX(var(--flip)) translateX(-8%) rotate(-6deg); } 70% { transform: scaleX(var(--flip)) translateX(70%) rotate(8deg); } 100% { transform: scaleX(var(--flip)); } }
@keyframes embestida { 0% { transform: scaleX(var(--flip)); opacity: 1; } 45% { transform: scaleX(var(--flip)) translateX(110%); opacity: .4; } 55% { transform: scaleX(var(--flip)) translateX(120%); opacity: 1; } 100% { transform: scaleX(var(--flip)); } }
@keyframes disparo { 0%, 100% { transform: scaleX(var(--flip)); } 30% { transform: scaleX(var(--flip)) translateX(-12%) rotate(-4deg); } }
@keyframes conjuro { 0%, 100% { transform: scaleX(var(--flip)); } 50% { transform: scaleX(var(--flip)) translateY(-18%) scale(1.08); } }
@keyframes especialSalto { 0% { transform: scaleX(var(--flip)); } 40% { transform: scaleX(var(--flip)) translateY(-40%) scale(1.2); } 70% { transform: scaleX(var(--flip)) translateX(60%) translateY(-10%) scale(1.2); } 100% { transform: scaleX(var(--flip)); } }
.herido   { animation: parpadeo .3s steps(2) 2; filter: brightness(2) saturate(0) sepia(1) hue-rotate(-50deg) saturate(6); }
.curando  { filter: drop-shadow(0 0 12px #6BF0A5) brightness(1.3); animation: conjuro .9s steps(6); }
.aturdido { animation: tambaleo .7s steps(6); filter: grayscale(.6); }
@keyframes tambaleo { 25% { transform: scaleX(var(--flip)) rotate(-8deg); } 75% { transform: scaleX(var(--flip)) rotate(8deg); } }
.derrotado { animation: caer 1.4s steps(8) forwards; }
@keyframes caer { to { transform: scaleX(var(--flip)) translateY(30%) rotate(-80deg); opacity: 0; } }
.cargando { filter: drop-shadow(0 0 10px #FF3B30) drop-shadow(0 0 22px #FF3B30); animation: latido .6s ease-in-out infinite; }
@keyframes latido { 50% { filter: drop-shadow(0 0 18px #FF3B30) drop-shadow(0 0 34px #FF7A00) brightness(1.3); } }
.con-escudo { filter: drop-shadow(0 0 5px #3DE3FF) drop-shadow(0 0 14px #3DE3FF); }
.con-escudo.doble { filter: drop-shadow(0 0 5px #F2C451) drop-shadow(0 0 16px #F2C451) drop-shadow(0 0 24px #F2C451); }
.escenario .fondo.cargando, .escenario .fondo.herido { filter: none; }
.escenario .fondo.cargando { animation: latidoFondo .6s ease-in-out infinite; }
@keyframes latidoFondo { 50% { filter: brightness(1.25) saturate(1.5) hue-rotate(-12deg); } }
.escenario.temblor { animation: temblor .4s steps(6); }
@keyframes temblor { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -2px); } }
.destello-combate { position: absolute; inset: 0; opacity: .75; mix-blend-mode: screen; animation: flash .5s ease-out forwards; pointer-events: none; z-index: 5; }
/* Efectos que vuelan entre los luchadores */
.efecto { position: absolute; z-index: 4; pointer-events: none; top: 48%; --c: #fff; }
.efecto.flecha { width: 60px; height: 4px; background: linear-gradient(90deg, transparent, var(--c) 30%, #fff); box-shadow: 0 0 8px var(--c); }
.efecto.bola { width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--c) 45%, transparent 72%); box-shadow: 0 0 20px var(--c), 0 0 40px var(--c); }
.efecto.laser, .efecto.rayo { height: 8px; margin-top: -2px; background: linear-gradient(90deg, #fff, var(--c)); box-shadow: 0 0 12px var(--c), 0 0 26px var(--c); }
.efecto.rayo { height: 6px; filter: url(#none); animation-name: rayoIda !important; }
.efecto.hacia-el.flecha, .efecto.hacia-el.bola { left: 28%; animation: vuelaEl .42s linear forwards; }
.efecto.hacia-yo.flecha, .efecto.hacia-yo.bola { left: 66%; animation: vuelaYo .42s linear forwards; transform: scaleX(-1); }
.efecto.hacia-el.laser, .efecto.hacia-el.rayo { left: 28%; width: 0; animation: laserIda .42s ease-out forwards; }
.efecto.hacia-yo.laser, .efecto.hacia-yo.rayo { right: 30%; width: 0; animation: laserIda .42s ease-out forwards; }
@keyframes vuelaEl { to { left: 70%; } }
@keyframes vuelaYo { to { left: 22%; } }
@keyframes laserIda { 0% { width: 0; opacity: 1; } 70% { width: 42%; opacity: 1; } 100% { width: 42%; opacity: 0; } }
@keyframes rayoIda { 0% { width: 0; } 50% { width: 42%; opacity: 1; } 60% { opacity: .3; } 70% { opacity: 1; } 100% { width: 42%; opacity: 0; } }
.efecto.tajo { width: 90px; height: 90px; margin-top: -40px; border-radius: 50%; border: 6px solid transparent; border-top-color: var(--c); border-right-color: var(--c);
  box-shadow: 0 -4px 14px -4px var(--c); animation: tajo .26s ease-out forwards; }
.efecto.tajo.hacia-el { left: 62%; } .efecto.tajo.hacia-yo { left: 14%; }
@keyframes tajo { 0% { transform: rotate(-60deg) scale(.6); opacity: 1; } 100% { transform: rotate(120deg) scale(1.2); opacity: 0; } }
.efecto.golpe { width: 70px; height: 70px; margin-top: -30px; background: radial-gradient(circle, #fff 0 12%, var(--c) 13% 30%, transparent 31%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: impacto .26s ease-out forwards; }
.efecto.golpe.hacia-el { left: 64%; } .efecto.golpe.hacia-yo { left: 14%; }
@keyframes impacto { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.dmg.cura { color: #6BF0A5; } .dmg.bloqueo { color: #9AF2FF; font-size: 13px; }
/* Carteles de turno */
.turno-cartel { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: 6; pointer-events: none; white-space: nowrap;
  font: 16px var(--f-pixel); color: #fff; background: rgba(11,12,16,.8); border: 2px solid #fff; padding: 8px 14px; box-shadow: 3px 3px 0 #000; transition: all .2s steps(3); }
.turno-cartel.ver { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.turno-cartel.grande { font-size: 22px; color: #C6FF00; border-color: #C6FF00; }
.turno-cartel.aviso { color: #FFE600; border-color: #FF3B30; background: rgba(80,0,0,.85); }
/* Barra de especial y menú */
.carga-especial { display: flex; align-items: center; gap: 8px; padding: 6px 14px 2px; font: 10px var(--f-pixel); color: #C8D0E0; }
.carga-especial > div { display: flex; gap: 3px; flex: 1; }
.carga-especial i { flex: 1; height: 8px; border: 2px solid #fff; background: #222; }
.carga-especial i.on { background: #C6FF00; box-shadow: 0 0 8px #C6FF00; }
.vidas small { display: block; margin-top: 3px; font-size: 9px; color: #9AA3B5; }
.menu-combate { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 14px; }
.menu-combate button { text-align: left; font: 12px var(--f-pixel); padding: 9px 10px; background: #1b2030; border: 2px solid #fff; color: #fff; box-shadow: 3px 3px 0 #000; min-height: 56px; }
.menu-combate button b { display: block; font-weight: normal; text-transform: uppercase; margin-bottom: 4px; }
.menu-combate button small { display: block; font: 10.5px/1.25 var(--f-texto); color: #B5BDD0; }
.menu-combate button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.menu-combate button.esp { background: #3552F2; }
.menu-combate button.esp:not([disabled]) { background: #C6FF00; color: #0B0C10; animation: late 1.2s ease-in-out infinite; }
.menu-combate button.esp:not([disabled]) small { color: #243000; }
.menu-combate button[disabled] { opacity: .38; }

/* Respiración en reposo: que no parezcan figuras quietas mientras esperan. */
.luchador-px:not([class*="anim-"]):not(.herido):not(.derrotado):not(.aturdido) { animation: respira 1.3s steps(2) infinite; }
@keyframes respira { 50% { transform: scaleX(var(--flip)) translateY(-2.5%); } }
.luchador-px.cargando { animation: latido .6s ease-in-out infinite, respira 1.3s steps(2) infinite; }

/* ── Pantallas nuevas (25-09): menú lateral, hermandades, recorridos, historial ── */
.boton-menu { margin-left: 8px; }
.cabecera ~ .chips .boton-menu, .chips .boton-menu { margin-left: 0; }
.menu-lateral { padding: 0 16px 40px; }
.menu-cab { display: flex; align-items: center; gap: 12px; padding: 14px 0 10px; border-bottom: 2px solid var(--linea); margin-bottom: 8px; }
.menu-grupo { margin-top: 14px; }
.menu-grupo .titulo { margin: 0 2px 6px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; margin-bottom: 6px; background: var(--sup); border: 2px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); font: 700 14px/1 var(--f-titulo); letter-spacing: .04em; color: var(--tinta); text-align: left; }
.menu-item span { display: grid; place-items: center; width: 30px; height: 30px; background: var(--acento); color: var(--acento-tinta); flex: none; }
.menu-item span svg { width: 18px; height: 18px; }
.menu-item i { margin-left: auto; font-style: normal; font-size: 22px; color: var(--tinta-3); }
.menu-item:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.selector { width: 100%; padding: 11px 12px; margin: 6px 0 12px; border: 2px solid var(--tinta); background: var(--sup); color: var(--tinta); font: 15px var(--f-texto); border-radius: 0; }
.emblema { width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px; border: 2.5px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.emblema.grande { width: 76px; height: 76px; font-size: 40px; }
.herm { border-left: 6px solid var(--hc) !important; }
.herm-prev { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--hc) 35%, var(--sup)), var(--sup) 70%); border: 2px solid var(--tinta); box-shadow: 4px 4px 0 var(--hc); }
.elige-fila { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 10px 0; margin-bottom: 6px; }
.elige { flex: none; width: 46px; height: 46px; font-size: 24px; background: var(--sup); border: 2px solid var(--tinta); display: grid; place-items: center; }
.elige.sel { outline: 3px solid var(--acento); outline-offset: 2px; box-shadow: 3px 3px 0 var(--tinta); }
.elige.color { border-radius: 0; }
.chat { max-height: 140px; overflow-y: auto; font-size: 14px; display: grid; gap: 4px; margin-bottom: 10px; padding: 8px; background: var(--bg-2); }
.chip.sel { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.kpis > div { background: var(--sup); border: 2px solid var(--tinta); padding: 10px 6px; text-align: center; box-shadow: 3px 3px 0 var(--naranja); }
.kpis b { display: block; font-size: 22px; color: var(--tinta); }
.kpis span { font-size: 11px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.recorrido { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px !important; color: var(--tinta); }
.recorrido > i { font-style: normal; font-size: 22px; color: var(--tinta-3); }
.mini-ruta { width: 90px; height: 70px; background: var(--bg-2); flex: none; }
svg.ruta { display: block; width: 100%; height: auto; }
.cal-sem, .cal-calor { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-sem { margin: 10px 0 4px; font: 700 11px var(--f-titulo); color: var(--tinta-3); text-align: center; }
.cal-calor i { aspect-ratio: 1; border: 1.5px solid var(--linea-2); }
.barras-sem { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; height: 130px; align-items: end; margin-top: 10px; }
.barras-sem > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; font-size: 12px; }
.barras-sem i { width: 100%; background: var(--acento); border: 2px solid var(--tinta); }
.barras-sem small { color: var(--tinta-3); font-size: 10px; text-transform: uppercase; }
.nodo.n-cerca i { color: var(--acento); box-shadow: 0 0 0 0 var(--acento); animation: latido-nodo 1.6s ease-out infinite; }
@keyframes latido-nodo { 0% { box-shadow: 0 0 0 0 var(--acento); } 100% { box-shadow: 0 0 0 14px transparent; } }
.nodo.n-hermandad i { color: var(--rosa); }
.btn svg { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* 26-09: en el móvil de Cristian (letra del sistema grande) se salían cosas por
   la derecha. Todo lo que va en fila tiene que poder encogerse o bajar de línea. */
.chips { flex-wrap: wrap; row-gap: 6px; }
.chips .chip { min-width: 0; }
.elegir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elegir .opcion, .elegir .opcion * { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.detalle .fila:has(#dc-subir) { flex-wrap: wrap; }
.detalle .fila:has(#dc-subir) .btn { min-width: 30%; padding-left: 8px; padding-right: 8px; letter-spacing: .04em; }
.btn { max-width: 100%; }
/* filas con scroll lateral: difuminado a la derecha mientras quede algo por ver,
   y una barrita fina, para que se note que se pueden deslizar */
.filtros, .elige-fila, .escalera { scrollbar-width: thin; scrollbar-color: var(--acento) transparent; }
.filtros::-webkit-scrollbar, .elige-fila::-webkit-scrollbar, .escalera::-webkit-scrollbar { height: 4px; }
.filtros::-webkit-scrollbar-thumb, .elige-fila::-webkit-scrollbar-thumb, .escalera::-webkit-scrollbar-thumb { background: var(--acento); }
.hay-mas { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.hay-mas.al-final { -webkit-mask-image: none; mask-image: none; }
.calendario, .ramas { grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); }
.ramas { --cols: 5; }
.calendario div, .rama { min-width: 0; overflow-wrap: anywhere; }
.rama .gema-r { width: min(44px, 100%); height: auto; aspect-ratio: 1; }

/* ── 26-09: equipo, mascotas, emotes y cofres nuevos ─────────────────────── */
.r-comun { --rc: var(--r-comun); } .r-rara { --rc: var(--r-rara); } .r-epica { --rc: var(--r-epica); } .r-legendaria { --rc: var(--r-legendaria); } .r-mitica { --rc: var(--r-mitica); } .r-vacio { --rc: var(--tinta-3); }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.ficha-arte { position: relative; border: 2.5px solid var(--tinta); box-shadow: 4px 4px 0 var(--acento); overflow: hidden; background: #0B0C10; }
.ficha-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; aspect-ratio: 3 / 4.4; }
.ficha-poder { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(transparent, rgba(5,6,10,.92)); color: #fff; text-align: center; }
.ficha-poder span { display: block; font: 700 10px/1 var(--f-titulo); letter-spacing: .3em; color: var(--acento); }
.ficha-poder b { font-size: 28px; }
.ficha-huecos { display: grid; gap: 8px; }
.hueco { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 6px; background: var(--sup); border: 2px solid var(--rc); box-shadow: 3px 3px 0 var(--rc); min-width: 0; }
.hueco-ico { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 45%, #0B0C10), #0B0C10 75%); color: var(--tinta-3); }
.hueco-ico img { width: 100%; height: 100%; object-fit: contain; }
.hueco-ico svg { width: 22px; height: 22px; }
.hueco b { font: 700 12px/1.15 var(--f-titulo); overflow-wrap: anywhere; } .hueco small { font-size: 10px; color: var(--tinta-3); }
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.kpis-5 > div { padding: 8px 2px; } .kpis-5 b { font-size: 16px; } .kpis-5 span { font-size: 9px; letter-spacing: 0; }
.kpis small.mas { display: block; font-size: 9px; color: var(--ok); margin-top: 2px; }
.inventario { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.objeto { position: relative; aspect-ratio: 1; padding: 6px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 50%, #0B0C10), #0B0C10 78%); border: 2px solid var(--rc); display: grid; place-items: center; }
.objeto img { width: 100%; height: 100%; object-fit: contain; }
.objeto small { position: absolute; left: 3px; bottom: 2px; font-size: 9px; color: #fff; text-shadow: 1px 1px 0 #000; }
.objeto .afin { position: absolute; right: 3px; top: 1px; font-style: normal; color: var(--amarillo); font-size: 13px; text-shadow: 1px 1px 0 #000; }
.objeto.puesto { box-shadow: 0 0 0 3px var(--acento); }
.objeto.puesto::after { content: 'PUESTO'; position: absolute; top: 2px; left: 3px; font: 700 8px var(--f-titulo); letter-spacing: .1em; color: var(--acento); }
.bloqueado img { filter: brightness(0) drop-shadow(0 0 1px rgba(255,255,255,.35)); opacity: .55; }
.objeto-grande { position: relative; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 60%, #0B0C10), #0B0C10 72%); border: 2.5px solid var(--rc); box-shadow: 0 0 34px color-mix(in srgb, var(--rc) 55%, transparent); overflow: hidden; }
.objeto-grande .aviso-rareza { position: absolute; top: 8px; left: 10px; }
.objeto-grande .hd { width: min(62vw, 250px); aspect-ratio: 1; object-fit: contain; animation: flotar 3s ease-in-out infinite; }
.objeto-grande .px { position: absolute; right: 8px; bottom: 8px; width: 56px; height: 56px; image-rendering: pixelated; background: rgba(0,0,0,.4); border: 1.5px solid var(--rc); }
.premio .objeto-grande { width: 250px; } .premio .objeto-grande .hd { width: 190px; }
@keyframes flotar { 50% { transform: translateY(-8px) rotate(-2deg); } }
.huecos-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.huecos-mini > div { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--rc); background: radial-gradient(circle, color-mix(in srgb, var(--rc) 45%, #0B0C10), #0B0C10 75%); color: var(--tinta-3); padding: 4px; }
.huecos-mini img { width: 100%; height: 100%; object-fit: contain; } .huecos-mini svg { width: 24px; }
.mascotas.grande { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mascota { position: relative; min-width: 0; }
.mascota.no img { filter: grayscale(1) brightness(.45); }
.mascota .eq-marca { position: absolute; top: 6px; left: 6px; font: 700 8px var(--f-titulo); letter-spacing: .1em; font-style: normal; background: var(--acento); color: var(--acento-tinta); padding: 2px 4px; }
.mascota-ficha { position: relative; border: 2.5px solid var(--tinta); box-shadow: 4px 4px 0 var(--acento); margin-bottom: 12px; overflow: hidden; }
.mascota-ficha img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.mascota-ficha.bloqueado img { filter: grayscale(1) brightness(.4); }
.mascota-ficha .elemento { position: absolute; right: 8px; bottom: 8px; background: rgba(5,6,10,.85); color: var(--acento); font: 700 11px var(--f-titulo); letter-spacing: .15em; text-transform: uppercase; padding: 4px 8px; }
.emotes-eq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.emotes-eq button { aspect-ratio: 1; border: 2px dashed var(--acento); background: var(--sup); display: grid; place-items: center; padding: 4px; font-size: 26px; color: var(--tinta-3); }
.emotes-eq img, .emotes img { width: 100%; height: 100%; object-fit: contain; }
.emotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.emotes button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: var(--sup); border: 2px solid var(--tinta); min-width: 0; }
.emotes button img { aspect-ratio: 1; }
.emotes button small { font: 700 10px/1.1 var(--f-titulo); text-align: center; overflow-wrap: anywhere; }
.emotes button.no img { filter: grayscale(1) brightness(.5); } .emotes button.no small { color: var(--tinta-3); font-weight: 400; }
.emotes button.puesto { border-color: var(--acento); box-shadow: 3px 3px 0 var(--acento); }
.emotes-chat { display: flex; gap: 6px; margin-top: 8px; }
.emotes-chat button { width: 46px; height: 46px; padding: 2px; background: var(--bg-2); border: 1.5px solid var(--tinta); }
.emotes-chat img, .emote-en-chat { width: 100%; height: 100%; object-fit: contain; }
.emote-en-chat { width: 40px; height: 40px; vertical-align: middle; }
.pase-celda img { width: 30px; height: 30px; object-fit: contain; }
/* combate: arma en la mano, botón y bocadillos de emote */
.arma-px { position: absolute; left: 25%; bottom: 30%; width: 13%; image-rendering: pixelated; transform: rotate(-25deg); filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); pointer-events: none; z-index: 2; }
.boton-emote { position: absolute; left: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%; background: rgba(11,12,16,.8); color: #fff; border: 2px solid #fff; font-size: 20px; z-index: 5; }
.barra-emotes { position: absolute; left: 52px; top: 6px; display: none; gap: 6px; z-index: 5; background: rgba(11,12,16,.85); padding: 4px; border: 2px solid #fff; }
.barra-emotes.ver { display: flex; } .barra-emotes small { color: #fff; font-size: 11px; padding: 6px; }
.barra-emotes button { width: 44px; height: 44px; padding: 0; background: none; border: 0; }
.barra-emotes img { width: 100%; height: 100%; object-fit: contain; }
.bocadillo-emote { position: absolute; top: 6%; width: 22%; aspect-ratio: 1; z-index: 4; animation: bocadillo 2.2s ease forwards; pointer-events: none; }
.bocadillo-emote.yo { left: 12%; } .bocadillo-emote.el { right: 12%; }
.bocadillo-emote img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
@keyframes bocadillo { 0% { transform: scale(0) rotate(-20deg); } 15% { transform: scale(1.15) rotate(5deg); } 25%, 85% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: translateY(-20px) scale(.9); opacity: 0; } }
/* cofre: fondo por tipo, flota, se agita, revienta, chispas y premios en fila */
.cofre-escena { background-size: cover; background-position: center; }
.cofre-escena .rayos { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cc) 35%, transparent) 0 8deg, transparent 8deg 20deg); }
.cofre img { width: 100%; filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--cc) 60%, transparent)); }
.cofre.flota { animation: flotaCofre 2.4s ease-in-out infinite; }
@keyframes flotaCofre { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-12px) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } 60% { transform: translateY(-12px) rotate(-1deg); } }
.cofre.agita { animation: agita .12s linear infinite; filter: brightness(1.2); }
@keyframes agita { 0% { transform: translate(-5px, 0) rotate(-4deg) scale(1.05); } 50% { transform: translate(5px, -2px) rotate(4deg) scale(1.08); } 100% { transform: translate(-5px, 0) rotate(-4deg) scale(1.05); } }
.cofre.revienta { animation: revienta .45s ease-in forwards; }
@keyframes revienta { 40% { transform: scale(1.3); filter: brightness(2.5); } 100% { transform: scale(.2); opacity: 0; filter: brightness(4); } }
.cofre-escena.abierto::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #fff, color-mix(in srgb, var(--cc) 60%, transparent) 30%, transparent 65%); animation: fogonazo .8s ease-out forwards; pointer-events: none; }
@keyframes fogonazo { 0% { opacity: 1; } 100% { opacity: 0; } }
.chispas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.chispas i { position: absolute; border-radius: 1px; animation: chispa 1.1s cubic-bezier(.15,.8,.3,1) forwards; box-shadow: 0 0 8px currentColor; }
@keyframes chispa { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(180deg); opacity: 0; } }
.cuenta-premios { position: absolute; right: 14px; top: 12px; z-index: 4; display: flex; flex-direction: column; align-items: center; color: #fff; }
.cuenta-premios b { font-size: 28px; width: 52px; height: 52px; display: grid; place-items: center; background: var(--cc); color: #0B0C10; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.cuenta-premios small { font: 700 10px var(--f-titulo); letter-spacing: .2em; text-transform: uppercase; margin-top: 2px; }
.premio.aparece { animation: sale .6s cubic-bezier(.2,1.4,.3,1); z-index: 2; }
.premio-num { display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 0 3px 0 #000; }
.premio-num span { width: 96px; height: 96px; display: grid; place-items: center; color: var(--cc); filter: drop-shadow(0 0 16px var(--cc)); }
.premio-num span svg { width: 90px; height: 90px; }
.premio-num b { font-size: 56px; line-height: 1; } .premio-num small { font: 700 14px var(--f-titulo); letter-spacing: .3em; text-transform: uppercase; margin-top: 6px; }
.premio-emote { width: 210px; height: 210px; object-fit: contain; animation: flotar 3s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,.5)); }
.cofre-pie { padding: 14px 24px 26px; text-align: center; min-height: 118px; }
.premio-pie { font-size: 15px; margin-bottom: 4px; }
.resumen-cofre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(92%, 360px); z-index: 2; }
.resumen-cofre .mini { border: 2px solid var(--rc, #fff); background: rgba(11,12,16,.8); color: #fff; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.resumen-cofre .mini img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; }
.resumen-cofre .mini small { font-size: 10px; text-align: center; overflow-wrap: anywhere; }
.resumen-cofre .num-mini span { width: 44px; height: 44px; color: var(--cc); } .resumen-cofre .num-mini b { font-size: 18px; }
.cofre-escena video.cine { z-index: 3; }
/* 26-09 retoque tras ver las capturas: cofre más grande, pie oscuro legible, rayos suaves */
#capa-cofre { background: #0B0C10; }
#capa-cofre .barra-sup { color: #fff; } #capa-cofre .barra-sup .cerrar { background: #1b2030; color: #fff; border-color: #fff; }
.cofre-escena .cofre { width: min(72vw, 300px); height: auto; }
.cofre-escena .rayos { opacity: 0; } .cofre-escena.abierto .rayos { opacity: .45; }
.cofre-pie { background: #0B0C10; color: #fff; }
.cofre-pie .mut, .cofre-pie .mut-3 { color: #B5BDD0 !important; }
.premio .carta { width: min(62vw, 250px); }

/* ── 26-09 (2ª tanda): emotes animados, marcos, forja, tienda, conjuntos ── */
.emo-anim { transform-origin: 50% 85%; }
.emo-salta { animation: emoSalta 1.1s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes emoSalta { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(0) scale(1.08, .9); } 45% { transform: translateY(-14%) scale(.95, 1.06); } 70% { transform: translateY(0) scale(1.04, .96); } }
.emo-tiembla { animation: emoTiembla .35s linear infinite; }
@keyframes emoTiembla { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) translateX(-2%); } 75% { transform: rotate(6deg) translateX(2%); } }
.emo-late { animation: emoLate .9s ease-in-out infinite; }
@keyframes emoLate { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.emo-brilla { animation: emoBrilla 1.6s ease-in-out infinite; }
@keyframes emoBrilla { 0%, 100% { filter: drop-shadow(0 0 0 transparent) brightness(1); } 50% { filter: drop-shadow(0 0 10px #FFF6A0) drop-shadow(0 0 20px #FFD23F) brightness(1.15); transform: rotate(-4deg); } }
.emo-arde { animation: emoArde .6s ease-in-out infinite alternate; }
@keyframes emoArde { 0% { filter: drop-shadow(0 0 6px #FF6A1F) drop-shadow(0 -4px 10px #FF3B30); transform: scale(1); } 100% { filter: drop-shadow(0 0 14px #FFB21F) drop-shadow(0 -8px 18px #FF6A1F); transform: scale(1.06) translateY(-3%); } }
.marca-anim { position: absolute; top: 4px; right: 4px; font: 700 7.5px var(--f-titulo); letter-spacing: .1em; font-style: normal; background: var(--rosa); color: #fff; padding: 2px 4px; }
.emotes button { position: relative; }
/* marcos del avatar */
.avatar.marco-basico { }
.avatar.marco-neon { border-color: #3DE3FF; box-shadow: 0 0 0 2px #0B0C10, 0 0 12px #3DE3FF, 0 0 24px #FF2E88; animation: neon 2s ease-in-out infinite; }
@keyframes neon { 50% { border-color: #FF2E88; box-shadow: 0 0 0 2px #0B0C10, 0 0 14px #FF2E88, 0 0 26px #3DE3FF; } }
.avatar.marco-holo { border: 3px solid transparent; background: linear-gradient(#0B0C10, #0B0C10) padding-box, conic-gradient(from var(--ang, 0deg), #FF2E88, #FFE600, #3DE3FF, #8B6CFF, #FF2E88) border-box; animation: giraHolo 3s linear infinite; box-shadow: 0 0 16px rgba(139,108,255,.6); }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes giraHolo { to { --ang: 360deg; } }
.avatar.marco-fuego { border-color: #FF6A1F; box-shadow: 0 0 0 2px #0B0C10, 0 -4px 14px #FF6A1F, 0 -8px 22px #FF3B30; animation: emoArde .7s ease-in-out infinite alternate; }
.avatar.marco-oro { border: 3px solid #FFD23F; box-shadow: 0 0 0 2px #7A5A00, 0 0 18px rgba(255,210,63,.7), inset 0 0 8px rgba(255,210,63,.6); }
.avatar.marco-vacio { border-color: #B77BFF; box-shadow: 0 0 0 2px #0B0C10, 0 0 18px #6B2FD6, 0 0 30px #1A0033; }
.marcos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.marcos button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; background: var(--sup); border: 2px solid var(--tinta); min-width: 0; }
.marcos button.puesto { border-color: var(--acento); box-shadow: 3px 3px 0 var(--acento); }
.marcos button.no .avatar img { filter: grayscale(1) brightness(.5); }
.marcos .avatar { width: 64px; height: 64px; }
.marcos b { font: 700 12px var(--f-titulo); } .marcos small { font-size: 10px; color: var(--tinta-3); text-align: center; overflow-wrap: anywhere; }
/* escenas con fondo (forja, tienda) */
.escena-fondo { background-size: cover; background-position: center; padding: 90px 12px 12px; margin: 0 -16px 4px; }
.escena-fondo .kpis > div { background: rgba(11,12,16,.75); color: #fff; } .escena-fondo .kpis b { color: #fff; }
.tienda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.oferta { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; background: var(--sup); border: 2px solid var(--rc); box-shadow: 3px 3px 0 var(--rc); text-align: center; min-width: 0; }
.oferta-arte { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 45%, #0B0C10), #0B0C10 75%); margin-bottom: 4px; }
.oferta-arte img { width: 86%; height: 86%; object-fit: contain; } .oferta-arte .avatar { width: 64px; height: 64px; }
.oferta b { font: 700 13px/1.15 var(--f-titulo); overflow-wrap: anywhere; } .oferta small { font-size: 10.5px; color: var(--tinta-3); line-height: 1.2; }
.oferta .btn { margin-top: auto; width: 100%; }
.oferta.comprada { opacity: .5; }
/* objetos y conjuntos */
.consumibles { display: grid; gap: 8px; margin-top: 8px; }
.consumible { display: flex; align-items: center; gap: 10px; }
.consumible img { width: 46px; height: 46px; object-fit: contain; flex: none; background: radial-gradient(circle, #2a2f45, #0B0C10 75%); }
.conjunto { border-left: 4px solid var(--cj); padding: 6px 10px; margin-top: 8px; font-size: 13px; }
.conjunto .ok { color: var(--ok); font-weight: 600; } .conjunto .no { color: var(--tinta-3); }
.conjunto.activo { background: color-mix(in srgb, var(--cj) 10%, transparent); }
.sistema.conjunto { border-left: 5px solid var(--cj); }
.piezas-conjunto { display: flex; gap: 6px; margin: 8px 0; }
.piezas-conjunto img { width: 48px; height: 48px; object-fit: contain; background: #0B0C10; border: 2px solid var(--tinta-3); padding: 2px; }
.piezas-conjunto img.puesta { border-color: var(--cj); box-shadow: 0 0 10px var(--cj); }
.piezas-conjunto img.falta { filter: brightness(0) drop-shadow(0 0 1px rgba(255,255,255,.4)); opacity: .5; }
.mascota-ficha .evo-marca { position: absolute; left: 8px; top: 8px; background: linear-gradient(90deg, #FFD23F, #FF6A1F); color: #0B0C10; font: 700 11px var(--f-titulo); letter-spacing: .15em; padding: 4px 8px; }
.mascota-ficha.evo { box-shadow: 4px 4px 0 #FFD23F, 0 0 30px rgba(255,210,63,.5); }
.premio-num .premio-item { width: 150px; height: 150px; object-fit: contain; animation: flotar 3s ease-in-out infinite; filter: drop-shadow(0 0 18px var(--cc)); }
.reto { margin-top: 8px; font-size: 13.5px; } .reto .barra { margin-top: 4px; height: 8px; }
.reto.hecho { color: var(--ok); font-weight: 600; }
.titulo-jugador { color: var(--acento); font-weight: 700; }
.piezas-conjunto img.falta { filter: grayscale(1) brightness(.3) contrast(1.2); opacity: .8; }
/* giro diario */
.rueda-svg text { font: 700 12px var(--f-titulo); fill: #0B0C10; letter-spacing: .02em; }
.rueda-mini { width: 58px; height: 58px; flex: none; }
.ruleta-tarjeta.lista .rueda-mini { animation: rota 8s linear infinite; }
.ruleta { position: relative; width: min(86vw, 340px); margin: 10px auto 16px; }
.rueda { width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 5px #0B0C10, 0 0 0 9px var(--acento), 0 0 40px var(--brillo); }
.flecha-ruleta { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 34px; color: var(--rosa); z-index: 2; text-shadow: 0 2px 0 #0B0C10; }
.equipo-hud { display: flex; gap: 3px; margin-top: 3px; } .equipo-hud img { width: 20px; height: 20px; image-rendering: pixelated; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); }
/* avisos: punto rojo con número */
.boton-menu { position: relative; }
.boton-menu.con-aviso::after { content: attr(data-aviso); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--mal); color: #fff; font: 700 11px/18px var(--f-titulo); text-align: center; border: 2px solid var(--oscuro); }
.punto-aviso { margin-left: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--mal); color: #fff; font: 700 11px/20px var(--f-titulo); font-style: normal; text-align: center; }
/* liga semanal */
.liga-mini { display: block; width: 100%; text-align: left; color: var(--tinta); }
.divisiones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.divisiones span { font: 700 10px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border: 1.5px solid #556; color: #99a; }
.divisiones span.sel { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); } .divisiones span.pasada { color: #ccd; border-color: #ccd; }
.fila-liga { display: flex; align-items: center; gap: 10px; padding: 8px 12px !important; margin-bottom: 6px !important; }
.fila-liga > .num:first-child { width: 22px; font-size: 16px; }
.fila-liga.sube { border-left: 5px solid var(--ok) !important; } .fila-liga.baja { border-left: 5px solid var(--mal) !important; }
.fila-liga.yo { background: color-mix(in srgb, var(--acento) 22%, var(--sup)) !important; }
.entrada-anim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: #05060A; z-index: 3; }