/* ===== Simulador de Director Técnico — estilos ===== */
/* ===== LA MARCA ES CELESTE, Y POR ESO HAY CUATRO COLORES SEPARADOS =====
   La marca pasó de verde eléctrico a celeste. Eso obliga a separar cosas que
   antes se podían confundir en un solo color:

     --accent  la MARCA: títulos, kickers, el paso activo, bordes al hover,
               "esto está elegido". No significa "bueno", significa
               "esto es La Pizarra".
     --green   POSITIVO: ganaste, ascenso, la columna "si sale bien", el gol.
               Sigue siendo verde a propósito.
     --red     NEGATIVO: perdiste, descenso, "si sale mal".
     --blue    ZONA CONTINENTAL en las tablas. Es un azul PROFUNDO, no celeste:
               con la marca en celeste, un celeste acá no se distinguía del
               resaltado de tu propia fila.

   Antes `--accent` y `--green` valían lo MISMO (#22d365), así que la distinción
   existía en los tokens pero no en la pantalla, y había lugares usando
   `--accent` para decir "bueno". Con la marca fuera del verde eso se rompía: un
   renglón "bueno" quedaba del color de la marca y no del de "bueno". Esos usos
   se pasaron a `--green` (el borde del feed y el estado del 4 en línea). */
:root{
  /* tema oscuro (por defecto) — no es negro puro: el fondo tiene temperatura
     FRÍA, así el celeste de la marca apoya sobre algo de su misma familia en
     vez de flotar sobre gris */
  --bg:#0a0f14; --bg2:#101720; --panel:#131b24; --panel2:#1a2430;
  --line:#26333f; --line2:#35475a;
  --txt:#e9f0f6; --mut:#9aacbd; --dim:#71849a;
  --accent:#5cc2f0; --accent2:#2b8dc4; --accent-ink:#04212e; --gold:#e8b552; --red:#ff6a5e; --blue:#3b6fd4; --green:#2fbf6a;
  /* la cancha sigue siendo verde: es una cancha */
  --pitch:#166534; --pitch2:#11512a;
  /* superficies que antes estaban hardcodeadas: tokenizadas para que el toggle
     de tema las alcance */
  --body-glow:#16283a;
  --hero-g1:#1a2c3e; --hero-g2:#131d28; --hero-g3:#0d141b;
  /* las líneas de la cancha van BLANCAS y no del color de la marca: eran un
     verde derivado del accent, y siguiendo al accent habrían terminado
     celestes, que es lo que no es una raya de cal */
  --pitch-line:rgba(255,255,255,.22); --pitch-line2:rgba(255,255,255,.14); --hero-lines-op:.85;
  --crest-bg:rgba(255,255,255,.10); --meter-bg:#0d141b; --posb-bg:#22303e;
  --r:14px; --rs:9px;
  --shadow:0 10px 34px rgba(0,0,0,.55);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Archivo','Inter',-apple-system,'Segoe UI',sans-serif;
}
/* tema claro — mismos neutros claros de siempre, pero la MARCA acompaña al
   oscuro. Si el accent quedaba verde acá, el juego tenía dos colores de marca
   distintos según el tema, que es peor que cualquiera de los dos. El verde y el
   rojo semánticos (bueno/malo) siguen siendo verde y rojo en los dos temas.

   El celeste acá va MÁS OSCURO que en el tema oscuro: el celeste claro es
   preciosos sobre negro y es ilegible sobre blanco, y este accent pinta los
   títulos. */
:root[data-theme="light"]{
  --bg:#eef3f7; --bg2:#ffffff; --panel:#ffffff; --panel2:#f2f7fa;
  --line:#dce5ed; --line2:#c2d1de;
  --txt:#0d1720; --mut:#54687a; --dim:#8598a9;
  --accent:#1a86c0; --accent2:#12648f; --accent-ink:#ffffff; --gold:#a8791a; --red:#d94436; --blue:#2b5cb8; --green:#1f9e4a;
  --pitch:#1f7a46; --pitch2:#1a6b3d;
  --body-glow:#ffffff;
  --hero-g1:#ffffff; --hero-g2:#eef4f9; --hero-g3:#e2ebf3;
  --pitch-line:rgba(0,0,0,.14); --pitch-line2:rgba(0,0,0,.09); --hero-lines-op:.6;
  --crest-bg:#e8eff5; --meter-bg:#e8eff5; --posb-bg:#e8eff5;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* ===== CONTORNOS QUE PARECÍAN PISTAS =====
   En celular aparecían contornos de color en algunas opciones, y se leían como
   si el juego estuviera marcando la respuesta correcta. Eran dos cosas, ninguna
   intencional (no hay ninguna regla que dependa de cuál es la opción correcta):

   1. `:hover`. En iOS el hover NO existe pero se APLICA al tocar y queda
      PEGADO hasta que tocás otra cosa. Once de las quince reglas :hover pintan
      el borde con el color de la marca, así que la opción que tocaste se
      quedaba con el contorno celeste. Por eso ahora todas van dentro de
      `@media (hover:hover)`: sólo con puntero real.
   2. El anillo de foco. Después de tocar un botón el `:focus` puede quedar
      puesto y el navegador dibuja su contorno. Acá se limita a `:focus-visible`,
      que es el foco de TECLADO — ahí sí hace falta y se deja bien visible. */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:
    radial-gradient(1200px 600px at 50% -10%, var(--body-glow) 0%, var(--bg) 70%);
  color:var(--txt); min-height:100vh; line-height:1.45; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:1080px;margin:0 auto;padding:16px 18px 48px;min-height:100vh;display:flex;flex-direction:column}
/* vertically center each screen; auto margins keep long screens scrollable from the top */
.screen{width:100%;margin:auto 0}
.screen > .fade-in, .screen > .hero{width:100%}
/* keep narrative screens readable but let list/grid screens use the width */
.narrow{max-width:640px;margin-left:auto;margin-right:auto}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

h1,h2,h3{margin:0 0 .4em;font-weight:800;letter-spacing:-.02em}
/* títulos con carácter: condensados, en itálica y en mayúscula, tipo afiche */
h1,h2{font-family:var(--display);line-height:.98;color:var(--accent);
  font-weight:900;font-style:italic;font-stretch:78%;text-transform:uppercase;letter-spacing:0}
h1{font-size:2.5rem}
h2{font-size:1.75rem}
h3{font-size:1.05rem;font-weight:800;color:var(--txt)}
p{margin:.3em 0}
small{color:var(--mut)}
a{color:var(--accent)}

/* ---- App bar / header ---- */
.topbar{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding:10px 14px;background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  position:sticky;top:8px;z-index:20;backdrop-filter:blur(6px);
}
/* Los dos grupos de la barra. `tb-ident` se estira y puede encoger hasta cero
   (por eso el min-width:0, sin el cual un nombre largo empuja el ancho de la
   barra y saca scroll horizontal); `tb-ctl` no se encoge nunca, porque son
   botones que hay que poder tocar. */
.topbar .tb-ident{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.topbar .tb-txt{min-width:0}
.topbar .tb-ctl{display:flex;align-items:center;gap:10px;flex:none}
.topbar .tb-fin{text-align:right}
.topbar .crest{width:34px;height:34px;flex:none}
/* El nombre del club se RECORTA con puntos suspensivos en vez de envolver. Sin
   esto, un nombre largo ("Estudiantes (Caseros)", "Ferrocarril Midland") parte
   en varias líneas, la barra crece en alto y —como los controles van centrados
   en vertical— el badge de REP queda EN MEDIO de las líneas del nombre. Eso es
   lo que se veía como "se tapa entre sí". */
.topbar .club-name{font-weight:800;font-size:1rem;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .club-sub{font-size:.72rem;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .money{font-weight:800;color:var(--gold);font-size:.95rem;white-space:nowrap}
.topbar .season-pill{font-size:.72rem;color:var(--mut);text-align:right;white-space:nowrap}

/* ---- Cards / panels ---- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow);
}
.card.tight{padding:12px}
.card-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.card-hd h2,.card-hd h3{margin:0}
.muted{color:var(--mut)}
.dim{color:var(--dim)}
.center{text-align:center}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stack{display:flex;flex-direction:column;gap:10px}

/* ---- Buttons ---- */
.btn{
  appearance:none;border:1px solid var(--line2);background:var(--panel2);
  color:var(--txt);font-family:inherit;font-weight:700;font-size:.92rem;
  padding:11px 16px;border-radius:var(--rs);cursor:pointer;transition:.12s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
@media (hover:hover){ .btn:hover{border-color:var(--accent);transform:translateY(-1px)} }
.btn:active{transform:translateY(0)}
.btn.block{width:100%}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));border-color:transparent;color:var(--accent-ink)}
@media (hover:hover){ .btn.primary:hover{filter:brightness(1.06)} }
.btn.gold{background:linear-gradient(180deg,#f5cf6b,var(--gold));border-color:transparent;color:#3a2a00}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 11px;font-size:.8rem;border-radius:8px}
.btn.danger{border-color:var(--red);color:#ffd8d5}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btnrow.col{flex-direction:column}

/* ---- Choice chips (character creator / options) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  padding:8px 13px;border-radius:999px;cursor:pointer;font-weight:600;font-size:.86rem;transition:.12s;
}
@media (hover:hover){ .chip:hover{border-color:var(--accent)} }
.chip.sel{background:linear-gradient(180deg,var(--accent),var(--accent2));color:var(--accent-ink);border-color:transparent}

/* Inputs */
label.fld{display:block;font-size:.78rem;color:var(--mut);margin:0 0 4px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
input[type=text],select{
  width:100%;padding:11px 12px;border-radius:var(--rs);border:1px solid var(--line2);
  background:var(--bg2);color:var(--txt);font-family:inherit;font-size:.95rem;
}
input[type=text]:focus,select:focus{outline:none;border-color:var(--accent)}
.field{margin-bottom:12px}

/* ---- Crest ---- */
.crest{width:40px;height:40px;border-radius:8px;object-fit:contain;flex:none;background:var(--crest-bg);display:inline-block}
.crest-ph{
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;
  border-radius:8px;flex:none;border:1px solid rgba(0,0,0,.12);
}

/* ---- Club select ---- */
/* Elegir un club es un momento de elección como cualquier otro, así que el
   RECTÁNGULO es el mismo que el de `.opt-btn`: mismo borde, mismo padding,
   mismo radio, mismo fondo y el mismo desplazamiento al pasar por encima.
   Tenía `--line` en vez de `--line2`, 12px de padding en vez de 13/15 y se
   movía en Y en vez de en X. Lo que sí cambia es el contenido de adentro
   (escudo + datos en fila), que es otra cosa. */
.club-opt{
  display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line2);
  border-radius:var(--rs);background:var(--panel2);cursor:pointer;transition:.12s;margin-bottom:10px;
}
@media (hover:hover){ .club-opt:hover{border-color:var(--accent);transform:translateX(3px)} }
.club-opt .crest,.club-opt .crest-ph{width:46px;height:46px;font-size:1.1rem}
.club-opt .info{flex:1;min-width:0}
.club-opt .cn{font-weight:800}
.club-opt .cd{font-size:.78rem;color:var(--mut)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
/* datos de una oferta: lo que un DT mira antes de firmar */
.offer-facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.offer-facts .of{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.offer-facts .of i{font-style:normal;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:800}
.offer-facts .of b{font-size:.82rem;font-weight:800;white-space:nowrap}
.offer-facts .of em{font-style:normal;font-size:.58rem;color:var(--dim)}
.offer-facts .of .posb{font-size:.56rem;padding:1px 4px;width:auto;display:inline-block;vertical-align:middle}
.tag{font-size:.68rem;font-weight:800;padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.tag.elite{background:#4a2c6e;color:#e2c9ff}
.tag.grande{background:#1f4a6e;color:#bfe3ff}
.tag.medio{background:#3a4152;color:#cdd7e6}
.tag.chico{background:#3a2f24;color:#f0d6b8}
.tag.lvl{background:#123a29;color:#a8f0ce}
.tag.star{background:#4a3a12;color:var(--gold)}

/* ---- Rating bar ---- */
.meter{height:7px;background:var(--meter-bg);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.meter > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}

/* ---- Tables ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th,.tbl td{padding:7px 8px;text-align:center}
.tbl th{color:var(--mut);font-weight:700;font-size:.72rem;text-transform:uppercase;border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid var(--line)}
.tbl td.name,.tbl th.name{text-align:left}
.tbl tr.me td{background:rgba(92,194,240,.14);font-weight:800}
.tbl tr.promo td{box-shadow:inset 3px 0 0 var(--accent)}
.tbl tr.releg td{box-shadow:inset 3px 0 0 var(--red)}
.tbl tr.cont td{box-shadow:inset 3px 0 0 var(--blue)}
.tbl tr.cont2 td{box-shadow:inset 3px 0 0 #16a394}
.tbl tr.cont3 td{box-shadow:inset 3px 0 0 #57c98a}
.tbl tr.reduc td{box-shadow:inset 3px 0 0 var(--gold)}
/* zone legend */
.zlegend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:10px}
.zk{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--mut)}
.zc{width:10px;height:10px;border-radius:3px;flex:none}
.zc.cont{background:var(--blue)}.zc.cont2{background:#16a394}.zc.cont3{background:#57c98a}.zc.promo{background:var(--green)}
.zc.reduc{background:var(--gold)}.zc.releg{background:var(--red)}
.tbl .mini-crest{width:20px;height:20px;vertical-align:middle;margin-right:7px}
.pos{color:var(--dim);font-weight:700}
/* el juego largo del torneo de selecciones */
.tp-track{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}
.tp-chip{font-size:.7rem;font-weight:800;padding:3px 7px;border-radius:6px;
  background:var(--panel2);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.tp-chip.g{border-color:var(--green);color:var(--green)}
.tp-chip.e{border-color:var(--gold);color:var(--gold)}
.tp-chip.p{border-color:var(--red);color:var(--red)}
.tp-pista{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:11px;
  border-radius:var(--rs);background:var(--panel2);border-left:3px solid var(--gold);font-size:.9rem}
.tp-pista .tp-ojo{font-size:1.1rem;flex:none}
.tp-seq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.tp-nodo{padding:14px 6px;border-radius:var(--rs);border:1px solid var(--line2);background:var(--panel2);
  color:var(--txt);font-weight:800;font-size:.72rem;letter-spacing:.03em;cursor:pointer;transition:all .12s}
.tp-nodo:disabled{cursor:default}
.tp-nodo.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:scale(1.04)}
/* tutoriales: explicación antes de un minijuego y guía general */
.tutnote{margin-top:10px;padding:9px 11px;border-radius:var(--rs);font-size:.82rem;
  background:var(--panel2);border-left:3px solid var(--gold);color:var(--mut)}
.tutnote b{color:var(--txt)}
.guia .guiarow{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.guia .guiarow:last-of-type{border-bottom:none}
.guia .gr-ic{font-size:1.35rem;flex:none;line-height:1.2;width:28px;text-align:center}
.guia .gr-t{font-weight:800;font-size:.92rem;margin-bottom:2px}
.guia .gr-d{font-size:.84rem;line-height:1.5;color:var(--mut)}
.guia .gr-d b{color:var(--txt)}
/* qué medias movió el Manager Deportivo nuevo */
.mgrups{display:flex;flex-direction:column;gap:5px;margin:10px 0 4px}
.mgrup{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;
  background:var(--panel2);border:1px solid var(--line);font-size:.84rem}
/* .posb sólo trae el color de fuera de .prow: acá hace falta la base */
.mgrup .posb{font-size:.62rem;font-weight:800;padding:2px 5px;border-radius:5px;
  background:var(--posb-bg);width:32px;text-align:center;flex:none}
.mgrup .mu-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mgrup .mu-r{flex:none;color:var(--mut);font-variant-numeric:tabular-nums}
.mgrup .mu-r b{color:var(--green)}
/* caras de reacción: reemplazan al emoji cuando el juego te dice cómo salió */
.cara-wrap{display:flex;justify-content:center;margin-bottom:14px}
.cara-grande{width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:3px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:caraPop .32s cubic-bezier(.2,1.5,.4,1) both}
.cara-chica{width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line2);display:block}
@keyframes caraPop{ from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }
/* resumen "cómo te fue" después de un minijuego */
.minires{display:flex;align-items:center;gap:12px;text-align:left;margin:10px 0 4px;
  padding:12px;border-radius:var(--rs);background:var(--panel2);border:1px solid var(--line)}
.minires .mr-ic{font-size:1.7rem;flex:none;line-height:1}
.minires .mr-tx{font-size:.92rem;font-weight:600}
.mr-ov{font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums}
.mr-ov small{display:block;font-weight:600;font-size:.72rem;color:var(--mut);text-transform:none}
/* cierre de temporada: un rectángulo por hecho (campeón, ascenso, descenso),
   con la misma forma que los botones de opción del resto del juego */
/* Los rectángulos van UNO AL LADO DEL OTRO: apilados dejaban media tarjeta
   vacía a la derecha. En celular vuelven a una sola columna. */
.cierre-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:9px;align-items:start}
@media(max-width:560px){ .cierre-list{grid-template-columns:minmax(0,1fr)} }
.cierre-box{padding:11px 13px;border-radius:var(--rs);background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--line2)}
.cierre-box.titulo{border-left-color:var(--gold);background:linear-gradient(135deg,rgba(245,196,81,.10),var(--panel2))}
.cierre-box.up{border-left-color:var(--green)}
.cierre-box.down{border-left-color:var(--red)}
.cx-lab{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:800;margin-bottom:9px}
.cierre-box.titulo .cx-lab{color:var(--gold)}
/* cuadrados de dos en dos: escudo arriba, nombre abajo. El max-width es lo que
   los mantiene CUADRADOS: sin él, dos columnas de una tarjeta de 700px daban
   fichas de 340px de ancho y el aspect-ratio las volvía enormes. */
/* TODOS en la misma fila. Los cuadrados se reparten el ancho y se achican
   solos: con 1 equipo quedan de 110px y con 3 (el máximo que puede subir o
   bajar en una temporada) de ~105px. El max-width del contenedor es lo que
   evita que un solo cuadrado se estire a lo ancho de la tarjeta. */
.cx-teams{display:flex;gap:8px;max-width:360px}
.cx-team{position:relative;flex:1 1 0;min-width:0;max-width:104px;aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:7px 5px;text-align:center;
  border-radius:var(--rs);background:var(--panel);border:1px solid var(--line)}
.cx-crest{line-height:0}
.cx-team .crest,.cx-team .crest-ph{width:38px;height:38px;flex:none;font-size:15px}
.cx-name{font-weight:800;font-size:.68rem;line-height:1.15;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cierre-box.titulo .cx-team{border-color:var(--gold)}
.cx-team.me{border-color:var(--accent);background:rgba(92,194,240,.09)}
.cx-team.me .cx-name{color:var(--accent)}
.cx-you{position:absolute;top:6px;right:6px;font-size:.56rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.06em;background:var(--accent);color:var(--accent-ink);padding:2px 5px;border-radius:5px}
/* nota de la temporada (1.0 a 10.0) */
.notabig{font-size:3.6rem;font-weight:900;line-height:1;font-family:var(--display);font-variant-numeric:tabular-nums}
.notabig small{font-size:1.25rem;font-weight:800;opacity:.5;margin-left:2px}
.notatxt{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.notachip{font-variant-numeric:tabular-nums;font-weight:800}
/* camino del jugador por las llaves de un torneo de selecciones */
.natpath{display:flex;flex-direction:column;gap:6px}
.np-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;
  background:var(--panel2);border-left:3px solid var(--line2);font-size:.84rem}
.np-row.win{border-left-color:var(--green)}
.np-row.loss{border-left-color:var(--red)}
.np-row.pend{border-left-color:var(--gold);background:rgba(201,162,39,.10)}
.np-r{color:var(--mut);font-size:.72rem;text-transform:uppercase;font-weight:700;flex:none;min-width:88px}
.np-m{flex:1;min-width:0;font-weight:700}
.np-s{flex:none;font-variant-numeric:tabular-nums;color:var(--dim)}

/* ---- Pitch / match view ---- */
.pitch-wrap{position:relative;background:linear-gradient(180deg,var(--pitch),var(--pitch2));
  border-radius:var(--r);overflow:hidden;border:1px solid #14532b;box-shadow:inset 0 0 60px rgba(0,0,0,.25)}
.pitch-svg{display:block;width:100%;height:auto}
.scoreboard{
  display:flex;align-items:center;justify-content:center;gap:14px;padding:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;
}
.scoreboard .side{display:flex;align-items:center;gap:8px;font-weight:800;flex:1}
.scoreboard .side.away{justify-content:flex-end;text-align:right}
.scoreboard .crest,.scoreboard .crest-ph{width:30px;height:30px;font-size:.85rem}
.scoreboard .score{font-size:1.7rem;font-weight:900;letter-spacing:1px;font-variant-numeric:tabular-nums}
.scoreboard .clock{background:#0c1017;color:var(--accent);font-weight:800;font-size:.8rem;padding:3px 9px;border-radius:6px;min-width:44px;text-align:center}
.commentary{min-height:44px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--rs);
  padding:10px 12px;margin-top:10px;font-size:.9rem;transition:.2s}
.commentary.goal{border-color:var(--gold);background:rgba(245,196,81,.10);font-weight:800}
.commentary.danger{border-color:var(--red)}

/* ---- Event modal ---- */
.overlay{position:fixed;inset:0;background:rgba(4,7,12,.78);display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:100;backdrop-filter:blur(4px);animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line2);
  border-radius:var(--r);max-width:520px;width:100%;padding:20px;box-shadow:var(--shadow);animation:pop .2s ease}
@keyframes pop{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}
.modal .kicker{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:6px}
.modal h2{margin-bottom:8px}
.modal .opts{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.opt-btn{text-align:left;padding:13px 15px;border-radius:var(--rs);border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);cursor:pointer;transition:.12s;font-family:inherit;font-size:.9rem}
@media (hover:hover){ .opt-btn:hover{border-color:var(--accent);transform:translateX(3px)} }
/* Todos los rectángulos de elección tienen que verse IGUAL, así que el bloque
   base ya trae el mismo tratamiento que `.o-head`: el <b> en bloque y el
   <small> también, con su interlineado. Antes el <small> era inline acá y
   bloque dentro de `.o-head`, así que un botón sin ese wrapper quedaba con
   otro espaciado — pasaba en la crisis, en la oferta sorpresa y en el planteo
   del torneo. Con esto, olvidarse del wrapper ya no cambia cómo se ve. */
.opt-btn b{display:block;margin-bottom:2px}
.opt-btn small{color:var(--mut);display:block;line-height:1.3}

/* ---- Progress / stepper ---- */
.stepper{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.stepper .st{flex:1;min-width:56px;height:6px;background:var(--line);border-radius:4px;position:relative}
.stepper .st.on{background:var(--accent)}
.stepper .st.done{background:var(--accent2)}

/* ---- Timeline / feed ---- */
.feed{display:flex;flex-direction:column;gap:8px}
.feed .item{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--rs);font-size:.88rem}
.feed .ic{font-size:1.05rem;line-height:1.2;flex:none}
.feed .item.good{border-left:3px solid var(--green)}
.feed .item.bad{border-left:3px solid var(--red)}
.feed .item.gold{border-left:3px solid var(--gold)}

/* Stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.tile{background:var(--panel2);border:1px solid var(--line);border-radius:var(--rs);padding:11px;text-align:center}
.tile .v{font-size:1.3rem;font-weight:900;line-height:1}
.tile .l{font-size:.68rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}

/* Player rows */
.plist{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media(min-width:720px){ .plist{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} }
.prow{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;font-size:.86rem}
.prow .posb{font-size:.66rem;font-weight:800;padding:2px 6px;border-radius:5px;background:var(--posb-bg);color:var(--mut);width:34px;text-align:center;flex:none}
.prow .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pr{font-weight:800;width:30px;text-align:right}
.prow.inj{opacity:.55}
.prow .injb{color:var(--red);font-size:.72rem;font-weight:800}
.posb.GK{color:#f5c451}.posb.DEF{color:#7fb2ff}.posb.MED{color:#8ff0b8}.posb.DEL{color:#ff9a8f}

/* Title / hero */
.hero{position:relative;text-align:center;padding:44px 20px 34px;margin-bottom:14px;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%, var(--hero-g1) 0%, var(--hero-g2) 55%, var(--hero-g3) 100%);border:1px solid var(--line);box-shadow:var(--shadow)}
/* subtle pitch lines */
.hero::before{content:"";position:absolute;inset:0;opacity:var(--hero-lines-op);pointer-events:none;
  background:
    radial-gradient(circle at 50% 118%, transparent 128px, var(--pitch-line) 129px, transparent 131px),
    linear-gradient(0deg, transparent calc(100% - 1px), var(--pitch-line) 100%),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--pitch-line2) 50%, transparent calc(50% + 1px));}
/* Collage de DT detrás del título. Va sobre el fondo del hero y debajo del
   contenido (que lleva position:relative), con un degradado que lo apaga hacia
   el centro para que el título siempre se lea. */
.hero-collage{position:absolute;inset:0;display:flex;align-items:stretch;gap:2px;
  pointer-events:none;overflow:hidden;
  /* se apaga hacia el centro, donde va el título, pero deja ver las caras */
  -webkit-mask-image:radial-gradient(105% 78% at 50% 46%, transparent 6%, rgba(0,0,0,.45) 34%, #000 70%);
  mask-image:radial-gradient(105% 78% at 50% 46%, transparent 6%, rgba(0,0,0,.45) 34%, #000 70%)}
.hero-collage .hc-cell{flex:1 1 0;min-width:0;overflow:hidden}
.hero-collage img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
  opacity:.46;filter:grayscale(1) contrast(1.1)}
:root[data-theme="light"] .hero-collage img{opacity:.26;filter:grayscale(1) contrast(1.02) brightness(1.06)}
/* en pantallas chicas entran menos caras, para que no queden en tiras finitas */
@media (max-width:720px){ .hero-collage .hc-cell:nth-child(n+8){display:none} }
@media (max-width:460px){ .hero-collage .hc-cell:nth-child(n+5){display:none} }

.hero .mark{position:relative;width:88px;height:auto;margin:0 auto 14px;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}
/* el texto del hero lleva sombra propia: así el collage puede tener presencia
   sin que se pierda la lectura */
.hero h1{position:relative;font-family:var(--display);font-weight:900;font-style:italic;font-stretch:78%;
  font-size:3rem;line-height:.92;letter-spacing:0;text-transform:uppercase;color:var(--txt);margin:0;
  text-shadow:0 2px 18px var(--hero-g3), 0 1px 3px rgba(0,0,0,.5)}
.hero h1 .accent{color:var(--accent)}
.hero .lead{position:relative;color:var(--mut);max-width:460px;margin:12px auto 0;font-size:.95rem;text-transform:none;
  text-shadow:0 1px 10px var(--hero-g3)}
.hero .kick{position:relative;display:inline-block;font-family:var(--display);font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;font-size:.72rem;color:var(--accent);margin-bottom:4px;
  text-shadow:0 1px 10px var(--hero-g3)}

.divider{height:1px;background:var(--line);margin:14px 0}
.fade-in{animation:fade .25s ease}
.pill{display:inline-block;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);color:var(--mut)}
.pill.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}

.avatar{width:96px;height:96px;border-radius:50%;background:var(--panel2);border:2px solid var(--line2);display:block;margin:0 auto}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--accent);
  color:var(--txt);padding:11px 18px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);z-index:200;animation:fade .2s}

/* ---- Reputation badge in topbar ---- */
.rep-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));color:var(--accent-ink);cursor:pointer;flex:none;line-height:1;transition:.12s}
@media (hover:hover){ .rep-badge:hover{filter:brightness(1.08);transform:translateY(-1px)} }
.rep-badge .rl{font-size:8px;font-weight:700;letter-spacing:.06em;opacity:.85}
.rep-badge .rv{font-size:19px;font-weight:900}
.topbar .iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  font-size:1rem;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;transition:.12s}
@media (hover:hover){ .topbar .iconbtn:hover{border-color:var(--accent)} }

/* ---- Big scoreboard (playable match) ---- */
.bigscore{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:26px 16px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:box-shadow .2s}
.bigscore.goalflash{box-shadow:0 0 0 2px var(--gold),0 0 40px rgba(245,196,81,.5)}
.bigscore .bs-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.bigscore .bs-name{font-weight:800;font-size:.92rem;text-align:center;line-height:1.15}
.bigscore .bs-mid{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.bigscore .bs-clock{background:#0c1017;color:var(--accent);font-weight:800;font-size:.82rem;padding:3px 12px;border-radius:7px}
.bigscore .bs-score{font-size:3rem;font-weight:900;letter-spacing:2px;font-variant-numeric:tabular-nums;line-height:1}
.bigscore .crest,.bigscore .crest-ph{width:58px;height:58px;font-size:1.4rem}

/* ---- Square cards (philosophy / avatar / options) ---- */
.sqgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.sqcard{aspect-ratio:1/1;background:var(--panel2);border:1.5px solid var(--line2);border-radius:var(--r);
  padding:14px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
@media (hover:hover){ .sqcard:hover{border-color:var(--accent);transform:translateY(-2px)} }
.sqcard.sel{border-color:var(--accent);background:linear-gradient(180deg,rgba(92,194,240,.16),var(--panel2))}
.sqcard .ic{font-size:1.9rem;position:absolute;top:12px;left:14px}
.sqcard.sel .check{position:absolute;top:10px;right:12px;color:var(--accent);font-size:1.1rem;font-weight:900}
.sqcard .t{font-weight:800;font-size:1rem;margin-bottom:2px;position:relative}
.sqcard .d{font-size:.76rem;color:var(--mut);line-height:1.3;position:relative}
/* DT photo behind the text (already grayscale assets) */
.sqcard.photo{background-size:cover;background-position:center 18%}
.sqcard.photo .ic,.sqcard.photo .t{text-shadow:0 2px 8px rgba(0,0,0,.95)}
.sqcard.photo .d{color:#e2e8f1;text-shadow:0 1px 5px rgba(0,0,0,.95)}
@media(min-width:560px){ .sqgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---- Philosophy cards: 3×2 horizontal rectangles ---- */
.stylegrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:560px){ .stylegrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media(min-width:840px){ .stylegrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.stylecard{position:relative;height:176px;border-radius:14px;border:1.5px solid var(--line2);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:row;align-items:stretch;transition:.12s;
  background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--txt)}
/* el retrato: panel vertical a la izquierda, a lo alto de la tarjeta.
   132px sobre 176 de alto es 0.75, casi la relación de la foto (0.88), así que
   `cover` escala por altura y entra la cara entera. */
.stylecard .sc-photo{position:relative;flex:none;width:132px;background-size:cover;
  background-position:center center;background-repeat:no-repeat}
/* el borde derecho se funde con la tarjeta para que no quede un corte seco */
.stylecard .sc-photo::after{content:'';position:absolute;inset:0 0 0 auto;width:22px;
  background:linear-gradient(90deg,transparent,var(--panel))}
.stylecard .sc-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
@media (hover:hover){ .stylecard:hover{border-color:var(--accent);transform:translateY(-2px)} }
.stylecard.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(92,194,240,.45)}
/* el ícono va en el flujo del cuerpo, arriba del nombre: antes estaba absoluto
   contra la esquina de la tarjeta, que era el lugar donde ahora va la foto */
.stylecard .ic{font-size:1.5rem;line-height:1;margin-bottom:auto}
.stylecard .check{position:absolute;top:10px;right:13px;color:var(--green);font-size:1.15rem;font-weight:900}
/* El texto usa los tokens del tema: la tarjeta dejó de tener el fondo verde
   hardcodeado, así que un #fff fijo habría quedado blanco sobre blanco en el
   tema claro. */
.stylecard .t{font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:1.1rem;position:relative;margin-bottom:2px;color:var(--txt)}
.stylecard .d{font-size:.77rem;color:var(--mut);line-height:1.25;position:relative}
/* El texto ya NO va encima de la foto (está en el panel de al lado), así que no
   necesita el text-shadow que lo hacía legible sobre la cara. */

/* ---- DT ficha (matches mockup): two columns ---- */
.ficha{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:760px){ .ficha{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} .ficha .col-l{border-right:1px solid var(--line);padding-right:22px} .ficha .col-r{padding-left:22px} }
.ficha .col-l{padding-bottom:14px}
.ficha .rep-square{width:72px;height:72px;border-radius:14px;background:linear-gradient(180deg,var(--accent),var(--accent2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;color:var(--accent-ink)}
.ficha .rep-square .l{font-size:10px;font-weight:700;letter-spacing:.05em;opacity:.9}
.ficha .rep-square .v{font-size:26px;font-weight:800;line-height:1}
.ficha .rep-square .mx{font-size:9px;font-weight:700;opacity:.8;margin-top:1px}
.ficha .statrow{display:flex;gap:20px;margin:14px 0 4px}
.ficha .statrow .lab{color:var(--dim);font-size:10px;letter-spacing:.05em;margin:0 0 2px}
.ficha .statrow .num{font-size:20px;font-weight:700}
.ficha .tri{display:flex;margin:16px 0;border-top:1px solid var(--line);padding-top:14px}
.ficha .tri > div{flex:1;text-align:center}
.ficha .tri > div + div{border-left:1px solid var(--line)}
.ficha .tri .lab{color:var(--dim);font-size:10px;letter-spacing:.05em;margin:0 0 4px}
.ficha .tri .num{font-size:17px;font-weight:700}
.ficha .vitrina{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.ficha .career-hd{display:flex;font-size:11px;color:var(--dim);padding-bottom:8px;border-bottom:1px solid var(--line);letter-spacing:.03em;gap:6px}
.ficha .cl-row2{display:flex;align-items:center;gap:6px;padding:9px 8px;border-bottom:1px solid var(--line);font-size:12px;border-radius:6px}
.ficha .cl-row2.cur{background:var(--panel2)}
.ficha .cl-row2 .age{width:40px;color:var(--txt);font-weight:600}
.ficha .cl-row2 .club{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha .cl-row2 .repp{width:38px;text-align:center;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;border-radius:5px;padding:2px 0}
.ficha .cl-row2 .rescell{width:70px;text-align:right;font-weight:700}
.ficha .cl-row2.win{box-shadow:inset 3px 0 0 var(--green)}
.ficha .cl-row2.bad2{box-shadow:inset 3px 0 0 var(--red)}

/* ---- Avatar picker (base faces) ---- */
.facegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.faceopt{aspect-ratio:1/1;border:1.5px solid var(--line2);border-radius:12px;cursor:pointer;padding:4px;transition:.12s;background:var(--panel2)}
@media (hover:hover){ .faceopt:hover{border-color:var(--accent)} }
.faceopt.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(92,194,240,.3)}
.faceopt svg{width:100%;height:100%;display:block}

/* ---- Captain / fetiche badges on player rows ---- */
.prow .capb{font-size:.62rem;font-weight:900;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#3a2a00;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.prow .fetb{font-size:.85rem;flex:none}
.prow .pv{color:var(--gold);font-weight:700;font-size:.8rem;width:60px;text-align:right;flex:none}
.prow.selectable{cursor:pointer}
@media (hover:hover){ .prow.selectable:hover{border-color:var(--accent)} }
.prow.chosen{border-color:var(--gold);background:rgba(245,196,81,.08)}

/* ---- Objective card ---- */
.obj{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--rs);
  background:linear-gradient(180deg,rgba(92,194,240,.12),var(--panel2));border:1px solid var(--accent2)}
.obj .oi{font-size:1.6rem;flex:none}
.obj .oh{font-weight:800;font-size:1.02rem}
.obj .od{font-size:.84rem;color:var(--mut)}

/* ---- Career line (profile ficha) ---- */
.ficha-hd{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.ficha-hd .avatar{width:76px;height:76px;margin:0}
/* el DT en su propia ficha de reputación */
.ficha-avatar{flex:0 0 auto}
.ficha-avatar .avatar{width:84px;height:84px;margin:0;border-radius:14px}
.dt-tag{font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
.careerline .cl-row{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:.84rem}
.careerline .cl-row.win{box-shadow:inset 3px 0 0 var(--green)}
.careerline .cl-row.bad{box-shadow:inset 3px 0 0 var(--red)}
.careerline .cl-yr{width:44px;color:var(--dim);font-weight:700}
.careerline .cl-club{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.careerline .cl-pos{width:60px;text-align:right;font-weight:700}
.crown{color:var(--gold)}

/* ---- escudo del club mencionado (arriba a la derecha de la situación) ---- */
.evcard{position:relative}
.evcrest{position:absolute;top:14px;right:16px;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:110px;z-index:1}
.evcrest .crest,.evcrest .crest-ph{width:54px;height:54px;font-size:1.25rem}
.evcrest-name{font-size:.62rem;font-weight:800;color:var(--mut);text-align:center;line-height:1.15;text-transform:uppercase;letter-spacing:.02em}
.evcard h2,.evcard .kicker,.evcard > p{padding-right:120px}
@media(max-width:560px){
  .evcrest{top:10px;right:10px;max-width:64px}
  .evcrest .crest,.evcrest .crest-ph{width:38px;height:38px;font-size:.9rem}
  .evcrest-name{display:none}
  .evcard h2,.evcard .kicker,.evcard > p{padding-right:52px}
}

/* ---- decision options: same-size cards in a grid ---- */
#dopts,#copts,#fopts,#sopts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;grid-auto-rows:1fr}
@media(min-width:680px){ #dopts,#copts,#fopts,#sopts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
#dopts .opt-btn,#copts .opt-btn,#fopts .opt-btn,#sopts .opt-btn{
  width:100%;height:100%;min-height:104px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
/* push the OV/odds row to the bottom so all cards align */
#dopts .opt-btn .meta,#copts .opt-btn .meta,#fopts .opt-btn .meta,#sopts .opt-btn .meta{margin-top:auto}

/* ---- opciones con secciones divididas y rotuladas ---- */
.opt-btn .o-head{display:block;margin-bottom:8px}
.opt-btn .o-head b{display:block;margin-bottom:2px}
.opt-btn .o-head small{color:var(--mut);display:block;line-height:1.3}
.opt-btn .o-sec{display:flex;align-items:stretch;gap:0;margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
.opt-btn .o-block{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:0 9px}
.opt-btn .o-block:first-child{padding-left:0}
.opt-btn .o-block:last-child{padding-right:0}
.opt-btn .o-block + .o-block{border-left:1px solid var(--line)}
.opt-btn .o-lab{font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

/* ---- ficha del jugador involucrado ---- */
.pchip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px;padding:10px 12px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--rs)}
.pchip-name{font-weight:800;font-size:.9rem;margin-right:4px}
.pchip-cell{display:flex;flex-direction:column;gap:1px;padding-left:11px;border-left:1px solid var(--line)}
.pchip-cell i{font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.pchip-cell b{font-size:.88rem}

/* ---- decision option meta: valoración (OV) + odds bar ---- */
.opt-btn .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ovtag{font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:6px;letter-spacing:.02em}
.ovtag.pos{background:rgba(31,158,74,.16);color:var(--green)}
.ovtag.neg{background:rgba(207,59,59,.16);color:var(--red)}
.odds{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:800;color:var(--mut)}
.opt-btn .conseq{display:block;font-size:.7rem;color:var(--mut);font-weight:700;line-height:1.25}
/* las dos caras de la opción: lo que gana y lo que cuesta si falla */
.opt-btn .conseq.good{color:var(--green)}
.opt-btn .conseq.bad{color:var(--red)}
.odds .bar{width:66px;height:7px;background:var(--line);border-radius:5px;overflow:hidden}
.odds .bar i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--red),var(--gold),var(--green));animation:oddsfill .85s cubic-bezier(.3,.8,.4,1) forwards}
@keyframes oddsfill{from{width:0}to{width:var(--p)}}

/* ---- desglose de la reputación ---- */
.repbd{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.rb-row{display:flex;align-items:center;gap:8px;font-size:.68rem}
.rb-lab{width:74px;color:var(--mut);font-weight:700}
.rb-bar{flex:1;height:6px;background:var(--line);border-radius:4px;overflow:hidden}
.rb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:4px}
.rb-val{width:42px;text-align:right;color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums}

/* ---- panel de relaciones (con memoria) ---- */
.rels{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rel-row{display:flex;align-items:center;gap:7px;font-size:.68rem}
.rel-ic{width:16px;text-align:center;flex:none}
.rel-lab{width:82px;color:var(--mut);font-weight:700}
.rel-bar{flex:1;height:6px;background:var(--line);border-radius:4px;overflow:hidden;position:relative}
.rel-bar i{display:block;height:100%;border-radius:4px}
.rel-val{width:34px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}

/* ---- historial por club (ficha DT) ---- */
.clubrecs{display:flex;flex-direction:column}
.cr-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-bottom:1px solid var(--line);font-size:12px}
.cr-row.cr-hd{font-size:10px;color:var(--dim);letter-spacing:.04em;border-bottom:1px solid var(--line2)}
.cr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cr-pj{width:46px;text-align:right;color:var(--mut)}
.cr-wdl{width:64px;text-align:right;font-variant-numeric:tabular-nums}
.cr-pct{width:38px;text-align:right;font-weight:700}
.cr-tit{width:34px;text-align:right;color:var(--gold);font-weight:700}

/* ---- media voices panel (Azzaro / Duca / ESPN / TyC) ---- */
.media-panel{display:flex;flex-direction:column;gap:8px}
.media-voice{display:flex;gap:10px;align-items:flex-start}
.media-voice .mv-face{font-size:1.3rem;flex:none;line-height:1.2}
.media-voice .mv-who{font-weight:800;font-size:.82rem}
.media-voice .mv-rel{font-weight:700;font-size:.7rem}
.media-voice .mv-text{color:var(--mut);font-size:.85rem;font-style:italic}

.betrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
/* ---- el clásico en vivo ---- */
.cl-men{text-align:center;font-weight:800;font-size:.78rem;color:var(--red);margin-bottom:6px}
.cl-feed{display:flex;flex-direction:column;gap:4px;min-height:96px;margin-top:6px}
.cl-line{font-size:.84rem;color:var(--mut);padding:5px 9px;background:var(--panel2);border-radius:7px;
  border-left:3px solid var(--line2);animation:fade .25s}
.cl-line.gol{border-left-color:var(--green);color:var(--txt);font-weight:800;background:rgba(31,158,74,.12)}
.cl-line.malo{border-left-color:var(--red);color:var(--txt);font-weight:700;background:rgba(207,59,59,.10)}
.cl-ev{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* cancha esquemática: la pelota se corre hacia el arco del que ataca */
.pitch-live{position:relative;height:104px;margin:10px 0 8px;border-radius:var(--rs);overflow:hidden;
  border:1.5px solid var(--line2);background:linear-gradient(180deg,var(--pitch),var(--pitch2))}
.pitch-live .pl-half{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.30)}
.pitch-live .pl-circle{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border:2px solid rgba(255,255,255,.30);border-radius:50%}
.pitch-live .pl-area{position:absolute;top:50%;width:26px;height:56px;margin-top:-28px;border:2px solid rgba(255,255,255,.30)}
.pitch-live .pl-area.l{left:0;border-left:none}
.pitch-live .pl-area.r{right:0;border-right:none}
.pitch-live .pl-crest{position:absolute;top:6px;opacity:.9}
.pitch-live .pl-crest.l{left:7px}
.pitch-live .pl-crest.r{right:7px}
.pitch-live .pl-ball{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  font-size:15px;line-height:20px;text-align:center;transition:left .5s cubic-bezier(.34,1.3,.64,1);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.pitch-live.peligro-mio .pl-ball{animation:ball-pop .4s ease}
@keyframes ball-pop{0%{transform:scale(1)}50%{transform:scale(1.55)}100%{transform:scale(1)}}

/* barra de dominio */
.dom{margin:8px 0 4px}
.dom-bar{display:flex;height:9px;border-radius:6px;overflow:hidden;background:var(--red)}
.dom-bar i{display:block;height:100%;background:var(--accent);transition:width .5s ease}
.dom-lab{display:flex;justify-content:space-between;align-items:center;margin-top:4px;
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.dom-lab b{color:var(--txt);font-size:.72rem;font-variant-numeric:tabular-nums}

/* cantito de la hinchada */
.chant{text-align:center;font-family:var(--display);font-style:italic;font-weight:900;font-stretch:82%;
  font-size:.98rem;color:var(--gold);margin:6px 0 2px;min-height:1.3em;animation:fade .3s;text-transform:uppercase}

/* ---- animación de campeón ---- */
/* El fondo son TRES capas, no un degradado plano:
   1. el cuerpo: el color del torneo cerrando en un negro frío;
   2. un halo alto y ancho, que es la "luz de estadio" detrás de la copa;
   3. una viñeta que oscurece las esquinas y empuja la vista al centro.
   El halo va con el color de identidad a baja opacidad en vez de ponerlo puro
   arriba del degradado: así el torneo se reconoce por el color sin apagar la
   copa, que va justo ahí y ya tiene su propio resplandor. */
.champ{position:relative;border-radius:var(--r);overflow:hidden;padding:34px 20px 26px;text-align:center;
  background:
    radial-gradient(90% 55% at 50% 8%, color-mix(in srgb, var(--c1) 55%, transparent) 0%, transparent 70%),
    radial-gradient(140% 120% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 60%),
    linear-gradient(180deg, var(--c2) 0%, #0a0f14 100%);
  color:#fff;box-shadow:var(--shadow)}
/* rayos de luz sutiles, para que no sea un degradado quieto */
.champ::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    conic-gradient(from 200deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--c1) 22%, transparent) 12deg,
      transparent 24deg, transparent 36deg, color-mix(in srgb, var(--c1) 16%, transparent) 48deg, transparent 60deg)}
/* Sin `color-mix` (navegadores viejos) queda el degradado del cuerpo, que ya
   funciona solo: el halo y los rayos son mejora, no requisito. */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .champ{background:radial-gradient(120% 90% at 50% 0%, var(--c1) 0%, var(--c2) 55%, #0a0f14 100%)}
  .champ::after{display:none}
}
.champ-in{position:relative;z-index:2}
.champ-cup{font-size:4.6rem;line-height:1;animation:cupPop .7s cubic-bezier(.2,1.4,.4,1) both, cupFloat 2.4s ease-in-out 1s infinite}
/* la copa de verdad, recortada de la lámina y con fondo transparente */
.trofeo-grande{height:190px;width:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,255,255,.28))}
@media(max-width:430px){ .trofeo-grande{height:150px} }
/* miniatura en la vitrina de la ficha */
.trofeo-chico{height:30px;width:auto;vertical-align:middle;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

/* ---- íconos de minijuego (UI.ICONOS / icoMini) ----
   Mismo criterio que los trofeos: la imagen se dimensiona por ALTURA y el
   ancho va en auto, así un dibujo apenas más ancho o más angosto no descoloca
   la línea. Si el PNG todavía no está, el onerror deja el emoji y estas reglas
   no se aplican a nada — por eso ninguna toca el layout del contenedor. */
.ico-mini{height:20px;width:auto;vertical-align:middle;flex:none}
/* en un renglón de feed, donde el emoji medía 1.05rem */
.ico-feed{height:19px;width:auto;vertical-align:middle}
/* en una tira de estado (la cabecera del torneo): no es el encabezado de una
   pantalla, así que no se lleva los 52px — pero 17px era ilegible */
.ico-strip{height:26px;width:auto;vertical-align:-8px;margin-right:7px}
/* la vitrina vacía de la ficha: va apagada, es un estado "todavía no hay nada" */
.ico-vitrina{height:46px;width:auto;display:block;margin:0 auto}

/* link de texto (el mail del pie): hereda el tamaño y sólo cambia el color */
.lnk{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
@media (hover:hover){ .lnk:hover{border-bottom-color:var(--accent)} }
/* la cara de un medio en el panel del hub, donde el emoji medía ~1.5rem */
.ico-medio{height:34px;width:auto;display:block}
/* el festejo del clásico ganado: reemplaza a los tres emojis de antes, así que
   se lleva el tamaño que tenían (2.4rem) y algo más, es el momento de la fiesta */
.ico-festejo{height:96px;width:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.cl-festejo{animation:caraPop .38s cubic-bezier(.2,1.5,.4,1) both}
@media(max-width:430px){ .ico-festejo{height:76px} }

/* la variante centrada del encabezado: la tarjeta de "cómo te fue" es .center,
   así que el bloque ícono+texto se centra en vez de pegarse a la izquierda */
.mini-head.mh-center{justify-content:center;text-align:left}
/* el grande de "se define acá", donde el emoji medía 1.7rem */
.ico-def{height:44px;width:auto;display:block}

/* ---- encabezado de minijuego: el dibujo al costado del título ----
   El ícono NO va inline en la línea del kicker. Son ilustraciones con detalle
   y a la altura de un renglón en mayúscula de .72rem quedaban en una manchita
   irreconocible (se probó a 17px: no se distinguía una planilla de scouting de
   un monitor de VAR). Acá tienen 52px, que es donde el dibujo se lee. */
.mini-head{display:flex;align-items:center;gap:12px}
/* el .mh-ico es el que da el tamaño del EMOJI cuando el PNG no está: sin esto
   el fallback quedaba a tamaño de texto al lado de un hueco de 52px */
.mini-head .mh-ico{flex:none;width:52px;height:52px;display:flex;align-items:center;
  justify-content:center;font-size:2rem;line-height:1}
.mini-head .mh-img{width:52px;height:52px;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.mini-head .mh-tx{flex:1;min-width:0}
@media(max-width:430px){
  .mini-head{gap:10px}
  .mini-head .mh-ico,.mini-head .mh-img{width:42px;height:42px}
  .mini-head .mh-ico{font-size:1.6rem}
  .ico-def{height:36px}
}
@keyframes cupPop{from{transform:scale(.2) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes cupFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.champ-tag{display:inline-block;margin-top:10px;font-family:var(--display);font-weight:700;letter-spacing:.22em;
  font-size:.7rem;background:rgba(0,0,0,.35);padding:5px 14px;border-radius:999px}
.champ-h{font-family:var(--display);font-size:2.3rem;margin:10px 0 4px;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.5)}
.champ-club{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px;font-weight:800;font-size:1.05rem}
.champ-club .crest,.champ-club .crest-ph{width:74px;height:74px;background:rgba(255,255,255,.9);border-radius:12px;padding:4px}
.champ-sub{color:rgba(255,255,255,.85);font-size:.85rem;margin-top:8px}
.champ-conf{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.champ-conf i{position:absolute;top:-14px;width:9px;height:15px;border-radius:2px;animation:confFall 2.6s linear infinite}
@keyframes confFall{to{transform:translateY(115vh) rotate(540deg)}}

/* medidor de paciencia (dirigencia) */
.patience .pt-lab{display:flex;justify-content:space-between;font-size:.7rem;color:var(--mut);font-weight:700;margin-bottom:4px}
.patience .pt-bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.patience .pt-bar i{display:block;height:100%;border-radius:6px;transition:width .3s;
  background:linear-gradient(90deg,var(--red),var(--gold),var(--green))}

/* barómetro de la hinchada */
.fanbar .fb-track{height:26px;border-radius:8px;background:var(--red);overflow:hidden;border:1px solid var(--line2)}
.fanbar .fb-track i{display:block;height:100%;background:var(--green);transition:width .6s cubic-bezier(.3,.9,.3,1)}
.fanbar .fb-legend{display:flex;justify-content:space-between;font-size:.74rem;color:var(--mut);margin-top:6px}

/* entrenamiento: circuito de conos */
.cone-hud{display:flex;gap:8px;margin:12px 0 10px}
.cone-hud .ch-box{flex:1;text-align:center;padding:8px 4px;border-radius:var(--rs);
  border:1.5px solid var(--line2);background:var(--panel2)}
.cone-hud .ch-box b{display:block;font-size:1.35rem;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.cone-hud .ch-box.bad b{color:var(--red)}
.cone-hud .ch-box i{font-style:normal;font-size:.63rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:800}
.cone-track{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:76px;padding:8px 6px;
  border-radius:var(--rs);border:1px solid var(--line2);overflow:hidden;
  background:repeating-linear-gradient(90deg,var(--panel2),var(--panel2) 22px,rgba(31,158,74,.06) 22px,rgba(31,158,74,.06) 44px)}
.cone{display:flex;flex-direction:column;align-items:center;gap:1px;flex:0 0 auto;
  transition:transform .12s ease,opacity .12s ease;opacity:.5}
.cone .cn-ic{font-size:.9rem;font-weight:900;color:var(--mut);line-height:1}
.cone .cn-base{font-size:1.15rem;line-height:1}
.cone.pasado{opacity:.22;transform:scale(.78)}
.cone.activo{opacity:1;transform:scale(1.3)}
.cone.activo .cn-ic{color:var(--accent)}
.cone-call{text-align:center;font-size:2.6rem;font-weight:900;line-height:1.1;margin:8px 0 2px;color:var(--txt)}
.cone-call.hit{animation:cone-hit .18s ease}
.cone-call.miss{animation:cone-miss .22s ease;color:var(--red)}
@keyframes cone-hit{from{transform:scale(1.35);color:var(--accent)}to{transform:scale(1)}}
@keyframes cone-miss{0%{transform:translateX(-7px)}50%{transform:translateX(7px)}100%{transform:translateX(0)}}
.dpad{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:6px}
.dpad .dp{padding:16px 0;border-radius:var(--rs);border:1.5px solid var(--line2);background:var(--panel2);
  color:var(--txt);font-size:1.45rem;font-weight:900;font-family:inherit;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dpad .dp:active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(.94)}

/* duelo de pizarras: 4 en línea contra el DT rival */
.p4-vs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 6px;font-size:.86rem}
.p4-vs .p4-side{display:inline-flex;align-items:center;gap:6px;min-width:0}
.p4-vs .p4-side .crest,.p4-vs .p4-side .crest-ph{width:26px;height:26px}
.p4-vs .p4-side i{font-style:normal;font-weight:900;color:var(--accent);font-size:1.05rem}
.p4-vs .p4-side i.o{color:var(--red)}
.p4-vs .p4-mid{color:var(--dim);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.p4-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:330px;margin:12px auto 0}
.p4-cell{aspect-ratio:1;border-radius:8px;border:1.5px solid var(--line2);background:var(--panel2);
  color:var(--txt);font-family:inherit;font-size:1.5rem;font-weight:900;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:.1s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:hover){ .p4-cell:hover:not(:disabled){border-color:var(--accent);background:rgba(92,194,240,.12)} }
.p4-cell:disabled{cursor:default}
.p4-cell.t-x{color:var(--accent);border-color:var(--accent);background:rgba(92,194,240,.14)}
.p4-cell.t-o{color:var(--red);border-color:var(--red);background:rgba(240,86,79,.12)}
.p4-cell.last{box-shadow:0 0 0 3px rgba(245,196,81,.35)}
.p4-state{text-align:center;font-weight:800;font-size:.9rem;margin-top:12px;min-height:1.2em}
.p4-state.good{color:var(--green)}
.p4-state.bad{color:var(--red)}

/* pizarra: la jugada ensayada (seguí la secuencia) */
.seq-hud{display:flex;gap:8px;margin:12px 0 10px}
.seq-hud .ch-box{flex:1;text-align:center;padding:8px 4px;border-radius:var(--rs);
  border:1.5px solid var(--line2);background:var(--panel2)}
.seq-hud .ch-box b{display:block;font-size:1.35rem;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.seq-hud .ch-box i{font-style:normal;font-size:.63rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:800}
.pizarra{position:relative;height:210px;border-radius:var(--rs);overflow:hidden;
  border:1.5px solid var(--line2);background:linear-gradient(180deg,#1f7a3d,#186231)}
.pizarra .pz-line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.28)}
.pizarra .pz-circle{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;
  border:2px solid rgba(255,255,255,.28);border-radius:50%}
.pz-node{position:absolute;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .12s ease,transform .12s ease,box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pz-node span{font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;text-align:center}
.pz-node.on{background:#ffd76e;color:#2a1d00;border-color:#fff;transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 6px rgba(255,215,110,.32)}
.pz-node.ok{background:#7be495;color:#08331b;border-color:#fff;transform:translate(-50%,-50%) scale(1.1)}
.pz-node.err{background:#ef5350;color:#fff;border-color:#fff;transform:translate(-50%,-50%) scale(1.1)}
.seq-state{text-align:center;font-weight:800;font-size:.88rem;margin-top:10px;min-height:1.2em;color:var(--txt)}

/* final: cómo se define */
.fin-def{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:var(--rs);
  border:1.5px solid var(--gold);background:rgba(245,196,81,.10)}
.fin-def .fd-ic{font-size:1.7rem;flex:none}
.fin-def b{display:block;font-size:.95rem}
.fin-def small{display:block;color:var(--mut);font-size:.8rem}
/* para qué sirvió la arenga en esta final */
.fin-arenga{margin-top:8px;padding:9px 12px;border-radius:var(--rs);border:1px solid var(--line2);
  background:var(--panel2);font-size:.82rem;display:flex;flex-direction:column;gap:2px}
.fin-arenga b{font-size:.86rem}
.fin-arenga.buena{border-color:var(--accent)}
.fin-arenga.buena b{color:var(--accent)}
.fin-arenga.mala{border-color:var(--red)}
.fin-arenga.mala b{color:var(--red)}

/* rompecabezas táctico: resolvé la jugada */
.pizarra.pz-puzzle{height:210px;margin-top:12px}
.pz-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pz-lines .pz-pass{stroke:#ffd76e;stroke-width:.9;stroke-dasharray:2.5 1.8;vector-effect:non-scaling-stroke}
/* el pase que salió mal queda dibujado en rojo, entero, para que se vea cuál fue */
.pz-lines .pz-pass.mala{stroke:#ff5a52;stroke-width:1.6;stroke-dasharray:none}
.pz-p{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;padding:0;
  border:2px solid rgba(255,255,255,.7);font-family:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pz-p.yo{background:#2f6bd8;color:#fff;cursor:default}
.pz-p.comp{background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:transform .1s}
@media (hover:hover){ .pz-p.comp:hover{transform:translate(-50%,-50%) scale(1.14)} }
.pz-p.comp.meta{background:var(--gold);color:#3a2a00;border-color:#fff}
.pz-p.comp.usado{opacity:.45}
.pz-p.riv{background:var(--red);border-color:rgba(255,255,255,.5);cursor:default}
/* el rival que cortó el pase: anillo y tijera, para señalarlo sin ambigüedad */
.pz-p.riv.corto{background:#ff3b30;border-color:#fff;font-size:13px;color:#fff;
  box-shadow:0 0 0 5px rgba(255,59,48,.4);animation:pz-corto .45s ease}
@keyframes pz-corto{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.4)}100%{transform:translate(-50%,-50%) scale(1)}}
.pz-p.comp.fallido{outline:2px dashed #ff5a52;outline-offset:3px;opacity:.65}
/* jugada resuelta: el objetivo pasa a tic verde */
.pz-p.comp.ok{background:var(--green);color:#04160b;border-color:#fff;font-size:17px;font-weight:900;
  box-shadow:0 0 0 6px rgba(47,191,106,.4);animation:pz-ok .5s ease}
@keyframes pz-ok{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.45)}100%{transform:translate(-50%,-50%) scale(1)}}
.pz-lines .pz-pass.hecha{stroke:var(--green);stroke-width:1.5;stroke-dasharray:none}
.pz-p.ball{box-shadow:0 0 0 4px rgba(255,215,110,.45)}
.pz-msg{text-align:center;font-weight:800;font-size:.86rem;margin-top:10px;min-height:1.2em;color:var(--txt)}
.pz-msg.mal{color:var(--red)}
.pz-msg.bien{color:var(--accent)}

/* detectá el error táctico: foto del once en la pizarra */
.pizarra.pz-mini{height:200px;margin-top:12px}   /* 170 era chico para leer once puntos y el rival */
.pz-dot{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid rgba(0,0,0,.35);box-shadow:0 2px 5px rgba(0,0,0,.4)}
/* Los puntos se distinguen POR LÍNEA. Con los once iguales, "la línea está
   partida" o "el 9 quedó aislado" eran imposibles de leer: no se sabía quién
   era central y quién delantero. */
.pz-dot.gk { background:var(--gold) }
.pz-dot.def{ background:#eaf2ff }
.pz-dot.med{ background:#7fc4ff }
.pz-dot.del{ background:#2f8fe0 }
.pz-dot.riv{ background:#e5443c; border-color:rgba(0,0,0,.5) }

/* Arcos y áreas: sin esto no se sabía para qué lado se atacaba. */
.pizarra .pz-arco{position:absolute;top:50%;width:5px;height:44px;margin-top:-22px;
  background:rgba(255,255,255,.85);border-radius:2px}
.pizarra .pz-arco.iz{left:0}
.pizarra .pz-arco.de{right:0}
.pizarra .pz-area{position:absolute;top:50%;width:13%;height:64%;transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.28)}
.pizarra .pz-area.iz{left:0;border-left:0}
.pizarra .pz-area.de{right:0;border-right:0}
.pizarra .pz-flecha{position:absolute;right:8px;bottom:6px;font-size:.6rem;font-weight:800;
  letter-spacing:.08em;color:rgba(255,255,255,.72);text-transform:uppercase;pointer-events:none}

/* Referencia de colores debajo del dibujo. */
.pz-ref{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin-top:8px;
  font-size:.68rem;color:var(--mut);font-weight:700}
.pz-ref span{display:inline-flex;align-items:center;gap:5px}
.pz-ref .pz-dot{position:static;transform:none;width:10px;height:10px;border-width:1.5px;box-shadow:none;flex:0 0 auto}

/* ¿qué jugada viene?: la seña del rival */
.ant-pista{margin:12px 0 4px;padding:12px 14px;border-radius:var(--rs);border:1.5px dashed var(--line2);
  background:var(--panel2);font-size:.92rem;font-style:italic;color:var(--txt);text-align:center}

/* armá el once: huecos + banco arrastrable */
.pizarra.pz-armar{height:200px;margin-top:12px}
.pz-slot{position:absolute;transform:translate(-50%,-50%);width:56px;height:44px;border-radius:8px;
  border:2px dashed rgba(255,255,255,.55);background:rgba(0,0,0,.22);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  font-size:.62rem;font-weight:800;line-height:1.1;text-align:center;padding:2px}
/* el hueco vacío no delata el puesto: sólo marca el lugar en la cancha */
.pz-slot:not(.full)::before{content:'+';font-size:1.2rem;font-weight:900;opacity:.55}
.pz-slot.drop{border-color:var(--gold);background:rgba(245,196,81,.18)}
.pz-slot.full{border-style:solid;border-color:#fff;background:rgba(0,0,0,.45)}
.pz-slot b{font-size:.64rem;display:block;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-slot i{font-style:normal;font-size:.7rem;color:var(--gold);font-weight:900}
.pz-bench{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.pz-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;cursor:grab;
  border:1.5px solid var(--line2);background:var(--panel2);color:var(--txt);font-weight:700;font-size:.8rem;font-family:inherit}
.pz-chip.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(92,194,240,.35)}
.pz-chip.used{opacity:.35;cursor:default}
.pz-chip b{color:var(--accent)}

/* entrenamiento viejo: fichas y estaciones (lo usan otros minijuegos) */
.tr-players{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.tr-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line2);background:var(--panel2);color:var(--txt);font-weight:700;font-size:.8rem;font-family:inherit}
.tr-chip.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(92,194,240,.3)}
.tr-chip.done{opacity:.55}
.tr-chip i{font-style:normal}
.tr-stations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tr-station{position:relative;padding:14px 8px;border-radius:var(--rs);border:1.5px solid var(--line2);background:var(--panel2);
  cursor:pointer;text-align:center;font-family:inherit;color:var(--txt)}
@media (hover:hover){ .tr-station:hover{border-color:var(--accent)} }
.tr-station .ic{font-size:1.6rem}
.tr-station .nm{font-weight:800;font-size:.85rem;margin-top:2px}
.tr-station .ds{font-size:.66rem;color:var(--mut)}
.tr-station .cnt{position:absolute;top:6px;right:8px;font-weight:900;color:var(--accent);font-size:.8rem}
.opt-btn.done{opacity:.5}

/* minijuego de barra (arenga / negociación) */
.bargame{margin-top:16px}
.bg-track{position:relative;height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);
  background:var(--panel2);box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
/* el degradado vertical le saca lo plano a los bloques de color */
.bg-zone{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.14))}
.bg-zone span{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.95);
  text-shadow:0 1px 2px rgba(0,0,0,.45);padding:0 2px;text-align:center}
.bg-zone.bad{background:#cf3b3b}
.bg-zone.good{background:#1f9e4a}
/* amarillo = zona incierta (el arco en el penal: 50 y 50) */
.bg-zone.mid{background:#d8a13a}
/* FRONTERAS entre zonas: dos colores pegados no dicen dónde termina uno y
   empieza el otro. La línea clara con sombra a los costados se ve sobre
   cualquiera de los tres colores, y con la barra a 140%/s es lo único que se
   mira: es el objetivo, no una decoración. */
/* La frontera se dibuja como un RECORTE en la barra, tipo ticket: dos
   semicírculos del color del fondo que la pellizcan arriba y abajo, más una
   costura fina en el medio. Se lee de un vistazo y no ensucia como los
   bloques negros de la primera versión.

   La costura es tenue y el marcador es blanco brillante: si las dos fueran
   líneas claras el ojo no distingue "dónde estoy" de "dónde cambia la zona",
   que es justo la comparación que hay que hacer en 70 milisegundos. */
.bg-edge{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.45) 22%,rgba(0,0,0,.45) 78%,transparent);
  pointer-events:none}
/* los recortes van DENTRO de la pista: tiene overflow:hidden, así que lo que
   sobresalga se recorta solo y quedan como medias lunas limpias */
.bg-edge::before,.bg-edge::after{content:'';position:absolute;left:-6px;width:12px;height:12px;
  border-radius:50%;background:var(--panel);box-shadow:0 0 0 1px rgba(0,0,0,.22)}
.bg-edge::before{top:-6px}
.bg-edge::after{bottom:-6px}
/* veredicto: se ve dónde frenó antes de pasar de pantalla */
.bg-verdict{margin-top:10px;text-align:center;opacity:0;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease}
.bg-verdict.show{opacity:1;transform:translateY(0)}
.bg-verdict b{display:block;font-size:1.15rem;font-weight:900;letter-spacing:.02em}
.bg-verdict small{display:block;font-size:.76rem;color:var(--mut);margin-top:1px}
.bg-verdict.good b{color:var(--green,#1f9e4a)}
.bg-verdict.bad b{color:var(--red,#cf3b3b)}
/* fino y centrado en su posición: con 5px de ancho el ojo no sabía si contaba
   el borde o el medio, y en una zona de 10% eso es medio punto de duda */
.bg-marker{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;background:#fff;border-radius:3px;
  box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 0 12px rgba(255,255,255,.9)}
.bg-marker.stopped{background:#111;box-shadow:0 0 0 2px #fff}

/* reloj de la rueda de prensa */
.pressclock{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
.pressclock .pc-bar{flex:1;height:8px;background:var(--line);border-radius:5px;overflow:hidden}
.pressclock .pc-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),var(--gold),var(--green));
  transition:width .1s linear}
.pressclock span{font-weight:800;font-size:.78rem;color:var(--mut);width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* pistas del minijuego */
.clues{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.clue{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--rs);font-size:.85rem}
/* ---- ruleta del casino ---- */
.roulette{position:relative;width:220px;height:220px;margin:16px auto 0}
.rl-pointer{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:1.5rem;color:var(--gold);z-index:2;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.rl-wheel{width:100%;height:100%;border-radius:50%;border:6px solid #b98b2e;box-shadow:0 8px 26px rgba(0,0,0,.28), inset 0 0 0 10px #14301f;
  transition:transform 3.8s cubic-bezier(.17,.67,.16,1);
  background:conic-gradient(#c0392b 0 20deg,#1a1a1a 20deg 40deg,#c0392b 40deg 60deg,#1a1a1a 60deg 80deg,
    #c0392b 80deg 100deg,#1a1a1a 100deg 120deg,#c0392b 120deg 140deg,#1a1a1a 140deg 160deg,
    #c0392b 160deg 180deg,#1a1a1a 180deg 200deg,#c0392b 200deg 220deg,#1a1a1a 220deg 240deg,
    #c0392b 240deg 260deg,#1a1a1a 260deg 280deg,#c0392b 280deg 300deg,#1a1a1a 300deg 320deg,
    #c0392b 320deg 340deg,#1a1a1a 340deg 360deg)}
.rl-wheel::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:#b98b2e;box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}

/* ---- bouncing-ball loader ---- */
.loader{display:flex;flex-direction:column;align-items:center;gap:20px;padding:70px 0}
.loader .ball{font-size:48px;line-height:1;animation:ballbounce .55s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes ballbounce{from{transform:translateY(0) rotate(0)}to{transform:translateY(-38px) rotate(200deg)}}
.loader .dots{display:flex;gap:9px}
.loader .dots i{width:11px;height:11px;border-radius:50%;background:var(--accent);display:inline-block;animation:dotpulse .8s ease-in-out infinite}
.loader .dots i:nth-child(2){animation-delay:.16s}
.loader .dots i:nth-child(3){animation-delay:.32s}
@keyframes dotpulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-7px)}}
.loader .msg{color:var(--mut);font-weight:600;font-size:.95rem}

/* ---- ESPN-style breaking-news contract announcement ---- */
.breaking{border-radius:var(--r);overflow:hidden;border:1px solid #4a1512;box-shadow:var(--shadow);background:linear-gradient(180deg,#141b26,#0c1119)}
.bk-bar{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#d21f1f,#8f1414);padding:9px 14px;color:#fff}
.bk-live{font-weight:800;font-size:.72rem;letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px}
.bk-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.bk-tag{font-family:var(--display);font-weight:700;letter-spacing:.03em;font-size:.82rem;opacity:.96}
.bk-body{display:flex;gap:18px;align-items:center;padding:24px 20px}
.bk-crest{flex:none}
.bk-crest .crest,.bk-crest .crest-ph{width:84px;height:84px;font-size:2rem}
.bk-kicker{display:inline-block;background:#d21f1f;color:#fff;font-weight:800;font-size:.64rem;letter-spacing:.12em;padding:3px 9px;border-radius:5px;margin-bottom:9px}
.bk-head{font-family:var(--display);font-size:2rem;line-height:1.02;margin:0;font-weight:800}
.bk-sub{color:var(--mut);margin-top:9px;font-size:.9rem}
.bk-ticker{overflow:hidden;white-space:nowrap;background:#0a0e14;border-top:1px solid var(--line);padding:8px 0}
.bk-ticker span{display:inline-block;padding-left:100%;animation:tick 20s linear infinite;font-size:.74rem;letter-spacing:.06em;color:var(--gold);font-weight:600}
@keyframes tick{to{transform:translateX(-100%)}}
@media(max-width:520px){ .bk-head{font-size:1.5rem} .bk-crest .crest,.bk-crest .crest-ph{width:60px;height:60px} }

/* ===========================================================================
   PANTALLAS ANGOSTAS (celular)
   El juego se veía distinto según el modelo de teléfono: en los angostos
   aparecía scroll horizontal y los títulos largos se pisaban al envolver.
   Las dos causas y su arreglo:

   1. SCROLL HORIZONTAL — era `grid-template-columns:1fr`. Un track `1fr` tiene
      mínimo `auto`, o sea que NO baja del contenido mínimo de sus items: la
      lista del plantel resolvía un track de 397px dentro de un contenedor de
      314 y empujaba la página a 428 de ancho sobre un viewport de 375. Todas
      las grillas con contenido flexible pasaron a `minmax(0,1fr)`, que sí deja
      encoger. Medido: el scroll pasó de 428 a 375, sin desborde.
      A esto se sumaba el topbar, que a 320px se pasaba 4px.

   2. TÍTULOS QUE SE PISAN — los h1/h2 tienen `line-height:.98`, que es menos
      que 1 a propósito (son de afiche, condensados y en mayúscula). Con una
      sola línea queda bien; cuando el título ENVUELVE en un celular angosto,
      las dos líneas se tocan. Acá el tamaño pasa a ser fluido y el interlineado
      sube arriba de 1, así que envolver deja de ser un problema.
   =========================================================================== */
@media (max-width:430px){
  /* más ancho útil: 36px de padding sobre 375 es casi el 10% de la pantalla */
  #app{padding:12px 11px 40px}
  /* títulos fluidos: crecen con la pantalla y no se pisan al envolver */
  h1{font-size:clamp(1.7rem, 8.5vw, 2.5rem);line-height:1.04}
  h2{font-size:clamp(1.25rem, 6.2vw, 1.75rem);line-height:1.06}
  h3{font-size:1rem}
  .card{padding:13px}
  .card.tight{padding:11px}
}
@media (max-width:430px){
  /* ---- LA BARRA DE ARRIBA VA EN UNA SOLA FILA, CON EL NOMBRE ENTRECORTADO ----
     Decisión de diseño explícita: la barra NO se parte en dos filas. El nombre
     se recorta con puntos suspensivos ("E…", "Lig…") todo lo que haga falta y
     los controles quedan siempre a la vista en el mismo renglón. Se probó la
     versión de dos filas —que mostraba el nombre completo— y se descartó: la
     barra compacta se prefiere aunque el nombre casi no se lea.

     Lo único que NO es negociable es que el nombre tenga `white-space:nowrap`.
     Sin eso envuelve, la barra crece en alto y el badge de REP queda en medio
     de las líneas del nombre: eso sí es un bug, no un recorte.

     Acá se comprime todo un punto para que, dentro de esa única fila, al nombre
     le quede el mayor ancho posible. */
  .topbar{gap:8px;padding:9px 11px}
  /* los gaps INTERNOS de cada grupo también, que son los que se comían el ancho */
  .topbar .tb-ident,.topbar .tb-ctl{gap:7px}
  /* `U.crestHTML` escribe el tamaño INLINE (`style="width:34px"`), así que sin
     !important el escudo ignora esta regla y se queda en 34. */
  .topbar .crest,.topbar .crest-ph{width:28px!important;height:28px!important}
  .prow{gap:7px;padding:7px 8px;font-size:.82rem}
  .prow .posb{width:30px}
  /* Los cuatro datos (fuerza · presupuesto · manager · prestigio) en 2x2.
     Con `auto-fit` entraban 3 y el cuarto quedaba solo en una fila, porque
     "US$14.0M" pide más que el mínimo de 90px de la grilla. */
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:360px){
  /* Teléfonos muy angostos. Todo lo que se recorta acá es para devolverle ancho
     al nombre del club, que es el único que cede: los controles se tienen que
     poder tocar, así que no bajan de ~34px. */
  .topbar .club-name{font-size:.92rem}
  .topbar .club-sub{font-size:.66rem}
  .topbar .money{font-size:.82rem}
  .topbar .season-pill{font-size:.62rem}
  .topbar .iconbtn{width:34px;height:34px;font-size:.92rem}
  .rep-badge{width:38px;height:38px}
  .rep-badge .rv{font-size:16px}
  .rep-badge .rl{font-size:7px}
}

/* ---- LA FINAL PERDIDA (UI.subcampeon) ----
   Espejo de .champ, pero al revés en todo: sin dorado, sin confeti y sin
   resplandor. El fondo es el frío del juego con una viñeta que cierra, así la
   foto queda como lo único iluminado de la pantalla. */
.perdi{position:relative;border-radius:var(--r);overflow:hidden;padding:26px 20px 22px;text-align:center;
  background:
    radial-gradient(140% 120% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 60%),
    linear-gradient(180deg, #16202b 0%, #0a0f14 100%);
  color:#fff;box-shadow:var(--shadow)}
.perdi-in{max-width:460px;margin:0 auto}
.perdi-foto{border-radius:var(--r);overflow:hidden;border:1.5px solid var(--line2);
  box-shadow:0 18px 44px rgba(0,0,0,.55);margin-bottom:18px}
.perdi-foto img{display:block;width:100%;height:auto;filter:saturate(.75) contrast(1.04)}
.perdi-tag{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.perdi-h{font-family:'Archivo',system-ui,sans-serif;font-style:italic;font-weight:900;
  font-stretch:80%;font-size:clamp(1.6rem,7vw,2.4rem);margin:.1em 0 .3em;color:var(--txt)}
.perdi-club{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:800;margin:10px 0}
.perdi-sub{font-size:.9rem;color:var(--mut);margin:.2em 0}
.perdi-sub.dim{font-size:.78rem;color:var(--dim)}

/* ---- LA GORRA: el botón de apoyar ----
   Va DORADO y no celeste a propósito. El celeste es el color de las acciones
   del juego ("Nueva carrera", "Continuar"), y un botón de donar del mismo color
   compite con ellas: la pantalla de título pasaría a tener tres botones que
   parecen igual de importantes. El dorado ya significa otra cosa acá —es el de
   la vitrina y el de los títulos—, así que se lee como "esto es aparte".

   Y va más angosto que los de acción (`width:auto`, centrado) por lo mismo: se
   ve, se puede tocar cómodo, y no ocupa el ancho completo como si fuera un paso
   del juego. */
.apoyar{ text-align:center; margin-top:14px }
.btn-apoyar{
  appearance:none; cursor:pointer; font-family:inherit; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 20px; border-radius:999px; border:1px solid transparent;
  background:linear-gradient(180deg,#f5cf6b,var(--gold));
  color:#3a2a00; font-weight:800; font-size:.92rem; letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(232,181,82,.22);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
/* el hover va envuelto: en iOS se queda pegado después de tocar */
@media (hover:hover){
  .btn-apoyar:hover{ transform:translateY(-2px); filter:brightness(1.05);
    box-shadow:0 8px 22px rgba(232,181,82,.34) }
}
.btn-apoyar:active{ transform:translateY(0) }
.btn-apoyar:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.btn-apoyar .ba-ic{ font-size:1.05rem; line-height:1 }
.apoyar .ba-pie{ display:block; margin-top:7px; font-size:.72rem; color:var(--dim) }