/* ══════════════════════════════════════════════════════════════
   PAMPLING ARCADE — TEE RUSH
   Estética arcade (CRT, neón) sobre la tipografía de marca (Poppins).
   Mobile first y una sola columna centrada en todas las pantallas de contenido;
   el ranking va siempre debajo. Solo la pantalla de juego lo pone al lado,
   porque ahí el tablero es estrecho y se ve en vivo mientras juegas.
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg: #0d0b1a;
  --bg-2: #16123099;
  --ink: #f4f1ff;
  --ink-dim: #a49dc4;
  --neon: #ff4d8d;      /* rosa arcade */
  --neon-2: #21e6c1;    /* cian */
  --gold: #ffc93c;
  --danger: #ff5c5c;
  --line: #ffffff1f;
  --radius: 14px;
  --col: 460px;         /* ancho de la columna de juego */
  --side: 320px;        /* ancho del ranking en escritorio */
  --gap: clamp(16px, 3vw, 34px);
}

* { box-sizing: border-box; }

html {
  /* reserva el hueco de la barra de scroll: si no, el contenido salta 8 px al
     pasar de una pantalla corta a una larga */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a1f5c 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 100%, #3d1440 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: repeating-linear-gradient(180deg, #0000 0 2px, #00000026 2px 3px);
  mix-blend-mode: multiply;
}

/* ── Pantallas y rejilla ───────────────────────────────────── */
.screen { display: none; }
.screen.is-active { display: block; }

.layout {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: clamp(18px, 4vw, 34px) 18px 64px;
  text-align: center;
}
.wrap-text { text-align: left; }

/* ── Tipografía ────────────────────────────────────────────── */
.kicker {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(9px, 2.4vw, 11px);
  letter-spacing: 2px;
  color: var(--neon-2);
  margin: 0 0 14px;
  text-transform: uppercase;
}

.logo-title {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(29px, 10vw, 52px);
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 0 0 6px var(--neon), 0 0 22px #ff4d8d99, 3px 3px 0 #7a1440;
}

.tagline {
  color: var(--ink-dim);
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.55;
  margin: 0 0 22px;
}
.tagline b { color: var(--ink); }

h2 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(10px, 2.6vw, 11px);
  letter-spacing: 1px;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.micro { font-size: 12px; color: var(--ink-dim); margin: 10px 0 0; line-height: 1.5; }

/* ── Botones ───────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(2px) scale(.99); }

.btn-primary {
  background: linear-gradient(180deg, #ff6ba3, var(--neon));
  color: #24001a;
}

.btn-ghost {
  background: #ffffff0f;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: #ffffff1a; }

.btn-xl {
  display: block;
  width: 100%;
  max-width: 340px;
  padding: 17px 26px;
  font-size: clamp(15px, 4vw, 17px);
  margin: 8px auto;
}

.btn-share {
  background: #ffffff14;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  padding: 12px 18px;
  flex: 1 1 140px;
}
.share-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ── Premio semanal ────────────────────────────────────────── */
.weekly {
  position: relative;
  background: linear-gradient(180deg, #ffc93c1c, #ffc93c08);
  border: 1px solid #ffc93c66;
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 26px 0 20px;
}
.weekly strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.weekly-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #2a1c00;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Cómo se juega ─────────────────────────────────────────── */
.how {
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 15px;
  margin-bottom: 6px;
  font-size: 13px;
}
.how summary { cursor: pointer; font-weight: 600; color: var(--neon-2); list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: " ▾"; }
.how[open] summary::after { content: " ▴"; }
.how ul { margin: 12px 0 2px; padding-left: 20px; color: var(--ink-dim); line-height: 1.75; }
.how b { color: var(--ink); }

/* ── Ranking ───────────────────────────────────────────────── */
.board {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 14px;
  margin: 0 0 18px;
  text-align: left;
}
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #ffffff0d;
  font-size: 14px;
}
.board-list li:last-child { border-bottom: 0; }
.board-list .pos {
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  color: var(--ink-dim);
  min-width: 28px;
}
.board-list li.is-top1 .pos,
.board-list li.is-top2 .pos,
.board-list li.is-top3 .pos { color: var(--gold); }
.board-list li.is-top1 { background: linear-gradient(90deg, #ffc93c1f, transparent); border-radius: 8px; }
.board-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .sc { font-weight: 800; color: var(--neon-2); font-variant-numeric: tabular-nums; }
.board-list li.is-me { background: #ff4d8d24; border-radius: 8px; }
.board-list li.is-me .nm::after {
  content: " (tú)";
  color: var(--neon);
  font-size: 11px;
  font-weight: 600;
}
.board-empty { color: var(--ink-dim); font-size: 13px; }
.board-foot { font-size: 11.5px; color: #7d76a0; margin: 12px 0 0; }

.legal-line { font-size: 11.5px; color: #7d76a0; margin-top: 24px; line-height: 1.6; }
/* el espacio antes del ranking se controla aquí, en un solo sitio */
.col-side { margin-top: 14px; }
.legal-line a, .capture a { color: var(--ink-dim); }

/* ══════════════ JUEGO ══════════════ */
#screen-game.is-active { display: block; }

.game-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: var(--col);
  margin: 0 auto;
  padding: 8px 10px 6px;
}
.game-col { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.game-side { display: none; }

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
}
.hud-cell { min-width: 74px; text-align: left; }
.hud-cell-c { flex: 1; text-align: center; min-width: 0; }
.hud-cell-r { text-align: right; }
.hud-label {
  display: block;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  color: var(--ink-dim);
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.hud-score {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(16px, 5vw, 21px);
  color: #fff;
  text-shadow: 0 0 10px #21e6c1aa;
  font-variant-numeric: tabular-nums;
}
.hud-best {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(11px, 3.4vw, 14px);
  color: var(--ink-dim);
}
.hud-flag {
  display: inline-block;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(10px, 3vw, 13px);
  color: var(--neon-2);
  opacity: 0;
  transition: opacity .2s, transform .2s;
}
.hud-flag.on { opacity: 1; transform: scale(1.1); }
.hud-flag.is-record { color: var(--gold); text-shadow: 0 0 12px #ffc93c99; }

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #191339, #0d0b1a 70%);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 60px #00000080;
  touch-action: none;
}
#canvas { display: block; width: 100%; height: 100%; }

.countdown {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(40px, 14vw, 62px);
  color: #fff;
  text-shadow: 0 0 24px var(--neon);
  background: #0d0b1a99;
}
.countdown.on { display: flex; }

.mute {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #00000059;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}
.mute.off { color: #5d5680; }

.hint { text-align: center; font-size: 11.5px; color: #6f6892; margin: 6px 0 0; }

/* ══════════════ RESULTADO ══════════════ */
.score-big {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(38px, 14vw, 64px);
  color: #fff;
  text-shadow: 0 0 18px #21e6c1aa;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.rank-big {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(40px, 15vw, 68px);
  color: var(--gold);
  text-shadow: 0 0 20px #ffc93c66;
  margin: 6px 0 4px;
}
.score-sub {
  color: var(--ink-dim);
  font-size: clamp(13px, 3.5vw, 15px);
  margin: 0 0 20px;
  line-height: 1.55;
}
.score-sub b { color: var(--ink); }

.podium-note {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 22px;
  text-align: center;
}
.podium-note b { color: var(--neon-2); }
.podium-note.is-podium { border-color: var(--gold); background: linear-gradient(180deg, #ffc93c1a, #ffc93c05); }
.podium-note.is-podium b { color: var(--gold); }

/* ── Formulario ────────────────────────────────────────────── */
.capture {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  text-align: left;
}
.capture-lead {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(10px, 2.9vw, 12px);
  line-height: 1.8;
  color: var(--neon-2);
  margin: 0 0 18px;
  text-align: center;
}
.field { display: block; margin-bottom: 14px; }
.field span {
  display: block;
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}
.field span em { text-transform: none; letter-spacing: 0; opacity: .75; }
.field input {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ffffff2b;
  background: #0b0918;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;   /* 16px evita el zoom automático en iOS */
}
.field input:focus { outline: 2px solid var(--neon); outline-offset: 1px; }
.field input.is-bad { border-color: var(--danger); }

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: 12px;
  cursor: pointer;
}
.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--neon); flex: none; }
.check em { opacity: .7; }

.best-note {
  background: #21e6c118;
  border: 1px solid #21e6c14d;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
  text-align: center;
}
.best-note b { color: var(--neon-2); }

.result-actions { margin-top: 18px; }

.form-error {
  color: var(--danger);
  font-size: 12.5px;
  margin: 10px 0 0;
  text-align: center;
}

/* El botón que cierra el embudo: separado de las casillas y bien grande */
#btn-claim {
  margin: 26px auto 16px;
  padding: 19px 28px;
  letter-spacing: .08em;
}
.capture { padding-bottom: 22px; }
.capture .check:last-of-type { margin-bottom: 4px; }

/* ── Pantalla de resultado: compacta ───────────────────────────
   Todo lo que importa (marca, formulario y OTRA PARTIDA) tiene que caber sin
   scroll. Las camisetas capturadas quedan debajo a propósito: son el premio de
   consolación, no una acción. */
#screen-result .kicker { margin-bottom: 8px; }
#screen-result .score-big { font-size: clamp(30px, 9vw, 46px); margin: 2px 0 2px; }
#screen-result .score-sub { margin-bottom: 12px; }
#screen-result .podium-note {
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}
#screen-result .capture { padding: 15px 14px 12px; }
#screen-result .capture-lead { margin-bottom: 12px; line-height: 1.6; }
#screen-result .best-note { padding: 8px 10px; margin-bottom: 12px; font-size: 12px; }
#screen-result .field { margin-bottom: 10px; }
#screen-result .field span { margin-bottom: 4px; }
#screen-result .field input { padding: 11px 13px; }
#screen-result .check { margin-bottom: 8px; font-size: 11.5px; line-height: 1.45; }
#screen-result #btn-claim { margin: 14px auto 8px; padding: 16px 26px; }
#screen-result .capture .micro { font-size: 11px; margin-top: 6px; }
#screen-result .result-actions { margin-top: 10px; }
#screen-result .result-actions .micro { margin-top: 6px; }

/* ── Camisetas cogidas ─────────────────────────────────────── */
.caught { margin-top: 34px; }
.caught-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* hueco abajo para que la barra de scroll no toque el botón */
  padding: 4px 2px 16px;
  margin-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #ffffff40 #ffffff12;
  -webkit-overflow-scrolling: touch;
}
.caught-row::-webkit-scrollbar { height: 8px; }
.caught-row::-webkit-scrollbar-track { background: #ffffff12; border-radius: 99px; }
.caught-row::-webkit-scrollbar-thumb { background: #ffffff40; border-radius: 99px; }
.caught-row::-webkit-scrollbar-thumb:hover { background: #ffffff60; }
.caught .btn { margin-top: 14px; }
.caught-item {
  flex: none;
  width: clamp(64px, 18vw, 84px);
  text-decoration: none;
  color: var(--ink-dim);
  transition: transform .12s ease;
}
.caught-item:hover { transform: translateY(-2px); color: var(--ink); }
.caught-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display: block;
}
.caught-item span {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Bases ─────────────────────────────────────────────────── */
#bases-content { font-size: 14.5px; line-height: 1.75; color: var(--ink-dim); }
#bases-content h1 { font-size: clamp(20px, 5vw, 26px); color: var(--ink); font-weight: 800; }
#bases-content h2 {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  margin: 28px 0 8px;
}
#bases-content strong, #bases-content b { color: var(--ink); }
#bases-content ul { padding-left: 20px; }
#bases-content code { background: #ffffff14; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
#btn-back { margin-bottom: 22px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Pantallas bajas (iPhone SE y similares): el resultado se aprieta un punto más
   para que OTRA PARTIDA siga entrando sin scroll. */
@media (max-height: 720px) {
  #screen-result .kicker { display: none; }
  #screen-result .score-big { font-size: clamp(26px, 8vw, 36px); }
  #screen-result .score-sub { font-size: 12.5px; margin-bottom: 10px; }
  #screen-result .podium-note { padding: 8px 10px; font-size: 11.5px; margin-bottom: 10px; }
  #screen-result .capture { padding: 12px 13px 10px; }
  #screen-result .capture-lead { font-size: 10px; margin-bottom: 10px; }
  #screen-result .best-note { padding: 7px 9px; margin-bottom: 9px; font-size: 11.5px; }
  #screen-result .field { margin-bottom: 8px; }
  #screen-result .check { margin-bottom: 7px; font-size: 11px; }
  #screen-result #btn-claim { margin: 11px auto 6px; padding: 14px 24px; }
  #screen-result .capture .micro { font-size: 10.5px; }
  #screen-result .layout { padding-top: 14px; }
}

/* Móvil en horizontal: poca altura, el juego manda */
@media (max-height: 560px) and (orientation: landscape) {
  .game-layout { padding: 4px 8px; }
  .hud { padding: 2px 4px 4px; }
  .hud-label { display: none; }
  .hint { display: none; }
  .stage { border-radius: 12px; }
  .layout { padding-top: 14px; }
  .logo-title { font-size: clamp(24px, 6vh, 34px); }
  .weekly, .how { margin-top: 14px; }
}

/* Tablet: el contenido respira y el juego se limita en altura */
@media (min-width: 640px) {
  .layout { max-width: 560px; padding-bottom: 80px; }
  .board-list li { font-size: 15px; padding: 9px 6px; }
}

/* Escritorio: el ranking pasa a columna lateral, siempre visible */
@media (min-width: 900px) {
  /* Una sola columna centrada, también en escritorio: el ranking va DEBAJO del
     contenido, no en un lateral. Así el orden de lectura es el mismo en todas
     las pantallas y no queda medio ancho vacío. */
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 46px 26px 80px;
    text-align: center;
  }
  .layout > * { grid-column: 1; }
  .layout > .legal-line { margin-top: 20px; }
  .layout-single { grid-template-columns: minmax(0, 760px); }
  .col-main { min-width: 0; }
  .col-side { min-width: 0; }

  /* la intro y el resultado ya no necesitan tanto ancho de texto */
  .capture { padding: 26px 24px 20px; }

  /* Juego: el tablero en el centro exacto de la ventana (hueco a la izquierda
     del mismo ancho que el ranking) y centrado también en vertical. */
  .game-layout {
    display: grid;
    grid-template-columns: var(--side) auto var(--side);
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: var(--gap);
    max-width: none;
    margin: 0;
    height: auto;
    min-height: 100dvh;
    padding: 30px 26px;
  }
  .game-col { grid-column: 2; }
  .game-side { grid-column: 3; }
  /* La altura manda y el ancho sale de ella, para no perder el 9:16.
     El HUD y la pista se alinean al mismo ancho que el tablero. */
  .game-col {
    --stage-h: min(calc(100dvh - 170px), 780px);
    --stage-w: calc(var(--stage-h) * 9 / 16);
    align-items: center;
  }
  .game-side { display: block; align-self: center; }
  .game-side .board { margin: 0; }
  .stage {
    flex: none;
    height: var(--stage-h);
    width: var(--stage-w);
    max-width: 100%;
    aspect-ratio: 9 / 16;
  }
  .hud { width: var(--stage-w); max-width: 100%; margin: 0 auto; }
  .hint { width: var(--stage-w); max-width: 100%; margin: 8px auto 0; }
}

/* Pantallas grandes: un poco más de aire, sin estirar el juego */
@media (min-width: 1280px) {
  :root { --side: 360px; }
}

/* ── Accesibilidad ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .crt { display: none; }
}

@media (hover: none) {
  .btn:hover { background: initial; }
}