/* Pizarra Criolla · css/juegos.css
   Pantallas de juegos: la lista del día (tarjeta tipo marcador) y el juego (pizarra con el turno, momentos, mini
   pizarra fija, repetición, pestañas, box, jugadas). Usa los tokens y componentes de styles.css; aquí solo lo propio
   de estas pantallas. Lo de dentro de los gráficos (curva, mapa, zona, campo) está en css/graficos.css. */

/* íconos de línea (flechas) y de relleno (play, pausa) */
.datebar .ic, .gm-back .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rp-play .ic-f { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------- barra de fecha ---------- */
.datebar .db-btn { color: var(--ink); }
.db-sub > span { white-space: nowrap; }
.db-sub .db-live { color: var(--live); font-weight: 700; }
/* "ir a hoy" es texto chico: el área de toque se agranda sin mover nada */
.db-today { position: relative; font-weight: 600; }
.db-today::after { content: ""; position: absolute; inset: -14px -10px; }

/* ---------- campeón (días sin juegos, fuera de temporada) ---------- */
/* "Ver la serie" y "Líderes de la temporada" van en el texto: 44 px de toque sin mover nada (el relleno vertical de
   un enlace dentro de la línea no cambia el alto de la línea) */
.champ p a { padding-block: max(0px, calc(22px - .5em)); }

/* ---------- tarjeta de juego tipo marcador ---------- */
/* izquierda los equipos y las carreras; derecha, tras una línea, la columna fija de estado (crece con la letra) */
.gcard.gc {
  display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 0; padding: 0;
  border-radius: var(--r-m); overflow: hidden; position: relative;
}
.gcard.gc.live { border-color: var(--live); box-shadow: inset 4px 0 0 var(--live), var(--shadow); }
/* color-mix con var() dentro de border-color: sin soporte (Chrome < 111) quedaría currentColor, un borde oscuro */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .gcard.gc.live { border-color: color-mix(in srgb, var(--live) 45%, var(--rule)); }
}
.gc-k {
  grid-column: 1 / -1; padding: 10px 14px 0 16px;
  font: 700 var(--fs-cap)/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.gc-teams { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px 10px 16px; min-width: 0; }
.gc-t { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 30px; }
.gc-nm { font: 600 var(--fs-lead)/1.2 var(--font-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-nm small { margin-left: 6px; font-variant-numeric: tabular-nums; }
.gc-sc { position: relative; font: 800 var(--fs-num)/1 var(--font-display); text-align: right; min-width: 1.1em; font-variant-numeric: tabular-nums; }
.gcard.final .gc-t:not(.win) .gc-nm, .gcard.final .gc-t:not(.win) .gc-sc { color: var(--muted); }
.gcard.final .gc-t.win .gc-nm { font-weight: 700; }
/* flechita del ganador, como en los marcadores de la TV */
.gc-t.win .gc-sc::after {
  content: ""; position: absolute; right: -11px; top: 50%; margin-top: -5px;
  border: 5px solid transparent; border-right-color: var(--ink); border-left: 0;
}
.gc-st {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 4px; min-width: 0; text-align: center; border-left: 1px solid var(--rule);
}
.st-fin { font: 700 var(--fs-sm)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.st-fin small, .st-txt small {
  display: block; margin-top: 4px; font: 600 var(--fs-cap)/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted);
}
.st-time { font: 800 var(--fs-num)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-time small { margin-left: 2px; font: 700 var(--fs-cap)/1 var(--font-body); color: var(--muted); }
.st-where, .st-sub {
  font: 500 var(--fs-cap)/1.2 var(--font-body); color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
}
.st-txt { font: 700 var(--fs-sm)/1.2 var(--font-body); color: var(--ink-2); }
.st-txt.warn { color: var(--live); }
.st-live { display: inline-flex; align-items: center; gap: 5px; font: 700 var(--fs-sm)/1 var(--font-body); color: var(--live); white-space: nowrap; }
.st-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.6s ease-in-out infinite; }
.gc-st .bases { width: 38px; height: 26px; }
.st-sit { display: flex; align-items: center; gap: 6px; font: 700 var(--fs-sm)/1 var(--font-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gc-ft {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 8px 14px 9px 16px;
  border-top: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--ink-2);
}
.gc-ft b { font: 700 var(--fs-cap)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- pantalla de un juego ---------- */
/* volver: la flecha queda alineada con el borde y el área de toque mide 48 px */
.gm-back { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; margin: -12px 0 -12px -12px; padding: 0 12px 0 6px; font-weight: 600; }
.gm-back:hover { text-decoration: none; }
@media (hover: hover) { .gm-back:hover span { text-decoration: underline; } }
/* a la derecha de la miga, el modo TV y compartir: 44 px de toque sin agrandar la fila (con la letra grande, si no caben
   junto a la miga, bajan a la derecha) */
.gm-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s2); }
.gm-acts { display: inline-flex; align-items: center; gap: 4px; margin: -10px -10px -10px auto; }
.gm-act {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--accent); cursor: pointer; transition: transform var(--t-toque) var(--ease-out);
}
.gm-act:active { transform: scale(.92); }
.gm-act .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skel .gm-act { color: var(--rule-2); }

/* porcentaje de ganar: dos columnas fijas, el nombre no se corre cuando cambia el número */
.wp-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); }
.wp-now p {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0;
  font-size: var(--fs-body); font-weight: 600; color: var(--ink-2);
}
/* el número siempre en su propia línea, bajo el nombre: así "100%" y "0%" se ven igual */
.wp-now b {
  flex-basis: 100%; min-width: 2.6em; margin-left: 0;
  font: 800 var(--fs-num)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums;
}
/* leyenda de la curva: cada entrada va junta con su cuadrito (styles.css); la de las barras no tiene cuadrito y puede
   partirse si con letra muy grande no cabe en una línea */
.viz-key > .vk-li { white-space: normal; }

/* la línea de innings: cuando no caben, pasan por debajo de C-H-E (fijas a la derecha, styles.css). js/juego.js
   marca la pizarra con .ln-r si queda alguno escondido ahí y con .ln-l si se fueron por la izquierda; un degradado
   del color de la pizarra los apaga contra ese borde: hay más, se puede deslizar. Junto a C, 24 px más los 2 de su
   sombra: los 26 que js/juego.js deja libres (FADE) para que el inning en juego no quede apagado. */
.board.ln-r .bt-line .rhe:nth-last-child(3)::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: calc(100% + 2px); width: 24px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--board) 85%);
}
.board.ln-l .bt-line {
  -webkit-mask-image: linear-gradient(to right, transparent 4px, #000 24px);
  mask-image: linear-gradient(to right, transparent 4px, #000 24px);
}

/* La repetición queda fija abajo mientras la pizarra del turno ocupa la pantalla: así se pausa sin perder la pizarra
   de vista. Fija (js/juego.js le pone .pegada), solo el botón y el deslizador, para tapar lo menos posible; el texto y
   la velocidad vuelven al bajar a su lugar. */
#view > .replay { position: sticky; z-index: 5; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + var(--s2)); box-shadow: var(--shadow); }
#view > .replay.pegada .rp-foot { display: none; }
/* el lugar de la barra (js/juego.js, watchBar): al pie de la pizarra, más los 20 px que separan los bloques de #view */
.board-wrap > .rp-marca { position: absolute; left: 0; bottom: -20px; width: 1px; height: 0; pointer-events: none; }
/* apaisado: fija taparía media pizarra; va en su lugar */
@media (max-height: 30rem) { #view > .replay { position: static; } }
.rp-play { gap: 8px; }
/* debajo del deslizador: dónde va y la velocidad (1×, 2×, 4×) */
.rp-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px var(--s3); }
.rp-vel { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--rule-2); border-radius: 999px; }
.rp-vel button {
  position: relative; min-width: 44px; min-height: 32px; margin: 0; padding: 0 10px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-2); font: 700 var(--fs-sm)/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: transform var(--t-toque) var(--ease-out);
}
.rp-vel button::after { content: ""; position: absolute; inset: -7px 0; } /* 44 px de toque */
.rp-vel button:active { transform: scale(.95); }
.rp-vel button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* box score: toda la fila de un jugador es tocable (44 px) y se marca al tocarla, también la columna fija del nombre
   (por eso el selector pesa más que el fondo de .tbl-wrap.sticky en styles.css). El color-mix con var() va aparte:
   sin soporte, el navegador lo invalida al calcularlo y el respaldo de la misma regla no valdría. */
.tbl.box tbody tr.tap { height: 2.75rem; cursor: pointer; }
.tbl-wrap .tbl.box tbody tr.tap:active > * { background-color: var(--paper); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .tbl-wrap .tbl.box tbody tr.tap:active > * { background-color: color-mix(in srgb, var(--accent) 10%, var(--card)); }
  @media (hover: hover) { .tbl-wrap .tbl.box tbody tr.tap:hover > * { background-color: color-mix(in srgb, var(--accent) 5%, var(--card)); } }
}

/* ---------- mini pizarra fija ("chapita") ---------- */
/* vive en <body>; js/juego.js le pone la clase .on. Se pega bajo la cabecera con --top-h (alto de la cabecera + la
   franja), que core.js renueva cuando la cabecera cambia de alto (letra más grande, giro de pantalla). Dos líneas: el
   marcador con el inning, las bases, los outs y la cuenta; debajo, la jugada del momento ("Doble de Marcano"). */
.chapita {
  position: fixed; z-index: 19; left: 0; right: 0; top: var(--top-h, 62px);
  display: flex; justify-content: center; padding: 0 var(--s4); pointer-events: none;
  transform: translateY(-110%); opacity: 0; visibility: hidden;
  transition: transform var(--t-pantalla) var(--ease-out), opacity var(--t-micro) linear, visibility 0s linear var(--t-pantalla);
}
.chapita.on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.ch-in {
  position: relative; pointer-events: auto; width: 100%; max-width: 688px; min-height: 48px; margin: 0; padding: 6px 14px 7px; border: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px; text-align: left; cursor: pointer;
  background: var(--board); color: var(--chalk); border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: var(--shadow);
  font: 700 var(--fs-sm)/1 var(--font-body); -webkit-user-select: none; user-select: none;
  transition: transform var(--t-toque) var(--ease-out);
}
.ch-in:active { transform: scale(.98); }
.ch-in:focus-visible { outline: 2px solid var(--bulb); outline-offset: 2px; }
.ch-l1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ch-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 var(--fs-sm)/1.3 var(--font-body); color: var(--chalk); white-space: nowrap; overflow: hidden; }
.ch-pl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-tm { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ch-tm b { font: 800 var(--fs-h2)/1 var(--font-display); min-width: .8em; color: var(--bulb); font-variant-numeric: tabular-nums; }
.ch-sep { flex: none; width: 1px; height: 22px; background: rgba(255, 255, 255, .22); }
.ch-st { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.ch-st small { color: var(--chalk-dim); font-size: var(--fs-cap); }
.ch-inn, .ch-txt { color: var(--chalk); }
.ch-txt { text-transform: uppercase; letter-spacing: .08em; }
.ch-tag {
  flex: none; padding: 2px 7px; border-radius: 999px; background: var(--bulb); color: #1a1405;
  font: 700 var(--fs-cap)/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em;
}
.ch-tag-s { display: none; } /* "REP": solo cuando "Repetición" no cabe (abajo) */
/* el momento de la banda (la pizarra no se ve): su título en lugar de la jugada, amarillo como la banda */
.ch-mo { /* sin relleno arriba ni abajo: la línea mide lo mismo que la de la jugada */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; border-radius: 999px;
  background: var(--bulb); color: #1a1405; font: 800 var(--fs-sm)/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .04em;
}
.ch-cnt { margin-left: auto; font: 800 var(--fs-h2)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.chapita .bases { flex: none; }
.chapita .bases rect { stroke: var(--chalk-dim); }
.chapita .bases rect.on { fill: var(--bulb); stroke: var(--bulb); }
.chapita .outs i { border-color: var(--chalk-dim); }
.chapita .outs i.on { background: var(--chalk); border-color: var(--chalk); }
/* tocar una jugada clave o un batazo: la chapita destella una vez (la página no sube) */
.chapita.destella .ch-in::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--bulb); background: rgba(255, 204, 0, .16); animation: ch-destella 600ms var(--ease-out) both;
}
@keyframes ch-destella { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chapita { transition: none; } .chapita.destella .ch-in::after { display: none; } }

/* "Repetición" en la pizarra (no se llama .replay: esa clase es la del bloque de la repetición) */
.bt-status .pill.rp-pill { background: var(--bulb); border-color: var(--bulb); color: #1a1405; }
/* "Volver al vivo": píldora tocable, a la derecha de la línea de estado */
.bt-back {
  position: relative; margin: 0 0 0 auto; padding: 4px 12px; border: 1px solid var(--chalk-dim); border-radius: 999px;
  background: none; color: var(--chalk); font: 700 var(--fs-cap)/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; transition: transform var(--t-toque) var(--ease-out);
}
.bt-back::after { content: ""; position: absolute; inset: -10px -4px; }
.bt-back:active { transform: scale(.95); }
/* el foco sobre la pizarra, en amarillo (el azul de --accent no se ve sobre el azul de la pizarra) */
.board :focus-visible { outline-color: var(--bulb); }

/* ---------- la pizarra con el turno arriba (en vivo y en la repetición; js/juego.js le pone .turno) ---------- */
/* Filas fijas: estado · marcador con los bombillos · campo y zona · secuencia · duelo · fichas y última jugada (con la
   banda de los momentos encima) · línea por inning. Primero el teléfono: lo de la pizarra ancha va en
   @container (min-width), así quien no entiende las consultas de contenedor ve la del teléfono. */
.board-wrap { position: relative; }
.board.turno { gap: 6px; }
/* la línea por inning, con las casillas un poco más bajas que en la pizarra de siempre */
.board.turno .bt-line td { padding-block: 3px; }
/* el estadio no cabe junto a "Repetición · Alta del 5.º" en el teléfono: solo con espacio */
.board.turno .bt-venue { display: none; }
@container (min-width: 34rem) { .board.turno .bt-venue { display: inline; } }

/* el marcador en una línea, con las siglas junto a sus carreras (MAG 3 – 3 ANZ), y los bombillos a la derecha */
.sc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sc { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-t {
  display: flex; align-items: center; gap: var(--s2); min-width: 0; min-height: 44px;
  color: var(--chalk); font: 600 var(--fs-lead)/1.2 var(--font-body);
}
.sc-t.home { flex-direction: row-reverse; text-align: right; }
.sc-t:hover { text-decoration: none; color: var(--chalk); }
@media (hover: hover) { .sc-t[href]:hover .sc-nm { text-decoration: underline; } }
.sc .bt-abbr { font-size: var(--fs-body); }
/* los nombres, solo con espacio */
.sc-nm { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (min-width: 32rem) { .sc-nm { display: inline; } }
/* las carreras, con tope según el ancho de la pantalla: con la letra grande el número ya es enorme y así la fila cabe */
.sc-r {
  font: 800 min(var(--fs-hero), 13vw)/1 var(--font-display); min-width: .7em; text-align: center; color: var(--chalk-dim);
  font-variant-numeric: tabular-nums;
}
.sc-r.lead { color: var(--chalk); }
.sc-dash { font: 700 var(--fs-h2)/1 var(--font-display); color: var(--chalk-dim); }
/* bombillos B-S-O: la cuenta va una sola vez, aquí. Al lado del marcador, uno sobre otro; si no caben (pizarra angosta
   o letra grande), en una línea propia, de lado. Sin consultas de contenedor: con la fila más angosta que 17rem la
   base de .bl3 se hace enorme, baja a su propia línea y toma todo el ancho (los tres en fila); si no, queda en 0 y la
   caja mide lo justo para uno (los tres, uno sobre otro). */
.bl3 { flex: 0 1 calc((17rem - 100%) * 999); margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 14px; }
.bl { display: flex; align-items: center; gap: 6px; }
.bl > b { width: 1em; font: 700 var(--fs-cap)/1 var(--font-body); color: var(--chalk-dim); text-align: right; }
.bl > span { display: inline-flex; gap: 5px; }
/* el apagado lleva borde (tiza a media luz): si no, sobre la pizarra no se ve */
.bl i { position: relative; width: .8rem; height: .8rem; border-radius: 50%; background: var(--bulb-off); box-shadow: inset 0 0 0 1.5px rgba(174, 188, 230, .55); }
.bl i.on { background: var(--bulb); box-shadow: 0 0 8px rgba(255, 204, 0, .7); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .bl i { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--chalk-dim) 55%, transparent); } }
/* sin el campo (charts.js falló), las bases junto a los bombillos */
.sc-row > .cnt-bases { flex: none; }
.cnt-bases .bases rect { stroke: var(--chalk-dim); }
.cnt-bases .bases rect.on { fill: var(--bulb); stroke: var(--bulb); }

/* campo y zona en una fila (campo ~55 %, zona ~38 %), centrados en alto; debajo, la secuencia sola a lo ancho (la
   llena charts.js: CH.zone con seqBox) */
.tn-now { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 38%); justify-content: space-between; align-items: center; gap: 6px 0; }
.tn-field { grid-column: 1; grid-row: 1; min-width: 0; }
.tn-zone { grid-column: 2; grid-row: 1; min-width: 0; }
.tn-seq { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.tn-now.sin-campo { grid-template-columns: minmax(0, 38%); justify-content: center; }
.tn-now.sin-campo .tn-zone { grid-column: 1; }
.tn-now.sin-zona { grid-template-columns: minmax(0, 55%); justify-content: center; }
/* "Ver defensa" (charts.js) va debajo del campo; si el campo es ancho para el botón (11rem: a 412 px, no a 360 ni con
   letra grande), sobre la esquina de abajo que el cuadro interior deja libre: la del lado contrario al bateador (el
   zurdo va a la derecha del plato: js/juego.js pone .bat-z). Así no suma una fila. Los corredores que no caben como
   fichas (.gf-lista) siguen debajo. */
.board .tn-field { container-type: inline-size; }
@container (min-width: 11rem) {
  .board .tn-field .gf-pan { display: grid; }
  .board .tn-field .gf-pan > svg { grid-area: 1 / 1; }
  .board .tn-field .gf-lista { grid-area: 2 / 1; }
  .board .tn-field .gf-btn { grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0; position: relative; z-index: 1; }
  .board .tn-field.bat-z .gf-btn { justify-self: start; }
}
/* "Ver defensa" abierto (charts.js le pone .gf-abierto a la caja): el campo a todo el ancho y la zona debajo */
.tn-field.gf-abierto { grid-column: 1 / -1; }
.tn-field.gf-abierto ~ .tn-zone { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: 38%; }
.tn-field.gf-abierto ~ .tn-seq { grid-row: 3; }
/* pizarra ancha: campo y zona con tope, al centro */
@container (min-width: 34rem) {
  .tn-now { grid-template-columns: minmax(0, 21rem) minmax(0, 12rem); justify-content: center; column-gap: 2rem; }
  .tn-field.gf-abierto ~ .tn-zone { width: 12rem; }
}

/* el duelo: dos tarjetas de tres líneas (rótulo, nombre, lo de hoy), lado a lado desde 18rem de pizarra (auto-fit: sin
   consultas de contenedor) */
.tn-duel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.6rem), 1fr)); gap: 6px; }
.dc { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 10px 7px; border-radius: 10px; background: rgba(0, 0, 0, .18); }
.dc-lab { display: flex; justify-content: space-between; gap: 6px; font: 700 var(--fs-cap)/1.25 var(--font-body); color: var(--chalk-dim); text-transform: uppercase; letter-spacing: .07em; }
/* "3.er turno", "Entró en el 5.º": en minúsculas (en mayúsculas el ordinal se lee mal) */
.dc-lab span + span { text-transform: none; letter-spacing: 0; font-weight: 600; text-align: right; }
/* el nombre se parte en dos líneas antes que cortarse; el enlace se toca en 44 px de alto sin mover nada */
.dc-nm { font-size: var(--fs-body); font-weight: 700; line-height: 1.25; min-width: 0; overflow-wrap: break-word; }
.dc-nm a { color: var(--chalk); padding-block: max(0px, calc(22px - .5em)); }
.dc-nm small { color: var(--chalk-dim); font-size: var(--fs-cap); font-weight: 600; white-space: nowrap; }
.dc-ln { font-size: var(--fs-sm); line-height: 1.35; color: var(--chalk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-ln b { color: var(--chalk); font-weight: 700; font-variant-numeric: tabular-nums; }

/* la franja de comentario: las fichas, el historial y la última jugada. Mide al menos lo que la banda de un momento
   (título y dos líneas), que va encima: la banda no tapa nada más y la pizarra no cambia de alto al entrar o salir. */
.tn-com {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: calc(clamp(var(--fs-h2), 7.5vw, var(--fs-num)) * .95 + var(--fs-sm) * 2.6 + 26px);
}
/* las fichas en una sola fila que se desliza de lado; el relleno deja tocar en 44 px y ver el contorno del foco sin que
   la fila (que recorta lo que sale) se los coma, y el margen negativo lo descuenta */
.tn-ctx {
  display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 4px; margin: -8px -4px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.tn-ctx::-webkit-scrollbar { display: none; }
.cx {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .09); color: var(--chalk-dim); font: 500 var(--fs-sm)/1.2 var(--font-body); white-space: nowrap;
}
.cx b { color: var(--chalk); font-weight: 700; font-variant-numeric: tabular-nums; }
.cx.hot { box-shadow: inset 0 0 0 1.5px var(--bulb); }
button.cx { position: relative; margin: 0; border: 0; color: var(--chalk); font-weight: 700; cursor: pointer; transition: transform var(--t-toque) var(--ease-out); }
button.cx::after { content: ""; position: absolute; inset: -8px -2px; }
button.cx:active { transform: scale(.95); }
button.cx[aria-disabled="true"] { cursor: default; opacity: .75; }
button.cx[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
.vs-out { font-size: var(--fs-sm); line-height: 1.4; color: var(--chalk); background: rgba(0, 0, 0, .18); border-radius: var(--s2); padding: var(--s2) 10px; }
/* la región del historial ya está mientras se busca (el lector la anuncia al llenarse), vacía y sin alto */
.vs-out:empty { padding: 0; margin-top: -6px; }
/* la última jugada, a dos líneas como mucho (el texto entero está en Jugadas; el corte va en el texto, no en la caja:
   si no, la tercera línea asoma por el relleno): "Antes:" en amarillo y la etiqueta del jonrón */
.tn-com > .lastplay > .lp-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lp-antes { color: var(--bulb); font-weight: 700; }
.lastplay .tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--bulb); color: #1a1405;
  font: 800 var(--fs-cap)/1.5 var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  animation: tag-entra 450ms var(--ease-rebote) both;
}
@keyframes tag-entra { from { opacity: 0; transform: translateX(-10px) scale(.8); } }

/* ---------- momentos: la banda amarilla (8 s; la barrita marca el tiempo) ---------- */
/* encima de la franja de comentario; en la pizarra de siempre (un juego que termina en vivo), abajo, sobre la línea */
.mo-band {
  position: absolute; z-index: 3; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 12px 6px; border-radius: 10px; overflow: hidden;
  background: var(--bulb); color: #1a1405; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer;
  opacity: 0; transform: translateY(6px); visibility: hidden; pointer-events: none;
  transition: transform var(--t-pantalla) var(--ease-out), opacity var(--t-micro) linear, visibility 0s linear var(--t-pantalla);
}
.board > .mo-band { inset: auto 10px 10px; min-height: calc(clamp(var(--fs-h2), 7.5vw, var(--fs-num)) * .95 + var(--fs-sm) * 2.6 + 26px); }
.mo-band.in { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mo-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.mo-t { font: 800 clamp(var(--fs-h2), 7.5vw, var(--fs-num))/.95 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.mo-s { font: 800 var(--fs-h2)/1.1 var(--font-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.mo-d { font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mo-bar { display: block; flex: none; height: 3px; margin-top: 4px; border-radius: 2px; overflow: hidden; background: rgba(26, 20, 5, .18); }
.mo-bar i { display: block; height: 100%; background: #1a1405; transform-origin: 0 50%; animation: mo-tiempo 8s linear both; }
@keyframes mo-tiempo { to { transform: scaleX(0); } }

/* jonrón: las 8 estrellas de la pizarra se prenden de izquierda a derecha */
.board-wrap > .estrella {
  position: absolute; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none;
  background: var(--bulb);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: estrella 1100ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms);
}
@keyframes estrella { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.4); } 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }
/* la base a la que llega un corredor destella (el campo es de charts.js; esto va encima) */
.board-wrap > .base-luz {
  position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--bulb), 0 0 14px var(--bulb); animation: base-luz 850ms var(--ease-out) both;
}
@keyframes base-luz { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }

/* ---------- pizarra viva: lo que cambió se prende (solo transform y opacity) ---------- */
/* las carreras ruedan: sale la de antes (data-prev) hacia arriba, entra la nueva, y se prende en amarillo un rato */
.sc-r.flip { position: relative; display: inline-block; overflow: hidden; padding-block: .04em; }
.sc-r.flip > .n { display: inline-block; }
.sc-r.flip.chg > .n { animation: num-entra var(--t-marcador) var(--ease-rebote) both; }
.sc-r.flip.chg::before {
  content: attr(data-prev); position: absolute; left: 0; right: 0; top: .04em; text-align: center;
  animation: num-sale var(--t-marcador) var(--ease-out) both;
}
.sc-r.flip.chg::after {
  content: attr(data-v); position: absolute; left: 0; right: 0; top: .04em; text-align: center; color: var(--bulb);
  animation: num-entra var(--t-marcador) var(--ease-rebote) both, luz-se-va 1.8s linear both;
}
@keyframes num-entra { from { transform: translateY(85%); opacity: 0; } }
@keyframes num-sale { to { transform: translateY(-85%); opacity: 0; } }
@keyframes luz-se-va { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
/* la casilla del inning donde entra la carrera: amarilla con la cifra oscura, y se apaga */
.bt-line td.chg:not(.rhe) { position: relative; }
.bt-line td.chg::after {
  content: attr(data-v); position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  background: var(--bulb); color: #1a1405; animation: celda-luz 1.4s var(--ease-out) both;
}
@keyframes celda-luz { 0% { opacity: 1; transform: scale(1.3); } 18% { transform: none; } 55% { opacity: 1; } 100% { opacity: 0; } }
/* bombillos: se encienden con halo y se apagan con un resplandor */
.bl i::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 204, 0, .8) 0 30%, transparent 70%);
}
.bl i.on.chg { animation: prende 320ms var(--ease-rebote) both; }
.bl i.on.chg::after { animation: halo 750ms var(--ease-out) both; }
.bl i.chg:not(.on)::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bulb);
  animation: apaga 650ms ease-in both;
}
@keyframes prende { from { transform: scale(.3); opacity: .4; } }
@keyframes halo { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(1.7); } }
@keyframes apaga { to { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) {
  .mo-bar { display: none; }
  .board-wrap > .estrella, .board-wrap > .base-luz { display: none; }
  .lastplay .tag { animation: none; }
}

/* ---------- pestañas debajo de la pizarra, con un indicador que se desliza ---------- */
.gm-tabsec { gap: var(--s4); }
.gm-tabs { position: relative; }
.gm-tabs > button { min-width: 44px; justify-content: center; } /* "Box" también se toca en 44 px */
.gm-tabs > .on::after { content: none; } /* la raya fija de .seg: aquí la hace .seg-ind */
/* con letra grande la fila se desliza: un degradado en el borde avisa que hay más (js/juego.js: .ed-l, .ed-r) */
.gm-tabs.ed-r { -webkit-mask-image: linear-gradient(to left, transparent 4px, #000 24px); mask-image: linear-gradient(to left, transparent 4px, #000 24px); }
.gm-tabs.ed-l { -webkit-mask-image: linear-gradient(to right, transparent 4px, #000 24px); mask-image: linear-gradient(to right, transparent 4px, #000 24px); }
.gm-tabs.ed-l.ed-r {
  -webkit-mask-image: linear-gradient(to right, transparent 4px, #000 24px, #000 calc(100% - 24px), transparent calc(100% - 4px));
  mask-image: linear-gradient(to right, transparent 4px, #000 24px, #000 calc(100% - 24px), transparent calc(100% - 4px));
}
.seg-ind {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 3px; border-radius: 3px 3px 0 0; pointer-events: none;
  background: var(--accent); transform-origin: 0 0; transform: scaleX(0);
  transition: transform var(--t-pantalla) var(--ease-out);
}
.seg-ind.quieto { transition: none; }
.gm-res { display: flex; flex-direction: column; gap: 20px; }

/* jugadas clave: toda la tarjeta lleva a ese momento (la "›" dice que se toca); la elegida, con una raya del color de
   acento (azul en claro, amarilla en oscuro) */
.keys li { padding: 0; }
.key-go {
  position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 0; padding: 10px 2rem 10px var(--s3);
  border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--t-toque) var(--ease-out);
}
.key-go::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 700 1.4rem/1 var(--font-body); color: var(--muted); }
.key-go:active { transform: scale(.98); }
.key-go.on { box-shadow: inset 3px 0 0 var(--accent); }
.key-d { font-size: var(--fs-body); }

/* mapa de batazos: el filtro por equipo y la caja del dibujo */
.sp-fil { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-fil button {
  position: relative; display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding: 0 14px;
  border: 1px solid var(--rule-2); border-radius: 999px; background: var(--card); color: var(--ink-2);
  font: 600 var(--fs-sm)/1.2 var(--font-body); cursor: pointer; transition: transform var(--t-toque) var(--ease-out);
}
.sp-fil button::after { content: ""; position: absolute; inset: -4px 0; }
.sp-fil button:active { transform: scale(.95); }
.sp-fil button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.spray-chart { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: var(--s2); }

/* jugada a jugada: tocar un turno abre su zona y su secuencia (con tope de ancho: si no, la zona ocupa la pantalla) */
.half li.pl-z { padding: 0; }
.pl-x > summary { display: flex; flex-direction: column; gap: 2px; padding: 9px var(--s3); list-style: none; cursor: pointer; }
.pl-x > summary::-webkit-details-marker { display: none; }
.pl-l { display: block; }
.pl-l:first-child { display: flex; justify-content: space-between; gap: 10px; }
.pl-more { color: var(--accent); font-weight: 600; white-space: nowrap; }
.pl-more::after {
  content: ""; display: inline-block; width: .45em; height: .45em; margin: 0 2px 0 6px; vertical-align: .15em;
  border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
  transition: transform var(--t-micro) var(--ease-out);
}
.pl-x[open] .pl-more::after { transform: translateY(.15em) rotate(-135deg); }
.pl-zone { max-width: 16rem; margin-inline: auto; padding: 0 var(--s3) var(--s3); }

/* ---------- esqueleto de un juego en vivo (js/juego.js: juegoVivo) ---------- */
/* las carreras apagadas; el campo y la zona miden lo que sus dibujos (charts.js: el cuadro interior, 200 × 144 más el
   botón "Ver defensa" debajo cuando el campo es angosto; la zona, ~134 × 147); la secuencia, una fila de fichas */
.skel .sc-r, .skel .sc-dash { color: var(--board-2); }
.skel .bl i { box-shadow: none; }
.sk.sk-fld { width: 100%; aspect-ratio: 200 / 144; border-radius: 10px; }
.sk.sk-zn { width: 100%; aspect-ratio: 134 / 147; border-radius: 10px; }
.sk.sk-seq { width: 45%; height: calc(var(--fs-sm) * 1.75); }
/* el hueco de "Ver defensa": el botón sale con el campo angosto (charts.js: pantalla de menos de 26,25rem) y va debajo
   del campo, salvo que el campo mida 11rem o más (entonces va sobre la esquina y no suma alto) */
@media (max-width: 26.24rem) {
  .skel .tn-field::after { content: ""; display: block; height: max(24px, calc(var(--fs-cap) * 1.1 + 6px)); margin-top: 2px; }
  @container (min-width: 11rem) { .skel .tn-field::after { content: none; } }
}
/* "En vivo" llena, en los dos temas, como la de verdad */
.skel .board .pill.live { background: var(--live); border-color: var(--live); }
@media (prefers-color-scheme: dark) { .skel .board .pill.live { background: var(--flag-r); border-color: var(--flag-r); } }

/* ---------- letra grande en pantalla angosta ---------- */
/* La pizarra de siempre muy angosta (360 o 412 px con la letra al 200 %): sin la insignia, así el nombre entero cabe
   ("Magallanes" no se corta); las siglas siguen en la línea por inning. Lo de afuera es lo angosto (también para quien
   no entiende las consultas de contenedor); la insignia sale con la pizarra de 12rem o más. */
.board:not(.turno) .bt-row { grid-template-columns: minmax(0, 1fr) auto; }
.board:not(.turno) .bt-row > .bt-abbr { display: none; }
@container (min-width: 12rem) {
  .board:not(.turno) .bt-row { grid-template-columns: auto 1fr auto; }
  .board:not(.turno) .bt-row > .bt-abbr { display: inline-grid; }
}
/* La tarjeta: primero el récord baja a su propia línea (un número no se corta nunca: a 360 px «Magallanes 20-22»
   no cabe en una); más angosta, el récord se va y la columna de estado se angosta; si aún no cabe, la insignia
   (queda el nombre). */
.games { container-type: inline-size; }
@container (max-width: 21rem) {
  .gc-nm small { display: block; margin: 1px 0 0; font-size: var(--fs-cap); }
  /* el ancho mínimo de las carreras, de 1.1em a .8em (todavía caben dos cifras): más sitio para el nombre */
  .gc-sc { min-width: .8em; }
}
@container (max-width: 18rem) {
  .gcard.gc { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .gc-nm small { display: none; }
  /* a la derecha, el aire de la flechita del ganador hasta la raya («12 ◂ |», no «12 ◂|») */
  .gc-teams { padding-left: 12px; padding-right: 18px; }
  .gc-t { gap: 8px; }
  .st-time small { display: block; margin: 2px 0 0; }
}
@container (max-width: 15rem) {
  /* sin la insignia, la fila queda en dos columnas: si no, el nombre caería en la columna de la insignia y las
     carreras en la del nombre, que se angosta y las empuja hacia la flechita */
  .gc-t { grid-template-columns: minmax(0, 1fr) auto; }
  .gc-t .tchip { display: none; }
}
/* La chapita: las siglas sin recuadro, menos aire y "REP" en vez de "Repetición", para que la cuenta, las bases y
   los outs no se corten. */
.chapita { container-type: inline-size; }
@container (max-width: 19rem) {
  .ch-in { padding: 6px 10px; }
  .ch-l1 { gap: 6px; }
  .ch-in .tchip { min-width: 0; padding: 0; background: none; color: var(--chalk-dim); }
  .ch-sep { display: none; }
  .ch-st { gap: 6px; }
  .ch-tag-l { display: none; }
  .ch-tag-s { display: inline; }
}