/* perfectPulse — vector-arcade / fósforo.
   Negro absoluto, un solo acento por jugador, esquinas rectas, nada de tarjetas ni gradientes de UI. */

@font-face { font-family: "Share Tech Mono"; src: url("../fonts/share-tech-mono.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Major Mono Display"; src: url("../fonts/major-mono-display.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #000;
  --ink: #d6ffe9;
  --dim: #5d8672;
  --acc: #39ff88;
  --hot: #ff2e63;
  --mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Major Mono Display", var(--mono);
  --pad: clamp(14px, 3.2vmin, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

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; }

/* pantalla CRT: scanlines + viñeta (efecto de pantalla, no UI) */
#crt {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .7) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px);
}

#app { position: fixed; inset: 0; 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)); animation: boot .35s steps(7) both; }
.screen :is(button, input, a, .chip) { pointer-events: auto; }

@keyframes boot { from { opacity: 0; filter: brightness(3) blur(3px); } to { opacity: 1; filter: none; } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes glitch {
  0%, 91%, 100% { translate: 0 0; filter: none; }
  92% { translate: -5px 0; filter: drop-shadow(4px 0 #ff2e63) drop-shadow(-4px 0 #00e5ff); }
  94% { translate: 6px 0; filter: drop-shadow(-4px 0 #ff2e63) drop-shadow(4px 0 #00e5ff); }
  96% { translate: -2px 0; filter: drop-shadow(2px 0 #ff2e63); }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────── 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: #00170a; background: var(--acc); border: 2px solid var(--acc); font-weight: 700; text-shadow: none; box-shadow: 0 0 22px rgba(57, 255, 136, .4); transition: background .12s, box-shadow .12s; }
.btn.primary::before, .btn.primary::after { display: none; }
.btn.primary:hover { background: #8dffb9; box-shadow: 0 0 32px rgba(57, 255, 136, .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: #000; 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; }

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

/* ───────── INICIO: logo vertical que ocupa toda la altura ───────── */
.home { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--pad); }
.logo {
  margin: 0; font: 400 min(10.4vh, 19vw)/.8 var(--display); letter-spacing: -.04em; white-space: nowrap;
  writing-mode: vertical-rl; rotate: 180deg; align-self: stretch; animation: glitch 6s infinite;
}
.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 #fff; }
.tagline { position: absolute; top: var(--pad); right: var(--pad); margin: 0; text-align: right; font-size: 12px; letter-spacing: .3em; color: var(--dim); line-height: 1.8; }
/* ───────── INICIO: formulario con cajas, pasos y botones que se ven clicables ───────── */
.panel {
  position: relative; align-self: end; justify-self: end; width: min(100%, 430px); display: grid; gap: .9rem;
  padding: 22px 22px 20px; text-align: left; background: rgba(0, 0, 0, .62);
}
.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: .7em; margin: 0 0 .1rem; font-size: 12px; letter-spacing: .24em; color: #9fd1b8; }
.step i { font-style: normal; display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border: 1px solid var(--acc); color: var(--acc); letter-spacing: 0; flex: none; }
.field { display: grid; gap: .55rem; }

.box {
  appearance: none; width: 100%; min-height: 52px; margin: 0; border-radius: 0; font: inherit; font-size: clamp(20px, 4.4vmin, 28px);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); caret-color: var(--acc);
  background: rgba(57, 255, 136, .05); border: 2px solid #3f735b; padding: .45em .7em;
  -webkit-user-select: text; user-select: text; transition: border-color .12s, box-shadow .12s;
}
.box::placeholder { color: #4d7662; opacity: 1; }
.box:hover { border-color: #66ad8a; }
.box:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(57, 255, 136, .16), 0 0 20px rgba(57, 255, 136, .35); }
.box.bad { border-color: var(--hot); box-shadow: 0 0 16px rgba(255, 46, 99, .5); animation: shake .32s; }
.box.codebox { text-align: center; letter-spacing: .5em; padding-left: calc(.7em + .5em); }

/* 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.4vmin, 19px); letter-spacing: .2em; text-transform: uppercase;
  min-height: 52px; padding: .75em 1.2em; display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  color: var(--acc); background: rgba(57, 255, 136, .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: rgba(57, 255, 136, .18); box-shadow: 0 0 18px rgba(57, 255, 136, .45); }
.act:active { transform: translateY(2px); box-shadow: none; }
.act:focus-visible { outline: 2px dashed var(--ink); outline-offset: 4px; }
.act.solid { color: #00170a; background: var(--acc); font-weight: 700; box-shadow: 0 0 22px rgba(57, 255, 136, .4); }
.act.solid:hover { background: #8dffb9; box-shadow: 0 0 32px rgba(57, 255, 136, .7); }
.act[aria-busy="true"] { opacity: .7; cursor: progress; }
.act[aria-busy="true"]::after { animation: blink .6s steps(2) infinite; }

.hint { margin: -.45rem 0 0; font-size: 12px; line-height: 1.4; letter-spacing: .04em; color: #86b79d; }
.or { display: flex; align-items: center; gap: .8em; color: #86b79d; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin: .2rem 0; }
.or i { flex: 1; height: 1px; background: #4d7662; }
.or b { font-weight: 400; }
.joinrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: stretch; }
.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); }
.error {
  margin: 0; padding: .7em .9em; min-height: 3.2em; display: flex; align-items: center; font-size: 13px; line-height: 1.4; letter-spacing: .08em; color: #ffd3de;
  background: rgba(255, 46, 99, .13); border: 1px solid var(--hot);
  visibility: hidden;                       /* el espacio queda reservado: al aparecer no mueve los botones */
}
.error.on { visibility: visible; animation: shake .32s; }
@keyframes shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }

/* ───────── LOBBY ───────── */
.lobby { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.kicker { margin: 0; font-size: 12px; letter-spacing: .34em; color: var(--dim); }
.code { margin: -.04em 0 0; font: 400 min(31vw, 34vh)/.82 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; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: .4rem; }
.lobby .roster { align-self: end; max-width: 360px; margin-bottom: .6rem; }
.controls { display: flex; justify-content: flex-end; align-items: center; min-height: 3rem; }
.host { display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: center; justify-content: flex-end; }
.rounds { display: flex; align-items: center; gap: .5rem; font-size: 12px; letter-spacing: .3em; color: var(--dim); }
.tog { appearance: none; background: none; border: 1px solid var(--dim); color: var(--dim); font: inherit; font-size: 18px; width: 2.4em; height: 2.4em; cursor: pointer; border-radius: 0; }
.tog.on { color: #000; background: var(--acc); border-color: var(--acc); box-shadow: 0 0 14px var(--acc); }
.wait { margin: 0; letter-spacing: .26em; font-size: 13px; color: var(--dim); }

/* ───────── PARTIDA ───────── */
.play { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: .5rem; }
.hud { display: flex; align-items: flex-end; gap: clamp(10px, 3vmin, 28px); flex-wrap: wrap; }
.hud small { display: block; font-size: 11px; letter-spacing: .3em; color: #86b79d; }
.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); }
.round { margin: 0; }
.shape {
  margin: 0 auto 0 0; flex: 1 1 auto; text-align: center; font: 400 clamp(22px, 7.5vmin, 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); min-width: 8ch;
}
.icon { appearance: none; background: none; border: 0; padding: .4em 0; color: #86b79d; font: inherit; font-size: 12px; letter-spacing: .26em; cursor: pointer; }
.icon:hover { color: var(--ink); }

.arena-wrap { 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(11px, 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; }

/* marcador: lecturas de osciloscopio, sin tarjetas */
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem 1.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: clamp(11px, 1.9vmin, 15px); }
.row { --c: var(--acc); --w: 0; position: relative; display: grid; grid-template-columns: .6em minmax(0, 1fr) auto auto; align-items: center; column-gap: .6em; padding-bottom: 5px; }
.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: .6em; height: .6em; background: var(--c); box-shadow: 0 0 10px var(--c); }
.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .08em; 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: .8em; letter-spacing: .2em; color: var(--dim); }
.val { font-variant-numeric: tabular-nums; letter-spacing: .08em; min-width: 3.4em; text-align: right; color: var(--c); }
.count { grid-column: 1 / -1; font-size: 11px; letter-spacing: .3em; color: var(--dim); }

.lobby .roster { grid-template-columns: 1fr; gap: .5rem; }
.lobby .row { grid-template-columns: .6em minmax(0, 1fr) auto; }

/* ───────── apaisado: marcador a la izquierda ───────── */
@media (min-aspect-ratio: 5/4) {
  .play { grid-template-columns: minmax(200px, 290px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: var(--pad); }
  .play .hud { grid-column: 1 / -1; }
  .play .roster { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; align-content: end; font-size: clamp(12px, 2.1vmin, 16px); }
  .play .arena-wrap { grid-column: 2; grid-row: 2; }
  .play .controls { grid-column: 1 / -1; grid-row: 3; }
}

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

@media (prefers-reduced-motion: reduce) {
  .screen, .logo, .net, .row.off .dot, .arena-msg.err, .box.bad, .error.on, .act[aria-busy="true"]::after { animation: none; }
  .bar { transition: none; }
}