/* Bravura: the standard music font (SIL OFL, vendor/bravura). Clefs and music symbols always display. */
@font-face {
  font-family: "Bravura";
  src: url("../vendor/bravura/Bravura.woff2") format("woff2");
  font-display: swap;
}

/* EarToStage looks. Two themes:
   - "stage" (default): Emerald Club — black-green background, glowing emerald with gold accents, glassy cards.
   - "paper": warm sheet-music paper, for daytime or printing. Switch with the 🌙/☀️ button. */

:root, :root[data-theme="stage"] {
  --paper: #06110d;
  --card-bg: rgba(12, 32, 25, 0.78);
  --card-solid: #0c2019;
  --ink: #e8fff4;
  --ink-soft: #8fb8a6;
  --rule: rgba(80, 255, 170, 0.17);
  --brand: #2dffa0;         /* emerald glow */
  --brand-2: #ffd25e;       /* gold */
  --brand-soft: rgba(45, 255, 160, 0.12);
  --on-brand: #03140c;
  --glow: 0 0 18px rgba(45, 255, 160, 0.45);
  --ok: #7dffc4;
  --ok-soft: rgba(125, 255, 196, 0.12);
  --bad: #ff6b7a;
  --roll-white: #0f2a20;
  --roll-black: #081a13;
  --key-white: #f1fff8;
  --key-black: #0d1a15;
  --page-glow: radial-gradient(1200px 600px at 15% -10%, rgba(45, 255, 160, 0.14), transparent 60%),
               radial-gradient(900px 500px at 100% 10%, rgba(255, 210, 94, 0.10), transparent 60%);
  --radius: 16px;
  color-scheme: dark;
}
:root[data-theme="paper"] {
  --paper: #faf6ee;
  --card-bg: #ffffff;
  --card-solid: #ffffff;
  --ink: #1f1b16;
  --ink-soft: #6b6359;
  --rule: #e4dccd;
  --brand: #d9480f;
  --brand-2: #e8590c;
  --brand-soft: #ffe8d9;
  --on-brand: #ffffff;
  --glow: none;
  --ok: #2b8a3e;
  --ok-soft: #e6f4ea;
  --bad: #c92a2a;
  --roll-white: #f1ece2;
  --roll-black: #ddd5c6;
  --key-white: #ffffff;
  --key-black: #22201d;
  --page-glow: none;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* "hidden" always wins over button and layout styles */
body {
  margin: 0;
  background: var(--page-glow), var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 190px; /* room for the keyboard dock */
}
body.kids { font-size: 19px; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0.3em 0; }
h2 { font-size: 1.3rem; margin: 1.2em 0 0.5em; }
.card h2 { margin-top: 0; }
a { color: var(--brand); }
.muted, .credit { color: var(--ink-soft); font-size: 0.92em; }
.center { text-align: center; }
kbd { border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; font-size: 0.85em; }

/* top bar */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--card-bg);
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--ink); }
.brand span { color: var(--brand); }
.brand .by { font-size: 0.62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-2); margin-left: 4px; vertical-align: middle; opacity: .9; }
@media (max-width: 420px) { .brand .by { display: none; } }
.top-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.chip {
  font: inherit; font-size: 0.8rem; color: var(--ink-soft); background: transparent;
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
button.chip { cursor: pointer; }

main { max-width: 860px; margin: 0 auto; padding: 8px 16px 24px; }

/* home */
.hero { padding: 28px 0 8px; }
.hero h1 { font-size: 2.3rem; }
.hero p { font-size: 1.1rem; color: var(--ink-soft); max-width: 36em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: var(--card-bg); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 18px; color: var(--ink);
}
.inst, .pick {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; font: inherit; text-align: left;
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.inst:hover, .pick:hover { transform: translateY(-2px); border-color: var(--brand); }
.inst span:not(.big-icon), .pick span:not(.big-icon) { color: var(--ink-soft); font-size: 0.92em; }
.inst.soon { opacity: 0.55; cursor: default; }
.inst.soon:hover { transform: none; border-color: var(--rule); }
.inst em { font-size: 0.8em; color: var(--brand); font-style: normal; font-weight: 600; }
.big-icon { font-size: 2.2rem; }

/* course */
.back { display: inline-block; margin-top: 10px; text-decoration: none; font-size: 0.92em; }
.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: 0.75rem; color: var(--ink-soft); margin: 0.6em 0 0; font-weight: 700; }
.where { margin: 12px 0 8px; }
.where p { margin: 0.3em 0 0.8em; }
.level h2 { display: flex; gap: 8px; align-items: baseline; }
.lvl { font-size: 0.75rem; background: var(--brand-soft); color: var(--brand); padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.lessons { list-style: none; padding: 0; margin: 0; }
.lessons li { border-bottom: 1px solid var(--rule); }
.lessons li a, .lessons li.soon { display: flex; gap: 10px; align-items: center; padding: 10px 4px; color: var(--ink); text-decoration: none; }
.lessons li a:hover { color: var(--brand); }
.lessons li.soon { color: var(--ink-soft); }
.lessons em { font-size: 0.8em; margin-left: auto; font-style: normal; }
.num { color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 2.2em; }
.badge { margin-left: auto; font-size: 0.78rem; border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; color: var(--ink-soft); }
.badge.good { color: var(--ok); border-color: var(--ok); }

/* buttons */
.btn {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card-bg); color: var(--ink);
}
.btn:hover:not(:disabled) { border-color: var(--brand); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: var(--on-brand); box-shadow: var(--glow); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.1); border-color: transparent; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }

/* lesson */
.dots { display: flex; gap: 6px; margin: 6px 0 14px; }
.dots span { width: 26px; height: 6px; border-radius: 3px; background: var(--rule); }
.dots span.done { background: var(--brand); opacity: .45; }
.dots span.now { background: var(--brand); }
.step { min-height: 260px; }
.bridge { display: inline-block; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 2px 12px; font-size: 0.88em; font-weight: 600; margin: 0 0 6px; }
.text p { margin: 0.5em 0; }
.after { border-top: 1px dashed var(--rule); margin-top: 12px; padding-top: 6px; }
.stepnav { display: flex; justify-content: space-between; margin: 14px 0; }
.visual { margin: 14px 0 4px; overflow-x: auto; }
.pair { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
figure { margin: 0; }
figcaption { font-size: 0.82em; color: var(--ink-soft); margin-top: 4px; max-width: 300px; }
.grand { display: inline-block; }
.sheet { overflow-x: auto; padding: 4px 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.status { font-weight: 600; min-height: 1.5em; }
.prompt { font-size: 1.08em; font-weight: 600; }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 10px 0; }
.opt { text-align: left; }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.wrong { border-color: var(--bad); }
.fb { padding: 10px 14px; border-radius: 10px; background: var(--brand-soft); margin: 10px 0; }
.fb.good { background: var(--ok-soft); }
.score { font-size: 2.4rem; font-weight: 800; margin: 0.2em 0; color: var(--brand); }
.tasks { padding-left: 1.2em; }
.tasks li { margin: 0.6em 0; }
.min { display: inline-block; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 0.78em; border-radius: 6px; padding: 0 6px; margin-right: 4px; }

/* the staff and piano roll drawings */
svg { display: block; }
.staff .line, .staff .ledger { stroke: var(--ink); stroke-width: 1.2; }
body { --clef-font: "Bravura", "Noto Music", "Apple Symbols", "Segoe UI Symbol", serif; }
.rm-sign .glyph { font-family: "Bravura", serif; font-size: 1.3em; line-height: 0; }
.staff .clef { fill: var(--ink); font-family: var(--clef-font); }
.staff .head { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.staff .head.hl { stroke: var(--brand); fill: var(--brand); fill-opacity: .55; filter: drop-shadow(0 0 5px var(--brand)); } /* see-through so a ledger line through the note still shows */
.staff .head.done { stroke: var(--ok); }
.staff .acc { fill: var(--ink); }
.staff .label { fill: var(--ink-soft); font-size: 13px; font-weight: 600; }
.staff .label.hl { fill: var(--brand); }
.staff .sym { fill: var(--ink); font-size: 15px; font-weight: 800; font-family: Georgia, serif; }
.staff .sym.hl { fill: var(--brand); }
.staff .dyn { fill: var(--ink); font: italic 800 16px Georgia, serif; }
.staff .art { fill: var(--ink); font-weight: 800; }
.staff .slash { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.staff .slash.hl { stroke: var(--brand); }
.staff .slash.done { stroke: var(--ok); }
/* rhythm drawings: each note is a <g class="n"> coloured with currentColor */
.rhythm .n { color: var(--ink); }
.rhythm .n.hl { color: var(--brand); }
.rhythm .n.hit { color: var(--ok); }
.rhythm .n.miss { color: var(--bad); }
.rhythm .head { stroke: currentColor; }
.rhythm .head.fill { fill: currentColor; }
.rhythm .head.open { fill: none; }
.rhythm .stem { stroke: currentColor; stroke-width: 1.4; }
.rhythm .flag, .rhythm .tie { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.rhythm .dot, .rhythm .rest, .rhythm .n .clef { fill: currentColor; }
.rhythm .rest-line { stroke: currentColor; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rhythm .beam, .rhythm .barend, .rhythm .tsig { fill: var(--ink); }
.rhythm .tsig { font-weight: 800; font-family: Georgia, serif; }
.rhythm .bar { stroke: var(--ink); stroke-width: 1.2; }
.rhythm .gbg { fill: var(--roll-white); }
.rhythm .gbeat { stroke: var(--ink-soft); stroke-width: 1; }
.rhythm .gsix { stroke: var(--rule); stroke-width: 0.7; }
.rhythm .gnum { font-size: 9px; fill: var(--ink-soft); }
.rhythm .n .gnote { fill: var(--brand); stroke: #0005; stroke-width: 1; }
.rhythm .n.hit .gnote { fill: var(--ok); }
.rhythm .n.miss .gnote { fill: var(--bad); }
.staff .mark, .rhythm .mark { font-size: 13px; font-weight: 800; font-style: italic; fill: var(--ink); font-family: Georgia, serif; }
.rhythm .count { font-size: 12px; font-weight: 700; fill: currentColor; }
.rhythm .ph { stroke: var(--brand); stroke-width: 2; opacity: .8; }
.tap-pad { font: inherit; font-weight: 800; font-size: 1.2rem; width: 100%; padding: 22px; border-radius: 14px; border: 2px dashed var(--brand); background: var(--brand-soft); color: var(--brand); cursor: pointer; touch-action: manipulation; }
.tap-pad:active { background: var(--brand); color: #fff; }
.tap-pad[hidden] { display: none; }
.drill-menu { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin: 10px 0; }
.drill-pick .big-icon { font-family: var(--clef-font), sans-serif; }
/* road map charts */
.roadmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 12px 0; }
.rbar { font: inherit; position: relative; min-height: 78px; border: 2px solid var(--ink); border-radius: 6px; background: var(--card-bg); color: var(--ink);
  cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 6px 4px; transition: transform .1s; }
.rbar:hover { transform: translateY(-2px); }
.rbar b { font-family: Georgia, serif; font-size: 1.05rem; }
.rbar.done { border-color: var(--ok); background: var(--ok-soft); }
.rbar.now { border-color: var(--brand); background: var(--brand-soft); transform: scale(1.04); }
.rm-marks { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; min-height: 18px; }
.rm { font-size: 0.72rem; font-weight: 800; border-radius: 4px; padding: 0 4px; }
.rm-rep { font-size: 1rem; font-family: Georgia, serif; }
.rm-end { border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); border-radius: 0; padding: 0 6px; }
.rm-sign { color: var(--brand); }
.rm-word { font-style: italic; font-family: Georgia, serif; }
.rm-step { font-size: 0.75rem; font-weight: 800; color: var(--ok); min-height: 1em; }
.decoder { border-collapse: collapse; width: 100%; font-size: 0.92em; margin: 6px 0; }
.decoder th, .decoder td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.decoder td:first-child { font-family: Georgia, serif; font-weight: 800; }
.ladder { margin: 6px 0 10px; overflow-x: auto; }
.ladder figcaption { max-width: none; font-size: 0.92em; color: var(--ink); }
.opt svg { display: block; max-width: 100%; height: auto; }
.roll .row.white { fill: var(--roll-white); }
.roll .row.black { fill: var(--roll-black); }
.roll .key.white { fill: var(--key-white); stroke: var(--rule); stroke-width: .5; }
.roll .key.black { fill: var(--key-black); }
.roll .rlabel { font-size: 9px; fill: #666; font-weight: 700; }
.roll .bar { fill: var(--brand); stroke: #0003; }

/* the keyboard dock */
#keyboard-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--card-bg); border-top: 1px solid var(--rule); padding: 8px 8px 6px;
}
#keyboard-dock[hidden] { display: none; }
#keyboard { position: relative; height: 140px; max-width: 900px; margin: 0 auto; user-select: none; touch-action: none; }
.k { position: absolute; top: 0; border: 1px solid #0004; padding: 0; cursor: pointer; font: inherit; }
.k.white { height: 100%; background: var(--key-white); border-radius: 0 0 6px 6px; z-index: 1; display: flex; align-items: flex-end; justify-content: center; }
.k.white span { font-size: 12px; font-weight: 700; color: #4a5a53; padding-bottom: 5px; line-height: 1.1; text-align: center; }
.k.white span small { font-size: 8px; color: #0b9c62; }
.k.black { display: flex; align-items: flex-end; justify-content: center; }
.k.black span { font-size: 8px; font-weight: 700; color: #cfe9dc; padding-bottom: 4px; line-height: 1.15; text-align: center; }
.k.black span i { font-style: normal; opacity: .75; }
.k.hit span, .k.wrong span { color: #03140c; }
#keyboard-dock.no-names .k span { visibility: hidden; }
.k.black { height: 60%; background: var(--key-black); border-radius: 0 0 4px 4px; z-index: 2; }
.k.hit { background: var(--brand) !important; }
.k.wrong { background: var(--bad) !important; }
.dock-hint { text-align: center; font-size: 0.72rem; color: var(--ink-soft); margin: 4px 0 0; }

/* ---------- the game layer ---------- */
#level-chip { text-decoration: none; color: var(--ink); }
#level-chip b { color: var(--brand); }
#goal-mini { display: inline-flex; }
.big-btn { font-size: 1.05rem; padding: 12px 20px; margin-top: 6px; }
.tracker { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr; gap: 10px; margin: 18px 0; }
.tile { background: var(--card-bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.tile .big { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.tile .label { font-size: 0.78rem; color: var(--ink-soft); }
.level-tile { flex-direction: row; align-items: center; gap: 12px; }
.level-icon { font-size: 2.4rem; }
.level-title { font-weight: 800; font-size: 1.1rem; }
.goal-tile { flex-direction: row; align-items: center; gap: 12px; }
.goal-tile select { font: inherit; font-size: 0.9rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--card-bg); color: var(--ink); padding: 2px 6px; }
.bar { height: 7px; background: var(--rule); border-radius: 4px; overflow: hidden; margin: 4px 0; }
.bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .4s; }
.ring-bg { stroke: var(--rule); }
.ring-fg { stroke: var(--brand); transition: stroke-dasharray .5s; }
.ring.full .ring-fg { stroke: var(--ok); }
.ring-text { font-size: 15px; font-weight: 800; fill: var(--ink); }
@media (max-width: 640px) {
  .tracker { grid-template-columns: 1fr 1fr; }
  .level-tile { grid-column: 1 / -1; }
  .level-name { display: none; }
}

.rush-card { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 8px;
  background: linear-gradient(120deg, var(--brand-soft), var(--card-bg)); border-color: var(--brand); transition: transform .12s; }
.rush-card:hover { transform: translateY(-2px); }
.rush-card div { display: flex; flex-direction: column; flex: 1; }
.rush-card span:not(.big-icon) { color: var(--ink-soft); font-size: 0.92em; }
.rush-card em { font-style: normal; font-weight: 800; color: var(--brand); }

.records h2 span { font-size: 0.8rem; font-weight: 600; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.record { text-align: center; padding: 10px 6px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--card-bg); opacity: .6; }
.record.got { opacity: 1; border-color: #e0b100; }
.disc { width: 58px; height: 58px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
  background: radial-gradient(circle, var(--card-bg) 0 18%, #333 19% 100%); }
.record.got .disc { background: radial-gradient(circle, var(--card-bg) 0 18%, #e0b100 19% 60%, #b8860b 61% 100%); box-shadow: 0 0 12px #e0b10066; }
.disc span { background: var(--card-bg); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; font-size: 1rem; }
.record-name { font-weight: 700; font-size: 0.85rem; }
.record-how { font-size: 0.72rem; color: var(--ink-soft); }

#toasts { position: fixed; top: 64px; right: 14px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 6px 20px #0003; animation: toast-in .3s ease-out; transition: opacity .5s, transform .5s; }
.toast.big { background: var(--brand); color: #fff; font-size: 1rem; }
.toast.gone { opacity: 0; transform: translateX(20px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.95); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

/* little moments of life */
.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.staff .head.hl { animation: glow 0.9s ease-in-out infinite alternate; }
@keyframes glow { from { filter: drop-shadow(0 0 2px var(--brand)); } to { filter: drop-shadow(0 0 9px var(--brand)); } }
.opt { transition: transform .1s; }
.opt:hover:not(:disabled) { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .staff .head.hl, .pop, .shake { animation: none; } }

/* Note Rush */
.rush-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rush-mode { align-items: center; text-align: center; }
.rush-mode .big-icon { font-family: var(--clef-font); font-size: 2.6rem; line-height: 1.1; }
.rush-hud { display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; gap: 8px; flex-wrap: wrap; }
.rush-hud b { font-size: 1.3rem; }
.combo { color: var(--ink-soft); font-weight: 700; }
.combo.hot { color: var(--brand); animation: pop .35s; }
.rush-time span { transition: width .1s linear; }
.rush-sheet { overflow-x: auto; margin: 10px 0; }
.rush-sheet svg { margin: 0 auto; }
.rush-count { font-size: 5rem; font-weight: 900; text-align: center; color: var(--brand); padding: 40px 0; animation: pop .4s; }

/* kids: bigger, rounder */
body.kids .card { border-radius: 20px; }
body.kids .btn { border-radius: 14px; padding: 11px 18px; }

@media (max-width: 520px) {
  h1 { font-size: 1.5rem; }
  .hero h1 { font-size: 1.8rem; }
  #keyboard { height: 120px; }
  .dock-hint { display: none; }
  body { padding-bottom: 150px; }
}

/* ---------- Emerald Club polish (everything except the Paper theme) ---------- */
:root:not([data-theme="paper"]) .top,
:root:not([data-theme="paper"]) #keyboard-dock { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(6, 17, 13, 0.72); }
:root:not([data-theme="paper"]) #keyboard-dock { border-top: 1px solid transparent; box-shadow: 0 -1px 0 rgba(45, 255, 160, 0.55), 0 -12px 40px rgba(45, 255, 160, 0.12); }
:root:not([data-theme="paper"]) .brand span,
:root:not([data-theme="paper"]) .hero h1 { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-theme="paper"]) .card,
:root:not([data-theme="paper"]) .tile { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
:root:not([data-theme="paper"]) .inst:hover,
:root:not([data-theme="paper"]) .pick:hover,
:root:not([data-theme="paper"]) .rush-card:hover { box-shadow: 0 0 0 1px var(--brand), var(--glow); }
:root:not([data-theme="paper"]) .sheet { background: rgba(3, 12, 9, 0.6); border-color: rgba(45, 255, 160, 0.18); }
:root:not([data-theme="paper"]) .staff .line, :root:not([data-theme="paper"]) .staff .ledger { stroke: rgba(232, 255, 244, 0.75); }
:root:not([data-theme="paper"]) .k.white { background: linear-gradient(#ffffff, #dcefe6); }
:root:not([data-theme="paper"]) .k.black { background: linear-gradient(#22332c, #060f0b); }
:root:not([data-theme="paper"]) .k.hit { background: linear-gradient(var(--brand), #12b87a) !important; box-shadow: 0 0 22px var(--brand), 0 0 6px var(--brand) inset; }
:root:not([data-theme="paper"]) .k.wrong { box-shadow: 0 0 18px var(--bad); }
:root:not([data-theme="paper"]) .toast { background: var(--card-solid); color: var(--ink); border: 1px solid var(--brand); box-shadow: var(--glow); }
:root:not([data-theme="paper"]) .toast.big { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); border: 0; }
:root:not([data-theme="paper"]) .bar span, :root:not([data-theme="paper"]) .ring-fg { box-shadow: var(--glow); }
:root:not([data-theme="paper"]) .bar span { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
:root:not([data-theme="paper"]) .lvl, :root:not([data-theme="paper"]) .bridge, :root:not([data-theme="paper"]) .min { border: 1px solid rgba(45, 255, 160, 0.35); }
:root:not([data-theme="paper"]) .score { text-shadow: 0 0 24px rgba(45, 255, 160, 0.6); }
:root:not([data-theme="paper"]) .dots span.now { box-shadow: var(--glow); }
#mic-btn.live { color: var(--on-brand); background: var(--ok); border-color: var(--ok); box-shadow: 0 0 14px var(--ok); }

/* falling notes overlay (app/falls.js): sits right on top of the keyboard */
.falls { position: fixed; z-index: 5; pointer-events: none; }
body.falling #keyboard-dock { box-shadow: 0 -2px 0 var(--brand), 0 -20px 60px rgba(45, 255, 160, 0.25); }
.btn.game { background: linear-gradient(135deg, var(--brand), #18c9b5); color: var(--on-brand); border-color: transparent; box-shadow: 0 0 16px rgba(255, 210, 94, 0.45); }
/* make room so the page (and its sheet music) can scroll up above the falling-notes lane */
body.falling { padding-bottom: calc(190px + 40vh); }

/* Song Player (app/player.js) */
.drop { border: 2px dashed var(--rule); text-align: center; margin-bottom: 18px; }
.drop.over { border-color: var(--brand); box-shadow: var(--glow); }
.drop label.btn { display: inline-block; cursor: pointer; }
.prog-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.prog .nums { color: var(--brand); font-weight: 700; }
.prog .nums small { color: var(--ink-soft); font-weight: 400; }
.track-pick select { font: inherit; padding: 6px 10px; border-radius: 10px; background: var(--card-solid); color: var(--ink); border: 1px solid var(--rule); }
.player-opts { margin: 10px 0 14px; padding: 12px 16px; }
.player-opts summary { cursor: pointer; font-weight: 700; }
.player-opts summary small { font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; margin-top: 12px; }
.opt { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--ink-soft); }
.opt select, .opt input[type="number"] { font: inherit; font-size: 0.95rem; padding: 6px 8px; border-radius: 10px; background: var(--card-solid); color: var(--ink); border: 1px solid var(--rule); }
.opt input[type="number"] { width: 4.5em; }
.opt .range { color: var(--ink); display: flex; align-items: center; gap: 6px; }
.opt.check { flex-direction: row; align-items: center; color: var(--ink); }
.opt.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.small { font-size: 0.82rem; margin: 10px 0 0; }
.status .hud b { color: var(--brand); font-size: 1.15em; }
.status .judge { margin-left: 10px; font-weight: 800; color: var(--brand-2); }
.speed-result { text-align: center; }
.daily-card em { color: var(--brand-2); }

/* ---------- The Tour (app/tour.js): map, HUD, coach, results, gigs ---------- */
.tour-head { text-align: center; padding: 6px 0 18px; }
.tour-head .muted { max-width: 36em; margin: 0 auto 12px; }
.tour-stats { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; font-weight: 700; }
.stars { color: var(--brand-2); letter-spacing: 1px; text-shadow: 0 0 8px rgba(255, 210, 94, 0.5); }
.stars .off { color: var(--rule); text-shadow: none; }
.tour { display: flex; flex-direction: column; align-items: stretch; }
.road { text-align: center; font-size: 1.6rem; padding: 6px 0; opacity: .8; position: relative; }
.road::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 3px dashed var(--rule); z-index: -1; }
.venue { background: var(--card-bg); border: 1px solid var(--rule); border-radius: 20px; padding: 18px; }
.venue.headlined { border-color: var(--brand-2); box-shadow: 0 0 24px rgba(255, 210, 94, 0.18); }
.venue-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.venue-head h2 { margin: 0; }
.venue-head .muted { margin: 2px 0 0; }
.venue-head .eyebrow { margin: 0; }
.venue-icon { font-size: 2.6rem; filter: drop-shadow(0 0 10px rgba(45, 255, 160, 0.35)); }
.venue-count { margin-left: auto; font-weight: 800; color: var(--brand); }
.stops { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.stop { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--rule); background: var(--card-solid); color: var(--ink); text-decoration: none; transition: transform .15s; }
.stop:hover { transform: translateY(-2px); border-color: var(--brand); }
.stop-num { font-weight: 800; color: var(--ink-soft); }
.stop.done .stop-num { color: var(--ok); }
.stop.now { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--glow); animation: breathe 2s ease-in-out infinite; }
.stop.now .stop-num { color: var(--brand); }
.stop-title { font-weight: 600; line-height: 1.25; }
.stop.gig { background: linear-gradient(135deg, rgba(255, 210, 94, 0.14), rgba(45, 255, 160, 0.08)); border-color: rgba(255, 210, 94, 0.45); }
.stop.gig small { color: var(--ink-soft); }
.stop.gig.locked { opacity: .55; cursor: not-allowed; }
@keyframes breathe { 50% { box-shadow: 0 0 0 1px var(--brand), 0 0 28px rgba(45, 255, 160, 0.55); } }

.hud { display: flex; align-items: center; gap: 16px; margin: 4px 0 10px; flex-wrap: wrap; }
.hearts { font-size: 1.25rem; letter-spacing: 2px; }
.hearts .off { opacity: .35; }
.hype { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--brand-2); flex: 1; min-width: 180px; max-width: 360px; }
.hype-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.hype-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: var(--glow); transition: width .35s ease; }
.hype-bar.pulse { animation: pop .35s; }

.coach { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
.coach-face { font-size: 2rem; line-height: 1; filter: drop-shadow(0 0 8px rgba(45, 255, 160, 0.4)); }
.bubble { position: relative; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--brand-soft); border: 1px solid rgba(45, 255, 160, 0.35); font-weight: 600; }
.bubble::before { content: ""; position: absolute; left: -8px; top: 12px; border: 8px solid transparent; border-right-color: rgba(45, 255, 160, 0.35); border-left: 0; }
.btn.more { margin-top: 8px; }

.results { text-align: center; padding: 30px 20px; }
.results h1 { margin: 6px 0 4px; }
.big-stars { font-size: 3.6rem; letter-spacing: 8px; margin: 8px 0; }
.big-stars span { color: var(--rule); display: inline-block; }
.big-stars span.on { color: var(--brand-2); text-shadow: 0 0 22px rgba(255, 210, 94, 0.8); animation: star-in .5s both; }
@keyframes star-in { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } }
.result-line { font-weight: 700; font-size: 1.1rem; }
.row.center { justify-content: center; }
.spot-row .btn.spot { min-width: 48px; font-weight: 800; font-size: 1.1rem; }
.spot.right { border-color: var(--ok); background: var(--ok-soft); }
.spot.wrong { border-color: var(--bad); opacity: .6; }
.own-words { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.own-words label { display: flex; align-items: center; gap: 6px; background: var(--card-solid); border: 1px solid var(--rule); border-radius: 12px; padding: 6px 8px; }
.own-words b { color: var(--brand); font-size: 1.2rem; }
.own-words input { font: inherit; width: 7.5em; background: transparent; border: 0; color: var(--ink); outline: none; }
.trick-card { text-align: center; padding: 18px; border-radius: 18px; margin: 10px 0; background: linear-gradient(135deg, rgba(255, 210, 94, 0.12), rgba(45, 255, 160, 0.08)); border: 1px solid rgba(255, 210, 94, 0.45); }
.trick-icon { font-size: 2.6rem; display: block; }
.trick-big { font-size: 1.35rem; font-weight: 800; color: var(--brand-2); margin: 6px 0 10px; text-shadow: 0 0 14px rgba(255, 210, 94, 0.35); }
.trick-reminder { margin-top: 14px; font-size: .9rem; color: var(--ink-soft); }
.big-sign { font-family: var(--clef-font, serif); font-size: 3rem; font-weight: 800; line-height: 1; text-align: center; margin: 6px 0; }

/* ---------- guitar / bass neck and drum pads (keyboard.js) ---------- */
#keyboard-dock[data-instrument="guitar"] #keyboard, #keyboard-dock[data-instrument="bass"] #keyboard, #keyboard-dock[data-instrument="drums"] #keyboard { height: auto; }
.neck { display: flex; flex-direction: column; gap: 0; background: linear-gradient(#3a2414, #24160c); border-radius: 10px; padding: 4px 6px 6px; box-shadow: inset 0 0 12px #0008; }
.fret-nums, .string { display: grid; grid-template-columns: 52px repeat(var(--frets), 1fr); }
.fret-nums span { text-align: center; font-size: 10px; color: #d9c8a8; padding: 1px 0 3px; }
.string { position: relative; }
.string::before { content: ""; position: absolute; left: 52px; right: 0; top: 50%; height: var(--thick); background: linear-gradient(#f4f1e8, #b9b2a2); transform: translateY(-50%); pointer-events: none; box-shadow: 0 1px 1px #0007; }
.fret { position: relative; height: 24px; border: 0; border-right: 2px solid #c9c2b0aa; background: transparent; cursor: pointer; padding: 0; font: inherit; color: #fff; }
.fret.open { border-right: 5px solid #e8e2d0; background: #0003; }
.fret.open b { position: relative; z-index: 1; font-size: 12px; color: #f7e9c9; }
.fret:hover { background: rgba(45, 255, 160, 0.12); }
.fret.hit::after, .fret.wrong::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; }
.fret.hit::after { background: var(--brand); box-shadow: 0 0 14px var(--brand); }
.fret.wrong::after { background: var(--bad); box-shadow: 0 0 14px var(--bad); }
.pads { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 4px 0; }
.pad { height: 112px; border-radius: 16px; border: 1px solid var(--rule); background: radial-gradient(circle at 50% 35%, #1b3a2e, #0a1712); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; box-shadow: inset 0 -4px 0 #0006; transition: transform .05s; }
.pad:active { transform: scale(.97); }
.pad-icon { font-size: 1.7rem; }
.pad b { font-size: .8rem; }
.pad kbd { font-size: .62rem; opacity: .6; }
.pad.pad-36 { background: radial-gradient(circle at 50% 35%, #2a4a3c, #0c1c16); }
.pad.hit { background: radial-gradient(circle, var(--brand), #0b6b47) !important; box-shadow: 0 0 26px var(--brand); color: #03140c; }
.pad.wrong { background: radial-gradient(circle, var(--bad), #5a1620) !important; }
@media (max-width: 520px) { .pads { grid-template-columns: repeat(4, 1fr); } .pad { height: 70px; } .fret { height: 20px; } .fret-nums, .string { grid-template-columns: 34px repeat(var(--frets), 1fr); } .string::before { left: 34px; } }

/* drum staff, drum-rack grid, tab, chord boxes (draw-instruments.js) */
.drumstaff .pclef, .drumstaff .beam { fill: var(--ink); }
.drumstaff .stem { stroke: var(--ink); stroke-width: 1.6; }
.drumstaff .flag { stroke: var(--ink); stroke-width: 2; fill: none; }
.drumstaff .xhead { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.drumstaff .head.fill { fill: var(--ink); stroke: none; }
.drumstaff .openmark { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.drumstaff .hl { stroke: var(--brand) !important; fill: var(--brand) !important; filter: drop-shadow(0 0 5px var(--brand)); }
.drumstaff .xhead.done, .drumstaff .head.done { stroke: var(--ok); fill: var(--ok); }
.drumstaff .count { font-size: 11px; fill: var(--ink-soft); }
.drumstaff .count.beat { font-weight: 800; fill: var(--ink); }
.drumgrid .lane { font-size: 11px; fill: var(--ink-soft); }
.drumgrid .cell { fill: var(--roll-white); }
.drumgrid .cell.beat { fill: var(--roll-black); }
.drumgrid .cell.on { fill: var(--brand); filter: drop-shadow(0 0 3px var(--brand)); }
.drumgrid .cell.hl { stroke: var(--brand-2); stroke-width: 2; }
.tab .line { stroke: var(--ink-soft); }
.tab .tabclef { font-weight: 800; font-size: 12px; fill: var(--ink-soft); }
.tab .tabbg { fill: var(--card-solid); }
.tab .tabnum { font-weight: 800; font-size: 14px; fill: var(--ink); }
.tab .tabnum.hl { fill: var(--brand); }
.tab .label { font-size: 11px; fill: var(--ink-soft); }
.chordbox .line { stroke: var(--ink); stroke-width: 1.3; }
.chordbox .nut { fill: var(--ink); }
.chordbox .cbname { font-weight: 800; font-size: 16px; fill: var(--ink); }
.chordbox .cbdot { fill: var(--brand); filter: drop-shadow(0 0 4px var(--brand)); }
.chordbox .cbopen { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chordbox .cbmark { font-size: 15px; fill: var(--ink-soft); }
.shapes { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0; }
.shape { opacity: .55; }
.shape.now { opacity: 1; }
.shape.done { opacity: .8; }
.row.seg { gap: 4px; }
.btn.small { padding: 5px 10px; font-size: .85rem; }
.btn.small.on { border-color: var(--brand); color: var(--brand); }
.stop.soon { opacity: .45; cursor: default; }
.stop.soon small { color: var(--ink-soft); }
.drumstaff .tuplet { font-size: 11px; font-style: italic; fill: var(--ink); }
.drumstaff .accent { font-size: 15px; font-weight: 800; fill: var(--brand-2); }
.drumstaff .ghost { font-size: 15px; fill: var(--ink-soft); }
.drumgrid .cell.on.acc { fill: var(--brand-2); }
.drumgrid .cell.on.ghost { fill: var(--brand); opacity: .45; }
.dict-grid { display: grid; grid-template-columns: 74px repeat(var(--steps), minmax(16px, 1fr)); gap: 3px; margin: 12px 0; align-items: center; overflow-x: auto; }
.dict-name { font-size: .78rem; color: var(--ink-soft); }
.dict-cell { height: 28px; border-radius: 5px; border: 1px solid var(--rule); background: var(--roll-white); cursor: pointer; padding: 0; }
.dict-cell.beat { background: var(--roll-black); border-color: rgba(45, 255, 160, 0.3); }
.dict-cell.on { background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.dict-cell.wrong { outline: 2px solid var(--bad); }

/* note names on the neck, and the little drum staff on each pad (keyboard.js) */
.fret span { position: relative; z-index: 1; font-size: 10px; font-weight: 700; color: #f7e9c9; text-shadow: 0 1px 2px #000; pointer-events: none; }
.fret.sharp span { font-size: 8px; color: #c9b892; }
.fret.hit span, .fret.wrong span { visibility: hidden; }
.pad-staff { width: 58px; height: 40px; margin-top: 2px; flex-shrink: 0; }
.pads .pad { height: 132px; }
.pad-icon { line-height: 1; }
.pad-staff line { stroke: currentColor; stroke-width: 0.8; opacity: .55; }
.pad-staff .head { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.pad-staff .head.fill { fill: var(--brand); stroke: none; }
.pad-staff .open { fill: none; stroke: currentColor; stroke-width: 0.9; }
#keyboard-dock.no-names .fret span, #keyboard-dock.no-names .pad-staff, #keyboard-dock.no-names .pad b { visibility: hidden; }

/* the staff's notes, shown on the keys / frets in teaching steps (Keyboard.markKeys) */
.k.white.shown { background: linear-gradient(#ffffff, #9ff5cb) !important; box-shadow: inset 0 -6px 0 var(--brand), 0 0 14px rgba(45, 255, 160, 0.45); }
.k.black.shown { background: linear-gradient(#1f8f60, #0b4a31) !important; box-shadow: 0 0 12px rgba(45, 255, 160, 0.6); }
.k.white.shown span { color: #05301e; }
.fret.shown::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(45, 255, 160, 0.35); box-shadow: 0 0 10px rgba(45, 255, 160, 0.6); }
#names-btn.off { text-decoration: line-through; opacity: .6; }
.pad.shown { box-shadow: 0 0 0 2px var(--brand), 0 0 18px rgba(45, 255, 160, 0.5); }