/* perfectPulse — estructura y comportamiento de la interfaz. NO depende del skin: todo color, borde y tipografía sale de los
   tokens del skin activo (skins/<id>/tokens.css) y la decoración propia de un skin va en su skin.css.
   Capas (se declaran en guard.css): guard → base → skin. */
@layer base {
:root { --pad: clamp(14px, 3.2vmin, 32px); --col: 520px; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 16px/1.35 var(--mono);
  overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* capa de efecto de pantalla (el skin pinta lo que quiera aquí; nunca recibe toques) */
#crt { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

#app { position: fixed; inset: 0 0 auto 0; height: var(--vvh, 100%); translate: 0 var(--vvt, 0px); pointer-events: none; z-index: 10; }
.screen { position: absolute; inset: 0; padding: var(--pad); padding-top: max(var(--pad), env(safe-area-inset-top)); padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); }
.screen :is(button, input, a, .chip) { pointer-events: auto; }

@keyframes blink { 50% { opacity: .15; } }


/* ───────── piezas comunes ───────── */
.btn {
  appearance: none; background: none; border: 0; margin: 0; cursor: pointer; position: relative;
  font: inherit; font-size: clamp(14px, 2.3vmin, 20px); letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink); padding: .95em 1em; text-shadow: 0 0 10px currentColor;
}
.btn::before, .btn::after {
  content: ""; position: absolute; top: 50%; width: .6em; height: 1.7em; translate: 0 -50%;
  border: 2px solid currentColor; transition: translate .15s, width .15s;
}
.btn::before { left: 0; border-right: 0; }
.btn::after { right: 0; border-left: 0; }
.btn:hover::before { translate: -.5em -50%; }
.btn:hover::after { translate: .5em -50%; }
.btn:active { transform: translateY(1px); filter: brightness(1.6); }
.btn:focus-visible, .tog:focus-visible, .icon:focus-visible, .chip:focus-visible, input:focus-visible { outline: 2px dashed var(--acc); outline-offset: 5px; }
.btn.primary { color: var(--on-acc); background: var(--acc); border: 2px solid var(--acc); font-weight: 700; text-shadow: none; box-shadow: 0 0 22px rgb(var(--acc-rgb) / .4); transition: background .12s, box-shadow .12s; }
.btn.primary::before, .btn.primary::after { display: none; }
.btn.primary:hover { background: var(--acc-hi); box-shadow: 0 0 32px rgb(var(--acc-rgb) / .7); }
.btn.dim { color: var(--dim); text-shadow: none; }
.btn.big { font-size: clamp(18px, 3.4vmin, 28px); padding-inline: 1.4em; }
.btn:disabled { opacity: .35; cursor: default; }

.toast, .net {
  position: fixed; left: 50%; translate: -50% 0; z-index: 60; margin: 0; padding: .6em 1em;
  letter-spacing: .2em; font-size: 13px; background: var(--bg); border: 1px solid currentColor; pointer-events: none;
}
.toast { bottom: max(24px, env(safe-area-inset-bottom)); color: var(--acc); text-shadow: 0 0 8px var(--acc); }
.net { top: 12px; color: var(--hot); animation: blink 1s steps(2) infinite; }

/* etiqueta «skin: x» (solo mientras se prueba un diseño con ?skin=): arriba al centro, por encima de todo y SIN recibir toques */
.skin-badge {
  position: fixed; top: max(2px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 80; margin: 0; padding: 0 .7em; pointer-events: none;
  font-size: 12px; line-height: 1.5; letter-spacing: .12em; white-space: nowrap; color: var(--mute);
  background: rgb(var(--bg-rgb) / .88); border: 1px solid var(--line-lo); -webkit-user-select: none; user-select: none;
}

.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ───────── INICIO: una columna centrada; en el móvil la acción principal queda al alcance del pulgar ───────── */
.home { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.home > * { width: min(100%, var(--col)); }
.home > .langs { justify-content: flex-end; }
.logo {
  margin: .1rem 0 0; font: 400 clamp(44px, min(15.5vw, 13vh), 118px)/.84 var(--display); letter-spacing: -.04em; white-space: nowrap;
}
.logo .a, .logo .b { display: block; }
.logo .a { color: transparent; -webkit-text-stroke: 1.4px var(--ink); }
.logo .b { color: var(--acc); text-shadow: 0 0 22px var(--acc), 0 0 2px var(--white); }
.tagline { margin: .2rem 0 0; font-size: 13px; letter-spacing: .2em; color: var(--soft); line-height: 1.7; text-transform: uppercase; }

/* formulario: compacto (≈ 18 % más bajo que antes) pero con cajas y botones que se ven clicables y NUNCA por debajo de 44 px de alto (suelo
   táctil de guard.css). Pegado abajo en el móvil: ahí llega el pulgar. */
.panel {
  position: relative; margin-top: auto; display: grid; gap: .5rem;
  padding: 14px 16px 4px; text-align: left; background: rgb(var(--bg-rgb) / .82);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--acc); pointer-events: none; }
.panel::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.panel::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.panel :is(.box, .act) { pointer-events: auto; }

.step { display: flex; align-items: center; gap: .6em; margin: 0; font-size: 12px; letter-spacing: .2em; color: var(--mute); }
.step i { font-style: normal; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border: 1px solid var(--acc); color: var(--acc); letter-spacing: 0; flex: none; }
.field { display: grid; gap: .3rem; }

.box {
  appearance: none; width: 100%; --hit-h: 48px; margin: 0; border-radius: 0; font: inherit; font-size: clamp(18px, 3.8vmin, 24px);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); caret-color: var(--acc);
  background: rgb(var(--acc-rgb) / .05); border: 2px solid var(--line); padding: .3em .7em;
  -webkit-user-select: text; user-select: text; transition: border-color .12s, box-shadow .12s;
}
.box::placeholder { color: var(--ph); opacity: 1; }
.box:hover { border-color: var(--line-hi); }
.box:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgb(var(--acc-rgb) / .16), 0 0 20px rgb(var(--acc-rgb) / .35); }
.box.bad { border-color: var(--hot); box-shadow: 0 0 16px rgb(var(--hot-rgb) / .5); animation: shake .32s; }
.box.codebox { text-align: center; letter-spacing: .4em; padding-inline: .2em .2em; padding-left: calc(.2em + .4em); }

/* botón con caja: contorno + relleno tenue; "solid" = acción principal */
.act {
  appearance: none; cursor: pointer; margin: 0; border-radius: 0; font: inherit; font-size: clamp(15px, 2.2vmin, 18px); letter-spacing: .2em; text-transform: uppercase;
  --hit-h: 56px; padding: .75em 1.1em; display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  color: var(--acc); background: rgb(var(--acc-rgb) / .07); border: 2px solid var(--acc);
  transition: background .12s, color .12s, box-shadow .12s, transform .06s;
}
.act::after { content: ""; width: .5em; height: .5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; flex: none; }
.act:hover { background: rgb(var(--acc-rgb) / .18); box-shadow: 0 0 18px rgb(var(--acc-rgb) / .45); }
.act:active { transform: translateY(2px); box-shadow: none; }
.act:focus-visible { outline: 2px dashed var(--ink); outline-offset: 4px; }
.panel .act { --hit-h: 48px; padding-block: .4em; }   /* solo el del formulario: el lobby y la pantalla final conservan sus 56 px */
.act.solid { color: var(--on-acc); background: var(--acc); font-weight: 700; box-shadow: 0 0 22px rgb(var(--acc-rgb) / .4); }
.act.solid:hover { background: var(--acc-hi); box-shadow: 0 0 32px rgb(var(--acc-rgb) / .7); }
.act[aria-busy="true"] { opacity: .7; cursor: progress; }
.act[aria-busy="true"]::after { animation: blink .6s steps(2) infinite; }

.hint { margin: 0; min-height: 2.7em; font-size: 12px; line-height: 1.35; letter-spacing: .04em; color: var(--mute); }
.hint.err { color: var(--hot-ink); padding: .35em .7em; background: rgb(var(--hot-rgb) / .13); border: 1px solid var(--hot); animation: shake .32s; }
.or { display: flex; align-items: center; gap: .8em; color: var(--mute); font-size: 12px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; margin: 0; }
.or i { flex: 1; height: 1px; background: var(--line-or); }
.or b { font-weight: 400; }
.joinrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: .6rem; align-items: stretch; }
.joinrow .act { padding-inline: .6em; }
.invite { margin: 0; padding: .7em .9em; font-size: 12px; letter-spacing: .22em; color: var(--acc); border: 1px dashed var(--acc); }
.invite b { display: block; margin-top: .25em; font-weight: 400; font-size: 2.4em; letter-spacing: .3em; line-height: 1; text-shadow: 0 0 14px var(--acc); }
@keyframes shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }

/* pantallas bajas (móvil pequeño, ventana chica): se quitan los pasos y la ayuda; el formulario cabe sin apretarse */
@media (max-height: 740px) {
  .home .step { display: none; }
  .home .hint:not(.err) { display: none; }
  .home .tagline br, .home .tagline span:last-child { display: none; }
  .home .hint { min-height: 0; }
}

/* móvil apaisado: logo y tagline a la izquierda, formulario a la derecha (no cabe una columna sola) */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .home {
    display: grid; width: min(100%, 900px); margin-inline: auto; column-gap: 28px; row-gap: .4rem; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); grid-template-rows: auto auto 1fr;
    grid-template-areas: "logo panel" "tag panel" "langs panel";
  }
  .home > * { width: auto; }
  .logo { grid-area: logo; font-size: clamp(40px, 15vh, 80px); }
  .tagline { grid-area: tag; }
  .home > .langs { grid-area: langs; align-self: end; justify-self: start; }
  .panel { grid-area: panel; align-self: center; margin-top: 0; gap: .35rem; padding: 10px 14px 0; }
  .act { --hit-h: 48px; }
  .box, .panel .act { --hit-h: 44px; }   /* el formulario, en apaisado, al mínimo táctil: no cabe más alto */
  .or { display: none; }
}

/* ───────── pequeñas piezas de barra: icono de herramienta y enlace atrás ───────── */
.tool {
  appearance: none; display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .6em; margin: 0; cursor: pointer;
  background: rgb(var(--bg-rgb) / .5); border: 1px solid var(--line-lo); border-radius: 0; color: var(--mute); font: inherit; font-size: 13px; letter-spacing: .14em;
}
.tool:hover { color: var(--ink); border-color: var(--line-hi); }
.tool:active { transform: translateY(1px); }
.tool:focus-visible { outline: 2px dashed var(--acc); outline-offset: 3px; }
.tool svg { display: block; width: 22px; height: 22px; }
.tool.sure { color: var(--white); background: var(--hot); border-color: var(--hot); }

/* ───────── LOBBY: jugadores y botón de inicio mandan; el código sigue siendo grande pero ocupa lo justo ───────── */
.lobby { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.lobby > * { width: min(100%, var(--col)); }
.lobby-top { display: flex; justify-content: space-between; align-items: center; }
.link.back { display: inline-flex; align-items: center; gap: .3em; padding-right: .8em; }
.link.back svg { width: 1.5em; height: 1.5em; }
.codecard { position: relative; display: grid; gap: .3rem; justify-items: center; padding: 12px 14px 14px; text-align: center; background: rgb(var(--bg-rgb) / .72); border: 1px solid var(--line-faint); }
.codecard::before, .codecard::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid var(--acc); pointer-events: none; }
.codecard::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.codecard::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.kicker { margin: 0; font-size: 12px; letter-spacing: .26em; color: var(--mute); }
.code { margin: 0; font: 400 clamp(46px, min(17vw, 10.5vh), 112px)/.92 var(--display); text-transform: lowercase; letter-spacing: -.02em; color: var(--acc); text-shadow: 0 0 28px color-mix(in srgb, var(--acc) 70%, transparent); word-break: keep-all; }
.act.share { width: 100%; margin-top: .3rem; --hit-h: 48px; font-size: clamp(14px, 2vmin, 16px); }
.act.share svg { display: none; width: 24px; height: 24px; flex: none; }
.act.share::after { display: none; }

.who-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .45rem; }
.count { margin: 0; font-size: 13px; letter-spacing: .24em; color: var(--mute); }
.lobby .roster { list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; pointer-events: auto; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
.lobby .row {
  --c: var(--acc); display: grid; grid-template-columns: .8em minmax(0, 1fr) auto; align-items: center; column-gap: .8em; flex: 1 1 0;
  min-height: 34px; max-height: 54px; padding: 0 .9em; font-size: clamp(15px, 2.2vh, 19px);
  border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 9%, rgb(var(--bg-rgb) / .74));
}
.lobby .row.me .nm { color: var(--c); text-shadow: 0 0 8px var(--c); }
.lobby .row .tag { color: var(--acc); font-size: 12px; }
.lobby .row.ghost { border-left-color: var(--line-ghost); border-left-style: dashed; background: none; color: var(--dim); }
.lobby .row.ghost .dot { background: none; border: 1px dashed var(--line-or); box-shadow: none; }
.lobby .row.ghost .nm { color: var(--ghost-ink); font-size: .8em; letter-spacing: .2em; }

.controls { display: flex; justify-content: flex-end; align-items: center; }
.lobby .controls { display: block; }
.host { display: grid; gap: .6rem; }
.rounds { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: .5rem; font-size: 12px; letter-spacing: .26em; color: var(--mute); }
.tog { appearance: none; background: rgb(var(--bg-rgb) / .5); border: 1px solid var(--line); color: var(--mute); font: inherit; font-size: 20px; height: 48px; cursor: pointer; border-radius: 0; }
.tog.on { color: var(--on-sel); background: var(--acc); border-color: var(--acc); box-shadow: 0 0 14px var(--acc); }
.tog:focus-visible { outline: 2px dashed var(--acc); outline-offset: 3px; }
.act.start { --hit-h: 60px; width: 100%; font-size: clamp(17px, 2.6vh, 22px); letter-spacing: .3em; }
.wait { margin: 0; width: 100%; text-align: center; letter-spacing: .26em; font-size: 13px; color: var(--mute); padding: 1.1em 0; }

/* lobby en pantallas bajas: el código se compacta (sin rótulo, el botón de compartir pasa a icono) y la lista gana altura */
@media (max-height: 700px) {
  .lobby { gap: .5rem; }
  .lobby .kicker { display: none; }
  .codecard { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: 8px 10px; text-align: left; justify-items: stretch; }
  .codecard .code { text-align: left; font-size: clamp(42px, min(15vw, 11vh), 86px); }
  .act.share { width: 56px; --hit-h: 56px; margin: 0; padding: 0; }
  .act.share svg { display: block; }
  .act.share .lbl { display: none; }
  .lobby .roster { gap: .25rem; }
}
/* móvil apaisado: código y botones a la izquierda, jugadores a la derecha */
@media (max-height: 460px) and (min-aspect-ratio: 5/4) {
  .lobby {
    display: grid; width: min(100%, 860px); margin-inline: auto; column-gap: 18px; row-gap: .4rem; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "top who" "code who" "spacer who" "controls who";
  }
  .lobby > * { width: auto; }
  .lobby-top { grid-area: top; } .codecard { grid-area: code; } .who-list { grid-area: who; } .lobby .controls { grid-area: controls; }
  .codecard .code { font-size: clamp(40px, 22vh, 72px); }
}

/* ───────── PARTIDA ───────── */
.play {
  --rh: clamp(34px, 5.2vh, 44px);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: .5rem;
  grid-template-areas: "hud" "arena" "roster" "controls";
}
.play.v-final { grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "hud" "verdict" "arena" "roster" "controls"; --rh: clamp(32px, 4.8vh, 40px); }
.hud {
  grid-area: hud; display: grid; align-items: center; column-gap: clamp(12px, 3vw, 24px); row-gap: .1rem;
  grid-template-columns: auto auto 1fr auto; grid-template-areas: "chip round . tools" "title title title title";
}
.chip { grid-area: chip; }
.round { grid-area: round; margin: 0; }
.tools { grid-area: tools; display: flex; gap: .4rem; }
.hud small { display: block; font-size: 12px; letter-spacing: .3em; color: var(--mute); }
.hud b { font-weight: 400; font-size: clamp(16px, 3.4vmin, 26px); letter-spacing: .18em; }
.chip { appearance: none; background: none; border: 0; padding: 0; margin: 0; color: var(--acc); font: inherit; text-align: left; cursor: pointer; text-shadow: 0 0 10px var(--acc); min-height: 44px; }
.shape {
  grid-area: title; margin: 0; text-align: center; font: 400 clamp(26px, 8.4vw, 60px)/1 var(--display); text-transform: lowercase; letter-spacing: -.01em;
  color: var(--ink); text-shadow: 0 0 18px color-mix(in srgb, var(--ink) 55%, transparent);
}

.arena-wrap { grid-area: arena; position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; container-type: size; }
#arena { width: min(92vw, 62vh); aspect-ratio: 1; width: min(100cqw, 100cqh); }   /* la 1.ª línea es el respaldo sin container queries */
.arena-msg {
  position: absolute; left: 0; right: 0; bottom: 3%; margin: 0; text-align: center; font-size: clamp(12px, 2vmin, 15px); letter-spacing: .3em; color: var(--acc); text-shadow: 0 0 10px var(--acc);
}
.arena-msg.err { color: var(--hot); text-shadow: 0 0 10px var(--hot); animation: blink .5s steps(2) 3; }

/* veredicto (solo al terminar): lo primero que se lee es cómo te fue */
.verdict { grid-area: verdict; text-align: center; display: grid; gap: .2rem; padding-top: .1rem; }
.v-title { margin: 0; font: 400 clamp(34px, 11.5vw, 78px)/1 var(--display); text-transform: lowercase; letter-spacing: -.02em; color: var(--ink); text-shadow: 0 0 18px color-mix(in srgb, var(--ink) 50%, transparent); }
.v-sub { margin: 0; font-size: 13px; letter-spacing: .16em; color: var(--mute); }
.verdict[data-tone="win"] .v-title { color: var(--gold); text-shadow: 0 0 24px var(--amber), 0 0 3px var(--white); animation: pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.verdict[data-tone="podium"] .v-title { color: var(--acc); text-shadow: 0 0 22px var(--acc); animation: pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop { from { scale: .55; opacity: 0; } to { scale: 1; opacity: 1; } }

/* marcador: lecturas de osciloscopio. Cada fila se coloca por su posición (cx, cy) y se desliza al reordenarse. */
.play .roster {
  grid-area: roster; list-style: none; margin: 0; padding: 0; position: relative; --gap: 14px; --cols: 1; --lines: 1;
  height: min(calc(var(--lines) * var(--rh)), var(--roster-max, 100vh)); pointer-events: auto; touch-action: pan-y;
  font-size: clamp(13px, 1.95vh, 16px); scrollbar-width: thin; scrollbar-color: var(--dim) transparent;
}
.play.v-final .roster { --roster-max: calc(var(--rh) * 4.6); overflow-y: auto; }
@media (max-height: 700px) { .play.v-final .roster { --roster-max: calc(var(--rh) * 3.6); } .v-title { font-size: clamp(30px, 10vw, 60px); } }
.row { --c: var(--acc); --w: 0; --cx: 0; --cy: 0; }
.play .row {
  position: absolute; top: 0; left: 0; height: var(--rh);
  width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  transform: translate(calc(var(--cx) * (100% + var(--gap))), calc(var(--cy) * var(--rh)));
  transition: transform .6s cubic-bezier(.2, .9, .2, 1);
  display: grid; align-items: center; column-gap: .6em; padding-bottom: 4px;
  grid-template-columns: .7em minmax(0, 1fr) auto auto auto; grid-template-areas: "dot nm mini tag val";
}
.play .row .dot { grid-area: dot; } .play .row .nm { grid-area: nm; } .play .row .mini { grid-area: mini; }
.play .row .tag { grid-area: tag; } .play .row .val { grid-area: val; }
.play .row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c); opacity: .22; }
.bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); transform-origin: left; transform: scaleX(var(--w)); transition: transform .8s cubic-bezier(.2, .9, .2, 1); }
.dot { width: .7em; height: .7em; background: var(--c); box-shadow: 0 0 10px var(--c); }
.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .06em; color: var(--ink); }
.nm em { font-style: normal; color: var(--c); margin-right: .3em; }
.row.me .nm { color: var(--c); text-shadow: 0 0 8px var(--c); }
.row.off { opacity: .45; }
.row.off .dot { animation: blink 1s steps(2) infinite; }
.tag { font-size: .78em; letter-spacing: .16em; color: var(--soft); }
.val { font-variant-numeric: tabular-nums; letter-spacing: .06em; min-width: 3.2em; text-align: right; color: var(--c); }
.mini { display: flex; align-items: flex-end; gap: 2px; height: 1.4em; }
.mini i { display: block; width: 5px; height: calc(var(--h) * 100%); background: var(--c); opacity: .5; }
.mini i.top { opacity: 1; box-shadow: 0 0 6px var(--c); }

.play .controls { grid-area: controls; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: stretch; }
.play .controls .act { --hit-h: 56px; }
.play .controls .act.solid, .play .controls .wait { grid-column: 1; }
.play .controls .act:is(.share-r, .alt) { grid-column: 2; padding-inline: 1em; }
.play .controls .act:is(.share-r, .alt)::after { display: none; }
.act:is(.share-r, .alt) svg { width: 22px; height: 22px; display: block; flex: none; }
@media (max-width: 700px) { .act:is(.share-r, .alt) .lbl { display: none; } .act:is(.share-r, .alt) { width: 56px; padding-inline: 0; } }
@media (min-width: 701px) { .play .controls { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .play .controls .act:is(.share-r, .alt) { width: auto; } }

/* ───────── apaisado: marcador a la izquierda ───────── */
@media (min-aspect-ratio: 5/4) {
  .play, .play.v-final {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: var(--pad);
    grid-template-areas: "hud hud" "verdict arena" "roster arena" "controls controls";
  }
  .play:not(.v-final) { grid-template-areas: "hud hud" "roster arena" "roster arena" "controls controls"; }
  .play .roster, .play.v-final .roster { align-self: end; --roster-max: 100%; overflow-y: auto; }
  .play .controls { justify-self: center; width: min(100%, 460px); }
  .shape { font-size: clamp(22px, 7.5vmin, 60px); }
  .v-title { font-size: clamp(30px, 7vmin, 56px); }
}

/* pantallas bajas (móvil apaisado) */
@media (max-height: 460px) {
  .play { --rh: 28px; }
  .shape { font-size: 22px; }
  .code { font-size: 22vh; }
  .v-title { font-size: 30px; }
}

/* ───────── enlaces de la portada y RANKING ───────── */
.subnav { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
/* móvil: tres enlaces no caben en una fila (el de la práctica es largo); dos arriba y el tercero centrado debajo, en vez de uno suelto a la izquierda */
@media (max-width: 480px) {
  .subnav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .subnav .link:nth-child(2) { justify-self: end; }
  .subnav .link:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
}
.link {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; min-height: 44px; display: inline-flex; align-items: center; font: inherit; font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none; color: var(--soft); cursor: pointer;
}
.link:hover { color: var(--acc); text-shadow: 0 0 8px var(--acc); }
.link:focus-visible { outline: 2px dashed var(--acc); outline-offset: 4px; }

.ranking { display: grid; grid-template-rows: auto auto minmax(0, 1fr); row-gap: .9rem; max-width: 780px; margin-inline: auto; }
.rank-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.rank-title { margin: 0; font: 400 clamp(34px, 10vmin, 72px)/1 var(--display); letter-spacing: -.02em; color: var(--acc); text-shadow: 0 0 24px color-mix(in srgb, var(--acc) 70%, transparent); }
.rank-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.rank-tabs .tab {
  appearance: none; background: none; border: 1px solid var(--dim); border-radius: 0; color: var(--dim); font: inherit; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; padding: 0 .9em; min-height: 44px; cursor: pointer; pointer-events: auto;
}
.rank-tabs .tab:hover { color: var(--ink); border-color: var(--ink); }
.rank-tabs .tab.on { color: var(--on-sel); background: var(--acc); border-color: var(--acc); box-shadow: 0 0 14px var(--acc); }

.rank-list { list-style: none; margin: 0; padding: 0 6px 0 0; overflow-y: auto; pointer-events: auto; touch-action: pan-y; display: grid; align-content: start; gap: .25rem; scrollbar-width: thin; scrollbar-color: var(--dim) transparent; }
.rank-row { display: grid; grid-template-columns: 2.2ch 56px minmax(0, 1fr) auto; align-items: center; column-gap: .9em; padding: .3rem 0; border-bottom: 1px solid rgb(var(--acc-rgb) / .18); }
.rank-list.games .rank-row { grid-template-columns: 2.2ch minmax(0, 1fr) auto; }
.rank-list.games .slot { display: none; }
.slot { display: block; line-height: 0; }
.trace { width: 56px; height: 56px; }
.pos { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.who { display: grid; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .08em; }
.who small { color: var(--dim); font-size: .75em; letter-spacing: .14em; }
.pts { font-size: 1.2em; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--acc); text-shadow: 0 0 8px color-mix(in srgb, var(--acc) 60%, transparent); }
.rank-row:first-child :is(.pos, .pts) { color: var(--top-ink); text-shadow: 0 0 14px var(--acc), 0 0 3px var(--white); }
.rank-empty { color: var(--dim); letter-spacing: .24em; font-size: 13px; padding: .6rem 0; }

/* ───────── selector de idioma (ES · EN · PT) ───────── */
.langs { display: inline-flex; align-items: center; gap: .4rem; }
.lang {
  appearance: none; background: none; border: 1px solid var(--dim); border-radius: 0; color: var(--dim); font: inherit; font-size: 12px;
  letter-spacing: .18em; padding: 0 .6em; min-width: 44px; min-height: 33px; cursor: pointer; pointer-events: auto;   /* compacto: la guardia fija los 33 px */
}
.lang:hover { color: var(--ink); border-color: var(--ink); }
.lang.on { color: var(--on-sel); background: var(--acc); border-color: var(--acc); box-shadow: 0 0 10px var(--acc); }
.lang:focus-visible { outline: 2px dashed var(--acc); outline-offset: 3px; }
.rank-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }

/* ───────── aviso de primera visita: elegir idioma (langprompt.js) ───────── */
.langgate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--pad); background: rgb(var(--bg-rgb) / .88); overflow-y: auto; }
.langbox { position: relative; width: min(100%, 470px); display: grid; gap: 1.3rem; padding: 28px 24px 26px; background: var(--bg); border: 1px solid var(--line-faint); }
.langbox::before, .langbox::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--acc); pointer-events: none; }
.langbox::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.langbox::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.langtitle { margin: 0; text-align: center; font: 400 12px/2 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--mute); }
.langlist { display: grid; gap: .8rem; }
.langopt {
  appearance: none; display: flex; align-items: center; gap: 1rem; width: 100%; margin: 0; padding: .85rem 1rem; cursor: pointer; text-align: left;
  background: rgb(var(--acc-rgb) / .05); border: 2px solid rgb(var(--acc-rgb) / .4); border-radius: 0; color: var(--ink);
  font: inherit; font-size: clamp(14px, 3.6vw, 18px); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 0 10px rgb(var(--ink-rgb) / .35);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.langopt.rec { border-color: var(--acc); }
.langopt:hover, .langopt:focus-visible { outline: none; border-color: var(--acc); background: rgb(var(--acc-rgb) / .14); box-shadow: 0 0 20px rgb(var(--acc-rgb) / .4); }
.langopt:active { transform: translateY(1px); }
.langopt .flag { flex: none; width: 54px; height: 36px; line-height: 0; border: 1px solid rgba(255, 255, 255, .45); box-shadow: 0 0 12px rgba(255, 255, 255, .14); }
.langopt .flag svg { display: block; width: 100%; height: 100%; }
.langopt .txt { flex: 1; min-width: 0; }
.langopt .go { color: var(--acc); font-size: 1.3em; transition: translate .15s; }
.langopt:hover .go, .langopt:focus-visible .go { translate: .3em 0; }

/* ───────── MODO CARRERA (race.html) ─────────
   Reutiliza la partida (.play, .hud, .roster, .verdict, .controls) con las figuras como filas del marcador, la portada (.home, .panel)
   y el ranking (.ranking). Aquí solo lo que cambia. */
.hud .avg { grid-area: chip; }                                  /* la media en curso ocupa el sitio del código de sala */
.row.todo { opacity: .5; }                                      /* figuras que aún no se han jugado */
.row.me .val { text-shadow: 0 0 8px var(--c); }                 /* la figura en juego */
.invite.race-best { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.invite.race-best b { display: inline; margin: 0; font-size: 1.9em; letter-spacing: .1em; }
.race-plays { margin: 0; font-size: 12px; letter-spacing: .2em; color: var(--mute); text-align: center; }

.race-rank { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.race-rank .rank-list .rank-row { grid-template-columns: 2.2ch minmax(0, 1fr) auto auto; padding-inline: .4rem; }
.race-rank .mini { --c: var(--acc); height: 1.8em; }
.race-rank .rank-row.now { background: rgb(var(--acc-rgb) / .12); box-shadow: inset 3px 0 0 var(--acc); }
.race-rank .hint { min-height: 0; }
.race-foot { display: flex; justify-content: flex-end; }
.link.sure { color: var(--hot-ink); text-shadow: 0 0 8px var(--hot); }
.play.race .row { grid-template-columns: .7em minmax(0, 1fr) auto; grid-template-areas: "dot nm val"; }   /* sin las columnas de «mini» y «tag» que la carrera no usa: caben los nombres largos */
.play.race .row .val { color: var(--ink); }   /* la nota en neutro: el color de la fila identifica la figura, no lo bien que salió */
.play.race .controls .act.alt { white-space: nowrap; }
@media (min-width: 701px) { .play.race .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }   /* «Mi ranking» con su rótulo en una línea */
}