/* Chapitas · La Mesa — chrome. Dark UI, teal/green accents (no gold on dark). */
:root{
  --bg:#0d1412; --bg2:#111c18; --panel:#0f1a16; --line:#1e3129;
  --ink:#e8f4ee; --dim:#8fae9f; --acc:#3ddc97; --acc2:#2bb3a3;
  --warn:#e35d6a; --chip:#16241f; --radius:10px;
  font-size:15px;
}
*{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;
}
header{
  position:relative;z-index:30; /* stays clickable above the mobile overlay */
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.45rem .8rem;background:var(--bg2);border-bottom:1px solid var(--line);
}
header h1{font-size:1rem;margin:0;letter-spacing:.14em;font-weight:700;}
header h1 em{color:var(--acc);font-style:normal;}
header .sep{width:1px;height:1.3rem;background:var(--line);}
select,button,textarea{
  background:var(--chip);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.32rem .55rem;font:inherit;font-size:.86rem;
}
select:focus,button:focus,textarea:focus{outline:1px solid var(--acc);}
button{cursor:pointer;}
button:hover{border-color:var(--acc2);}
button.primary{background:var(--acc);color:#06251a;border-color:var(--acc);font-weight:700;}
button.toggled{border-color:var(--acc);color:var(--acc);}
kbd{background:var(--chip);border:1px solid var(--line);border-radius:4px;padding:0 .3rem;font-size:.8em;}
#main{flex:1;display:flex;min-height:0;}
#stage{flex:1;position:relative;min-width:0;}
canvas#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;}

/* scorebug */
#scorebug{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.7rem;padding:.35rem .8rem;
  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);
}
#scorebug .team{display:flex;align-items:center;gap:.4rem;font-weight:600;}
#scorebug .nm{max-width:8.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#scorebug .dot{width:.68rem;height:.68rem;border-radius:50%;}
#scorebug .score{font-size:1.06rem;font-weight:800;letter-spacing:.06em;}
#scorebug .clock{color:var(--dim);font-variant-numeric:tabular-nums;}
#scorebug .poss{outline:2px solid var(--acc);outline-offset:2px;border-radius:50%;}

/* banner — a dedicated slim strip BETWEEN header and #main: full width, one
   line, ellipsis. Messages never cover the pitch (see #6 punch list). */
#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;
}
/* toasts live in the FOOTER area: anchored to the footer's top edge, so they
   rise into the stage's letterbox margin (≥28px) instead of the pitch */
#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;} /* cap visible stack → no pitch overlap */
.toast{
  background:rgba(10,18,15,.92);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:.4rem .8rem;font-size:.85rem;animation:toastin .18s ease-out;
}
@keyframes toastin{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}}
#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 — sidebar: always-visible icon rail on the left + collapsible body.
   "Closed" panel = body hidden, rail stays (the rail's topmost icon toggles it,
   and re-opening selects the ⭐ Accesos drawer). */
#panel{
  width:360px;flex:none;display:flex;
  background:var(--panel);border-left:1px solid var(--line);overflow:hidden;
  color-scheme:dark; /* native popups (selects) render dark */
}
#panel.hidden{display:none;}
#panel.compact{font-size:.9rem;}
/* belt & braces for select option visibility (team selects had invisible rows
   on some engines): explicit dark background + ink text on options/optgroups */
#panel select option,#panel select optgroup{background:#16241f;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{ /* drag-to-star hover on the ⭐ Accesos rail icon */
  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;
}
/* one icon = one pane: only the .active pane renders; the rail drives it */
.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;}
.psec[data-sec="config"] .pec{max-height:44vh;overflow-y:auto;scrollbar-width:thin;}
.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;}

/* ⭐ Accesos — a proper drawer, ALONE pinned at the bottom of the panel body
   (after Config · carpeta). The old tray separator lives on as its accent border. */
.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;
  max-height:32vh;overflow-y:auto;scrollbar-width:thin;
  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);}
/* collapsible sub-groups inside a section ({g:"…"} rows → nested <details>,
   all closed by default, open state persisted per group in panel.grp.<hash>) */
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]{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]{background:var(--chip);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:.22rem .35rem;font:inherit;font-size:.8rem;}
.ctl input[type=text]: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;}
/* right-click «⭐ Añadir a Accesos» context menu */
#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:0 10px 26px rgba(0,0,0,.55);
}
#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;}
footer{
  position:relative; /* #toasts anchor: bottom:100% = just above the footer */
  padding:.25rem .8rem;font-size:.68rem;color:var(--dim);
  background:var(--bg2);border-top:1px solid var(--line);
}
@media (max-width:760px){
  #main{flex-direction:column;}
  /* the panel is a slide-up OVERLAY: closed = gone, game fills the screen */
  #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.6rem) + .3rem); /* clears the wrapping header */
    background:var(--bg);
  }
  #panel.hidden{display:none;}
  #panelRail{width:44px;}
  .traydrop{max-height:16vh;}
  .psec[data-sec="config"] .pec{max-height:34vh;}
  header{flex-wrap:nowrap;gap:.3rem;padding:.3rem .4rem;}
  header h1{font-size:.68rem;letter-spacing:.05em;flex:none;}
  header .sep{display:none;}
  header select{flex:1;min-width:0;font-size:.68rem;padding:.26rem .25rem;}
  header button{flex:none;font-size:.7rem;padding:.26rem .4rem;white-space:nowrap;}
  header .btxt{display:none;} /* icons only: ⚙ ⏸ */
  #btnNew .btxt{display:inline;} /* keep the primary CTA readable */
  #btnNew{font-size:.64rem;padding:.26rem .35rem;}
}

/* 🏆 Rankings pane */
.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);}