/* Practice the NBBC Oral Recitation round: a timed set of passages drawn to match past rounds' lengths,
   the ESV text for the judge, and a mistake counter per passage (25 points each, -5 per mistake). */
:root { --sky:#13262e; --stone:#d9a35b; --olive:#8fb05a; --ink:#f3ead8; --ink-dim:#b7ad98; --panel:#0d1b21; --berry:#e3877a;
  --pink:#f29ac0; --blue:#86b8f2; --line:#2c4650;
  --wash:255,255,255; --misstext:#ffe1dc; --warn:#ffa64d; --stuck:#e8b84a; --silfill:#1a2c33; --field:#1b3039; --bar:#16303a;
  --display:"Alegreya SC", Georgia, serif; --body:"Alegreya Sans", "Segoe UI", Helvetica, Arial, sans-serif; color-scheme: dark; }
/* Follows the device: dark (above) when it's in dark mode, this light palette otherwise (same as the landing page and maps).
   The building drawings and bronze plaques are artwork and keep their own colors. */
@media (prefers-color-scheme: light) {
  :root { --sky:#f6f5f1; --panel:#fffefb; --ink:#242b31; --ink-dim:#5c666e; --line:#d8d5cb; --stone:#9a6a22; --olive:#2c6e49; --berry:#a3392b;
    --pink:#b4306f; --blue:#2f62a8; --wash:0,0,0; --misstext:#7a2418; --warn:#b45309; --stuck:#8a6a10; --silfill:#e9e5da; --field:#fffefb;
    --bar:#efece2; color-scheme: light; }
}
html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
body { margin:0; background:var(--sky); color:var(--ink); font-family:var(--body); font-size:18px; }
/* One screen, no page scrolling: the header, buttons and ESV line stay put; only the passage text, the
   passage list and the history table scroll inside their panels. */
.wrap { box-sizing:border-box; height:100vh; height:100dvh; padding:8px 16px 4px; display:flex; flex-direction:column; gap:10px; }
#reviewSec, #oralsSec, #historySec, #troubleSec, #learnSec { flex:1; min-height:0; display:flex; flex-direction:column; }
.hscroll { flex:1; min-height:0; overflow:auto; }
.hud { padding-left:96px; display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; }
h1 { margin:0; font-family:var(--display); font-size:1.5rem; color:var(--stone); }
.chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.lbl { color:var(--ink-dim); font-size:.9rem; }
button { font:inherit; color:var(--ink); cursor:pointer; }
/* Fast taps are clicks, not double-tap zoom (iPhone); pinch zoom still works. No text selection or grey flash on buttons. */
html, body, *, *::before, *::after { touch-action:manipulation; }   /* every element: iPhone doesn't always pass it down to empty space */
button, .w, .chip { touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.chip { padding:5px 12px; border-radius:999px; border:2px solid var(--line); background:rgba(var(--wash),.04); }
.chip.on { border-color:var(--stone); background:rgba(217,163,91,.22); }
.chip.go { background:var(--stone); border-color:var(--stone); color:var(--panel); font-weight:700; }
.chip.nudge { animation:nudge 1s ease-in-out infinite alternate; }
@keyframes nudge { to { box-shadow:0 0 0 4px rgba(217,163,91,.35); } }
.mins b { display:inline-block; min-width:2.2ch; text-align:center; font-family:var(--display); font-size:1.3rem; color:var(--stone); }
.cols { flex:1; min-height:0; display:grid; grid-template-columns:400px minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); gap:16px; }
@media (max-width:900px) { .cols { grid-template-columns:minmax(0, 1fr); } .hud { padding-left:0; padding-top:36px; } main { order:-1; } }
aside { border:1px solid var(--line); border-radius:8px; background:rgba(var(--wash),.03); padding:8px 10px; overflow:auto; min-height:0; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
td, th { padding:4px 5px; text-align:left; white-space:nowrap; }
#list td:nth-child(2) { white-space:normal; }
#rList td:first-child { white-space:normal; }
#hTable td { white-space:normal; } #hTable td:first-child { white-space:nowrap; }
th { color:var(--ink-dim); font-weight:500; font-size:.85rem; }
td.n, th.n { text-align:right; }
tbody tr { cursor:pointer; border-top:1px solid rgba(var(--wash),.06); }
tbody tr:hover { background:rgba(var(--wash),.05); }
tbody tr.cur { background:rgba(217,163,91,.18); }
tbody tr.done td:first-child::after { content:" ✓"; color:var(--olive); }
tbody tr.lost { opacity:.55; }
tfoot td { border-top:2px solid var(--line); font-weight:700; }
.jr { color:var(--pink); } .pr { color:var(--blue); }
.note { color:var(--ink-dim); font-size:.9rem; margin:6px 2px; line-height:1.35; }
.hist { margin-top:12px; }
.hist h3 { margin:4px 0; font-family:var(--display); color:var(--stone); font-size:1.05rem; }
main { display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; }
.clock { display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; }
#time { font-family:var(--display); font-size:3rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--stone); }
#time.low { color:var(--berry); }
#startBtn { min-width:120px; padding:10px 16px; border-radius:8px; font-weight:700; background:var(--stone); color:var(--panel); border:2px solid var(--stone); }
#startBtn.pause { background:transparent; color:var(--stone); }
#pace { font-size:1.05rem; }
#pace.behind { color:var(--berry); } #pace.ahead { color:var(--olive); }
.bar { position:relative; height:10px; border-radius:5px; background:rgba(var(--wash),.08); overflow:hidden; }
.bar div { position:absolute; inset:0 auto 0 0; }
#barTime { background:var(--stone); opacity:.85; }
#barWords { background:var(--olive); height:4px; top:3px; opacity:.9; }
.card { flex:1; min-height:0; display:flex; flex-direction:column; border:2px solid var(--line); border-radius:10px; padding:14px 20px 12px; background:rgba(var(--wash),.03); }
.cardtop { position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
#which { color:var(--ink-dim); } #oTopBtns { flex-wrap:nowrap; }   /* who's reviewing + Hide ahead stay on one line */
#ref { margin:2px 0 8px; font-family:var(--display); font-size:2.3rem; color:var(--stone); }
#ref.jr { color:var(--pink); } #ref.pr { color:var(--blue); }
.text { font-size:1.35rem; line-height:1.75; }
.text sup { color:var(--stone); font-weight:700; margin:0 3px 0 6px; font-size:.7em; }
.text sup.jr { color:var(--pink); } .text sup.pr { color:var(--blue); }
.w { cursor:pointer; border-radius:4px; padding:0 1px; }
.w:hover { background:rgba(var(--wash),.1); }
.w.miss { background:rgba(227,135,122,.35); color:var(--misstext); box-shadow:inset 0 -2px 0 var(--berry); }
.hiddenText { color:var(--ink-dim); font-style:italic; }
.counter { flex:none; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.counter .big { width:64px; height:64px; border-radius:50%; font-size:2rem; font-weight:700; background:rgba(var(--wash),.06); border:2px solid var(--ink-dim); }
.counter .big.add { border-color:var(--berry); color:var(--berry); }
#miss { font-family:var(--display); font-size:3rem; min-width:2ch; text-align:center; font-variant-numeric:tabular-nums; }
#pts { font-size:1.15rem; }
.nav { display:flex; gap:10px; margin-left:auto; }
.nav button { padding:10px 18px; border-radius:8px; border:2px solid var(--ink-dim); background:rgba(var(--wash),.05); font-weight:700; }
.nav button.next { border-color:var(--stone); background:var(--stone); color:var(--panel); }
.result { border:2px solid var(--stone); border-radius:10px; padding:14px 20px; background:rgba(217,163,91,.1); }
.result h2 { margin:0 0 6px; font-family:var(--display); color:var(--stone); }
.note:empty { display:none; }
.esv { flex:none; margin:auto 0 0; padding-top:10px; color:var(--ink-dim); font-size:.75rem; opacity:.7; }
.keys { color:var(--ink-dim); font-size:.85rem; }
kbd { border:1px solid var(--ink-dim); border-radius:4px; padding:0 5px; font:inherit; font-size:.85em; }
.modes .chip { font-weight:700; }
section[hidden] { display:none !important; }
.sortbar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:2px 0 8px; }
.sortbar .chip { padding:3px 10px; font-size:.9rem; }
.rlist { }
#rList td.today { color:var(--olive); font-weight:700; }
.w.at { outline:3px solid var(--stone); outline-offset:1px; background:rgba(217,163,91,.25); }
.w.ok { color:var(--ink); } .w.todo { color:var(--ink-dim); }
.w.was { font-weight:700; color:var(--warn); }
.demo.on { border-color:var(--berry); background:rgba(227,135,122,.25); font-weight:700; }
#rWhich { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.scs { display:inline-flex; gap:6px; flex-wrap:wrap; }
.sc { display:inline-flex; flex-direction:column; align-items:center; min-width:42px; padding:2px 6px; border:1px solid var(--line); border-radius:6px; line-height:1.15; }
.sc.avg { border-color:var(--stone); background:rgba(217,163,91,.12); margin-right:6px; }
.sc.avg b { color:var(--stone); }
.sc i { font-style:normal; font-size:.72rem; color:var(--ink-dim); }
.sc b { font-size:1.05rem; color:var(--ink); font-variant-numeric:tabular-nums; }
#rMode:empty, .todaycount:empty { display:none; }
/* ☰ menu: who, mode and Demo, which are rarely changed, slide in from the left. */
.menuBtn { font-weight:700; font-size:1rem; }
.menuBtn.demo { color:var(--berry); border-color:var(--berry); }   /* Demo on: nothing saved */
.menu { position:fixed; top:0; bottom:0; left:0; z-index:85; width:min(88vw, 400px);   /* same as the passage drawer */ box-sizing:border-box; overflow-y:auto; padding:12px 14px;
  background:var(--sky); border-right:1px solid var(--line); box-shadow:4px 0 24px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:8px; }
.menu[hidden] { display:none !important; }
.menu .mhead { display:flex; justify-content:space-between; align-items:center; font-family:var(--display); color:var(--stone); font-size:1.2rem; }
.menu .mlbl { color:var(--ink-dim); font-size:.8rem; margin-top:6px; }
.menu .chips { flex-wrap:wrap; }
.menubody { display:flex; flex-direction:column; gap:8px; }
.menubody .long { display:none; }   /* 'Demo: off' fits at the end of the Who row */
.sortbar { flex-wrap:nowrap; } .sortbar .sortsel { flex:1 1 auto; min-width:0; font-size:.9rem; padding:4px 8px; } .sortbar .chip { flex:none; }   /* one row: the dropdown gives way */
aside .menubody { padding:0 2px 10px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.cardtop > #menuBtn { order:-1; }
#lTop > #lWhich { margin-left:auto; } #lTop > .chips { margin-left:0 !important; }   /* the count sits with the view buttons, ☰ alone on the left */
.hud[hidden] { display:none !important; }
body.menu-open #scrim { display:block; position:fixed; inset:0; z-index:84; background:rgba(0,0,0,.5); }
.todaycount { padding:3px 10px; border-radius:999px; font-size:.85rem; font-weight:700; color:var(--panel); background:var(--olive); white-space:nowrap; }
#rMode { font-weight:700; padding:4px 10px; border-radius:6px; }
#rMode.official { color:var(--panel); background:var(--olive); } #rMode.practice { color:var(--ink-dim); border:1px solid var(--line); } #rMode.demo { color:var(--berry); border:1px solid var(--berry); }
.w.ref { font-family:var(--display); color:var(--stone); }
.w.go { color:var(--ink-dim); font-size:.85em; border:1px dashed var(--ink-dim); padding:0 6px; }
.w.slow { box-shadow:inset 0 -4px 0 #5fa8d8; }
.flag { margin-left:6px; font-size:.8em; } .lrn { margin-left:6px; font-size:.85em; } .flag.worse { color:var(--berry); } .flag.stuck { color:var(--stuck); } .flag.up { color:var(--olive); }
#rList tr.f-worse { background:rgba(227,135,122,.13); } #rList tr.f-stuck { background:rgba(232,184,74,.10); }
#rList tr.s-done { background:rgba(143,176,90,.16); }
#rList tr.cur { background:rgba(217,163,91,.28); }
.sess { margin-left:6px; padding:0 6px; border-radius:9px; font-size:.78em; font-weight:700; color:var(--panel); background:var(--olive); white-space:nowrap; }
.flagline { margin:-4px 0 8px; font-weight:700; color:var(--stuck); } .flagline:empty { display:none; }
.flagline.worse { color:var(--berry); } .flagline.up { color:var(--olive); }
.w.rep { text-decoration:underline wavy var(--berry) 2px; text-underline-offset:5px; }
.build { border:1px solid var(--line); border-radius:8px; padding:6px 8px 4px; margin-bottom:8px; background:rgba(var(--wash),.02); }
.build .bhead b { font-family:var(--display); color:var(--stone); }
.build svg { display:block; width:100%; max-height:120px; }
.bthumbs { display:grid; grid-template-columns:repeat(auto-fill, 34px); gap:4px; margin:4px 0 2px; }
.bthumb { width:34px; height:24px; padding:1px; border:1px solid var(--line); border-radius:5px; background:rgba(var(--wash),.03); }
.bthumb svg { display:block; width:100%; height:100%; }
.bthumb.future { cursor:default; background:var(--silfill); }
.sil-edge * { fill:none; stroke:#8f877a; stroke-width:11; stroke-linejoin:round; } .sil-fill * { fill:var(--silfill); stroke:var(--silfill); stroke-width:6; stroke-linejoin:round; }   /* locked: outer edge only; the fill's own stroke closes small gaps between parts */
.plaque, #plaqToast { border:2px solid #b08a4f; border-radius:8px; padding:6px 10px; margin:6px 0; background:linear-gradient(#3a2f20, #2b2418); box-shadow:inset 0 0 0 2px rgba(217,163,91,.15); }
.pdeck { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#c9a46a; }
.pq { font-size:.9rem; margin:2px 0 3px; } .pa { font:700 1.05rem/1.45 var(--body); color:#ffd58a; letter-spacing:.02em; }
.pnote { margin-top:3px; font-size:.8rem; color:var(--ink-dim); font-style:italic; } .plaque .blank, .plaque .dim, #plaqToast .blank, #plaqToast .dim { color:#7d6a4c; }
#plaqToast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); width:min(420px, 88vw); opacity:0; pointer-events:none; transition:.25s; z-index:90; box-shadow:0 10px 30px rgba(0,0,0,.6); }
#plaqToast.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; } #plaqToast .tbuild { font-size:.75rem; color:var(--ink-dim); margin-bottom:2px; }
.bthumb.on { border-color:var(--stone); background:rgba(217,163,91,.2); }
.build .ghost { opacity:.35; } .build .ghost * { fill:none; stroke:var(--ink-dim); stroke-width:1.2; }   /* unbuilt parts: a faint outline only, nothing filled in ahead of time */ .build .drop { animation:drop .9s cubic-bezier(.3,1.4,.5,1); }
@keyframes drop { from { transform:translateY(-60px); opacity:0; } to { transform:none; opacity:1; } }
#fxBanner { max-width:88vw; position:fixed; left:50%; top:30%; transform:translate(-50%,-50%) scale(.6); z-index:95; pointer-events:none; opacity:0;
  font-family:var(--display); font-size:2.2rem; color:var(--panel); background:var(--stone); padding:14px 28px; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.5); text-align:center; }
#fxBanner.big { font-size:3rem; background:linear-gradient(135deg, #f0c27a, #d9a35b 60%, #8fb05a); }
#fxBanner.show { animation:pop 2.8s ease-out forwards; }
@keyframes pop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.6); } 12% { opacity:1; transform:translate(-50%,-50%) scale(1.06); } 20% { transform:translate(-50%,-50%) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-62%) scale(1); } }
#rRef { font-family:var(--display); font-size:2.3rem; color:var(--stone); margin:2px 0 8px; }
.nav button.missbtn { border-color:var(--berry); color:var(--berry); }
.boldnote { color:var(--warn); } .okword { color:var(--olive); }
.w.skip { opacity:.35; font-style:italic; }
.cd { font-size:.75em; font-weight:700; color:var(--warn); white-space:nowrap; }
.cd.now { animation:pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity:.35; } }
#tTable td { white-space:normal; vertical-align:middle; padding:8px 6px; border-top:1px solid rgba(var(--wash),.06); }
#tTable .tref { white-space:nowrap; font-weight:700; }
#tTable .tctx { font-size:1.1rem; } #tTable .tctx b { color:var(--warn); text-decoration:underline wavy var(--berry) 2px; text-underline-offset:5px; }
#tTable .tn { white-space:nowrap; color:var(--berry); font-weight:700; }
@media (max-width:700px) { #tTable tr { display:grid; grid-template-columns:1fr auto; } #tTable .tctx { grid-column:1 / -1; } }
#lText .vnum { cursor:pointer; padding:0 3px; border-radius:4px; } #lText .vnum:hover { background:rgba(217,163,91,.25); }
.everypick { position:absolute; right:0; top:100%; z-index:30; display:flex; flex-wrap:wrap; gap:6px; padding:8px; background:var(--panel); border:1px solid var(--stone); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.5); }
#learnShow .chip { -webkit-touch-callout:none; }
/* Keyboard up in Learn (phones): the same view, only shorter: the page is sized to the space the keyboard
   leaves (visualViewport; smallest is iPhone 8) so Back / Start / Next sit right above it. */
body.typing .wrap { position:fixed; left:0; right:0; top:0; }
.typein { position:fixed; left:0; top:0; width:1px; height:1px; opacity:0; border:0; padding:0; font-size:16px; }
/* Keyboard button: touch screens only, always there; lit while the keyboard is up, and tapping it then hides it. */
.kbBtn { display:none; align-items:center; justify-content:center; width:34px; height:30px; margin-left:4px; padding:0; border-radius:8px;
  border:1px solid var(--line); background:rgba(var(--wash),.04); color:var(--stone); }
.kbBtn:active { background:rgba(217,163,91,.22); }
body.touch .kbBtn { display:inline-flex; }
body.typing .kbBtn { border-color:var(--stone); background:rgba(217,163,91,.22); }
.w.wrongmark { background:rgba(227,135,122,.35); color:var(--misstext); box-shadow:inset 0 -3px 0 var(--berry); }
.w.nope { animation:nope .35s; } @keyframes nope { 0%,100% { transform:none; } 25% { transform:translateX(-4px); background:rgba(227,135,122,.6); } 75% { transform:translateX(4px); background:rgba(227,135,122,.6); } }
.w.blank { display:inline-block; width:3.2em; border-bottom:2px solid var(--ink-dim); }
.who { font:inherit; font-size:.85rem; padding:3px 8px; border-radius:999px; background:var(--field); color:var(--ink); border:2px solid var(--line); }
/* no native select chrome (iOS draws a wide box with a double chevron): a pill like the chips, with a small ▾ drawn in CSS */
select.who { -webkit-appearance:none; appearance:none; field-sizing:content; padding:3px 22px 3px 10px; line-height:1.3;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.who.need { border-color:var(--berry); animation:pulse 1s ease-in-out infinite alternate; }
#rList td.pdue { color:var(--berry); font-weight:700; }
.w.wasSlow { text-decoration:underline dotted #5fa8d8 2px; text-underline-offset:5px; }
#rStatus { margin:6px 0 0; color:var(--ink-dim); } #rStatus:empty { display:none; }
#rStatus.err { color:var(--berry); }
.counts b { font-family:var(--display); font-size:2.6rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.counts { display:flex; gap:22px; align-items:baseline; flex-wrap:wrap; }
.hfilter { font:inherit; padding:5px 10px; border-radius:6px; background:var(--field); color:var(--ink); border:1px solid var(--ink-dim); }
#rText, #text, #lText { flex:1; min-height:0; overflow:auto; padding-right:6px; padding-left:5px; margin-left:-5px; }   /* room for the current word's outline at the left edge (the scroll box clips it) */
.hday td { padding-top:14px; font-family:var(--display); color:var(--stone); border-top:none; }
#hTable td { vertical-align:top; }
/* Phones and narrow windows: compact header, wrapping tiles, and the judging buttons always in reach
   (stuck to the bottom of the screen) so a long passage never pushes them out of sight. */
.drawerBtn, #scrim { display:none; }
/* Small screens: the passage list is a drawer that slides in from the left (☰ Passages). */
@media (max-width:900px) {
  .drawerBtn { display:inline-block; font-weight:700; }
  .cols > aside { position:fixed; top:0; bottom:0; left:0; z-index:80; width:min(88vw, 400px); box-sizing:border-box; overflow-y:auto;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom)); border-radius:0 12px 12px 0; background:var(--sky);
    transform:translateX(-105%); transition:transform .25s ease; box-shadow:4px 0 24px rgba(0,0,0,.5); }
  body.drawer .cols > aside { transform:none; }
  body.drawer #scrim { display:block; position:fixed; inset:0; z-index:79; background:rgba(0,0,0,.5); }
  .rlist { max-height:none; }
}
/* One column (tablets and phones): the passage scrolls with the page and the judging buttons stay stuck
   to the bottom of the screen. */
@media (max-width:900px) {
  .card { padding-bottom:0; }
  .counter { margin:8px -20px 0; padding:8px 20px calc(8px + env(safe-area-inset-bottom));
    background:var(--bar); border-top:1px solid var(--line); }
}
@media (max-width:700px) {
  body { font-size:16px; }
  .wrap { padding:8px 8px 2px; gap:6px; }   /* same gap above and beside the card */
  h1 { font-size:1.25rem; width:100%; }
  .hud { gap:6px 10px; }
  .chip { padding:4px 10px; font-size:.92rem; }
  #rRef, #ref { font-size:1.6rem; }
  .text { font-size:1.15rem; line-height:1.65; }
  .card { padding:10px 10px 0; }
  .counter { margin:8px -10px 0; padding:8px 10px calc(10px + env(safe-area-inset-bottom)); gap:8px; }   /* 10px inside the border on every side */
  .counts { gap:14px; } .counts b, #miss { font-size:1.8rem; }
  .counter .big { width:48px; height:48px; font-size:1.6rem; }
  .nav { width:100%; margin-left:0; gap:6px; }
  .nav button { flex:1 1 0; padding:10px 4px; font-size:.95rem; }
  .sc { min-width:36px; padding:2px 4px; } .sc b { font-size:.95rem; }
  td, th { padding:4px 3px; }
  aside { padding:6px; }
  #time { font-size:2.4rem; }
  .keys { font-size:.8rem; }
  #fxBanner { font-size:1.6rem; } #fxBanner.big { font-size:2rem; }
  /* every line at the top counts on a phone */
  h1, #rRef, #ref, .long { display:none; }
  .hud { gap:5px 6px; }
  .chip { padding:3px 9px; font-size:.85rem; }
  .cardtop { gap:6px; margin-bottom:6px; }
  #rWhich, #which { font-size:.85rem; gap:6px; }
  .sc { min-width:30px; padding:1px 3px; } .sc i { font-size:.62rem; } .sc b { font-size:.85rem; }
  .counter { padding-top:6px; }
  .counts b, #miss { font-size:1.3rem; } .counts span, #pts { font-size:.9rem; }
  .clock { gap:6px 12px; } #time { font-size:2rem; }
  .cardtop { flex-wrap:wrap; } .cardtop > .chips { margin-left:auto; } #rWhich { order:3; width:100%; }
  #rTop { justify-content:flex-start; } #rTop > .chips { display:contents; }   /* buttons flow beside ☰ */
  .scs .scs .sc:nth-child(n+4) { display:none; }
  #count { display:none; } .mins .lbl { font-size:.8rem; } .mins b { font-size:1.1rem; }
}

[hidden] { display:none !important; }
.hud { padding-left:0; }
@media (max-width:900px) { .hud { padding-top:0; } }
.gate { margin:40px auto; max-width:520px; font-size:1.2rem; text-align:center; color:var(--ink); }