/* ==========================================================================
   LOS MINIJUEGOS (PLANUI U2c punto 4): la prueba, la rueda de prensa y las
   mecánicas del mapa, con el sistema nuevo. La parada es un panel como el de
   la decisión: el rótulo con su punto de luz, el título, qué se juega en una
   línea, la apuesta como una placa, y "¡Vamos!" en su aro de ceremonia (el
   reloj no arranca hasta tocarlo). El juego va en una cancha honda, sin
   escuadras; el jugo: un destello al acertar, un sacudón (≤ 4 px) al fallar,
   y chispas. El veredicto es una tarjeta con su color.
   ========================================================================== */

.minijuego {
  --mj-luz: var(--warn);
  position: relative; display: grid; gap: 10px; width: min(100%, 940px); margin: 0; padding: 22px 26px 24px;
  border-radius: var(--r-panel); background: var(--tx-panel); box-shadow: inset 0 0 0 1px var(--filete), 0 30px 60px -30px var(--sombra);
  animation: mj-entra 420ms var(--expo) both;
}
@keyframes mj-entra { from { opacity: 0; transform: translateY(14px); } }
.minijuego[hidden] { display: none; }
/* el rótulo: qué parada es (`data-tab-label`, de `rotuloDeMinijuego`: "La prueba", "Rueda de prensa", "Mapa decisivo") */
#minijuego::before {
  content: attr(data-tab-label);
  display: flex; align-items: center; gap: 9px;
  font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--mj-luz);
}
#minijuego > .titulo-parada { margin: 0; }
#minijuego > .planteo { margin: 0; font-size: 15px; color: color-mix(in srgb, var(--ink-dim) 70%, var(--ink)); }

/* con el reloj corriendo (o el veredicto a la vista) la consigna ya se leyó y se pliega. H3k: la apuesta NO se va mientras
   jugás (lo que te jugás queda a la vista): se achica a su primera línea, sin el "más". Con el veredicto, sí se va. */
#minijuego[data-fase="juego"] > .planteo,
#minijuego[data-fase="resultado"] > .planteo,
#minijuego[data-fase="resultado"] > #minijuegoApuesta { display: none; }
#minijuego[data-fase="juego"] .minijuego-apuesta { padding: 8px 12px; }
#minijuego[data-fase="juego"] :is(.minijuego-mas, .minijuego-apuesta-plegado, .minijuego-apuesta-stat) { display: none; }

/* ---------- la apuesta: una placa ---------- */
.minijuego-apuesta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 4px 0 0; padding: 12px 16px;
  border-radius: var(--r-control); background: var(--panel-hondo); box-shadow: inset 3px 0 0 var(--mj-luz), inset 0 0 0 1px var(--linea);
  color: var(--ink); font-size: 14px; line-height: 1.4;
}
.minijuego-apuesta-cabecera { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.minijuego-apuesta-kicker { font: 700 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--mj-luz); }
.minijuego-apuesta-ronda { font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--gold); }
.minijuego-apuesta-texto { flex: 1 0 100%; min-width: 0; }
.minijuego-apuesta-stat { flex: 1 1 auto; min-width: 0; font: 500 11px / 1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.minijuego-mas {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-chip); box-shadow: inset 0 0 0 1px var(--linea-fuerte); font: 600 11px / 1 var(--f-mono); color: var(--ink);
}
.minijuego-mas:hover { background: var(--luz-tenue); box-shadow: inset 0 0 0 1px var(--luz-fuerte); }
.minijuego-mas:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.minijuego-apuesta-plegado { flex: 1 0 100%; padding-top: 10px; box-shadow: inset 0 1px 0 var(--linea); }
.minijuego-apuesta-plegado[hidden] { display: none; }
.minijuego-apuesta-resto, .minijuego-apuesta-regla { margin: 0; color: var(--ink-dim); }
.minijuego-apuesta-regla { font-size: 12.5px; font-style: italic; }
:is(.minijuego-apuesta-resto, .minijuego-apuesta-regla) + :is(.minijuego-apuesta-resto, .minijuego-apuesta-regla) { margin-top: 8px; }

/* ---------- la cancha: donde corre el juego ---------- */
.minijuego-widget {
  position: relative; margin-top: 6px; padding: 20px; border-radius: var(--r-control); isolation: isolate;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--mj-luz) 7%, transparent), transparent 70%), var(--panel-hondo);
  box-shadow: inset 0 0 0 1px var(--linea);
}
#minijuego[data-fase="previa"] .minijuego-widget { padding: 14px 16px; background: transparent; box-shadow: none; }
/* el jugo: acertar destella en verde con chispas; fallar sacude (≤ 4 px) en rojo */
.minijuego-widget--hit { animation: mj-destello 420ms var(--expo); }
.minijuego-widget--hit::after, .minijuego-widget--miss::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.minijuego-widget--hit::after {
  background:
    radial-gradient(3px 3px at 18% 30%, var(--up), transparent), radial-gradient(2px 2px at 32% 70%, var(--luz-blanca), transparent),
    radial-gradient(3px 3px at 58% 22%, var(--up), transparent), radial-gradient(2px 2px at 76% 64%, var(--luz-blanca), transparent),
    radial-gradient(3px 3px at 88% 36%, var(--up), transparent), radial-gradient(60% 70% at 50% 50%, color-mix(in srgb, var(--up) 18%, transparent), transparent 70%);
  animation: mj-chispas 620ms var(--expo) forwards;
}
.minijuego-widget--miss { animation: mj-sacudon 260ms ease-out; }
.minijuego-widget--miss::after { background: radial-gradient(70% 80% at 50% 50%, color-mix(in srgb, var(--down) 20%, transparent), transparent 72%); animation: mj-chispas 520ms ease-out forwards; }
@keyframes mj-destello {
  0% { box-shadow: inset 0 0 0 1px var(--linea), 0 0 0 0 color-mix(in srgb, var(--up) 0%, transparent); }
  25% { box-shadow: inset 0 0 0 2px var(--up), 0 0 34px 2px color-mix(in srgb, var(--up) 45%, transparent); }
  100% { box-shadow: inset 0 0 0 1px var(--linea), 0 0 0 0 color-mix(in srgb, var(--up) 0%, transparent); }
}
@keyframes mj-chispas { 0% { opacity: 0; transform: scale(0.94); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes mj-sacudon {
  0%, 100% { transform: none; box-shadow: inset 0 0 0 1px var(--linea); }
  20% { transform: translateX(-4px); box-shadow: inset 0 0 0 2px var(--down); }
  45% { transform: translateX(3px); }
  70% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .minijuego, .minijuego-widget--hit, .minijuego-widget--miss, .minijuego-widget--hit::after, .minijuego-widget--miss::after, .minijuego-resultado { animation: none; }
}
html[data-reducido] :is(.minijuego, .minijuego-widget--hit, .minijuego-widget--miss, .minijuego-widget--hit::after, .minijuego-widget--miss::after, .minijuego-resultado) { animation: none; }

/* ---------- la tecla de un botón (1, 2 de la charla; V de "¡Vamos!") ---------- */
.minijuego-atajo {
  flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte); font: 600 11px / 1 var(--f-mono); font-style: normal; color: var(--ink-dim);
}

/* ---------- la charla del coach (el mapa decisivo): dos filas con su tecla ---------- */
.minijuego-charla { display: grid; gap: 8px; }
.minijuego-charla-pregunta { margin: 0 0 4px; font-size: 14px; line-height: 1.4; color: var(--ink-dim); }
.minijuego-charla-opcion {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 16px;
  border-radius: var(--r-control); background: var(--panel-hondo); box-shadow: inset 0 0 0 1px var(--linea);
  font: 700 15px / 1.3 var(--f-cuerpo); color: var(--ink); transition: background-color 140ms ease, box-shadow 140ms ease;
}
.minijuego-charla-opcion:hover, .minijuego-charla-opcion:focus-visible { background: var(--luz-tenue); box-shadow: inset 0 0 0 1px var(--luz-fuerte), inset 3px 0 0 var(--luz); }
.minijuego-charla-opcion:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.minijuego-charla-label { flex: 1 1 0; min-width: 0; }
.minijuego-charla-p { flex: none; font: 900 18px / 1 var(--f-display); font-stretch: var(--ancho-numero); font-variant-numeric: tabular-nums; color: var(--luz-texto); white-space: nowrap; }
/* G1: la charla baja la vara, no mueve un %: el efecto va en su propia línea, en palabras */
.minijuego-charla-opcion--vara { flex-wrap: wrap; row-gap: 2px; padding-block: 10px; }
.minijuego-charla-vara { flex: 1 1 100%; font: 600 13px / 1.35 var(--f-cuerpo); font-stretch: normal; white-space: normal; color: var(--luz-texto); }

/* ---------- "¡Vamos!": el aro de ceremonia (el reloj no corre hasta tocarlo) ---------- */
.minijuego-espera { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.minijuego-espera-nota { margin: 0; flex: 1 1 200px; min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-dim); }
.minijuego-espera-boton {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 230px; height: 58px; padding: 0 28px; border-radius: 999px;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--gold) 26%, var(--panel-hondo)), var(--panel-hondo) 70%);
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 5px var(--panel-hondo), 0 0 0 6px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 34px -4px color-mix(in srgb, var(--gold) 45%, transparent);
  font: 900 22px / 1 var(--f-display); font-stretch: var(--ancho-momento); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  transition: transform 120ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.minijuego-espera-boton::after {
  content: ''; position: absolute; inset: -12px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); animation: mj-aro 2400ms ease-in-out infinite;
}
@keyframes mj-aro { 50% { transform: scale(1.04); opacity: 0.4; } }
.minijuego-espera-boton:hover { filter: brightness(1.12); box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 5px var(--panel-hondo), 0 0 0 6px var(--gold), 0 0 46px -2px color-mix(in srgb, var(--gold) 60%, transparent); }
.minijuego-espera-boton:active { transform: scale(0.97); }
.minijuego-espera-boton:focus-visible { outline: 2px solid var(--ink); outline-offset: 10px; }
.minijuego-espera-boton .minijuego-atajo { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent); }
html[data-reducido] .minijuego-espera-boton::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .minijuego-espera-boton::after { animation: none; } }

/* ---------- el veredicto: una tarjeta con su color ---------- */
.minijuego-resultado {
  --mj-res: var(--gold);
  display: grid; justify-items: center; gap: 8px; padding: 26px 20px; text-align: center; border-radius: var(--r-control);
  background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--mj-res) 16%, transparent), transparent 70%), var(--panel-hondo);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-res) 55%, var(--linea)), inset 0 2px 0 var(--mj-res);
  animation: mj-resultado 360ms var(--expo) both;
}
@keyframes mj-resultado { from { opacity: 0; transform: scale(0.96); } }
.minijuego-resultado--bien { --mj-res: var(--up); }
.minijuego-resultado--parejo { --mj-res: var(--gold); }
.minijuego-resultado--mal { --mj-res: var(--down); }
.minijuego-resultado-titulo {
  font: 900 clamp(34px, 4vw, 52px) / 0.95 var(--f-display); font-stretch: var(--ancho-momento); letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--mj-res); text-shadow: 0 0 40px color-mix(in srgb, var(--mj-res) 40%, transparent);
}
.minijuego-resultado-detalle { max-width: 62ch; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--ink-dim) 60%, var(--ink)); }
.minijuego-resultado-p { font: 700 13px / 1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--luz-texto); }
.minijuego-resultado-vara { color: var(--ink); }

/* ---------- los botones y las piezas de las mecánicas ---------- */
.minijuego-btn {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
  border-radius: var(--r-control); background: color-mix(in srgb, var(--mj-luz) 12%, var(--panel-hondo)); box-shadow: inset 0 0 0 1px var(--mj-luz);
  font: 700 13px / 1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
.minijuego-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--mj-luz) 26%, var(--panel-hondo)); box-shadow: inset 0 0 0 1px var(--mj-luz), 0 0 22px -4px color-mix(in srgb, var(--mj-luz) 55%, transparent); }
.minijuego-btn:active:not(:disabled) { transform: scale(0.97); }
.minijuego-btn:disabled { opacity: 0.45; cursor: default; }
.minijuego-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.minijuego-mover .minijuego-btn { min-width: 72px; }

.minijuego-aviso { padding: 22px 0; text-align: center; font: 900 clamp(30px, 3.4vw, 44px) / 1 var(--f-display); font-stretch: var(--ancho-momento); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mj-luz); }
.minijuego-aim-info { font: 600 var(--t-rotulo) / 1.2 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-dim); }

/* la barra de tiempo */
.minijuego-barra-tiempo { height: 8px; margin-bottom: 16px; border-radius: 999px; background: var(--oscuro-total); overflow: hidden; }
.minijuego-barra-tiempo-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--down), var(--warn)); }

/* las cartas (la llamada) */
.minijuego-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.minijuego-card {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 140px; padding: 16px; text-align: center; border-radius: var(--r-control);
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--linea); font: 500 14px / 1.35 var(--f-cuerpo); color: var(--ink);
}
.minijuego-card:hover { box-shadow: inset 0 0 0 1px var(--mj-luz), 0 0 22px -6px color-mix(in srgb, var(--mj-luz) 55%, transparent); }

/* el slider (la rueda de prensa) y sus pistas */
.minijuego-slider { width: 100%; margin: 12px 0; accent-color: var(--luz); }
.minijuego-slider-labels { display: flex; justify-content: space-between; margin-bottom: 12px; font: 500 11px / 1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.minijuego-pistas { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-control); background: var(--panel); box-shadow: inset 3px 0 0 var(--luz); color: var(--ink); font-size: 14px; }
.minijuego-pistas-kicker { margin-bottom: 8px; font: 700 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--luz-texto); }
.minijuego-pistas-lista { margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.minijuego-pistas-lista li + li { margin-top: 4px; }

/* dodge: los carriles */
.minijuego-carriles { display: flex; gap: 8px; height: 100px; margin: 16px 0 12px; }
.minijuego-carril { position: relative; flex: 1; border-radius: var(--r-control); background: var(--oscuro-total); box-shadow: inset 0 0 0 1px var(--linea); }
.minijuego-carril[data-peligro="si"] { background: color-mix(in srgb, var(--down) 18%, var(--oscuro-total)); box-shadow: inset 0 0 0 1px var(--down); }
.minijuego-carril[data-yo="si"]::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 14px var(--luz); }
.minijuego-carril[data-impacto="acierto"] { background: color-mix(in srgb, var(--down) 55%, var(--oscuro-total)); }
.minijuego-carril[data-impacto="fallo"] { background: color-mix(in srgb, var(--up) 18%, var(--oscuro-total)); box-shadow: inset 0 0 0 1px var(--up); }

@media (max-width: 640px) {
  .minijuego { padding: 18px 16px 18px; }
  .minijuego-widget { padding: 14px; }
  .minijuego-espera-boton { width: 100%; }
  .minijuego-charla-opcion { gap: 10px; font-size: 14px; }
  .minijuego-charla-p { font-size: 16px; }
}

/* ==========================================================================
   G1 (PLANUI §0.9): LA FINAL CON LAS MANOS. El camino del torneo y la tira de
   mapas (lo que hace que una final se sienta final: el oro de la copa, el
   marcador grande, el mapa que se juega latiendo), la mesa (la vara, el poder,
   DESEMPATE o REVANCHA, la charla, el premio) y el veredicto con su sello.
   Beats de 300-700 ms, sin bloquear; nada se anima con motion reducido.
   ========================================================================== */
[data-g1] { --mj-luz: var(--gold); }
.g1-camino {
  position: relative; display: grid; gap: 10px; margin: -4px 0 4px; padding: 14px 16px 12px; border-radius: var(--r-control); overflow: hidden;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--gold) 13%, transparent), transparent 46%),
    radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%), var(--panel-hondo);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 32%, var(--linea)), inset 0 2px 0 var(--gold);
  animation: g1-entra 460ms var(--expo) both;
}
@keyframes g1-entra { from { opacity: 0; transform: translateY(-8px); } }
.g1-torneo { margin: 0; font: 700 var(--t-rotulo) / 1.2 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--gold); }
.g1-etapas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.g1-etapas li {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--r-chip);
  font: 700 11px / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
  box-shadow: inset 0 0 0 1px var(--linea); animation: g1-pip 380ms var(--expo) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.g1-etapas li[data-estado="ganada"] { color: var(--up); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 45%, transparent); }
.g1-etapas li[data-estado="perdida"] { color: var(--down); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--down) 45%, transparent); }
.g1-etapas li[data-estado="actual"] { color: var(--oscuro-total); background: var(--gold); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--gold) 70%, transparent); }
.g1-etapas i { font-style: normal; }
@keyframes g1-pip { from { opacity: 0; transform: translateY(5px) scale(0.96); } }

.g1-serie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.g1-marcador { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g1-equipo { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font: 800 14px / 1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.g1-equipo--ellos { flex-direction: row-reverse; color: var(--ink-dim); }
.g1-logo { width: 26px; height: 26px; flex: none; }
.g1-goles {
  display: inline-grid; place-items: center; min-width: 40px; height: 44px; padding: 0 6px; border-radius: 8px;
  font: 900 34px / 1 var(--f-display); font-stretch: var(--ancho-numero); font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--oscuro-total); box-shadow: inset 0 0 0 1px var(--linea-fuerte);
}
.g1-goles[data-lado="nos"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), inset 0 -2px 0 var(--gold); }
.g1-goles[data-suma] { animation: g1-suma 560ms var(--expo); }
@keyframes g1-suma { 0% { transform: scale(1); } 30% { transform: scale(1.22); color: var(--gold); } 100% { transform: scale(1); } }
.g1-guion { font: 900 22px / 1 var(--f-display); font-style: normal; color: var(--ink-mute); }
.g1-mapas { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.g1-mapas li {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 6px;
  font: 700 11px / 1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
  background: color-mix(in srgb, var(--oscuro-total) 60%, transparent); box-shadow: inset 0 0 0 1px var(--linea);
  animation: g1-pip 380ms var(--expo) both; animation-delay: calc(120ms + var(--i, 0) * 60ms);
}
.g1-mapas i { font-style: normal; font-size: 13px; }
.g1-mapas li[data-res="W"] { color: var(--up); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 50%, transparent), inset 0 -2px 0 var(--up); }
.g1-mapas li[data-res="L"] { color: var(--down); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--down) 50%, transparent), inset 0 -2px 0 var(--down); }
.g1-mapas li[data-res="casi"] { color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); }
.g1-mapas li[data-res="actual"] {
  color: var(--ink); background: color-mix(in srgb, var(--gold) 18%, var(--panel-hondo));
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 18px -4px color-mix(in srgb, var(--gold) 70%, transparent);
  animation: g1-pip 380ms var(--expo) both, g1-late 1600ms ease-in-out 700ms infinite;
}
@keyframes g1-late { 50% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 26px -2px color-mix(in srgb, var(--gold) 85%, transparent); } }
.g1-momento {
  justify-self: start; margin: 0; padding: 5px 10px; border-radius: var(--r-chip);
  font: 800 12px / 1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); animation: g1-pip 420ms var(--expo) 380ms both;
}
.g1-momento[data-tono="peligro"] { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }

.g1-swiss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.g1-swiss-record { font: 900 38px / 1 var(--f-display); font-stretch: var(--ancho-numero); font-variant-numeric: tabular-nums; color: var(--ink); }
.g1-swiss-pips { display: inline-flex; align-items: center; gap: 5px; }
.g1-swiss-pips i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); animation: g1-pip 360ms var(--expo) both; animation-delay: calc(var(--i, 0) * 60ms); }
.g1-swiss-pips i[data-tipo="v"][data-llena] { background: var(--up); box-shadow: 0 0 10px -2px var(--up); }
.g1-swiss-pips i[data-tipo="d"][data-llena] { background: var(--down); box-shadow: 0 0 10px -2px var(--down); }
.g1-swiss-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--linea-fuerte); }
.g1-swiss small { font: 600 11px / 1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
/* con el reloj corriendo, el camino se achica a la tira (sigue a la vista: el marcador no se esconde) */
[data-g1][data-fase="juego"] .g1-camino { padding: 8px 14px; gap: 6px; }
[data-g1][data-fase="juego"] .g1-camino :is(.g1-etapas, .g1-momento, .g1-swiss small) { display: none; }

/* ---------- la mesa: la vara, los chips, el premio ---------- */
.g1-mesa { display: grid; gap: 10px; animation: g1-entra 420ms var(--expo) 160ms both; }
.g1-regla {
  display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-control);
  background: var(--panel-hondo); box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px var(--linea);
}
.g1-regla-k { font: 700 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--gold); }
.g1-regla-texto { margin: 0; font: 800 clamp(18px, 2.2vw, 22px) / 1.2 var(--f-display); color: var(--ink); }
.g1-regla-antes { font-size: 13px; color: var(--ink-mute); }
.g1-regla-antes[hidden] { display: none; }
.g1-regla-stat { font: 500 11px / 1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.g1-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g1-chip {
  display: inline-grid; align-content: center; gap: 2px; min-height: 40px; padding: 7px 12px; border-radius: var(--r-control);
  background: var(--panel-hondo); box-shadow: inset 0 0 0 1px var(--linea); color: var(--ink); font-size: 13px; line-height: 1.3; text-align: left;
}
.g1-chip b { font-weight: 800; }
.g1-chip small { color: var(--ink-dim); font-size: 12px; max-width: 46ch; }
.g1-poder-k { font: 700 10px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
button.g1-poder {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: inline-grid; align-content: center; gap: 2px; min-height: 40px; padding: 7px 12px 7px 40px;
  border-radius: var(--r-control); background: var(--panel-hondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, var(--linea)); color: var(--ink); font-size: 13px; line-height: 1.3;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
button.g1-poder::before { content: '✦'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--gold); transition: transform 300ms var(--expo); }
button.g1-poder:hover { background: color-mix(in srgb, var(--gold) 8%, var(--panel-hondo)); }
button.g1-poder:active { transform: scale(0.98); }
button.g1-poder:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button.g1-poder[aria-pressed="true"] {
  background: color-mix(in srgb, var(--gold) 20%, var(--panel-hondo));
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px -6px color-mix(in srgb, var(--gold) 80%, transparent);
}
button.g1-poder[aria-pressed="true"]::before { transform: translateY(-50%) rotate(180deg) scale(1.15); }
button.g1-poder[aria-pressed="true"] .g1-poder-k { color: var(--gold); }
button.g1-poder:disabled { cursor: default; }
.g1-poder[data-usado] { opacity: 0.55; }
.g1-rotulo { min-height: 0; padding: 8px 12px; font: 800 12px / 1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.g1-rotulo[data-tipo="desempate"] { color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); }
.g1-rotulo[data-tipo="revancha"] { color: var(--down); box-shadow: inset 0 0 0 1.5px var(--down); }
.g1-charla[data-vacia] { opacity: 0.6; }
.g1-charla[data-usada] { box-shadow: inset 0 0 0 1.5px var(--gold); }
.g1-desempate[data-queda] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, var(--linea)); }
.g1-desempate .g1-poder-k { color: var(--gold); }
.g1-premio { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; padding: 10px 14px; border-radius: var(--r-control); background: var(--panel-hondo); box-shadow: inset 0 0 0 1px var(--linea); font-size: 13px; }
.g1-premio span { font: 700 10px / 1.6 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
/* jugando: la vara queda (se juega contra ella); los chips se pliegan al poder activo */
.g1-mesa[data-jugando] .g1-regla { padding: 8px 14px; }
.g1-mesa[data-jugando] :is(.g1-charla, .g1-premio, .g1-regla-stat, button.g1-poder[aria-pressed="false"], div.g1-poder) { display: none; }
.g1-mesa[data-jugando] button.g1-poder small { display: none; }
[data-g1][data-fase="resultado"] .g1-mesa { display: none; }

/* ---------- el veredicto: el sello ---------- */
.g1-veredicto { gap: 10px; }
.g1-veredicto-sello {
  padding: 8px 20px 6px; border-radius: 6px; font: 900 clamp(30px, 5vw, 44px) / 1 var(--f-display); font-stretch: var(--ancho-momento);
  letter-spacing: 0.08em; color: var(--mj-res); box-shadow: inset 0 0 0 3px var(--mj-res);
  transform: rotate(-3deg); animation: g1-sello 520ms cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes g1-sello { 0% { opacity: 0; transform: rotate(-3deg) scale(1.7); } 60% { opacity: 1; } 100% { transform: rotate(-3deg) scale(1); } }
.g1-cerca { font: 700 13px / 1.4 var(--f-mono); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink); animation: g1-pip 380ms var(--expo) 420ms both; }

/* ---------- el sello del Bo1 con riesgo (en la opción del cara a cara) ---------- */
.g1-sello-riesgo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-left: 10px; vertical-align: middle; }
.g1-sello-riesgo b { padding: 3px 7px; border-radius: 4px; font: 800 10px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.g1-sello-riesgo[data-riesgo="arriesgado"] b { color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.g1-sello-riesgo[data-riesgo="seguro"] b { color: var(--up); box-shadow: inset 0 0 0 1px var(--up); }
.g1-sello-riesgo small { font: 500 12px / 1.3 var(--f-cuerpo); color: var(--ink-dim); text-transform: none; letter-spacing: 0; }

/* ---------- el stream del Swiss: la ronda se juega en la tarjeta ----------
   La tarjeta con juego va en una sola columna y en el flujo, debajo del video: así no tapa el tablero del Swiss (la de
   predicción, sin juego, sigue flotando sobre el video en el escritorio). */
.tx-pr[data-g1] { grid-template-columns: minmax(0, 1fr); }
.tx-pr[data-g1] > * { grid-column: 1 / -1; grid-row: auto; }
@container tx-col (min-width: 1000px) {
  .tx-sw-stream > .tx-pr[data-g1] { position: relative; left: auto; top: auto; translate: none; width: min(100%, 760px); margin: -48px auto 0; }
}
.tx-sw-campeon b { color: var(--ink); }
.tx-pr .g1-juego { display: grid; gap: 10px; margin-top: 8px; }
.tx-pr:is([data-fase="juego"], [data-fase="resultado"]) .g1-apuesta { display: none; }
.tx-pr .g1-juego .minijuego-widget { margin-top: 0; }
.tx-pr .g1-juego-titulo { margin: 0; font: 800 15px / 1.25 var(--f-display); color: var(--ink); }

@media (max-width: 640px) {
  .g1-camino { padding: 12px; }
  .g1-goles { min-width: 34px; height: 38px; font-size: 28px; }
  .g1-equipo .g1-sigla { font-size: 12px; }
  .g1-mapas li { height: 28px; padding: 0 9px; font-size: 11px; }
  .g1-mapa-palabra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.g1-camino, .g1-mesa, .g1-etapas li, .g1-mapas li, .g1-momento, .g1-swiss-pips i, .g1-goles, .g1-veredicto-sello, .g1-cerca, .mj-pizarra-carta) { animation: none !important; }
}
html[data-reducido] :is(.g1-camino, .g1-mesa, .g1-etapas li, .g1-mapas li, .g1-momento, .g1-swiss-pips i, .g1-goles, .g1-veredicto-sello, .g1-cerca, .mj-pizarra-carta) { animation: none !important; }

/* ==========================================================================
   EL ARCADE (H3k, PLANUI §0.10): las mecánicas de canvas. El lienzo ocupa el ancho de la cancha y se dibuja solo (tokens
   leídos en vivo por `ui/arcade/kit.js`); acá van el marco, los botones grandes para el toque y el suspenso del sello.
   ========================================================================== */
.arc { display: grid; gap: 10px; }
.arc-lienzo {
  display: block; width: 100%; border-radius: var(--r-control, 6px); background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--linea-fuerte), 0 18px 40px -24px var(--sombra);
  touch-action: none; cursor: crosshair; outline: none;
}
.arc-lienzo:focus-visible { box-shadow: inset 0 0 0 2px var(--luz-escenario); }
.arc-botones { display: flex; justify-content: center; gap: 10px; }
.arc-boton {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 26px; border: 0; border-radius: 999px;
  background: var(--bg-raised); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-hondo);
  font: 800 16px / 1 var(--f-display); letter-spacing: 0.08em; cursor: pointer; touch-action: manipulation;
  transition: transform 120ms var(--expo), box-shadow 120ms;
}
.arc-boton:active { transform: scale(0.96); box-shadow: inset 0 0 0 2px var(--gold); }
.arc-boton[disabled] { color: var(--ink-mute); box-shadow: inset 0 0 0 1px var(--linea); cursor: default; }
.arc-boton kbd { font: 600 11px / 1 var(--f-mono); color: var(--ink-mute); }
.arc-pie { margin: 0; text-align: center; font-size: 13px; color: var(--ink-mute); }
/* con mouse y teclado el botón grande sobra: queda para el toque */
@media (hover: hover) and (pointer: fine) { .arc-botones { display: none; } }

/* el suspenso antes del sello: la pista que se llena, la vara y el número */
.mj-suspenso { display: grid; gap: 10px; justify-items: center; padding: 22px 8px; }
.mj-suspenso-rotulo { font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-mute); }
.mj-suspenso-pista { position: relative; width: min(100%, 520px); height: 14px; border-radius: 999px; background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--linea-fuerte); overflow: hidden; }
.mj-suspenso-relleno { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--warn); box-shadow: 0 0 16px var(--warn); }
.mj-suspenso[data-supera] .mj-suspenso-relleno { background: var(--up); box-shadow: 0 0 18px var(--up); }
.mj-suspenso-vara { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: var(--ink); }
.mj-suspenso-numero { font: 800 44px / 1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.mj-suspenso[data-supera] .mj-suspenso-numero { color: var(--up); }

/* ---------- H3u: la tanda (el Swiss de a varios, el Play-In), la transición entre partidos y tu mejor marca ---------- */
.g1-tanda { display: grid; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-control); background: var(--panel); box-shadow: inset 0 0 0 1px var(--linea); }
.g1-tanda-titulo { margin: 0; font: 800 22px / 1 var(--f-display); font-stretch: 115%; letter-spacing: 0.08em; color: var(--gold); }
.g1-tanda-apuesta { margin: 0; color: var(--ink-dim); font-size: 14px; line-height: 1.35; }
.g1-tanda-partidos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.g1-tanda-partidos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: var(--r-control); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--linea); }
.g1-tanda-n { grid-column: 1; font: 600 10.5px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.g1-tanda-rival { grid-column: 1; font: 700 14px / 1.2 var(--f-cuerpo); overflow-wrap: anywhere; }
.g1-tanda-partidos li > i { grid-column: 2; grid-row: 1 / 3; font: 800 18px / 1 var(--f-display); font-style: normal; }
.g1-tanda-partidos li[data-res="actual"] { box-shadow: inset 0 0 0 2px var(--gold); }
.g1-tanda-partidos li[data-res="W"] > i { color: var(--up); }
.g1-tanda-partidos li[data-res="L"] > i { color: var(--down); }
.g1-tanda-partidos li[data-res="casi"] > i { color: var(--warn); }
.mj-transicion { display: grid; gap: 8px; justify-items: center; padding: 30px 8px; text-align: center; }
.mj-transicion-previo { font: 800 20px / 1 var(--f-display); font-stretch: 110%; letter-spacing: 0.06em; color: var(--ink-dim); }
.mj-transicion[data-juicio="paso"] .mj-transicion-previo { color: var(--up); }
.mj-transicion[data-juicio="no"] .mj-transicion-previo { color: var(--down); }
.mj-transicion[data-juicio="casi"] .mj-transicion-previo { color: var(--warn); }
.mj-transicion-sig { font: 600 15px / 1.3 var(--f-mono); color: var(--ink); }
/* PLANUI §0.10 H3 (lo que corrige el usuario): los partidos de la tanda que siguen al minijuego, de a un clic */
.mj-clic { min-height: 160px; align-content: center; animation: mj-entra 220ms ease-out; }
.mj-clic-boton { margin-top: 6px; }
.mj-clic[data-fase="jugando"] .mj-clic-boton { animation: mj-aro 600ms ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mj-clic, .mj-clic[data-fase="jugando"] .mj-clic-boton { animation: none; } }
.g1-marca { margin-top: 6px; font: 600 12px / 1.3 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-mute); }
.g1-marca[data-nueva] { color: var(--gold); }