/* Mediterranean Cup · cal y añil, con la paleta del muelle.
   Una pared de cal lleva la información; lo vivo se enmarca en marino, con arcos y contraventanas.
   El color de tipos y sprites solo vive dentro de marcos (chips, escena, retratos).

   Índice: tokens (:root, la única fuente de colores, sombras, radios y curvas) · piezas comunes
   (botones, píldoras, pestañas, campos, tablas) · barra y pie · directo · escena (placas, caja de
   texto, clima, efectos, cartel de habilidad, contraventanas) · equipos · serie · comentaristas ·
   capa OBS · arena · torneo, perfil, créditos y participantes · administración · adaptación y
   movimiento reducido · el Directo con varios combates · el torneo por fases · el combate (VS,
   sellos y destellos). */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Power Clear"; src: url("fonts/power-clear.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Power Clear"; src: url("fonts/power-clear-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* Tanda 4: la paleta del muelle. Cal fría y papel; marino para marcos y texto; azul Egeo para lo
     que se pulsa y el lado A; terracota para «en directo», el KO y el lado B; limón para el ganador
     y el crítico; olivo para «listo»; turquesa para la espera y el mar. (Los nombres de siempre
     siguen: --anil es el marino, --puerta el Egeo, --geranio la terracota, --albero el limón.) */
  --cal: #f4f7fb;            /* la pared */
  --cal-2: #e8eef6;          /* la pared en sombra */
  --paper: #ffffff;
  --anil: #0b2140;           /* marino: puertas, marcos y texto */
  --anil-2: #14345f;
  --anil-3: #214a80;
  --ink: #0b2140;
  --ink-2: #2e4668;
  --ink-3: #536787;
  --rule: #d9e1ec;
  --rule-2: #c1cede;
  --puerta: #0b5cb8;         /* azul Egeo: lo que se pulsa; también el lado A */
  --puerta-2: #084a96;
  --geranio: #c2502a;        /* terracota: en directo, KO; también el lado B */
  --albero: #f4c724;         /* limón: el ganador, el crítico */
  --albero-ink: #6b5300;
  --persiana: #5a7a1e;       /* olivo: listo, conectado */
  --turquesa: #14a39e;       /* la espera del turno y el mar */
  --turquesa-ink: #0a6e6a;
  --turquesa-bg: #ddf3f1;
  --a-light: #9fc6ff;        /* los lados sobre marino */
  --b-light: #ffb699;
  --warn: #9a5a00;
  --warn-bg: #fff3dc;
  --bad: #b4232c;
  --bad-bg: #fdeceb;
  --a: var(--puerta);
  --b: var(--geranio);
  --hp-high: #34c062; --hp-mid: #f4c724; --hp-low: #e5472b;
  --shadow-sm: 0 1px 2px rgba(11, 33, 64, 0.06), 0 2px 6px -2px rgba(11, 33, 64, 0.08);
  --shadow: 0 1px 2px rgba(11, 33, 64, 0.05), 0 14px 32px -18px rgba(11, 33, 64, 0.32);
  --shadow-lg: 0 2px 4px rgba(11, 33, 64, 0.06), 0 28px 60px -28px rgba(11, 33, 64, 0.45);
  --r: 12px;
  --r-sm: 8px;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Power Clear", "Archivo", monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-shutter: cubic-bezier(0.32, 0.72, 0, 1);
  /* El mar: capas de olas en SVG propio. Cada trazado es periódico (acaba a la misma altura y con la misma
     pendiente con que empieza) y se dibuja de -P a 2P para que el lienzo lo recorte sin costura al repetirse.
     El borde (16px) cuelga de la barra y del rótulo de la Retransmisión; el hondo (64px), el Inicio y el
     muelle vacío. De atrás a delante: menos opaco, ondas más largas y más despacio. */
  --sea-edge-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M-260 11C-216.67 7.6 -173.33 7.6 -130 11S-43.33 14.4 0 11S86.67 7.6 130 11S216.67 14.4 260 11S346.67 7.6 390 11S476.67 14.4 520 11V0H-260Z' fill='%2314a39e' fill-opacity='0.36'/%3E%3C/svg%3E");
  --sea-edge-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 16'%3E%3Cpath d='M-190 7.5C-158.33 4.7 -126.67 4.7 -95 7.5S-31.67 10.3 0 7.5S63.33 4.7 95 7.5S158.33 10.3 190 7.5S253.33 4.7 285 7.5S348.33 10.3 380 7.5V0H-190Z' fill='%230b5cb8' fill-opacity='0.5'/%3E%3Cpath d='M-190 7.5C-158.33 4.7 -126.67 4.7 -95 7.5S-31.67 10.3 0 7.5S63.33 4.7 95 7.5S158.33 10.3 190 7.5S253.33 4.7 285 7.5S348.33 10.3 380 7.5' fill='none' stroke='%2314a39e' stroke-width='1.4' stroke-opacity='0.95'/%3E%3C/svg%3E");
  --sea-edge-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 16'%3E%3Cpath d='M-140 4.5C-116.67 2.2 -93.33 2.2 -70 4.5S-23.33 6.8 0 4.5S46.67 2.2 70 4.5S116.67 6.8 140 4.5S186.67 2.2 210 4.5S256.67 6.8 280 4.5V0H-140Z' fill='%230b2140'/%3E%3C/svg%3E");
  --sea-deep-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='10' x2='0' y2='64' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239fc6ff' stop-opacity='0.7'/%3E%3Cstop offset='1' stop-color='%230b5cb8' stop-opacity='0.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-480 22C-400 10 -320 10 -240 22S-80 34 0 22S160 10 240 22S400 34 480 22S640 10 720 22S880 34 960 22V64H-480Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --sea-deep-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='23' x2='0' y2='64' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314a39e' stop-opacity='0.62'/%3E%3Cstop offset='1' stop-color='%230a6e6a' stop-opacity='0.4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-340 33C-283.33 23 -226.67 23 -170 33S-56.67 43 0 33S113.33 23 170 33S283.33 43 340 33S453.33 23 510 33S623.33 43 680 33V64H-340Z' fill='url(%23g)'/%3E%3Cpath d='M-340 33C-283.33 23 -226.67 23 -170 33S-56.67 43 0 33S113.33 23 170 33S283.33 43 340 33S453.33 23 510 33S623.33 43 680 33' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='0.45'/%3E%3C/svg%3E");
  --sea-deep-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='36.5' x2='0' y2='64' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230b5cb8' stop-opacity='0.82'/%3E%3Cstop offset='1' stop-color='%23084a96' stop-opacity='0.95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-230 44C-191.67 36.5 -153.33 36.5 -115 44S-38.33 51.5 0 44S76.67 36.5 115 44S191.67 51.5 230 44S306.67 36.5 345 44S421.67 51.5 460 44V64H-230Z' fill='url(%23g)'/%3E%3Cpath d='M-230 44C-191.67 36.5 -153.33 36.5 -115 44S-38.33 51.5 0 44S76.67 36.5 115 44S191.67 51.5 230 44S306.67 36.5 345 44S421.67 51.5 460 44' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-opacity='0.7'/%3E%3C/svg%3E");
  /* Tintes de estado (una sola fuente): en directo, listo, ganador, hecho; subidas y bajadas de stats. */
  --live-bg: #fbe8e0; --live-ink: #93361a; --live-edge: #efb2a5;
  --ready-bg: #eef3df; --ready-ink: #445d16; --ready-edge: #d4e0b4;
  --win-bg: #fff5cc; --done-bg: #e6edf8;
  --up-bg: #fde5dd; --up-ink: #a12d14; --down-bg: #e0e9fb; --down-ink: #1f4598;
  --edge: #dbe5f4;           /* el filo interior de placas, caja de texto y alféizar */
  --hp-track: #1c2f4d;
  --lemon-on-navy: #ffe38a;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cal); color: var(--ink); font: 400 15px/1.5 var(--font); -webkit-text-size-adjust: 100%; font-stretch: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
main { flex: 1; outline: none; }
::selection { background: var(--turquesa-ink); color: var(--paper); }
a { color: var(--puerta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--puerta-2); }
:focus-visible { outline: 2.5px solid var(--puerta); outline-offset: 2px; border-radius: 4px; }
img, .poke-sprite, .poke-icon, .trainer-sprite, .ball, .status-chip, .charset-portrait, .actor-sprite, .mega-icon, .portrait, .poke-ball, .scene-bg { image-rendering: pixelated; }
* { scrollbar-color: var(--rule-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 10px; border: 2px solid var(--cal); }
::-webkit-scrollbar-track { background: transparent; }
h1, h2, h3, p { margin: 0; }
input, select, textarea, button { font: inherit; color: inherit; }
code { font: 500 0.92em/1.3 ui-monospace, "SF Mono", Menlo, monospace; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--anil); color: var(--paper); padding: 8px 14px; border-radius: var(--r-sm); font-weight: 700; }
.skip:focus { top: 12px; }
.skip:hover { color: var(--paper); }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.boot { padding: 80px 24px; text-align: center; color: var(--ink-3); }
.empty { color: var(--ink-3); padding: 6px 0; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ piezas */
.icon { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.icon svg { width: 100%; height: 100%; display: block; }
.icon-live svg { color: var(--geranio); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm); transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.btn:hover { border-color: var(--anil-3); color: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
.btn-primary { background: var(--anil); border-color: var(--anil); color: var(--paper); }
.btn-primary:hover { background: var(--anil-2); border-color: var(--anil-2); color: var(--paper); }
.btn-quiet { background: transparent; box-shadow: none; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--paper); }
.btn-danger:hover { background: #961c24; border-color: #961c24; color: var(--paper); }
.btn-danger-quiet { color: var(--bad); border-color: #ecc4c4; box-shadow: none; background: var(--paper); }
.btn-danger-quiet:hover { border-color: var(--bad); color: var(--bad); }
.btn-small { min-height: 30px; padding: 0 11px; font-size: 13px; gap: 6px; }
.btn-on-navy { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.35); box-shadow: none; }
.btn-on-navy:hover { border-color: var(--paper); color: var(--paper); }
.icon-link { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: var(--anil); border: 1px solid var(--rule); background: var(--paper); transition: transform 140ms var(--ease-out), border-color 160ms; }
.icon-link:hover { border-color: var(--anil-3); color: var(--anil); }
.icon-link:active { transform: scale(0.94); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; text-decoration: none;
  background: var(--cal-2); color: var(--ink-2); border: 1px solid transparent;
}
.pill .icon { width: 14px; height: 14px; }
a.pill { transition: transform 140ms var(--ease-out), border-color 160ms; }
a.pill:active { transform: scale(0.97); }
.pill-go { margin-left: 2px; }
.tone-live { background: var(--live-bg); color: var(--live-ink); }
.tone-live .icon-live svg { animation: pulse 1.6s ease-in-out infinite; }
a.tone-live:hover { border-color: var(--live-edge); color: #7f2e14; }
.tone-ready { background: var(--ready-bg); color: var(--ready-ink); }
.tone-ready .icon-live svg { color: var(--persiana); }
.tone-done { background: var(--done-bg); color: var(--anil); }
.tone-warn { background: var(--warn-bg); color: var(--warn); }
.tone-bad { background: var(--bad-bg); color: var(--bad); }
.tone-wait, .tone-quiet { background: var(--cal-2); color: var(--ink-3); }
@keyframes pulse { 50% { opacity: 0.35; } }

.tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: var(--cal-2); color: var(--ink-2); vertical-align: 1px; }
.tag-bad { background: var(--bad-bg); color: var(--bad); }
.tag-quiet { background: transparent; border: 1px solid var(--rule); color: var(--ink-3); }
.tag-random { background: var(--win-bg); color: var(--albero-ink); }

.presence { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); flex: none; display: inline-block; }
.presence.is-on { background: var(--persiana); box-shadow: 0 0 0 3px rgba(90, 122, 30, 0.16); }
.side-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; display: inline-block; background: var(--a); }
.side-dot.side-B { background: var(--b); }
.side-text-A { color: var(--a); }
.side-text-B { color: var(--b); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--geranio); display: inline-block; flex: none; }

.page-title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.1; }
.block { display: grid; gap: 14px; align-content: start; }
.block-title { font-size: 17px; font-weight: 750; font-stretch: 108%; letter-spacing: -0.01em; }
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow-sm); display: grid; gap: 16px; align-content: start; }
.card-title { font-size: 16px; font-weight: 750; font-stretch: 108%; }
.box-title { font-size: 15px; font-weight: 750; font-stretch: 106%; color: var(--ink); }

.tabs { display: flex; gap: 4px; padding: 4px; background: var(--cal-2); border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; }
.tab { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"], .tab[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }

.select, input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], input[type="datetime-local"], textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); transition: border-color 160ms, box-shadow 160ms;
}
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b2140' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; cursor: pointer; }
input, textarea { caret-color: var(--puerta); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--puerta); box-shadow: 0 0 0 3px rgba(11, 92, 184, 0.18); }
input:disabled, select:disabled { background: var(--cal-2); color: var(--ink-3); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: #7a8aa6; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--anil); margin: 0; }
input[type="range"] { accent-color: var(--anil); }
input[type="datetime-local"] { font: inherit; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 14px; border-top: 1px solid var(--rule); vertical-align: middle; }
thead th { border-top: 0; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; background: var(--cal); }
th.num, td.num { text-align: right; }
abbr { text-decoration: none; cursor: help; border-bottom: 1px dotted var(--rule-2); }

/* ------------------------------------------------------------------ barra superior y pie */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--anil); color: var(--paper); box-shadow: 0 10px 24px -16px rgba(6, 21, 43, 0.5); }
/* El mar (sea() en util.js): tres capas, cada una un periodo más ancha que su hueco, que se desplazan ese
   periodo con transform (solo composición: nada se repinta), cada una a su ritmo y la del medio en el otro
   sentido. Con «reducir movimiento», quietas. El borde de la barra es mar: cuelga de ella. */
.sea { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; contain: layout paint; }
.sea .wave { position: absolute; left: 0; width: calc(100% + var(--p)); height: var(--h); background: var(--img) 0 0 / var(--p) var(--h) repeat-x;
  animation: wave var(--t) linear infinite, swell var(--s) ease-in-out var(--d) infinite alternate;
  will-change: transform, translate; backface-visibility: hidden; }
.sea .wave:nth-child(2) { animation-direction: reverse, alternate; }
@keyframes wave { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--p) * -1), 0, 0); } }
/* El oleaje: cada capa sube y baja a su ritmo con translate (se suma al transform del avance, también solo
   composición). --a es hacia donde puede ir sin destapar el hueco: el borde de la barra sube, el mar del pie baja. */
@keyframes swell { from { translate: 0 0; } to { translate: 0 var(--a); } }
.sea-edge { top: 100%; height: 16px; }
.sea-edge .wave { top: 0; --h: 16px; }
.sea-edge .wave:nth-child(1) { --img: var(--sea-edge-1); --p: 260px; --t: 38s; --s: 4.6s; --d: -1.2s; --a: -3px; }
.sea-edge .wave:nth-child(2) { --img: var(--sea-edge-2); --p: 190px; --t: 25s; --s: 3.8s; --d: -2.9s; --a: -4px; }
.sea-edge .wave:nth-child(3) { --img: var(--sea-edge-3); --p: 140px; --t: 17s; --s: 3.1s; --d: -0.6s; --a: -3px; }
.sea-deep { bottom: 0; height: 64px; }
.sea-deep .wave { bottom: 0; --h: 64px; }
.sea-deep .wave:nth-child(1) { --img: var(--sea-deep-1); --p: 480px; --t: 46s; --s: 5.4s; --d: -2.1s; --a: 7px; }
.sea-deep .wave:nth-child(2) { --img: var(--sea-deep-2); --p: 340px; --t: 30s; --s: 4.4s; --d: -3.7s; --a: 9px; }
.sea-deep .wave:nth-child(3) { --img: var(--sea-deep-3); --p: 230px; --t: 20s; --s: 3.6s; --d: -0.9s; --a: 6px; }
.tb-inner { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 22px; min-height: 64px; padding: 0 22px; max-width: 1680px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; }
.brand:hover { color: var(--paper); }
.brand-name { font-weight: 800; font-stretch: 115%; font-size: 17px; letter-spacing: -0.01em; }
.tb-nav { display: flex; gap: 2px; }
.tb-nav a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 999px; transition: color 160ms, background-color 160ms; }
.tb-nav a:hover { color: var(--paper); background: rgba(255, 255, 255, 0.08); }
.tb-nav a[aria-current="page"] { color: var(--anil); background: var(--paper); }
.tb-nav a:focus-visible, .brand:focus-visible { outline-color: var(--albero); }
/* El marcador de la serie es una placa de combate: dos medias placas con el color de su lado, la
   cifra a tamaño cartel y las partidas que hacen falta en Poké Balls. */
.tb-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.tb-conn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.86); white-space: nowrap; }
.tb-conn .live-dot { box-shadow: 0 0 0 0 rgba(194, 80, 42, 0.6); }
.conn-live .live-dot { animation: beacon 2s ease-out infinite; }
.conn-reconnecting .live-dot, .conn-connecting .live-dot { background: var(--albero); }
.conn-offline .live-dot { background: #8090a8; }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(255, 120, 96, 0.7); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 120, 96, 0); } }
.demo-tag { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(244, 199, 36, 0.2); color: var(--lemon-on-navy); font-size: 11.5px; letter-spacing: 0.03em; }
.footer { margin-top: 40px; border-top: 1px solid var(--rule); background: var(--cal-2); }
.ft-inner { max-width: 1680px; margin: 0 auto; padding: 18px 22px 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }

/* cifras que ruedan */
[data-value] { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.roll-now, .roll-out { grid-area: 1 / 1; }
.roll-in { animation: roll-in 420ms var(--ease-out) both; }
.roll-out { animation: roll-out 320ms var(--ease-out) both; }
@keyframes roll-in { from { transform: translateY(70%); opacity: 0; filter: blur(2px); } }
@keyframes roll-out { to { transform: translateY(-70%); opacity: 0; filter: blur(2px); } }

/* ------------------------------------------------------------------ directo */
.live { max-width: 1680px; margin: 0 auto; padding: 20px 22px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 420px); gap: 24px; align-items: start; }
.live-main { display: grid; gap: 16px; min-width: 0; width: 100%; max-width: max(560px, calc((100svh - var(--chrome, 290px)) * 4 / 3 + 24px)); justify-self: center; }
.live-page:has(> .strip-wrap:not([hidden])) .live-main { --chrome: 346px; }
.live-side { display: grid; gap: 16px; position: sticky; top: 88px; }
.side-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.stage-area { display: grid; }

/* La crónica del turno */
.feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 17px; font-weight: 750; font-stretch: 106%; }
h2.feed-head { justify-content: flex-start; gap: 0; }
.feed-turn { font-weight: 800; font-stretch: 112%; font-size: 17px; line-height: 1; color: var(--anil); margin-left: 0.25em; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 12px; max-height: min(58vh, 560px); overflow-y: auto; }
.feed-turn-group { display: grid; gap: 4px; }
.feed-turn-group:not(.is-current) .feed-text { color: var(--ink-3); font-weight: 400; }
.feed-turn-group.is-current .feed-turn-title { display: none; }
.feed-turn-title { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; padding-bottom: 2px; border-bottom: 1px solid var(--rule); }
.feed-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.feed-line { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; font-size: 14px; }
.feed-line.is-new { animation: line-in 320ms var(--ease-out) both; }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } }
.feed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-2); justify-self: center; }
.feed-line.tone-super .feed-text, .feed-line.tone-crit .feed-text { font-weight: 700; }
.feed-line.tone-crit { background: var(--win-bg); }
.feed-line.tone-crit .feed-dot { background: var(--albero); }
.feed-line.tone-ko .feed-dot { background: var(--geranio); }
.feed-line.tone-ko .feed-text { font-weight: 700; color: var(--live-ink); }
.feed-line.tone-mega .feed-dot { background: var(--albero); width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); }
.feed-line.tone-weak .feed-text { color: var(--ink-3); }
.feed-line.tone-side-A .feed-dot { background: var(--a); }
.feed-line.tone-side-B .feed-dot { background: var(--b); }
.feed-line.tone-note .feed-text { color: var(--ink-3); font-style: italic; }
.feed-line.tone-ability .feed-dot, .feed-line.tone-random .feed-dot { background: var(--anil); border-radius: 2px; }
.feed-line.tone-random .feed-text::after { content: "Random"; margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: var(--win-bg); color: var(--albero-ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }

/* Mesas de la ronda, en corto */
.mini-tables { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mini-table { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.mini-table:first-child { border-top: 0; }
.mini-no { font-weight: 800; color: var(--ink-3); }
.mini-vs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mini-table .pill { font-size: 11.5px; white-space: normal; }

/* ------------------------------------------------------------------ la escena */
.scene-frame {
  position: relative; background: var(--anil); border-radius: 50% 50% 18px 18px / 64px 64px 18px 18px;
  padding: 40px 12px 12px; box-shadow: var(--shadow-lg);
}
/* Jamba: el arco tiene grosor (un filo interior); sin repisas que asomen de la silueta. */
.scene-frame::before { content: ""; position: absolute; inset: 5px; border-radius: inherit; border: 1.5px solid rgba(255, 255, 255, 0.13); pointer-events: none; }
.arch-label { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.82); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; max-width: 84%; }
.arch-text { overflow: hidden; text-overflow: ellipsis; }
.arch-short { display: none; }
.scene-frame { container-type: inline-size; }
@container (max-width: 560px) {
  .arch-long { display: none; }
  .arch-short { display: inline; }
}
.scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px 16px 6px 6px; background: #1b2f4f; isolation: isolate; }
.scene-canvas { position: absolute; left: 0; top: 0; width: 512px; height: 384px; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.scene-bg { position: absolute; inset: 0; width: 512px; height: 384px; }
.slot { position: absolute; width: 0; height: 0; z-index: var(--z, 1); }
.poke-sprite {
  position: absolute; left: 0; bottom: 0; width: var(--size, 0); height: var(--size, 0); transform: translateX(-50%);
  background-repeat: no-repeat; background-size: var(--strip) var(--size); opacity: 0; transition: opacity 200ms;
}
.poke-sprite.ready { opacity: 1; }
.poke-sprite.animated { animation-name: strip; animation-iteration-count: infinite; }
@keyframes strip { to { background-position-x: calc(var(--strip) * -1); } }
.slot.is-fainted .poke-sprite { opacity: 0; transform: translate(-50%, 46px); clip-path: inset(0 0 46px 0); transition: opacity 640ms ease-in, transform 640ms cubic-bezier(0.55, 0, 0.75, 0.2), clip-path 640ms cubic-bezier(0.55, 0, 0.75, 0.2); }
.slot[data-status="BURN"] .poke-sprite { filter: drop-shadow(0 0 0 transparent) sepia(0.2) saturate(1.25) hue-rotate(-12deg); }
.slot[data-status="POISON"] .poke-sprite { filter: saturate(1.1) hue-rotate(6deg) brightness(0.96); }
.slot[data-status="PARALYSIS"] .poke-sprite { filter: saturate(1.15) brightness(1.04); }
.slot[data-status="FROZEN"] .poke-sprite { filter: saturate(0.4) brightness(1.15) hue-rotate(160deg); }
.slot[data-status="SLEEP"] .poke-sprite { animation-play-state: paused; filter: brightness(0.92); }
.slot.fx-status { animation: status-shiver 600ms steps(6) 2; }
@keyframes status-shiver { 0%, 100% { transform: none; } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* Placas de PS: blanco de cal con el nombre en la letra del juego */
.plate-stack { position: absolute; display: grid; gap: 4px; z-index: 600; }
.plate-stack-B { left: 10px; top: 14px; }
.plate-stack-A { right: 10px; top: 206px; }
.is-double .plate-stack-A { top: 170px; gap: 3px; } /* sus efectos de lado, a la izquierda, por encima de la caja */
.is-double .plate-stack-B { gap: 3px; }
.plate {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px;
  width: 248px; padding: 5px 10px 5px 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.97);
  border: 2px solid var(--anil); box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 3px var(--edge), 0 4px 10px -4px rgba(11, 33, 64, 0.45); color: var(--anil);
  transition: opacity 300ms ease, transform 360ms var(--ease-out);
}
/* El lado se lee en la etiqueta PS: añil claro el A, geranio el B */
.plate-A .hp-label { background: var(--a); }
.plate-B .hp-label { background: var(--b); }
.plate.is-empty { opacity: 0; transform: translateY(-4px); }
.plate.is-swapping { opacity: 0.35; }
.plate.is-down { opacity: 0.55; }
.is-double .plate { width: 206px; padding: 3px 8px 3px 3px; gap: 6px; }
.is-double .plate-name { font-size: 15px; }
.is-double .plate-lv, .is-double .hp-text { font-size: 12px; }
.is-double .hp { margin-top: 2px; }
.is-double .plate-foot { min-height: 12px; margin-top: 1px; }
.plate-head { display: flex; align-items: center; gap: 4px; min-height: 18px; }
.plate-name { font: 700 17px/1 var(--font-pixel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
/* La especie al lado del mote, discreta: se encoge (y desaparece) antes que el mote. */
.plate-species { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.plate-species:empty { display: none; }
.reveal-species { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.plate-gender { font-size: 12px; font-weight: 700; }
.plate-gender.is-m { color: #2f6fd8; }
.plate-gender.is-f { color: #d6406a; }
.plate-lv { font: 700 14px/1 var(--font-pixel); color: var(--ink-2); }
.plate .mega-icon { width: 18px; height: 18px; background-size: 18px; }
.plate-status { display: inline-flex; }
.plate-status .status-chip { width: 33px; height: 12px; background-size: 33px 72px; background-position: 0 calc(var(--si) * -12px); }
.hp { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px; margin-top: 4px; }
.hp-label { font: 700 10px/1 var(--font); color: var(--paper); background: var(--anil); padding: 2px 4px; border-radius: 3px; letter-spacing: 0.04em; }
.hp-track { position: relative; height: 9px; border-radius: 6px; background: var(--hp-track); overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--anil); }
.hp-fill, .hp-ghost { position: absolute; inset: 1.5px; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); border-radius: 5px; }
/* La barra del juego: color pleno con un brillo arriba; verde, amarillo y rojo según lo que queda. */
.hp-fill { --hp-c: var(--hp-high); background: linear-gradient(color-mix(in srgb, var(--hp-c) 45%, #fff) 0 2px, var(--hp-c) 2px); }
.hp-ghost { background: #f0a189; }
.plate.hp-animate .hp-fill { transition: transform var(--hp-ms, 600ms) cubic-bezier(0.33, 0.1, 0.25, 1), background 200ms; }
.plate.hp-animate .hp-ghost { transition: transform 700ms ease 420ms; }
.plate.hp-mid .hp-fill { --hp-c: var(--hp-mid); }
.plate.hp-low .hp-fill { --hp-c: var(--hp-low); }
.plate.hp-unknown .hp-fill { background: repeating-linear-gradient(90deg, #b9c6d8 0 6px, #cfd8e5 6px 12px); }
.plate-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 14px; margin-top: 2px; }
.hp-text { font: 700 13px/1 var(--font-pixel); color: var(--ink-2); margin-left: auto; }
.plate-stages { display: flex; gap: 3px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.stage-chip { font: 700 10.5px/1 var(--font); padding: 2px 4px; border-radius: 3px; }
.stage-chip.up { background: var(--up-bg); color: var(--up-ink); }
.stage-chip.down { background: var(--down-bg); color: var(--down-ink); }
.field-chips { position: absolute; right: 10px; top: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 236px; z-index: 600; }
.is-double .field-chips { max-width: 280px; } /* hasta las placas del B, más estrechas en dobles */
.field-chip { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--font); padding: 4px 8px; border-radius: 999px; background: rgba(11, 33, 64, 0.82); color: var(--paper); }
/* Efectos del campo (protocol.md §7.4.1): en papel con filo añil, para no confundirlos con el clima */
.field-chip.is-effect { background: rgba(255, 255, 255, 0.92); color: var(--anil); box-shadow: inset 0 0 0 1.5px var(--anil); padding: 3px 4px 3px 8px; }
.fx-turns { min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--paper); color: var(--anil); font: 750 10px/15px var(--font); text-align: center; }
.field-chip.is-effect .fx-turns { background: var(--anil); color: var(--paper); }
.field-chip.is-unknown, .side-chip.is-unknown, .fx-chip.is-unknown, .fx-pill.is-unknown { font-style: italic; }
/* Efectos de cada lado: una fila de chips junto a sus placas (debajo de las del B; debajo de las del A
   en individual y a su izquierda en dobles, donde no queda sitio encima de la caja de texto). */
.side-fx { position: absolute; display: flex; flex-wrap: wrap; gap: 3px; margin: 0; padding: 0; list-style: none; max-width: 100%; }
.side-fx:empty { display: none; }
.side-fx-B { left: 0; top: 100%; margin-top: 4px; }
.side-fx-A { right: 0; top: 100%; margin-top: 2px; justify-content: flex-end; }
.is-double .side-fx-A { top: auto; bottom: 0; right: 100%; margin: 0 6px 0 0; width: 132px; flex-wrap: wrap-reverse; }
.side-chip { display: inline-flex; align-items: center; gap: 4px; font: 700 10.5px/1 var(--font); padding: 1px 2px 1px 6px; border-radius: 999px; background: rgba(11, 33, 64, 0.84); color: var(--paper); white-space: nowrap; animation: fx-in 320ms var(--ease-out) both; }
.side-chip:not(:has(.fx-turns)) { padding: 2px 7px 2px 6px; }
.side-chip .fx-turns { height: 13px; min-width: 13px; line-height: 13px; }
.side-chip::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--a-light); }
.side-chip.side-B::before { background: var(--b-light); }
@keyframes fx-in { from { opacity: 0; transform: translateY(-3px); } }
/* Efectos de un Pokémon, en su placa junto a los stats */
.fx-chip { background: var(--cal-2); color: var(--anil); white-space: nowrap; }
.fx-chip.is-bad { background: #efe6f6; color: #4f2470; }
.fx-more { background: var(--anil); color: var(--paper); }
/* Trampas en el suelo de cada lado: púas por capas, piedras que flotan y la red */
.hazards { position: absolute; height: 0; z-index: 350; pointer-events: none; }
.hazards-B { z-index: 200; }
.hz { position: absolute; left: var(--x, 50%); bottom: 0; animation: hz-in 420ms var(--ease-out) var(--d, 0ms) both; }
.hz-spike { width: 9px; height: 12px; margin-left: -4.5px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(100deg, #eef2f8 0 42%, #7d8aa0 42%); }
.hz-spike.is-toxic { bottom: 6px; background: linear-gradient(100deg, #e6cdf5 0 42%, #7e3fa4 42%); }
.hz-rock { bottom: auto; top: var(--y); width: 13px; height: 12px; margin-left: -6.5px; clip-path: polygon(40% 0, 100% 28%, 86% 100%, 14% 92%, 0 36%); background: linear-gradient(135deg, #d6c8a4 0 35%, #7a6a4c 35%);
  animation: hz-in 420ms var(--ease-out) var(--d, 0ms) both, hz-float var(--b, 2.6s) ease-in-out 420ms infinite alternate; }
.hz-web { left: 6%; right: 6%; bottom: -10px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%230b2140' stroke-opacity='.55' stroke-width='2.4'%3E%3Cellipse cx='50' cy='12' rx='47' ry='10.5'/%3E%3Cellipse cx='50' cy='12' rx='31' ry='7'/%3E%3Cellipse cx='50' cy='12' rx='15' ry='3.5'/%3E%3Cpath d='M3 12h94M50 1.5v21M17 4l66 16M83 4L17 20'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='1.1'%3E%3Cellipse cx='50' cy='12' rx='47' ry='10.5'/%3E%3Cellipse cx='50' cy='12' rx='31' ry='7'/%3E%3Cellipse cx='50' cy='12' rx='15' ry='3.5'/%3E%3Cpath d='M3 12h94M50 1.5v21M17 4l66 16M83 4L17 20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@keyframes hz-in { from { opacity: 0; transform: translateY(-8px) scale(0.6); } }
@keyframes hz-float { to { translate: 0 -3px; } }
/* Pantallas: un brillo sutil en cúpula sobre el lado (Reflejo cálido, Pantalla de Luz rosa, Velo Aurora verde agua) */
.side-glow { position: absolute; height: 150px; transform: translateY(-100%); z-index: 140; pointer-events: none; opacity: 0; transition: opacity 600ms ease;
  border: 1.5px solid transparent; border-bottom: 0; border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  --g1: transparent; --g2: transparent; --g3: transparent;
  background: radial-gradient(ellipse 60% 75% at 32% 100%, var(--g1), transparent 72%), radial-gradient(ellipse 60% 75% at 68% 100%, var(--g2), transparent 72%), radial-gradient(ellipse 80% 85% at 50% 100%, var(--g3), transparent 74%); }
.side-glow-A { height: 220px; z-index: 290; }
.side-glow[data-screens]:not([data-screens=""]) { opacity: 1; border-color: var(--edge); box-shadow: inset 0 3px 10px -4px var(--edge); animation: glow 3.2s ease-in-out infinite alternate; }
.side-glow[data-screens~="Reflect"] { --g1: rgba(255, 186, 84, 0.42); --edge: rgba(226, 150, 40, 0.6); }
.side-glow[data-screens~="LightScreen"] { --g2: rgba(255, 120, 186, 0.38); --edge: rgba(214, 70, 150, 0.55); }
.side-glow[data-screens~="AuroraVeil"] { --g3: rgba(90, 220, 200, 0.42); --edge: rgba(40, 170, 160, 0.6); }
@keyframes glow { from { opacity: 0.7; } }
.mega-icon { width: 28px; height: 28px; flex: none; background: url("/sprites/UI/Battle/icon_mega.png") center / contain no-repeat; }
.mega-icon[hidden] { display: none; }
.status-chip { display: inline-block; width: 44px; height: 16px; flex: none; background: url("/sprites/UI/Battle/icon_statuses.png") 0 calc(var(--si) * -16px) no-repeat; }

/* La caja de texto del juego, en la propia escena */
.textbox {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 84px; z-index: 700; padding: 12px 18px;
  background: var(--paper); border-radius: 10px; border: 3px solid var(--anil);
  box-shadow: inset 0 0 0 3px var(--edge), 0 6px 14px -6px rgba(11, 33, 64, 0.5);
}
.textbox-text { font: 400 22px/1.35 var(--font-pixel); color: var(--anil); letter-spacing: 0.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.textbox-arrow { position: absolute; right: 16px; bottom: 10px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--geranio); animation: arrow 900ms ease-in-out infinite; }
@keyframes arrow { 50% { transform: translateY(3px); } }

.speed-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 1px 8px; border-radius: 999px; background: var(--albero); color: var(--anil); font-size: 11px; font-weight: 750; letter-spacing: 0.02em; }
.speed-badge .icon { width: 12px; height: 12px; }

/* Clima y campo: capa sobre el fondo */
.scene-weather { position: absolute; inset: 0; z-index: 400; pointer-events: none; transition: background-color 900ms ease, opacity 900ms ease; }
.scene-weather[data-weather="Rain"], .scene-weather[data-weather="HeavyRain"] { background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(190, 215, 255, 0.5) 14px 15px, transparent 15px 31px) 0 0 / 120px 120px, rgba(20, 40, 80, 0.18); animation: rain 520ms linear infinite; }
.scene-weather[data-weather="HeavyRain"] { animation-duration: 340ms; }
@keyframes rain { to { background-position: -30px 120px, 0 0; } }
.scene-weather[data-weather="Sun"], .scene-weather[data-weather="HarshSun"] { background: radial-gradient(120% 90% at 85% 0%, rgba(255, 214, 120, 0.45), transparent 60%); animation: sun 4s ease-in-out infinite; }
@keyframes sun { 50% { opacity: 0.7; } }
.scene-weather[data-weather="Sandstorm"] { background: radial-gradient(circle, rgba(226, 191, 101, 0.7) 1px, transparent 1.6px) 0 0 / 22px 18px, rgba(196, 160, 90, 0.22); animation: sand 900ms linear infinite; }
@keyframes sand { to { background-position: -88px 18px, 0 0; } }
.scene-weather[data-weather="Hail"], .scene-weather[data-weather="Snowstorm"], .scene-weather[data-weather="Snow"] { background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 1.4px, transparent 2px) 0 0 / 34px 30px, radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1.6px) 12px 10px / 26px 24px, rgba(200, 225, 255, 0.16); animation: snow 1.8s linear infinite; }
@keyframes snow { to { background-position: -20px 60px, 4px 72px, 0 0; } }
.scene-weather[data-weather="StrongWinds"] { background: repeating-linear-gradient(0deg, transparent 0 40px, rgba(255, 255, 255, 0.22) 40px 41px) 0 0 / 200px 82px; animation: wind 700ms linear infinite; }
@keyframes wind { to { background-position: -200px 0; } }
.scene-weather[data-weather="ShadowSky"] { background: rgba(40, 20, 70, 0.32); }
.scene-weather[data-terrain="Electric"] { box-shadow: inset 0 -90px 60px -50px rgba(247, 208, 44, 0.55); }
.scene-weather[data-terrain="Grassy"] { box-shadow: inset 0 -90px 60px -50px rgba(122, 199, 76, 0.55); }
.scene-weather[data-terrain="Misty"] { box-shadow: inset 0 -90px 60px -50px rgba(232, 160, 220, 0.55); }
.scene-weather[data-terrain="Psychic"] { box-shadow: inset 0 -90px 60px -50px rgba(249, 85, 135, 0.45); }

/* Efectos de los movimientos (color del tipo en --c) */
.scene-fx { position: absolute; inset: 0; z-index: 500; pointer-events: none; }
.fx { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.fx-orb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 0 18%, var(--c) 45%, transparent 72%); box-shadow: 0 0 18px 6px color-mix(in srgb, var(--c) 55%, transparent); }
.fx-burst { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, var(--c) 30%, transparent 64%); }
.fx-contact { width: 84px; height: 84px; background: var(--c); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7 7.3.1-5.9 4.3 2.3 7.1L10 14.2l-5.9 4.3 2.3-7.1L.5 7.1 7.8 7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7 7.3.1-5.9 4.3 2.3 7.1L10 14.2l-5.9 4.3 2.3-7.1L.5 7.1 7.8 7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.fx-aura { width: 150px; height: 150px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 24px 2px var(--c), inset 0 0 24px 2px var(--c); }
.fx-flash { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%); }
.fx-float { font: 700 22px/1 var(--font-pixel); color: var(--paper); padding: 3px 8px 2px; border-radius: 6px; background: var(--anil); white-space: nowrap; transform: translate(-50%, 0); }
.fx-float.crit { background: var(--albero); color: var(--anil); }
.fx-float.super { background: var(--geranio); }
.fx-float.notvery { background: #5c6f8e; }
.fx-spark { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #7be59a 55%, transparent 70%); transform: translate(-50%, 0); }
.fx-spark.fx-item { background: radial-gradient(circle, #fff 0 25%, var(--albero) 55%, transparent 70%); }
.fx-arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; transform: translate(-50%, 0); }
.fx-arrow.is-up { border-bottom: 18px solid rgba(244, 104, 64, 0.9); }
.fx-arrow.is-down { border-top: 18px solid rgba(80, 130, 240, 0.9); }
.fx-status-burst { width: 130px; height: 130px; border-radius: 50%; }
.st-BURN { background: radial-gradient(circle, rgba(255, 150, 60, 0.8), transparent 65%); }
.st-POISON { background: radial-gradient(circle, rgba(163, 62, 161, 0.75), transparent 65%); }
.st-PARALYSIS { background: radial-gradient(circle, rgba(247, 208, 44, 0.85), transparent 65%); }
.st-SLEEP { background: radial-gradient(circle, rgba(140, 160, 230, 0.7), transparent 65%); }
.st-FROZEN { background: radial-gradient(circle, rgba(150, 217, 214, 0.9), transparent 65%); }
.fx-mega-ring { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(#e05a8a, #f2b134, #58c68a, #4d8bf0, #a066e8, #e05a8a); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%, #000 64%, transparent 66%); mask: radial-gradient(circle, transparent 54%, #000 56%, #000 64%, transparent 66%); }
.fx-mega-mark { width: 40px; height: 40px; background: url("/sprites/UI/Battle/icon_mega.png") center / contain no-repeat; image-rendering: pixelated; }
.poke-ball { position: absolute; width: 28px; height: 28px; margin-left: -14px; background: center / contain no-repeat; z-index: 520; }
/* Cartel de habilidad, como pbShowAbilitySplash: añil con la franja de su lado */
.ability-splash { position: absolute; z-index: 650; display: grid; gap: 1px; padding: 6px 12px 7px 12px; border-radius: 8px; background: var(--anil); color: var(--paper); box-shadow: 0 6px 14px -6px rgba(6, 21, 43, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ability-splash-who { display: flex; align-items: center; gap: 6px; font: 400 13px/1.1 var(--font-pixel); color: rgba(255, 255, 255, 0.74); }
.ability-splash-who::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--a); flex: none; }
.ability-splash.side-B .ability-splash-who::before { background: var(--b); }
.ability-splash-name { font: 700 19px/1.1 var(--font-pixel); letter-spacing: 0.01em; }
.ability-splash-random { position: absolute; right: 8px; top: 6px; font: 700 9px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: var(--albero); color: var(--anil); }

/* Contraventanas: se abren al empezar la partida y se cierran sobre el ganador */
.curtain { position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none; perspective: 1400px; }
.shutter {
  position: absolute; top: 0; bottom: 0; width: 50.5%; background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0 3px, transparent 3px 14px, rgba(0, 0, 0, 0.3) 14px 18px, transparent 18px 21px),
    var(--anil);
  box-shadow: inset 0 0 0 6px var(--anil-2), inset 0 0 0 7px rgba(255, 255, 255, 0.06);
  transition: transform 900ms var(--ease-shutter), opacity 300ms ease 600ms;
}
.shutter-l { left: 0; transform-origin: 0 50%; }
.shutter-r { right: 0; transform-origin: 100% 50%; }
.curtain.is-open .shutter-l { transform: rotateY(-96deg); opacity: 0; }
.curtain.is-open .shutter-r { transform: rotateY(96deg); opacity: 0; }
.curtain.is-closed .shutter, .curtain.is-victory .shutter { transform: none; opacity: 1; transition: transform 700ms var(--ease-shutter), opacity 120ms ease; }
.curtain.is-victory .shutter { opacity: 0.98; }
.curtain-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--paper); opacity: 0; transform: translateY(14px); transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out); padding: 0 24px; }
.curtain.is-closed .curtain-card { opacity: 1; transform: none; }
.curtain.is-victory .curtain-card { opacity: 1; transform: none; transition-delay: 420ms; }
.curtain-kick { font-weight: 800; font-stretch: 118%; font-size: clamp(18px, 3.4cqw, 34px); letter-spacing: 0.04em; text-transform: uppercase; }
.scene { container-type: inline-size; }
.curtain-trainer { --base: 10px; width: clamp(96px, 28cqw, 200px); aspect-ratio: 1; display: grid; place-items: end center; border-radius: 50% 50% 14px 14px / 34% 34% 14px 14px; background: var(--paper); box-shadow: inset 0 -10px 0 var(--a); margin-bottom: 6px; }
.curtain-trainer.side-B { box-shadow: inset 0 -10px 0 var(--b); }
.curtain.is-victory .curtain-trainer { animation: rise 900ms var(--ease-out) 380ms both; }
@keyframes rise { from { transform: translateY(26px); opacity: 0; } }
.curtain-name { font-weight: 850; font-stretch: 120%; font-size: clamp(30px, 8cqw, 76px); line-height: 0.95; letter-spacing: -0.02em; }
.curtain-score { display: flex; align-items: baseline; gap: 12px; font-weight: 800; font-stretch: 115%; font-size: clamp(22px, 5cqw, 44px); }
.curtain-score .side-A { color: var(--a-light); }
.curtain-score .side-B { color: var(--b-light); }
.curtain-dash { color: rgba(255, 255, 255, 0.45); font-weight: 300; }
.curtain-sub { font-size: clamp(12px, 2cqw, 16px); font-weight: 600; color: var(--lemon-on-navy); }
.curtain-name.is-plain { font-size: clamp(26px, 6cqw, 56px); }
.curtain.is-warn .curtain-sub { color: #ffc56b; }
.curtain.is-series .curtain-name { color: var(--paper); text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
/* Banderines de verbena, en blanco, añil y geranio: solo cuando se gana la serie */
.bunting { position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 3; opacity: 0; transform: translateY(-100%);
  background:
    linear-gradient(170deg, transparent 49%, rgba(255, 255, 255, 0.7) 50%, transparent 52%) 0 0 / 100% 12px no-repeat,
    conic-gradient(from -30deg at 50% 100%, transparent 0 0) 0 0;
  -webkit-mask: none; transition: opacity 300ms ease, transform 700ms var(--ease-out); }
.bunting::before { content: ""; position: absolute; left: -2%; right: -2%; top: 6px; height: 34px;
  background: conic-gradient(from 150deg at 50% 0, var(--paper) 0 60deg, transparent 60deg) 0 0 / 36px 34px,
    conic-gradient(from 150deg at 50% 0, var(--albero) 0 60deg, transparent 60deg) 18px 0 / 36px 34px;
  background-repeat: repeat-x; }
.curtain.is-series .bunting { opacity: 1; transform: none; transition-delay: 300ms; }

/* ------------------------------------------------------------------ equipos */
.teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.team { display: grid; gap: 10px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.team-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-name { font-weight: 700; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.team-name:hover { color: var(--puerta); text-decoration: underline; }
.team-count { margin-left: auto; font-weight: 700; color: var(--ink-3); font-size: 13px; }
.team-mons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 44px)); gap: 6px; justify-content: start; }
.team-B .team-mons { justify-content: start; }
.team-mon { position: relative; width: 100%; aspect-ratio: 1; max-width: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--cal); box-shadow: inset 0 0 0 1px var(--rule); transition: transform 300ms var(--ease-out), box-shadow 200ms; }
.team-mon.is-active { box-shadow: inset 0 0 0 2px var(--a), 0 4px 10px -6px var(--a); transform: translateY(-2px); background: #eef3ff; }
.team-B .team-mon.is-active { box-shadow: inset 0 0 0 2px var(--b), 0 4px 10px -6px var(--b); background: #fff1ee; }
.team-mon .portrait { width: min(40px, 92%); height: auto; aspect-ratio: 1; }
.team-mon.is-fainted .portrait { filter: grayscale(1) contrast(0.7) brightness(1.15); opacity: 0.55; }
.team-mon.is-fainted::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--geranio); transform: rotate(-28deg); border-radius: 2px; }
.team-mon.is-hidden { background: repeating-linear-gradient(135deg, var(--cal) 0 6px, var(--cal-2) 6px 12px); }
.portrait { display: inline-block; width: 40px; height: 40px; flex: none; border-radius: 8px; background: var(--cal-2) center / 100% no-repeat; }
.portrait.is-icon { background-size: 200% 100%; background-position: 0 0; background-color: var(--cal); }
.portrait.is-unknown { background: var(--cal-2); }
.portrait.is-shiny { box-shadow: 0 0 0 1.5px var(--albero); }
.portrait.large { width: 80px; height: 80px; border-radius: 14px; }
.team-strip { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.team-strip .portrait { width: 28px; height: 28px; border-radius: 6px; }
.team-strip.small .portrait { width: 24px; height: 24px; border-radius: 5px; }
.ball { width: 26px; height: 26px; background: var(--ball) center / 26px no-repeat; display: inline-block; }
.ball-fainted { opacity: 0.55; }
/* Entrenador: el elemento es el marco y sprites.js encuadra el PNG dentro (trainerFit: escala entera,
   de pie en la base o en busto). Todos los chips miden 32 px; los nichos dejan la base a la vista. */
.trainer-sprite { display: block; background-repeat: no-repeat; overflow: hidden; }
/* Sin sprite de entrenador (no hay o no carga): una Poké Ball de la paleta en su lugar. */
.trainer-sprite.is-none { display: grid; place-items: center; }
.trainer-sprite.is-none .pb { width: 52%; height: 52%; opacity: 0.7; }
.trainer-sprite.mini { width: 32px; height: 32px; border-radius: 8px; background-color: var(--cal-2); box-shadow: inset 0 0 0 1px var(--rule); flex: none; }
.curtain-trainer, .vs-trainer, .champion-niche, .profile-trainer, .ov-niche { position: relative; overflow: hidden; }
.curtain-trainer .trainer-sprite.full, .vs-trainer .trainer-sprite.full, .champion-niche .trainer-sprite.full, .profile-trainer .trainer-sprite.full, .ov-niche .trainer-sprite.full { position: absolute; inset: 0 0 var(--base, 0); width: auto; height: auto; }
.trainer-sprite.full { width: 160px; height: 160px; }
.charset-portrait { display: block; background-repeat: no-repeat; }

/* El chip de tipo es el icono del juego (icon_types.png, 19 de 96x32) sobre el color del tipo. */
.type-chip { display: inline-grid; place-items: center; width: 54px; height: 18px; flex: none; border-radius: 4px; color: transparent; font: 700 12px/1 var(--font-pixel);
  background: url("/sprites/UI/Battle/icon_types.png") 0 calc(var(--ti, 9) / 18 * 100%) / 100% 1900% no-repeat, var(--tc); image-rendering: pixelated; }
.type-chip.small { width: 48px; height: 16px; font-size: 10.5px; }

/* Serie */
.series-panel { display: grid; gap: 10px; }
/* El marcador de la serie, a tamaño cartel */
.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.games li { display: flex; gap: 10px; padding: 6px 8px; border-radius: 6px; background: var(--cal); }
.games li.is-now { background: #eaf0fb; font-weight: 600; }
.games .num { font-weight: 700; color: var(--ink-3); min-width: 2.2em; }
.games b.side-A { color: var(--a); }
.games b.side-B { color: var(--b); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13.5px; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }

/* Entre partidas */
.between { display: grid; gap: 12px; }
.between-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); }
.idle-board { display: grid; justify-items: center; gap: 12px; padding: 56px 24px; text-align: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 50% 50% var(--r) var(--r) / 80px 80px var(--r) var(--r); box-shadow: var(--shadow); }
.idle-title { font-size: 26px; font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------ la Retransmisión (16:9, sin spoilers) */
/* Una pantalla para emitir en un stream: arriba, el rótulo marino con el escudo, el marcador de la serie
   a tamaño cartel y las mesas, con el mar a sus pies; a los lados, lo que cada equipo ha revelado; en
   el centro, la escena y, debajo, los momentos y el campo. Cabe sin scroll a 1920x1080 y 1440x900. */
html.is-broadcast .topbar, html.is-broadcast .footer { display: none; }
.broadcast { box-sizing: border-box; height: 100svh; max-width: 2200px; margin: 0 auto; padding: 14px 18px 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 22px; }
.bc-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 8px 14px 8px 8px; border-radius: 20px; background: var(--anil); color: var(--paper); box-shadow: var(--shadow); }
.bc-head .sea-edge { left: 22px; right: 22px; }
.bc-brand img { display: block; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16); }
.bc-brand:focus-visible { outline-color: var(--albero); }
.bc-score { justify-self: center; width: min(820px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.bc-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bc-A { justify-content: flex-end; }
.bc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(20px, 1.7vw, 32px); font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; }
.bc-name.side-text-A { color: var(--a-light); }
.bc-name.side-text-B { color: var(--b-light); }
.bc-wins { font-size: clamp(38px, 3.2vw, 60px); font-weight: 850; font-stretch: 118%; line-height: 0.9; min-width: 0.7em; text-align: center; }
.bc-dash { align-self: stretch; margin: 6px 0; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.bc-pips { display: inline-flex; }
.bc-pips .pb { --pb-line: var(--anil); width: 13px; height: 13px; }
.bc-A .pips .pb.is-won { --pb-top: var(--a-light); }
.bc-B .pips .pb.is-won { --pb-top: var(--b-light); }
.bc-pips .pb.is-empty { color: rgba(255, 255, 255, 0.55); }
.bc-where { grid-column: 1 / -1; margin-top: 6px; text-align: center; font-size: 12.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.74); }
.bc-tools { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 42vw; }
.bc-tools .strip-wrap { min-width: 0; }
.bc-tools .strip-chip { min-width: 0; }
.bc-body { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) minmax(250px, 330px); gap: 16px; min-height: 0; }
.bc-center { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.bc-center > * { flex: none; }
.bc-center .stage-area { display: grid; justify-items: center; }
/* La escena, tan grande como deja el alto: la ventana, su arco y el alféizar, y abajo al menos 150 px. */
.bc-center .scene-frame { width: min(100%, calc((100svh - 450px) * 4 / 3 + 24px)); max-width: none; }
.bc-center .idle-board { width: 100%; }
.bc-center > .bc-below { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-height: 150px; }
/* Lo que la organización apaga para el público y la Retransmisión (protocol.md §16.5, chrome.js): la crónica,
   los equipos revelados, el campo (clima, terreno, trampas y pantallas), el % de PS y el reloj de espera. */
html.ps-no-log .feed-card, html.ps-no-log .feed-box { display: none; }
html.ps-no-teams .teams-slot, html.ps-no-teams .teams, html.ps-no-teams .reveal-panel { display: none; }
html.ps-no-teams .bc-body { grid-template-columns: minmax(0, 1fr); }
html.ps-no-field :is(.field-chips, .hazards, .side-glow, .side-fx, .scene-weather, .caster-box:has(.caster-field)) { display: none; }
html.ps-no-field .bc-center > .bc-below { grid-template-columns: minmax(0, 1fr); }
html.ps-no-hp :is(.hp-text, .reveal-hp) { display: none; }
html.ps-no-timer .clock { display: none; }
.bc-below .caster-box { min-height: 0; overflow-y: auto; }
.bc-below .highlights { max-height: none; }

/* Lo revelado de cada equipo: una fila por Pokémon; los que no han salido, una Poké Ball sin revelar. */
.reveal-panel { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.reveal-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; font-stretch: 110%; }
.reveal-title b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal-count { margin-left: auto; font-size: 14px; font-weight: 750; color: var(--ink-3); }
.reveal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.reveal-mon { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--cal); }
.reveal-mon.is-active { background: var(--paper); box-shadow: inset 0 0 0 2px var(--a); }
.side-B .reveal-mon.is-active { box-shadow: inset 0 0 0 2px var(--b); }
.reveal-mon.is-hidden { align-items: center; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.reveal-mon.is-hidden .ball-icon, .reveal-mon.is-hidden > :first-child { justify-self: center; }
.reveal-mon .portrait { width: 44px; height: 44px; border-radius: 8px; }
.reveal-mon.is-fainted .portrait { filter: grayscale(1); opacity: 0.55; }
.reveal-body { display: grid; gap: 3px; min-width: 0; }
.reveal-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15.5px; }
.reveal-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal-hp { margin-left: auto; font-weight: 800; font-size: 14px; }
.reveal-ko { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--live-ink); }
.reveal-bar { display: block; height: 6px; border-radius: 4px; background: var(--hp-track); overflow: hidden; }
.reveal-bar > span { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--hp-high); transition: width 420ms var(--ease-out); }
.reveal-bar.hp-mid > span { background: var(--hp-mid); }
.reveal-bar.hp-low > span { background: var(--hp-low); }
.reveal-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.reveal-facts span { display: inline-flex; align-items: center; gap: 6px; }
.reveal-moves { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; font-size: 13px; }
.reveal-moves li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.reveal-moves li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal-moves .type-chip { width: 44px; height: 15px; font-size: 10px; }
@media (max-width: 1100px) {
  .broadcast { height: auto; }
  .bc-head { grid-template-columns: auto minmax(0, 1fr); }
  .bc-tools { grid-column: 1 / -1; max-width: none; }
  .bc-body { grid-template-columns: 1fr 1fr; }
  .bc-center { grid-column: 1 / -1; order: -1; }
  .bc-center .scene-frame { width: 100%; }
}
@media (max-width: 760px) {
  .broadcast { padding: 10px 10px 14px; }
  .bc-body, .bc-center > .bc-below { grid-template-columns: 1fr; }
  .bc-pips { display: none; }
  .bc-name { font-size: 18px; }
  .bc-side { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-bar > span { transition: none; }
}
.caster-box { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow-sm); }
.fx-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 14px; margin: 0; font-size: 14px; }
.fx-summary dt { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.fx-summary dd { margin: 0; display: grid; gap: 6px; }
.fx-pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fx-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--cal-2); color: var(--anil); font-size: 13px; font-weight: 600; }
.fx-pill.is-bad { background: #f3ecf8; color: #4f2470; }
.fx-pill-n { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.fx-pill.is-bad .fx-pill-n { color: #6e4a8a; }
.fx-mon { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fx-mon-name { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.desync-banner { padding: 12px 16px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-weight: 600; border: 1px solid #f1d3a0; }
.highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; font-size: 13.5px; }
.hl { display: grid; grid-template-columns: 34px 78px 1fr; gap: 6px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--rule); }
.hl:first-child { border-top: 0; }
.hl-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.hl-crit .hl-kind { color: var(--albero-ink); }
.hl-ko .hl-kind { color: var(--geranio); }
.hl-mega .hl-kind { color: #7a3bc7; }
.hl-score { color: var(--ink-3); }

/* ------------------------------------------------------------------ capa para OBS (transparente) */
.is-overlay, .is-overlay body { background: transparent; }
.overlay { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform: scale(var(--ov-k, 1)); transform-origin: 0 0; font-size: 22px; color: var(--paper); }
.overlay.is-idle .ov-side, .overlay.is-idle .ov-ticker { display: none; }
.ov-score { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto auto auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 18px; padding: 12px 26px 10px; min-width: 820px; background: var(--anil); border-radius: 60px 60px 16px 16px / 40px 40px 16px 16px; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.5); }
.ov-side-name { font-weight: 800; font-stretch: 112%; font-size: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-side-name.ov-A { text-align: right; color: var(--a-light); }
.ov-side-name.ov-B { color: var(--b-light); }
.ov-wins { font-weight: 850; font-stretch: 118%; font-size: 58px; line-height: 1; min-width: 0.7em; text-align: center; }
.ov-mark img { width: 52px; height: 52px; display: block; image-rendering: auto; }
.ov-sub { grid-column: 1 / -1; text-align: center; font-size: 16px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.ov-side { position: absolute; bottom: 150px; display: grid; gap: 12px; }
.ov-side.ov-A { left: 40px; }
.ov-side.ov-B { right: 40px; justify-items: end; }
.ov-side .plate-stack { position: static; gap: 8px; }
.overlay .plate { width: 380px; padding: 10px 16px; border-width: 3px; }
.overlay .plate-name { font-size: 28px; }
.overlay .plate-lv, .overlay .hp-text { font-size: 22px; }
.overlay .hp-track { height: 14px; }
.overlay .hp-label { font-size: 14px; }
.overlay .team { background: var(--anil); border: 0; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); padding: 10px 14px; }
.overlay .team-name, .overlay a.team-name:hover { color: var(--paper); font-size: 22px; text-decoration: none; }
.overlay .team-count { color: rgba(255, 255, 255, 0.7); font-size: 20px; }
.overlay .team-who .trainer-sprite { display: none; }
.overlay .team-mons { grid-template-columns: repeat(6, 56px); gap: 8px; }
.overlay .team-mon { width: 56px; height: 56px; background: rgba(255, 255, 255, 0.92); }
.overlay .team-mon .portrait { width: 40px; height: 40px; }
.ov-ticker { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 1060px; padding: 16px 30px; background: var(--paper); border: 4px solid var(--anil); border-radius: 14px; box-shadow: inset 0 0 0 4px var(--edge), 0 10px 30px -10px rgba(0, 0, 0, 0.5); }
.ov-ticker-text { font: 400 34px/1.3 var(--font-pixel); color: var(--anil); min-height: 1.3em; }
.ov-ticker.tone-crit { border-color: var(--albero); }
.ov-ticker.tone-ko { border-color: var(--geranio); }
.ov-victory { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 30px 70px 34px; background: var(--anil); border-radius: 50% 50% 22px 22px / 110px 110px 22px 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); animation: ov-in 700ms var(--ease-out) both; }
@keyframes ov-in { from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); } }
.ov-victory-name { font-weight: 850; font-stretch: 120%; font-size: 96px; line-height: 0.95; }
.ov-victory-sub { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; color: var(--lemon-on-navy); }
.ov-niche { --base: 12px; width: 220px; height: 220px; background-color: var(--paper); border-radius: 50% 50% 18px 18px / 36% 36% 18px 18px; box-shadow: inset 0 -12px 0 var(--a); }
.ov-victory.side-B .ov-niche { box-shadow: inset 0 -12px 0 var(--b); }
.ov-victory.is-series { box-shadow: 0 0 0 8px var(--albero), 0 30px 80px -20px rgba(0, 0, 0, 0.6); }

/* ------------------------------------------------------------------ arena */
.arena { margin: 0; display: grid; gap: 8px; justify-items: center; }
.arena-map { position: relative; overflow: hidden; border-radius: 50% 50% var(--r) var(--r) / 56px 56px var(--r) var(--r); background: #0f1a2b; border: 10px solid var(--anil); box-shadow: var(--shadow-lg); box-sizing: border-box; max-width: 100%; }
.arena-stage, .stage-area { min-width: 0; }
.arena-world { position: absolute; left: 0; top: 0; transform: scale(var(--k, 1)) translate(var(--ox, 0), var(--oy, 0)); transform-origin: 0 0; }
.arena-img { display: block; }
.arena-grid { width: 960px; height: 640px; background: var(--cal-2); }
.actor { position: absolute; left: 0; top: 0; transform: translate(var(--x), var(--y)); transition: transform 270ms linear; }
.actor.no-transition { transition: none; }
.actor-sprite { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); background-repeat: no-repeat; }
.actor.is-moving .actor-sprite { animation: walk 540ms steps(4) infinite; }
@keyframes walk { from { background-position-x: 0; } to { background-position-x: calc(var(--fw) * -4); } }
.actor-name { position: absolute; left: 0; bottom: 66px; transform: translateX(-50%); padding: 3px 7px 2px; border-radius: 5px; font: 700 13px/1 var(--font-pixel); color: var(--paper); background: var(--a); white-space: nowrap; }
.actor-name.side-B { background: var(--b); }
.actor-emote { position: absolute; left: 6px; bottom: 84px; width: 30px; height: 30px; padding: 5px; border-radius: 8px; background: var(--paper); box-shadow: 0 3px 8px -3px rgba(11, 33, 64, 0.45); opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out); }
.actor-emote.show { opacity: 1; transform: none; }
.emote-icon { width: 20px; height: 20px; fill: var(--anil); display: block; shape-rendering: crispEdges; }
.emote-heart { fill: #e0435a; }
.emote-angry { fill: #d23a2f; }
.arena figcaption { font-size: 14px; color: var(--ink-2); }
.arena-page { max-width: 1680px; margin: 0 auto; padding: 24px 22px 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.arena-info { display: grid; gap: 14px; padding: 20px 22px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); justify-items: start; }
.arena-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.duelist { margin: 0; display: grid; justify-items: center; gap: 6px; padding: 12px 8px; background: var(--cal); border-radius: var(--r); }
.duelist .trainer-sprite.full { width: 120px; height: 120px; }
.duelist figcaption { display: flex; align-items: center; gap: 6px; }
.duel-wins { font-weight: 850; font-stretch: 118%; font-size: 34px; line-height: 1; color: var(--a); }
.duelist.side-B .duel-wins { color: var(--b); }

/* ------------------------------------------------------------------ torneo */
.cup, .profile, .credits { max-width: 1680px; margin: 0 auto; padding: 26px 22px 0; display: grid; gap: 22px; }
.cup-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding: 26px 30px; background: var(--anil); color: var(--paper); border-radius: 50% 50% var(--r) var(--r) / 46px 46px var(--r) var(--r); box-shadow: var(--shadow); }
.cup-head-main { display: grid; gap: 10px; }
.cup-title { font-weight: 850; font-stretch: 120%; font-size: clamp(30px, 4.4vw, 60px); line-height: 0.98; letter-spacing: -0.025em; }
.cup-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cup-meta .muted { color: rgba(255, 255, 255, 0.72); }
.cup-head .tone-live { background: #fff; color: var(--live-ink); }
.cup-head .tone-ready { background: #fff; color: var(--ready-ink); }
.cup-head .tone-done, .cup-head .tone-wait { background: rgba(255, 255, 255, 0.14); color: var(--paper); }
.tabs-page { margin-top: -6px; }
.cup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 26px; align-items: start; }
.cup-side { display: grid; gap: 26px; align-content: start; }
.tables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.table-card { display: grid; gap: 8px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); align-content: start; }
.table-card.tone-live { border-color: var(--live-edge); box-shadow: 0 0 0 1px var(--live-edge), var(--shadow-sm); }
.table-card.tone-live, .table-card.tone-done, .table-card.tone-warn, .table-card.tone-bad, .table-card.tone-ready, .table-card.tone-wait, .table-card.tone-quiet { background: var(--paper); color: var(--ink); }
.table-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.table-no { font-weight: 800; font-stretch: 110%; font-size: 14px; letter-spacing: 0.02em; color: var(--ink-2); }
.table-side { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 36px; }
.table-side.is-winner .player-chip-name { font-weight: 800; }
.table-side.is-loser { color: var(--ink-3); }
.table-side.is-loser .player-chip-name { color: var(--ink-3); }
.table-wins { font-weight: 850; font-stretch: 115%; font-size: 22px; min-width: 1ch; text-align: right; }
.table-side.is-winner .table-wins { color: var(--anil); }
.table-side.is-loser .table-wins { color: var(--rule-2); }
.table-side.is-bye { grid-template-columns: 1fr; }
.table-foot { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12.5px; }
.player-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; min-width: 0; }
.player-chip:hover .player-chip-name { color: var(--puerta); text-decoration: underline; }
.player-chip-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings th[scope="row"] { font-weight: 400; }
.standings .rank { width: 46px; font-weight: 800; font-stretch: 115%; font-size: 17px; color: var(--ink-3); }
.standings .points b { font-weight: 850; font-stretch: 115%; font-size: 18px; }
.standings tr.is-top-1 .rank { color: var(--albero-ink); }
.standings tr.is-top-1 { background: linear-gradient(90deg, #fff6dc, transparent 60%); }
.standings tr.is-dq, .standings tr.is-dropped { color: var(--ink-3); }
.standings tr.is-dq .player-chip-name { text-decoration: line-through; text-decoration-color: var(--bad); }
.standings .tiebreak { color: var(--ink-2); font-size: 13.5px; }
.standings th, .standings td { white-space: nowrap; }
.table-wrap { box-shadow: var(--shadow-sm); }
.tiebreak-note { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--ink-3); }
.tiebreak-note dt { font-weight: 700; color: var(--ink-2); }
.tiebreak-note dd { margin: 0; }
.path-rows, .match-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rounds { display: grid; gap: 16px; }

/* Perfil */
.profile-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 26px; padding: 24px 30px 0; background: var(--anil); color: var(--paper); border-radius: 50% 50% var(--r) var(--r) / 46px 46px var(--r) var(--r); overflow: hidden; box-shadow: var(--shadow); }
.profile-trainer { width: 160px; height: 160px; margin-bottom: -2px; background: var(--paper); border-radius: 50% 50% 0 0 / 40% 40% 0 0; display: grid; place-items: end center; }
.profile-id { display: grid; gap: 10px; padding-bottom: 24px; }
.profile-name { font-weight: 850; font-stretch: 120%; font-size: clamp(34px, 5vw, 66px); line-height: 0.95; letter-spacing: -0.025em; }
.profile-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-head .tone-quiet { background: rgba(255, 255, 255, 0.14); color: var(--paper); }
.profile-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 26px; margin: 0 0 24px; }
.profile-stats div { display: grid; }
.profile-stats dt { font-size: 12px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.profile-stats dd { margin: 0; font-weight: 850; font-stretch: 118%; font-size: 34px; line-height: 1; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 26px; align-items: start; }
.profile-grid > div { display: grid; gap: 26px; }
.match-row { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.match-row:first-child { border-top: 0; }
.match-mark, .path-mark { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-weight: 800; font-size: 13px; background: var(--cal-2); color: var(--ink-3); }
.match-row.is-win .match-mark, .path-row.is-win .path-mark { background: var(--anil); color: var(--paper); }
.match-row.is-loss .match-mark, .path-row.is-loss .path-mark { background: #fbe3de; color: var(--live-ink); }
.path-row.is-bye .path-mark { background: var(--cal-2); }
.path-row { display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.path-row:first-child { border-top: 0; }
.path-round { font-weight: 800; color: var(--ink-3); font-size: 13px; }
.empty-page { max-width: 640px; margin: 60px auto; display: grid; gap: 16px; justify-items: start; padding: 0 22px; }

/* Créditos */
.credits { max-width: 980px; }
.credits p { max-width: 75ch; line-height: 1.6; }
.credit-list { columns: 4 160px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.credit-list li { break-inside: avoid; padding: 2px 0; }

/* Portada sin torneo (home.js) */
.home { max-width: 980px; }
.count { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--cal-2); color: var(--ink-2); }
.dep-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.dep-row { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.dep-row:first-child { border-top: 0; }
.dep-time { color: var(--ink-3); font-size: 13px; }
.dep-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.dep-row.is-warn .dep-status { color: var(--warn); }
.vs .won { color: var(--anil); }
.progress { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-3); }
.more { justify-self: start; }

/* Repetición */
.replay-title { font-size: clamp(20px, 2vw, 28px); }
.replay-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.replay-controls input[type="range"] { flex: 1; min-width: 160px; }
.replay-controls .select { width: auto; min-width: 80px; }
.replay-turn { font-weight: 700; color: var(--ink-2); }
.replay-status { color: var(--ink-2); font-weight: 600; min-height: 1.5em; }

/* Participantes y streams (protocol.md §16) */
.participants { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.participant { display: grid; gap: 10px; align-content: start; padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.participant.is-live { border-color: var(--live-edge); box-shadow: 0 0 0 1px var(--live-edge), var(--shadow-sm); }
.participant-name { font-size: 18px; font-weight: 800; font-stretch: 110%; color: var(--ink); text-decoration: none; }
.participant-name:hover { color: var(--puerta); text-decoration: underline; }
.participant-foot { display: flex; justify-content: flex-start; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--live-bg); color: var(--live-ink); font-size: 12.5px; font-weight: 700; }
.live-badge .live-dot { animation: pulse 1.6s ease-in-out infinite; }
.live-viewers { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--live-edge); }
.stream-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font-weight: 650; font-size: 14px; text-decoration: none; transition: transform 140ms var(--ease-out), border-color 160ms; }
.stream-link:hover { border-color: var(--anil-3); color: var(--ink); }
.stream-link:active { transform: scale(0.97); }
.stream-link.is-live { background: var(--anil); border-color: var(--anil); color: var(--paper); }
.stream-link.is-live:hover { background: var(--anil-2); color: var(--paper); }
.stream-link.is-live .icon-live svg { color: #ff9a85; }
.stream-link.is-compact { min-height: 30px; padding: 0 11px; font-size: 13px; }

/* Administración, tanda 3: presencia, sincronización, partidas, versiones y ajustes */
.presence-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.presence-pill .presence { margin: 0; }
.presence-pill.is-jugando .presence { background: var(--albero); box-shadow: 0 0 0 3px rgba(244, 199, 36, 0.2); }
.sync-ok { color: var(--persiana); font-weight: 600; }
.sync-pending { color: var(--warn); font-weight: 600; }
.sync-error { color: var(--bad); font-weight: 600; }
.cell-sub { display: block; font-size: 12px; color: var(--ink-3); }
.data td { vertical-align: top; }
.data .linklike { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.data .linklike:hover { color: var(--puerta); text-decoration: underline; }
.slot-block { display: grid; gap: 8px; }
.slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.slot-title { font-size: 15px; font-weight: 750; }
.admin-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 5px; background: var(--win-bg); color: var(--albero-ink); font-size: 11px; font-weight: 700; }
.replace-what { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--cal); font-size: 13.5px; }
.replace-what dt { color: var(--ink-3); }
.replace-what dd { margin: 0; overflow-wrap: anywhere; }
/* Copias de partida (protocol.md §15.4): la actual va en marino, como la entrada actual del panel */
.slot-count { margin-left: 10px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.saves-table .save-when { display: block; font-weight: 600; white-space: nowrap; }
.saves-table tr.is-current td { background: var(--cal); }
.current-tag { display: inline-flex; margin-top: 4px; padding: 1px 9px; border-radius: 999px; background: var(--anil); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.saves-table .save-note { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.saves-table { table-layout: fixed; min-width: 900px; }
.saves-table th:nth-child(1) { width: 150px; }
.saves-table th:nth-child(3) { width: 190px; }
.saves-table th:nth-child(4) { width: 76px; }
.saves-table th:nth-child(5) { width: 84px; }
.saves-table th:nth-child(6) { width: 272px; }
.saves-table .save-progress { white-space: nowrap; }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
/* Aviso del launcher (protocol.md §16.6): el editor y, al lado, cómo lo verá el jugador */
.notice-editor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 22px; align-items: start; }
.notice-side { display: grid; gap: 8px; }
.notice-preview { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
.notice-title { font-size: 16px; font-weight: 750; font-stretch: 106%; overflow-wrap: anywhere; }
.notice-body { margin: 0; white-space: pre-line; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.notice-countdown { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--turquesa-bg); color: var(--turquesa-ink); font-weight: 700; font-size: 14px; }
.notice-countdown.is-done { background: var(--live-bg); color: var(--live-ink); }
.notice-link { justify-self: start; font-weight: 600; color: var(--puerta); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.notice-empty { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.log-row.is-bad td { background: var(--bad-bg); }
.banner-warn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-weight: 600; border: 1px solid #f1d3a0; }
.secret-state { font-size: 13px; }
.mono { font: 500 12.5px/1.3 ui-monospace, "SF Mono", Menlo, monospace; }

/* ------------------------------------------------------------------ administración */
.admin-gate { min-height: calc(100vh - 220px); display: grid; place-items: center; padding: 40px 22px; }
.gate-card { width: min(460px, 100%); display: grid; gap: 12px; padding: 34px 32px 30px; background: var(--paper); border: 1px solid var(--rule); border-radius: 50% 50% var(--r) var(--r) / 56px 56px var(--r) var(--r); box-shadow: var(--shadow-lg); }
.gate-card label { font-weight: 600; font-size: 14px; margin-top: 6px; }
.gate-icon { width: 34px; height: 34px; color: var(--anil); justify-self: center; margin-bottom: 4px; }
.gate-card .page-title { text-align: center; font-size: 26px; }
.gate-card > .muted { text-align: center; font-size: 14px; }
.mono-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.form-error { color: var(--bad); font-weight: 600; min-height: 1.4em; font-size: 14px; }
.admin { max-width: 1480px; margin: 0 auto; padding: 24px 22px 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 26px; align-items: start; }
.admin-nav { display: grid; gap: 4px; position: sticky; top: 88px; }
.admin-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; transition: background-color 160ms, color 160ms; }
.admin-nav-item:hover { background: var(--cal-2); color: var(--ink); }
.admin-nav-item[aria-current="page"] { background: var(--anil); color: var(--paper); }
.admin-logout { margin-top: 18px; color: var(--ink-3); }
.admin-main, .admin-t { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.admin-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.admin-bar .select { width: auto; min-width: 280px; }
.admin-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.admin-actions .btn-danger-quiet { margin-left: auto; }
.empty-card { display: grid; justify-items: center; gap: 10px; padding: 46px 20px; text-align: center; background: var(--paper); border: 1px dashed var(--rule-2); border-radius: var(--r); color: var(--ink-2); }
.empty-icon { width: 34px; height: 34px; color: var(--ink-3); }
.reg-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.reg-row { display: grid; grid-template-columns: 10px auto 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); }
.reg-row:first-child { border-top: 0; }
.adm-tables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.adm-table { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--cal); align-content: start; }
.adm-table[class*="tone-"] { background: var(--cal); color: var(--ink); }
.adm-table.tone-live { border-color: var(--live-edge); background: #fffaf8; }
.adm-table-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.adm-player { display: flex; align-items: center; gap: 8px; min-height: 32px; flex-wrap: wrap; }
.adm-player-actions { margin-left: auto; display: flex; gap: 6px; }
.adm-table > .btn { justify-self: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: start; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr auto; align-items: start; }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid > label { font-weight: 600; font-size: 13.5px; }
.field { display: grid; gap: 5px; align-content: start; }
.field label { font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.field.field-end { align-self: start; padding-top: 24px; justify-items: start; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: 1 / -1; }
.hint { font-size: 12px; color: var(--ink-3); }
.checks { border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 10px 14px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; margin: 0; }
.checks legend { font-weight: 600; font-size: 13.5px; color: var(--ink-2); padding: 0 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.field input[type="checkbox"] { width: 22px; height: 22px; }
.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.data td code { color: var(--ink-2); }
.cell-end { text-align: right; }
.data td .presence { margin-right: 8px; }
.dialog { border: 0; padding: 0; border-radius: 18px; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); color: var(--ink); background: var(--paper); box-shadow: var(--shadow-lg); }
.dialog::backdrop { background: rgba(11, 33, 64, 0.42); backdrop-filter: blur(3px); }
.dialog[open] { animation: dialog-in 260ms var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.dialog-body { display: grid; gap: 14px; padding: 24px 26px 22px; }
.dialog-title { font-size: 20px; font-weight: 800; font-stretch: 110%; }
/* Administración, tanda online-web6: inscripción (lista y editor del formulario), acceso, repeticiones y web */
.admin-tabs { margin-top: -4px; }
.admin .card { grid-template-columns: minmax(0, 1fr); }   /* una tabla ancha se desplaza dentro de su tarjeta, no ensancha la página */
.tabs-small .tab { padding: 5px 12px; font-size: 13px; }
.admin-actions-end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.admin-actions-end .btn-danger-quiet { margin-left: 0; }
.cell-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.entry-who { display: flex; align-items: center; gap: 10px; }
.entry-answers { display: grid; gap: 3px; font-size: 13.5px; max-width: 38ch; }
.answer { overflow-wrap: anywhere; }
.dup-note { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--warn); font-weight: 600; }
.dup-note .icon { width: 14px; height: 14px; }
.form-fields { list-style: none; margin: 0; padding: 0; display: grid; }
.form-field-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.form-field-row:first-child { border-top: 0; }
.ff-order { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--cal-2); color: var(--ink-2); font-size: 13px; font-weight: 750; }
.ff-main { display: grid; gap: 3px; min-width: 0; }
.ff-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--ink-3); }
.ff-meta .tag .icon { width: 12px; height: 12px; }
.ff-actions { display: flex; gap: 6px; align-items: center; }
.btn-icon { width: 30px; padding: 0; justify-content: center; }
.btn-icon .icon { width: 16px; height: 16px; }
.check-field { gap: 2px; }
.checks-list { display: grid; gap: 12px; }
.checks-list .check-field { grid-column: auto; }
.admin-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.admin-cols input[type="number"] { max-width: 200px; }
.input-row { display: flex; gap: 10px; align-items: center; }
.input-row input { flex: 1; }
.input-row .btn { flex: none; }
.check-field .hint { padding-left: 26px; }
.replay-link { display: inline-grid; place-items: center; min-width: 30px; height: 24px; margin: 0 4px 4px 0; padding: 0 6px; border-radius: 6px; background: var(--cal-2); color: var(--ink); font-size: 12.5px; font-weight: 700; text-decoration: none; }
a.replay-link:hover { background: var(--anil); color: var(--paper); }
.replay-link.is-off { color: var(--ink-3); text-decoration: line-through; }
.replay-link.is-wait { color: var(--ink-3); }
.vote-line { color: var(--ink-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.warn-line { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.token-row { display: flex; gap: 10px; align-items: center; }
.token { flex: 1; padding: 12px 14px; border-radius: var(--r-sm); background: var(--anil); color: var(--paper); font-size: 15px; letter-spacing: 0.02em; word-break: break-all; user-select: all; }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: grid; gap: 8px; justify-items: end; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--anil); color: var(--paper); font-weight: 600; box-shadow: var(--shadow-lg); animation: toast-in 280ms var(--ease-out); transition: opacity 300ms ease, transform 300ms ease; }
.toast.tone-bad { background: var(--bad); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------------ adaptación */
@media (max-width: 1360px) {
}
@media (max-width: 1100px) {
  .live, .arena-page, .cup-grid, .profile-grid, .home { grid-template-columns: 1fr; }
  .live-side { position: static; }
  .form-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .profile-head { grid-template-columns: auto 1fr; }
  .profile-stats { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  html { font-size: 14.5px; }
  .tb-inner { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 14px 0; min-height: 56px; }  /* sin escudo, el nombre no toca el borde */
  .brand-name { font-size: 15px; white-space: nowrap; }
  .tb-nav { order: 4; grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; margin: 0 -6px; }
  .live, .arena-page, .cup, .profile, .credits, .home, .admin { padding: 14px 12px 0; gap: 16px; }
  .scene-frame { padding: 28px 6px 6px; border-radius: 50% 50% 12px 12px / 34px 34px 12px 12px; }
  .arch-label { top: 7px; font-size: 11px; }
  .teams { grid-template-columns: 1fr; }
  .team-mons { grid-template-columns: repeat(6, minmax(0, 44px)); }
  .cup-head, .profile-head { padding: 20px 18px 18px; border-radius: 50% 50% var(--r) var(--r) / 28px 28px var(--r) var(--r); }
  .profile-head { padding-bottom: 0; }
  .profile-trainer { width: 110px; height: 110px; }
  .admin { grid-template-columns: minmax(0, 1fr); }
  .admin-nav { position: static; display: flex; overflow-x: auto; }
  .admin-logout { margin: 0 0 0 auto; }
  .admin-nav-item { white-space: nowrap; }
  .admin-actions-end { margin-left: 0; }
  .form-field-row { grid-template-columns: 26px minmax(0, 1fr); }
  .admin-cols { grid-template-columns: 1fr; }
  .notice-editor { grid-template-columns: 1fr; }
  .input-row { flex-wrap: wrap; }
  .ff-actions { grid-column: 2; flex-wrap: wrap; }
  .cell-actions { flex-wrap: wrap; justify-content: flex-start; }
  .form-grid.cols-4, .form-grid.cols-3, .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .standings .tiebreak:nth-of-type(n+6) { display: none; }
  .match-row { grid-template-columns: 26px 1fr auto; }
  .match-row .team-strip { display: none; }
  .participants { grid-template-columns: 1fr; }
}

/* Movimiento reducido: sin desplazamientos ni bucles; quedan los cambios de color y opacidad. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .poke-sprite.animated, .actor.is-moving .actor-sprite, .scene-weather, .tone-live .icon-live svg, .conn-live .live-dot, .textbox-arrow { animation: none !important; }
  .shutter { transition: opacity 260ms ease !important; }
  .curtain.is-open .shutter-l, .curtain.is-open .shutter-r { transform: none; }
  .curtain-card, .plate, .team-mon, .hp-fill, .hp-ghost, .actor { transition-property: opacity, background-color, color !important; }
  .slot.is-fainted .poke-sprite { transform: translateX(-50%); clip-path: none; }
  .roll-in, .roll-out { animation: none !important; }
  .side-glow { animation: none !important; }
  .hz, .side-chip { animation: hz-fade 300ms ease both !important; }
}
@keyframes hz-fade { from { opacity: 0; } }
@media (prefers-contrast: more) {
  :root { --rule: #9fb0c8; --ink-3: #3c4f6b; }
}
.admin-t > .btn-quiet:first-child { justify-self: start; }

/* ================================================================== el Directo con varios combates
   Varios combates a la vez (placas de combate en rejilla), la tira para saltar de mesa, el alféizar
   de la escena con el turno y su reloj de espera, Poké Balls dibujadas en la paleta, el anuncio del
   movimiento con el color de su tipo y una capa viva: el mar que deriva y los sprites que respiran. */

/* Poké Balls: los Pokémon que quedan (terracota, gris si se debilitó) y las partidas de la serie
   (llenas del color del lado las ganadas, vacías las que faltan). */
.balls { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.pb { --pb-top: var(--geranio); --pb-line: var(--anil); position: relative; width: 13px; height: 13px; flex: none; border-radius: 50%;
  background: linear-gradient(var(--pb-top) 0 45.5%, var(--pb-line) 45.5% 54.5%, #fff 54.5%); box-shadow: inset 0 0 0 1.2px var(--pb-line); }
.pb::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.2px var(--pb-line); }
.pb.is-fainted { --pb-top: #b3bfce; opacity: 0.5; }
.pb.is-empty { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.55; }
.pb.is-empty::after { display: none; }
.pips.side-A .pb.is-won { --pb-top: var(--a); }
.pips.side-B .pb.is-won { --pb-top: var(--b); }
.pb.is-won { animation: pb-in 420ms var(--ease-out) both; }
@keyframes pb-in { from { transform: scale(0.4); } }

/* Relojes de espera: cifras tabulares que avanzan solas. */
.clock { font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
@keyframes think { 0%, 60%, 100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* --- el Directo como página: la tira, la rejilla o el vacío, y el combate --- */
.live-page { max-width: 1680px; margin: 0 auto; padding: 22px 22px 0; display: grid; gap: 16px; }
.live-page .live { padding: 0; max-width: none; margin: 0; width: 100%; }
.live-page > *, .board-page > *, .board > li, .mc, .mc-body, .harbor-page > * { min-width: 0; }
.board-page { display: grid; gap: 22px; }
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 410px), 1fr)); gap: 24px 22px; }
.board > li { display: grid; }
/* Las placas entran una vez, al mostrar la rejilla; las actualizaciones no la repiten. */
.board.is-entering > li { animation: card-in 520ms var(--ease-out) both; }
.board.is-entering > li:nth-child(2) { animation-delay: 70ms; }
.board.is-entering > li:nth-child(3) { animation-delay: 140ms; }
.board.is-entering > li:nth-child(n+4) { animation-delay: 200ms; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }

/* Placa de combate: una ventana pequeña con su arco; dentro, papel con el filo doble del juego. */
.mc { position: relative; display: grid; padding: 30px 9px 9px; border-radius: 50% 50% 16px 16px / 30px 30px 16px 16px;
  background: var(--anil); color: var(--paper); text-decoration: none; box-shadow: var(--shadow);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.mc::before { content: ""; position: absolute; inset: 5px; border-radius: inherit; border: 1.5px solid rgba(255, 255, 255, 0.12); pointer-events: none; }
a.mc:hover { color: var(--paper); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
a.mc:active { transform: translateY(-1px) scale(0.99); }
a.mc:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; border-radius: 50% 50% 16px 16px / 30px 30px 16px 16px; }
.mc-arch { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: 86%;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; color: rgba(255, 255, 255, 0.86); }
.mc-where { overflow: hidden; text-overflow: ellipsis; }
.mc-body { position: relative; display: grid; padding: 10px 14px 0; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--edge); }
.mc-meta { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); }
.mc-turn { white-space: nowrap; }
.mc-turn b { color: var(--ink); font-weight: 800; font-size: 14px; }
.mc-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 46px; gap: 12px; align-items: center; padding: 10px 0; }
.mc-row + .mc-row { border-top: 1px dashed var(--rule); }
.mc-trainer .trainer-sprite.mini { width: 34px; height: 34px; background-color: var(--cal); }
.mc-who { display: grid; gap: 6px; min-width: 0; }
.mc-name { font-size: 16px; font-weight: 750; font-stretch: 104%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-row.side-A .mc-name { color: var(--a); }
.mc-row.side-B .mc-name { color: var(--b); }
.mc-row.is-winner { background: linear-gradient(90deg, rgba(244, 199, 36, 0.18), transparent 70%); margin: 0 -14px; padding: 10px 14px; }
.mc-field { display: flex; gap: 6px; }
.mc-mon { display: grid; justify-items: center; gap: 4px; width: 44px; }
.mc-mon .portrait { width: 40px; height: 40px; border-radius: 10px; background-color: var(--cal); box-shadow: inset 0 0 0 1px var(--rule); }
.mc-mon.is-fainted .portrait { filter: grayscale(1) contrast(0.7) brightness(1.15); opacity: 0.55; }
.mc-hp { display: block; width: 40px; height: 6px; border-radius: 4px; overflow: hidden; background: var(--hp-track); }
.mc-hp-fill { --hp-c: var(--hp-high); display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); background: var(--hp-c);
  transition: transform 1000ms cubic-bezier(0.33, 0.1, 0.25, 1), background-color 300ms; }
.mc-hp.hp-mid .mc-hp-fill { --hp-c: var(--hp-mid); }
.mc-hp.hp-low .mc-hp-fill { --hp-c: var(--hp-low); }
.mc-score { display: grid; justify-items: center; gap: 5px; }
.mc-wins { font-size: 34px; font-weight: 850; font-stretch: 118%; line-height: 0.9; }
.mc-row.side-A .mc-wins { color: var(--a); }
.mc-row.side-B .mc-wins { color: var(--b); }
.mc-score .pb { width: 10px; height: 10px; }
.mc-state { display: flex; align-items: center; gap: 8px; margin: 0 -14px; padding: 10px 14px; border-top: 1px solid var(--rule); border-radius: 0 0 10px 10px;
  background: var(--cal); color: var(--ink-2); font-size: 13.5px; font-weight: 650; min-height: 44px; }
.mc-state-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-state .clock { margin-left: auto; font-size: 15px; }
.st-wait .mc-state { background: var(--turquesa-bg); color: var(--turquesa-ink); }
.st-wait .mc-state-icon { animation: tide-pulse 2.4s ease-in-out infinite; }
.st-live .mc-state { background: var(--live-bg); color: var(--live-ink); }
.st-live .mc-state-icon svg { color: var(--geranio); animation: pulse 1.6s ease-in-out infinite; }
.st-win .mc-state { background: var(--win-bg); color: var(--albero-ink); }
.st-quiet .mc-state-icon { color: var(--ink-3); }
@keyframes tide-pulse { 50% { transform: scale(0.88); opacity: 0.7; } }
.state-done { opacity: 0.92; }

/* La tira de mesas, encima del combate cuando hay más de uno. */
.strip-wrap { min-width: 0; }
.strip { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.strip-all { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--anil); color: var(--paper);
  font-size: 13.5px; font-weight: 700; text-decoration: none; transition: transform 140ms var(--ease-out), background-color 160ms; }
.strip-all:hover { color: var(--paper); background: var(--anil-2); }
.strip-all:active { transform: scale(0.97); }
.strip-count { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 12px; }
/* Las pastillas se reparten el ancho (ninguna se queda cortada); si no caben a 220px, la fila se desplaza. */
.strip-list { list-style: none; margin: 0; padding: 2px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; flex: 1; min-width: 0; }
.strip-list > li { display: grid; min-width: 0; scroll-snap-align: start; }
.strip-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 12px; white-space: nowrap; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
  color: var(--ink); text-decoration: none; font-size: 13px; transition: border-color 160ms, transform 140ms var(--ease-out); }
.strip-chip:hover { border-color: var(--anil-3); color: var(--ink); }
.strip-chip:active { transform: scale(0.98); }
.strip-chip.is-current { border-color: var(--anil); box-shadow: 0 0 0 1.5px var(--anil), var(--shadow-sm); }
.strip-where { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.strip-duel { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.strip-duel b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.strip-score { font-weight: 850; font-stretch: 115%; }
/* Si no cabe, primero se recorta dónde se juega y, en una pastilla estrecha, el texto del estado queda
   para el lector de pantalla (el punto y el reloj siguen): los nombres, lo último. */
.strip-state { display: flex; gap: 6px; align-items: center; margin-left: auto; font-size: 12px; color: var(--ink-2); flex: none; }
.strip-list > li { container-type: inline-size; }
@container (max-width: 300px) {
  .strip-state-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* En una pastilla estrecha, «RONDA…» no dice nada: dónde se juega queda solo para el lector de pantalla y los nombres caben. */
@container (max-width: 250px) {
  .strip-where { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.strip-state .clock { color: var(--turquesa-ink); }
.strip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-2); }
.st-wait .strip-dot { background: var(--turquesa); }
.st-live .strip-dot { background: var(--geranio); }
.st-win .strip-dot { background: var(--albero); }

/* El alféizar de la escena: el turno, quién elige con su reloj y los Pokémon que quedan. */
.sill { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  margin-top: 10px; padding: 8px 14px; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--edge); overflow: hidden; }
.sill-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sill-B { flex-direction: row-reverse; }
.sill-name { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sill-A .sill-name { color: var(--a); }
.sill-B .sill-name { color: var(--b); }
.sill-balls .pb { width: 13px; height: 13px; }
.sill-center { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); white-space: nowrap; }
.sill-turn { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; }
.sill-turn-label { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.sill-turn-num { font-size: 26px; font-weight: 850; font-stretch: 118%; }
.sill-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; min-width: 0; }
.sill-text { overflow: hidden; text-overflow: ellipsis; }
.sill-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--turquesa); }
.sill-clock { font-size: 16px; color: var(--turquesa-ink); min-width: 2.6em; text-align: right; }
.sill[data-state="choosing"] .sill-dot, .sill[data-state="one"] .sill-dot { animation: tide-ring 2s ease-out infinite; }
.sill[data-state="playing"] .sill-dot, .sill[data-state="resolving"] .sill-dot { background: var(--geranio); animation: beacon 2s ease-out infinite; }
.sill[data-state="ended"] .sill-dot { background: var(--rule-2); }
@keyframes tide-ring { 0% { box-shadow: 0 0 0 0 rgba(20, 163, 158, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(20, 163, 158, 0); } }
/* La marea: mientras se elige, una línea turquesa sube y baja por el borde del alféizar. */
.sill::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--turquesa), var(--puerta));
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: opacity 300ms ease; }
.sill[data-state="choosing"]::after, .sill[data-state="one"]::after { opacity: 1; animation: tide 5s ease-in-out infinite alternate; }
@keyframes tide { from { transform: scaleX(0.08); } to { transform: scaleX(1); } }
@container (max-width: 640px) {
  .sill { grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 8px 10px; }
  .sill-center { grid-column: 1 / -1; order: -1; justify-content: center; border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 6px; }
  .sill-turn-num { font-size: 22px; }
  .sill-state { font-size: 13px; white-space: normal; }
  /* En estrecho, el nombre entero y las Poké Balls en su propia línea. */
  .sill-side { flex-wrap: wrap; row-gap: 4px; }
  .sill-balls { order: 9; flex-basis: 100%; }
  .sill-B .sill-balls { text-align: right; }
}

/* Anuncio del movimiento: una pestaña del color de su tipo asoma por encima de la caja de texto. */
.move-tab { position: absolute; left: 14px; bottom: 90px; z-index: 690; display: flex; align-items: center; gap: 8px; height: 30px; max-width: 300px;
  padding: 0 14px 0 6px; border: 2.5px solid var(--anil); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: linear-gradient(rgba(255, 255, 255, 0.28) 0 3px, transparent 3px), var(--tc); color: #0d1a2c; font: 700 18px/1 var(--font-pixel); white-space: nowrap; }
.move-tab[data-t="FIGHTING"], .move-tab[data-t="POISON"], .move-tab[data-t="GHOST"], .move-tab[data-t="DRAGON"], .move-tab[data-t="DARK"], .move-tab[data-t="WATER"] { color: #fff; }
.move-tab-type { padding: 3px 6px 2px; border-radius: 5px; background: rgba(11, 33, 64, 0.85); color: #fff; font: 700 11px/1 var(--font-pixel); letter-spacing: 0.04em; }
/* El símbolo del tipo del juego (types_ico.png, 19 de 24x28). */
.move-tab-icon { width: 21px; height: 24px; flex: none; background: url("/sprites/UI/Battle/types_ico.png") 0 calc(var(--ti, 9) / 18 * 100%) / 100% 1900% no-repeat; image-rendering: pixelated; }
.move-tab-name { overflow: hidden; text-overflow: ellipsis; }
/* En dobles, la pestaña va dentro de la caja, al principio de la primera línea (encima de la caja taparía
   a los Pokémon del lado A), y la frase sigue detrás y baja a la segunda: siempre dos líneas.
   --tab-w lo mide battle.js; la pestaña empieza 8px antes que el texto, el hueco entre las dos. */
.is-double .move-tab { left: 19px; bottom: 46px; z-index: 710; height: 28px; max-width: 240px; border-bottom: 2.5px solid var(--anil); border-radius: 8px; }
.is-double .textbox.has-tab .textbox-text { text-indent: var(--tab-w, 0px); }

/* Vida en la escena: los Pokémon respiran (el de espaldas se mece) y duermen más despacio. */
.slot { transform-origin: 0 0; }
.slot-B:not(.is-fainted) { animation: breathe 3.4s ease-in-out infinite; }
.slot-A:not(.is-fainted) { animation: sway 3s ease-in-out -1.1s infinite; }
.slot-B + .slot-B:not(.is-fainted) { animation-delay: -1.6s; }
.slot[data-status="SLEEP"]:not(.is-fainted) { animation-duration: 5.6s; }
.slot[data-status="FROZEN"], .slot[data-status="PARALYSIS"] { animation-play-state: paused; }
@keyframes breathe { 50% { scale: 1.012 1.032; } }
@keyframes sway { 50% { translate: 0 -2.5px; } }

/* La capa de OBS: quién está eligiendo, bajo el marcador. */
.ov-wait { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 6px 18px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 18px; font-weight: 700; letter-spacing: 0.08em; }
.ov-wait-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--turquesa); animation: tide-ring 2s ease-out infinite; }
.ov-wait.is-resolving .ov-wait-dot { background: var(--geranio); animation: beacon 2s ease-out infinite; }
.ov-wait .clock { color: #8fe6df; }

/* Sin combates: el muelle vacío, con el mar al pie. */
.harbor-page { display: grid; gap: 22px; }
.harbor { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 14px; padding: 64px 24px 96px; text-align: center;
  background: var(--anil); color: var(--paper); border-radius: 50% 50% var(--r) var(--r) / 90px 90px var(--r) var(--r); box-shadow: var(--shadow-lg); }
.harbor::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; border: 1.5px solid rgba(255, 255, 255, 0.12); pointer-events: none; }
.harbor-title { font-size: clamp(28px, 4vw, 52px); font-weight: 850; font-stretch: 120%; letter-spacing: -0.02em; line-height: 1; text-wrap: balance; }
.harbor-sub { max-width: 54ch; color: rgba(255, 255, 255, 0.8); text-wrap: pretty; }
.harbor .btn { position: relative; z-index: 1; }

@media (max-width: 1100px) {
}
@media (max-width: 760px) {
  .live-page { padding: 14px 12px 0; gap: 12px; }
  .board { gap: 16px; }
  .mc-row { grid-template-columns: 30px minmax(0, 1fr) auto 40px; gap: 9px; }
  .mc-trainer .trainer-sprite.mini { width: 30px; height: 30px; }
  .mc-mon { width: 36px; }
  .mc-mon .portrait { width: 34px; height: 34px; }
  .mc-hp { width: 34px; }
  .mc-wins { font-size: 30px; }
  .mc-state { flex-wrap: wrap; }
  .mc-state-text { white-space: normal; flex: 1 1 60%; }
  .mc-meta { flex-wrap: wrap; }
  .strip { flex-direction: column; gap: 8px; }
  .strip-list { grid-auto-columns: minmax(min(78vw, 260px), 1fr); }
  .strip-all { padding: 8px 12px; align-self: start; }
  .harbor { padding: 44px 18px 84px; border-radius: 50% 50% var(--r) var(--r) / 40px 40px var(--r) var(--r); }
}
@media (prefers-reduced-motion: reduce) {
  .sea .wave, .slot, .sill::after, .sill-dot, .ov-wait-dot, .st-wait .mc-state-icon, .st-live .mc-state-icon svg, .mc-live .live-dot { animation: none !important; }
  .sill[data-state="choosing"]::after, .sill[data-state="one"]::after { transform: scaleX(1); }
  .board > li, .pb.is-won { animation: none !important; }
  .mc, .strip-chip, .mc-hp-fill { transition-property: opacity, background-color, color, border-color !important; }
}

/* ================================================================== el torneo por fases
   El camino (inscripciones → suizo → fase final → campeón), el esquema del suizo por columnas, la
   línea de corte, el cuadro de la fase final como protagonista y el campeón con su podio. */
.cup-switch { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px; }
.cup-switch-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink-2); font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: border-color 160ms, transform 140ms var(--ease-out); }
.cup-switch-item:hover { border-color: var(--anil-3); color: var(--ink); }
.cup-switch-item:active { transform: scale(0.97); }
.cup-switch-item.is-current { background: var(--anil); border-color: var(--anil); color: var(--paper); }
.phase-chip { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: 0.03em; background: var(--cal-2); color: var(--ink-2); }
.phase-chip.phase-swiss, .phase-chip.phase-playoff, .phase-chip.phase-pending { background: var(--live-bg); color: var(--live-ink); }
.phase-chip.phase-finished { background: var(--win-bg); color: var(--albero-ink); }
.cup-switch-item.is-current .phase-chip { background: rgba(255, 255, 255, 0.16); color: var(--paper); }

.phase-track { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.phase-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: rgba(255, 255, 255, 0.62); }
.phase-step + .phase-step::before { content: ""; width: 28px; height: 2px; margin: 0 10px 0 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.phase-step.is-done + .phase-step::before { background: var(--turquesa); }
.phase-dot { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.phase-dot .icon { width: 12px; height: 12px; }
.phase-step.is-done { color: rgba(255, 255, 255, 0.86); }
.phase-step.is-done .phase-dot { background: var(--turquesa); box-shadow: none; color: var(--paper); }
.phase-step.is-now { color: var(--paper); }
.phase-step.is-now .phase-dot { background: var(--albero); box-shadow: 0 0 0 4px rgba(244, 199, 36, 0.25); }
.phase-label { display: inline-grid; gap: 4px; }
.phase-bar { position: relative; display: block; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.2); }
.phase-bar::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--v, 0)); background: var(--albero); border-radius: 3px; transition: transform 600ms var(--ease-out); }

.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.block-head .btn .live-dot { animation: beacon 2s ease-out infinite; }
.cup-stack { display: grid; gap: 26px; }
.cup-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r); background: var(--ready-bg); color: #3d5414; border: 1px solid var(--ready-edge); }
.cup-banner .icon { width: 22px; height: 22px; color: var(--persiana); }

/* La línea de corte de la clasificación: quién entraría en la fase final. */
.standings tr.is-in .rank { color: var(--anil); }
.standings tr.cut-row td { padding: 0; border-top: 0; background: transparent; }
.standings tr.cut-row span { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--turquesa-ink);
  background: linear-gradient(90deg, var(--turquesa-bg), transparent); border-top: 2px dashed var(--turquesa); }

/* Esquema del suizo: una columna por ronda, con sus mesas. */
.scheme-wrap { overflow-x: auto; padding-bottom: 6px; }
.scheme { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 12px; }
.scheme-round { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: var(--r); background: var(--cal-2); }
.scheme-round.is-current { background: var(--paper); box-shadow: 0 0 0 2px var(--anil), var(--shadow-sm); }
.scheme-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; font-stretch: 108%; color: var(--ink-2); }
.scheme-now { padding: 1px 7px; border-radius: 999px; background: var(--anil); color: var(--paper); font-size: 10.5px; letter-spacing: 0.04em; }
.scheme-tables { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.scheme-pair { border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); font-size: 13px; }
.scheme-pair > div, .scheme-link { display: grid; gap: 1px; padding: 6px 9px; color: var(--ink); text-decoration: none; }
.scheme-link:hover { color: var(--ink); }
.scheme-pair.st-live { box-shadow: inset 0 0 0 1.5px var(--geranio); }
.scheme-pair.is-bye { padding: 6px 9px; color: var(--ink-3); }
.scheme-line { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-3); }
.scheme-line.is-winner { color: var(--ink); font-weight: 750; }
.scheme-name-p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheme-state { margin-top: 3px; font-size: 11.5px; font-weight: 650; }
.scheme-state.tone-live { color: var(--live-ink); }
.scheme-state.tone-ready { color: var(--ready-ink); }
.scheme-state.tone-warn, .scheme-state.tone-bad { color: var(--bad); }

/* El cuadro: columnas por ronda; cada partido, en su hueco, unido al siguiente por un trazo marino. */
.bracket-wrap { overflow-x: auto; padding: 4px 2px 10px; }
.bracket { --cell: 104px; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); column-gap: 34px; min-width: max-content; }
.br-round { display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.br-name { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.br-round.is-final .br-name { color: var(--albero-ink); }
.br-matches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--n, 1), 1fr); height: calc(var(--first) * var(--cell)); }
.br-cell { position: relative; display: grid; align-items: center; }
/* Trazos: medio tramo a la derecha de cada partido, el vertical que une cada pareja y la entrada al siguiente. */
.br-round:not(:last-child) .br-cell::after { content: ""; position: absolute; left: 100%; top: 50%; width: 17px; border-top: 2px solid var(--rule-2); }
.br-round:not(:last-child) .br-cell:nth-child(odd)::before { content: ""; position: absolute; left: calc(100% + 17px); top: 50%; height: 100%; border-left: 2px solid var(--rule-2); }
.br-round:not(:first-child) .br-card::before { content: ""; position: absolute; right: 100%; top: 50%; width: 17px; border-top: 2px solid var(--rule-2); }
.br-card { position: relative; display: grid; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--edge), var(--shadow-sm); overflow: visible; }
.br-card > .br-side:first-child { border-radius: 10px 10px 0 0; }
.br-side { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; min-height: 36px; }
.br-side + .br-side { border-top: 1px solid var(--rule); }
.br-seed { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--cal-2); color: var(--ink-2); font-size: 11.5px; font-weight: 800; }
.br-seed:empty { background: transparent; }
.br-player { font-weight: 650; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.br-player:hover { color: var(--puerta); text-decoration: underline; }
.br-wins { font-weight: 850; font-stretch: 115%; font-size: 18px; min-width: 1ch; text-align: right; color: var(--ink-3); }
.br-side.is-winner { background: linear-gradient(90deg, rgba(244, 199, 36, 0.2), transparent 80%); }
.br-side.is-winner .br-player { font-weight: 800; }
.br-side.is-winner .br-wins { color: var(--anil); }
.br-side.is-loser .br-player, .br-side.is-loser .br-wins { color: var(--ink-3); font-weight: 500; }
.br-side.is-tbd .br-player { color: var(--ink-3); font-weight: 500; font-style: italic; }
.br-card.st-pending:not(:has(a.br-player)) { box-shadow: inset 0 0 0 1.5px var(--rule-2); background: repeating-linear-gradient(135deg, var(--paper) 0 8px, var(--cal) 8px 16px); }
.br-card.st-live { box-shadow: inset 0 0 0 2px var(--geranio), 0 10px 24px -14px rgba(194, 80, 42, 0.6); }
.br-live, .br-note { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-top: 1px solid var(--rule); border-radius: 0 0 10px 10px; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.br-live { background: var(--live-bg); color: var(--live-ink); }
a.br-live:hover { color: #6f2810; }
.br-live .live-dot { animation: beacon 2s ease-out infinite; }
.br-live .icon { margin-left: auto; }
.br-note { color: var(--ready-ink); background: var(--ready-bg); }
.br-card.is-final { box-shadow: inset 0 0 0 2px var(--albero), var(--shadow); }
.br-card.is-final.st-live { box-shadow: inset 0 0 0 2px var(--geranio), 0 0 0 4px rgba(244, 199, 36, 0.35); }

/* Campeón: en su nicho de medio punto, con banderines y el podio. */
.champion { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 20px 30px; padding: 74px 34px 0;
  background: var(--anil); color: var(--paper); border-radius: 50% 50% var(--r) var(--r) / 60px 60px var(--r) var(--r); box-shadow: var(--shadow-lg); }
.champion .bunting { opacity: 1; transform: none; top: 16px; left: 6%; right: 6%; width: auto; }
.champion-trophy { width: 64%; height: 64%; align-self: center; color: var(--albero-ink); }
.champion-niche { --base: 12px; width: 168px; height: 168px; display: grid; place-items: end center; border-radius: 50% 50% 0 0 / 38% 38% 0 0; background: var(--paper); box-shadow: inset 0 -12px 0 var(--albero); }
.champion-id { display: grid; gap: 6px; padding-bottom: 26px; }
.champion-sub .icon { color: var(--albero); margin-right: 4px; }
.champion-name { font-size: clamp(36px, 6vw, 84px); font-weight: 850; font-stretch: 122%; line-height: 0.92; letter-spacing: -0.025em; }
.champion-name a { color: var(--paper); text-decoration: none; }
.champion-name a:hover { color: #ffeaa0; }
.champion-sub { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.podium { list-style: none; margin: 0; padding: 0 0 26px; display: grid; gap: 8px; align-self: end; }
.podium li { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-weight: 650; }
.podium a { color: var(--paper); }
.podium-pos { font-weight: 850; font-stretch: 115%; color: var(--a-light); min-width: 3.4em; }

/* Plegables: la clasificación del suizo bajo el cuadro. */
.fold { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 750; font-stretch: 106%; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-icon { transition: transform 200ms var(--ease-out); }
.fold[open] .fold-icon { transform: rotate(90deg); }
.fold-body { padding: 0 18px 18px; }

/* Inscritos (inscripciones abiertas) y conectados ahora (Directo). */
.entrants { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.entrant { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }

@media (max-width: 760px) {
  .champion { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 40px 18px 0; border-radius: 50% 50% var(--r) var(--r) / 34px 34px var(--r) var(--r); }
  .champion-niche { width: 128px; height: 128px; order: -1; }
  .champion-id { padding-bottom: 0; }
  .podium { width: 100%; padding-bottom: 20px; }
  /* En móvil, el cuadro sigue dibujado (las series unidas por sus trazos) en columnas más estrechas, y
     se desliza en horizontal hasta la final; cada ronda encaja al soltar. */
  .bracket { --cell: 96px; grid-auto-columns: minmax(176px, 1fr); column-gap: 26px; }
  .br-round { scroll-snap-align: start; }
  .br-round:not(:last-child) .br-cell::after, .br-round:not(:first-child) .br-card::before { width: 13px; }
  .br-round:not(:last-child) .br-cell:nth-child(odd)::before { left: calc(100% + 13px); }
  .bracket-wrap { scroll-snap-type: x proximity; margin: 0 -12px; padding: 4px 12px 12px; scroll-padding: 0 12px; }
  .br-side { padding: 6px 10px 6px 7px; gap: 6px; }
  .cup-switch { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; }
  .phase-step + .phase-step::before { width: 14px; margin: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-icon { transition: none; }
}

/* ================================================================== el combate: VS, sellos y destellos
   Presentación «VS» con los entrenadores en las contraventanas, sellos de eficacia y crítico, el
   destello del crítico y el anuncio del movimiento con el símbolo de su tipo del propio juego. */
.curtain.is-vs .curtain-card { width: 100%; padding: 0 4%; }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0 2%; width: 100%; }
.vs-side { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.vs-trainer { --base: 9px; display: grid; place-items: end center; width: clamp(96px, 28cqw, 200px); aspect-ratio: 1; border-radius: 50% 50% 14px 14px / 34% 34% 14px 14px;
  background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.82) 60%); box-shadow: inset 0 -9px 0 var(--a); }
.vs-side.side-B .vs-trainer { box-shadow: inset 0 -9px 0 var(--b); }
.vs-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 850; font-stretch: 118%; font-size: clamp(18px, 5cqw, 40px); line-height: 1; }
.vs-side.side-A .vs-name { color: var(--a-light); }
.vs-side.side-B .vs-name { color: var(--b-light); }
.vs-mark { align-self: center; font-weight: 900; font-stretch: 125%; font-style: italic; font-size: clamp(34px, 11cqw, 96px); line-height: 1; color: var(--albero);
  text-shadow: 0 3px 6px rgba(107, 83, 0, 0.55), 0 10px 24px rgba(6, 21, 43, 0.45); }
.vs-sub { grid-column: 1 / -1; margin-top: 12px; text-align: center; font-size: clamp(12px, 2cqw, 15px); font-weight: 650; letter-spacing: 0.04em; color: var(--lemon-on-navy); }
.curtain.is-vs.is-closed .vs-side.side-A { animation: vs-left 700ms var(--ease-out) 120ms both; }
.curtain.is-vs.is-closed .vs-side.side-B { animation: vs-right 700ms var(--ease-out) 120ms both; }
.curtain.is-vs.is-closed .vs-mark { animation: vs-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 560ms both; }
.curtain.is-vs.is-closed .vs-sub { animation: rise 600ms var(--ease-out) 800ms both; }
@keyframes vs-left { from { transform: translateX(-60%); opacity: 0; } }
@keyframes vs-right { from { transform: translateX(60%); opacity: 0; } }
@keyframes vs-pop { from { transform: scale(2.4) rotate(-10deg); opacity: 0; } }

.fx-stamp { padding: 6px 14px 5px; border-radius: 8px; border: 3px solid currentColor; background: rgba(255, 255, 255, 0.94); font: 700 22px/1 var(--font-pixel);
  white-space: nowrap; z-index: 680; box-shadow: 0 6px 14px -6px rgba(11, 33, 64, 0.55); }
.fx-stamp.is-crit { color: #8a5d00; background: var(--win-bg); border-color: var(--albero); }
.fx-stamp.is-super { color: #9b3412; }
.fx-stamp.is-notvery { color: var(--ink-2); }
.fx-stamp.is-immune { color: var(--ink-3); border-style: dashed; }
.fx-crit { position: absolute; inset: 0; z-index: 640; pointer-events: none; background: radial-gradient(circle at 50% 45%, #fff, rgba(255, 246, 204, 0.85) 45%, rgba(255, 255, 255, 0.4)); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .curtain.is-vs.is-closed .vs-side, .curtain.is-vs.is-closed .vs-mark, .curtain.is-vs.is-closed .vs-sub { animation: hz-fade 400ms ease both !important; }
}

/* ================================================================== el combate en una pantalla, caras y streams
   En escritorio el combate cabe entero bajo la barra: la escena se dimensiona por el alto que queda
   (--tb-h y --strip-h los mide live-view.js) y la columna de la derecha ocupa ese mismo alto, con la
   crónica creciendo y desplazándose por dentro; debajo, los streams y las mesas. Cada Pokémon en el
   campo lleva en su placa la cara de PMDCollab, que cambia con lo que le pasa. */

/* La cara en la placa, con filo marino; al caer, mareada (o apagada, si esa especie no tiene Dizzy). */
.plate-body { min-width: 0; }
.plate-face { width: 42px; height: 42px; border-radius: 6px; background-color: var(--cal-2); box-shadow: inset 0 0 0 1.5px var(--anil); }
.is-double .plate-face { width: 34px; height: 34px; border-radius: 5px; }
.plate-face.is-shiny { box-shadow: inset 0 0 0 1.5px var(--anil), 0 0 0 1.5px var(--albero); }
.plate.is-down .plate-face:not([data-shown="Dizzy"]) { filter: grayscale(1) contrast(0.8) brightness(1.1); }
.plate-face.is-hurt { animation: face-hit 380ms steps(6, end) both; }
@keyframes face-hit { 20% { translate: -2px 0; } 40% { translate: 2px 0; } 60% { translate: -1px 0; } 80% { translate: 1px 0; } }
.overlay .plate { width: 440px; gap: 12px; padding: 8px 16px 8px 8px; }
.overlay .plate-face { width: 64px; height: 64px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--anil); }

/* La serie, en corto: el marcador, las partidas en una fila y las reglas plegadas. */
.series-card { padding: 14px 18px; }
.series-card .series-panel { gap: 8px; }
.games.is-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.games.is-inline li { gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; }
.games.is-inline .num { min-width: 0; }

/* Equipos en la columna: más justos, cada uno con su fila de retratos. */
.live-side .team { padding: 10px 12px; gap: 8px; }
.live-side .team-mons { gap: 5px; }


@media (min-width: 1101px) and (min-height: 600px) {
  .live {
    --live-h: calc(100svh - var(--tb-h, 72px) - 22px - var(--strip-h, 0px) - min(var(--strip-h, 0px), 16px) - 16px);
    --sill-h: 112px;   /* el alféizar en dos líneas (marco por debajo de 640px), con su margen */
    --stage-w: calc((var(--live-h) - 52px - var(--sill-h)) * 4 / 3 + 24px);
    /* min-height, no height: si la columna no cabe (pantalla baja, reglas abiertas, la tira de mesas),
       el bloque crece y empuja lo de debajo en vez de montarse encima. */
    min-height: var(--live-h); grid-template-columns: min(var(--stage-w), 100% - 364px) minmax(340px, 560px); justify-content: center;
  }
  .live-main { max-width: none; }
  .live-side { position: static; min-height: var(--live-h); display: flex; flex-direction: column; gap: 14px; }
  .live-side > * { flex: none; }
  .live-side > .feed-card { flex: 1 1 0; min-height: 140px; display: flex; flex-direction: column; }
  .feed-card > .board-slot, .feed-card .feed-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .feed-card .feed { flex: 1; min-height: 0; max-height: none; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
}
@media (min-width: 1101px) and (min-height: 820px) {
  .live { --sill-h: 58px; }   /* con este alto el marco pasa de 640px y el alféizar va en una línea */
}

@media (max-width: 760px) {
  .live-side .feed { max-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .plate-face.is-hurt { animation: none !important; }
}

/* ------------------------------------------------------------------ Arena y Torneo (tanda online-web5) */
/* El muelle vacío dice qué viene: las mesas que faltan, en filas claras sobre el marino, y una línea con
   cuánta gente hay conectada junto al botón. */
.harbor-next { position: relative; z-index: 1; list-style: none; margin: 4px 0 0; padding: 4px 16px; width: min(560px, 100%); display: grid; text-align: left;
  border-radius: 12px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.harbor-next li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px dashed rgba(255, 255, 255, 0.16); }
.harbor-next li:first-child { border-top: 0; }
.harbor-no { color: var(--a-light); font-weight: 700; font-size: 13px; }
.harbor-vs { color: rgba(255, 255, 255, 0.6); }
.harbor-st { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.harbor-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 6px; }
.harbor-online { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.82); }

/* La serie del combate, plegada en una línea bajo los equipos: es secundaria. */
.series-fold { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.series-fold > summary { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; list-style: none; border-radius: inherit; }
.series-fold > summary::-webkit-details-marker { display: none; }
.series-fold > summary .fold-title { font-weight: 750; font-stretch: 104%; }
.series-fold > summary .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-fold > summary:hover .fold-title { color: var(--puerta); }
.series-fold[open] .fold-icon { transform: rotate(90deg); }
.series-fold-body { display: grid; gap: 10px; padding: 0 16px 14px; }

/* Torneo: el formato en una frase, y la cuenta de jugadores en la cabecera. */
.cup-explain { padding: 14px 18px; border-radius: var(--r); background: var(--cal-2); color: var(--ink-2); line-height: 1.55; max-width: 100ch; text-wrap: pretty; }
.cup-explain b { color: var(--ink); }
.card .cup-explain { padding: 0; background: none; }
.cup-count { color: rgba(255, 255, 255, 0.74); }
.round-now .block-head { align-items: baseline; }
.round-now > .btn { justify-self: start; }
.round-now .mini-table .pill { font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) {
  .series-fold .fold-icon { transition: none; }
}

/* Administración, Versiones: el builder en vivo (pasos y sistemas) y las versiones publicadas */
.builder-name { display: flex; align-items: baseline; gap: 10px; }
.builder-head-end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.build-title { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin: 0; font-size: 14px; }
.build-title b { font-size: 26px; font-weight: 850; font-stretch: 116%; letter-spacing: -0.02em; line-height: 1; }
.build-commit { color: var(--ink-2); }
.build-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.build-step { position: relative; display: grid; justify-items: start; align-content: start; gap: 5px; padding-right: 8px; font-size: 13px; }
.build-step::before { content: ""; position: absolute; top: 11px; left: 30px; right: 4px; height: 2px; border-radius: 2px; background: var(--rule); }
.build-step:last-child::before { content: none; }
.build-step.is-done::before { background: var(--ready-edge); }
.build-step-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rule-2); background: var(--paper); }
.build-step-mark .icon { width: 14px; height: 14px; }
.build-step.is-done .build-step-mark { background: var(--ready-bg); border-color: var(--ready-edge); color: var(--ready-ink); }
.build-step.is-running .build-step-mark { background: var(--live-bg); border-color: var(--live-edge); }
.build-step.is-running .icon-live svg { animation: pulse 1.6s ease-in-out infinite; }
.build-step.is-failed .build-step-mark { background: var(--bad-bg); border-color: #f3c6c3; color: var(--bad); }
.build-step-name { font-weight: 650; color: var(--ink-2); }
.build-step.is-pending .build-step-name { color: var(--ink-3); font-weight: 500; }
.build-step.is-running .build-step-name { color: var(--live-ink); }
.build-step.is-failed .build-step-name { color: var(--bad); }
.build-step-at { font-size: 12px; color: var(--ink-3); }
.build-systems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.build-os { display: grid; gap: 10px; align-content: start; padding: 12px 14px 13px; border: 1px solid var(--rule); border-radius: 10px; background: var(--cal); }
.build-os.is-running { border-color: var(--live-edge); background: #fffaf8; }
.build-os.is-running .build-bar { background: var(--live-bg); }
.build-os-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.build-os-head .dl-os { width: 20px; height: 20px; color: var(--anil); }
.build-os-state { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.build-os.is-running .build-os-state { color: var(--live-ink); }
.build-os.is-done .build-os-state { color: var(--ready-ink); }
.build-os.is-failed .build-os-state { color: var(--bad); }
.build-os-size { font-size: 13px; color: var(--ink-2); }
.build-bar { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.build-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--persiana); }
.build-os.is-done .build-bar::after { width: 100%; }
.build-os.is-failed .build-bar::after { width: 100%; background: var(--bad); }
.build-os.is-running .build-bar::after { width: 36%; background: var(--geranio); animation: build-run 1.5s var(--ease-in-out) infinite; }
@keyframes build-run { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
.build-os-error { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--bad); overflow-wrap: anywhere; }
.build-error { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #f3c6c3; border-radius: 10px; background: var(--bad-bg); color: var(--bad); }
.build-error > .icon { width: 20px; height: 20px; margin-top: 1px; }
.build-error-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.build-error-text b { font-weight: 750; }
.build-error-text p { margin: 0; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.build-error > .btn { flex: none; align-self: center; }
.build-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 13px; color: var(--ink-3); }
.build-meta > .icon { width: 15px; height: 15px; margin-right: -10px; }
.build-engines { padding-top: 14px; border-top: 1px solid var(--rule); }
.engine { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.engine .dl-os { width: 16px; height: 16px; color: var(--anil); }
.engine > .icon { width: 15px; height: 15px; color: var(--persiana); }
.engine.is-bad, .engine.is-bad > .icon, .engine.is-bad .dl-os { color: var(--bad); }
.engine-arch { color: var(--ink-3); }
.release-current, .release-os { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.release-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--cal-2); color: var(--ink); font-size: 13px; font-weight: 650; white-space: nowrap; }
.release-chip .dl-os { width: 16px; height: 16px; color: var(--anil); }
.release-current-label { align-self: center; margin-right: 2px; font-size: 13px; color: var(--ink-3); }
.release-chip.is-none { color: var(--ink-3); font-weight: 500; }
.release-chip.is-bad, .release-chip.is-bad .dl-os { background: var(--bad-bg); color: var(--bad); }
.release-list { list-style: none; margin: 0; padding: 0; display: grid; }
.release-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; padding: 14px 0; border-top: 1px solid var(--rule); }
.release-row:first-child { border-top: 0; padding-top: 2px; }
.release-main { display: grid; gap: 4px; min-width: 0; }
.release-title { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 0; font-size: 13.5px; }
.release-title b { font-size: 18px; font-weight: 800; font-stretch: 110%; }
.release-row.is-current .release-title b { font-size: 22px; font-weight: 850; font-stretch: 116%; }
.release-changelog { margin: 0; font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.release-os-error { margin: 0; font-size: 13px; color: var(--bad); overflow-wrap: anywhere; }
.release-os { justify-content: flex-end; }
.release-more { grid-column: 1 / -1; font-size: 13.5px; }
.release-more > summary { display: inline-flex; align-items: center; gap: 4px; width: max-content; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink-3); }
.release-more > summary::-webkit-details-marker { display: none; }
.release-more > summary:hover { color: var(--puerta); }
.release-more > summary .icon { width: 15px; height: 15px; }
.release-more[open] .fold-icon { transform: rotate(90deg); }
.release-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 8px 0 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--cal); }
.release-facts dt { color: var(--ink-3); }
.release-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .build-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .build-step { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0; }
  .build-step::before { content: none; }
  .build-error { flex-wrap: wrap; }
  .build-error-text { flex-basis: calc(100% - 32px); }
  .build-error > .btn { margin-left: 32px; }
  .release-row { grid-template-columns: minmax(0, 1fr); }
  .release-os { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .build-os.is-running .build-bar::after { animation: none; width: 100%; opacity: 0.45; }
  .build-step.is-running .icon-live svg { animation: none; }
}
.build-detail { display: grid; gap: 14px; margin-top: 12px; }