.solo-nav { display:flex; flex-wrap:wrap; gap:22px; }
.solo-nav .back { margin-bottom:12px; }
.solo-panel { margin:30px 8px; padding:24px; background:var(--panel); box-shadow:0 0 0 3px var(--panel-line),5px 7px 0 #000; }
.solo-panel h2 { line-height:1.7; }
.solo-panel p, #status { overflow-wrap:anywhere; }
a { color:var(--gold); }
.solo-panel button, .solo-panel input { font:inherit; }
.solo-panel button { margin:12px 12px 10px 0; }
.solo-panel input[type=file] { max-width:100%; font-size:10px; }
.side-field { border:2px solid var(--panel-line); padding:12px; margin:16px 0; }
.side-field label { display:inline-flex; align-items:center; gap:8px; margin:8px 14px 8px 0; }
.side-field input { accent-color:var(--gold); }
.controls { display:flex; flex-wrap:wrap; gap:14px; }
button:disabled { opacity:.5; cursor:default; }
button[hidden], [hidden] { display:none !important; }
.timer { font-size:32px; color:var(--gold); min-height:60px; margin:16px 0; }
.history { padding-left:24px; font-size:10px; }
.history li { padding:10px 0; border-bottom:2px dotted var(--panel-line); overflow-wrap:anywhere; }
.history a { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; }
#sparkline svg { display:block; max-width:100%; width:100%; height:100px; }
#sparkline polyline { fill:none; stroke:var(--gold); stroke-width:3; }
#sparkline circle { fill:var(--gold); }
#sparkline line { stroke:var(--panel-line); }
.mic-level { width:100%; max-width:350px; accent-color:var(--gold); }
.board { list-style:none; margin:0; padding:0; font-size:10px; }
/* One leaderboard per difficulty. */
.board-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:24px 8px 0; }
.board-tabs button { font:inherit; font-size:10px; color:var(--ink); background:var(--velvet); border:0; padding:13px 16px; cursor:pointer;
  box-shadow:0 0 0 3px #000, inset 0 -4px 0 #2a0910, 0 5px 0 #000; }
.board-tabs button:hover { background:#5a1620; }
.board-tabs button[aria-selected="true"] { background:var(--red); box-shadow:0 0 0 3px var(--gold), inset 0 -4px 0 var(--red-dark), 0 5px 0 #000; }
.board-tabs button:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.board li { display:grid; grid-template-columns:5ch minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:10px 0; border-bottom:2px dotted var(--panel-line); }
.board .who { overflow-wrap:anywhere; }
.board .place { color:var(--ink-muted); }
.board li.you, .board li.you .place { color:var(--gold); }
.name-form input { display:block; width:100%; max-width:350px; margin:0 0 14px; padding:10px 10px 8px; background:var(--bg); color:var(--ink); border:0; border-radius:0; box-shadow:0 0 0 3px #000, inset 0 0 0 2px var(--panel-line); font-size:10px; }
.name-error { min-height:1.9em; margin:6px 0 0; color:var(--red); font-size:9px; }
.demo-notice { color:var(--gold); border-left:3px solid var(--gold-dark); padding-left:14px; }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
@media(max-width:600px) { .board li { grid-template-columns:5ch minmax(0,1fr); } .board li span:last-child { grid-column:2; } .solo-panel { padding:18px 14px; } .controls { gap:4px; } .solo-panel h2 { font-size:12px; } }