/* CHAPITAS — shell + mesa. Tema trí states (auto/claro/oscuro), sin dorado. */
:root{
  --bg:#0d1412; --bg2:#111c18; --panel:#0f1a16; --line:#1e3129;
  --ink:#e8f4ee; --dim:#8fae9f; --acc:#3ddc97; --acc2:#2bb3a3;
  --warn:#e35d6a; --chip:#16241f; --radius:10px; --shadow:0 6px 24px #0009;
  --accInk:#06251a; /* tinta sobre el acento: oscura en oscuro, blanca en claro */
  color-scheme:dark; font-size:15px;
}
:root[data-theme="claro"]{
  --bg:#f2f1ef; --bg2:#ffffff; --panel:#ffffff; --line:#dddad4;
  --ink:#242e2a; --dim:#6d7f78; --acc:#128a67; --acc2:#177d72;
  --warn:#c23a48; --chip:#e9e7e2; --shadow:0 6px 24px #00000022;
  --accInk:#ffffff;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root[data-theme="auto"]{
    --bg:#f2f1ef; --bg2:#ffffff; --panel:#ffffff; --line:#dddad4;
    --ink:#242e2a; --dim:#6d7f78; --acc:#128a67; --acc2:#177d72;
    --warn:#c23a48; --chip:#e9e7e2; --shadow:0 6px 24px #00000022;
    --accInk:#ffffff;
    color-scheme:light;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
}
a{color:var(--acc2);text-decoration:none;}
a:hover{color:var(--acc);}
button{cursor:pointer;font:inherit;}
kbd{background:var(--chip);border:1px solid var(--line);border-radius:4px;
  padding:0 .3rem;font-size:.8em;}

/* ─────────── cabecera ─────────── */
#topbar{
  position:relative;z-index:30;display:flex;align-items:center;gap:.8rem;
  padding:.45rem .8rem;background:var(--bg2);border-bottom:1px solid var(--line);
}
#topbar .logo{display:flex;align-items:center;}
#topbar .logo img{height:1.35rem;width:auto;display:block;}
/* dos variantes del wordmark del dueño: verde sobre oscuro, grafito sobre claro */
#topbar .logo .lg-claro{display:none;}
:root[data-theme="claro"] #topbar .logo .lg-oscuro{display:none;}
:root[data-theme="claro"] #topbar .logo .lg-claro{display:block;}
@media (prefers-color-scheme:light){
  :root[data-theme="auto"] #topbar .logo .lg-oscuro{display:none;}
  :root[data-theme="auto"] #topbar .logo .lg-claro{display:block;}
}
#topbar .logo{font-size:1rem;letter-spacing:.14em;font-weight:700;color:var(--ink);}
#topbar .logo em{color:var(--acc);font-style:normal;}
#mainnav a{color:var(--dim);padding:.25rem .5rem;border-radius:8px;font-weight:600;}
#mainnav a:hover{color:var(--ink);}
#mainnav a.on{color:var(--ink);background:var(--chip);}
#navTaller{display:flex;align-items:center;gap:.35rem;margin-left:auto;
  color:var(--dim);border:1px solid var(--line);border-radius:8px;
  padding:.28rem .6rem;font-size:.84rem;}
#navTaller:hover{color:var(--ink);border-color:var(--acc2);}
#me{color:var(--dim);font-size:.84rem;white-space:nowrap;}
#btnTheme{display:flex;align-items:center;gap:.35rem;background:var(--chip);
  color:var(--dim);border:1px solid var(--line);border-radius:8px;
  padding:.28rem .55rem;font-size:.8rem;}
#btnTheme:hover{color:var(--ink);border-color:var(--acc2);}
/* partido: el topbar se esconde SÓLO en móvil (pantalla chica) — en escritorio
   vive con logo + cluster (ver media en la sección PARTIDO) */

/* ─────────── pantallas ─────────── */
#main{flex:1;display:flex;min-height:0;}
.screen{flex:1;overflow-y:auto;padding:1.2rem clamp(.8rem,4vw,2.4rem);}
.screen[hidden]{display:none;}
.screen h2{margin:.1rem 0 .8rem;font-size:1.15rem;letter-spacing:.02em;}

/* JUGAR — los cuatro caminos por intención (la cola es el héroe).
   SIN tarjeta: la chapa circular ES el botón (owner 2026-10-07: «still
   nesting the chapas inside some square chrome») */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.4rem;max-width:1000px;margin:6vh auto 0;}
.path{
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  padding:.8rem;color:var(--ink);
  transition:transform .16s;
}
.path:hover{transform:translateY(-4px) scale(1.03);color:var(--ink);}
.path h3{margin:0;font-size:1.05rem;}
.path .pimg img{transition:filter .16s;}
.path:hover .pimg img{filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));}
.path.hero h3{color:var(--acc);}
.path.hero .pimg img{filter:drop-shadow(0 0 16px rgba(61,220,151,.25));}
.path.hero:hover .pimg img{filter:drop-shadow(0 0 20px rgba(61,220,151,.45));}
/* chapas circulares grandes, sin chrome cuadrado (owner 2026-10-07) */
.pimg{width:148px;height:148px;display:flex;align-items:center;justify-content:center;}
.pimg img{width:100%;height:100%;object-fit:contain;}

/* VARIANTES — pestañas + tarjetas */
.tabs{display:flex;gap:.4rem;margin-bottom:.9rem;}
.tabs button{background:var(--chip);color:var(--dim);border:1px solid var(--line);
  border-radius:9px;padding:.38rem .8rem;font-size:.9rem;}
.tabs button[aria-selected="true"]{color:var(--acc);border-color:var(--acc);
  background:var(--panel);font-weight:700;}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:.7rem;max-width:880px;}
.vcard{
  display:flex;flex-direction:column;gap:.15rem;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:.75rem .85rem;color:var(--ink);
}
.vcard:hover,.vcard:focus-visible{border-color:var(--acc);outline:none;}
.vcard.sel{border-color:var(--acc);background:var(--chip);
  box-shadow:inset 0 0 0 1px var(--acc);}
.vcard .vn{font-weight:700;}
.vcard .vm{display:flex;gap:.9rem;color:var(--dim);font-size:.8rem;
  font-variant-numeric:tabular-nums;}
.vcard .vm .live{color:var(--acc2);}
.vcard .vm .live::before{content:"● ";font-size:.62em;vertical-align:.15em;}
.vcard .vm .wait{color:var(--acc);}
.vcard .vm .wait::before{content:"⚔ ";font-size:.72em;vertical-align:.05em;}
/* multi-select de la cola: CUALQUIERA + animación de enseñanza (owner) */
.vcard.anycard{border-style:dashed;}
.vcard.anycard.sel{border-style:solid;}
.vcard.hot{border-color:var(--acc2);}
.vcard.hot .wait{font-weight:700;}
.vcard.pulse{animation:vpulse .3s ease-out;}
@keyframes vpulse{0%{transform:scale(.96);}60%{transform:scale(1.03);}100%{transform:none;}}
.vcard.flash{animation:vflash 1.6s ease-out;}
@keyframes vflash{0%,60%{box-shadow:0 0 0 3px var(--acc),inset 0 0 0 1px var(--acc);}
  100%{box-shadow:inset 0 0 0 1px var(--acc);}}
/* estado de búsqueda inline (vive junto al botón Buscar) */
#quickState{margin-top:.7rem;border:1px solid var(--line);border-radius:12px;
  padding:.8rem .9rem;background:var(--panel);}
#quickState .qstate{color:var(--ink);min-height:1.2em;}
#quickState .qmeta{color:var(--dim);font-size:.82rem;font-variant-numeric:tabular-nums;}
#quickState .qrow{display:flex;gap:.45rem;margin-top:.5rem;}
/* loby: la ÚNICA columna derecha (owner) */
.lobbycard{border:1px solid var(--line);border-radius:12px;padding:.9rem;}
#lobbyList .lobitempty{color:var(--dim);font-size:.9rem;padding:.4rem 0;}
#lobbyList .roomrow{display:flex;align-items:center;gap:.5rem;padding:.45rem 0;
  border-top:1px solid var(--line);}
#lobbyList .roomrow:first-child{border-top:none;}
#lobbyList .rid{font-weight:700;color:var(--acc);}
#lobbyList .rv{flex:1;color:var(--dim);font-size:.86rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.modchip{color:var(--acc);font-size:.72rem;letter-spacing:.06em;
  border:1px solid var(--acc);border-radius:6px;padding:0 .3rem;}
.joinrow.slim{margin-top:.7rem;}
#lobbyList .roomrow button{background:var(--chip);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:.35rem .7rem;font-size:.85rem;}
#lobbyList .roomrow button:hover{border-color:var(--acc);}
/* CREA TU PARTIDA — cancha viva + panel + cartel delgado (owner 2026-09-29).
   El cartel vive al COSTADO: la cancha y el marcador no se tapan (owner
   2026-09-30: «crea tu partida and the score board are both on top»). */
#createov{position:absolute;inset:0;z-index:11;display:flex;align-items:center;
  justify-content:flex-start;pointer-events:none;padding-left:2.5vw;}
#createov[hidden]{display:none;}
#createov .ccard{pointer-events:auto;background:var(--panel);border:1px solid var(--acc);
  border-radius:16px;padding:1.1rem 1.3rem;display:flex;flex-direction:column;
  gap:.6rem;align-items:center;min-width:min(24rem,92vw);text-align:center;
  box-shadow:var(--shadow);}
#createov .ctitle{font-size:1.15rem;font-weight:800;}
#createov .chint{color:var(--dim);font-size:.82rem;}
#createov .crow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  justify-content:center;width:100%;}
#createov input[type="text"]{flex:1;min-width:9rem;background:var(--chip);
  color:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:.5rem .7rem;font:inherit;}
#createov input[type="text"]:focus{outline:1px solid var(--acc);}
#createov .ccode{font-size:1.4rem;font-variant-numeric:tabular-nums;}
#createov .cwait{color:var(--dim);font-size:.82rem;}
#createov button{border-radius:10px;padding:.55rem .9rem;font-size:.92rem;
  background:var(--chip);color:var(--ink);border:1px solid var(--line);}
#createov button:hover{border-color:var(--acc);}
#createov button.go{background:var(--acc);color:var(--accInk);border-color:var(--acc);
  font-weight:700;}
#createov .jugar{width:100%;font-size:1.05rem;}
#createov .ctaller{color:var(--acc2);font-size:.85rem;text-decoration:none;}
#createov .ctaller:hover{text-decoration:underline;}
#createov .cprev{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:center;}
#createov .plab{color:var(--dim);font-size:.78rem;}
#createov .presetchip{border-radius:999px;padding:.25rem .7rem;font-size:.8rem;}
#createov .presetdel{border-radius:999px;padding:.25rem .45rem;font-size:.7rem;}
#createov .ctick{color:var(--dim);font-size:.82rem;display:flex;gap:.3rem;align-items:center;}

/* PREPARAR LA PARTIDA */
.prephead{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;}
.prephead h2{margin:0;}
#prepChips{display:flex;gap:.4rem;}
#prepChips .chip{font-size:.62rem;padding:.16rem .5rem;color:var(--acc);
  border-color:var(--acc);text-transform:uppercase;}
#prepBack{display:inline-block;margin:.3rem 0 .7rem;font-size:.84rem;}
.prep{max-width:760px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:1rem 1.1rem 1.2rem;}
.legend{margin:0 0 .8rem;font-size:.78rem;color:var(--dim);
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.prepgrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.4rem;}
.opt h4{margin:0 0 .4rem;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:.45rem;font-weight:700;}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.seg button{flex:1;background:transparent;border:none;color:var(--dim);
  padding:.5rem .3rem;font-size:.9rem;border-left:1px solid var(--line);}
.seg button:first-child{border-left:none;}
.seg button:hover{color:var(--ink);background:var(--chip);}
.seg button.on{background:var(--chip);color:var(--acc);font-weight:700;}
.names{display:grid;gap:.45rem;}
.names label{display:grid;gap:.2rem;font-size:.76rem;color:var(--dim);}
.names label span{color:var(--dim);}
.names input{background:var(--chip);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.4rem .55rem;font:inherit;}
.names input:focus{outline:1px solid var(--acc);}
.opt.wide{grid-column:1/-1;}
/* la vista 3D es un acceso PRIMERO y a todo lo ancho (owner 2026-11-04) */
.opt.viewopt{grid-column:1/-1;}
.opt.viewopt .seg.big{max-width:26rem;}
.opt.viewopt .seg.big button{padding:.45rem .6rem;font-size:.92rem;}
.opt.viewopt .seg.big button.on{box-shadow:inset 0 0 0 1px var(--acc2);}
.kits{display:flex;align-items:center;gap:.55rem;margin:.35rem 0;}
.klab{width:5.2rem;font-size:.76rem;color:var(--dim);flex:none;}
.kitrow{display:flex;gap:.4rem;flex-wrap:wrap;}
.kchip{display:flex;align-items:center;gap:.4rem;background:var(--chip);
  border:1px solid var(--line);border-radius:99px;padding:.28rem .7rem .28rem .4rem;
  color:var(--ink);font-size:.82rem;}
.kchip .kd{width:.95rem;height:.95rem;border-radius:50%;border:1px solid #0006;}
.kchip.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc);}
.jugar{margin-top:1.1rem;width:min(240px,100%);background:var(--acc);color:var(--accInk);
  border:none;border-radius:12px;padding:.75rem 1rem;font-size:1.05rem;
  font-weight:800;letter-spacing:.1em;}
.jugar:hover{filter:brightness(1.07);}
@media (prefers-reduced-motion:no-preference){
  .jugar:active{transform:scale(.98);}
}

/* ─────────── POR INTERNET ─────────── */
.onlinewrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);
  gap:1.3rem;max-width:980px;}
.ocol{min-width:0;display:flex;flex-direction:column;gap:.9rem;}
.ohead{margin:0 0 .45rem;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);}
.joinrow{display:flex;gap:.45rem;}
.joinrow input{flex:1;min-width:0;background:var(--chip);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:.48rem .6rem;font:inherit;
  font-size:.88rem;}
.joinrow input:focus{outline:1px solid var(--acc);}
.joinrow button{background:var(--acc);color:var(--accInk);border:none;border-radius:9px;
  padding:.48rem .9rem;font-weight:700;}
.qactions{display:flex;gap:.5rem;margin-top:.7rem;}
.qactions button{flex:1;border-radius:10px;padding:.6rem .8rem;font-size:.95rem;
  background:var(--chip);color:var(--ink);border:1px solid var(--line);}
.qactions button:hover{border-color:var(--acc);}
.qactions button.go{background:var(--acc);color:var(--accInk);border-color:var(--acc);
  font-weight:700;}
.rulescard,.queuecard,.lobbycard{background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:.8rem .9rem;}
.rulescard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;
  font-size:.86rem;}
.rulescard dt{color:var(--dim);}
.rulescard dd{margin:0;text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums;}
.rulescard .law{grid-column:1/-1;color:var(--acc2);font-size:.76rem;
  border-top:1px solid var(--line);padding-top:.4rem;margin-top:.2rem;}
#queueBox{display:flex;flex-direction:column;gap:.55rem;font-size:.9rem;}
#queueBox .qstate{color:var(--dim);min-height:1.2em;}
#queueBox .rival{background:var(--chip);border:1px solid var(--acc);border-radius:10px;
  padding:.55rem .65rem;}
#queueBox .qrow{display:flex;gap:.45rem;}
#queueBox button{background:var(--chip);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:.42rem .7rem;font-size:.88rem;}
#queueBox button.go{background:var(--acc);color:var(--accInk);border-color:var(--acc);
  font-weight:700;}
#queueBox button:disabled{opacity:.45;cursor:not-allowed;}
.roomrow{display:flex;align-items:center;gap:.6rem;padding:.4rem .2rem;
  border-bottom:1px solid var(--line);font-size:.86rem;}
.roomrow:last-child{border-bottom:none;}
.roomrow .rid{font-weight:600;}
.roomrow .rv{color:var(--dim);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.roomrow button{background:var(--chip);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.26rem .6rem;font-size:.8rem;}
.roomrow button:hover{border-color:var(--acc);}
.lobitempty{color:var(--dim);font-size:.84rem;padding:.4rem 0;}
#lobbyCard[hidden]{display:none;}
@media (max-width:760px){.onlinewrap{grid-template-columns:1fr;}
  .prepgrid{grid-template-columns:1fr;}}

/* ─────────── PARTIDO ─────────── */
.screen.match{padding:0;overflow:hidden;display:flex;}
.screen.match[hidden]{display:none;} /* display:flex no puede pisar al atributo hidden */
#stage{flex:1;position:relative;min-width:0;}
/* vista 3D: escena WebGL DEBAJO (#gl), la capa de apuntado 2D (#cv) ARRIBA.
   #gl sólo se muestra cuando render3d toma el mando (clase stage3d);
   los punteros siguen entrando por #cv (arriba), #gl es decorativo. */
canvas#gl{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:none;pointer-events:none;}
#stage.stage3d canvas#gl{display:block;}
canvas#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;}
#matchCluster{
  position:absolute;top:10px;left:10px;z-index:8;display:flex;gap:.35rem;
}
#matchCluster button{
  width:2.15rem;height:2.15rem;display:flex;align-items:center;justify-content:center;
  background:rgba(10,18,15,.82);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;font-size:.95rem;backdrop-filter:blur(4px);padding:0;
}
#matchCluster button:hover{border-color:var(--acc2);}
#matchCluster button.wedge.pulse{animation:wedgepulse .6s ease-out 2;}
@keyframes wedgepulse{0%{box-shadow:0 0 0 0 var(--acc);}
  100%{box-shadow:0 0 0 9px transparent;}}
/* «Volver al juego» — cerrar el panel, UN gesto siempre a la vista (móvil el
   panel es pantalla entera: sin esto no había vuelta al partido) */
.pclosebar{flex:none;padding:.4rem .55rem;background:var(--bg2);
  border-bottom:1px solid var(--line);}
#panelClose{width:100%;background:var(--chip);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:.52rem .7rem;
  font-weight:700;font-size:.85rem;}
#panelClose:hover{border-color:var(--acc);color:var(--acc);}
/* medidor de localStorage (Config · carpeta) — goal 2026-10-01 */
.meterbar{height:.5rem;background:var(--chip);border:1px solid var(--line);
  border-radius:99px;overflow:hidden;margin:.35rem 0 .2rem;}
.meterbar>div{height:100%;background:var(--acc);width:0%;
  transition:width .3s ease-out;}
.meterrow{display:flex;justify-content:space-between;gap:.4rem;
  font-size:.74rem;color:var(--dim);padding:.1rem 0;}
/* HUD #partido (DESIGN-v2 §3.5): chips de chapa + nombre, chip TURNO
   pulsante bajo el que la tiene, reloj GRANDE al centro, tanteador debajo.
   Escritorio: aterriza a la IZQUIERDA, debajo del logo del topbar — jamás
   sobre el campo (owner 2026-10-03); el móvil lo mantiene centrado arriba. */
#scorebug{
  position:absolute;top:10px;left:12px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.9rem;
  padding:.5rem .95rem;min-width:0;
  background:rgba(10,18,15,.82);border:1px solid var(--line);border-radius:var(--radius);
  font-size:.86rem;pointer-events:none;white-space:nowrap;backdrop-filter:blur(4px);
  color:var(--ink);
}
#scorebug .tside{display:flex;align-items:center;gap:.55rem;min-width:0;}
/* barra del tiempo límite: al pie del marcador, teal→ámbar→roja al final */
#scorebug .mtimebar{position:absolute;left:12px;right:12px;bottom:3px;height:4px;
  border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;}
#scorebug .mtimebar i{display:block;height:100%;border-radius:3px;
  background:var(--acc);transition:width .28s linear,background-color .4s;}
#scorebug .mtimebar.amber i{background:#e2b93b;}
#scorebug .mtimebar.red i{background:#e2574c;}
#scorebug .tside.b{justify-content:flex-end;}
#scorebug .twho{display:flex;flex-direction:column;min-width:0;align-items:flex-start;gap:.18rem;}
#scorebug .tside.b .twho{align-items:flex-end;}
#scorebug .tcap{flex:none;width:.85rem;height:.85rem;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px var(--line);}
#scorebug .tname{font-weight:800;font-size:.95rem;max-width:11rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#scorebug .tname.you{border-bottom:2px solid var(--acc2);padding-bottom:.05rem;}
#scorebug .vtag{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc2);border:1px solid var(--acc2);border-radius:99px;
  padding:0 .3rem;margin-left:.25rem;}
#scorebug .turnchip[hidden]{display:none;}
#scorebug .turnchip{display:inline-flex;align-items:center;gap:.3rem;
  font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;
  color:var(--acc);background:var(--chip);border:1px solid var(--acc);
  border-radius:6px;padding:.1rem .35rem;}
#scorebug .livedot{width:.38rem;height:.38rem;border-radius:50%;background:var(--acc);
  display:inline-block;}
@media (prefers-reduced-motion:no-preference){
  #scorebug .livedot{animation:bugpulse 2.4s infinite;}
  @keyframes bugpulse{50%{opacity:.3;}}
}
#scorebug .mcenter{text-align:center;display:flex;flex-direction:column;gap:.05rem;
  align-items:center;}
#scorebug .mclock{font-size:2.1rem;font-weight:800;line-height:1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
#scorebug .mscore{font-size:1.05rem;font-weight:800;color:var(--dim);line-height:1;
  font-variant-numeric:tabular-nums;}
#scorebug .mroom{font-size:.62rem;color:var(--dim);letter-spacing:.04em;}
#banner{
  flex:none;height:28px;line-height:26px;padding:0 .8rem;
  background:var(--bg);border-bottom:1px solid var(--line);
  font-size:.84rem;text-align:center;pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s;opacity:0;
}
#banner.show{opacity:1;}
#banner b{color:var(--acc);}
#divebar{
  position:absolute;top:0;left:0;height:4px;width:0%;
  background:var(--acc);transition:width .06s linear;display:none;
}
#goalov{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  pointer-events:none;z-index:6;
}
#goalov .txt{
  font-size:clamp(2.4rem,9vw,5.5rem);font-weight:900;letter-spacing:.1em;
  color:#fff;text-shadow:0 0 26px rgba(61,220,151,.8),0 4px 18px rgba(0,0,0,.7);
  transform:rotate(-4deg);animation:goalpop .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes goalpop{from{transform:scale(.2) rotate(-14deg);opacity:0;}
  to{transform:scale(1) rotate(-4deg);opacity:1;}}
#fps{position:absolute;right:8px;bottom:6px;color:var(--dim);font-size:.72rem;display:none;
     font-variant-numeric:tabular-nums;}

/* ─────────── Panel DT (rail + panes) — intacto ─────────── */
#panel{
  width:360px;flex:none;display:flex;
  background:var(--panel);border-left:1px solid var(--line);overflow:hidden;
}
#panel.hidden{display:none;}
#panel.compact{font-size:.9rem;}
#panel select option,#panel select optgroup{background:var(--chip);color:var(--ink);}
#panelRail{
  width:52px;flex:none;display:flex;flex-direction:column;gap:3px;
  padding:.45rem .4rem;background:var(--bg2);border-left:1px solid var(--line);
  overflow-y:auto;scrollbar-width:none;
}
#panelRail::-webkit-scrollbar{display:none;}
#panelRail button{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  border:1px solid transparent;background:transparent;color:var(--dim);
  border-radius:9px;padding:0;cursor:pointer;flex:none;
}
#panelRail button:hover{color:var(--ink);border-color:var(--line);background:var(--chip);}
#panelRail button.active{color:var(--acc);border-color:var(--acc);background:var(--chip);}
#panelRail button:focus-visible{outline:1px solid var(--acc);}
#panelRail button svg{display:block;pointer-events:none;}
#panelRail button.over{
  color:var(--acc);border-color:var(--acc);border-style:dashed;background:var(--chip);}
#railToggle{color:var(--ink);}
#panelWrap{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;}
.ptoolbar{flex:none;padding:.4rem .55rem;background:var(--bg2);border-bottom:1px solid var(--line);}
.ptoolbar input{
  width:100%;background:var(--chip);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.3rem .55rem;font:inherit;font-size:.8rem;
}
.ptoolbar input:focus{outline:1px solid var(--acc);}
#panelScroll{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:.4rem .55rem 1.2rem;scrollbar-width:thin;
}
.psec.pane{display:none;border:1px solid var(--line);border-radius:9px;
  margin:.2rem 0;background:var(--panel);}
.psec.pane.active{display:block;}
.psec .ptitle{
  position:sticky;top:-.4rem;z-index:2;cursor:default;user-select:none;
  display:grid;gap:.05rem;padding:.45rem .55rem;background:var(--panel);
  border-bottom:1px solid var(--line);border-radius:9px 9px 0 0;
}
.psec .srow{display:flex;align-items:center;gap:.45rem;min-width:0;}
.psec .stitle{font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.psec .ssum{font-size:.64rem;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
details.pgrp .chev{margin-left:auto;color:var(--dim);font-size:.7rem;
  transition:transform .15s;flex:none;}
details.pgrp[open] .chev{transform:rotate(90deg);}
.psec .pec{padding:.45rem .6rem .8rem;}
.phint{font-size:.7rem;color:var(--dim);text-align:center;padding:.8rem .3rem;opacity:.85;}
.star{color:var(--acc);margin-right:.18rem;font-size:.92em;}
.draglab{cursor:grab;}
.draglab:active{cursor:grabbing;}
.draglab:hover{text-decoration:underline dotted;}
.psec.quick{
  flex:none;margin:.35rem .5rem .5rem;background:var(--bg2);
  border-top:2px solid var(--acc2);
}
.psec.quick.over{border-color:var(--acc);}
.traydrop{
  display:flex;flex-direction:column;gap:.15rem;min-height:2.1rem;
  /* sin scroll propio: el panel ya tiene UN scroll (owner 2026-09-30) —
     un cajón con tope adentro de una caja con scroll es doble barsa */
  border:1px dashed var(--line);border-radius:8px;padding:.3rem .45rem;margin-top:.3rem;
}
.psec.quick.over .traydrop{border-color:var(--acc);border-style:solid;background:var(--chip);}
.trayempty{font-size:.68rem;color:var(--dim);text-align:center;padding:.5rem 0;}
.ctl.intray{position:relative;padding-right:1.4rem;}
.qdel{
  position:absolute;top:.05rem;right:0;width:1.25rem;height:1.25rem;line-height:1;
  padding:0;font-size:.66rem;border-radius:6px;color:var(--dim);
}
.sechead{display:flex;align-items:center;gap:.45rem;margin:.1rem 0 .3rem;}
.sechead h3{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);}
.chip{font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border-radius:99px;padding:.08rem .45rem;border:1px solid var(--line);color:var(--dim);}
.chip.rules{color:var(--acc);border-color:var(--acc);}
.chip.pres{color:var(--acc2);border-color:var(--acc2);}
details.pgrp{
  border:1px solid var(--line);border-radius:8px;margin:.45rem 0 .2rem;background:var(--panel);
}
details.pgrp>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:.4rem;padding:.32rem .5rem;border-radius:8px;
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc2);
}
details.pgrp>summary::-webkit-details-marker{display:none;}
details.pgrp>summary:hover{background:var(--chip);}
details.pgrp[open]>summary{border-bottom:1px solid var(--line);
  border-bottom-left-radius:0;border-bottom-right-radius:0;}
details.pgrp>summary .chev{margin-left:auto;color:var(--dim);font-size:.66rem;
  transition:transform .15s;flex:none;}
details.pgrp[open]>summary .chev{transform:rotate(90deg);}
.pgc{padding:.35rem .55rem .6rem;}
.ctl{display:grid;grid-template-columns:1fr 62px;gap:.35rem .5rem;align-items:center;margin:.34rem 0;}
.ctl .lab{grid-column:1/-1;font-size:.76rem;color:var(--dim);
  display:flex;justify-content:space-between;gap:.4rem;}
.ctl .lab .restartflag{color:var(--acc2);font-size:.66rem;}
.ctl input[type=range]{width:100%;accent-color:var(--acc);}
.ctl input[type=number],.ctl input[type=text]{
  width:100%;background:var(--chip);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:.2rem .3rem;font:inherit;font-size:.8rem;}
.ctl input[type=text]{padding:.22rem .35rem;}
.ctl input:focus{outline:1px solid var(--acc);}
.ctl.one{grid-template-columns:1fr;}
.ctl .chkline{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ink);}
.ctl input[type=color]{width:100%;height:1.7rem;padding:0;border:1px solid var(--line);
  border-radius:6px;background:var(--chip);}
.ctl select{width:100%;}
.pec textarea{width:100%;min-height:74px;font-size:.7rem;
  font-family:ui-monospace,monospace;background:var(--chip);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;}
.note{font-size:.68rem;color:var(--dim);margin:.2rem 0 .5rem;}
.btnrow{display:flex;gap:.4rem;flex-wrap:wrap;margin:.3rem 0;}
#ctxmenu{
  position:fixed;z-index:50;min-width:14.5rem;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--acc2);border-radius:9px;padding:.25rem;
  box-shadow:var(--shadow);
}
#ctxmenu button{
  display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;
  background:transparent;border:none;border-radius:6px;color:var(--ink);
  font-size:.78rem;padding:.42rem .5rem;
}
#ctxmenu button:hover{background:var(--chip);color:var(--acc);border-color:transparent;}
.ranktable{display:flex;flex-direction:column;gap:2px;}
.rrow{display:grid;grid-template-columns:1.6rem 1fr auto auto;gap:.5rem;
  font-size:.78rem;padding:.22rem .35rem;border-radius:6px;background:var(--chip);}
.rrow:nth-child(odd){background:var(--bg);}
.rrow span:nth-child(3){color:var(--acc);font-variant-numeric:tabular-nums;}
.rrow span:nth-child(4){color:var(--dim);}

/* ─────────── toasts + pie ─────────── */
footer{
  position:relative;
  padding:.25rem .8rem;font-size:.68rem;color:var(--dim);
  background:var(--bg2);border-top:1px solid var(--line);
}
footer b{color:var(--acc2);font-weight:600;}
#toasts{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
  z-index:9;width:max-content;max-width:92vw;}
#toasts .toast:nth-last-child(n+3){display:none;}
.toast{
  background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.4rem .8rem;font-size:.85rem;animation:toastin .18s ease-out;
  box-shadow:var(--shadow);
}
@keyframes toastin{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}}

@media (max-width:760px){
  #main{flex-direction:column;}
  #panel{
    position:fixed;inset:0;z-index:20;width:auto;max-height:none;
    border-left:none;border-top:1px solid var(--line);
    padding-top:calc(var(--hdrH,3.2rem) + .3rem);
    background:var(--bg);
  }
  #panel.hidden{display:none;}
  #panelRail{width:44px;}
  .traydrop{min-height:2.1rem;}
  .psec[data-sec="config"] .pec{max-height:none;}
  #topbar{gap:.45rem;padding:.3rem .5rem;}
  #topbar .logo img{height:1.1rem;}
  #navTaller span{display:none;}
  #navTaller{padding:.3rem .45rem;}
  #navCatalogo span{display:none;} /* el wordmark es ancho: catálogo queda en icono */
  #navCatalogo{padding:.3rem .45rem;}
  #me{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;}
  /* los 4 caminos caben EN pantalla (owner 2026-09-30): grilla 2×2 compacta */
  .paths{grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.2vh;
    max-width:34rem;}
  .path{padding:.5rem;gap:.35rem;}
  .pimg{width:104px;height:104px;}
  .path h3{font-size:.88rem;}
  /* partido en móvil: el cluster NO pisa el marcador (owner, 2026-09-28) */
  body[data-route="partido"] #topbar{display:none;}
  #scorebug{top:6px;left:50%;transform:translateX(-50%);
    gap:.5rem;padding:.35rem .6rem;min-width:0;width:96%;}
  #scorebug .tname{font-size:.8rem;max-width:5.2rem;}
  #scorebug .mclock{font-size:1.3rem;}
  #scorebug .mscore{font-size:.85rem;}
  #matchCluster{top:auto;bottom:10px;left:auto;right:8px;} /* pulgar derecho */
  #matchCluster button{width:2.5rem;height:2.5rem;font-size:1.05rem;}
}

/* ?debug=1 — overlay de diagnóstico (nunca visible sin el flag) */
#dbg{position:fixed;left:.5rem;bottom:.5rem;z-index:9999;max-width:92vw;
  background:#000c;color:#9fe8c9;font:.72rem/1.45 ui-monospace,monospace;
  border:1px solid #2a4a3a;border-radius:8px;padding:.45rem .6rem;
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* RESULTADO / REVANCHA — aparece sólo al terminar (owner: nada de botoncito).
   SALA (ready-check) — mismo card antes del arranque: LISTO con cancelación. */
#resultov,#roomov{position:absolute;inset:0;z-index:12;display:flex;align-items:center;
  justify-content:center;background:rgba(5,10,8,.66);backdrop-filter:blur(3px);}
#roomov{z-index:11;background:rgba(5,10,8,.55);backdrop-filter:blur(2px);}
#resultov[hidden],#roomov[hidden]{display:none;}
#resultov .rcard,#roomov .rcard{background:var(--panel);border:1px solid var(--acc);
  border-radius:16px;
  padding:1.4rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;align-items:center;
  min-width:min(21rem,88vw);text-align:center;}
#resultov .rtitle,#roomov .rtitle{font-size:1.25rem;font-weight:800;}
#roomov .rvs{color:var(--dim);font-size:.95rem;}
#roomov .rcount{font-size:3.2rem;font-weight:800;color:var(--acc);
  font-variant-numeric:tabular-nums;line-height:1;min-height:3.2rem;}
#resultov .rscore{color:var(--dim);font-variant-numeric:tabular-nums;}
#resultov .rrow,#roomov .rrow{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.3rem;}
#resultov .rrow button,#roomov .rrow button{border-radius:10px;padding:.6rem .95rem;font-size:.95rem;
  background:var(--chip);color:var(--ink);border:1px solid var(--line);}
#resultov .rrow button:hover,#roomov .rrow button:hover{border-color:var(--acc);}
#resultov .rrow button.go,#roomov .rrow button.go{background:var(--acc);color:var(--accInk);
  border-color:var(--acc);
  font-weight:700;}
#roomov .rrow button.onready{background:var(--chip);color:var(--ink);border-color:var(--acc);
  font-weight:600;}
#resultov .rrow button:disabled{opacity:.5;cursor:wait;}
#resultov .rwait,#roomov .rwait{color:var(--dim);font-size:.82rem;}

/* previa del partido en el LISTO (owner 2026-10-03): camisetas con color y
   nombre, leyes de la mesa, dropdowns de camiseta y vista rápida */
#roomov .rmatch{display:flex;flex-direction:column;gap:.55rem;width:100%;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.55rem 0;}
#roomov .rmatch[hidden]{display:none;}
#roomov .rteams{display:flex;align-items:center;justify-content:center;gap:.7rem;}
#roomov .tchip{display:flex;align-items:center;gap:.4rem;min-width:0;
  max-width:11rem;}
#roomov .tchip .dot{flex:none;width:.9rem;height:.9rem;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px var(--line);}
#roomov .tchip span{font-weight:800;font-size:.95rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
#roomov .rx{color:var(--dim);}
#roomov .rlaws{color:var(--acc2);font-size:.82rem;letter-spacing:.03em;}
#roomov .rpickrow{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  color:var(--dim);font-size:.8rem;}
#roomov .rpickrow select{max-width:9.5rem;background:var(--chip);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:.2rem .3rem;font-size:.8rem;}
#roomov .rview{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;
  align-items:center;}
#roomov .rview button{background:var(--chip);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:.25rem .6rem;
  font-size:.8rem;}
#roomov .rview button:hover{border-color:var(--acc2);}
#roomov .rview button.toggled{border-color:var(--acc2);color:var(--acc2);}
#roomov .rview .ctick{color:var(--dim);font-size:.8rem;display:flex;
  gap:.3rem;align-items:center;}

/* camisetas compartidas (owner 2026-10-03): dos consientes — dar la mía /
   tomar la suya — en el cartel de organizar y en el LISTO */
.shirts{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;
  color:var(--dim);font-size:.82rem;}
.shirts .ctick{display:flex;gap:.3rem;align-items:center;}
.shirts[hidden]{display:none;}

/* EMOTES — preset ids, burbujita efímera del lado de quien manda */
.emote{position:absolute;bottom:24%;left:10%;z-index:9;font-size:2.2rem;
  pointer-events:none;animation:emoteup 1.9s ease-out forwards;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.emote.right{left:auto;right:10%;}
@keyframes emoteup{0%{opacity:0;transform:translateY(14px) scale(.5);}
  18%{opacity:1;transform:none;}78%{opacity:1;}
  100%{opacity:0;transform:translateY(-30px);}}
#emoteWrap{position:relative;}
#btnEmote{font-size:1rem;}
#emoteRow{position:absolute;bottom:3.2rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.25rem;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:.35rem;z-index:14;}
#emoteRow[hidden]{display:none;}
#emoteRow button{font-size:1.25rem;background:none;border:none;cursor:pointer;
  padding:.2rem .3rem;border-radius:8px;}
#emoteRow button:hover{background:var(--chip);}

/* modo «crea tu partida»: el marcador calla — ahí no se juega un partido real */
#stage.creating #scorebug{display:none;}
#stage.creating #divebar{display:none;}

/* escritorio: el topbar NO se va en partido — logo a la izquierda, cluster en
   el topbar a la derecha (owner 2026-10-03); nada de navegación en el medio.
   El bloque vive AL FINAL de la sección: pisa a los bases de arriba. */
@media (min-width:761px){
  body[data-route="partido"] #topbar{display:flex;}
  body[data-route="partido"] #mainnav,
  body[data-route="partido"] #navTaller,
  body[data-route="partido"] #navCatalogo,
  body[data-route="partido"] #me,
  body[data-route="partido"] #btnTheme{display:none;}
  #matchCluster{position:fixed;top:.3rem;right:.8rem;left:auto;z-index:40;}
  #emoteRow{bottom:auto;top:3.2rem;} /* el cluster vive arriba: abre hacia abajo */
}