:root{
  /* Layout idea: one drum-machine faceplate. Graphite panel, cream silkscreen, each instrument owns a pad color. */
  --bg:#141210;
  --panel:#211e1b;
  --panel-2:#2b2723;
  --line:#3a352f;
  --ink:#efe6d2;
  --ink-dim:#a0978a;
  --led:#ff4a2a;
  --ok:#72c47e; --close:#e7b84a; --miss:#6b635a;
  --kick:#e2482f; --snare:#f08a24; --hat:#f2c230; --ohat:#e6dcc2; --tom:#86b6c8;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --labw:92px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--mono);-webkit-font-smoothing:antialiased;padding:24px 16px 48px}
button,input{font:inherit;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.plate{max-width:780px;margin:0 auto;background:linear-gradient(180deg,#26221f,var(--panel) 140px);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:20px;box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
header{display:flex;flex-direction:column;gap:14px}
h1{font:900 clamp(48px,11vw,88px)/.82 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:0;text-wrap:balance}
.stripe{display:flex;gap:4px;margin-top:12px}
.stripe i{height:6px;width:34px;border-radius:2px}
.tagline{margin:10px 0 0;color:var(--ink-dim);font-size:13px}
.meta{font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em;display:flex;gap:18px;flex-wrap:wrap}
.legend:empty,.history:empty{display:none}
.meta strong{color:var(--ink);font-weight:600}
.meta .who strong{text-transform:none;letter-spacing:.02em}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tab{background:transparent;border:0;border-left:1px solid var(--line);padding:10px 8px;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:12px;display:flex;justify-content:center;align-items:center;gap:8px}
.tab:first-child{border-left:0}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.pip{font-size:12px;min-width:1ch}
.pip[data-s="solved"]{color:var(--ok)}
.pip[data-s="failed"]{color:var(--kick)}
.tab[aria-selected="true"] .pip[data-s="solved"]{color:#2f7a3b}
.tab[aria-selected="true"] .pip[data-s="failed"]{color:#b0301b}
.spec{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em}
.spec b{color:var(--ink);font-weight:600}
.transport{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.btn{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:12px 16px;cursor:pointer;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.btn:hover{border-color:var(--ink-dim)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.3)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);flex:1 1 220px;justify-content:space-between;font-size:15px;padding:14px 18px}
.btn.primary .count{font-size:12px;letter-spacing:.08em;background:rgba(0,0,0,.12);border-radius:4px;padding:3px 7px}
.btn.check{border-color:var(--ink);}
.btn .sub{font-weight:400;color:var(--ink-dim);font-size:12px;text-transform:none;letter-spacing:0}
.btn.playing{border-color:var(--led)}
.btn.primary.playing{background:#f7d9c8}
.btn.busy{cursor:progress}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35;flex:none}
.playing .dot{background:var(--led);opacity:1;box-shadow:0 0 8px var(--led)}
.busy .dot{animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:1}}
.grid{display:flex;flex-direction:column;gap:18px;background:#1a1816;border:1px solid var(--line);border-radius:10px;padding:16px 14px}
.grid .loading{color:var(--ink-dim);font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding:28px 0;text-align:center}
.cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
.block{display:grid;grid-template-columns:var(--labw) repeat(var(--n),minmax(0,1fr)) 24px;gap:7px 5px;align-items:center}
.led{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--ink-dim);line-height:1}
.led b{font-weight:500;min-height:10px}
.led::after{content:"";width:7px;height:7px;border-radius:50%;background:#3a1a14;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.led.lit::after{background:var(--led);box-shadow:0 0 8px var(--led),0 0 2px #fff}
.lab{display:flex;align-items:center;gap:7px;background:none;border:0;padding:4px 0;cursor:pointer;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);min-width:0}
.lab:hover{color:var(--ink)}
.lab i{width:9px;height:9px;border-radius:2px;background:var(--c);flex:none}
.lab .s{display:none}
.pad{--c:var(--ink);aspect-ratio:3/4;min-width:0;width:100%;padding:0;border-radius:4px;border:1px solid rgba(0,0,0,.5);background:color-mix(in srgb,var(--c) 13%,var(--panel-2));box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);cursor:pointer;position:relative;transition:background-color .08s,filter .08s}
.pad.alt{background:color-mix(in srgb,var(--c) 22%,var(--panel-2))}
.pad:hover:not(:disabled){filter:brightness(1.25)}
.pad.on{background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 0 12px color-mix(in srgb,var(--c) 40%,transparent)}
.pad.now{filter:brightness(1.45)}
.pad:disabled{cursor:default}
.pad.missed{outline:2px dashed var(--ink);outline-offset:-4px}
.pad.extra::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:13px;font-weight:600}
.chip{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--bg)}
.chip[data-code="g"]{background:var(--ok)}
.chip[data-code="y"]{background:var(--close)}
.chip[data-code="x"]{background:var(--miss);color:var(--ink)}
.legend{font-size:12px;color:var(--ink-dim);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.legend .chip{display:inline-grid;vertical-align:middle;margin-right:6px}
.history{display:flex;flex-direction:column;gap:6px}
.hrow{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--ink-dim)}
.hrow .sq{display:flex;gap:4px}
.hrow .sq span{width:18px;height:18px;border-radius:4px}
.sq span[data-code="g"]{background:var(--ok)}
.sq span[data-code="y"]{background:var(--close)}
.sq span[data-code="x"]{background:var(--miss)}
.notice{border:1px solid var(--led);background:color-mix(in srgb,var(--led) 12%,var(--panel-2));border-radius:8px;padding:10px 14px;font-size:13px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.notice:empty{display:none}
.notice .btn{padding:6px 12px;font-size:12px}
.result{border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--panel-2)}
.result h2{font:900 40px/.9 var(--display);text-transform:uppercase;margin:0}
.result p{margin:0;color:var(--ink-dim)}
.result p b{color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.share-fallback{width:100%;min-height:110px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;font:13px/1.5 var(--mono)}
.toast{font-size:12px;color:var(--ok)}

/* Leaderboards */
.board{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:12px}
.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.board h3,.how h3{font:700 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin:0}
.linkbtn{background:none;border:0;padding:4px 0;cursor:pointer;color:var(--ink-dim);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.linkbtn:hover{color:var(--ink)}
.board-note{margin:0;font-size:12px;color:var(--ink-dim)}
.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.board-list:empty{display:none}
.brow{display:grid;grid-template-columns:3.5ch minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:8px 12px;font-size:13px;border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.brow:nth-child(odd){background:rgba(255,255,255,.02)}
.brow .rk{color:var(--ink-dim);text-align:right;font-variant-numeric:tabular-nums}
.brow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.brow .pts{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.brow .ext{color:var(--ink-dim);font-size:12px;text-align:right;font-variant-numeric:tabular-nums;min-width:9ch}
.brow.me{background:color-mix(in srgb,var(--hat) 14%,transparent)!important}
.brow.head{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);background:transparent!important}
.brow.head .pts{font-weight:400}
.star{color:var(--hat)}
.board-me{font-size:13px;color:var(--ink-dim)}
.board-me:empty{display:none}
.board-me b{color:var(--ink)}

.how{border-top:1px solid var(--line);padding-top:16px;color:var(--ink-dim);font-size:13px;max-width:68ch}
.how h3{margin:0 0 8px}
.how ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.how .note{margin:10px 0 0;font-size:12px}

/* Name picker */
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:22px;width:min(420px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(10,9,8,.7)}
dialog h2{font:900 34px/.9 var(--display);text-transform:uppercase;margin:0 0 10px}
dialog p{margin:0 0 14px;color:var(--ink-dim);font-size:13px}
dialog input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:16px;letter-spacing:.02em}
dialog .err{color:var(--kick);font-size:12px;min-height:18px;margin:8px 0 6px}
dialog .row{justify-content:flex-end}

@media (max-width:560px){
  :root{--labw:58px}
  body{padding:12px 10px 32px}
  .plate{padding:16px 14px;gap:16px}
  .lab .l{display:none}
  .lab .s{display:inline}
  .lab{gap:5px;font-size:10px;letter-spacing:.04em}
  .block{gap:7px 4px;grid-template-columns:var(--labw) repeat(var(--n),minmax(0,1fr)) 22px}
  .grid{padding:12px 10px}
  .transport{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .transport .btn{justify-content:center;padding:12px 8px;font-size:12px}
  .transport .btn.primary{grid-column:1/-1;justify-content:space-between;font-size:14px}
  .transport .btn:not(.primary){flex-direction:column;gap:2px}
  .transport .btn:not(.primary) .dot{display:none}
  .meta{gap:14px}
  .brow{gap:10px;padding:8px 10px}
  .brow .ext{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}