/* ===== sala de control · tubo encendido (oscuro por defecto) ===== */
:root{
  --bg:#050706; --room:#0A0F0C; --room-hi:#101816;
  --panel:#0A100D; --panel-2:#0A120F; --panel-3:#0C1613; --sunk:#070C0A;
  --line:#17261F; --line-2:#22382E; --edge:#1A2A22;
  --phos:#3BF08C; --phos-dim:#2A8557; --phos-soft:#1B4E34; --phos-hi:#9BFFCB;
  --amber:#FFB020; --amber-dim:#9A6A12;
  --tally:#FF4438; --cyan:#4FE8FF; --magenta:#FF4FD8;
  --bone:#D9D3BE; --mute:#5C7A6C;
  --on-phos:#04120A; --on-amber:#160C00;
  --scan:rgba(0,0,0,.34); --scan-gap:rgba(0,0,0,0);
  --inner:inset 0 0 70px rgba(59,240,140,.05);
  --glow-p:0 0 14px rgba(59,240,140,.42);
  --glow-a:0 0 14px rgba(255,176,32,.38);
  --glow-t:0 0 14px rgba(255,68,56,.5);
  --roll:rgba(155,255,203,.05);
  --noise-op:.045; --noise-blend:screen; --flick:rgba(155,255,203,.02);
  --vig:rgba(0,0,0,.62);
  --mine-bg:#0C1410; --sel-bg:#0D1A14; --shadow:0 20px 50px -34px #000;
  --logo-glow:rgba(59,240,140,.5); --cliply-pink:#ffb8d1; --ctl:34px;
}
/* ===== tubo de día: papel de planilla, fósforo apagado ===== */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#D9D6CA; --room:#E6E4D8; --room-hi:#F2F0E6;
    --panel:#F4F2EA; --panel-2:#EBE8DD; --panel-3:#E3E0D3; --sunk:#F0EDE3;
    --line:#D0CCBC; --line-2:#B4AF9E; --edge:#A9A492;
    --phos:#15503A; --phos-dim:#6A7F72; --phos-soft:#BCC8BE; --phos-hi:#0D3A29;
    --amber:#8F5307; --amber-dim:#B08F55;
    --tally:#A32B1D; --cyan:#155C6B; --magenta:#7E2C6E;
    --bone:#17241E; --mute:#6A796F;
    --on-phos:#F3F0E5; --on-amber:#F3F0E5;
    --scan:rgba(23,36,30,.07); --scan-gap:rgba(0,0,0,0);
    --inner:inset 0 0 60px rgba(11,115,67,.05);
    --glow-p:none; --glow-a:none; --glow-t:none;
    --roll:rgba(23,36,30,.03);
    --noise-op:.05; --noise-blend:multiply; --flick:rgba(23,36,30,.012);
    --vig:rgba(60,52,30,.22);
    --mine-bg:#EDE7D2; --sel-bg:#E4EDE5; --shadow:0 18px 44px -34px rgba(30,40,30,.55);
    --logo-glow:rgba(11,115,67,.22); --cliply-pink:#D4557F;
  }
}
:root[data-theme="light"]{
  --bg:#D9D6CA; --room:#E6E4D8; --room-hi:#F2F0E6;
  --panel:#F4F2EA; --panel-2:#EBE8DD; --panel-3:#E3E0D3; --sunk:#F0EDE3;
  --line:#D0CCBC; --line-2:#B4AF9E; --edge:#A9A492;
  --phos:#15503A; --phos-dim:#6A7F72; --phos-soft:#BCC8BE; --phos-hi:#0D3A29;
  --amber:#8F5307; --amber-dim:#B08F55;
  --tally:#A32B1D; --cyan:#155C6B; --magenta:#7E2C6E;
  --bone:#17241E; --mute:#6A796F;
  --on-phos:#F3F0E5; --on-amber:#F3F0E5;
  --scan:rgba(23,36,30,.07); --scan-gap:rgba(0,0,0,0);
  --inner:inset 0 0 60px rgba(11,115,67,.05);
  --glow-p:none; --glow-a:none; --glow-t:none;
  --roll:rgba(23,36,30,.03);
  --noise-op:.05; --noise-blend:multiply; --flick:rgba(23,36,30,.012);
  --vig:rgba(60,52,30,.22);
  --mine-bg:#EDE7D2; --sel-bg:#E4EDE5; --shadow:0 18px 44px -34px rgba(30,40,30,.55);
  --logo-glow:rgba(11,115,67,.22); --cliply-pink:#D4557F;
}

/* las lineas van SIEMPRE de fondo, nunca encima del contenido ni de los escudos */
:root{--scanlines:repeating-linear-gradient(to bottom, var(--scan) 0 1px, var(--scan-gap) 1px 3px)}

*{box-sizing:border-box}
html{background:var(--bg); height:100%; overflow:hidden}
body{
  margin:0; height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  color:var(--bone); font-size:14px; line-height:1.5;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  background-image:var(--scanlines), radial-gradient(120% 80% at 50% 0%, var(--room-hi) 0%, var(--room) 45%, var(--bg) 100%);
  background-attachment:fixed;
}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.01em}
button,input,select{font:inherit; color:inherit; background:none; border:0}
button{cursor:pointer; -webkit-tap-highlight-color:transparent}
img{max-width:100%}
:focus-visible{outline:1px solid var(--phos); outline-offset:2px}
.mono,.n{font-variant-numeric:tabular-nums}
.lab{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--phos-dim)}
.seg7{font-family:VT323,"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:.02em}

/* ===== capas CRT (sin lineas: solo barrido, grano y viñeta) ===== */
.fx,.vig,.noise{position:fixed; inset:0; pointer-events:none}
.fx{z-index:200; overflow:hidden}
.fx::after{content:""; position:absolute; left:0; right:0; height:34%;
  background:linear-gradient(var(--roll), transparent 70%); animation:roll 9s linear infinite}
@keyframes roll{from{transform:translateY(-40%)} to{transform:translateY(300%)}}
.vig{z-index:190; background:radial-gradient(125% 95% at 50% 42%, transparent 52%, var(--vig) 100%)}
.noise{z-index:195; opacity:var(--noise-op); mix-blend-mode:var(--noise-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
body::after{content:""; position:fixed; inset:0; z-index:185; pointer-events:none;
  background:var(--flick); animation:flick 5.2s steps(1) infinite}
@keyframes flick{0%,96%{opacity:0} 97%{opacity:1} 98%{opacity:0} 99%{opacity:.6} 100%{opacity:0}}

/* ===== barras SMPTE ===== */
.bars{height:4px; display:grid; grid-template-columns:repeat(7,1fr)}
.bars i{display:block}
.bars i:nth-child(1){background:#C9C9C9} .bars i:nth-child(2){background:#C9C900}
.bars i:nth-child(3){background:#00C9C9} .bars i:nth-child(4){background:#00C900}
.bars i:nth-child(5){background:#C900C9} .bars i:nth-child(6){background:#C90000}
.bars i:nth-child(7){background:#0000C9}

/* ===== deck ===== */
.deck{flex:none; z-index:60; border-bottom:1px solid var(--line-2);
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel-2), var(--sunk));
  box-shadow:0 10px 30px -22px rgba(0,0,0,.8)}
.deck-in{display:flex; align-items:center; gap:12px; padding:9px 16px}
.wm{display:flex; align-items:center; gap:10px; white-space:nowrap}
.logo{width:31px; height:31px; flex:none; color:var(--phos-hi); filter:drop-shadow(0 0 7px var(--logo-glow))}
.logo .slits{animation:slit 5.5s linear infinite}
@keyframes slit{from{transform:translateY(0)} to{transform:translateY(9px)}}
.wm .nm{display:flex; align-items:baseline; gap:11px}
.byline{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--mute); opacity:.9;
  padding-right:11px; margin-right:2px; border-right:1px solid var(--line-2)}
.byline:hover{opacity:1; color:var(--bone)}
.byline span{font-size:9px; letter-spacing:.16em; text-transform:uppercase}
/* Lockup de Cliply con el hover de su web: glitch RGB-split en el wordmark
   (bx-glitch) + tres ondas que suben del iso (bx-signal). Portado de
   cliply/components/broadcast/{chrome.tsx,broadcast.css}. */
.cliply{position:relative; display:inline-block; line-height:0}
.cliply .lockup{display:block; width:auto; height:100%}
.cliply.sm{height:13px}
.cliply.md{height:17px}
/* un <svg> con viewBox e inset:0 resuelve el ancho por su ratio, no estirado:
   la capa quedaba de 29px y el glitch no llegaba a las letras */
.cliply .gl{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none;
  --cliply-pink:currentColor}
.cliply .ga{color:#ff4d6d}
.cliply .gb{color:#00d0ff}
.cliply .ondas{position:absolute; left:-3.18%; top:-16.7%; width:25.4%; height:133.3%; overflow:visible}
.onda{opacity:0; transform-box:fill-box; transform-origin:50% 100%}

@keyframes cliply-glitch{
  0%,100%{transform:translate(0); clip-path:inset(0)}
  20%{transform:translate(-2px,1px); clip-path:inset(20% 0 40% 0)}
  40%{transform:translate(2px,-1px); clip-path:inset(60% 0 10% 0)}
  60%{transform:translate(-1px,0); clip-path:inset(10% 0 70% 0)}
  80%{transform:translate(1px,1px); clip-path:inset(40% 0 30% 0)}
}
@keyframes cliply-signal{
  0%{opacity:0; transform:translateY(7px) scale(.55)}
  25%{opacity:.9}
  100%{opacity:0; transform:translateY(-7px) scale(1.15)}
}
.byline:hover .ga, .sign-cliply:hover .ga{opacity:1; animation:cliply-glitch .4s steps(2) infinite}
.byline:hover .gb, .sign-cliply:hover .gb{opacity:1; animation:cliply-glitch .4s steps(2) infinite reverse}
.byline:hover .onda, .sign-cliply:hover .onda{animation:cliply-signal .5s ease-out infinite}
.byline:hover .o2, .sign-cliply:hover .o2{animation-delay:.13s}
.byline:hover .o3, .sign-cliply:hover .o3{animation-delay:.26s}
@media (prefers-reduced-motion:reduce){
  .byline:hover .gl, .sign-cliply:hover .gl{opacity:0; animation:none}
}
.wm .nm b{font-size:26px; line-height:1}
.wm b{font-family:VT323,monospace; font-weight:400; font-size:27px; color:var(--phos-hi);
  text-shadow:var(--glow-p); letter-spacing:.04em}
.wm span{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--phos-dim)}
@keyframes blip{0%,100%{opacity:1} 50%{opacity:.15}}
.reloj{display:inline-flex; align-items:center; gap:8px; height:var(--ctl); padding:0 2px}
.rec{width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none}
.rec.on{background:var(--tally); box-shadow:var(--glow-t); animation:blip 1.3s ease-in-out infinite}
.clock{font-family:VT323,monospace; font-size:22px; line-height:1; color:var(--amber); letter-spacing:.06em;
  text-shadow:var(--glow-a); font-variant-numeric:tabular-nums}

/* los tres controles del deck comparten alto, borde y fondo */
.kbtn, .clubbtn, .clubx, .deck .arrow{height:var(--ctl); display:inline-flex; align-items:center;
  border:1px solid var(--line-2); background:var(--sunk); color:var(--mute)}
.kbtn:hover, .clubbtn:hover, .deck .arrow:hover{border-color:var(--phos-dim); color:var(--phos)}
.kbtn{margin-left:auto; gap:9px; padding:0 11px; font-size:12px}
.kbtn .ico{width:14px; height:14px; display:none; flex:none}
.kbtn kbd{font-size:10px; border:1px solid var(--line-2); padding:1px 5px; color:var(--phos-dim); line-height:1.4}
.deck .arrow{width:var(--ctl); justify-content:center; padding:0}
.deck .arrow svg{width:16px; height:16px}
#themeBtn{font-size:14px}
.clubbtn{gap:8px; padding:0 11px 0 5px; font-size:12px; max-width:210px}
.clubwrap{display:inline-flex; align-items:center}
.clubwrap .clubbtn{border-right:0}
.clubx{width:var(--ctl); justify-content:center; padding:0; font-size:15px}
.clubx:hover{color:var(--tally); border-color:var(--tally)}
.clubbtn .cn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}

/* escudos: fondo transparente, sin lineas, sin marco */
.cr{width:22px; height:22px; object-fit:contain; flex:none; background:none; border:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.cr.ph{width:22px; height:22px; display:grid; place-items:center; font-size:9px; color:var(--phos-dim);
  font-family:VT323,monospace; border:1px solid var(--line); filter:none}

/* ===== layout ===== */
.shell{flex:1; min-height:0; position:relative; display:grid; grid-template-columns:272px minmax(0,1fr)}
aside{height:100%; min-height:0; display:flex; flex-direction:column;
  border-right:1px solid var(--line-2);
  background-image:var(--scanlines), linear-gradient(180deg, var(--sunk), var(--bg))}
.aside-h{padding:12px 12px 10px; display:grid; gap:9px; border-bottom:1px solid var(--line)}
#modoTorneos{display:grid; gap:9px}
.modeseg button[aria-pressed="true"]{background:var(--amber); color:var(--on-amber); box-shadow:var(--glow-a)}
.clubcard{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 9px; align-items:center;
  padding:9px 10px; border:1px solid var(--line-2); background:var(--panel-2)}
.clubcard .cr{width:28px; height:28px}
.clubcard .txt{min-width:0}
.clubcard b{display:block; font-size:12.5px; color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.clubcard .acciones{grid-column:1/-1; display:flex; gap:6px}
.clubcard .cambiar{flex:1; border:1px solid var(--line); padding:5px 4px; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--phos-dim); text-align:center}
.clubcard .cambiar:hover{color:var(--phos); border-color:var(--phos-dim)}
.clubcard .quitar{color:var(--mute)}
.clubcard .quitar:hover{color:var(--tally); border-color:var(--tally)}
.trow .pos{font-family:VT323,monospace; font-size:15px; color:var(--amber); flex:none}
.rackname{display:flex; align-items:center; gap:8px}
.rackname::after{content:""; flex:1; height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 8px)}
.seg{display:flex; border:1px solid var(--line-2)}
.seg button{flex:1; padding:7px 0; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}
.seg button + button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--phos); color:var(--on-phos); font-weight:600; box-shadow:var(--glow-p)}
/* selector de categoría propio: el <select> nativo dibuja el menú del sistema
   y rompe el tubo */
.pickcat{position:relative; display:block}
.catbtn{display:flex; align-items:center; gap:8px; width:100%; background:var(--sunk);
  border:1px solid var(--line-2); color:var(--phos); padding:7px 10px; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; text-align:left}
.catbtn:hover{border-color:var(--phos-dim)}
.catbtn[aria-expanded="true"]{border-color:var(--phos); box-shadow:0 0 0 1px var(--phos-soft)}
.catbtn .catnom{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.catbtn .catn{font-family:VT323,monospace; font-size:16px; letter-spacing:0; color:var(--amber); line-height:1}
.catbtn .flecha{color:var(--phos-dim); font-size:10px; transition:transform .15s ease}
.catbtn[aria-expanded="true"] .flecha{transform:rotate(180deg)}

.catmenu{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; max-height:min(52vh,340px);
  overflow-y:auto; border:1px solid var(--phos-soft); scrollbar-width:thin;
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel-2), var(--sunk));
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85), var(--inner)}
.catopt{display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; text-align:left;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); position:relative}
.catopt + .catopt{border-top:1px solid var(--line)}
.catopt:hover, .catopt[data-foco="1"]{background:var(--panel-3); color:var(--phos)}
.catopt[aria-selected="true"]{color:var(--phos-hi); text-shadow:var(--glow-p)}
.catopt[aria-selected="true"]::before{content:"›"; position:absolute; left:2px; color:var(--phos)}
.catopt .n{margin-left:auto; font-family:VT323,monospace; font-size:16px; letter-spacing:0; color:var(--amber-dim)}
.catopt[aria-selected="true"] .n{color:var(--amber)}

/* ===== vista transversal del club ===== */
.xhead{display:flex; align-items:center; gap:14px; padding:16px 16px}
.xhead .cr{width:44px; height:44px}
.xhead h2{font-family:VT323,monospace; font-size:32px; line-height:1; color:var(--phos-hi); text-shadow:var(--glow-p);
  text-transform:uppercase; font-weight:400}
.xhead .sub{color:var(--mute); font-size:11.5px; margin-top:3px}
.xhead .pick-otro{margin-left:auto}
.day{display:flex; align-items:center; gap:9px; padding:8px 13px; background:var(--panel-2);
  border-top:1px solid var(--line); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber)}
.day .n{margin-left:auto; color:var(--mute); letter-spacing:.12em}
.x{display:grid; grid-template-columns:56px 96px minmax(0,1fr) 78px 124px; gap:11px; align-items:center;
  padding:7px 12px; width:100%; text-align:left; border-top:1px solid var(--line); position:relative}
.x:hover{background:var(--panel-3)}
.x .hora{font-family:VT323,monospace; font-size:17px; color:var(--amber); line-height:1}
.x .catchip{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--phos-dim);
  border:1px solid var(--line-2); padding:3px 6px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.x .rival{display:flex; align-items:center; gap:9px; min-width:0}
.x .rival .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px}
.x .loc{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); text-align:center}
.x .loc.casa{color:var(--phos)}
.x .cancha{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right}
.x .res{font-family:VT323,monospace; font-size:20px; text-align:center; color:var(--amber); text-shadow:var(--glow-a)}
.x .res.w{color:var(--phos-hi); text-shadow:var(--glow-p)}
.x .res.l{color:var(--mute); text-shadow:none}
.xpos{display:grid; grid-template-columns:104px minmax(0,1fr) 52px 52px 78px; gap:11px; align-items:center;
  padding:7px 12px; border-top:1px solid var(--line); font-size:12.5px; width:100%; text-align:left}
.xpos:hover{background:var(--panel-3)}
.xpos .p{font-family:VT323,monospace; font-size:20px; color:var(--phos); text-align:center}
.xpos .pts{font-family:VT323,monospace; font-size:20px; color:var(--amber); text-align:center}
.xpos .tn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}

.filter{display:flex; align-items:center; gap:8px; border:1px solid var(--line-2); padding:6px 9px; background:var(--sunk)}
.filter input{width:100%; font-size:12.5px; color:var(--phos)}
.filter input::placeholder{color:var(--mute)}
.tlist{overflow-y:auto; padding:6px 8px 30px; counter-reset:ch; scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent}
.tgroup{padding:14px 6px 6px; position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:7px;
  background:linear-gradient(180deg, var(--sunk) 70%, transparent)}
.tgroup::after{content:""; flex:1; height:1px; background:var(--line)}
.trow{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; width:100%;
  text-align:left; padding:6px 9px 6px 36px; counter-increment:ch; border:1px solid transparent}
.trow::before{content:counter(ch,decimal-leading-zero); position:absolute; left:8px; top:50%;
  transform:translateY(-50%); font-family:VT323,monospace; font-size:17px; color:var(--phos-soft)}
.trow:hover{background:var(--panel-2); border-color:var(--line)}
.trow[aria-current="true"]{background:var(--sel-bg); border-color:var(--phos-soft)}
.trow[aria-current="true"]::before{color:var(--amber)}
.trow[aria-current="true"] .tn{color:var(--phos-hi); text-shadow:var(--glow-p)}
.trow .tn{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}
.st{width:7px; height:7px; border-radius:50%; background:var(--line-2); flex:none}
.st.on{background:var(--tally); box-shadow:var(--glow-t)}
main{min-width:0; height:100%; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 18px 26px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
main > *{flex:none; min-width:0}
main section > *{min-width:0}
.scrim{position:absolute; inset:0; z-index:65; background:rgba(3,6,5,.6); opacity:0; pointer-events:none;
  transition:opacity .18s ease}
.scrim[data-open="1"]{opacity:1; pointer-events:auto}

/* ===== pantalla ===== */
.screen{position:relative; border:1px solid var(--edge); border-radius:10px; overflow:hidden;
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel), var(--sunk));
  box-shadow:var(--inner), var(--shadow)}
.mon{display:flex; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid var(--line);
  background:var(--panel-2); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--phos-dim)}
.mon .r{margin-left:auto; color:var(--mute)}

/* ===== ident ===== */
.ident{padding:16px 18px 0}
.ident .eyebrow{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.glitch{position:relative; display:inline-block; font-family:VT323,monospace; font-weight:400;
  font-size:clamp(28px,3.8vw,46px); line-height:1; letter-spacing:.01em; color:var(--phos-hi);
  text-shadow:var(--glow-p); text-transform:uppercase}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; left:0; top:0; pointer-events:none; opacity:0}
.glitch::before{color:var(--cyan); animation:g1 7s steps(1) infinite}
.glitch::after{color:var(--magenta); animation:g2 7s steps(1) infinite}
@keyframes g1{0%,90%{opacity:0; transform:none}
  91%{opacity:.85; transform:translate(-3px,1px); clip-path:inset(0 0 58% 0)}
  93%{opacity:0} 95%{opacity:.7; transform:translate(2px,-2px); clip-path:inset(62% 0 0 0)} 96%,100%{opacity:0}}
@keyframes g2{0%,90%{opacity:0; transform:none}
  91.5%{opacity:.8; transform:translate(3px,-1px); clip-path:inset(48% 0 22% 0)}
  93.5%{opacity:0} 95.5%{opacity:.6; transform:translate(-2px,2px); clip-path:inset(10% 0 70% 0)} 97%,100%{opacity:0}}
.caret{display:inline-block; width:.5em; height:1em; background:var(--phos); vertical-align:-.08em;
  margin-left:.12em; animation:caret 1.05s steps(1) infinite; box-shadow:var(--glow-p)}
@keyframes caret{0%,50%{opacity:1} 51%,100%{opacity:0}}
.meta{display:flex; gap:14px; flex-wrap:wrap; margin-top:11px; font-size:11px; color:var(--mute)}
.meta b{color:var(--phos); font-weight:500}
.chipline{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.chip{border:1px solid var(--line-2); padding:5px 10px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); background:var(--sunk)}
.chip:hover{border-color:var(--phos-dim); color:var(--phos)}
.chip[aria-pressed="true"]{background:var(--phos); border-color:var(--phos); color:var(--on-phos); font-weight:600}
.tabs{display:flex; margin:14px 0 0; border-top:1px solid var(--line); counter-reset:chsel;
  overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative; padding:10px 14px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); border-right:1px solid var(--line)}
.tabs button::before{content:"CH0" counter(chsel) " "; counter-increment:chsel; color:var(--phos-soft)}
.tabs button:hover{color:var(--phos); background:var(--panel-2)}
.tabs button[aria-selected="true"]{color:var(--on-phos); background:var(--phos); font-weight:600}
.tabs button[aria-selected="true"]::before{color:var(--on-phos); opacity:.65}

/* ===== franja mi club — OJO: .mine la usa la fila de la tabla, no reusar ===== */
.clubstrip{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line-2);
  border-left:2px solid var(--amber); background-image:var(--scanlines), linear-gradient(var(--panel-2), var(--panel-2))}
.clubstrip .cr{width:32px; height:32px}
.clubstrip .txt{min-width:0; font-size:12.5px; color:var(--bone)}
.clubstrip .txt b{color:var(--amber); font-weight:500}
.clubstrip .go{margin-left:auto; color:var(--phos); font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.clubstrip .go:hover{text-shadow:var(--glow-p)}

/* ===== scrubber ===== */
.scrub{position:sticky; top:-16px; z-index:25; display:flex; align-items:center; gap:9px; padding:8px 10px;
  border:1px solid var(--line-2); background-image:var(--scanlines), linear-gradient(var(--sunk), var(--sunk));
  box-shadow:0 12px 24px -20px rgba(0,0,0,.8)}
.scrub .rail{display:flex; gap:4px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  padding:2px 0; min-width:0; flex:1}
.scrub .rail::-webkit-scrollbar{display:none}
.fk{flex:none; min-width:32px; padding:4px 5px; font-family:VT323,monospace; font-size:16px; line-height:1;
  color:var(--phos-soft); border:1px solid var(--line); background:var(--panel); text-align:center}
.fk:hover{color:var(--phos); border-color:var(--phos-dim)}
.fk.played{color:var(--phos-dim)}
.fk.ancho{min-width:auto; padding:6px 11px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase}
.fk[aria-current="true"]{background:var(--amber); border-color:var(--amber); color:var(--on-amber); box-shadow:var(--glow-a)}
.arrow{flex:none; width:30px; height:30px; border:1px solid var(--line-2); color:var(--mute); background:var(--panel)}
.arrow:hover:not(:disabled){border-color:var(--phos-dim); color:var(--phos)}
.arrow:disabled{opacity:.3}

/* ===== partidos ===== */
.card{border:1px solid var(--edge); border-radius:10px; overflow:hidden;
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel), var(--sunk)); box-shadow:var(--inner)}
.card + .card{margin-top:14px}
.card-h{display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--line);
  background:var(--panel-2); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--phos-dim)}
.m{display:grid; grid-template-columns:88px minmax(0,1fr) 84px minmax(0,1fr) 140px; gap:11px; align-items:center;
  padding:7px 12px; width:100%; text-align:left; position:relative}
.card .m{border-top:1px solid var(--line)}
.card-h + .m{border-top:0}
.m::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent}
.m:hover{background:var(--panel-3)}
.m:hover::before{background:var(--phos-soft)}
.m .time{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.m .side{display:flex; align-items:center; gap:9px; min-width:0}
.m .side.h{flex-direction:row-reverse; text-align:right}
.m .nm{font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}
.m.done .win .nm{color:var(--phos-hi); text-shadow:var(--glow-p); font-weight:600}
.m.done .lose .nm{color:var(--mute)}
.m .res{font-family:VT323,monospace; font-size:25px; line-height:.9; text-align:center; color:var(--amber);
  text-shadow:var(--glow-a); font-variant-numeric:tabular-nums}
.m .res small{font-size:13px; color:var(--amber-dim)}
.m .res.soon{font-size:15px; color:var(--mute); text-shadow:none; letter-spacing:.06em}
.m.live .res{color:var(--tally); text-shadow:var(--glow-t)}
.m.live::before{background:var(--tally)}
.m .venue{font-size:10px; letter-spacing:.06em; color:var(--mute); text-align:right; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m.ismine{background:var(--mine-bg)}
.m.ismine::before{background:var(--amber)}
.livetag{display:inline-flex; align-items:center; gap:6px; color:var(--tally); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:var(--glow-t);
  animation:blip 1.3s ease-in-out infinite}
.sheet{display:flex; gap:16px; flex-wrap:wrap; align-items:center; padding:9px 13px; margin:0;
  border-top:1px dashed var(--line-2); background:var(--sunk); font-size:11px; color:var(--mute)}
.sheet a{color:var(--phos); text-decoration:none; letter-spacing:.1em; text-transform:uppercase; font-size:10px}
.sheet a:hover{text-shadow:var(--glow-p)}

/* ===== tabla ===== */
.tw{border:1px solid var(--edge); border-radius:10px; overflow-x:auto;
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel), var(--sunk))}
table{border-collapse:collapse; width:100%; min-width:660px}
th,td{height:34px; padding:0 8px; text-align:right; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums}
th{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:400; height:32px;
  border-bottom:1px solid var(--line-2); background:var(--panel-2); position:sticky; top:0; z-index:2}
th.club,td.club{text-align:left; position:sticky; left:0; background:var(--panel); min-width:210px;
  max-width:340px; box-shadow:8px 0 10px -10px rgba(0,0,0,.55)}
th.club{background:var(--panel-2); z-index:3}
tbody tr{cursor:pointer}
tbody tr + tr td{border-top:1px solid var(--line)}
tbody tr:hover td, tbody tr:hover td.club{background:var(--panel-3)}
tr.mine td, tr.mine td.club{background:var(--mine-bg)}
tr.mine td.club{color:var(--amber)}
td.p{width:44px; text-align:center; font-family:VT323,monospace; font-size:17px; color:var(--phos-soft); position:relative}
td.p::before{content:""; position:absolute; left:0; top:5px; bottom:5px; width:2px; background:transparent}
tr.z-semi td.p{color:var(--phos)} tr.z-semi td.p::before{background:var(--phos)}
tr.z-play td.p{color:var(--cyan)} tr.z-play td.p::before{background:var(--cyan)}
tr.z-pout td.p{color:var(--amber)} tr.z-pout td.p::before{background:var(--amber)}
tr.z-desc td.p{color:var(--tally)} tr.z-desc td.p::before{background:var(--tally)}
td.pts{font-family:VT323,monospace; font-size:20px; color:var(--amber); text-shadow:var(--glow-a)}
.cc{display:flex; align-items:center; gap:10px; color:var(--bone); min-width:0}
.cc .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.cc .cr{width:22px; height:22px}
.dg.pos{color:var(--phos)} .dg.neg{color:var(--tally)}
.form{display:flex; gap:3px; justify-content:flex-end}
.form i{width:8px; height:8px; font-style:normal}
.fG{background:var(--phos); box-shadow:var(--glow-p)}
.fE{background:var(--amber-dim)} .fP{background:var(--tally)}

.legend{display:flex; flex-wrap:wrap; gap:16px; margin:0 2px; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:9px; height:9px; display:inline-block}
.legend i.z-semi{background:var(--phos); box-shadow:var(--glow-p)}
.legend i.z-play{background:var(--cyan)}
.legend i.z-pout{background:var(--amber)}
.legend i.z-desc{background:var(--tally)}

/* ===== goleadores ===== */
.gl{display:grid; grid-template-columns:40px 22px minmax(0,1fr) 80px 58px; gap:11px; align-items:center; padding:8px 12px}
.gl + .gl{border-top:1px solid var(--line)}
.gl:hover{background:var(--panel-3)}
.gl .rk{font-family:VT323,monospace; font-size:18px; color:var(--phos-soft); text-align:center}
.gl.first .rk{color:var(--amber); text-shadow:var(--glow-a)}
.gl .who b{font-weight:500; color:var(--bone); font-size:13px}
.gl .who span{color:var(--mute); font-size:10.5px; margin-left:9px; text-transform:uppercase; letter-spacing:.08em}
.gl .bar{height:6px; background:var(--sunk); border:1px solid var(--line); overflow:hidden}
.gl .bar i{display:block; height:100%; background:var(--phos-soft)}
.gl.first .bar i{background:var(--phos); box-shadow:var(--glow-p)}
.gl .g{font-family:VT323,monospace; font-size:21px; text-align:right; color:var(--phos-hi)}
.gl .g small{display:block; font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--mute); letter-spacing:.06em}

/* ===== paleta ⌘K ===== */
.pal{position:fixed; inset:0; z-index:210; background:rgba(3,6,5,.6); display:none;
  align-items:flex-start; justify-content:center; padding:10vh 16px 16px}
:root[data-theme="light"] .pal{background:rgba(60,55,40,.34)}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .pal{background:rgba(60,55,40,.34)} }
.pal[open]{display:flex}
.palbox{width:min(640px,100%); border:1px solid var(--phos-soft); display:flex; flex-direction:column;
  max-height:72vh; overflow:hidden; background-image:var(--scanlines), linear-gradient(180deg, var(--panel), var(--sunk));
  box-shadow:var(--shadow), var(--inner)}
.palbox input{width:100%; padding:15px 16px; font-size:15px; color:var(--phos);
  border-bottom:1px solid var(--line-2); background:var(--sunk)}
.palbox input::placeholder{color:var(--mute)}
.palres{overflow-y:auto; padding:4px}
.pgroup{padding:10px 12px 4px}
.pitem{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:11px; align-items:center; width:100%;
  padding:8px 11px; text-align:left; font-size:12.5px; color:var(--bone); position:relative}
.pitem[data-sel="1"]{background:var(--sel-bg); color:var(--phos-hi)}
.pitem[data-sel="1"]::before{content:"›"; position:absolute; left:2px; color:var(--phos)}
.pitem .sub{font-size:9.5px; color:var(--mute); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.pitem .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.palfoot{border-top:1px solid var(--line-2); padding:8px 14px; display:flex; gap:18px; background:var(--sunk)}

/* ===== sin señal ===== */
.empty{position:relative; padding:46px 16px; text-align:center; color:var(--mute); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; overflow:hidden}
.empty::before{content:""; position:absolute; inset:0; opacity:.16; background-size:120px 120px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23s)'/></svg>")}
.empty::after{content:"NO SIGNAL"; position:absolute; left:50%; top:14px; transform:translateX(-50%);
  font-family:VT323,monospace; font-size:15px; letter-spacing:.3em; color:var(--tally); opacity:.75}

.sign{flex:none; display:flex; align-items:center; gap:14px; padding:0 18px; height:48px;
  border-top:1px solid var(--line-2); z-index:58;
  background-image:var(--scanlines), linear-gradient(var(--panel-2), var(--sunk))}
.sign .ahba{width:28px; height:auto; flex:none; opacity:.75; filter:grayscale(.35)}
.sign .note{flex:1; min-width:0; border:0; padding:0; font-size:10.5px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sign-cliply{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--bone); flex:none;
  border-left:1px solid var(--line); padding-left:16px; height:26px}
.sign-cliply .cliply.md{height:17px}

.sign .ahba{width:42px; height:auto; flex:none; opacity:.72; filter:grayscale(.35)}
.sign .note{flex:1}
:root[data-theme="dark"] .sign .ahba, :root:not([data-theme="light"]) .sign .ahba{filter:grayscale(.4) brightness(1.15)}
.note{margin:0; padding:12px 14px; border:1px dashed var(--line-2); color:var(--mute); font-size:11px; line-height:1.7}
.note b{color:var(--phos-dim)}
[hidden]{display:none !important}

/* ===== encendido ===== */
.screen{animation:power .42s cubic-bezier(.2,.9,.3,1) backwards; transform-origin:center}
.card,.tw{animation:power .26s cubic-bezier(.2,.9,.3,1) backwards; transform-origin:center}
@keyframes power{0%{transform:scaleY(.006); filter:brightness(2.6); opacity:.9}
  55%{transform:scaleY(.06); filter:brightness(1.6)} 100%{transform:none; filter:none; opacity:1}}

@media (max-width:1000px){
  .shell{grid-template-columns:minmax(0,1fr)}
  aside{position:absolute; inset:0 auto 0 0; width:min(290px,86vw); z-index:70; transform:translateX(-101%);
    transition:transform .2s ease; box-shadow:24px 0 60px -30px rgba(0,0,0,.7)}
  aside[data-open="1"]{transform:none}
  .menubtn{display:inline-flex !important}
  main{padding:14px 12px 90px}
  .m{grid-template-columns:74px minmax(0,1fr) 78px minmax(0,1fr); row-gap:4px}
  .m .venue{grid-column:2/-1; text-align:left}
  .x{grid-template-columns:56px minmax(0,1fr) 76px; row-gap:5px}
  .x .catchip{grid-column:1/3} .x .cancha{grid-column:1/-1; text-align:left}
  .xpos{grid-template-columns:76px minmax(0,1fr) 44px 44px; row-gap:4px}
  .xpos .racha{grid-column:2/-1}
  .clock{display:none}
}
@media (min-width:1001px){ .deck .menubtn{display:none} }
@media (max-width:760px){
  /* deck compacto: marca + tally + accesos */
  .deck-in{gap:8px; padding:8px 12px}
  .wm .nm b{font-size:22px} .wm .nm span{display:none}
  .logo{width:26px; height:26px}
  .kbtn{padding:8px 11px} .kbtn .txt{display:none} .kbtn kbd{display:none} .kbtn .ico{display:block}
  .clubbtn{padding:4px 8px 4px 4px} .clubbtn .cn{display:none}
  .arrow{width:34px; height:34px}

  main{padding:12px 12px calc(96px + env(safe-area-inset-bottom)); gap:12px}
  .scrub{top:-12px}
  .ident{padding:16px 14px 0}
  .glitch{font-size:32px}
  .meta{gap:10px; font-size:11px}

  /* canales al pie: alcance del pulgar.
     .screen no puede animar transform acá: crearía containing block para la barra fixed */
  .screen{animation:none}
  .tabs{position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0; border-top:1px solid var(--line-2);
    background-image:var(--scanlines), linear-gradient(180deg, var(--panel-2), var(--sunk));
    padding-bottom:env(safe-area-inset-bottom); overflow:visible}
  .tabs button{flex:1; padding:13px 4px 12px; font-size:10.5px; letter-spacing:.08em; border-right:1px solid var(--line);
    border-bottom:2px solid transparent}
  .tabs button:last-child{border-right:0}
  .tabs button::before{content:""; display:block; height:0}
  .tabs button[aria-selected="true"]{background:transparent; color:var(--phos); font-weight:600;
    border-bottom-color:var(--phos); text-shadow:var(--glow-p)}

  /* partido como marcador apilado */
  .m{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"time venue" "home score" "away score";
    gap:6px 12px; padding:11px 13px}
  .m .time{grid-area:time} .m .venue{grid-area:venue; text-align:right}
  .m .side.h{grid-area:home} .m .side.a{grid-area:away}
  .m .side.h{flex-direction:row; text-align:left}
  .m .res{grid-area:score; align-self:center; font-size:34px; min-width:64px}
  /* sin resultado todavía: la hora arriba, con la fecha, y los equipos abajo */
  .m.soon{grid-template-areas:"time score" "home home" "away away" "venue venue"}
  .m.soon .res{font-size:19px; align-self:start; justify-self:end}
  .m.soon .venue{text-align:left}
  .m .nm{font-size:15px}
  .m .cr{width:26px; height:26px}

  /* scrubber con targets de dedo */
  .scrub{padding:8px; gap:8px}
  .scrub .rail{gap:6px; scroll-snap-type:x proximity}
  .fk{min-width:46px; padding:10px 6px; font-size:19px; scroll-snap-align:center}

  /* tabla en el celular: en hockey el primer desempate son partidos ganados,
     así que G entra antes que la racha de 5 */
  table{min-width:0}
  th:nth-child(n+5):nth-child(-n+8), td:nth-child(n+5):nth-child(-n+8){display:none}
  th:last-child, td:last-child{display:none}
  th.club, td.club{min-width:104px; max-width:44vw}
  th, td{height:42px; padding:0 7px; font-size:13px}
  td.pts{font-size:20px}

  .gl{grid-template-columns:32px 22px minmax(0,1fr) 52px; gap:9px; padding:11px}
  .gl .bar{display:none}

  /* vista transversal apilada */
  .x{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"hora rival" "chip cancha"; gap:5px 10px; padding:11px 13px}
  .x .hora{grid-area:hora; font-size:22px} .x .res{grid-area:hora; font-size:24px}
  .x .rival{grid-area:rival} .x .rival .nm{font-size:15px}
  .x .catchip{grid-area:chip; justify-self:start} .x .cancha{grid-area:cancha; text-align:right}
  .x .loc{display:none}
  .xhead{padding:14px} .xhead h2{font-size:26px}
  .xpos{grid-template-columns:auto minmax(0,1fr) 46px 46px; gap:8px; padding:11px 13px}
  .xpos .racha{display:none}

  /* buscador a pantalla completa */
  .pal{padding:0; align-items:stretch}
  .palbox{max-height:100%; height:100%; width:100%; border:0}
  .palbox input{padding:18px 16px; font-size:16px}
  .pitem{padding:12px 11px; font-size:14px}

  .clubstrip{flex-wrap:wrap; row-gap:8px}
  .clubstrip .txt{flex:1 1 100%; order:3}
  .clubstrip .go{margin-left:auto; order:2}
  .sign{position:fixed; left:0; right:0; bottom:calc(50px + env(safe-area-inset-bottom)); height:34px;
    gap:10px; padding:0 12px}
  .sign .ahba{width:21px}
  .sign .note{font-size:9.5px}
  .sign-cliply{padding-left:11px; gap:8px} .sign-cliply .cliply.md{height:13px}
  .sign-cliply .lab{display:none}
  .byline{display:none}
  .note{font-size:11px; line-height:1.6}
}
@media (max-width:400px){
  .m .res{font-size:28px; min-width:54px}
  .glitch{font-size:26px}
  .tabs button{font-size:9.5px; letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .fx::after, body::after{display:none}
}