@import url('fonts/fonts.css');
:root{
  /* Spotanote's palette: the single source for every colour in the HTML interface (the canvas art keeps its own in catcher.js). Contrast on --bg measured by _Tastebook, 3 Nov 2026: text 14.5:1, muted 6.2:1, lime 14.1:1, orange 9.7:1. */
  --bg:#101c1b;--panel:#182725;--panel-2:#1c2b26;--well:#15221f;--raised:#2a3b30;--track:#2c4031;
  --line:#32423b;--line-strong:#43503b;
  --text:#e8edcf;--text-soft:#c2ccb2;--muted:#8d9e8d;
  --lime:#d2f478;--lime-hover:#e3ff9e;--lime-ink:#203019;--lime-shadow:#688443;--lime-deep:#7d9e4f;--orange:#f7b36b;
  --key-white:#e6e7d2;--key-white-edge:#a6b098;--key-ink:#38412f;--key-black:#17231e;--key-black-ink:#94a386;--key-black-edge:#09140e;
  --veil:#102019b8;--shadow:#0002;
}
/* House button rule (root CLAUDE.md, "Buttons"): height from padding, the letters centred rather than the line box. */
button{display:inline-flex;align-items:center;justify-content:center;font:inherit;line-height:1;padding:.6em 1.1em;box-sizing:border-box;-webkit-appearance:none;appearance:none;text-box:trim-both cap alphabetic;position:relative}
/* Tap floor: every control answers a 44x44 touch even when it is drawn smaller. Piano keys are left out: a black key widened this way would take taps meant for the white keys beside it. */
button:not(.key)::after,nav a::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
nav a{position:relative;display:inline-flex;align-items:center}
/* Icons: drawn at whole pixels (16 or 32) so the pixel grid stays sharp. */
i[data-ic]{display:inline-flex;flex:none;line-height:0}.ic{display:block;width:16px;height:16px}
button,nav a,footer a,footer>span,.field-footer>span>span{gap:.5em}.field-footer>span>span{display:inline-flex;align-items:center}footer a,footer>span{display:inline-flex;align-items:center}footer>span .ic{color:var(--lime)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',sans-serif;font-size:12px;font-synthesis:none;-webkit-font-smoothing:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}header{padding:23px 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{font-size:16px;font-weight:800;letter-spacing:1px;display:flex;align-items:center;gap:12px;font-family:'Press Start 2P','Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',monospace;font-weight:400}.brand .ic{width:32px;height:32px;color:var(--lime)}.brand small{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:1px;margin-inline-start:10px}nav{display:flex;align-items:center;gap:24px;font-size:12px}nav button{border:0;background:none}#sound{padding:9px 12px;border:1px solid var(--line);color:var(--lime)}main{max-width:1220px;margin:auto;padding:38px 35px 0}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--lime);font-weight:600;margin:0 0 14px}h1{font-size:24px;margin:0;font-weight:600;font-family:'Press Start 2P','Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',monospace;font-weight:400}h1>.cursor{color:var(--lime)}.prefs{display:flex;gap:10px;flex-wrap:wrap}.prefs label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}#midiBtn{min-height:44px;padding:0 12px;background:none;border:1px solid var(--line);color:var(--lime);font-size:12px}#midiBtn.on{border-color:var(--lime)}.prefs select{min-height:44px;background:var(--well);color:var(--text);border:1px solid var(--line);font:inherit;font-size:12px;padding:0 8px}.intro p:not(.eyebrow){font-size:12px;color:var(--muted);margin:12px 0 0}.level-select{display:flex;border:1px solid var(--line);padding:4px;background:var(--well)}.stage-select.muted{opacity:.4}.group-cap{align-self:center;padding:0 8px 0 6px;font-size:12px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}.controls{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.level-select button{min-height:44px;min-width:44px;padding:0 13px;background:none;border:0;font-size:12px;color:var(--muted)}.level-select .active{background:var(--lime);color:var(--lime-ink)}.level-select button:disabled{cursor:default}.arcade{border:1px solid var(--line-strong);box-shadow:0 12px 50px var(--shadow)}.hud{display:flex;gap:45px;padding:19px 27px;background:var(--panel-2);border-bottom:1px solid var(--line-strong);align-items:center}.hud>div{min-width:80px}.hud small{display:block;font-size:12px;letter-spacing:1.5px;color:var(--muted);margin-bottom:9px}.hud b{font-family:'Press Start 2P','Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',monospace;font-size:24px;font-weight:400;color:var(--lime)}.hud #combo{color:var(--orange)}.hud #accuracy{color:var(--text)}.hud .time{margin-inline-start:auto}.hud .time b{color:var(--text)}.time b span{font:12px 'Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',sans-serif;margin-inline-start:5px;color:var(--muted)}#pause{background:var(--raised);border:1px solid var(--line-strong);padding:11px 13px}#pause:disabled{opacity:.35}.stage{position:relative;background:var(--well);overflow:hidden}canvas{display:block;width:100%;image-rendering:pixelated}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:var(--veil);backdrop-filter:blur(2px);z-index:2;padding:20px}.tag{font-size:12px;letter-spacing:2px;color:var(--orange);margin-bottom:20px}#overlay h2{font-size:16px;font-weight:500;margin:0 0 12px;font-family:'Press Start 2P','Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',monospace;font-weight:400}#overlay p{white-space:pre-line;font-size:12px;color:var(--text-soft);line-height:1.8;margin:0 0 21px}#start{background:var(--lime);color:var(--lime-ink);border:0;padding:16px 28px;box-shadow:4px 4px 0 var(--lime-shadow);font-weight:600;font-size:12px}#start:hover{background:var(--lime-hover)}#overlayHint{color:var(--muted);font-size:12px;margin-top:18px}.scene-label,.scene-message{position:absolute;bottom:18px;font-size:12px;letter-spacing:1px;color:var(--muted);pointer-events:none}.scene-label{left:22px}.scene-message{right:22px;color:var(--lime)}.field-footer{display:flex;justify-content:space-between;padding:13px 23px;background:var(--panel-2);font-size:12px;color:var(--muted)}.field-footer>span{display:flex;align-items:center;gap:8px}.field-footer i{width:5px;height:5px;background:var(--lime)}.instrument{padding:26px 26px 17px;background:var(--panel);border:1px solid var(--line);border-top:0}.instrument-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.instrument .eyebrow{font-size:12px}h3{font-size:12px;font-weight:400;margin:9px 0 0;color:var(--text-soft)}.keyboard-tip{color:var(--muted);font-size:12px}#piano{height:145px;position:relative;display:flex;gap:5px;max-width:760px;margin:0 auto}.octave{position:relative;display:flex;gap:5px;min-width:0}.feedback{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--lime);text-decoration:underline;text-underline-offset:3px}#feedbackRound{margin-top:6px;font-size:12px}.key{touch-action:manipulation;border:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 14px}.key.white{flex:1;background:var(--key-white);color:var(--key-ink);box-shadow:0 5px 0 var(--key-white-edge);border-radius:0 0 3px 3px}.key.white.pressed{background:var(--lime);transform:translateY(3px);box-shadow:0 2px 0 var(--lime-shadow)}.key.black{position:absolute;top:0;height:88px;width:5.45%;background:var(--key-black);color:var(--key-black-ink);z-index:1;border:1px solid var(--line-strong);box-shadow:0 4px 0 var(--key-black-edge)}.key.black.pressed{background:var(--lime-deep);transform:translateY(2px)}.key .note-name{font-size:12px;font-weight:600}.key .binding{font-size:12px;margin-top:7px;opacity:.5}.key.black .note-name{font-size:12px}.key.black .binding{font-size:12px}.below{display:flex;justify-content:space-between;gap:15px;margin-top:22px;color:var(--muted);font-size:12px;line-height:1.7}.below b{color:var(--lime);margin-inline-start:7px}footer{display:flex;align-items:center;gap:30px;padding:27px 0;color:var(--muted);font-size:12px}footer>span{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--text)}footer a.feedback{margin-inline-start:auto}footer a.feedback+a{margin-inline-start:0}
/* The maker's mark (copied from _Tastebook/logo/assets/mark-leaf.svg): credits only, never in the game itself. */
.maker{min-height:44px;color:var(--muted)}.maker img{display:block;border-radius:4px}#statsPanel{margin-top:25px;border:1px solid var(--line);padding:25px;background:var(--panel)}.stats-head{display:flex;align-items:center;justify-content:space-between}.stats-head h2{font-size:16px;font-weight:500;font-family:'Press Start 2P','Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',monospace;font-weight:400}#statsPanel button{border:1px solid var(--line);background:none;padding:10px 14px;font-size:12px}#totals{display:flex;gap:40px;padding:24px 0;font-size:12px;color:var(--muted)}#totals b{color:var(--lime);font-size:16px;margin-inline-end:8px;font-family:'Press Start 2P','Galmuri11','Noto Sans Georgian','Noto Sans Hebrew','Noto Sans Arabic',monospace;font-weight:400}.stat-row{display:grid;grid-template-columns:110px 1fr 55px 170px;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}.bar{height:6px;background:var(--track)}.bar i{display:block;height:100%;background:var(--lime)}.stat-row small,.stat-note{color:var(--muted);font-size:12px;line-height:1.8}.stat-note{margin:22px 0}[hidden]{display:none!important}@media(max-width:800px){header{padding:14px 18px}.brand{font-size:16px;gap:7px}.brand small{display:none}nav{gap:10px;font-size:12px}#sound{padding:8px}main{padding:25px 14px 0}.intro{display:block}h1{font-size:16px}.level-select{display:inline-flex}.controls{align-items:flex-start;margin-top:22px}.hud{gap:12px;padding:14px}.hud>div{min-width:48px}.hud small{font-size:12px}.hud b{font-size:16px}.hud .time{margin-inline-start:auto}#overlay h2{font-size:16px}#overlay p{font-size:12px}.tag{font-size:12px}.scene-label{display:none}.scene-message{font-size:12px;bottom:12px}.field-footer{padding:12px;font-size:12px}.field-footer>span:last-child{display:none}.arcade,.instrument{margin-inline-start:-14px;margin-inline-end:-14px;border-inline-start:0;border-inline-end:0}.instrument{padding:16px 3px 15px}.instrument-top{display:none}#piano{height:132px;gap:2px}.octave{gap:2px}.key{padding-bottom:10px}.key.black{height:80px}.key .note-name{font-size:12px}.below{font-size:12px;display:block}.below>span{display:block;margin-top:8px}footer{gap:10px;flex-wrap:wrap;font-size:12px}footer p{display:none}.stat-row{grid-template-columns:65px 1fr 40px;gap:10px}.stat-row small{grid-column:1/-1}#totals{gap:15px;flex-wrap:wrap}#totals b{font-size:16px}#statsPanel{padding:18px}.stats-head h2{font-size:16px}}

@media(max-width:800px){.key .note-name{font-size:12px}.key.black .note-name{font-size:12px}.key .binding{font-size:12px}}
@media(hover:none) and (pointer:coarse){.key .binding,.below>span:first-child{display:none}}
/* Galmuri11 and Press Start 2P are wider than Golos was: let the header and the selects wrap instead of pushing the page sideways. */
header{flex-wrap:wrap;row-gap:12px}nav{flex-wrap:wrap;row-gap:4px}.prefs label{flex-wrap:wrap;max-width:100%}.prefs select{max-width:100%;min-width:0}#overlay h2,.stats-head h2,h1{line-height:1.5}
/* Press Start 2P has no Hebrew or Arabic, only its square Latin dots and marks: in right-to-left headings they land mid-line, so those headings use the script's own face. */
html[dir=rtl] h1,html[dir=rtl] #overlay h2,html[dir=rtl] .stats-head h2{font-family:'Noto Sans Hebrew','Noto Sans Arabic',sans-serif;font-weight:700}
/* A black key is about 30px wide on a phone: the sharp goes under the name so 12px pixel type still fits. */
.key.black .note-name{line-height:1.15;text-align:center}