/* HANDBALLER — hoja de estilos única. Mobile-first: el 90 % del tráfico viral
   es un pulgar en Instagram. */

:root {
  --ink: #0b0f14;
  --ink-2: #141b23;
  --ink-3: #1e2833;
  --paper: #f4f1ea;
  --muted: rgba(244, 241, 234, .58);
  --faint: rgba(244, 241, 234, .12);
  --accent: #e8552f;
  --gold: #f0c02c;
  --radius: 16px;
  --pad: clamp(16px, 4vw, 28px);
}

* { box-sizing: border-box; }

/* El atributo hidden SIEMPRE gana. Sin esto, cualquier display: grid/flex
   sobre una sección (p. ej. #career en desktop) pisaba al hidden del
   navegador y la decisión final quedaba en pantalla tras el retiro. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Fondo de héroes: ella a la izquierda, él a la derecha, fundidos en negro.
   Las fotos ya vienen pre-oscurecidas; los gradientes las terminan de hundir
   para que la UI siga leyéndose encima sin esfuerzo. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0 50% 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(11, 15, 20, .45) 0%, rgba(11, 15, 20, .78) 55%, var(--ink) 92%),
    linear-gradient(to right, rgba(11, 15, 20, .38) 0%, rgba(11, 15, 20, .72) 70%, var(--ink) 100%),
    url("assets/bg/heroina.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
body::after {
  inset: 0 0 0 50%;
  background-image:
    linear-gradient(to bottom, rgba(11, 15, 20, .45) 0%, rgba(11, 15, 20, .78) 55%, var(--ink) 92%),
    linear-gradient(to left, rgba(11, 15, 20, .38) 0%, rgba(11, 15, 20, .72) 70%, var(--ink) 100%),
    url("assets/bg/heroe.jpg");
}

#app {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--pad);
  opacity: 0;
  transition: opacity .25s;
}
#app[data-ready] { opacity: 1; }

h1, h2, h3 { line-height: 1.15; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

.muted { color: var(--muted); }

/* ---------------------------------------------------------------- idiomas */
.locales {
  display: flex; gap: 4px; justify-content: flex-end;
  font-size: 13px; letter-spacing: .04em; margin-bottom: 8px;
}
.locales a {
  color: var(--muted); text-decoration: none; padding: 4px 8px;
  border-radius: 8px; text-transform: uppercase;
}
.locales a[aria-current] { color: var(--paper); background: var(--faint); }

/* El .COM del título, discreto al lado del nombre. */
.hero h1 .tld { font-size: .45em; letter-spacing: .06em; vertical-align: .12em; }

/* El botón apagado hasta que haya apellido. */
.cta:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------------ setup */
.hero { text-align: center; padding: 24px 0 28px; }
.hero h1 {
  font-size: clamp(40px, 12vw, 68px); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(100deg, var(--paper) 30%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { font-size: clamp(16px, 4.4vw, 19px); font-weight: 600; margin-top: 10px; }
.intro { color: var(--muted); font-size: 15px; margin-top: 10px; }

.setup-grid { display: grid; gap: 20px; }

.preview { text-align: center; }
/* Camiseta con nombre arriba y dorsal gigante, como Copero. */
.jersey {
  position: relative; width: 180px; height: 200px; margin: 0 auto 10px;
  background: var(--ink-3);
  clip-path: polygon(20% 0, 36% 9%, 64% 9%, 80% 0, 100% 16%, 86% 32%, 86% 100%, 14% 100%, 14% 32%, 0 16%);
  overflow: hidden; display: grid; place-items: center;
}
.jersey-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 16%, rgba(244,241,234,.06) 16% 32%);
}

/* La camiseta es la de tu selección. Cada una copia el kit real:
   ARG bastones celestes y blancos, FRA el azul de Les Experts con el vivo
   tricolor, ESP la roja de los Hispanos con detalle amarillo, GER blanca
   con la banda schwarz-rot-gold. */
.jersey[data-country="ARG"] { background: #f4f7fa; }
.jersey[data-country="ARG"] .jersey-stripes {
  background: repeating-linear-gradient(90deg, #85bde4 0 16%, #f4f7fa 16% 32%);
}
.jersey[data-country="ARG"] .jersey-name,
.jersey[data-country="ARG"] .jersey-number { color: #14274e; }

.jersey[data-country="FRA"] { background: #10307e; }
.jersey[data-country="FRA"] .jersey-stripes {
  background: linear-gradient(to bottom,
    transparent 68%, #f4f1ea 68% 70.5%, #ef4135 70.5% 74%, transparent 74%);
}

.jersey[data-country="ESP"] { background: #c60b1e; }
.jersey[data-country="ESP"] .jersey-stripes {
  background: linear-gradient(to bottom,
    transparent 68%, #ffc400 68% 72%, transparent 72%);
}
.jersey[data-country="ESP"] .jersey-number { color: #ffc400; }

.jersey[data-country="GER"] { background: #f2f2ef; }
.jersey[data-country="GER"] .jersey-stripes {
  background: linear-gradient(to bottom,
    transparent 68%, #111 68% 70.5%, #dd0000 70.5% 73%, #ffce00 73% 75.5%, transparent 75.5%);
}
.jersey[data-country="GER"] .jersey-name,
.jersey[data-country="GER"] .jersey-number { color: #16181c; }
.jersey-name {
  position: absolute; top: 22%; left: 0; right: 0; text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--paper);
  text-transform: uppercase; padding: 0 18%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jersey-number {
  position: relative; font-size: 74px; font-weight: 800; color: var(--paper);
  line-height: 1; margin-top: 14px;
}
.preview-tag { color: var(--muted); font-size: 14px; font-weight: 600; }

.setup-form { display: grid; gap: 18px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field { display: grid; gap: 6px; }
.field > span, legend {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.field input {
  background: var(--ink-2); border: 1px solid var(--faint); border-radius: 12px;
  color: var(--paper); font-size: 18px; font-weight: 700; padding: 12px 14px;
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-narrow { max-width: 130px; }

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-stack { flex-direction: column; }
/* Ritmo y modo lado a lado cuando hay ancho: menos scroll en la inscripción. */
@media (min-width: 640px) {
  .chips-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.chip {
  background: var(--ink-2); border: 1px solid var(--faint); border-radius: 12px;
  padding: 10px 14px; display: flex; align-items: baseline; gap: 8px;
  transition: background .15s, border-color .15s;
}
.chip:hover { border-color: rgba(244, 241, 234, .3); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.chip-wide { width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; }
.chip-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  opacity: .6; min-width: 22px;
}
.chip-label { font-weight: 600; }
.chip-detail { font-size: 13px; opacity: .7; }

/* --------------------------------------------------- pista de balonmano */
.court {
  position: relative; width: 100%; aspect-ratio: 4 / 3; max-width: 360px;
  margin: 0 auto;
}
/* El SVG es sólo el dibujo. Sin esto se comía los clicks de los puestos:
   los pseudo-elementos que había antes se pintaban encima de los botones. */
.court-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.spot {
  position: absolute; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11, 15, 20, .72); border: 2px solid rgba(255, 255, 255, .75);
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
  transition: transform .14s cubic-bezier(.2, .9, .3, 1.3), background .15s;
  -webkit-tap-highlight-color: transparent;
}
.spot:hover { transform: translate(-50%, -50%) scale(1.1); }
.spot:active { transform: translate(-50%, -50%) scale(.96); }
.spot[aria-pressed="true"] {
  background: var(--accent); border-color: #fff; color: #fff;
  transform: translate(-50%, -50%) scale(1.16);
  box-shadow: 0 0 0 5px rgba(232, 85, 47, .35), 0 4px 14px rgba(0, 0, 0, .5);
}
.court-pick {
  text-align: center; margin-top: 10px; font-weight: 800; font-size: 16px;
  color: var(--accent);
}

.cta {
  background: var(--accent); border: 0; border-radius: 14px; color: var(--ink);
  font-size: 18px; font-weight: 800; padding: 16px; width: 100%;
}
.cta:disabled { opacity: .5; }
.ghost {
  background: transparent; border: 1px solid var(--faint); border-radius: 14px;
  color: var(--paper); font-weight: 600; padding: 14px; width: 100%;
}

/* --------------------------------------------------------------- carrera */
/* En pantalla ancha la carrera va al costado, como Copero. En celular queda
   abajo de la decisión, que es lo que el pulgar necesita tener a mano. */
.career-main { min-width: 0; }
.career-side { margin-top: 28px; }
.career-side h3 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 10px;
}
.tl-choosing { border: 1px dashed rgba(244, 241, 234, .28); background: none; }
.tl-choosing .tl-name { color: var(--muted); font-style: italic; }
.tl-crest-empty {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--faint);
  color: var(--muted); font-weight: 800; font-size: 13px;
}

.hud {
  background: var(--ink-2); border: 1px solid var(--faint); border-radius: var(--radius);
  padding: 16px; display: grid; gap: 14px; position: sticky; top: 8px; z-index: 2;
  max-height: 62vh; overflow: auto;
}
.hud-player { display: flex; align-items: center; gap: 12px; }

/* La vitrina del HUD: trofeos dorados acumulándose, estilo Copero. */
.hud-vitrina {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 2px 2px 0;
}
.hud-trophy { display: inline-flex; }
.hud-trophy svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.hud-trophy-more {
  color: var(--gold); font-size: 12px; font-weight: 800; margin-left: 4px;
}
.hud-number {
  font-size: 30px; font-weight: 800; color: var(--accent);
  min-width: 46px; text-align: center;
}
.hud-name { font-weight: 800; font-size: 17px; }
.hud-position { color: var(--muted); font-size: 13px; }
.hud-club { border-top: 1px solid var(--faint); padding-top: 12px; }
.hud-club-name { font-weight: 700; font-size: 17px; }
.hud-league { color: var(--muted); font-size: 13px; }

.hud-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0;
}
.hud-stats > div { text-align: center; }
.hud-stats dt {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.hud-stats dd {
  margin: 2px 0 0; font-size: 17px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.progress {
  height: 26px; border-radius: 999px; background: var(--ink-3);
  position: relative; overflow: hidden; display: grid; place-items: center;
}
.progress::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: linear-gradient(90deg, #7a2c16, var(--accent)); transition: width .4s;
}
.progress-label {
  position: relative; font-size: 12px; font-weight: 700; letter-spacing: .08em;
}

/* ---------------------------------------------- qué pasó tras la decisión */
.transition {
  margin-top: 18px; padding: 18px 16px 12px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--faint); cursor: pointer;
  animation: transition-in .28s ease-out both;
}
.transition-years {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.transition-hint {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 241, 234, .32); text-align: center; margin-top: 12px;
}

.beat {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 12px; margin-bottom: 6px;
  background: rgba(244, 241, 234, .05);
  /* Aparecen escalonados: se lee como una secuencia, no como una lista. */
  animation: beat-in .34s cubic-bezier(.18, .9, .3, 1.2) both;
  animation-delay: calc(var(--i) * .16s + .12s);
}
.beat-icon { font-size: 22px; line-height: 1; width: 26px; text-align: center; }
.beat-text { font-size: 15px; font-weight: 600; }
.beat-good  { background: rgba(74, 222, 128, .12); color: #a7f3c0; }
.beat-up    { background: rgba(74, 222, 128, .16); color: #a7f3c0; }
.beat-trophy{ background: rgba(240, 192, 44, .14); color: #f7d874; }
.beat-bad   { background: rgba(232, 85, 47, .16); color: #ffb59e; }
.beat-down  { background: rgba(232, 85, 47, .16); color: #ffb59e; }
.beat-move  { background: rgba(244, 241, 234, .08); }
.beat-big .beat-text { font-size: 17px; font-weight: 800; }
.beat-big .beat-icon { font-size: 28px; }

@keyframes transition-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes beat-in {
  from { opacity: 0; transform: translateX(-14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.recap { margin-top: 16px; display: grid; gap: 6px; }
.recap h3 {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.recap-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--ink-2); border-radius: 12px; padding: 10px 12px; font-size: 14px;
}
.recap-year { font-weight: 800; color: var(--accent); }
.recap-club { font-weight: 600; }
.recap-stat { color: var(--muted); font-size: 13px; }
.tag {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--faint);
}
.tag-warn { background: rgba(232, 85, 47, .22); color: #ffb59e; }
.tag-gold { background: rgba(240, 192, 44, .18); color: var(--gold); }
.tag-good { background: rgba(74, 222, 128, .18); color: #86efac; }
.tag-bad { background: rgba(220, 38, 38, .28); color: #ffb4b4; font-weight: 800; }

.decision { margin-top: 22px; scroll-margin-top: 20px; }
/* El HUD es pegajoso, así que la tarjeta de decisión no puede quedar debajo. */
#career { scroll-margin-top: 8px; }
.decision-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.decision h2 { font-size: clamp(22px, 6vw, 28px); margin: 8px 0 10px; }
.decision-body { color: var(--muted); }

/* Foto del evento: banner panorámico, no pantalla completa — la decisión
   tiene que entrar sin scrollear. */
.decision-photo {
  width: 100%; aspect-ratio: 21 / 9; max-height: 190px; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 14px; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

/* Como Copero: dos opciones arriba, una abajo — la decisión entera entra en
   pantalla sin scrollear. Las tarjetas son verticales para caber en columna. */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.option {
  background: var(--ink-2); border: 1px solid var(--faint); border-radius: 14px;
  padding: 14px 12px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 8px; text-align: center;
  transition: transform .12s, border-color .15s, background .15s;
}
/* La opción impar que cierra la lista (la 3ª, o una sola) va a lo ancho. */
.option:nth-child(odd):last-child { grid-column: 1 / -1; }
.option:hover { border-color: rgba(244, 241, 234, .34); transform: translateY(-1px); }
.option:active { transform: scale(.99); }
.option-club { border-top: 4px solid var(--club, var(--accent)); }
.option-crest { width: 52px; height: 58px; object-fit: contain; flex: 0 0 auto; }
.option-text { display: grid; gap: 3px; min-width: 0; }
.option-text strong { font-size: 16px; }
.option-text span { color: var(--muted); font-size: 13px; }
.option-role {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--faint); border-radius: 999px; padding: 4px 9px; white-space: nowrap;
}

/* ------------------------------------------------------------- resultado */
.verdict { text-align: center; padding: 12px 0 24px; }
.verdict h2 {
  font-size: clamp(30px, 9vw, 46px); font-weight: 800; color: var(--accent);
  letter-spacing: -.02em;
}
.verdict p { color: var(--muted); margin-top: 10px; }
.result-name { font-size: 22px; font-weight: 800; margin-top: 18px; color: var(--paper); }
.result-meta { font-size: 14px; }

/* La crónica del final: lectura de diario, con lugar de privilegio. */
.story {
  position: relative;
  margin: 20px 0 8px;
  padding: 22px 24px 22px 30px;
  border-left: 3px solid var(--accent);
  background: var(--ink-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--paper);
  font-style: italic;
}
.story::before {
  content: "“";
  position: absolute; top: 2px; left: 8px;
  font-size: 44px; line-height: 1; color: var(--accent);
  font-style: normal; opacity: .85;
}

.result-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--ink-2); border-radius: var(--radius); padding: 16px 10px;
}
.result-stats > div { text-align: center; }
.result-stats strong { display: block; font-size: 22px; font-weight: 800; }
.result-stats span {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

.result-climb {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  align-items: baseline; margin-top: 12px; padding: 14px 18px;
  border-radius: var(--radius); background: rgba(240, 192, 44, .12);
  border: 1px solid rgba(240, 192, 44, .3);
}
.result-climb span {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.result-climb strong { font-size: 24px; font-weight: 800; color: var(--gold); }
.result-climb em { grid-column: 1 / -1; font-style: normal; font-size: 14px; color: var(--muted); }

/* El puntaje es EL número: héroe, centrado, enorme. */
.result-score {
  display: grid; place-items: center; gap: 2px;
  background: var(--accent); color: var(--ink); border-radius: var(--radius);
  padding: 18px 18px 22px; margin-top: 4px; font-weight: 800;
}
.result-score span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.result-score strong { font-size: 56px; line-height: 1; }

#result h3 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 28px 0 10px; font-weight: 700;
}

/* Carrera vertical estilo Copero: edad · club · OVR · PJ · GLS · AST */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tl-row, .tl-head {
  display: grid;
  grid-template-columns: 26px 34px minmax(0, 1fr) 34px 30px 30px 30px;
  gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.tl-row { background: var(--ink-2); }
.tl-head {
  padding: 2px 10px 6px; background: none;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.tl-head .tl-club-h { grid-column: 3 / 4; text-align: left; }
.tl-age { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.tl-crest { width: 30px; height: 30px; object-fit: contain; }
.tl-club { min-width: 0; display: flex; align-items: center; gap: 6px; }
.tl-name {
  font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-trophies { font-size: 12px; letter-spacing: -1px; flex: 0 0 auto; }
.tl-ovr {
  font-size: 13px; font-weight: 800; text-align: center;
  background: var(--faint); border-radius: 6px; padding: 3px 0; color: var(--gold);
}
.tl-stat { font-size: 13px; font-weight: 600; text-align: center; }
.tl-loan { opacity: .82; }
.tl-loan .tl-name { color: var(--muted); font-weight: 600; }
.tl-national {
  margin-top: 6px; background: rgba(116, 181, 223, .1);
  border: 1px solid rgba(116, 181, 223, .25);
}
.tl-national .tl-ovr { background: none; }

/* La vitrina: tarjetas con ícono, nombre y cuántas veces. */
.honours { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.honours li {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-2); border: 1px solid var(--faint);
  border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600;
}
.honour-icon { font-size: 22px; line-height: 1; }
.honour-name { flex: 1; min-width: 0; }
.honour-count { color: var(--gold); font-weight: 800; font-size: 16px; }
.honours-empty { justify-content: center; font-weight: 400; }
@media (min-width: 560px) {
  .honours { grid-template-columns: 1fr 1fr; }
  .honours-empty { grid-column: 1 / -1; }
}

/* ------------------------------------------------------ tabla de posiciones */
.board-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: 28px 0 10px;
}
.board-tabs { display: flex; gap: 6px; margin-left: auto; }
.board-tab {
  background: var(--ink-2); border: 1px solid var(--faint); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
}
.board-tab[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--ink);
}
.board-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.board-head h3 { margin: 0; }
.board-clear {
  background: none; border: 0; color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.board-clear:hover { color: var(--accent); }

.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  background: var(--ink-2); border-radius: 10px; padding: 9px 12px;
}
.board-rank {
  font-size: 15px; font-weight: 800; text-align: center; color: var(--muted);
}
.board-who { min-width: 0; display: grid; gap: 1px; }
.board-name {
  font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-meta {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-score {
  font-size: 17px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* La carrera que acabás de jugar, resaltada para encontrarte de un vistazo. */
.board-me {
  background: rgba(232, 85, 47, .16);
  border: 1px solid rgba(232, 85, 47, .5);
}
.board-me .board-rank, .board-me .board-name { color: var(--paper); }
.board-empty { color: var(--muted); font-size: 14px; padding: 10px 2px; }
.board-note {
  color: var(--muted); font-size: 12px; margin-top: 10px; line-height: 1.4;
}

.actions { display: grid; gap: 10px; margin-top: 28px; }
.feedback { text-align: center; color: var(--gold); font-weight: 700; font-size: 14px; }

.share-canvas { display: none; }

.disclaimer {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--faint);
  color: var(--muted); font-size: 12px; text-align: center;
}

/* El cafecito: azul de cafecito.app, tacita y gracias. */
.cafecito {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto 18px; padding: 12px 20px;
  background: #29abe0; color: #fff; text-decoration: none;
  border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(41, 171, 224, .35);
  transition: transform .15s, box-shadow .15s;
  max-width: 100%;
}
.cafecito:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(41, 171, 224, .5);
}
.cafecito svg { flex-shrink: 0; }
.cafecito span { text-align: left; line-height: 1.3; }

.error { text-align: center; padding: 40px 0; color: var(--accent); }

/* ------------------------------------------------------------ pantallas grandes */
/* ------------------------------------------------------------- celulares */
@media (max-width: 560px) {
  /* En un teléfono el HUD pegajoso comía media pantalla y tapaba la
     decisión. Estático y compacto: el jugador scrollea, como en Copero. */
  .hud { position: static; max-height: none; padding: 12px; gap: 10px; }
  .hud-number { font-size: 24px; min-width: 38px; }
  .hud-name { font-size: 15px; }
  .hud-club-name { font-size: 15px; }
  .hud-stats { gap: 6px; }
  .hud-stats dd { font-size: 15px; }
  .progress { height: 22px; }

  .jersey { width: 156px; height: 172px; }
  .jersey-number { font-size: 76px; }

  .decision h2 { font-size: 23px; }
  /* En el celular las opciones se agrandan, no se achican: son el juego. */
  .option { padding: 16px 14px; gap: 12px; }
  .option-crest { width: 50px; height: 56px; }
  .option-text strong { font-size: 17px; }
  .option-role { font-size: 10px; padding: 3px 7px; }

  .tl-row, .tl-head {
    grid-template-columns: 22px 28px minmax(0, 1fr) 30px 28px 28px 28px;
    gap: 5px; padding: 7px 8px;
  }
  .tl-crest { width: 24px; height: 24px; }
  .tl-name { font-size: 13px; }
  .tl-stat, .tl-age { font-size: 12px; }
  .tl-ovr { font-size: 12px; }
  .tl-trophies { display: none; }  /* en 360px no entran; están en la vitrina */

  .result-stats strong { font-size: 19px; }
  .verdict h2 { font-size: 30px; }
}

@media (min-width: 640px) {
  .setup-grid { grid-template-columns: 200px 1fr; align-items: start; gap: 28px; }
  .preview { position: sticky; top: 20px; }
  .hud-stats { grid-template-columns: repeat(6, 1fr); }
}

/* ------------------------------------------------- escritorio: dos columnas */
@media (min-width: 1000px) {
  #app { max-width: 1060px; }
  #result { max-width: 640px; margin-inline: auto; }
  /* La inscripción respira: camiseta y cancha grandes a la izquierda,
     el formulario a la derecha. Menos scroll, más presencia. */
  #setup { max-width: 1020px; margin-inline: auto; }
  .setup-grid { grid-template-columns: 400px minmax(0, 1fr); gap: 48px; }
  .jersey { width: 250px; height: 276px; }
  .jersey-number { font-size: 120px; }
  .jersey-name { font-size: 16px; top: 24%; }
  .preview-tag { font-size: 17px; margin-top: 10px; }
  #career {
    display: grid; grid-template-columns: minmax(0, 1fr) 386px;
    gap: 28px; align-items: start;
  }
  /* En la columna lateral el nombre del club es lo que importa: las columnas
     de números se achican para que no se corte a la mitad. */
  .career-side .tl-row, .career-side .tl-head {
    grid-template-columns: 22px 26px minmax(0, 1fr) 30px 28px 30px 32px;
    gap: 6px; padding: 7px 10px;
  }
  .career-side .tl-crest { width: 24px; height: 24px; }
  .career-side .tl-name { font-size: 13px; }
  .career-side .tl-stat, .career-side .tl-age, .career-side .tl-ovr { font-size: 12px; }
  .career-side { margin-top: 0; position: sticky; top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { transition: none !important; animation: none !important; }
}