/* Armador: estilos. Reset mínimo y después el look de estadio de noche. */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}*,*::before,*::after{box-sizing:border-box}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: marcador de TV arriba; cancha cenital (21 x 11 m con zona libre) a la izquierda; panel de decisiones a la derecha, debajo en celular. Look único de estadio de noche, elegido a propósito. */
:root{
  color-scheme:dark;
  --arena:#0d1220; --panel:#151c31; --panel-2:#1c2542; --line:#2b3558;
  --ink:#eef1f8; --muted:#a0a9c6; --faint:#6c7699;
  --home:#56b8ec; --home-ink:#062338; --home-l:#24357a;
  --away:#ea5a52; --away-ink:#ffffff; --away-l:#2e3140; --home-t:#56b8ec; --away-t:#ea5a52;
  --ball:#f6c635; --ball-ink:#1d1600; --ball-2:#2457c5;
  --good:#45d39b; --warn:#f2a541; --bad:#ff7070;
  --court:#cf723c; --court-2:#bd6330; --free:#1d5b84; --free-2:#174a6d; --chalk:#f7f3ea;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-ui:"Barlow Semi Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--arena);color:var(--ink);font:15px/1.4 var(--f-ui)}
*{box-sizing:border-box}
button{font:inherit;color:inherit}
.app{max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:14px 24px;display:flex;flex-direction:column;gap:12px}

/* Marcador */
.board{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.team{display:flex;flex-direction:column;gap:2px;min-width:0}
.team.away{align-items:flex-end;text-align:right}
.tn{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%}
.tn .nm{font:800 clamp(18px,3vw,30px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.home .tn .nm{color:var(--home-t)} .away .tn .nm{color:var(--away-t)}
.nm .code{display:none}
.flag{display:inline-block;width:24px;height:16px;border-radius:3px;flex:none;background:var(--line);box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.flag.sm{width:18px;height:12px;border-radius:2px}
/* Con amigos: el rival está conectado (verde) o no (gris). Va en la esquina de su bandera: así no le saca lugar al nombre en el celu acostado */
.board .flag{position:relative}
.conx{position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 2px var(--panel-2)}
.conx.on{background:var(--good)}
.srv{width:11px;height:11px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#fff6c8 0 18%,var(--ball) 40%);box-shadow:0 0 0 2px rgba(246,198,53,.25)}
.rot{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.setsm{display:none}
.nums{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.pts{font:900 clamp(32px,6vw,56px)/.9 var(--f-display);min-width:1.25em;text-align:center}
.sets{font:800 18px/1 var(--f-display);background:var(--line);border-radius:6px;padding:5px 7px 4px}
.mid{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mid b{font:800 15px/1 var(--f-display);color:var(--ink);letter-spacing:.06em}

/* Escenario */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.courtwrap{position:relative;min-width:0;border-radius:12px;overflow:hidden;background:var(--arena);box-shadow:0 14px 40px rgba(0,0,0,.4)}
canvas{display:block;width:100%;touch-action:manipulation;cursor:crosshair}
.flash{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) skewX(-8deg);font:900 clamp(26px,6.4vw,66px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;padding:.08em .38em .12em;border-radius:6px;pointer-events:none;opacity:0;white-space:nowrap}
.flash small{display:block;font:700 clamp(12px,1.6vw,17px)/1.2 var(--f-ui);letter-spacing:.06em;text-align:center;opacity:.9}
.flash.home{background:var(--home);color:var(--home-ink)} .flash.away{background:var(--away);color:var(--away-ink)}
.flash.go{animation:flash 1.15s cubic-bezier(.2,.8,.2,1)}
@keyframes flash{0%{opacity:0;transform:translate(-50%,-30%) skewX(-8deg) scale(.9)}14%{opacity:1;transform:translate(-50%,-50%) skewX(-8deg) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) skewX(-8deg)}}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 2px 0;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* Panel */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ph-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.eyebrow{font:600 12px/1.2 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.panel h2{font:800 27px/1.02 var(--f-display);text-transform:uppercase;letter-spacing:.01em;margin:6px 0 0;text-wrap:balance}
.hint{color:var(--muted);margin:6px 0 0;font-size:14.5px}
.timer{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.timer i{display:block;height:100%;background:var(--ball);transform-origin:left center}
.timer i.low{background:var(--bad)}
/* la barra del reloj del otro (con amigos, mientras decide): con el color del rival */
.timer.otro i,.timer.otro i.low{background:var(--away-t)}
.body{display:flex;flex-direction:column;gap:9px}
.q{display:inline-block;font:800 13px/1 var(--f-display);letter-spacing:.06em;padding:3px 6px 2px;border-radius:4px;color:#0d1220;vertical-align:1px}
.q-h{background:var(--good)} .q-p{background:var(--ball)} .q-m{background:var(--warn)} .q-e{background:var(--bad)}
.opt{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s,transform .15s}
.opt:hover{border-color:var(--ball)} .opt:active{transform:scale(.99)}
.opt:focus-visible,.seg button:focus-visible,.quick button:focus-visible,.primary:focus-visible,.ghost:focus-visible,.tabs button:focus-visible{outline:2px solid var(--ball);outline-offset:2px}
.opt .zn{font:900 28px/1 var(--f-display);color:var(--ball);text-align:center}
.opt .om{display:flex;flex-direction:column;min-width:0}
.opt .om b{font-weight:700;font-size:16px}
.opt .om small{color:var(--muted);font-size:13.5px;line-height:1.25}
.opt.slim{grid-template-columns:minmax(0,1fr) auto}
.blk{display:flex;gap:3px;align-items:center}
.blk i{width:6px;height:17px;border-radius:2px;background:var(--away)}
.blk.mine i{background:var(--home)}
.blk em{font-style:normal;font:800 13px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--good)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 0;min-width:0;padding:9px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--ball);border-color:var(--ball);color:var(--ball-ink)}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.quick button{padding:8px 4px;border-radius:8px;border:1px dashed var(--line);background:transparent;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted)}
.quick button:hover{color:var(--ink);border-color:var(--muted)}
.mini{margin:0;font-size:13px;color:var(--faint)}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.pick{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;font-weight:600;font-size:14.5px}
.pick b{font:900 17px/1 var(--f-display);color:var(--ball)}
.pick.rv b{color:var(--away)}
.pick:hover{border-color:var(--ball)}
.pick:focus-visible{outline:2px solid var(--ball);outline-offset:2px}
.bench{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 2px 0;font-size:13px;color:var(--faint)}
.bench b{color:var(--muted);font-weight:600}
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fld input{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:600 16px var(--f-ui);color:var(--ink)}
.fld input:focus{outline:2px solid var(--ball);outline-offset:1px}
.tog{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;cursor:pointer}
.tog input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ball)}
.tog b{display:block;font-weight:600}
.tog small{display:block;color:var(--muted);font-size:13px;line-height:1.3}
.primary{background:var(--ball);color:var(--ball-ink);font:900 21px/1 var(--f-display);text-transform:uppercase;letter-spacing:.05em;border:0;border-radius:10px;padding:14px;cursor:pointer}
.primary:hover{filter:brightness(1.06)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:7px;padding:4px 10px;font-size:13px;color:var(--muted);cursor:pointer}
.ghost:hover{color:var(--ink)}
.ghost:disabled{opacity:.45;cursor:default}
.ghost.on{border-color:var(--ball);color:var(--ball)}
/* Tiempo: late cuando el rival hizo 2 o más seguidos y te quedan tiempos */
.ghost.late{border-color:var(--warn);color:var(--warn);font-weight:700;animation:late 1s ease-in-out infinite}
@keyframes late{0%,100%{box-shadow:0 0 0 0 rgba(242,165,65,.55)}50%{box-shadow:0 0 0 4px rgba(242,165,65,.18);background:rgba(242,165,65,.14)}}
.ctl{display:flex;gap:6px}.ctl .ghost{flex:1 1 auto;min-width:0;padding:6px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt .zn.sm{font-size:20px}
.run{color:var(--ball)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;padding:8px 10px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ball)}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:230px;overflow:auto;font-size:14px}
.log li{display:grid;grid-template-columns:4px minmax(0,1fr);gap:8px;color:var(--muted)}
.log li::before{content:"";border-radius:2px;background:var(--line)}
.log li.home::before{background:var(--home)} .log li.away::before{background:var(--away)}
.log li.pt{color:var(--ink);font-weight:600}
.log .empty{color:var(--faint)}
.stats{display:flex;flex-direction:column;gap:14px;font-size:14px}
.stats h3{font:800 15px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;color:var(--muted)}
.tbl{overflow-x:auto}
.stats table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.stats th,.stats td{padding:4px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.stats th:first-child,.stats td:first-child{text-align:left}
.stats tr.sub td{color:var(--muted);font-size:13px}.stats tr.sub td:first-child{padding-left:16px}
.stats th{font-weight:600;color:var(--muted);font-size:12.5px}
.bars{display:flex;flex-direction:column;gap:5px}
.bar{display:grid;grid-template-columns:92px minmax(0,1fr) 40px;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.bar span:nth-child(2){height:9px;background:var(--line);border-radius:5px;overflow:hidden}
.bar span:nth-child(2) i{display:block;height:100%;background:var(--home)}
.bar span:last-child{text-align:right;color:var(--muted)}
.recbar{display:flex;height:16px;border-radius:5px;overflow:hidden;background:var(--line)}
.recbar i{display:block;height:100%}
.roster table th,.roster table td{padding:4px 4px}
.roster table th:nth-child(2),.roster table td:nth-child(2){text-align:left}
.roster td:first-child small{color:var(--faint);margin-right:4px}
.roster td.hi{color:var(--good);font-weight:700} .roster td.lo{color:var(--faint)}
.roster tr.sep td{color:var(--faint);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding-top:8px}
.roster h3{display:flex;align-items:center;gap:7px}
.pick .rt{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.roster td.gl{font-weight:800;color:var(--ink)} .roster td.en{color:var(--muted)} .roster td.en.lo{color:var(--warn);font-weight:700}
.leaders{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px 18px}
ol.lead{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:14px;counter-reset:l}
ol.lead li{display:grid;grid-template-columns:16px 18px minmax(0,1fr) auto;gap:6px;align-items:center;color:var(--muted);counter-increment:l}
ol.lead li::before{content:counter(l);color:var(--faint);font-variant-numeric:tabular-nums}
ol.lead li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
ol.lead li b{color:var(--ink);font-variant-numeric:tabular-nums}
ol.lead li.me span{color:var(--ball)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rings{height:1.15em;width:auto;display:block;margin:0 auto;color:var(--ink)}
.seg button[aria-pressed="true"] .rings{color:var(--ball-ink);filter:drop-shadow(0 0 1.2px rgba(0,0,0,.75))}
.lg-vnl{height:1.05em;width:auto;display:block;margin:0 auto;color:var(--ink)}
.seg button[aria-pressed="true"] .lg-vnl{color:var(--ball-ink)}
.tlogo .lg-vnl{height:.85em;display:inline-block}
.tlogo{display:inline-block;vertical-align:-.08em}.tlogo .rings{height:1em;display:inline-block}
.dtbox{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.dtbox .mini{margin-top:0}
.dtfila{display:flex;align-items:center;gap:10px}.dtfila .picks{flex:1;min-width:0}
.dtk{flex:none;width:62px;font:700 12px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pick.on{border-color:var(--ball);background:var(--ball);color:var(--ball-ink)}
.flash.ace{background:var(--ball);color:var(--ball-ink);font-size:clamp(44px,11vw,108px);box-shadow:0 0 0 6px rgba(246,198,53,.25)}
.flash.ace.go{animation:ace 1.5s cubic-bezier(.2,.8,.2,1)}
@keyframes ace{0%{opacity:0;transform:translate(-50%,-50%) skewX(-8deg) scale(.4)}12%{opacity:1;transform:translate(-50%,-50%) skewX(-8deg) scale(1.15)}20%{transform:translate(-52%,-50%) skewX(-8deg) scale(1)}26%{transform:translate(-48%,-50%) skewX(-8deg)}32%{transform:translate(-50%,-50%) skewX(-8deg)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) skewX(-8deg)}}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kv div{background:var(--panel-2);border-radius:8px;padding:8px 10px}
.kv b{display:block;font:800 24px/1 var(--f-display);font-variant-numeric:tabular-nums}
.kv small{color:var(--muted);font-size:12.5px}
/* Torneos */
.left{min-width:0}
.hub{display:flex;flex-direction:column;gap:14px;min-width:0}
.hub-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hub-h h2{font:900 clamp(28px,4.4vw,44px)/.95 var(--f-display);text-transform:uppercase;margin:6px 0 0;text-wrap:balance}
.hub-h p{margin:6px 0 0;color:var(--muted)}
.nat{display:inline-flex;align-items:center;gap:7px;min-width:0}
.nat.big b{font:800 20px/1 var(--f-display);text-transform:uppercase}
.nat small{color:var(--faint)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.card h3{font:800 15px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.groups.one{grid-template-columns:minmax(0,1fr)}
table.st{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
table.st th,table.st td{padding:5px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.st th:nth-child(2),table.st td:nth-child(2){text-align:left}
table.st th{color:var(--muted);font-weight:600;font-size:12.5px}
table.st tr.qz td:first-child{box-shadow:inset 3px 0 0 var(--good)}
table.st tr.qz3 td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.st tr.me td{background:rgba(246,198,53,.1);color:var(--ink);font-weight:700}
.bracket{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:12px;overflow-x:auto;padding-bottom:4px}
.bcol{display:flex;flex-direction:column;justify-content:space-around;gap:8px;min-width:0}
.bm{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.bm small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bt{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;font-size:14px;color:var(--muted)}
.bt b{font:800 17px/1 var(--f-display);color:var(--ink)}
.bt.w{color:var(--ink);font-weight:700}
.bt.me span{color:var(--ball)}
.results{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 16px;font-size:14px}
.results li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted)}
.results li b{color:var(--ink)} .results li.me{color:var(--ink)} .results li.me b{color:var(--ball)}
.results small{color:var(--faint);font-size:12px;width:100%}
.champ{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--panel-2),var(--panel));border:1px solid var(--ball);border-radius:12px;padding:14px}
.champ .flag{width:54px;height:36px}
.champ b{display:block;font:900 30px/1 var(--f-display);text-transform:uppercase;margin-top:4px}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.vs .t{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.vs .t .flag{width:42px;height:28px;border-radius:4px}
.vs .t b{font:800 18px/1.05 var(--f-display);text-transform:uppercase}
.vs .t small{color:var(--muted);font-size:12.5px}
.vs em{font:900 18px/1 var(--f-display);color:var(--faint);font-style:normal}
.savebox{background:var(--panel-2);border:1px solid var(--ball);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.row2{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.primary.sm{font-size:17px;padding:10px 16px}
.selrow{display:flex;align-items:center;gap:8px}
.selrow select{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:600 16px var(--f-ui);color:var(--ink)}
.selrow select:focus{outline:2px solid var(--ball);outline-offset:1px}
@media (max-width:880px){.stage{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.nm .full{display:none}.nm .code{display:inline}.sets{display:none}.setsm{display:block}.rw{display:none}.pts{font-size:36px}.nums{gap:6px}}
@media (max-width:480px){.rot{font-size:10.5px;letter-spacing:.04em}.board{padding:8px 10px;gap:6px}.sets{font-size:15px;padding:4px 5px 3px}.panel h2{font-size:24px}}
@media (prefers-reduced-motion:reduce){.flash.go,.flash.ace.go{animation-duration:.01s;opacity:0}.opt{transition:none}.ghost.late{animation:none;background:rgba(242,165,65,.14)}}

/* Con amigos: código de la sala */
.salacod{font:900 clamp(44px,13vw,68px)/1 var(--f-display);letter-spacing:.2em;text-align:center;margin:2px 0 0;color:var(--ball)}
.salajoin{display:flex;gap:8px;align-items:stretch}
.salajoin input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.2em}
.primary:disabled{opacity:.4;cursor:default;filter:saturate(.5)}
/* Torneo con amigos */
.tmjug{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.tmjug li{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;color:var(--muted)}
.tmjug li b{color:var(--ink)}
.tmjug li.me{background:var(--panel-2)}
.tmjug li.turno{outline:1px solid var(--ball)}
.tmjug i{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.tmjug i.on{background:var(--good)}
.tmpend{display:flex;flex-direction:column;gap:4px}
.tmpend .ghost{padding:2px 8px;font-size:12px;margin-left:6px}

/* Panel de decisiones (arriba del panel). En PC va en el panel como siempre. */
.deck{display:flex;flex-direction:column;gap:12px;min-width:0}

/* Celular parado, jugando: marcador arriba, cancha vertical (tu equipo abajo) en el resto de la pantalla
   y el panel de decisiones fijo abajo, sobre tu fondo de cancha. Jugada a jugada y estadísticas quedan debajo, scrolleando. */
@media (max-width:700px) and (orientation:portrait){
  body.jugando .app{padding-inline:6px;padding-block:6px calc(var(--deckh,0px) + 12px);gap:6px}
  body.jugando .board{padding:4px 10px;gap:6px;border-radius:10px}
  body.jugando .pts{font-size:30px}
  body.jugando .tn .nm{font-size:19px}
  body.jugando .mid{font-size:10px;gap:1px} body.jugando .mid b{font-size:13px}
  body.jugando .stage{gap:8px}
  /* la cancha deja libre abajo el alto de la línea de la jugada: mientras corre, no se tapa nada */
  body.jugando .courtwrap{height:calc(100vh - var(--boardh,48px) - 70px);height:calc(100svh - var(--boardh,48px) - 70px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(var(--alto,100svh) - var(--boardh,48px) - 70px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:flex-start;box-shadow:none;border-radius:10px}
  body.jugando .deck{position:fixed;left:0;right:0;bottom:0;z-index:20;gap:7px;padding:9px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(21,28,49,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -10px 28px rgba(0,0,0,.45);max-height:62vh;max-height:62svh;overflow-y:auto;overscroll-behavior:contain}
  body.jugando .deck .ph-top{min-height:0}
  body.jugando .deck .eyebrow{font-size:11px}
  body.jugando .deck h2{font-size:21px;margin-top:2px}
  body.jugando .deck .hint{font-size:13px;line-height:1.32;margin-top:4px}
  body.jugando .deck .timer{order:2;height:5px;flex:none}
  body.jugando .deck .body{order:3;gap:7px}
  /* Tiempo, Cambios y Pausar arriba a la derecha, en la línea del título chico: el panel ocupa menos cancha */
  body.jugando .deck:not(.espera) .ctl{position:absolute;top:7px;right:10px;gap:4px}
  body.jugando .deck.conctl:not(.espera) .ph-top{padding-right:196px;min-height:24px}
  body.jugando .deck .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.jugando .deck .ctl .ghost{flex:none;max-width:96px;padding:4px 7px;font-size:12px}
  body.jugando .deck .ayuda{display:none}
  body.jugando .deck .pick{padding:5px 7px;font-size:13px;gap:5px} body.jugando .deck .picks{gap:5px}
  /* el título chico ya lo dice el grande: queda lo importante (la recepción) */
  body.jugando .deck .eyx{display:none}
  body.jugando .deck .mini{font-size:12px}
  /* Mientras corre la jugada: una sola línea con el título y los botones, así se ve la cancha */
  body.jugando .deck.espera{flex-direction:row;align-items:center;gap:8px;padding-top:7px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  body.jugando .deck.espera .dhead{flex:1;min-width:0}
  body.jugando .deck.espera .eyebrow,body.jugando .deck.espera .hint,body.jugando .deck.espera .body:empty{display:none}
  body.jugando .deck.espera h2{font-size:17px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.jugando .deck.espera .ctl{flex:none;gap:4px}
  body.jugando .deck.espera .ctl .ghost{padding:5px 7px}
  body.jugando .deck.espera .timer{position:absolute;left:12px;right:12px;top:2px;height:3px}
  /* check: sin el texto, los dos botones en una fila, así se ve la marca de la pelota */
  body.jugando .deck.compacto .hint{display:none}
  /* las instrucciones de cada decisión, después de las dos primeras veces */
  body.jugando .deck.sinayuda .comotxt{display:none}
}

/* Celular acostado (o pantalla baja), jugando: cancha a la izquierda en todo el alto; marcador y panel a la derecha */
@media (max-height:520px) and (orientation:landscape){
  body.jugando .app{max-width:none;height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(var(--alto,100svh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding-block:6px;padding-inline:max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px));display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,32vw,320px);grid-template-rows:auto minmax(0,1fr);gap:6px 8px}
  body.jugando .board{grid-column:2;grid-row:1;padding:4px 8px;gap:4px;border-radius:10px}
  body.jugando .nm .full{display:none} body.jugando .nm .code{display:inline}
  body.jugando .board .tn{gap:4px} body.jugando .board .flag{width:18px;height:12px;border-radius:2px} body.jugando .nums{gap:4px}
  body.jugando .deck .ayuda{display:none}
  body.jugando .sets,body.jugando .rw{display:none} body.jugando .setsm{display:block}
  body.jugando .pts{font-size:26px} body.jugando .tn .nm{font-size:16px}
  body.jugando .mid{font-size:9.5px;gap:1px} body.jugando .mid b{font-size:12px}
  body.jugando .rot{font-size:10px;letter-spacing:.04em}
  body.jugando .stage{display:contents}
  body.jugando .left{grid-column:1;grid-row:1/3;min-height:0;display:flex;flex-direction:column}
  body.jugando #matchview{flex:1;min-height:0;display:flex;flex-direction:column}
  body.jugando .courtwrap{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;box-shadow:none;border-radius:10px}
  body.jugando .legend,body.jugando .bench{display:none}
  body.jugando .panel{grid-column:2;grid-row:2;min-height:0;overflow-y:auto;padding:8px 10px;gap:8px}
  body.jugando .deck{gap:7px}
  body.jugando .deck h2{font-size:19px;margin-top:2px}
  body.jugando .deck .hint{font-size:12.5px;line-height:1.3;margin-top:3px}
  body.jugando .deck .ctl .ghost{padding:5px 4px;font-size:12px}
  body.jugando .deck .pick{padding:5px 8px;font-size:13px}
  body.jugando .deck .mini{font-size:11.5px}
}

/* Botones para seguir (Listo, Seguir sin cambio, Seguir): a la vista aunque el panel se scrollee (celu) */
body.jugando .fijo{position:sticky;bottom:0;z-index:2;box-shadow:0 -10px 18px rgba(21,28,49,.92)}
.chkrow{display:flex;gap:8px}.chkrow .primary{flex:1}.chkrow .ghost{flex:none;padding:0 18px;font-size:15px}
/* Celu: botones más fáciles de tocar */
@media (max-width:700px) and (orientation:portrait),(max-height:520px) and (orientation:landscape){
  body.jugando .ctl .ghost{min-height:34px}
  body.jugando .pick{min-height:36px}
}
@media (max-height:520px) and (orientation:landscape) and (max-width:700px){body.jugando .setsm{display:none}}
@media (max-height:520px) and (orientation:landscape){body.jugando .panel{overflow-x:hidden}body.jugando .tabs button{padding:6px 6px;font-size:13px}}
/* Menú en celu: que entren los modos */
@media (max-width:480px){.seg button{padding-inline:4px;font-size:14px}}
/* ¿Cómo se juega? */
.como{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.como summary{cursor:pointer;font-weight:700;color:var(--ink)}
.como ul{margin:8px 0 2px;padding-left:18px;display:flex;flex-direction:column;gap:5px;color:var(--muted)}
.como b{color:var(--ink)}
/* Compartir el link */
.compartir{justify-content:center}
.ghost.wa{text-decoration:none;display:inline-flex;align-items:center;border-color:#25d366;color:#25d366}
.linkcopia{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:600 14px var(--f-ui);color:var(--ink)}
/* Invitación por link: en el celu, la tarjeta para unirse queda arriba de todo */
@media (max-width:700px){body.invitacion #matchview,body.invitacion .board{display:none}}
/* Cuatro botones en el panel (Tiempo, Cambios, Pausar, Salir): en el celu, más angostos */
body.jugando .deck .ctl .ghost{padding-inline:6px}
body.jugando .deck.espera .ctl .ghost{max-width:84px}
/* Ranking online: seis modos en dos filas de tres; en el celu, sin la cancha de muestra; sin las pestañas del partido */
.seg.modos6 button{flex:1 1 calc(33.333% - 4px)}
@media (max-width:700px){body.rkmodo #matchview,body.rkmodo .board{display:none}}
body.rkmodo .panel>.tabs,body.rkmodo #log,body.rkmodo #stats,body.rkmodo #roster{display:none}
/* Código de cuenta: grande, en uno o dos renglones (cada mitad sin cortes) */
.rkcod{font:900 clamp(34px,10.5vw,44px)/1.08 var(--f-display);letter-spacing:.06em;text-align:center;color:var(--ball);margin:2px 0 0;font-variant-numeric:tabular-nums;-webkit-user-select:all;user-select:all}
.rkcod span{white-space:nowrap}
.rkcod.sm{font-size:clamp(22px,6.6vw,26px);letter-spacing:.04em}
.rkcopiar{justify-content:center}
.rkcopiar .ghost{padding:7px 22px;font-size:14px}
.rkbox{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.rkbox.guardar{border-color:var(--ball)}
.rkbox.aviso{border-color:var(--warn)}
.rkbox.error{border-color:var(--bad)}
.rkbox.error b{color:var(--bad)}
.rkbox .rkcod{margin:0}
.rkok{margin:0;color:var(--good);font-size:14px}
.rkojo{color:var(--warn)}
.rknom small{color:var(--faint);font-weight:600;margin-left:1px}
.rkfalta{margin:0;padding:8px 10px;border-radius:8px;border:1px dashed var(--line);font-size:14px;color:var(--ink)}
.salajoin input.rkcodin{letter-spacing:.06em}
.salajoin input.rknomin{text-transform:none;letter-spacing:normal}
.primary.rkpeligro{background:var(--bad);color:#2a0606}
.opt.on{border-color:var(--bad)}.opt.on b{color:var(--bad)}
.rktabs{margin-top:4px}
/* Tabla: entra en 300 px (celu de 360) sin scroll de costado; tu fila resaltada y, si queda más abajo, fija al pie de la pantalla */
table.rk{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums;font-size:14.5px}
table.rk th,table.rk td{padding:7px 4px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.rk th{color:var(--muted);font-weight:600;font-size:12.5px}
table.rk th:nth-child(1){width:2.3em}
table.rk th:nth-child(3){width:3.3em}
table.rk th:nth-child(4),table.rk th:nth-child(5){width:2.5em}
table.rk td:nth-child(1){color:var(--faint)}
table.rk th:nth-child(2),table.rk td:nth-child(2){text-align:left;padding-left:9px;overflow:hidden;text-overflow:ellipsis}
table.rk td:nth-child(2) small{color:var(--faint);font-size:12px;margin-left:1px}
table.rk td:nth-child(3){font-weight:700;color:var(--ink)}
table.rk tr.me td{position:sticky;bottom:0;z-index:1;background:linear-gradient(rgba(246,198,53,.17),rgba(246,198,53,.17)) var(--panel);color:var(--ink);font-weight:700;border-bottom-color:var(--ball)}
table.rk tr.me td:first-child{box-shadow:inset 3px 0 0 var(--ball);color:var(--ball)}
table.rk tr.me td:nth-child(2){color:var(--ball)}
table.rk tr.gap td{text-align:center;color:var(--faint);padding:2px;border-bottom:0}
/* Torneo en el celu: primero el panel (próximo partido y Jugar), después los grupos, el cuadro y los líderes (pedido del usuario) */
@media (max-width:880px){body.enhub .panel{order:-1}}
/* Chat con amigos (sala y torneo). El botón va con Tiempo, Cambios y Salir (solo, fuera del partido); el panel queda debajo del botón
   (en PC jugando, debajo del panel de decisiones) y en el celu, jugando, flota abajo, arriba del teclado (--kb). Los mensajes que llegan
   se ven un momento sobre la cancha sin tapar toques (pointer-events:none). */
.chatb{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.chatb svg{width:15px;height:15px;flex:none}
.ctl .chatb{flex:none;padding-inline:10px;overflow:visible}
.chatn{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ball);color:var(--ball-ink);font:800 11px/16px var(--f-ui);text-align:center}
.chat{display:flex;flex-direction:column;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.chath{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.chath b{font:800 15px/1.1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatx{flex:none;padding:3px 9px;font-size:14px;line-height:1.2}
.chatlst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto;overscroll-behavior:contain;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.chatlst li{color:var(--ink)} .chatlst li b{color:var(--ball);font-weight:700} .chatlst li.yo b{color:var(--muted)} .chatlst li.vacio{color:var(--faint)}
.chatin{display:flex;gap:6px;min-width:0}
.chatin input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:500 16px var(--f-ui);color:var(--ink)}
.chatin input:focus{outline:2px solid var(--ball);outline-offset:1px}
.chatin .primary{flex:none;font-size:16px;padding:8px 14px}
.chatnota{font-size:12px;line-height:1.3} .chatnota.mal{color:var(--bad);font-weight:600}
.chatts{position:fixed;z-index:40;top:10px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;width:max-content;max-width:calc(100vw - 24px)}
.chatt{max-width:100%;background:rgba(13,18,32,.9);border:1px solid var(--line);border-radius:9px;padding:5px 10px;font-size:14px;line-height:1.3;color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.45);overflow-wrap:anywhere;animation:chatt .25s ease-out;transition:opacity .4s}
.chatt b{color:var(--ball)}
.chatt.fuera{opacity:0}
@keyframes chatt{from{transform:translateY(-8px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.chatt{animation:none}}
@media (max-width:700px) and (orientation:portrait){
  .chat.flota{position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:30;border-radius:14px 14px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel-2);box-shadow:0 -10px 28px rgba(0,0,0,.5)}
  .chat.flota .chatlst{max-height:min(28vh,190px)}
  body.jugando .deck .ctl .chatb .tx{display:none}
  body.jugando .deck.conctl.conchat:not(.espera) .ph-top{padding-right:236px}
  body.jugando .deck.conctl.solochat:not(.espera) .ph-top{padding-right:58px}
}
@media (max-height:520px) and (orientation:landscape){
  .chat.flota{position:fixed;right:max(8px,env(safe-area-inset-right,0px));top:calc(var(--boardh,48px) + 12px);bottom:calc(6px + var(--kb,0px));width:clamp(220px,32vw,320px);z-index:30;background:var(--panel-2);box-shadow:0 10px 28px rgba(0,0,0,.5)}
  .chat.flota .chatlst{max-height:none;flex:1;min-height:40px}
  body.jugando .deck .ctl .chatb .tx{display:none}
}
/* Torneo con amigos en vivo (pedido del usuario): los partidos que se están jugando, con su marcador y Mirar; el punto rojo de "en vivo".
   El que mira tiene la cancha como si jugara, pero en la fila de botones solo Dejar de mirar (sin cortarse) y el chat del torneo. */
.tmvivo{display:flex;flex-direction:column;gap:5px}
.tmvivo .vrow{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 6px 5px 9px;min-width:0}
.tmvivo .vt{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px}
.tmvivo .vt span:not(.flag){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tmvivo .vsc{flex:none;font:800 16px/1 var(--f-display);letter-spacing:.02em;padding:0 3px;white-space:nowrap}
.tmvivo .ghost{flex:none;padding:4px 12px;font-size:13px}
i.vivo{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4d4d;margin-right:6px;vertical-align:1px;animation:vivo 1.6s ease-in-out infinite}
@keyframes vivo{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){i.vivo{animation:none}}
.avisoesp{color:var(--ball);font-weight:600}
body.jugando .deck .ctl #btnMirar{max-width:none;flex:none}