/* ==========================================================================
   Overlays — title, queue, roulette, rules, results, shop, finale.
   ========================================================================== */

/* -------------------------------------------------------------------- title */
.title-scrim{
  /* No blur here. The tumbling cast and the big gold star behind this screen
     are the pitch; frosting them over to make room for a text panel is exactly
     backwards. */
  backdrop-filter:none;
  background:rgba(6,10,24,.62);
}
.title-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.6vh,30px); padding:20px; max-height:100vh; overflow:auto; }
.logo{ text-align:center; }
.logo-star{
  font-size:clamp(38px,7vw,66px); color:var(--gold); line-height:1;
  filter:drop-shadow(0 0 30px rgba(255,211,77,.6));
  animation:spinStar 6s linear infinite;
}
@keyframes spinStar{ to{ transform:rotate(360deg);} }
.logo-text{
  font-size:clamp(44px,10vw,96px); font-weight:700; letter-spacing:-.035em; line-height:.92;
  background:#9fc4ff;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 0 rgba(10,16,40,.9)) drop-shadow(0 0 40px rgba(90,150,255,.35));
}
.logo-text span{ display:block; background:#ffb521; -webkit-background-clip:text; background-clip:text; }
.logo-sub{ color:var(--dim); font-size:clamp(13px,1.9vw,16px); margin-top:8px; }

.title-card{ width:min(92vw,420px); display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.field input{
  width:100%; padding:12px 14px; font:inherit; font-size:16px; font-weight:600;
  background:rgba(255,255,255,.06); border:2px solid var(--line); border-radius:0; color:var(--text);
  outline:none; transition:border-color .2s, background .2s;
}
.field input:focus{ border-color:var(--accent); background:rgba(124,192,255,.09); }
.skins{ display:flex; gap:8px; flex-wrap:wrap; }
.skin{
  width:34px; height:34px; border-radius:0; background:var(--c);
  box-shadow:0 3px 0 rgba(0,0,0,.4) inset; transition:transform .16s, box-shadow .16s; position:relative;
}
.skin:hover{ transform:translateY(-2px); }
.skin.on{ box-shadow:0 0 0 3px var(--void0), 0 0 0 5px var(--c), 0 0 20px var(--c); transform:translateY(-3px); }
.btn.big{ padding:16px 30px; font-size:19px; letter-spacing:.02em; width:100%; }
.title-meta{ text-align:center; font-size:12px; color:var(--dimmer); letter-spacing:.06em; }
.how{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; max-width:min(94vw,760px); }
.how-item{
  font-size:13px; color:var(--dim); background:rgba(255,255,255,.04);
  border:2px solid var(--line); border-radius:0; padding:9px 14px;
}
.how-item b{ color:var(--gold); margin-right:6px; }

/* -------------------------------------------------------------------- queue */
.queue-card{ width:min(92vw,460px); text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.qseats{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.qseat{ display:flex; flex-direction:column; align-items:center; gap:6px; opacity:.35; transition:.4s; }
.qseat.on{ opacity:1; }
.qpip{ width:32px; height:32px; border-radius:0; background:var(--c); box-shadow:0 0 16px var(--c); }
.qseat:not(.on) .qpip{ background:rgba(255,255,255,.1); box-shadow:none; animation:seatPulse 1.4s ease-in-out infinite; }
@keyframes seatPulse{ 50%{ opacity:.4;} }
.qname{ font-size:11px; color:var(--dim); max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qbar{ width:100%; height:5px; border-radius:0; background:rgba(255,255,255,.08); overflow:hidden; }
.qbar i{ display:block; height:100%; width:0; background:var(--gold); animation:fill linear forwards; }
@keyframes fill{ to{ width:100%; } }
.qmeta{ font-size:12px; color:var(--dimmer); }

/* -------------------------------------------------------------------- lobby */
/* Todo comparte los mismos bordes izquierdo y derecho, y lo que no es lista
   (cabecera, rótulo del color, pista) va centrado sobre el eje de la tarjeta. */
.lobby-card{ width:min(94vw,520px); max-height:calc(100dvh - 24px); display:flex; flex-direction:column; gap:12px; padding-top:26px; padding-bottom:26px; }
/* Si no entra en la pantalla, lo que se encoge (y scrollea) es la lista. */
.lobby-card > *{ flex-shrink:0; }
.lobby-head{ display:flex; flex-direction:column; align-items:center; text-align:center; }
/* El letter-spacing deja aire después de la última letra; el margen negativo
   lo devuelve para que el texto quede centrado de verdad. */
.lobby-head .eyebrow{ margin:0 -.24em 4px 0; }
.lobby-count{ margin-top:4px; font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums; }
.lobby-count b{ font-size:20px; color:var(--text); }
.lobby-card > .lobby-rows{ display:flex; flex-direction:column; gap:6px; flex:0 1 auto; min-height:86px; overflow:auto; }
/* Cuadrícula fija: color | nombre | etiquetas | estado (| ✕ si eres anfitrión).
   Misma altura y mismas columnas en todas las filas. */
.lob-row{
  display:grid; grid-template-columns:16px minmax(0,1fr) auto minmax(48px,auto); align-items:center; gap:8px;
  height:40px; flex:0 0 auto; padding:0 12px; border-radius:0;
  background:rgba(255,255,255,.045); border:2px solid var(--line); border-left:4px solid var(--c, rgba(255,255,255,.14));
}
.lobby-rows.admin .lob-row{ grid-template-columns:16px minmax(0,1fr) auto minmax(48px,auto) 24px; }
.lob-row.you{ background:rgba(124,192,255,.08); border-color:var(--line-hot); border-left-color:var(--c, var(--line-hot)); }
.lob-row.away{ opacity:.5; filter:saturate(.4); }
.lob-row.bot{ opacity:.72; border-style:dashed; border-left-style:solid; }
/* + BOT: un lugar vacío más al pie de la lista, de la misma altura que una fila. */
.lob-add{
  height:40px; flex:0 0 auto; padding:0 12px; border-radius:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--dim);
  background:transparent; border:2px dashed var(--line);
  transition:color .1s, border-color .1s, background .1s;
}
.lob-add:hover{ color:var(--text); border-color:var(--line-hot); background:rgba(124,192,255,.08); }
.lob-kick{
  font:inherit; font-size:11px; line-height:1; color:var(--dimmer); cursor:pointer;
  width:24px; height:24px; padding:0; display:grid; place-items:center;
  border-radius:0; border:2px solid var(--line); background:transparent;
  transition:color .1s, border-color .1s, background .1s;
}
.lob-kick:hover{ color:var(--danger); border-color:currentColor; background:rgba(255,107,107,.12); }
.lob-pip{ width:16px; height:16px; border-radius:0; background:var(--c, rgba(255,255,255,.12)); box-shadow:0 0 12px var(--c, transparent); }
.lob-name{ font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lob-you{ margin-left:7px; font-size:9.5px; letter-spacing:.14em; color:var(--accent); vertical-align:2px; }
.lob-tags{ display:flex; align-items:center; gap:6px; }
.lob-admin{
  font-size:10px; font-weight:700; letter-spacing:.12em; line-height:1; color:var(--gold);
  padding:4px 8px; border-radius:0; border:2px solid rgba(255,211,77,.6);
  background:rgba(255,211,77,.1); white-space:nowrap;
}
.lob-away{ font-size:11px; color:var(--dimmer); white-space:nowrap; }
/* Dificultad de un bot: botón para el anfitrión, etiqueta para el resto. */
.lob-level{
  font:inherit; font-size:10px; font-weight:700; letter-spacing:.12em; line-height:1;
  padding:4px 8px; border-radius:0; border:2px solid currentColor; white-space:nowrap;
  background:transparent; color:var(--gold);
}
.lob-level.easy{ color:var(--good); }
.lob-level.hard{ color:var(--danger); }
button.lob-level{ cursor:pointer; transition:background .1s; }
button.lob-level:hover{ background:rgba(255,255,255,.08); }
.lob-ready{
  font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--dimmer);
  text-align:right; white-space:nowrap;
}
.lob-ready.on{ color:var(--good); text-shadow:0 0 14px rgba(109,223,60,.5); }
.lob-ready.edit{ color:var(--accent); }
/* 16 colores = dos filas de 8, a todo el ancho. */
.lobby-colour{ gap:10px; }
.lobby-colour > span{ text-align:center; margin-right:-.18em; }
.lobby-card .skins{ display:grid; grid-template-columns:repeat(8, 1fr); gap:8px; }
.lobby-card .skin{ width:auto; height:30px; }
/* Botonera en dos columnas iguales; .wide ocupa la fila entera. */
.lobby-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px 8px; }
.lobby-actions .wide{ grid-column:1 / -1; }
.lobby-actions .btn{ min-width:0; padding:12px 6px; font-size:14px; white-space:nowrap; }
.lobby-go{ display:flex; gap:8px; }
.lobby-go #lobbyStart{ flex:1 1 0; font-size:16px; }
.lobby-go #lobbyRounds{ flex:0 0 64px; padding:0 4px; color:#fff; font-size:16px; text-align:center; cursor:pointer; }
.lobby-go #lobbyRounds option{ background:#0c1226; color:#fff; }
.lobby-actions #lobbyReady.is-ready{
  background:#3f9a1c; box-shadow:0 5px 0 #2a6b10;
}
.lobby-hint{ text-align:center; font-size:12px; color:var(--dimmer); min-height:16px; }
/* Selector de juegos del anfitrión: otra tarjeta en la misma celda del overlay
   que la mesa; mientras está abierta, la mesa se oculta. */
.lobby-go #lobbyGamesBtn{ flex:0 0 auto; padding:12px 12px; font-size:14px; }
/* Sin EMPEZAR (no eres anfitrión), JUEGOS ocupa la fila. */
.lobby-go.guest #lobbyGamesBtn{ flex:1 1 0; }
.lobby-card, .lobby-games{ grid-area:1 / 1; }
/* El ancho sale del alto de la pantalla: las 6 filas llenan el alto disponible,
   así con más resolución las miniaturas crecen (Julio, 5-oct-2026). */
.lobby-games{ width:min(96vw, max(720px, calc((100dvh - 444px) * 2.37 + 132px))); max-height:calc(100dvh - 24px); display:flex; flex-direction:column; gap:12px; padding-top:22px; padding-bottom:22px; }
.lobby-games > *{ flex-shrink:0; }
.lobby-games .lobby-head h1{ font-size:clamp(22px,3.6vw,32px); }
.lg-hint{ text-align:center; font-size:12px; color:var(--dim); }
.lg-actions{ display:flex; gap:8px; }
.lg-actions #lobbyGamesBack, .lg-actions #lobbyGamesAll{ flex:0 0 auto; min-width:140px; }
.lg-actions #lobbyGamesDone{ flex:1 1 0; }
/* Los demás solo miran: ATRÁS es el único botón y ocupa la fila. */
.lobby-games.guest .lg-actions #lobbyGamesBack{ flex:1 1 0; }
.lobby-games > .lg-grid{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px;
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-content:start; gap:8px;
}
/* 8 columnas x 6 filas (Julio, 5-oct-2026); en pantallas angostas no entran y se acomodan solas. */
@media (max-width: 1000px){ .lobby-games > .lg-grid{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); } }
.lg-game{
  position:relative; display:flex; flex-direction:column; gap:5px; padding:6px; min-width:0;
  font:inherit; color:var(--text); text-align:left; cursor:pointer;
  background:rgba(124,192,255,.08); border:2px solid var(--line-hot);
  transition:opacity .12s, filter .12s, border-color .12s;
}
.lg-game::after{
  content:'✓'; position:absolute; top:3px; right:3px; width:20px; height:20px;
  display:grid; place-items:center; font-size:12px; font-weight:700; color:#0c2a02; background:var(--good);
}
.lg-game.off{ opacity:.35; filter:grayscale(.9); background:rgba(255,255,255,.03); border-color:var(--line); }
.lg-game.off::after{ content:''; background:rgba(4,7,18,.7); box-shadow:inset 0 0 0 2px var(--line); }
.lg-game.off:hover{ opacity:.6; }
.lg-game[disabled]{ cursor:default; }
.lg-game.off[disabled]:hover{ opacity:.35; }
.lg-art{ width:100%; aspect-ratio:16 / 9; background:rgba(255,255,255,.05); image-rendering:pixelated; }
.lg-name{ font-size:12px; font-weight:600; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Celular: media botonera no alcanza para el ícono de PERSONALIZAR, y la
   etiqueta de anfitrión se achica para que el nombre no se corte. */
@media (max-width: 480px){
  .lobby-actions .lobby-custom:not(.wide) svg{ display:none; }
  .lob-admin{ font-size:9px; padding:3px 5px; letter-spacing:.08em; }
}
.skin[disabled]{ opacity:.28; filter:grayscale(.55); pointer-events:none; transform:none; }

/* -------------------------------------------------- votación + ruleta
   Rediseño del 2-oct-2026 (Julio: "reworkealo por completo... que no salgan
   ahí los personajes, incluso puedes hacerle zoom al board"). Detrás ya no va
   la party con el elenco parado sino el tablero del match en vitrina, con la
   cámara girando despacio (render/_board.js showcase). El velo es de cine:
   franjas negras arriba y abajo, viñeta, y el centro casi limpio para que el
   tablero se lea entre las cartas. */
.scrim.vote-scrim{
  backdrop-filter:none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 55%, rgba(4,7,18,.12), rgba(4,7,18,.62) 100%),
    linear-gradient(180deg, rgba(4,7,18,.55), rgba(4,7,18,0) 32%, rgba(4,7,18,0) 68%, rgba(4,7,18,.6));
}
.scrim.vote-scrim::before, .scrim.vote-scrim::after{
  content:''; position:absolute; left:0; right:0; height:clamp(26px,7vh,70px); background:#03050c;
  animation:barsIn .45s cubic-bezier(.2,.9,.3,1) both;
}
.scrim.vote-scrim::before{ top:0; transform-origin:top; }
.scrim.vote-scrim::after{ bottom:0; transform-origin:bottom; }
@keyframes barsIn{ from{ transform:scaleY(0);} }

.vote-title{
  display:flex; align-items:center; gap:.7em;
  font-size:clamp(20px,3.1vw,38px); font-weight:700; line-height:1.1; text-align:center;
  letter-spacing:.04em; text-transform:uppercase; color:#fff;
  text-shadow:4px 4px 0 #000, 0 0 30px rgba(124,192,255,.35);
  animation:titleIn .45s cubic-bezier(.2,1.4,.35,1) both;
}
/* Estrellitas doradas a los lados del título, girando como la del logo. */
.vote-title::before, .vote-title::after{
  content:'\2605'; color:var(--gold); font-size:.8em;
  text-shadow:3px 3px 0 #000, 0 0 18px rgba(255,211,77,.6);
  animation:spinStar 6s linear infinite;
}
@keyframes titleIn{ from{ opacity:0; transform:translateY(-18px) scale(.9);} }

/* ----------------------------------------------------------------- roulette */
/* La ruleta es la misma fila de la votación convertida en tira (overlays.js
   showRoulette): las cartas son .pick-item dentro de .vote, así que miden y
   se ven igual. La ventana ocupa todo el ancho y suma --pad arriba y abajo
   (con margen negativo, no mueve nada) para que la carta agrandada no se corte. */
@property --edge{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.vote .reel-window{
  --pad:48px;
  position:relative; width:100vw; flex:none; display:flex; align-items:center;
  padding:var(--pad) 0; margin:calc(var(--pad) * -1) 0;
  overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent);
  transition:--edge .7s ease-out;
}
.vote .reel-window.open{ --edge:14%; }
/* Franja oscura detrás de la tira: entra con la ruleta. */
.vote .reel-window::before{
  content:''; position:absolute; left:0; right:0; top:calc(var(--pad) - 24px); bottom:calc(var(--pad) - 24px);
  background:rgba(5,8,20,.62); opacity:0; transition:opacity .4s;
}
.vote .reel-window.open::before{ opacity:1; }
.vote .reel-strip{
  flex:none; position:relative; left:50%; display:flex; align-items:stretch;
  gap:clamp(10px,1.6vw,22px); will-change:transform;
}
.vote .reel-strip .pick-item{ animation:none; flex:none; }
/* Las copias de los costados entran con la ruleta; las del voto ya estaban. */
.vote .reel-strip .pick-item.fresh{ opacity:0; }
.vote .reel-window.open .pick-item.fresh{ opacity:1; }
.vote .reel-strip .pick-item.hot{ transform:scale(1.07); border-color:var(--line-hot); }
.vote .reel-marker{
  /* Una línea al centro, como la caja de Counter-Strike: el juego es la carta
     que queda debajo, frene donde frene dentro de ella. Va encima de las cartas. */
  position:absolute; left:50%; top:50%; width:4px; z-index:2; pointer-events:none;
  transform:translate(-50%,-50%) scaleY(.86); opacity:0;
  transition:opacity .3s, transform .4s cubic-bezier(.2,1.4,.35,1);
  background:var(--gold);
  box-shadow:0 0 0 2px rgba(0,0,0,.6), 0 0 18px rgba(255,211,77,.6);
}
.vote .reel-window.open .reel-marker{ opacity:1; transform:translate(-50%,-50%); }
/* Flechas de la marca: arriba apunta abajo, abajo apunta arriba. */
.vote .reel-marker i{
  position:absolute; left:50%; width:0; height:0; transform:translateX(-50%);
  border-left:14px solid transparent; border-right:14px solid transparent;
  filter:drop-shadow(3px 3px 0 #000);
}
.vote .reel-marker i:first-child{ top:-4px; border-top:16px solid var(--gold); }
.vote .reel-marker i:last-child{ bottom:-4px; border-bottom:16px solid var(--gold); }
/* Frenó: la ganadora salta al frente, las demás se apagan y la marca destella. */
.vote .reel-window.land .pick-item:not(.won){ opacity:.28; filter:saturate(.3) brightness(.8); }
.vote .reel-window.land .pick-item.won{
  z-index:1; transform:scale(1.16); border-color:var(--gold);
  box-shadow:6px 6px 0 rgba(0,0,0,.7), 0 0 50px rgba(255,211,77,.55);
  animation:reelWon .5s cubic-bezier(.2,1.6,.35,1);
}
.vote .reel-window.land .pick-item.won .reel-name{ color:var(--gold); }
.vote .reel-window.land .pick-item.won .pick-art{ border-bottom-color:var(--gold); }
.vote .reel-window.land .pick-item.won .pick-meter i{ background:var(--gold); }
.vote .reel-window.land .reel-marker{ animation:markerFlash .6s ease-out; }
@keyframes reelWon{ 0%{ transform:scale(1.32);} 100%{ transform:scale(1.16);} }
@keyframes markerFlash{
  0%{ box-shadow:0 0 0 2px rgba(0,0,0,.6), 0 0 60px 6px rgba(255,211,77,.95); }
}
/* El título cambia de "Vota…" a "Siguiente minijuego" con un golpe, y la
   barra del reloj se apaga sin soltar su lugar (nada se corre de alto). */
.vote-title{ position:relative; z-index:1; }
.vote-title.swap{ animation:titleSwap .4s cubic-bezier(.2,1.5,.35,1); }
@keyframes titleSwap{ from{ transform:scale(.82); opacity:.35; } }
.vote .pick-bar.gone{ opacity:0; transition:opacity .25s; }
@keyframes slam{ 0%{ transform:scale(1.09);} 100%{ transform:scale(1);} }

/* --------------------------------------------------------------------- pick */
/* Nombre y familia del juego en las cartas (votación, ruleta y grilla de testing). */
.reel-name{
  font-size:clamp(14px,1.6vw,20px); font-weight:700; letter-spacing:-.01em; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reel-fam{ margin-top:3px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.pick{ display:flex; flex-direction:column; align-items:center; gap:16px; width:min(94vw,980px); }
.pick-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.pick-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:min(21vw,220px); padding:10px; font:inherit; color:inherit; text-align:center;
  cursor:pointer; background:rgba(10,15,34,.95); border:2px solid var(--line-hot);
  border-radius:0; box-shadow:var(--shadow);
}
.pick-item[disabled]{ cursor:default; }
.pick-item:not([disabled]):hover, .pick-item.chosen{
  border-color:var(--gold); box-shadow:0 0 30px rgba(255,211,77,.3); transform:translateY(-3px);
}
.pick-item .reel-name{ font-size:clamp(14px,2vw,19px); max-width:100%; white-space:normal; line-height:1.15; }
.pick-art{
  width:100%; aspect-ratio:16 / 9; background:rgba(255,255,255,.05);
  box-shadow:3px 3px 0 rgba(0,0,0,.5), inset 0 0 0 1px rgba(160,200,255,.22);
}

/* La votación (no la grilla de testing, que comparte .pick-item): cartas
   altas con el arte a sangre, cuerpo con nombre y familia, y al pie la
   probabilidad de salir como medidor + número. */
/* Con revancha son cinco cartas (la revancha + cuatro): el ancho alcanza para
   las cinco en una fila desde 1000 px. */
.vote{ gap:clamp(18px,3.4vh,34px); width:min(96vw,1400px); }
.vote .pick-row{ gap:clamp(10px,1.6vw,22px); align-items:stretch; }
.vote .pick-item{
  position:relative; width:clamp(150px,17vw,250px); padding:0; gap:0; align-items:stretch; text-align:left;
  background:rgba(12,17,38,.97); border:3px solid var(--line); box-shadow:var(--shadow);
  transition:transform .14s ease-out, border-color .14s, box-shadow .14s, opacity .2s, filter .2s;
  animation:voteIn .5s cubic-bezier(.2,1.3,.3,1) backwards; animation-delay:calc(var(--i, 0) * 70ms);
}
@keyframes voteIn{ from{ opacity:0; transform:translateY(40px) scale(.9);} }
.vote .pick-item:not([disabled]):hover, .vote .pick-item.hov{
  border-color:var(--line-hot); transform:translateY(-6px);
  box-shadow:6px 12px 0 rgba(0,0,0,.6);
}
.vote .pick-item.chosen, .vote .pick-item.chosen:hover{
  border-color:var(--gold); transform:translateY(-10px);
  box-shadow:6px 14px 0 rgba(0,0,0,.6), 0 0 44px rgba(255,211,77,.45);
}
/* Ya votaste: las otras tres bajan un tono para que tu carta se lea sola.
   (.reel-strip: la ruleta arranca con la misma pose y la suelta un cuadro después.) */
.vote .pick-row.has-chosen .pick-item:not(.chosen),
.vote .reel-strip.has-chosen .pick-item:not(.chosen){ filter:brightness(.72) saturate(.75); }
.vote .pick-row.has-chosen .pick-item:not(.chosen):hover{ filter:none; }
.vote .pick-art{ box-shadow:none; border-bottom:3px solid var(--line); image-rendering:pixelated; }
.vote .pick-item.chosen .pick-art{ border-bottom-color:var(--gold); }
.vote .pick-body{ flex:1; padding:10px 12px 4px; }
.vote .pick-item .reel-name{ font-size:clamp(14px,1.7vw,20px); }
.vote .pick-item.chosen .reel-name{ color:var(--gold); }
.vote .pick-odds{ display:flex; align-items:center; gap:10px; padding:8px 12px 12px; }
.pick-meter{ flex:1; height:10px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 2px rgba(0,0,0,.45); }
.pick-meter i{ display:block; height:100%; width:0; background:var(--line-hot); transition:width .35s cubic-bezier(.2,1,.3,1); }
.vote .pick-item.chosen .pick-meter i{ background:var(--gold); }
/* Probabilidad de salir. Reserva su ancho siempre, asi el medidor no salta
   cuando un juego pasa de 0 % a 100 %. */
.pick-votes{ min-height:1.3em; font-size:clamp(16px,2.4vw,24px); line-height:1.3; color:var(--gold); }
.vote .pick-votes{ min-width:3.3em; text-align:right; font-size:clamp(15px,1.8vw,22px); font-variant-numeric:tabular-nums; text-shadow:2px 2px 0 #000; }
.pick-bar{ width:min(88vw,420px); }
.vote .pick-bar{ width:min(88vw,640px); height:6px; box-shadow:0 0 0 2px rgba(0,0,0,.55); }
/* Revancha: la primera carta es el juego de la ronda pasada, un poco apartada. */
.pick-item.rematch{ position:relative; margin-right:clamp(10px,3vw,40px); }
.pick-rematch{
  position:absolute; top:-0.75em; left:50%; transform:translateX(-50%);
  padding:2px 10px; font-size:clamp(12px,1.6vw,15px); letter-spacing:.08em; text-transform:uppercase;
  color:#1a1206; background:var(--gold); white-space:nowrap;
}
.vote .pick-rematch{ box-shadow:3px 3px 0 #000; z-index:1; }

/* Grilla de testing (/testing): todos los juegos de una, scrolleable. Misma
   carta que el pick normal, pero sin ancho fijo — la caja la da el grid. */
.pickgrid{ width:min(94vw,1040px); }
.pickgrid-row{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px; width:100%; max-height:72vh; overflow-y:auto; padding:4px;
}
.pickgrid .pick-item{ width:auto; padding:8px; gap:5px; }
.pickgrid .pick-item .reel-name{ font-size:13px; }

/* -------------------------------------------------------------------- rules
   La pantalla de LISTO (overlays.js showRules, Julio 9-oct-2026). Todo
   centrado sobre el tablero en vitrina (el Stage principal, con zoom y paneo
   lentos: main.js showBoardBackdrop): arriba el nombre del juego flotando, sin
   recuadro, y justo abajo de qué va; después, a la misma altura, la mesa
   (quién dio LISTO) y la ventana de prueba; debajo la barra de controles con
   ESTOY LISTO pegado a la derecha, y al final el consejo. El 3 · 2 · 1 sale
   encima de todo, sin reservarle lugar. Si no entra a lo alto, showRules lo
   achica parejo (.rl-wrap con scale).

   La ventana de prueba es un agujero: la prueba se dibuja en su propio canvas
   (core/practice.js), encogido a la caja de .rl-screen, debajo de esta capa.
   .rl-bg es transparente y cubre todo menos ese hueco (clip-path): los clics
   de afuera no le llegan al juego y los de adentro sí. La ventana es siempre
   16:9. .rl no atrapa clics: solo .rl-bg y los paneles. */
#overlay > .rl{ position:fixed; inset:0; pointer-events:none; display:grid; place-items:center; place-content:center; }
.rl{
  --rl-pad:clamp(16px, 1.8vw, 50px);
  --rl-gap:clamp(14px, 1.4vw, 28px);
  --blk:min(1600px, calc(100vw - 2 * var(--rl-pad)));
  --rl-list:clamp(190px, calc(var(--blk) * .18), 290px);
  /* La ventana: .48 de un bloque de 1300 como mucho en la primera vuelta, y
     dos veces un 20 % más grande (Julio, 9-oct-2026): .6912. Mientras al
     centro le queden 240 px; en pantallas angostas crece lo que entra. */
  --scr-w:min(calc(min(1300px, calc(100vw - 2 * clamp(10px, 2vh, 24px))) * .6912),
    calc(var(--blk) - var(--rl-list) - var(--rl-gap) - 12px));
  /* Y siempre 16:9 (Julio, 9-oct-2026: el navegador casi nunca deja la
     pantalla en 16:9). */
  --scr-h:calc(var(--scr-w) * 9 / 16);
  --row-h:calc(var(--scr-h) + 12px);                /* la fila de arriba = la ventana con su marco */
  --rl-ink:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000;
}

/* Fondo: transparente, se ve el tablero. Solo ataja los clics (con el hueco). */
.rl-bg{ position:absolute; inset:0; pointer-events:auto; }

.rl-wrap{ display:flex; flex-direction:column; align-items:center; gap:var(--rl-gap); transform-origin:50% 50%; }
/* El bloque mide lo que la mesa y la ventana: los controles y el consejo, igual. */
.rl-block{
  position:relative; width:calc(var(--rl-list) + var(--rl-gap) + var(--scr-w) + 12px);
  display:flex; flex-direction:column; gap:var(--rl-gap);
}
.rl-top{ display:flex; align-items:stretch; gap:var(--rl-gap); height:var(--row-h); }
.rl-table{
  background:rgba(8,12,26,.88); border:2px solid rgba(160,200,255,.2); box-shadow:4px 4px 0 rgba(0,0,0,.6);
  pointer-events:auto;
}

/* La mesa: una fila por jugador con su cara, su nombre en su color y el sello
   de LISTO; los bots ya están listos (CPU). Las filas se achican para que entren
   los ocho en la altura de la ventana (--n lo pone showRules). */
.rl-table{
  flex:none; width:var(--rl-list); display:flex; flex-direction:column; gap:8px; padding:10px; min-height:0;
  --rl-face:clamp(20px, calc((var(--row-h) - 66px - (var(--n) - 1) * 5px) / var(--n) - 10px), 56px);
  animation:rlFromLeft .45s cubic-bezier(.2,1.2,.35,1) both;
}
.rl-table-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; padding:0 2px;
  font-size:max(10px, calc(var(--blk) * .0098)); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  text-shadow:var(--rl-ink);
}
.rl-count{ letter-spacing:.06em; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rl-count.all{ color:var(--good); }
.rl-rows{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.rl-row{
  display:flex; align-items:center; gap:8px; padding:3px 8px 3px 3px;
  background:rgba(10,15,32,.86); border:2px solid rgba(160,200,255,.16); border-left:5px solid var(--c);
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
  animation:rlFromLeft .45s calc(.08s + var(--i) * 55ms) cubic-bezier(.2,1.2,.35,1) both;
  transition:background .25s, border-color .25s;
}
.rl-face{ flex:none; position:relative; width:var(--rl-face); height:var(--rl-face); }
.rl-face canvas{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.rl-who{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:6px; }
.rl-pname{
  font-size:clamp(11px, calc(var(--blk) * .0112), 15px); font-weight:700; line-height:1.1; color:var(--c);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000;
}
.rl-you{ flex:none; font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--dim); }
.rl-row.you{ background:rgba(22,30,60,.94); border-color:rgba(255,255,255,.34); border-left-color:var(--c); }
.rl-state{
  flex:none; padding:4px 6px 3px; font-size:clamp(9px, calc(var(--blk) * .0092), 12px); font-weight:700; letter-spacing:.04em;
  white-space:nowrap; color:var(--dimmer); background:rgba(255,255,255,.05);
}
.rl-row:not(.wait) .rl-state:empty{ display:none; }
/* Esperando: puntos que se van llenando. */
.rl-row.wait .rl-state{ min-width:2.4em; text-align:left; }
.rl-row.wait .rl-state::after{
  content:'...'; display:inline-block; width:0; overflow:hidden; vertical-align:bottom;
  animation:rlDots 1.4s steps(4) infinite;
}
@keyframes rlDots{ to{ width:1.6em; } }
.rl-row.cpu .rl-state{ color:#cfe6ff; background:rgba(124,192,255,.16); }
.rl-row.on:not(.cpu){ background:rgba(16,40,16,.9); border-color:rgba(109,223,60,.6); border-left-color:var(--c); }
.rl-row.on:not(.cpu) .rl-state{ color:#0c2a00; background:var(--good); box-shadow:2px 2px 0 rgba(0,0,0,.55); }
/* El sello: cae grande y torcido, y la fila destella en verde. */
.rl-row.pop{ animation:rlFlash .7s ease-out both; }
.rl-row.pop .rl-state{ animation:rlStamp .5s cubic-bezier(.2,1.7,.35,1) both; }
@keyframes rlStamp{
  0%{ transform:scale(2.3) rotate(-10deg); opacity:0; }
  55%{ transform:scale(.92) rotate(3deg); opacity:1; }
  100%{ transform:none; opacity:1; }
}
@keyframes rlFlash{
  0%{ box-shadow:0 0 0 3px var(--good), 0 0 30px rgba(109,223,60,.8); }
  100%{ box-shadow:3px 3px 0 rgba(0,0,0,.55); }
}

/* El juego, arriba y flotando, sin recuadro: nombre, de qué va y cómo se gana. */
.rl-head{
  max-width:min(92vw, 60em); display:flex; flex-direction:column; align-items:center; gap:calc(var(--blk) * .005);
  text-align:center; pointer-events:none;
  animation:rlDrop .55s .05s cubic-bezier(.2,1.3,.35,1) both;
}
.rl-round{ font-size:clamp(11px, calc(var(--blk) * .0095), 15px); font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); text-shadow:var(--rl-ink); }
.rl-name{
  font-size:clamp(30px, calc(var(--blk) * .036), 60px); font-weight:700; line-height:1.05; letter-spacing:-.01em; color:#fff;
  text-shadow:0 3px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 0 -3px 0 #000, 3px 3px 0 #000, -3px 3px 0 #000,
    3px -3px 0 #000, -3px -3px 0 #000, 0 7px 0 rgba(0,0,0,.5);
  overflow-wrap:anywhere;
}
.rl-name::after{
  content:''; display:block; height:4px; width:44%; margin:calc(var(--blk) * .0062) auto 0;
  background:var(--gold); box-shadow:3px 3px 0 #000;
}
.rl-blurb{ font-size:clamp(13px, calc(var(--blk) * .0122), 20px); line-height:1.4; color:#eef3ff; text-shadow:var(--rl-ink); }
.rl-goal{ font-size:clamp(11px, calc(var(--blk) * .0098), 16px); color:#d5dcf0; letter-spacing:.04em; text-shadow:var(--rl-ink); }
.rl-goal b{ color:var(--gold); }
/* El consejo, al final, debajo de los controles. */
.rl-tip{
  padding:calc(var(--blk) * .007) calc(var(--blk) * .012); font-size:clamp(12px, calc(var(--blk) * .0105), 17px); line-height:1.35;
  color:#ffe9bd; text-align:center; pointer-events:auto;
  background:rgba(38,27,4,.9); border:2px solid rgba(255,211,77,.6); box-shadow:4px 4px 0 rgba(0,0,0,.6);
  animation:rlFromBottom .5s .18s cubic-bezier(.2,1.2,.35,1) both;
}
.rl-tip b{ color:var(--gold); margin-right:6px; }

/* La ventana de prueba: un marco grueso y el agujero (.rl-screen). Mientras la
   prueba no corre la tapa el arte del juego (.rl-ph); con .live se desvanece y
   se ve el juego. Al arrancar otra partida del bucle (.loop) hace un fundido. */
.rl-tv{
  flex:none; position:relative; pointer-events:none;
  border:6px solid #0b1124; outline:2px solid var(--gold);
  box-shadow:6px 6px 0 rgba(0,0,0,.65), 0 0 40px rgba(255,211,77,.22);
  animation:rlFade .5s .15s ease both;
}
.rl-screen{ position:relative; width:var(--scr-w); height:var(--scr-h); overflow:hidden; }
.rl-ph{ position:absolute; inset:0; background-color:#0b1124; transition:opacity .45s ease; }
.rl-screen.live .rl-ph{ opacity:0; }
.rl-screen.loop::after{
  content:''; position:absolute; inset:0; background:#070b18;
  animation:rlLoop .55s ease-out both;
}
@keyframes rlLoop{ from{ opacity:1; } to{ opacity:0; } }
.rl-tv-tag{
  position:absolute; left:14px; top:0; transform:translateY(-55%);
  padding:4px 10px 3px; font-size:calc(var(--blk) * .0094); font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:#3a2500; background:var(--gold); box-shadow:3px 3px 0 rgba(0,0,0,.6);
}

/* Abajo, pegada a la fila: los controles del juego (las mismas teclas que la
   ayuda del HUD) y, a la derecha, el botón de LISTO con su tecla. */
.rl-foot{ display:flex; align-items:stretch; pointer-events:none; animation:rlFromBottom .5s .12s cubic-bezier(.2,1.2,.35,1) both; }
.rl-keys{
  flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 30px;
  padding:calc(var(--blk) * .011) calc(var(--blk) * .016);
  background:rgba(8,12,26,.88); border:2px solid rgba(160,200,255,.2); box-shadow:4px 4px 0 rgba(0,0,0,.6);
  pointer-events:auto;
}
.rl-key{ display:flex; align-items:center; gap:10px; }
.rl-caps{ display:flex; gap:5px; }
.rl-caps kbd, .rl-ready kbd{
  display:inline-block; min-width:30px; padding:6px 8px 5px; font-family:var(--ui); font-size:max(11px, calc(var(--blk) * .0108));
  font-weight:700; line-height:1; text-align:center; color:#fff;
  background:rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.82); box-shadow:0 3px 0 rgba(255,255,255,.3);
}
.rl-klabel{ font-size:max(11px, calc(var(--blk) * .0115)); color:var(--text); text-shadow:2px 2px 0 #000; }
.rl-go{ flex:none; display:flex; align-items:stretch; pointer-events:auto; background:rgba(8,12,26,.88); }
.rl-ready{
  padding:0 calc(var(--blk) * .022); font-size:calc(var(--blk) * .0158); font-weight:700; letter-spacing:.06em; gap:14px;
  box-shadow:4px 4px 0 rgba(0,0,0,.6);
}
.rl-ready:active{ transform:translateY(2px); box-shadow:2px 2px 0 rgba(0,0,0,.6); }
.rl-ready kbd{ font-size:calc(var(--blk) * .0092); color:#3a2500; background:rgba(255,255,255,.32); border-color:#3a2500; box-shadow:0 3px 0 rgba(58,37,0,.35); }
.rl-ready[disabled]{ opacity:1; filter:none; background:var(--good); color:#0c2a00; box-shadow:4px 4px 0 rgba(0,0,0,.6); }
.rl-ready[disabled] kbd{ display:none; }
.rl-force{ padding:0 calc(var(--blk) * .012); font-size:calc(var(--blk) * .0098); }

/* El final de la espera: 3 · 2 · 1 y "preparados", grande y encima del bloque. */
.rl-cd{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-size:clamp(70px, 17vh, 180px); line-height:1; font-weight:700; color:var(--gold);
  text-shadow:0 8px 0 rgba(10,7,0,.55), 0 0 22px #000, 0 0 60px rgba(255,211,77,.6);
}
.rl-cd:empty{ display:none; }
.rl-cd.word{ font-size:clamp(30px, 6.5vh, 70px); letter-spacing:.14em; }
.rl-cd.beat{ animation:rlBeat .45s cubic-bezier(.2,1.7,.35,1); }
@keyframes rlBeat{ 0%{ transform:scale(1.9); opacity:0; } 40%{ transform:scale(1); opacity:1; } }

/* Pantallas angostas: menos margen, para que la ventana crezca lo más posible. */
@media (max-width: 1400px){ .rl{ --rl-pad:16px; --rl-gap:14px; } }

@keyframes rlFade{ from{ opacity:0; } }
@keyframes rlFromLeft{ from{ opacity:0; transform:translateX(-46px); } }
@keyframes rlFromBottom{ from{ opacity:0; transform:translateY(46px); } }
@keyframes rlDrop{ from{ opacity:0; transform:translateY(-34px) scale(.96); } }

/* ---------------------------------------------------------------- countdown
   Its own phase between the rules card and play. The arena is already built
   and running behind it, so this layer darkens as little as it can get away
   with and never eats a pointer event. */
#overlay.no-pointer, #overlay.no-pointer > *{ pointer-events:none !important; }
.cd-veil{
  position:absolute; inset:0; backdrop-filter:none;
  background:rgba(4,7,18,.4);
  animation:cdVeil .35s ease both;
}
@keyframes cdVeil{ from{ opacity:0; } }
.cd-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.cd-game{
  font-size:clamp(15px,2.6vw,25px); font-weight:600; letter-spacing:.02em; color:#dbe7ff;
  text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 30px rgba(90,150,255,.45);
  max-width:min(92vw,720px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cd-num{
  font-size:clamp(96px,20vw,240px); line-height:.95; font-weight:700; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:var(--gold);
  text-shadow:0 8px 0 rgba(10,7,0,.45), 0 0 70px rgba(255,211,77,.65);
}
.cd-num.go{
  font-size:clamp(56px,13vw,168px); letter-spacing:.01em;
  color:#eaffd9; text-shadow:0 8px 0 rgba(4,26,0,.45), 0 0 80px rgba(140,255,90,.8);
}
.cd-num.beat{ animation:cdBeat .5s cubic-bezier(.2,1.7,.35,1); }
@keyframes cdBeat{
  0%{ transform:scale(2.15) rotate(-4deg); opacity:0; }
  38%{ transform:scale(1) rotate(0deg); opacity:1; }
  100%{ transform:scale(.97); }
}
.cd-round{
  margin-top:4px; font-size:clamp(10px,1.5vw,12.5px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); max-width:min(92vw,640px);
}

/* ------------------------------------------------------------------ results
   Centrado en pantalla (Julio, 3-oct-2026). Un podio: los bloques suben del
   piso del último al primero, cae cada retrato, se estampa el lugar, a cada
   uno le llueven sus monedas al contador y al final se corona el ganador. Las
   demoras (--in, --t, --win) las arma showResults contadas desde el primer
   dibujo, así un redibujo cae en el mismo instante. */
.m1{ color:var(--gold); } .m2{ color:#d6e2ff; } .m3{ color:#e0a878; } .m4{ color:var(--dimmer); }

.rz-scrim{
  background:radial-gradient(ellipse 75% 65% at 50% 58%, rgba(22,34,86,.6), rgba(4,7,18,.86));
  animation:rzFade .35s ease-out var(--in) both;
}
@keyframes rzFade{ from{ opacity:0; } }
.rz{
  --face:clamp(52px, min(11vh, 7.4vw), 112px);
  --pmin:clamp(84px, 13vh, 118px);
  --pmax:clamp(124px, 28vh, 260px);
  display:flex; flex-direction:column; align-items:center; width:100%; max-height:100%; padding:12px 0;
}

/* El título: golpe sobre una franja que cruza la pantalla. */
.rz-head{
  position:relative; z-index:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:clamp(8px,1.4vh,14px) clamp(40px,8vw,120px); margin-bottom:clamp(34px,7vh,72px);
  animation:rzSlam .5s cubic-bezier(.2,1.6,.3,1) var(--in) both;
}
.rz-head::before{
  content:''; position:absolute; z-index:-1; inset:0 -14vw; transform:skewY(-3deg);
  background:linear-gradient(90deg, transparent, rgba(39,73,200,.94) 20%, rgba(54,140,255,.96) 50%, rgba(39,73,200,.94) 80%, transparent);
  animation:rzBand .45s cubic-bezier(.3,1.2,.4,1) var(--in) both;
}
.rz-title{
  font-size:clamp(30px,5.4vw,70px); font-weight:700; line-height:1; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; text-shadow:5px 5px 0 #0b1640; transform:skewX(-8deg);
}
.rz-game{ font-size:clamp(11px,1.3vw,15px); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); text-shadow:2px 2px 0 #0b1640; }
@keyframes rzSlam{ 0%{ opacity:0; transform:scale(2.4) rotate(-5deg);} 60%{ opacity:1;} 100%{ opacity:1; transform:none;} }
@keyframes rzBand{ from{ transform:skewY(-3deg) scaleX(0);} }

/* El podio: 1.º al medio, los demás alternando a los costados. */
.rz-stage{
  display:flex; justify-content:center; align-items:flex-end; gap:clamp(6px,1vw,14px);
  width:min(96vw, calc(var(--n) * 196px));
}
.rz-col{ position:relative; flex:1 1 0; min-width:0; max-width:184px; display:flex; flex-direction:column; }
.rz-who{
  position:relative; z-index:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding-bottom:9px;
  animation:rzDrop .55s cubic-bezier(.2,1.55,.35,1) calc(var(--in) + 180ms) both;
}
@keyframes rzDrop{ 0%{ opacity:0; transform:translateY(-70px) scale(.7);} 60%{ opacity:1;} }
.rz-face{
  position:relative; width:var(--face); aspect-ratio:1; overflow:hidden;
  background:color-mix(in srgb, var(--c) 30%, #0b1022); border:3px solid var(--c); box-shadow:4px 4px 0 rgba(0,0,0,.6);
}
.rz-face canvas{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.rz-name{ display:flex; align-items:center; gap:5px; max-width:100%; margin-top:5px; font-size:clamp(12px,1.25vw,16px); font-weight:700; text-shadow:2px 2px 0 rgba(0,0,0,.7); }
.rz-name span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-name small{ flex:none; padding:1px 5px; font-size:10px; background:#fff; color:#0b1022; text-shadow:none; }
.rz-score{ max-width:100%; font-size:clamp(10px,1vw,13px); color:var(--dim); text-shadow:1px 1px 0 #000; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-score span{ font-size:.85em; letter-spacing:.08em; text-transform:uppercase; }

/* El bloque: sube del piso con rebote; la altura dice el lugar. */
.rz-ped{
  position:relative; z-index:1;
  height:calc(var(--pmin) + (var(--pmax) - var(--pmin)) * var(--h));
  display:flex; flex-direction:column; align-items:center; gap:clamp(4px,1vh,10px); padding-top:clamp(8px,1.4vh,14px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 34%, #0b1022), color-mix(in srgb, var(--c) 12%, #070b18));
  border:2px solid color-mix(in srgb, var(--c) 55%, #000); border-top:8px solid var(--c);
  box-shadow:var(--shadow); transform-origin:50% 100%;
  animation:rzRise .6s cubic-bezier(.2,1.4,.4,1) var(--in) both;
}
@keyframes rzRise{ from{ transform:scaleY(0);} }
.rz-col.you .rz-ped{ outline:3px solid #fff; outline-offset:3px; }
.rz-place{
  font-size:clamp(22px,3.2vw,46px); line-height:1; color:var(--m); text-shadow:3px 3px 0 rgba(0,0,0,.65);
  animation:rzStamp .45s cubic-bezier(.2,1.7,.35,1) calc(var(--in) + 340ms) both;
}
@keyframes rzStamp{ from{ opacity:0; transform:scale(2.6) rotate(-14deg);} }
.rz-pay{
  position:relative; display:flex; align-items:center; gap:6px; padding:2px 9px 2px 6px; background:rgba(0,0,0,.38);
  font-size:clamp(15px,1.9vw,24px); font-weight:700; color:var(--coin); text-shadow:2px 2px 0 rgba(0,0,0,.6); font-variant-numeric:tabular-nums;
  animation:rzFade .3s ease-out calc(var(--in) + 460ms) both;
}
.rz-coin, .rz-rain b{
  display:block; flex:none; width:.8em; height:.8em;
  background:radial-gradient(circle at 36% 32%, #fff4b8 0 16%, #ffd34d 18% 58%, #c78a12 60%);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}

/* La lluvia: cada moneda cae en parábola al ícono del contador. */
.rz-rain{ position:absolute; left:calc(6px + .4em); top:50%; width:0; height:0; pointer-events:none; }
.rz-rain i{ position:absolute; left:0; top:0; animation:rzRainX .4s linear var(--t) both; }
.rz-rain b{ margin:-.4em 0 0 -.4em; animation:rzRainY .4s cubic-bezier(.5,0,.9,.6) var(--t) both; }
@keyframes rzRainX{ 0%{ transform:translateX(var(--x));} 80%,100%{ transform:none;} }
@keyframes rzRainY{
  0%{ opacity:0; transform:translateY(var(--y)) scale(1.3);}
  18%{ opacity:1;}
  80%{ opacity:1; transform:none;}
  100%{ opacity:0; transform:scale(.3);}
}

/* El ganador: rayos que giran, la estrella cae sobre su retrato y el bloque brilla. */
.rz-rays{
  position:absolute; z-index:-1; left:50%; top:calc(var(--face) / 2);
  width:calc(var(--face) * 2.8); aspect-ratio:1; translate:-50% -50%;
  background:repeating-conic-gradient(rgba(255,211,77,.5) 0 10deg, transparent 10deg 30deg);
  -webkit-mask:radial-gradient(circle, #000 22%, transparent 68%); mask:radial-gradient(circle, #000 22%, transparent 68%);
  animation:rzRaysIn .5s ease-out var(--win) both, rzSpin 9s linear var(--win) infinite;
}
@keyframes rzRaysIn{ from{ opacity:0; scale:.3;} }
@keyframes rzSpin{ to{ rotate:360deg;} }
.rz-crown{
  position:absolute; z-index:2; left:50%; top:calc(var(--face) * -.5); translate:-50% 0;
  font-size:calc(var(--face) * .62); line-height:1; color:var(--gold); text-shadow:3px 3px 0 #7a4a00, 0 0 18px rgba(255,211,77,.7);
  animation:rzCrown .55s cubic-bezier(.2,1.6,.35,1) var(--win) both, rzBob 1.4s ease-in-out calc(var(--win) + 550ms) infinite;
}
@keyframes rzCrown{ from{ opacity:0; transform:translateY(-90px) rotate(-40deg) scale(1.8);} }
@keyframes rzBob{ 50%{ transform:translateY(-5px) rotate(8deg);} }
.rz-col.win .rz-face{ border-color:var(--gold); animation:rzHop .8s ease-in-out var(--win) infinite; }
@keyframes rzHop{ 0%,100%{ transform:none;} 40%{ transform:translateY(-9px);} 60%{ transform:translateY(-4px);} }
.rz-col.win .rz-ped{ animation:rzRise .6s cubic-bezier(.2,1.4,.4,1) var(--in) both, rzGlow 1.2s ease-in-out var(--win) infinite; }
@keyframes rzGlow{ 50%{ box-shadow:var(--shadow), 0 0 34px rgba(255,211,77,.65);} }
/* El último se enfurruña: sacude la cabeza y se apaga un poco. */
.rz-col.last .rz-face{ animation:rzSulk .6s ease-in-out var(--win) both; }
@keyframes rzSulk{
  15%,45%,75%{ transform:translateX(-4px) rotate(-3deg);}
  30%,60%,90%{ transform:translateX(4px) rotate(3deg);}
  100%{ transform:translateY(3px); filter:saturate(.5) brightness(.85);}
}

.rz-foot{
  display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:clamp(10px,2.4vh,24px);
  animation:rzUp .4s cubic-bezier(.2,1.3,.35,1) var(--in) both;
}
@keyframes rzUp{ from{ opacity:0; transform:translateY(14px);} }
.rz-note{ font-size:12px; color:var(--dim); text-shadow:1px 1px 0 #000; }
.rz-rate{ text-align:center; color:#ffd34d; letter-spacing:1px; text-shadow:2px 2px 0 rgba(0,0,0,.6); }
.rate-star{ appearance:none; border:0; background:transparent; color:#ffd34d; cursor:pointer; font:inherit; font-size:26px; padding:0 3px; }
.rate-star:hover{ color:#fff1a8; transform:scale(1.15); }

/* Pantalla baja (teléfono acostado): todo más chato para que entre la calificación. */
@media (max-height:480px) and (min-width:721px){
  .rz{ --face:40px; --pmin:68px; --pmax:98px; padding:4px 0; }
  .rz-head{ margin-bottom:24px; padding-top:4px; padding-bottom:6px; }
  .rz-title{ font-size:30px; }
  .rz-place{ font-size:24px; }
  .rz-ped{ gap:3px; padding-top:6px; }
  .rz-who{ padding-bottom:5px; }
  .rz-foot{ margin-top:6px; gap:0; }
  .rate-star{ font-size:20px; }
}

/* Pantalla angosta: el podio no entra a lo ancho y pasa a renglones en orden. */
@media (max-width:720px){
  .rz{ --face:44px; }
  .rz-head{ margin-bottom:clamp(12px,3vh,24px); }
  .rz-stage{ flex-direction:column; align-items:stretch; gap:6px; width:min(94vw,460px); }
  .rz-col{
    order:var(--o); flex:none; max-width:none; display:grid; grid-template-columns:52px 44px minmax(0,1fr) auto;
    align-items:center; column-gap:10px; padding:6px 12px 6px 8px;
    background:color-mix(in srgb, var(--c) 18%, rgba(8,12,28,.95)); border-left:6px solid var(--c); box-shadow:var(--shadow);
    animation:rzRow .45s cubic-bezier(.2,1.4,.35,1) var(--in) both;
  }
  .rz-who, .rz-ped{ display:contents; }
  .rz-place{ grid-column:1; grid-row:1 / 3; font-size:22px; text-align:center; }
  .rz-face{ grid-column:2; grid-row:1 / 3; }
  .rz-name{ grid-column:3; grid-row:1; margin:0; }
  .rz-score{ grid-column:3; grid-row:2; }
  .rz-pay{ grid-column:4; grid-row:1 / 3; }
  .rz-rays{ display:none; }
  .rz-crown{ left:92px; top:-12px; font-size:22px; }
  .rz-col.you{ outline:2px solid #fff; outline-offset:-2px; }
}
@keyframes rzRow{ from{ opacity:0; transform:translateX(-50px);} }

/* ---------------------------------------------------------------------- shop
   THE VAULT IS A BOTTOM BAR.

   It used to be a centred 860px card holding a grid of nine equal plates. Two
   things went wrong with that. It sat on top of the cast — the party stage is
   the show and the shop is the scoreboard, and covering the show with the
   scoreboard is the standard way these screens fail. And a row of gold star
   plates made it look like you had a handful of stars when the truth is you can
   buy exactly one, which is the tension the whole economy is built on.

   So: one lane per decision, along the bottom, stage visible above. The star
   is a single wide card, the loadout and the looks are small tiles, the blurbs
   collapse into one shared detail line (Spanish runs ~20% long and nine
   paragraphs of it will not fit anywhere), and the rivals' tallies are a hairline
   strip because what they own is context, not a choice you are making. */
.shopbar{ position:relative; width:min(98vw,1280px); display:flex; flex-direction:column; gap:7px; }

/* The rivals: deliberately the quietest thing on screen. */
.sb-rivals{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px;
  padding:0 8px; font-size:11px; color:var(--dim);
}
.sb-rival{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.sb-rival i{ width:8px; height:8px; border-radius:0; background:var(--c); flex:0 0 auto; }
.sb-rival b{ color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; }
.sb-rival em{ font-style:normal; color:var(--coin); font-variant-numeric:tabular-nums; }
.sb-rival em::after{ content:'🪙'; font-size:9px; margin-left:2px; }

.sb-panel{
  position:relative; border-radius:0; overflow:hidden; padding-bottom:9px;
  background:rgba(10,15,32,.97);
  border:2px solid rgba(160,200,255,.3);
  box-shadow:var(--shadow);
  animation:cardUp .34s cubic-bezier(.2,1.3,.35,1) both;
}
@keyframes cardUp{ from{ opacity:0; transform:translateY(16px) scale(.98);} }
.sb-timer{ height:3px; background:rgba(255,255,255,.09); }
.sb-timer i{ display:block; height:100%; width:100%; background:var(--gold); }
.sb-timer i.hot{ background:var(--danger); }

.sb-row{ display:flex; align-items:stretch; gap:clamp(8px,1.3vw,16px); padding:9px clamp(10px,1.5vw,18px) 7px; }
.sb-id{ flex:0 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.sb-next{ font-size:12px; color:var(--dim); max-width:15ch; line-height:1.25; }
.sb-next b{ color:var(--text); }

/* Every lane is separated by a rule rather than a gap, so the three decisions
   read as three decisions even when the tiles inside them are small. */
.sb-lane{
  display:flex; flex-direction:column; gap:5px; min-width:0;
  border-left:1px solid var(--line); padding-left:clamp(8px,1.3vw,16px);
}
.lane-h{
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dimmer); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lane-row{ display:flex; align-items:stretch; gap:6px; flex:1; }
.lane-star{ flex:0 0 auto; }
.lane-kit{ flex:1 1 auto; }
.lane-kit .lane-row{ flex-wrap:wrap; }

.sb-end{ margin-left:auto; flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.sb-wallet{ display:flex; align-items:baseline; gap:5px; justify-content:center; }
.sb-wallet b{ font-size:25px; line-height:1; color:var(--coin); font-variant-numeric:tabular-nums; text-shadow:0 0 22px rgba(255,192,46,.4); }
.sb-wallet span{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }
.sb-end .btn{ padding:9px 20px; font-size:13px; white-space:nowrap; }
.sb-end .btn[disabled]{ opacity:.6; }

.sb-foot{ display:flex; align-items:center; gap:12px; padding:0 clamp(10px,1.5vw,18px); min-height:20px; }
.sb-hint{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--dimmer);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-worn{ flex:0 1 auto; display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.dimmed{ font-size:12px; color:var(--dimmer); }
.chip.cosmetic{ border-color:rgba(255,211,77,.3); }

/* -------- the cards. Three shapes, because they are three sizes of decision. */
.shop-card{
  position:relative; border:2px solid var(--line); border-radius:0;
  background:rgba(255,255,255,.05);
  transition:transform .14s, border-color .2s, box-shadow .2s;
}
.shop-card:hover:not([disabled]){ transform:translateY(-3px); border-color:var(--line-hot); box-shadow:4px 4px 0 rgba(0,0,0,.45); }
.shop-card.hex{ border-color:rgba(255,77,90,.35); }
.shop-card.boost{ border-color:rgba(109,223,60,.3); }
.sc-icon{ line-height:1; }
.sc-price{ font-weight:700; color:var(--coin); font-variant-numeric:tabular-nums; }
.sc-price span{ font-size:10px; margin-left:2px; }
.sc-price.no{ color:var(--danger); }

/* The star: one card, wide, gold, alone in its lane. */
.sc-star{
  display:flex; align-items:center; gap:10px; padding:8px 15px 8px 12px; text-align:left;
  border-color:rgba(255,211,77,.55);
  background:rgba(255,211,77,.2);
}
.sc-star .sc-icon{ font-size:33px; color:var(--gold); text-shadow:0 0 24px rgba(255,211,77,.65); }
.sc-star .sc-name{ font-size:13.5px; font-weight:600; white-space:nowrap; }
.sc-star .sc-price{ font-size:19px; }

/* Boosts and hexes: one of each, so a small tile is honest. */
.sc-tile{
  width:clamp(74px,7vw,92px); padding:6px 5px 5px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.sc-tile .sc-icon{ font-size:19px; }
.sc-tile .sc-name{
  font-size:10px; line-height:1.18; text-align:center; color:#cfdcf8; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sc-tile .sc-price{ font-size:12.5px; margin-top:auto; }

/* Looks: all one coin, so the price is stated once on the lane heading and the
   tile is just the thing you get. */
.sc-look{
  width:clamp(64px,5.4vw,72px); padding:6px 3px 5px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  border-color:rgba(255,211,77,.22); background:rgba(255,211,77,.08);
}
.sc-look .sc-icon{ font-size:17px; display:grid; place-items:center; height:20px; }
.sc-look .sc-name{
  font-size:8.5px; line-height:1.2; letter-spacing:.01em; text-align:center; color:#cfdcf8;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sc-tone{ display:block; width:17px; height:17px; border-radius:0; background:var(--tone);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2), 1px 1px 0 rgba(0,0,0,.5); }

/* Why you cannot buy this. A banner across the foot of the card, NOT a lid over
   it: the first cut covered the whole tile, which meant three full boost slots
   read as three grey rectangles and you could no longer see what you already
   had — or, on the star, how many coins short you were of the thing you were
   saving for. Say the reason and keep the goods visible. */
.sc-lock{
  align-self:stretch; margin-top:2px; padding:2px 3px; border-radius:0;
  background:rgba(6,10,24,.72);
  font-size:8.5px; line-height:1.2; letter-spacing:.05em; text-transform:uppercase;
  color:var(--dim); font-weight:700; text-align:center;
}
/* The star card is a row, so its reason sits beside the price instead of under
   it, and the card makes room for it rather than being covered by it. */
.sc-star .sc-lock{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  margin:0; padding:3px 7px; font-size:9.5px; max-width:64px;
}
.sc-star:has(.sc-lock){ padding-right:84px; }
.shop-card[disabled]{ filter:saturate(.5); opacity:.78; }

/* Eight players, and Spanish labels ~20% longer: below this the lanes stack
   rather than squeezing the words into columns one letter wide. */
@media (max-width: 1000px){
  .sb-row{ flex-wrap:wrap; }
  .sb-lane{ border-left:0; padding-left:0; }
  .sb-end{ margin-left:0; flex-direction:row; align-items:center; gap:12px; }
}
@media (max-height: 620px){
  .sb-rivals{ display:none; }
  .sb-foot .sb-hint{ display:none; }
}
.target-sheet{
  position:absolute; inset:0; border-radius:0; display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center; background:rgba(8,12,28,.94);
  animation:cardIn .28s ease both;
}
.ts-title{ font-size:20px; font-weight:600; }
.ts-list{ display:flex; flex-direction:column; gap:8px; width:min(80%,320px); }
.ts-btn{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:0;
  background:rgba(255,255,255,.06); border:2px solid var(--line); font-weight:600; text-align:left;
}
.ts-btn:hover{ background:rgba(255,255,255,.12); border-color:var(--c); }
.ts-pip{ width:14px; height:14px; border-radius:0; background:var(--c); }
.ts-btn em{ margin-left:auto; font-style:normal; color:var(--gold); }

/* -------------------------------------------------------------- touch pads */
#touch{ z-index:15; }
.tc-stick{
  position:absolute; left:calc(20px + env(safe-area-inset-left,0px)); bottom:calc(24px + var(--safe-b));
  width:132px; height:132px; border-radius:0;
  background:rgba(255,255,255,.06); border:2px solid var(--line);
  display:grid; place-items:center; touch-action:none;
}
.tc-knob{ width:56px; height:56px; border-radius:0; background:rgba(255,255,255,.20); box-shadow:2px 2px 0 rgba(0,0,0,.4); transition:transform .05s; }
.tc-buttons{ position:absolute; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(28px + var(--safe-b)); display:grid; gap:10px;
  grid-template-areas:". c" "b a"; }
.tc-btn{
  width:70px; height:70px; border-radius:0; font-size:19px; font-weight:700;
  background:rgba(255,255,255,.10); border:2px solid var(--line);
  transition:transform .06s, background .06s;
}
.tc-a{ grid-area:a; background:rgba(109,223,60,.22); }
.tc-b{ grid-area:b; background:rgba(54,169,255,.22); }
.tc-c{ grid-area:c; background:rgba(255,211,77,.20); width:56px; height:56px; font-size:15px; justify-self:end; }
.tc-btn.on{ transform:scale(.9); background:rgba(255,255,255,.3); }


/* --------------------------------------------------------- overlay anchoring
   The party stage runs live behind these screens. Full-blur scrims hide the
   cast, which is the whole point of having them, so anything that plays out
   on the stage uses a soft gradient and sits at the bottom of the frame. */
#overlay.anchor-bottom{ align-items:flex-end; padding-bottom:clamp(16px,4vh,52px); }

.scrim.soft{
  backdrop-filter:none;
  background:rgba(4,7,18,.5);
}


/* ------------------------------------------------------------------- finale
   El final (Julio, 3-oct-2026: "rediseñar por completo el podio final, todo más
   dinámico"). La ceremonia la actúa el escenario 3D (render/_podium.js); esta
   capa la subtitula con el mismo guion. Cada pieza entra y sale con demoras
   (--in, --out, --dock, --d) contadas desde el arranque del final: un redibujo
   por cambio de idioma cae en el mismo instante. Solo la tabla recibe clics. */
#overlay.anchor-fz{ place-items:stretch; }
#overlay > .fz{ position:relative; width:100%; height:100%; pointer-events:none; overflow:hidden; }
.fz{ --dock-x:31vw; --dock-y:1.6vh; }
.fz > *{ position:absolute; }

/* Título de entrada: golpe en el centro sobre una franja que cruza la pantalla. */
.fz-title{
  left:0; right:0; top:36%; height:clamp(74px,14vh,140px); display:grid; place-items:center;
  animation:fzTitleIn .55s cubic-bezier(.2,1.6,.3,1) var(--in) both, fzTitleOut .35s ease-in var(--out) forwards;
}
.fz-title::before{
  content:''; position:absolute; inset:0; transform:skewY(-4deg);
  background:linear-gradient(90deg, transparent, rgba(255,63,210,.88) 16%, rgba(122,61,255,.92) 50%, rgba(63,224,255,.88) 84%, transparent);
  animation:fzBand .5s cubic-bezier(.3,1.2,.4,1) var(--in) both;
}
.fz-title span{
  position:relative; font-size:clamp(40px,8.4vw,112px); font-weight:700; letter-spacing:.05em; color:#fff;
  text-shadow:6px 6px 0 #2a0b4a; transform:skewX(-8deg);
}
@keyframes fzTitleIn{ 0%{ opacity:0; transform:scale(2.6) rotate(-6deg);} 60%{ opacity:1;} 100%{ opacity:1; transform:none;} }
@keyframes fzTitleOut{ to{ opacity:0; transform:translateY(-70px) scale(.8);} }
@keyframes fzBand{ from{ transform:skewY(-4deg) scaleX(0);} }

/* Del último al 4.º: se apilan abajo a la izquierda, el más nuevo arriba. */
.fz-outs{
  left:clamp(10px,2vw,28px); bottom:clamp(14px,5vh,48px); display:flex; flex-direction:column-reverse; gap:7px;
  animation:fzAway .4s ease-in var(--out) forwards;
}
.fz-out{
  display:flex; align-items:center; gap:12px; min-width:clamp(200px,24vw,300px); padding:7px 16px 7px 12px;
  background:rgba(16,8,34,.93); border-left:6px solid var(--c); box-shadow:var(--shadow); transform:skewX(-8deg);
  animation:fzSlide .42s cubic-bezier(.2,1.45,.35,1) var(--in) both;
}
.fz-out b{ min-width:2.4em; font-size:20px; color:#ff6b78; }
.fz-out span{ font-size:15px; font-weight:700; }
.fz-out em{ margin-left:auto; font-style:normal; font-weight:700; color:var(--gold); }
@keyframes fzSlide{ from{ opacity:0; transform:skewX(-8deg) translateX(-130%);} }
@keyframes fzAway{ to{ opacity:0; transform:translateX(-60px);} }

/* 3.º y 2.º: una tarjeta grande que entra con su bloque y sale con el siguiente. */
.fz-pods{ left:clamp(10px,2vw,28px); bottom:clamp(14px,5vh,48px); width:min(86vw,560px); height:110px; }
.fz-pod{
  position:absolute; left:0; bottom:0; display:flex; align-items:center; gap:18px; padding:12px 26px 12px 18px;
  background:linear-gradient(90deg, rgba(16,8,34,.97), rgba(46,16,80,.93)); border-left:10px solid var(--c);
  box-shadow:var(--shadow); transform:skewX(-8deg); white-space:nowrap;
  animation:fzPodIn .5s cubic-bezier(.2,1.5,.35,1) var(--in) both, fzPodOut .3s ease-in var(--out) forwards;
}
.fz-pod b{ font-size:clamp(34px,5vw,56px); line-height:1; color:var(--m); text-shadow:4px 4px 0 rgba(0,0,0,.6); }
.fz-pod span{ font-size:clamp(20px,2.7vw,32px); font-weight:700; }
.fz-pod em{ font-style:normal; font-size:20px; font-weight:700; color:var(--gold); }
@keyframes fzPodIn{ 0%{ opacity:0; transform:skewX(-8deg) translateX(-115%);} 100%{ opacity:1; transform:skewX(-8deg);} }
@keyframes fzPodOut{ to{ opacity:0; transform:skewX(-8deg) translateY(36px);} }

/* El ganador: entra enorme cuando cae al bloque de oro y después se acomoda
   arriba, sobre el podio, cuando aparece la tabla. */
.fz-win{
  left:50%; top:8vh; text-align:center; white-space:nowrap; transform-origin:50% 0;
  animation:fzWinIn .7s cubic-bezier(.2,1.5,.3,1) var(--in) both, fzWinDock .9s cubic-bezier(.6,0,.2,1) var(--dock) forwards;
}
.fz-win-lbl{
  display:inline-block; padding:6px 18px; background:var(--gold); color:#3a2500; box-shadow:var(--shadow);
  font-size:clamp(16px,2vw,26px); font-weight:700; letter-spacing:.14em; transform:skewX(-8deg);
}
.fz-win-nm{
  margin-top:10px; font-size:clamp(44px,7.4vw,106px); font-weight:700; line-height:1; color:#fff;
  text-shadow:6px 6px 0 var(--c); animation:fzBob 1.2s ease-in-out infinite;
}
.fz-win-st{ margin-top:8px; font-size:clamp(20px,2.6vw,34px); font-weight:700; color:var(--gold); text-shadow:3px 3px 0 rgba(0,0,0,.6); }
@keyframes fzWinIn{ 0%{ opacity:0; transform:translateX(-50%) scale(2.8);} 55%{ opacity:1;} 100%{ opacity:1; transform:translateX(-50%) scale(1);} }
@keyframes fzWinDock{ to{ opacity:1; top:var(--dock-y); left:var(--dock-x); transform:translateX(-50%) scale(.5);} }
@keyframes fzBob{ 50%{ transform:translateY(-6px) rotate(-1.5deg);} }

/* La tabla final: entra de costado y cuenta las estrellas renglón por renglón. */
.fz-panel{
  right:clamp(10px,1.6vw,22px); top:clamp(54px,8vh,72px); bottom:clamp(10px,2vh,22px); width:min(440px,36vw);
  display:flex; flex-direction:column; gap:12px; padding:16px 16px 14px; overflow:auto; pointer-events:auto;
  background:rgba(14,7,30,.94); border:2px solid rgba(160,110,255,.45); box-shadow:var(--shadow);
  animation:fzPanelIn .6s cubic-bezier(.2,1.25,.3,1) var(--in) both;
}
.fz-panel h3{ font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); }
@keyframes fzPanelIn{ from{ opacity:0; transform:translateX(115%);} }
.fz-rows{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.fz-row{
  display:grid; grid-template-columns:34px 1fr auto auto; align-items:center; gap:10px; padding:6px 10px 6px 8px;
  background:rgba(255,255,255,.05); border-left:5px solid var(--c);
  animation:fzRowIn .45s cubic-bezier(.2,1.4,.35,1) var(--d) both;
}
.fz-row.m1{ background:linear-gradient(90deg, rgba(255,201,58,.24), rgba(255,255,255,.04)); }
.fz-row.you{ outline:2px solid rgba(255,255,255,.5); outline-offset:-2px; }
.fz-rk{ display:grid; place-items:center; height:28px; font-size:16px; background:rgba(255,255,255,.08); color:var(--dim); }
.fz-row.m1 .fz-rk, .fz-row.m2 .fz-rk, .fz-row.m3 .fz-rk{ background:var(--m); color:#2a1500; box-shadow:2px 2px 0 rgba(0,0,0,.5); }
.fz-nm{ font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fz-nm small{ margin-left:4px; padding:1px 5px; font-size:10px; vertical-align:middle; background:#fff; color:#14072c; }
.fz-st{ font-size:17px; font-weight:700; color:var(--gold); }
.fz-co{ min-width:3.4em; text-align:right; font-size:13px; font-weight:700; color:var(--coin); }
@keyframes fzRowIn{ from{ opacity:0; transform:translateX(44px);} }
/* El número sube de 0 al total (contador CSS animado). */
@property --fzn{ syntax:'<integer>'; inherits:false; initial-value:0; }
.fz-n{ text-decoration:none; counter-reset:fzn var(--fzn); animation:fzCount 1.1s cubic-bezier(.2,.8,.3,1) calc(var(--d) + .25s) both; }
.fz-n::after{ content:counter(fzn); }
@keyframes fzCount{ from{ --fzn:0; } to{ --fzn:var(--to); } }

.fz-how .eyebrow{ margin-bottom:6px; }
.fz-tabs{ display:flex; gap:4px; }
.fz-tabs button{
  flex:1; padding:7px 4px; font-size:11px; letter-spacing:.05em; color:var(--dim);
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12);
}
.fz-tabs button.on{ color:var(--gold); background:rgba(255,211,77,.14); border-color:var(--gold); }
.fz-body{ margin-top:8px; min-height:120px; }
.fz-chart{ margin:0; }
/* La gráfica se dibuja de izquierda a derecha: la carrera ronda por ronda. */
.fz-chart svg{ display:block; width:100%; height:auto; aspect-ratio:340/150; overflow:visible;
  animation:fzWipe 1.4s cubic-bezier(.3,.7,.2,1) var(--d) both; }
@keyframes fzWipe{ from{ clip-path:inset(-4px 100% -4px 0);} to{ clip-path:inset(-4px -6px -4px 0);} }
.fz-g{ stroke:rgba(255,255,255,.13); stroke-width:1; }
.fz-gt{ fill:var(--dim); font-size:9px; text-anchor:end; }
.fz-gt.bot{ text-anchor:middle; }
.fz-l{ fill:none; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.fz-d{ stroke:#0e0620; stroke-width:1.5; }
/* Mouse sobre una línea o un nombre: los demás bajan la opacidad. */
.fz-hit{ fill:none; stroke:transparent; stroke-width:12; stroke-linejoin:round; pointer-events:stroke; cursor:pointer; }
.fz-l, .fz-d, .fz-key{ transition:opacity .15s; }
.fz-key{ cursor:pointer; }
.fz-chart.hl .fz-l:not(.on), .fz-chart.hl .fz-d:not(.on), .fz-chart.hl .fz-key:not(.on){ opacity:.15; }
.fz-chart figcaption{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:11.5px; color:var(--dim); }
.fz-key{ display:inline-flex; align-items:center; gap:5px; }
.fz-key i{ display:inline-block; width:10px; height:10px; }
/* Nunca con scroll: si no entra, fzStats la parte en pestañas (.fz-sub). */
.fz-stats{ overflow:hidden; }
.fz-sub{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:3px; }
.fz-sub button{ flex:1; padding:2px 6px; font-size:10px; letter-spacing:.04em; color:var(--dim); background:rgba(255,255,255,.04); border-bottom:2px solid rgba(255,255,255,.12); }
.fz-sub button.on{ color:#fff; border-bottom-color:var(--accent); }
.fz-stats table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.fz-stats th{ padding:4px 5px; font-size:9.5px; letter-spacing:.04em; line-height:1.2; text-transform:uppercase; text-align:center; font-weight:700; color:var(--dim); }
.fz-stats td{ padding:3px 5px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.fz-stats tbody tr{ border-top:1px solid rgba(255,255,255,.1); }
.fz-stats td.fz-sn{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; border-left:4px solid var(--c); }
.fz-stats tr.you td{ background:rgba(255,255,255,.06); }
/* El botón queda pegado abajo aunque la tabla tenga que desplazarse (ocho
   jugadores en una laptop, o el teléfono vertical). */
.fz-again{ position:sticky; bottom:0; flex-shrink:0; margin-top:auto; animation:fzPulse 1.3s ease-in-out infinite; }
@keyframes fzPulse{ 50%{ filter:brightness(1.2); box-shadow:0 5px 0 #96650a, 0 0 26px rgba(255,211,77,.6);} }

/* Pantalla angosta o vertical: la tabla va abajo y el ganador queda centrado. */
@media (max-aspect-ratio: 23/20){
  .fz{ --dock-x:50vw; --dock-y:1vh; }
  .fz-panel{ left:10px; right:10px; top:auto; bottom:10px; width:auto; max-height:52vh; animation-name:fzPanelUp; }
  .fz-chart svg{ max-height:18vh; }
}
@keyframes fzPanelUp{ from{ opacity:0; transform:translateY(115%);} }

/* Nombres sobre los peones del podio (WorldLabels, kind 'pd-tag'). */
.wlabel.pd-tag{ padding:2px 7px 3px; background:rgba(14,7,30,.8); border-bottom:3px solid var(--c, #fff); text-shadow:none; }
.wlabel.pd-tag.you{ background:#fff; color:#14072c !important; }

/* The Vault is a bar along the bottom edge, not a card floating above it — sit
   it as low as the safe area allows so the stage keeps the whole upper frame. */
#overlay.shop-layer{ padding-bottom:clamp(8px,1.6vh,20px); }
#overlay.shop-layer .scrim.soft{
  background:rgba(4,7,18,.4);
}

/* ------------------------------------------------------------------- board
   El tablero 3D es la pantalla; encima va solo lo que hace falta en cada
   momento (ver overlays.js showBoard). Todo cuelga de .bhud, una capa que no
   atrapa clics: solo el recuadro de acción, el botón MAPA y la oferta los
   reciben. `#overlay > .bhud` le gana a `#overlay > :not(.scrim)` por orden
   de archivo (misma especificidad, overlays.css va después de styles.css). */
#overlay > .bhud{ position:fixed; inset:0; pointer-events:none; }
.bb-timer{ height:4px; background:rgba(255,255,255,.09); }
.bb-timer i{ display:block; height:100%; width:100%; background:var(--gold); }
.bb-timer i.hot{ background:var(--danger); }

/* Turnos, arriba a la izquierda: una fila por jugador en el orden en que
   juegan. La fila del que tiene el turno se ilumina en dorado y se adelanta. */
.bturns{
  position:absolute; left:calc(12px + env(safe-area-inset-left, 0px)); top:calc(12px + var(--safe-t));
  display:flex; flex-direction:column; gap:4px;
  --bt-face:clamp(30px,5.4vh,50px);
}
.bt-round{
  margin:0 0 3px 2px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000;
}
.bt-list{ display:flex; flex-direction:column; gap:4px; }
.bt-row{
  display:flex; align-items:stretch; width:clamp(200px,16.5vw,250px);
  background:rgba(10,15,32,.8); border:2px solid rgba(160,200,255,.16);
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
  transition:transform .25s cubic-bezier(.2,1.3,.35,1), background .25s, border-color .25s, box-shadow .25s;
}
.bt-n{
  flex:none; width:22px; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:var(--dimmer); background:rgba(255,255,255,.05);
}
.bt-face{ flex:none; position:relative; width:var(--bt-face); height:var(--bt-face); margin:2px 6px 2px 4px; overflow:hidden; }
.bt-face canvas{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.bt-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; padding-right:10px; }
/* El nombre va del color del jugador, el mismo de sus casillas en el tablero
   (Julio, 4-oct-2026: "solo debería ser el nombre"); también en tu fila y en
   la del turno. */
.bt-name{
  font-size:13px; font-weight:700; line-height:1.1; color:var(--c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000;
}
.bt-stats{ display:flex; gap:10px; font-size:14px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.bt-st{ color:var(--gold); display:inline-flex; align-items:center; gap:4px; }
/* Casillas pintadas: una casilla chica gris y cuántas tiene. */
.bt-pt{ color:#dbe4ff; display:inline-flex; align-items:center; gap:5px; }
.bt-pt i{ width:11px; height:11px; background:#9aa6c8; }
.bt-co{ color:var(--coin); display:inline-flex; align-items:center; gap:5px; }
.bt-co i{ width:11px; height:11px; border-radius:50%; background:var(--coin); box-shadow:inset 0 0 0 2px var(--gold-deep); }
.bt-row.on{
  transform:translateX(12px);
  background:rgba(58,42,6,.92); border-color:var(--gold);
  box-shadow:3px 3px 0 rgba(0,0,0,.6), 0 0 22px rgba(255,211,77,.5);
}
.bt-row.on .bt-n{ background:var(--gold); color:#3a2500; }
/* "+n"/"-n" junto a las monedas de una fila (overlays.js rosterCoinPop): el
   mismo popup que sale sobre el peón —colores, golpe de escala al nacer, sube
   y se apaga al final— en chico. Va encima de la lista, no adentro de la fila. */
.bt-pop{
  position:absolute; z-index:2; pointer-events:none; white-space:nowrap;
  font-size:22px; font-weight:700; letter-spacing:-.5px; line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.65), 0 0 18px currentColor;
  transform-origin:left center;
  animation:btPop 2.2s linear both;
}
.bt-pop.up{ color:#ffd34d; }
.bt-pop.down{ color:#ff5a5a; }
@keyframes btPop{
  0%{ opacity:1; transform:translateY(-50%) scale(1.43); }
  18%{ transform:translateY(calc(-50% - 12px)) scale(1); }
  45%{ transform:translateY(calc(-50% - 24px)) scale(1); }
  83%{ opacity:1; }
  100%{ opacity:0; transform:translateY(calc(-50% - 36px)) scale(1); }
}

/* Avisos, arriba al centro: cada uno se va solo (MSG_MS en overlays.js). */
.bmsgs{
  position:absolute; left:50%; top:calc(14px + var(--safe-t)); transform:translateX(-50%);
  width:min(64vw,560px); display:flex; flex-direction:column; align-items:center; gap:6px;
}
.bmsg{
  padding:9px 16px; font-size:14px; font-weight:700; line-height:1.3; text-align:center; color:var(--text);
  background:rgba(10,15,32,.9); border:2px solid rgba(160,200,255,.3); box-shadow:3px 3px 0 rgba(0,0,0,.6);
  animation:bmsgLife 3.4s ease both;
}
@keyframes bmsgLife{
  0%{ opacity:0; transform:translateY(-10px) scale(1.06); }
  8%{ opacity:1; transform:none; }
  86%{ opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-6px); }
}

/* Acción, abajo al centro: solo en tu turno. 'roll' = el botón de tirar;
   'dir' = el número que salió; 'wait' = no se ve. */
.bact{
  position:absolute; left:50%; bottom:calc(clamp(12px,3vh,32px) + var(--safe-b)); transform:translateX(-50%);
  pointer-events:auto; overflow:hidden;
  background:rgba(10,15,32,.95); border:2px solid rgba(160,200,255,.3); box-shadow:var(--shadow), 0 0 26px rgba(255,211,77,.3);
  animation:bactIn .3s cubic-bezier(.2,1.3,.35,1) both;
}
.bact[data-mode="wait"]{ display:none; }
@keyframes bactIn{ from{ opacity:0; transform:translate(-50%,18px) scale(.97); } }
.bact-roll.btn{ display:flex; margin:14px 18px 16px; padding:16px 38px; font-size:clamp(16px,2vw,21px); font-weight:700; letter-spacing:.08em; white-space:nowrap; }
.bact-dir{ display:flex; align-items:center; padding:10px 18px 14px; }
.bact[data-mode="dir"] .bact-roll,
.bact[data-mode="roll"] .bact-dir{ display:none; }
.bact-die{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.bact-die b{ font-size:46px; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; text-shadow:0 0 22px rgba(255,211,77,.45); }
.bact-die span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }

/* MAPA: alterna el zoom sobre el peón y el tablero entero (también con la tecla M). */
.bmap.btn{
  position:absolute; right:calc(14px + env(safe-area-inset-right, 0px)); bottom:calc(14px + var(--safe-b));
  pointer-events:auto; padding:9px 12px; font-size:11px; letter-spacing:.1em; white-space:nowrap;
  background:rgba(10,15,32,.8);
}
.bmap.on{ background:rgba(255,211,77,.18); border-color:var(--gold); color:var(--gold); }

/* Centrada en la PANTALLA, no sobre el tablero: la oferta frena el turno y hay
   que contestarla. Va con #overlay porque `#overlay > :not(.scrim)` fuerza
   position:relative y le gana en especificidad a una clase sola — con relative,
   el left/top la mandaban abajo a la derecha en vez de al centro. */
#overlay .board-offer{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,380px); overflow:hidden; text-align:center; z-index:5;
  background:rgba(10,15,32,.97); border:2px solid var(--line-hot); box-shadow:var(--shadow);
  animation:offerPop .3s cubic-bezier(.2,1.3,.35,1) both;
}
/* Como cardUp, pero conservando el translate que la centra. */
@keyframes offerPop{ from{ opacity:0; transform:translate(-50%,-50%) translateY(16px) scale(.98);} }
.bo-q{ font-size:clamp(18px,2.6vw,24px); font-weight:700; color:var(--gold); padding:18px 18px 4px; }
.bo-wallet{ font-size:12px; color:var(--dim); padding-bottom:14px; }
.bo-btns{ display:flex; gap:10px; justify-content:center; padding:0 18px 18px; }
.bo-btns .btn{ flex:1 1 0; }

/* ------------------------------------------------- editor de personaje (título) */
/* Va al lado de la tarjeta del nombre: en pantalla angosta se apila arriba. */
.title-row { display: flex; gap: 14px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.face-picker { width: 252px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fp-mini { font: inherit; font-size: 11px; padding: 2px 7px; border-radius:0; cursor: pointer;
  color: var(--ink, #e7ecf5); background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.25); }
.fp-mini:hover { background: rgba(255,255,255,.14); }
.fp-view { width: 100%; height: 200px; display: block; border-radius:0; cursor: grab;
  background: rgba(6,10,22,.55); image-rendering: pixelated; }
.fp-rows { max-height: 232px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  padding-right: 4px; }
.fp-rows label { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; opacity: .9; }
.fp-rows span { white-space: nowrap; }
.fp-rows input[type=range] { width: 108px; }
.fp-rows input[type=color] { width: 108px; height: 16px; padding: 0; border: 0; background: none; }