/* ===== Fantasy Combine ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0e1526;
  --bg2: #16203a;
  --card: #1d2a4a;
  --card2: #24345c;
  --line: #33456f;
  --text: #f2f5fb;
  --muted: #93a3c4;
  --accent: #2ecc71;
  --accent2: #f1c40f;
  --danger: #e74c3c;
  --field: #1d7a3e;
  --field2: #1a6e38;
  /* Ancho que aparta la barra fija de idioma + silencio en la esquina superior
     derecha. Lo mide la app al arrancar (medirBarra) para que aguante cualquier
     idioma o tamaño de letra. */
  --barra: 152px;
}

html, body { height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 50% -100px, #223258 0%, var(--bg) 60%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

.screen { display: none; min-height: 100vh; padding: 22px 20px 84px; }
.screen.active { display: block; }

/* Las pantallas de evento y tabla caben en la ventana, sin scroll */
#screen-event.active, #screen-standings.active {
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; padding-bottom: 20px;
}
/* La nota al pie no debe quedar debajo del botón flotante */
#screen-standings.active { padding-bottom: 20px; }

/* Los botones de navegación viven arriba a la derecha, siempre a la vista */
/* El botón de avance vive en su propia columna del encabezado: por construcción
   no puede encimarse con el título. */
#btn-event-continue, #btn-standings-continue {
  grid-column: 3; justify-self: end; margin-top: 0;
  /* Se recorre a la izquierda lo que mide la barra de idioma/silencio, que vive
     fija en esa misma esquina. Como el encabezado es una rejilla 1fr auto 1fr,
     mover el botón dentro de su columna NO descentra el título. */
  margin-right: var(--barra);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1rem; padding: 11px 20px;
}
.hidden { display: none !important; }
.center { text-align: center; }
.center-text { text-align: center; }

h1, h2, h3 { font-weight: 800; letter-spacing: 0.3px; }
.screen-title { text-align: center; font-size: 2rem; margin-bottom: 24px; }

button {
  font: inherit; font-weight: 700; color: var(--text);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 18px; cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
button:hover { background: #2c3f6e; }
button:active { transform: scale(0.97); }
button.big {
  font-size: 1.15rem; padding: 14px 34px; border-radius: 14px;
  background: linear-gradient(180deg, #2ecc71, #27ae60);
  border: none; color: #08351b; margin-top: 22px;
}
button.big:hover { filter: brightness(1.08); }
button.ghost { background: transparent; }
button.small { padding: 6px 12px; font-size: .85rem; }

/* ===== Setup ===== */
/* ===== Marca =====
   Fija arriba a la izquierda en todas las pantallas, con la firma alineada a la
   derecha debajo del nombre. En la portada se oculta porque ahí va el logo grande. */
#brand {
  position: fixed; top: 14px; left: 22px; z-index: 26;
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1; cursor: pointer; /* clicable: vuelve al inicio */
  transition: transform .15s ease, opacity .15s ease;
  /* Es un <a> real (ver index.html); sin esto heredaría el azul/subrayado
     por defecto del navegador, que no pega con el resto de la marca. */
  color: inherit; text-decoration: none;
}
#brand:hover, #brand:focus-visible { transform: scale(1.04); opacity: .88; }
body.on-setup #brand { display: none; }

/* Botón de silencio: verde, junto al switch de idioma. Hay uno igual en la
   premiación (la otra pantalla con música), y `paintMute()` los mantiene a la par. */
.btn-mute {
  width: 38px; height: 38px; padding: 0;
  display: inline-grid; place-items: center; vertical-align: middle;
  border-radius: 10px; font-size: 1.05rem; line-height: 1;
  background: var(--accent); color: #08351b; border: 1px solid var(--accent);
  transition: transform .18s ease, filter .18s ease;
}
.btn-mute:hover, .btn-mute:focus-visible { transform: scale(1.06); filter: brightness(1.08); }
/* Silenciada: se apaga para que se vea de un vistazo que no va a sonar */
.btn-mute.muted { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-mute .ico { pointer-events: none; }
.brand-name { font-size: 1.02rem; font-weight: 900; letter-spacing: .2px; color: var(--text); line-height: 1; }
/* Pegada al nombre, bien condensada */
.brand-by {
  font-size: .62rem; font-weight: 700; color: var(--muted);
  letter-spacing: 0; line-height: 1; margin-top: 1px;
}
/* En la portada, la firma va debajo del logo y alineada a su borde derecho */
.brand-hero {
  display: inline-flex; flex-direction: column; align-items: flex-end; cursor: pointer;
  color: inherit; text-decoration: none; /* es un <a>: ver nota en #brand arriba */
}
.brand-hero .brand-by { font-size: .8rem; margin-top: -4px; }

.setup-wrap { max-width: 760px; margin: 0 auto; text-align: center; }
/* Idioma y silencio: fijos arriba a la derecha en TODAS las pantallas. Los
   botones de avance llevan un margen para no encimarse (ver --barra abajo). */
.lang-toggle {
  position: fixed; top: 12px; right: 20px; z-index: 28;
  text-align: right; line-height: 1;
}
/* Pastilla de idiomas (ES · EN · PT): el primero redondea a la izquierda, el del
   medio queda recto, y el último —el que va justo antes del botón de silencio— a la
   derecha. Así aguanta 2, 3 o más idiomas sin tocar el CSS. */
.lang-toggle [data-lang] { padding: 6px 14px; border-radius: 0; }
.lang-toggle [data-lang] + [data-lang] { border-left: none; }
.lang-toggle [data-lang]:first-child { border-radius: 8px 0 0 8px; }
.lang-toggle [data-lang]:has(+ .btn-mute) { border-radius: 0 8px 8px 0; }
.lang-toggle [data-lang].active { background: var(--accent); color: #08351b; }
/* El de silencio no es parte de la pastilla ES|EN: se despega y recupera su borde */
.lang-toggle .btn-mute { border-radius: 10px; border-left: 1px solid var(--accent); margin-left: 10px; }
.lang-toggle .btn-mute.muted { border-left-color: var(--line); }

/* Slider de volumen: compacto, junto al botón de silencio */
.vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 72px; height: 6px; margin-left: 10px; vertical-align: middle;
  background: var(--line); border-radius: 999px; outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid #08351b; cursor: pointer;
}
.vol-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid #08351b; cursor: pointer;
}
.vol-slider:focus-visible { box-shadow: 0 0 0 3px rgba(46, 204, 113, .3); }
.logo { font-size: 2.8rem; margin: 10px 0 0; line-height: 1; }
.tagline { color: var(--muted); margin: 10px 0 26px; }
/* Footer de la portada */
.made-by { margin-top: 30px; text-align: center; color: var(--muted); font-size: .85rem; font-weight: 600; }

/* ===== Banner de patrocinador (La Cueva del Fan) =====
   Mismo archivo en dos lugares: portada (debajo del footer, sin restricción de
   alto porque esa pantalla ya scrollea normal) y premiación (entre los botones y
   la lista, donde SÍ hay que cuidar el alto: esa pantalla mide cuánto espacio le
   queda a la lista de equipos y compacta las filas para que quepan hasta 20 sin
   scroll — ver runCeremony() en app.js. `flex: none` es lo que le dice a esa
   cuenta que aquí hay una altura fija que restar, y measure ocurre en vivo tras
   pintarse, así que ya lo tiene en cuenta solo, sin tocar el JS. */
.sponsor-banner {
  display: block; width: 100%; height: auto;
  max-width: 480px; margin: 22px auto 0;
  border-radius: 14px;
}
.sponsor-banner.in-ceremony {
  flex: none; max-width: 300px; margin: 0 auto 8px;
}

.setup-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; text-align: left;
}
.setup-grid label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--muted); font-weight: 600; }
select, input[type=text], textarea {
  font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; width: 100%;
}
.hint { color: var(--muted); font-size: .82rem; margin-top: 8px; }

.names-head { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 12px; gap: 10px; }
.names-head h2 { font-size: 1.15rem; }
.names-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#btn-shuffle { background: var(--card2); border-color: var(--accent2); color: var(--accent2); }
#btn-shuffle:hover { background: var(--accent2); color: #3d3000; }
#btn-shuffle:disabled { opacity: .6; cursor: default; }
/* Destello al terminar de revolver, para que se vea que cambiaron de lugar */
.name-row.shuffled input {
  animation: shuffleFlash .7s ease;
}
@keyframes shuffleFlash {
  0% { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(241,196,15,.28); }
  100% { border-color: var(--line); box-shadow: none; }
}
#paste-panel { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; text-align: left; }
.name-row { display: flex; align-items: center; gap: 8px; }
.name-row input { flex: 1; }

/* Chip de equipo */
.chip {
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
/* Versión con la cara del jugador dentro del circulito */
.chip.face { overflow: hidden; padding: 0; }
.chip.face img {
  width: 100%; height: 100%;
  object-fit: contain; image-rendering: pixelated; display: block;
}

/* ===== Intro ===== */
#intro-grid {
  max-width: 1100px; width: 100%; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--intromin, 200px), 1fr));
  gap: 12px; align-content: center;
}
.intro-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(16px);
  animation: cardIn .45s ease forwards;
}
.intro-card b { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes cardIn { to { opacity: 1; transform: none; } }
/* La presentación también cabe completa en la pantalla */
#screen-intro { text-align: center; }
#screen-intro.active {
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; padding-bottom: 90px;
}
#screen-intro .screen-title { flex: none; }
#screen-intro #intro-grid { flex: 1; min-height: 0; overflow: hidden; }
/* Va centrado arriba, sobre los personajes, en el flujo normal */
#btn-intro-go { flex: none; align-self: center; margin: 0 auto 14px; }

/* ===== Event ===== */
/* Rejilla de 3 columnas: el título va centrado y el botón a la derecha, cada uno
   en su carril, así que nunca se pueden encimar. */
.event-head {
  max-width: 1180px; width: 100%; margin: 0 auto 14px; flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.head-mid { grid-column: 2; display: flex; align-items: baseline; gap: 14px; justify-content: center; min-width: 0; }
/* Cuando el título y el botón no caben en la misma fila (pasa con los textos
   largos: "Siguiente prueba: Carrera de 40 yardas"), el encabezado se parte en
   dos: título arriba, botón abajo. Lo decide `acomodarEncabezado()` midiendo, no
   un punto de quiebre fijo, porque el largo cambia con el idioma y con la prueba
   que sigue. Así el traslape es imposible en vez de depender de que quepa. */
/* `justify-items: center` es importante para algo más que la estética: hace que
   los hijos midan su CONTENIDO en vez de estirarse a toda la columna, y así
   `acomodarEncabezado()` puede medir de verdad cuánto ocupan. */
.event-head.apilado { grid-template-columns: 1fr; gap: 6px; justify-items: center; }
.event-head.apilado .head-mid { grid-column: 1; justify-self: center; }
.event-head.apilado #btn-event-continue,
.event-head.apilado #btn-standings-continue {
  grid-column: 1; justify-self: center; margin-right: 0;
}
.head-mid h2 { font-size: 1.7rem; margin: 0; }
.head-mid .screen-title { margin-bottom: 0; }
.event-head h2 { font-size: 1.7rem; }
.badge {
  background: var(--card2); border: 1px solid var(--line);
  padding: 4px 12px; border-radius: 999px; font-size: .8rem; color: var(--muted); font-weight: 700;
}
.event-body {
  max-width: 1180px; width: 100%; margin: 0 auto; display: flex; gap: 18px;
  align-items: stretch; flex: 1; min-height: 0;
}
/* La carrera va sin panel lateral y a todo lo ancho, y le cede al campo el
   espacio que ocupan el encabezado y el comentarista. */
.event-body.wide { max-width: none; }
#screen-event:has(.event-body.wide) .event-head { margin-bottom: 6px; }
#screen-event:has(.event-body.wide) .event-head h2 { font-size: 1.35rem; }
#screen-event:has(.event-body.wide) #commentary { height: 52px; margin-top: 6px; }
/* Arranca arriba para que el escenario quede alineado con el marcador lateral */
#stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.event-body.wide #stage { justify-content: stretch; }
#event-side {
  width: 264px; min-width: 264px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px;
  transition: border-color .25s ease, box-shadow .25s ease;
  max-height: 100%; overflow-y: auto; align-self: flex-start;
}
#side-list.no-total .tot { display: none; }
#event-side h3 { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
#side-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
#side-list li {
  display: flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600;
  padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.03);
}
#side-list li.pending { opacity: .62; }
#side-list li.pending .nm::after { content: " •"; color: var(--accent2); }
#side-list .chip { width: 22px; height: 22px; min-width: 22px; font-size: .58rem; }
#side-list .pos { color: var(--muted); width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
#side-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
#side-list .mv { font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#side-list .mv.up { color: var(--accent); }
#side-list .mv.down { color: var(--danger); }
#side-list .val { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
#side-list .tot {
  color: var(--accent2); font-weight: 800; font-variant-numeric: tabular-nums;
  width: 26px; text-align: right;
}
#side-note { margin-top: 10px; font-size: .72rem; }

/* Comentarista */
#commentary {
  max-width: 1180px; width: 100%; margin: 12px auto 0;
  height: 86px; overflow: hidden;
  display: flex; flex-direction: column-reverse; gap: 2px;
}
#commentary p {
  font-size: .95rem; color: var(--muted); padding: 2px 10px;
  border-left: 3px solid transparent;
}
#commentary p:first-child {
  color: var(--text); font-weight: 700; font-size: 1.05rem;
  border-left-color: var(--accent2);
  animation: comIn .3s ease;
}
@keyframes comIn { from { opacity: 0; transform: translateX(-8px); } }

/* ===== Botón de play =====
   Flota abajo al centro, sin empujar el contenido: la prueba espera a que la
   liga ubique a su equipo. */
/* Arriba va en el flujo normal (así nunca se encima con el título ni con el
   botón de continuar); en la carrera va flotando al centro de la pantalla. */
#play-bar.play-top {
  flex: none; display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
#play-bar.play-top #btn-play { margin-top: 0; padding: 10px 26px; font-size: 1.05rem; }
#play-bar.play-center {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 28;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(6,10,20,.72); padding: 22px 34px; border-radius: 18px;
  border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#play-bar.play-center #btn-play { margin-top: 0; }
#btn-play { margin-top: 0; animation: playPulse 2s ease-in-out infinite; }
#play-hint { font-size: .82rem; color: var(--muted); font-weight: 600; text-align: center; }
/* Aviso de lo que se juega en las 40 yardas. Va arriba del botón (es el primer hijo
   de la columna) para leerse ANTES de darle play, y con el borde amarillo de la nota
   de desempate para que se lean como la misma idea: la que anuncia la regla y la que
   luego la aplica en la tabla. */
#play-stakes {
  max-width: 380px; text-align: center; font-size: .88rem; line-height: 1.45;
  font-weight: 600; color: var(--text);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-left: 3px solid var(--accent2); border-radius: 10px; padding: 10px 14px;
  margin-bottom: 4px;
}
@media (max-width: 700px) {
  /* La tarjeta de play trae 34px de padding lateral; en 375px eso dejaba el aviso
     en una columna de ~240px y el texto salía en 9 renglones. Se afloja la tarjeta
     y se le da más ancho al aviso. */
  #play-bar.play-center { padding: 18px 16px; max-width: 94vw; }
  #play-stakes { max-width: 100%; font-size: .8rem; padding: 8px 11px; }
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,.45); }
  50% { box-shadow: 0 0 0 14px rgba(46,204,113,0); }
}

/* ---- Sprites pixel art ---- */
.sprite { line-height: 0; }
.sprite canvas { image-rendering: pixelated; }

/* Poses del saltador (arte de un solo cuadro): agacharse y estirarse en el aire */
.vert-hop { line-height: 0; }
.vert-jumper-zone .sprite { transition: transform .16s ease; transform-origin: bottom center; }
.vert-jumper-zone .sprite.crouch { transform: scaleY(.82) scaleX(1.09); }
.vert-jumper-zone .sprite.air { transform: scaleY(1.07) scaleX(.95); }

/* ---- Bench press ---- */
.bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cardmin, 170px), 1fr));
  gap: var(--cardgap, 10px);
}
.bench-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--cardpad, 10px); text-align: center; position: relative;
  transition: opacity .4s ease, filter .4s ease;
}
.bench-card .bname {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: 700; font-size: .9rem; margin-bottom: 4px;
}
.bench-card .bname .chip { width: 20px; height: 20px; min-width: 20px; font-size: .52rem; }
.bench-card .bname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-card .sprite { display: flex; justify-content: center; margin: 10px 0 8px; }
.bench-card .reps { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bench-card .reps b { font-size: 1.6rem; font-weight: 900; }
.bench-card .rlabel { color: var(--muted); font-size: .75rem; }
.bench-card.pump .reps b { display: inline-block; animation: pump .25s ease; }
@keyframes pump { 40% { transform: scale(1.25); color: var(--accent); } }
.bench-card.failed { opacity: .45; filter: grayscale(.9); }
.bench-card.failed::after { content: "✖"; position: absolute; top: 8px; left: 10px; color: var(--danger); font-weight: 900; }
.bench-card.winner { border-color: var(--accent2); box-shadow: 0 0 22px rgba(241,196,15,.35); }
.bench-card .rankbadge {
  position: absolute; top: 8px; right: 10px;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; font-size: .78rem; font-weight: 800;
}
.bench-card.winner .rankbadge { background: var(--accent2); color: #3d3000; border: none; }
.bench-card.shake { animation: shake .45s ease; }
@keyframes shake { 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }

/* ---- Vertical jump ---- */
/* El escenario es la foto del estadio: conserva su proporción 16:9 para que las
   marcas del poste caigan siempre en el mismo lugar de la imagen. */
.vert-stage {
  position: relative; overflow: hidden;
  /* El ancho es el menor entre lo que cabe a lo ancho y lo que permite el alto
     disponible; la altura sale sola del 16:9, así la imagen nunca se deforma. */
  width: min(100%, calc((100dvh - 200px) * 16 / 9));
  aspect-ratio: 1280 / 720;
  align-self: center; flex: none; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 16px;
  background: #0b1020 url("Assets/stadium-background-jump.png") center/100% 100% no-repeat;
  image-rendering: pixelated;
}
/* El encabezado flota sobre el cielo del estadio, arriba del poste */
.vert-head {
  position: absolute; top: 2%; left: 0; right: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px;
  text-shadow: 0 2px 8px rgba(6,10,20,.95), 0 0 18px rgba(6,10,20,.8);
  pointer-events: none;
}
/* Quién salta ahora: cara + nombre grande, imposible de confundir */
.vert-name {
  font-size: clamp(1.1rem, 2.4vh, 1.6rem); font-weight: 900; line-height: 1.15;
  display: flex; align-items: center; gap: 10px; color: #fff;
}
.vert-name .chip { width: 40px; height: 40px; min-width: 40px; }
/* Entrada del nombre del que va a saltar: dura 1.5 s para alcanzar a leerlo */
.vert-name.reveal { animation: nameReveal 1.5s cubic-bezier(.2,.9,.3,1); }
@keyframes nameReveal {
  0% { transform: scale(.55); opacity: 0; }
  22% { transform: scale(1.14); opacity: 1; color: var(--accent2); }
  38% { transform: scale(1); color: var(--accent2); }
  50% { text-shadow: 0 0 26px rgba(241,196,15,.95); color: var(--accent2); }
  72% { text-shadow: 0 0 26px rgba(241,196,15,.95); color: var(--accent2); }
  100% { transform: scale(1); text-shadow: none; color: var(--text); }
}
.vert-next { font-size: .8rem; font-weight: 700; color: #b9c6de; letter-spacing: .3px; }
.vert-measure {
  font-size: clamp(1.5rem, 3.4vh, 2.1rem); font-weight: 900; line-height: 1.15;
  color: var(--accent2); font-variant-numeric: tabular-nums; min-height: 1.2em;
}
/* El saltador se coloca por JS pegado al poste de la imagen */
.vert-jumper-zone {
  position: absolute; z-index: 3; display: flex; align-items: flex-end;
}
.vert-jumper-zone .sprite.mirror { transform: scaleX(-1); }


/* Marcas de medición sobre el poste que ya trae el fondo */
.vert-marks { position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; }
.vert-tick {
  position: absolute; left: 0; transform: translateY(50%);
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.vert-tick i {
  display: block; width: 20px; height: 3px; background: #cfd8ea;
  box-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.vert-tick.major i { width: 30px; background: var(--accent2); }
.vert-tick span {
  font-size: .72rem; color: #f2f5fb; font-weight: 800;
  text-shadow: 0 1px 4px rgba(6,10,20,.95);
}
.vert-tick.major span { color: var(--accent2); }
.vert-flag {
  position: absolute; left: 62px; transform: translateY(50%);
  font-size: .62rem; font-weight: 800; padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.85); box-shadow: 0 2px 8px rgba(0,0,0,.6);
  animation: comIn .3s ease; white-space: nowrap;
}

/* ---- 40-yard dash ---- */
.dash-field {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 2px solid #0c4d24;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent calc(12.5% - 1px),
      rgba(255,255,255,.75) calc(12.5% - 1px), rgba(255,255,255,.75) 12.5%),
    repeating-linear-gradient(90deg, var(--field) 0, var(--field) 12.5%, var(--field2) 12.5%, var(--field2) 25%);
  background-origin: content-box;
  padding-right: 15%; /* zona de anotación: cabe el monito y su lugar de llegada */
  /* Franja de arriba para la numeración: así los carriles empiezan por debajo y
     los números nunca quedan tapados por las placas con el nombre del equipo.
     El degradado sigue anclado al content-box, así que las rayas de yarda no se
     recorren, nomás se pintan también en la franja. */
  padding-top: 28px; /* alcanza para el número más grande (1.1rem con .big) */
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
/* Zona de anotación. El logo va girado 90° en sentido de las manecillas, como los
   nombres pintados en las canchas. Su tamaño lo calcula runDash() midiendo el alto
   de la cancha, porque al girarlo su ANCHO natural es lo que ocupa a lo alto. */
.dash-endzone {
  position: absolute; top: 0; right: 0; bottom: 0; width: 15%; z-index: 1;
  background: #b5442c;
  border-left: 3px solid #fff;
  overflow: hidden;
}
/* Absoluto y NO como hijo de un grid: si su caja la limita el contenedor, el texto
   se desborda antes de girar y la mitad se pierde al recortar. Así conserva su
   ancho natural y el giro queda centrado. */
.ez-logo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  display: flex; flex-direction: column; align-items: flex-end;
  white-space: nowrap; line-height: 1;
  /* Tenue a propósito: es pintura en el pasto. Al final los monitos se forman
     encima y el logo tiene que quedar debajo, no pelearse con ellos. */
  color: rgba(255, 255, 255, .55);
}
.ez-logo b { font-weight: 900; letter-spacing: .5px; }
.ez-logo span { font-weight: 700; font-size: .62em; margin-top: .15em; }
/* Los carriles se reparten a partes iguales todo el alto de la cancha */
.dash-lane { position: relative; flex: 1; min-height: 0; border-bottom: 1px dashed rgba(255,255,255,.14); z-index: 2; }
.dash-lane:last-child { border-bottom: none; }
.dash-runner {
  position: absolute; top: 3px; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  /* Espacio para la placa del nombre, que va ABSOLUTA. Antes el nombre estaba en
     el flujo y, al ser más ancho que el monito, ensanchaba la caja; como el monito
     va centrado, un nombre largo lo empujaba a la derecha (arrancaba más adelante y
     no se alineaban en la meta). Sacándolo del flujo, la caja mide lo que el monito
     y su posición ya no depende del largo del nombre. */
  padding-top: 18px;
  will-change: transform; z-index: 3;
}
/* El nombre va sobre una placa oscura para que se lea sobre el pasto. Absoluto y
   centrado sobre el monito, sin contar para el ancho de la caja. */
.dash-runner .rname {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-size: .74rem; font-weight: 800; color: #fff;
  background: rgba(6,10,20,.55); padding: 0 5px; border-radius: 5px;
  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  transition: background .18s ease, color .18s ease;
}
/* Con pocos equipos los monitos son grandes: el texto crece con ellos */
.dash-field.big .dash-runner { padding-top: 24px; }
.dash-field.big .rname { font-size: 1.02rem; max-width: 210px; padding: 1px 7px; }
.dash-field.big .rplace { font-size: 1.7rem; }
.dash-field.big .rplace.gold { font-size: 2rem; }
.dash-field.big .dash-yards span { font-size: 1.1rem; }
.dash-runner.done .rname { color: var(--accent2); }
/* Lugar de llegada, al lado del monito ya formado en la zona de anotación.
   Va del lado IZQUIERDO: los monitos se estacionan hasta el fondo de la zona, así
   que del lado derecho se salía del campo y `overflow: hidden` lo cortaba (medido:
   hasta 45 px afuera, y con nombres largos el número desaparecía completo). */
.dash-runner .rplace {
  position: absolute; right: 100%; top: 50%; margin-right: 8px;
  transform: translateY(-40%); white-space: nowrap;
  font-size: 1.15rem; font-weight: 900; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.9);
}
.dash-runner.done .rplace { animation: comIn .35s ease; }
.dash-runner .rplace.gold { color: var(--accent2); font-size: 1.35rem; }
.dash-yards {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  color: rgba(255,255,255,.5); font-weight: 800; font-size: .8rem;
}
.dash-yards span { position: absolute; top: 3px; transform: translateX(-50%); }
/* La de la salida está pegada al borde: se recarga hacia dentro para no cortarse */
.dash-yards span.salida { transform: none; margin-left: 4px; }
.dash-count {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  font-size: 4rem; font-weight: 900; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.6);
  background: rgba(0,0,0,.25);
}

/* ===== Standings ===== */
.table-wrap { max-width: 760px; width: 100%; margin: 0 auto; overflow-x: auto; flex: 1; min-height: 0; }
#standings-table { width: 100%; border-collapse: collapse; }
/* Con muchos equipos las filas se compactan para no salirse de la pantalla */
#standings-table th, #standings-table td {
  padding: clamp(3px, calc((100dvh - 300px) / (var(--rows, 10) * 6)), 10px) 12px;
  text-align: left;
}
#standings-table .teamcell { white-space: nowrap; }
/* Con muchas filas: todo en una línea y más chico, para caber en la pantalla */
#standings-table.compact th, #standings-table.compact td { padding: 2px 8px; font-size: .84rem; }
#standings-table.compact td.evcell b { display: inline; font-size: .88rem; }
#standings-table.compact td.evcell small { display: inline; margin-left: 5px; }
#standings-table.compact .chip { width: 20px; height: 20px; min-width: 20px; font-size: .5rem; }
#standings-table.compact .teamcell { gap: 7px; }
#standings-table .mv { margin-left: 8px; font-size: .8rem; font-weight: 900; }
#standings-table .mv.up { color: var(--accent); }
#standings-table .mv.down { color: var(--danger); }
#standings-table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid var(--line); }
#standings-table td { border-bottom: 1px solid var(--line); font-weight: 600; }
#standings-table td.num, #standings-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
#standings-table td.evcell b { display: block; font-size: 1.05rem; font-weight: 800; }
#standings-table td.evcell small { display: block; color: var(--muted); font-size: .72rem; font-weight: 600; margin-top: 1px; }
#standings-table .total { color: var(--accent2); font-weight: 800; }
#standings-table .teamcell { display: flex; align-items: center; gap: 10px; }
#standings-table .chip { width: 26px; height: 26px; min-width: 26px; font-size: .62rem; }
#standings-note { max-width: 700px; margin: 12px auto 0; }

/* ===== Ceremony ===== */
/* La ceremonia cabe completa en pantalla, hasta con 20 equipos */
#screen-ceremony.active {
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; padding-bottom: 16px;
}
#screen-ceremony .screen-title { flex: none; margin-bottom: 6px; }
/* Narración del momento de la verdad */
#ceremony-sub {
  flex: none; text-align: center; min-height: 26px; margin-bottom: 8px;
  font-size: 1.05rem; font-weight: 800; color: var(--accent2);
}
#ceremony-sub.beat { animation: subBeat .6s ease; }
@keyframes subBeat {
  0% { transform: scale(.85); opacity: 0; }
  55% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#draft-list {
  max-width: 640px; width: 100%; margin: 0 auto; list-style: none;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--drgap, 10px); flex: 1; min-height: 0;
  /* Respaldo, no el plan principal: el JS ya compacta las filas para que quepan
     todas sin scroll. Pero si algo empuja el piso (como el banner de arriba, o a
     futuro nombres de equipo que envuelvan más líneas), esto evita que el último
     pick quede cortado e invisible — se puede scrollear en vez de perderse. En el
     caso normal no se nota: el scrollbar solo aparece si de verdad hace falta. */
  overflow-y: auto;
}
.draft-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--drpad, 12px) 18px; opacity: 0; transform: translateY(14px);
  animation: cardIn .4s ease forwards;
}
.draft-row .picknum { font-size: var(--drfont, 1.1rem); font-weight: 900; color: var(--muted); width: 74px; }
.draft-row b { font-size: var(--drfont, 1.1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-row .chip { width: var(--drchip, 34px); height: var(--drchip, 34px); min-width: var(--drchip, 34px); }
/* Marca de desempate: solo en filas que comparten total con otro equipo. Deja ver
   POR QUÉ una va arriba de otra (su lugar en las 40 yardas), que si no es
   invisible y la liga supone que el orden es alfabético o de captura.
   El tamaño se ata a `--drfont` (la misma variable que el nombre y el pick), NO a
   `em`: con `em` el badge quedaba relativo al font-size heredado de la fila, que en
   modo compacto ya no baja junto con `--drfont`. Resultado medido con 20 equipos: el
   badge crecía la fila de 23px a 24px y empujaba la lista 5px más abajo. Con
   `calc(var(--drfont) * .72)` y `line-height: 1.25` el alto del badge queda siempre
   por debajo del de la línea de texto, así que no cambia el alto de la fila. */
.draft-row .tiebreak {
  flex: none; /* el espacio ya lo da el `gap` de la fila */
  font-size: calc(var(--drfont, 1.1rem) * .72); font-weight: 700; color: var(--muted);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 7px; line-height: 1.25;
  white-space: nowrap; cursor: help;
}
.draft-row.first .tiebreak, .draft-row.podium .tiebreak { border-color: rgba(241, 196, 15, .35); }
.draft-row .tpts { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Entrada de cada pick: llega desde la izquierda con un pequeño rebote */
.draft-row.reveal { animation: pickIn .55s cubic-bezier(.2,.9,.3,1.15) forwards; }
@keyframes pickIn {
  0% { opacity: 0; transform: translateX(-38px) scale(.94); }
  60% { opacity: 1; transform: translateX(4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
/* Los tres primeros picks se destacan */
.draft-row.podium { border-color: rgba(241,196,15,.45); }
.draft-row.first {
  border-color: var(--accent2);
  background: linear-gradient(180deg, #2c3a1e, var(--card));
  animation: pickIn .55s cubic-bezier(.2,.9,.3,1.15) forwards, firstGlow 2.4s ease-in-out .55s infinite;
}
.draft-row.first .picknum, .draft-row.first b { color: var(--accent2); font-size: 1.25rem; }
.draft-row.first .chip { box-shadow: 0 0 14px rgba(241,196,15,.8); }
@keyframes firstGlow {
  0%, 100% { box-shadow: 0 0 22px rgba(241,196,15,.28); }
  50% { box-shadow: 0 0 42px rgba(241,196,15,.6); }
}
.cere-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; flex: none; }
/* El botón de suscripción resalta en dorado: es el llamado a la acción, distinto
   de los verdes del flujo (copiar, repetir, nuevo). */
#btn-subscribe {
  background: var(--accent2); border-color: var(--accent2); color: #3d3000; font-weight: 800;
}
#btn-subscribe:hover { background: #f5d33f; filter: brightness(1.03); }

/* ===== Aviso de cookies =====
   Franja discreta abajo, por encima de todo lo demás excepto el modal de
   suscripción (que usa z-index 60): si algún día coinciden los dos en pantalla, el
   banner de cookies debe quedar visible sobre el modal, así que va más alto (65). */
#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  padding: 14px 18px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 20px;
  animation: cookieIn .3s ease;
}
@keyframes cookieIn { from { transform: translateY(100%); } }
#cookie-banner p {
  margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.4;
  max-width: 560px; flex: 1; min-width: 240px;
}
.cookie-actions { display: flex; gap: 10px; flex: none; }
#btn-cookie-accept { background: var(--accent); border-color: var(--accent); color: #08351b; font-weight: 800; }
#btn-cookie-accept:hover { filter: brightness(1.05); }

/* ===== Modal de suscripción ===== */
#subscribe-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sub-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 16, .72); }
.sub-card {
  position: relative; z-index: 1;
  width: min(94vw, 560px); max-height: 90vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: subCardIn .28s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes subCardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.sub-close {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; padding: 0; line-height: 1;
  display: grid; place-items: center; border-radius: 9px;
  background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 1rem;
}
.sub-close:hover { background: var(--card2); color: var(--text); }
.sub-eyebrow { color: var(--accent2); font-weight: 800; font-size: .92rem; margin: 0 0 4px; }
.sub-card h3 { font-size: 1.45rem; margin: 0 0 8px; }
.sub-body { color: var(--muted); font-size: .95rem; line-height: 1.5; margin: 0 auto 18px; max-width: 440px; }
/* Fondo claro por si el formulario tarda en montar: no un hueco negro */
.sub-embed { min-height: 200px; border-radius: 12px; overflow: hidden; background: var(--bg2); }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* ===== Cuenta regresiva ===== */
/* El fondo apenas se atenúa: durante la cuenta se debe seguir leyendo quién es
   quién detrás. Los números llevan contorno para resaltar sin tapar. */
#countdown {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(6, 10, 20, .3);
  opacity: 0; transition: opacity .28s ease;
}
#countdown.show { opacity: 1; }
#countdown .cd-event {
  font-size: 2rem; font-weight: 900; color: #fff;
  letter-spacing: 1px; text-align: center; padding: 0 20px;
  text-shadow: 0 2px 4px #060a14, 0 0 18px rgba(6,10,20,.95);
}
#countdown .cd-num {
  font-size: 8rem; font-weight: 900; line-height: 1.1;
  color: var(--accent2);
  -webkit-text-stroke: 4px rgba(6,10,20,.85);
  paint-order: stroke fill;
  text-shadow: 0 6px 26px rgba(6,10,20,.9);
  min-height: 9rem; display: flex; align-items: center;
}
#countdown .cd-num.pop { animation: cdPop .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cdPop { from { transform: scale(1.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* El panel se resalta mientras las posiciones se reacomodan */
#event-side.focus {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(241,196,15,.16), 0 0 28px rgba(241,196,15,.22);
}

/* ===== Móvil =====
   En desktop todo cabe sin scroll; en un teléfono el contenido NO cabe, así que
   aquí se suelta el scroll, se apila todo en una columna y se baja el contenido
   para que no quede debajo de la barra fija de idioma/volumen. */
@media (max-width: 700px) {
  /* Todo el contenido baja para librar la barra fija de arriba */
  .screen { padding: 62px 14px 40px; }
  .logo { font-size: 1.9rem; }

  /* La marca de la esquina se reduce al balón (sigue llevando al inicio): con el
     texto completo se encimaba con el switch ES/EN en pantallas angostas. */
  #brand { top: 15px; left: 14px; }
  #brand .brand-name b, #brand .brand-by { display: none; }
  .lang-toggle { top: 12px; right: 12px; }
  /* Con 3 idiomas la barra se ensancha: botones y slider más compactos para que
     ES · EN · PT + silencio + volumen quepan en un teléfono angosto. */
  .lang-toggle [data-lang] { padding: 6px 9px; }
  .vol-slider { width: 54px; margin-left: 8px; }
  .lang-toggle .btn-mute { margin-left: 8px; }

  /* Evento y tabla: en móvil SÍ hacen scroll (no caben de un jalón), en lugar de
     quedar fijas a la altura de la ventana con el contenido cortado. */
  #screen-event.active, #screen-standings.active {
    display: block; height: auto; min-height: 100dvh; overflow: visible;
    padding-bottom: 40px;
  }

  /* Encabezado apilado: título arriba, botón centrado abajo, sin pelear por el ancho */
  .event-head { grid-template-columns: 1fr; gap: 8px; justify-items: center; margin-bottom: 12px; }
  .head-mid { grid-column: 1; flex-wrap: wrap; justify-content: center; }
  .head-mid h2, .event-head h2,
  #screen-event:has(.event-body.wide) .event-head h2 { font-size: 1.35rem; text-align: center; }
  #btn-event-continue, #btn-standings-continue {
    grid-column: 1; justify-self: center; margin-right: 0;
  }

  /* Escenario y marcador apilados, a todo el ancho (antes se encimaban) */
  .event-body, .event-body.wide { flex-direction: column; gap: 12px; }
  #stage { flex: none; }
  #event-side {
    width: 100%; min-width: 0; max-height: none; overflow: visible; align-self: stretch;
  }

  /* Presentación: en móvil SÍ hace scroll (antes quedaba fija a 100dvh con las
     tarjetas centradas y cortadas, y sobraba espacio abajo). Las tarjetas van
     compactas en 2 columnas para aprovechar el ancho y que entren ~8 por pantalla. */
  #screen-intro.active {
    display: block; height: auto; min-height: 100dvh; overflow: visible; padding-bottom: 40px;
  }
  #screen-intro #intro-grid {
    flex: none; min-height: 0; overflow: visible; align-content: start;
    grid-template-columns: repeat(2, 1fr); gap: 8px;
  }
  .intro-card { padding: 8px 10px; gap: 8px; }
  .intro-card b { font-size: .9rem; }

  /* Bench: tarjetas grandes en 1–2 columnas */
  .bench-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

  /* Salto: el estadio ocupa el ancho; su alto sale solo del 16:9 */
  .vert-stage { width: 100%; }

  /* Carrera: el campo toma un alto propio para verse completo durante la carrera */
  .dash-field { height: min(62dvh, 540px); }

  /* Comentarista compacto */
  #commentary,
  #screen-event:has(.event-body.wide) #commentary { height: auto; max-height: 66px; margin-top: 8px; }

  /* Tabla general: bien compacta para que quepan las 3 pruebas. Con nombres de
     equipo muy largos su contenedor hace scroll-x (sin arrastrar la página). */
  #standings-table th, #standings-table td { padding: 4px 3px; font-size: .76rem; }
  #standings-table th { font-size: .6rem; letter-spacing: 0; }
  #standings-table .chip { width: 19px; height: 19px; min-width: 19px; font-size: .48rem; }
  #standings-table .teamcell { gap: 6px; }
  #standings-table td.evcell b { font-size: .84rem; }
  #standings-table td.evcell small { font-size: .62rem; }
  #standings-note { font-size: .72rem; }
}

/* Filas del draft en pantallas angostas. La fila reparte su ancho entre cinco
   cosas (pick, color, nombre, marca de desempate, puntos) y sólo el nombre cede,
   porque es el único con ellipsis. Medido en 320px con la marca de desempate
   puesta: al nombre le quedaban 30px —o sea "Eq…"— contra 89px sin ella. Lo que
   se recorta aquí son los espacios fijos, que en 320px sumaban 285px de los 320:
   el `gap` de 14px repetido cuatro veces, el padding lateral de 18px y los 74px
   fijos de la columna del pick, que a este tamaño de letra sobran. */
@media (max-width: 520px) {
  .draft-row { gap: 8px; padding: var(--drpad, 12px) 10px; }
  .draft-row .picknum { width: 46px; }
  .draft-row .tiebreak { padding: 0 5px; }
}

/* Nota del desempate: aparece pegada a la lista y SOLO cuando hubo empate. No usa
   el gris chiquito de `.hint` a propósito — la regla ya vivía ahí, al final de un
   párrafo de letra chica, y nadie la leía: las ligas concluían que el orden era
   alfabético. Esta tiene que leerse. */
.tie-note {
  flex: none; max-width: 620px; margin: 0 auto 10px; text-align: center;
  font-size: .84rem; line-height: 1.45; color: var(--text);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-left: 3px solid var(--accent2); border-radius: 10px; padding: 8px 14px;
}
/* En la tabla general la marca va dentro de la celda del total, en su propia línea
   para no empujar el ancho de la columna (la tabla ya va apretada con 12+ equipos). */
#standings-table .tiebreak {
  display: block; margin-top: 2px; font-size: .68rem; font-weight: 700;
  color: var(--muted); white-space: nowrap;
}
@media (max-width: 700px) {
  .tie-note { font-size: .76rem; padding: 6px 10px; margin-bottom: 8px; }
  #standings-table .tiebreak { font-size: .58rem; }
}