/* =====================================================================
   TEMA «MCSA 2026» — diseño original del titulador.
   Todo lo visual del grafismo está en este archivo. La lógica (qué sale y cuándo)
   está en overlay.html y no hace falta tocarla para cambiar el diseño.
   Piezas, estados y variables disponibles: temas/LEEME.md
   ===================================================================== */

@font-face { font-family:'Barlow Condensed'; font-weight:500; src:url(../../assets/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:600; src:url(../../assets/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:700; src:url(../../assets/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:800; src:url(../../assets/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:900; src:url(../../assets/fonts/barlow-condensed-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:italic; font-weight:600; src:url(../../assets/fonts/barlow-condensed-latin-600-italic.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:italic; font-weight:700; src:url(../../assets/fonts/barlow-condensed-latin-700-italic.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:italic; font-weight:800; src:url(../../assets/fonts/barlow-condensed-latin-800-italic.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:italic; font-weight:900; src:url(../../assets/fonts/barlow-condensed-latin-900-italic.woff2) format('woff2'); }

/* =====================================================================
   SISTEMA DE DISEÑO — un único paquete gráfico para todos los deportes.
   · Azul marino  = estructura (todas las cajas)
   · Blanco       = dato principal (tanteo, dorsales, puntos)
   · Acento       = deporte (bordes, pestañas, brillos). Es lo único que cambia.
   · Todas las cajas se inclinan el mismo ángulo y se anclan por la esquina inferior.
   · Márgenes de seguridad: 96 px laterales, 54 px arriba, 72 px abajo.
   ===================================================================== */
:root {
  --acc:#5ed424; --accr:94,212,36; --on:#071433;                 /* fútbol */
  --navy:#071433; --txtd:#0a1a3a; --mute:#a7b8da; --line:rgba(130,178,255,.32);
  --pa:.9;                                                         /* opacidad de los paneles, se ajusta desde el panel */
  --panel:linear-gradient(180deg,rgba(28,64,134,calc(.97 * var(--pa))) 0%,rgba(10,27,66,calc(.98 * var(--pa))) 50%,rgba(4,12,33,var(--pa)) 100%);
  --pa2:1;                                                         /* opacidad de tanteo, dorsales y pestañas (segundo deslizador) */
  --white:linear-gradient(180deg,rgba(255,255,255,var(--pa2)) 0%,rgba(237,241,247,var(--pa2)) 55%,rgba(207,215,228,var(--pa2)) 100%);
  --sk:-12deg; --usk:12deg; --tan:.2126;
  --bh:112px;                                                      /* alto del cuerpo de placa */
  --out:cubic-bezier(.2,.8,.2,1); --in:cubic-bezier(.7,0,.8,.3);
  --hc:#c8102e; --ac:#1d4ed8;
}
body[data-sport=baloncesto] { --acc:#ff8a1a; --accr:255,138,26; --on:#071433; }
body[data-sport=balonmano]  { --acc:#ee2a30; --accr:238,42,48;  --on:#fff; }
body[data-sport=voleibol]   { --acc:#9b4dff; --accr:155,77,255; --on:#fff; }

* { box-sizing:border-box; margin:0; }
.bx, .body, .luP, .fsB, .cri { text-shadow:0 1px 3px rgba(0,0,0,calc(1 - var(--pa))); }
html,body { width:1920px; height:1080px; overflow:hidden; background:transparent;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:700; color:#fff; text-transform:uppercase; }
.h { --c:var(--hc); } .a { --c:var(--ac); }

/* ---------- Caja base ---------- */
.bx { position:relative; display:flex; align-items:center; justify-content:center; height:100%;
      transform:skewX(var(--sk)); transform-origin:0 100%;
      background:var(--panel); border:1.5px solid var(--line);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -10px 18px rgba(0,0,0,.25); }
.bx > * { transform:skewX(var(--usk)); }
.bx.w  { background:var(--white); border-color:rgba(255,255,255,.7); color:var(--txtd); }
.bx.ac { background:rgba(var(--accr),var(--pa2)); border-color:rgba(255,255,255,.4); color:var(--on); box-shadow:0 0 16px rgba(var(--accr),.55); }
.edge  { width:12px; height:100%; transform:skewX(var(--sk)); transform-origin:0 100%; background:rgba(var(--accr),var(--pa2)); box-shadow:0 0 16px rgba(var(--accr),calc(.85 * var(--pa2))); }
.crestbox img { display:block; height:74%; max-width:80%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.chip { display:block; width:30px; height:40px; background:var(--c); border:3px solid #fff; transform:none !important; }
.brand { display:none; height:30px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
body.brand-on .brand { display:block; }
.it { font-style:italic; }
.tab-num { font-variant-numeric:tabular-nums; }

/* =================== MARCADOR =================== */
#sb { position:absolute; top:54px; left:96px; transform:scale(var(--sbz, 1)); transform-origin:0 0; transition:transform .7s var(--out), opacity .4s; }
#sb.off, body.vson #sb { transform:translateY(-200px) scale(var(--sbz, 1)); opacity:0; }
#sb .row { display:flex; align-items:center; gap:3px; height:64px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
#sb .edge.el { margin-right:4px; } #sb .edge.er { margin-left:4px; }
#sb .crestbox { width:84px; }
body.bug-corto #sb .nm { width:170px; } body.bug-completo #sb .nm { width:330px; }
.nm { width:260px; padding:0 22px; font-size:38px; font-weight:800; font-style:italic; white-space:nowrap; overflow:hidden; }
.nm::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--c); }
.rc { display:inline-block; width:12px; height:19px; margin-left:8px; vertical-align:-1px; border-radius:2px;
      background:linear-gradient(#ff5a5a,#c4121b); box-shadow:0 0 0 1.5px rgba(255,255,255,.75); }
.sc { width:auto; min-width:76px; padding:0 10px; font-size:52px; font-weight:900; font-style:italic; font-variant-numeric:tabular-nums; }
.pulse { animation:pulse 1.2s var(--out); }
@keyframes pulse { 0% { background:var(--acc); color:var(--on); box-shadow:0 0 30px rgba(var(--accr),1); } }
/* Tira de datos: igual en todos los deportes, cambia el contenido */
/* Tres zonas: el bloque central queda siempre bajo la unión de los dos tanteos */
#strip { display:grid; grid-template-columns:1fr auto 1fr; gap:3px; height:40px; margin-top:4px; }
#strip > div { display:flex; gap:3px; height:100%; }
#sL { justify-content:flex-end; } #sR { justify-content:flex-start; }
#strip .bx { padding:0 18px; gap:10px; }
#strip .bx.none { display:none; }
.per { font-size:24px; font-weight:800; font-style:italic; letter-spacing:.02em; }
.clkv { font-size:32px; font-weight:800; font-style:italic; font-variant-numeric:tabular-nums; }
#add span { font-size:30px; font-weight:900; font-style:italic; }
.flab { font-size:19px; color:var(--mute); letter-spacing:.06em; }
.dots { display:flex; gap:5px; } .dots i { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.2); }
.dots i.on { background:#ffc23a; } .dots.bonus i.on { background:#ff4b4b; box-shadow:0 0 8px #ff4b4b; }
.vp { min-width:64px; } .vp > span { display:flex; align-items:center; gap:8px; }
.vp b { font-size:30px; font-weight:900; font-style:italic; font-variant-numeric:tabular-nums; }
.vp svg { width:24px; height:24px; }
#sb > .brand { position:absolute; right:0; top:72px; }

/* =================== PLACA (rótulos, eventos, mensajes, créditos) ===================
   Pestaña opcional + cuerpo de 112 px. La pestaña se alinea con la esquina superior del cuerpo inclinado. */
.pw { position:absolute; bottom:72px; filter:drop-shadow(0 12px 20px rgba(0,0,0,.6)); transition:bottom .5s var(--out);
      transform:scale(var(--plz, 1)); transform-origin:0 100%; }
.pw.left { left:96px; } .pw.right { right:96px; transform-origin:100% 100%; }
.pw .clip { clip-path:inset(0 100% 0 0); transition:clip-path .4s var(--in); }
.pw.right .clip { clip-path:inset(0 0 0 100%); }
.pw.on .clip { clip-path:inset(-60px -80px -60px -60px); transition:clip-path .75s var(--out); }
.pw > .brand { position:absolute; right:0; top:calc(100% + 8px); opacity:0; transition:opacity .3s; }
.pw.on > .brand { opacity:1; transition:opacity .4s .5s; }
body.evon #ltW, body.evon #crW, body.evon #arW { bottom:calc(72px + (var(--evh, 160px) + 52px) * var(--plz, 1)); }

.plate { --pc:var(--acc); --pcr:var(--accr); --pon:var(--on); display:flex; flex-direction:column; align-items:flex-start; }
.plate.amarilla { --pc:#ffc61a; --pcr:255,198,26; --pon:#071433; }
.plate.roja      { --pc:#ee1c25; --pcr:238,28,37; --pon:#fff; }
.plate.exclusion { --pc:#2e7dff; --pcr:46,125,255; --pon:#fff; }

.tab { height:46px; margin-left:calc(var(--bh) * var(--tan)); padding:0 26px; display:flex; align-items:center;
       transform:skewX(var(--sk)); transform-origin:0 100%; background:rgba(var(--pcr),var(--pa2)); color:var(--pon);
       box-shadow:0 0 18px rgba(var(--pcr),.6); }
.tab > span { transform:skewX(var(--usk)); font-size:30px; font-weight:900; font-style:italic; letter-spacing:.02em; white-space:nowrap; }
.tab.big { height:84px; padding:0 34px; } .tab.big > span { font-size:86px; line-height:1; }
.tab .pts { font-size:86px; } .tab .ptl { font-size:40px; margin-left:12px; }
.pw.on .tab { animation:tabIn .55s var(--out) .2s both; }
@keyframes tabIn { from { transform:skewX(var(--sk)) translateY(100%); opacity:0; } to { transform:skewX(var(--sk)); opacity:1; } }

.body { position:relative; display:flex; align-items:center; gap:24px; height:var(--bh); min-width:560px; padding:0 34px 0 30px;
        transform:skewX(var(--sk)); transform-origin:0 100%; border:1.5px solid var(--line);
        background:linear-gradient(100deg,rgba(var(--pcr),.30) 0%,rgba(var(--pcr),0) 30%), var(--panel);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 24px rgba(var(--pcr),.22); }
.body::before { content:''; position:absolute; left:-1.5px; top:-1.5px; bottom:-1.5px; width:10px; background:rgba(var(--pcr),var(--pa2)); box-shadow:0 0 18px rgba(var(--pcr),.9); }
.body > * { transform:skewX(var(--usk)); }
.body .icon { width:84px; display:flex; justify-content:center; flex:none; }
.body .icon svg { width:76px; height:76px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.body .icon .x2 { font-size:72px; font-weight:900; font-style:italic; line-height:1; color:#fff; text-shadow:0 0 18px rgba(var(--pcr),.9); }
.body .crest img { display:block; height:82px; max-width:90px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.body .crest { margin-left:auto; padding-left:14px; }
.who { display:flex; align-items:center; gap:20px; }
.num { display:flex; align-items:center; justify-content:center; min-width:60px; height:64px; padding:0 8px; flex:none;
       transform:skewX(var(--sk)); background:var(--white); box-shadow:0 2px 6px rgba(0,0,0,.45); }
.num span { transform:skewX(var(--usk)); color:var(--txtd); font-size:44px; font-weight:900; font-style:italic; font-variant-numeric:tabular-nums; }
.t1 { font-size:46px; font-weight:800; font-style:italic; line-height:1; white-space:nowrap; }
.t2 { margin-top:7px; font-size:26px; font-weight:600; color:var(--mute); line-height:1; white-space:nowrap; }
.lc { text-transform:none; }
/* Cambio: dos filas que ocupan exactamente el alto del cuerpo */
.rows { display:flex; flex-direction:column; justify-content:center; gap:4px; }
.sr { display:flex; align-items:center; gap:16px; height:48px; }
.sr svg { width:30px; height:36px; }
.sr .num { height:44px; min-width:48px; } .sr .num span { font-size:32px; }
.sr .t1 { font-size:36px; min-width:280px; }
.sr .tag { font-size:24px; font-weight:900; font-style:italic; letter-spacing:.04em; }
.sr.out .tag { color:#ff5252; } .sr.in .tag { color:#3fe07a; }

/* =================== ALINEACIÓN =================== */
#lu { position:absolute; left:96px; top:186px; width:540px; filter:drop-shadow(0 14px 24px rgba(0,0,0,.6)); }
#luIn { clip-path:inset(0 0 100% 0); transition:clip-path .45s var(--in); }
#lu.on #luIn { clip-path:inset(-60px -40px -60px -40px); transition:clip-path .9s var(--out); }
.luP { position:relative; background:var(--panel); border:1.5px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.luP::before { content:''; position:absolute; left:-1.5px; top:-1.5px; bottom:-1.5px; width:10px; background:rgba(var(--accr),var(--pa2)); box-shadow:0 0 16px rgba(var(--accr),.85); }
.luh { display:flex; align-items:center; gap:16px; height:88px; padding:0 22px 0 28px; border-bottom:2px solid rgba(var(--accr),.85);
       background:linear-gradient(100deg,rgba(var(--accr),.32),rgba(var(--accr),0) 55%); }
.luh img { height:64px; max-width:70px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.luh .t { flex:1; font-size:44px; font-weight:900; font-style:italic; line-height:1; white-space:nowrap; overflow:hidden; }
.luh .f { height:44px; padding:0 16px; flex:none; } .luh .f span { font-size:28px; font-weight:900; font-style:italic; }
.lub { padding:6px 0; }
.r { display:grid; grid-template-columns:72px 1fr auto; align-items:center; height:39px; padding:0 24px 0 28px; font-size:30px; }
.r:nth-child(even) { background:rgba(255,255,255,.035); }
.r b { font-weight:900; font-style:italic; font-variant-numeric:tabular-nums; }
.r span { font-weight:700; white-space:nowrap; overflow:hidden; } .r em { font-style:normal; font-size:20px; color:var(--mute); font-weight:600; }
.r.s { height:34px; font-size:25px; } .r.s b { color:var(--mute); }
/* Suplentes: en dos columnas, más pequeños y apagados, para que la alineación no baje tanto */
.subs { display:grid; grid-template-columns:1fr 1fr; padding:0 0 4px; }
.subs .r.s { grid-template-columns:44px 1fr; height:29px; padding:0 10px 0 28px; font-size:20px; background:none; }
.subs .r.s span { font-weight:600; color:var(--mute); } .subs .r.s b { font-size:19px; } .subs .r.s em { display:none; }
.sep { margin:6px 24px 2px 28px; font-size:16px; }
.sep { display:flex; align-items:center; gap:14px; margin:8px 24px 4px 28px; font-size:19px; letter-spacing:.14em; color:var(--mute); }
.sep::after { content:''; flex:1; height:1px; background:var(--line); }
.coach { display:flex; align-items:center; gap:14px; height:50px; padding:0 18px 0 28px; border-top:1px solid var(--line); background:rgba(0,0,0,.25); font-size:24px; }
.coach i { font-style:normal; color:var(--mute); } .coach .bar { width:2px; height:22px; background:var(--acc); }
.coach .brand { margin-left:auto; height:28px; }
#lu.on .r { animation:rowIn .5s var(--out) both; animation-delay:calc(var(--i) * 35ms + .35s); }
@keyframes rowIn { from { transform:translateX(-30px); opacity:0; } to { transform:none; opacity:1; } }

/* =================== CAMPO TÁCTICO =================== */
#tc { position:absolute; inset:0; pointer-events:none; }
#pitch { position:absolute; left:410px; top:186px; width:1100px; height:712px; border:2px solid rgba(var(--accr),.85);
         box-shadow:0 0 28px rgba(var(--accr),.3), 0 16px 30px rgba(0,0,0,.6); clip-path:inset(0 100% 0 0); transition:clip-path .45s var(--in); }
#tc.on #pitch { clip-path:inset(-40px); transition:clip-path 1s var(--out); }
#mks { position:absolute; inset:0; }
.mk { position:absolute; display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-29px); opacity:0; }
#tc.on .mk { animation:pop .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(.7s + var(--i) * 60ms); }
@keyframes pop { from { transform:translate(-50%,-29px) scale(.2); opacity:0; } to { transform:translate(-50%,-29px) scale(1); opacity:1; } }
.mk .dot { width:58px; height:58px; border-radius:50%; background:var(--panel); border:3px solid #fff; display:flex; align-items:center; justify-content:center;
           font-size:32px; font-weight:900; font-style:italic; box-shadow:0 0 0 3px var(--c), 0 4px 10px rgba(0,0,0,.5); }
.mk.gk .dot { background:var(--white); color:var(--txtd); }
.mk .pn { margin-top:6px; padding:1px 12px; background:rgba(5,14,36,calc(.95 * var(--pa))); border-left:4px solid var(--acc); font-size:25px; font-weight:700; white-space:nowrap; line-height:1.15; }
#tch { position:absolute; left:410px; top:914px; height:64px; display:flex; gap:3px; opacity:0; transform:translateY(24px); transition:all .5s var(--out); filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
#tc.on #tch { opacity:1; transform:none; transition-delay:.5s; }
#tch .edge { margin-right:4px; } #tch .crestbox { width:84px; } #tch .nm { width:auto; padding:0 34px; }
#tch .fm { padding:0 26px; } #tch .fm span { font-size:38px; font-weight:900; font-style:italic; }

/* =================== PRESENTACIÓN VS =================== */
#vs { position:absolute; left:0; right:0; top:216px; display:flex; flex-direction:column; align-items:center; opacity:0; transition:opacity .4s; filter:drop-shadow(0 14px 24px rgba(0,0,0,.6)); }
#vs.on { opacity:1; }
.vsRow { display:flex; align-items:flex-start; gap:34px; }
.vsT { display:flex; flex-direction:column; align-items:center; gap:10px; transition:transform .9s var(--out); }
.vsT.h { transform:translateX(-140px); } .vsT.a { transform:translateX(140px); } #vs.on .vsT { transform:none; }
.vsC { width:380px; height:300px; }
.vsC::before { content:''; position:absolute; left:-1.5px; top:-1.5px; bottom:-1.5px; width:10px; background:rgba(var(--accr),var(--pa2)); box-shadow:0 0 16px rgba(var(--accr),.85); }
.vsC img { height:240px; max-width:280px; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.vsC .chip { width:130px; height:170px; border-width:7px; }
.vsN { width:380px; height:64px; padding:0 24px; font-size:42px; font-weight:900; font-style:italic; white-space:nowrap; overflow:hidden; }
.vsN::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--c); }
.vsV { align-self:center; margin-top:-70px; width:150px; text-align:center; font-size:130px; font-weight:900; font-style:italic; line-height:1;
       text-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 28px rgba(var(--accr),.7); transform:scale(.3); opacity:0; transition:all .6s cubic-bezier(.2,1.5,.4,1) .35s; }
#vs.on .vsV { transform:none; opacity:1; }
.vsBand { margin-top:26px; display:flex; align-items:center; height:64px; }
.vsBand .bx { padding:0 34px; gap:22px; } .vsBand .bx span { font-size:36px; font-weight:900; font-style:italic; }
.vsBand .sepb { width:3px; height:34px; background:var(--acc); }
.vsBand .edge.el { margin-right:4px; } .vsBand .edge.er { margin-left:4px; }
.vsMeta { display:flex; gap:40px; margin-top:16px; font-size:28px; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.9); }
.vsMeta span { display:flex; align-items:center; gap:12px; } .vsMeta svg { width:28px; height:28px; }
.vsLive { display:flex; align-items:center; gap:24px; margin-top:18px; height:52px; }
.live { padding:0 34px; background:linear-gradient(180deg,#ff3a3a,#c40d14); border-color:rgba(255,255,255,.45); box-shadow:0 0 20px rgba(255,40,40,.55); }
.live span { font-size:32px; font-weight:900; font-style:italic; }
.vsLive .brand { height:40px; }
#vs .vsBand, #vs .vsMeta, #vs .vsLive { opacity:0; transform:translateY(16px); transition:all .5s var(--out); }
#vs.on .vsBand { opacity:1; transform:none; transition-delay:.5s; } #vs.on .vsMeta { opacity:1; transform:none; transition-delay:.65s; }
#vs.on .vsLive { opacity:1; transform:none; transition-delay:.8s; }

/* =================== CRÉDITOS =================== */
#crW .crow, #arW .crow { display:flex; flex-wrap:wrap; gap:6px; max-width:1680px; }
.cri { height:var(--bh); padding:0 30px 0 26px; gap:16px; justify-content:flex-start; }
.cri::before { content:''; position:absolute; left:-1.5px; top:-1.5px; bottom:-1.5px; width:6px; background:rgba(var(--accr),var(--pa2)); box-shadow:0 0 12px rgba(var(--accr),.8); }
.cri svg { width:40px; height:40px; flex:none; }
.cri .t1 { font-size:32px; } .cri .t2 { font-size:21px; margin-top:6px; }
#arW.on .cri { animation:criIn .6s var(--out) both; animation-delay:calc(.2s + var(--i) * 80ms); }
#crW.on .cri { animation:criIn .6s var(--out) both; animation-delay:calc(.2s + var(--i) * 80ms); }
@keyframes criIn { from { opacity:0; translate:-30px 0; } to { opacity:1; translate:0 0; } }

/* =================== PATROCINADOR JUNTO AL MARCADOR =================== */
.spon { position:absolute; left:calc(100% + 10px); top:0; padding:0 20px; display:none; }
#sb .row { position:relative; }
body.spon-on .spon { display:flex; }
.spon > div { display:flex; flex-direction:column; align-items:center; gap:1px; }
.spon img { height:38px; max-width:150px; object-fit:contain; }
.spon .sl { font-size:13px; font-weight:700; letter-spacing:.14em; color:#5a6a88; line-height:1; }

/* Posesión (baloncesto) y exclusiones (balonmano) en la tira */
#posB.low .clkp { color:#ff4b4b; }
.clkp { font-size:30px; font-weight:900; font-style:italic; font-variant-numeric:tabular-nums; min-width:34px; text-align:center; }
.xs { display:flex; gap:3px; height:100%; }
.xs .bx { padding:0 14px; gap:8px; background:linear-gradient(180deg,#3d86ff,#1650cf 55%,#0b2f88); }
.xs .bx b { font-size:22px; font-weight:900; font-style:italic; } .xs .bx em { font-style:normal; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; }

/* =================== MOSCA: DIRECTO / REPETICIÓN =================== */
#mo { position:absolute; top:54px; right:96px; height:48px; display:flex; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
      opacity:0; transform:translateY(-20px); transition:all .45s var(--out); }
#mo.on { opacity:1; transform:none; }
#mo .bx { padding:0 22px; gap:12px; }
#mo .bx span { font-size:28px; font-weight:900; font-style:italic; letter-spacing:.02em; }
#mo.mlive .bx { background:linear-gradient(180deg,#ff3a3a,#c40d14); border-color:rgba(255,255,255,.45); }
#mo .dotl { width:12px; height:12px; border-radius:50%; background:#fff; animation:blink 1.4s infinite; }
@keyframes blink { 50% { opacity:.25; } }
#mo.mrep .bx { background:var(--acc); color:var(--on); } #mo .bx svg { width:26px; height:26px; }

/* =================== CORTINILLA =================== */
#st { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:50; }
#st i { position:absolute; top:-5%; bottom:-5%; left:-4300px; width:4200px; transform:skewX(var(--sk)); }
#st .s1 { background:var(--acc); } #st .s2 { background:linear-gradient(180deg,#1c4086 0%,#0a1b42 50%,#040c21 100%); margin-left:-110px; }
#st:not(.run) i { visibility:hidden; }
#st .lg { position:absolute; left:50%; top:50%; height:180px; translate:-50% -50%; opacity:0; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
#st.run .s1 { animation:sweep 1.25s cubic-bezier(.65,0,.35,1) both; }
#st.run .s2 { animation:sweep 1.25s cubic-bezier(.65,0,.35,1) .07s both; }
#st.run .lg { animation:stlg 1.25s linear both; }
@keyframes sweep { from { transform:translateX(0) skewX(var(--sk)); } to { transform:translateX(6500px) skewX(var(--sk)); } }
@keyframes stlg { 0%,36% { opacity:0; scale:.85; } 46%,56% { opacity:1; scale:1; } 64%,100% { opacity:0; scale:1.05; } }

/* =================== PENALTIS =================== */
.pens { display:flex; flex-direction:column; justify-content:center; gap:8px; }
.pr { display:flex; align-items:center; gap:14px; height:44px; }
.pr img { height:38px; width:42px; object-fit:contain; } .pr .chip { width:22px; height:30px; }
.pr .t1 { font-size:32px; width:92px; }
.pr .ps { display:flex; gap:8px; }
.pr .ps i { width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; }
.pr .ps i.g { background:#2fd46a; border-color:#fff; } .pr .ps i.f { background:#ee1c25; border-color:#fff; }
.pr .ps i svg { width:16px; height:16px; }
.pr .tot { margin-left:14px; min-width:50px; height:40px; } .pr .tot span { font-size:32px; font-weight:900; font-style:italic; }

/* =================== PANTALLAS COMPLETAS ===================
   Paneles grandes: rectangulares con borde de acento (como la alineación); pestaña inclinada del sistema. */
#fs { position:absolute; inset:108px 0 108px; display:flex; justify-content:center; align-items:center; pointer-events:none; }
.fsF { --pc:var(--acc); --pcr:var(--accr); --pon:var(--on); width:1320px; display:flex; flex-direction:column; align-items:flex-start; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
       clip-path:inset(0 0 100% 0); transition:clip-path .45s var(--in); }
#fs.on .fsF { clip-path:inset(-80px -60px -80px -60px); transition:clip-path .9s var(--out); }
.fsF .tab { margin-left:0; height:64px; padding:0 34px; } .fsF .tab > span { font-size:44px; }
.fsB { position:relative; width:100%; background:var(--panel); border:1.5px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); padding:34px 56px 30px 60px; }
.fsB::before { content:''; position:absolute; left:-1.5px; top:-1.5px; bottom:-1.5px; width:10px; background:rgba(var(--accr),var(--pa2)); box-shadow:0 0 16px rgba(var(--accr),.85); }
.fsFoot { width:100%; display:flex; align-items:center; gap:18px; height:52px; padding:0 22px 0 60px; background:rgba(3,9,26,var(--pa)); border:1.5px solid var(--line); border-top:none; font-size:24px; color:var(--mute); }
.fsFoot .bar { width:2px; height:22px; background:var(--acc); } .fsFoot .brand { margin-left:auto; height:32px; }
body.fson #sb, body.fson .pw, body.fson #lu, body.fson #tc, body.fson #vs { opacity:0 !important; transition:opacity .3s; }
#fs .fsB > * { opacity:0; transform:translateY(14px); }
#fs.on .fsB > * { animation:fsIn .55s var(--out) both; animation-delay:calc(.35s + var(--i, 0) * 60ms); }
@keyframes fsIn { to { opacity:1; transform:none; } }

/* Resultado */
.fsScore { display:flex; align-items:center; justify-content:center; gap:4px; height:150px; }
.fsScore .crestbox { width:170px; height:150px; } .fsScore .crestbox img { height:118px; }
.fsScore .nm { width:330px; height:96px; font-size:46px; }
.fsScore .sc { min-width:130px; padding:0 22px; height:150px; font-size:110px; }
.fsSec { margin-top:30px; }
.scorers { display:grid; grid-template-columns:1fr 1fr; gap:0 80px; }
.scorers div { display:flex; align-items:center; gap:12px; font-size:30px; height:42px; }
.scorers div:nth-child(odd) { justify-content:flex-end; }
.scorers svg { width:26px; height:26px; } .scorers em { font-style:normal; color:var(--mute); text-transform:none; }
table.grid { width:100%; border-collapse:collapse; font-size:30px; }
.grid th { font-size:21px; font-weight:600; color:var(--mute); letter-spacing:.08em; height:38px; text-align:center; border-bottom:1.5px solid var(--line); }
.grid td { height:50px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; border-bottom:1px solid rgba(130,178,255,.12); }
.grid td.l, .grid th.l { text-align:left; } .grid td.tt { font-weight:900; font-style:italic; font-size:36px; }
.grid tr.me td { background:rgba(var(--accr),.18); } .grid tr.me td:first-child { box-shadow:inset 6px 0 0 var(--acc); }
.grid td .tm { display:flex; align-items:center; gap:14px; } .grid td .tm img { height:34px; width:38px; object-fit:contain; }
/* Clasificación: compacta */
.grid.tb td { height:38px; font-size:27px; } .grid.tb td.l { padding-left:10px; }
/* Estadísticas */
.stH { display:grid; grid-template-columns:1fr 1fr; margin-bottom:18px; }
.stH > div { display:flex; align-items:center; gap:16px; font-size:40px; font-weight:900; font-style:italic; }
.stH > div:last-child { justify-content:flex-end; } .stH img { height:64px; width:70px; object-fit:contain; }
.stR { display:grid; grid-template-columns:110px 1fr 280px 1fr 110px; align-items:center; height:60px; gap:16px; }
.stR.tight { height:48px; } .stR.tight .v { font-size:34px !important; }
.stR .v { font-size:40px; font-weight:900; font-style:italic; font-variant-numeric:tabular-nums; } .stR .v.r { text-align:right; }
.stR .v.lead { color:var(--acc); }
.stR .lab { text-align:center; font-size:26px; color:var(--mute); font-weight:700; }
.stR .bar { height:14px; background:rgba(255,255,255,.08); display:flex; transform:skewX(var(--sk)); }
.stR .bar.h { justify-content:flex-end; } .stR .bar i { display:block; height:100%; background:var(--white); }
.stR .bar.h i { background:var(--hc); box-shadow:0 0 0 1px rgba(255,255,255,.5); } .stR .bar.a i { background:var(--ac); box-shadow:0 0 0 1px rgba(255,255,255,.5); }
/* Resultados de la jornada */
.jr { display:grid; grid-template-columns:1fr 170px 1fr; align-items:center; height:62px; gap:22px; border-bottom:1px solid rgba(130,178,255,.12); }
.jr.me { background:rgba(var(--accr),.16); box-shadow:inset 6px 0 0 var(--acc); }
.jr .l { text-align:right; font-size:32px; font-weight:800; } .jr .v { font-size:32px; font-weight:800; }
.jr .bx { height:46px; } .jr .bx span { font-size:32px; font-weight:900; font-style:italic; font-variant-numeric:tabular-nums; }
/* Patrocinadores */
.pg { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.pg .bx { width:260px; height:140px; } .pg img { max-width:200px; max-height:100px; object-fit:contain; }

@media (prefers-reduced-motion:reduce) { * { transition-duration:.01s !important; animation-duration:.01s !important; } }

/* ---------- Transparencias ----------
   --pa  (primer deslizador): fondos de las cajas y césped del campo táctico.
   --pa2 (segundo deslizador): tanteo, dorsales, pestañas y barras de color.
   Siempre opacos: cortinilla (tiene que tapar al cortar), mosca de repetición y cajas de patrocinadores. */
#pitch > svg > rect { fill-opacity:var(--pa); }
.spon, .pg .bx.w { background:linear-gradient(180deg,#ffffff 0%,#edf1f7 55%,#cfd7e4 100%); }