/* MIX-ED — DJ Academy Portal
   Same look as Mix-Ed Classroom: cream "bright-room" background, off-white cards with a thin
   outline in their own colour, near-black ink, the MIX-ED pink / purple / green, Anton for big
   uppercase headings and Open Sans for text (both self-hosted in assets/fonts, as in Classroom).
*/

@font-face { font-family: "Anton"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/open-sans-latin-800-normal.woff2") format("woff2"); }

/* -----------------------------------------------------------
   THEME TOKENS
   The portal supports light + dark.
     - Default (no attribute) = LIGHT (clean, classroom-projector friendly)
     - <html data-theme="dark"> = DARK (studio aesthetic)
   The Studios (DJ, Composer, Player) are always dark regardless of
   user preference — they use body.always-dark which forces the dark token
   set locally. Navigation/admin pages follow the user toggle.
   ----------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg: #f5f0e4;              /* Classroom's cream board */
  --bg-elev: #efe8d8;
  --bg-card: #fffdf8;
  --surface-1: #f5f0e4;       /* page background */
  --surface-2: #fffdf8;        /* cards, panels */
  --surface-3: #efe8d8;        /* nested cards */
  --surface-overlay: rgba(70,50,20,0.08);
  /* Borders */
  --border: #d6cdb9;
  --border-strong: #111111;
  --border-soft: #e3dac6;
  /* Text */
  --text: #111111;
  --text-dim: #45444f;
  --text-muted: #6b6878;
  --text-on-accent: #ffffff;
  /* Accents: the MIX-ED brand, as in Classroom */
  --accent-blue:   #3d5fec;
  --accent-purple: #7031d8;
  --accent-pink:   #e43a6c;
  --accent-green:  #1fa463;
  --accent-amber:  #e0a020;
  --accent: var(--accent-pink);
  /* States */
  --success: #2e7d32;
  --warning: #b58900;
  --danger: #c0392b;
  /* Geometry / type */
  --radius: 10px;
  --shadow: 0 6px 18px rgba(70,50,20,0.10);
  --shadow-lg: 0 16px 34px rgba(70,50,20,0.16);
  --max: 1100px;
  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
}

/* Dark theme — applied via <html data-theme="dark"> or body.always-dark.
   Swaps the surface/text/border tokens; accents stay the same. */
:root[data-theme="dark"],
body.always-dark,
.instrument-dark {
  --bg: #0e0e11;
  --bg-elev: #202027;
  --bg-card: #17171c;
  --surface-1: #0e0e11;
  --surface-2: #17171c;
  --surface-3: #202027;
  --surface-overlay: rgba(255,255,255,0.06);
  --border: #2e2e38;
  --border-strong: #f4f4f6;
  --border-soft: #2e2e38;
  --text: #f4f4f6;
  --text-dim: #c3c3cf;
  --text-muted: #a4a4b2;
  --text-on-accent: #ffffff;
  --accent-purple: #9a6bff;
  --accent-pink:   #ff5288;
  --accent-green:  #35c97f;
  --shadow: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 44px -20px rgba(0,0,0,0.6);
}

/* When the instrument lives inside a light-themed page, restate background/
   text so the inner shell actually looks dark instead of just having dark
   tokens that nothing references. */
.instrument-dark {
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}
.site-header .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 20px;
  text-decoration: none; color: var(--text);
}
.brand img { height: 32px; width: auto; display: block; }
/* The wordmark SVG is drawn near-black; flip it to white on dark surfaces so the logo doesn't vanish. */
:root[data-theme="dark"] .brand img,
body.always-dark .brand img { filter: invert(1) brightness(1.15); }
.brand .tagline { font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); border-left: 1px solid var(--border); padding-left: 20px; }

.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  color: var(--text-dim); text-decoration: none;
  font-weight: 400; font-size: 0.95rem;
  padding: 8px 14px; border-radius: var(--radius);
  letter-spacing: 0.5px;
}
.nav a:hover, .nav a.active { color: var(--text); background: var(--bg-elev); }

/* Layout */
main { max-width: var(--max); margin: 0 auto; padding: 40px 24px 96px; }

/* Hero */
.hero { padding: 64px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 48px; }
.hero .hero-logo { max-width: 380px; margin-bottom: 28px; display: block; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1;
  margin: 0 0 18px;
  font-weight: 400;
  letter-spacing: -1px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { font-size: 1.1rem; color: var(--text-dim); max-width: 640px; margin: 0 0 24px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 12px 22px;
  border-radius: var(--radius); font-weight: 500;
  font-size: 0.95rem; letter-spacing: 0.5px;
  border: 1px solid var(--border-strong); cursor: pointer;
  text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--accent-pink); color: #ffffff; border-color: var(--accent-pink); }
.btn-primary:hover { background: #c92a72; border-color: #c92a72; text-decoration: none; }
.btn-secondary { background: var(--bg); color: var(--text); }
.btn-secondary:hover { background: var(--bg-elev); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text-dim); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { color: var(--text); text-decoration: none; }

/* Section */
.section-title { margin: 48px 0 8px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.2px; text-transform: uppercase; }
.section-sub { color: var(--text-dim); margin-top: 0; margin-bottom: 24px; }

/* Pill filters */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.pill {
  font: inherit; font-size: 0.85rem; letter-spacing: 0.5px;
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text); cursor: pointer;
}
.pill:hover { background: var(--bg-elev); }
.pill.active { background: var(--accent-pink); color: #ffffff; border-color: var(--accent-pink); }

/* Lesson grid */
.lesson-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.lesson-card {
  display: block; padding: 24px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  transition: background-color .15s;
  position: relative;
}
.lesson-card .tag {
  display: inline-block; font-size: 0.7rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent-blue); font-weight: 500;
  margin-bottom: 14px;
}
.lesson-card:nth-child(3n+2) .tag { color: var(--accent-purple); }
.lesson-card:nth-child(3n+3) .tag { color: var(--accent-pink); }
.lesson-card:hover { background: var(--bg-elev); border-color: var(--accent-purple); text-decoration: none; }
.lesson-card h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.2px; }
.lesson-card p { margin: 0; color: var(--text-dim); font-size: 0.93rem; }
.lesson-card .meta {
  display: flex; gap: 8px; align-items: center;
  margin-top: 20px; font-size: 0.78rem; color: var(--text-dim);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.lesson-card .complete-badge {
  position: absolute; top: 22px; right: 22px;
  background: var(--accent-pink); color: #ffffff;
  font-size: 0.65rem; font-weight: 500; padding: 3px 8px;
  border-radius: 6px; letter-spacing: 1px; text-transform: uppercase;
}

/* Lesson detail */
.lesson-header { padding: 8px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 36px; }
.lesson-header h1 { font-family: var(--font-display); margin: 12px 0 12px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; letter-spacing: -0.5px; text-transform: uppercase; }
.lesson-header .crumbs { color: var(--text-dim); font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; }
.lesson-content { max-width: 720px; font-size: 1.05rem; }
.lesson-content h2 { margin-top: 40px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.2px; text-transform: uppercase; color: var(--accent-purple); }
.lesson-content p { color: var(--text); }
.lesson-content ul { padding-left: 22px; }
.lesson-content figure { margin: 28px 0; }
.lesson-content figcaption { color: var(--text-dim); font-size: 0.88rem; margin-top: 8px; }
.video-wrap {
  position: relative; padding-bottom: 56.25%; height: 0;
  border: 1px solid var(--border); overflow: hidden; background: #000;
  margin: 16px 0;
}
.video-wrap iframe, .video-wrap video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Downloads */
.downloads { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.downloads a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: 0.95rem;
}
.downloads a:hover { background: var(--bg-elev); text-decoration: none; }
.downloads .icon { font-size: 1rem; }

/* Quiz */
.quiz {
  margin-top: 48px; padding: 32px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.quiz h2 { margin-top: 0; }
.question { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.question:last-of-type { border-bottom: 0; }
.question .q-text { font-weight: 500; margin-bottom: 12px; }
.options { display: grid; gap: 8px; }
.option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; user-select: none; font-size: 0.95rem;
}
.option:hover { border-color: var(--text); }
.option input { accent-color: var(--text); }
.option.correct { border-color: var(--success); background: #ecf6ec; }
.option.wrong   { border-color: var(--danger);  background: #fbf1ef; }
.option:has(input:checked) { border-color: var(--accent-pink); background: #fdedf4; }
.quiz-result {
  margin-top: 20px; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--border-strong);
  font-weight: 500;
}

/* Mark complete bar */
.complete-bar {
  margin-top: 36px; padding: 20px 24px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.complete-bar .status { color: var(--text-dim); }
.complete-bar.done { background: #fdedf4; border-color: var(--accent-pink); }
.complete-bar.done .status { color: var(--accent-pink); font-weight: 500; }

/* Teacher dashboard */
.stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 16px 0 36px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.stat {
  background: var(--bg);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 24px;
}
.stat .label { color: var(--text-dim); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.stat .value { font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; letter-spacing: -1px; color: var(--accent-purple); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: 540px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
th { background: var(--bg-elev); color: var(--text-dim); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; }
tr:last-child td { border-bottom: 0; }

.notice {
  margin: 28px 0 8px; padding: 18px 20px;
  background: var(--bg-elev); border: 1px solid var(--border);
  font-size: 0.93rem; color: var(--text);
}
.notice code { background: var(--bg); padding: 1px 6px; border: 1px solid var(--border); font-size: 0.85em; }

/* Inputs */
input[type="text"] {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 10px 14px; font: inherit; font-size: 0.95rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 80px;
  padding: 28px 24px; color: var(--text-dim);
  text-align: center; font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* ===== Lesson → quiz CTA + teach CTA ===== */
.quiz-cta, .teach-cta {
  margin: 32px 0 8px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #fdedf4 0%, #ede5fe 100%);
  border: 1px solid var(--accent-purple);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.teach-cta { margin: 18px 0 24px; background: linear-gradient(135deg, #e5edfe 0%, #ede5fe 100%); border-color: var(--accent-blue); }
.quiz-cta-label, .teach-cta-label {
  font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim);
}
.quiz-cta-title, .teach-cta-title { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.2px; margin: 4px 0 4px; }
.quiz-cta-sub, .teach-cta-sub { font-size: 0.9rem; color: var(--text-dim); }

/* Video — caption track styling */
.video-wrap video::cue {
  background: rgba(10,10,10,0.75);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
}

/* ===== Submission form ===== */
.submit-form { margin-top: 32px; padding: 24px; background: var(--bg-elev); border: 1px solid var(--border); }
.submit-form h2 { margin-top: 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.2px; }
.submit-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; }
.submit-row label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase; }
.submit-row input, .submit-row select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 10px 14px; font: inherit; font-size: 0.95rem; text-transform: none; letter-spacing: 0;
}
.submit-confirm { margin-top: 16px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--text); font-size: 0.95rem; }
.game-quit-row { margin-top: 24px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Game frame — keeps the play area visible against the white page */
#game-root {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  margin-top: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  position: relative;
}

/* Fullscreen button pinned bottom-right of the game frame */
.fs-btn {
  position: absolute;
  bottom: 16px; right: 16px;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
}
.fs-btn:hover { background: var(--bg); }
.fs-btn svg { width: 22px; height: 22px; display: block; }

/* Mistakes review on the results screen */
.mistakes-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.mistakes-section .cta-row { margin-top: 32px; padding-top: 8px; }
.mistakes-section h2 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: -0.2px; margin: 0 0 18px;
  color: var(--accent-purple);
}
.mistakes-list {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.mistake-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px 24px 56px;
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  text-align: center;
}
.mistake-num {
  position: absolute;
  top: 50%; left: 28px;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.8rem; color: var(--text-dim);
  line-height: 1;
}
.mistake-question {
  background: var(--bg-elev);
  border-radius: 6px;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
  min-height: 120px;
}
.mistake-question .staff-svg { max-width: 100%; max-height: 140px; }
.mistake-question .prompt-text { font-size: 1rem; font-weight: 500; }
.prompt-text .mnemonic {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.mistake-question .camelot-key { font-size: 2.6rem; }
.mistake-question .big-letter { font-size: 4rem; }
.mistake-answers {
  display: flex; gap: 32px; justify-content: center;
  margin-top: 4px;
}
.mistake-answers > div {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mistake-answers .lbl {
  font-size: 0.7rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-dim); font-weight: 500;
}
.mistake-answers strong {
  font-family: var(--font-display);
  font-size: 2.2rem; line-height: 1; font-weight: 400; letter-spacing: -0.5px;
}
.m-you strong { color: #ff1744; }
.m-right strong { color: #00c853; }

/* Print — show only the score + mistakes review on paper */
@media print {
  .site-header, .site-footer, .fs-btn,
  .game-result .submit-form, .game-result > .cta-row,
  .mistakes-section .cta-row, .game-result .result-meta {
    display: none !important;
  }
  body, main { background: #fff !important; }
  #game-root { border: 0; box-shadow: none; padding: 0; }
  .mistake-card { break-inside: avoid; page-break-inside: avoid; }
  .mistakes-list { grid-template-columns: 1fr 1fr; }
}

/* ===== Fullscreen — scale the quiz to fill the window ===== */
:fullscreen { background: var(--bg); overflow-y: auto; }
:fullscreen .site-header,
:fullscreen .site-footer { display: none; }
:fullscreen main { max-width: 1600px; padding: 32px 40px 40px; }

:fullscreen .game-intro h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
:fullscreen .game-intro .section-sub { font-size: 1.2rem; }
:fullscreen .game-rules li { font-size: 1.1rem; padding: 12px 0; }

:fullscreen .game-hud { max-width: 720px; }
:fullscreen .hud-cell { padding: 18px 26px; }
:fullscreen .hud-label { font-size: 0.95rem; }
:fullscreen .hud-value { font-size: 3rem; }

:fullscreen .game-stage { min-height: 500px; padding: 48px 0; gap: 20px; }
:fullscreen .prompt-text { font-size: 2.2rem; max-width: 1100px; }
:fullscreen .big-letter { font-size: clamp(9rem, 18vw, 14rem); }
:fullscreen .camelot-key { font-size: clamp(5rem, 12vw, 8rem); }
:fullscreen .staff-svg { max-width: 980px; }
:fullscreen .staff-svg.mini { max-width: 400px; }

:fullscreen .game-options { gap: 14px; }
:fullscreen .opt-btn { font-size: 1.6rem; padding: 24px 36px; min-width: 96px; border-radius: 6px; }
:fullscreen .opt-btn.big { font-size: 2.2rem; padding: 30px 38px; min-width: 120px; }
:fullscreen .opt-btn.wide { flex: 1 1 360px; max-width: 460px; font-size: 1.5rem; padding: 24px 30px; }
:fullscreen .opt-btn.camelot { font-size: 1.8rem; padding: 28px 36px; }
:fullscreen .opt-btn.mini-staff { padding: 12px; }
:fullscreen .game-options.find-grid { max-width: 800px; gap: 20px; }

:fullscreen .game-feedback { font-size: 1.4rem; margin-top: 22px; min-height: 32px; }
:fullscreen .game-quit-row { margin-top: 32px; gap: 14px; }
:fullscreen .game-quit-row .btn { font-size: 1rem; padding: 14px 24px; }
:fullscreen .fs-btn { width: 48px; height: 48px; }
:fullscreen .fs-btn svg { width: 24px; height: 24px; }

:fullscreen .game-result h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
:fullscreen .big-num { font-size: clamp(8rem, 14vw, 11rem); }
:fullscreen .result-pct { font-size: 2rem; }
:fullscreen .result-verdict { font-size: 1.4rem; }

/* ===== Scoreboard ===== */
.board-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.board-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.board-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.board-controls select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 9px 12px; font: inherit; font-size: 0.95rem; letter-spacing: 0;
}

.board-wrap { border: 1px solid var(--border); overflow-x: auto; }
.board-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.board-table th, .board-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 1rem; }
.board-table th { background: var(--bg-elev); color: var(--text-dim); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; }
.board-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.board-table .rank { color: var(--text-dim); font-variant-numeric: tabular-nums; width: 48px; }
.board-table .name { font-weight: 500; }
.board-table .quiz { color: var(--text-dim); font-size: 0.9rem; }
.board-table tr:last-child td { border-bottom: 0; }
.empty { padding: 40px 24px; text-align: center; color: var(--text-dim); }

.storage-status {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); background: var(--bg-elev);
}
.storage-status.live { color: var(--success); border-color: var(--success); background: #f1f8f1; }

/* Projector mode — big type, hide nav/footer */
body.projector-mode .site-header,
body.projector-mode .site-footer,
body.projector-mode .notice,
body.projector-mode .board-controls .btn-ghost,
body.projector-mode #count { display: none; }
body.projector-mode main { max-width: 1600px; padding-top: 28px; }
body.projector-mode .section-title { font-size: 3rem; font-weight: 300; }
body.projector-mode .section-sub { font-size: 1.2rem; }
body.projector-mode .board-table th { font-size: 1rem; padding: 18px 24px; }
body.projector-mode .board-table td { font-size: 1.8rem; padding: 22px 24px; font-weight: 300; }
body.projector-mode .board-table .rank { font-size: 1.4rem; width: 80px; }
body.projector-mode .board-table .quiz { font-size: 1.1rem; }

/* ===== Quick Quiz Game ===== */
.game-intro { max-width: 640px; padding: 24px 0; }
.game-intro h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; letter-spacing: -0.5px; margin: 8px 0 12px; text-transform: uppercase; }
.game-rules { list-style: none; padding: 0; margin: 18px 0 28px; }
.game-rules li { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.95rem; letter-spacing: 0.3px; }
.game-rules li::before { content: "·"; color: var(--text-dim); margin-right: 10px; }
.game-intro .crumbs { color: var(--text-dim); font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; }

.game-hud {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--border-strong); margin: 8px 0 28px;
  max-width: 440px; margin-left: auto;
}
.game-hud.two-cell { grid-template-columns: 1fr 1fr; max-width: 320px; }
.hud-cell { padding: 12px 18px; }
.hud-cell + .hud-cell { border-left: 1px solid var(--border-strong); }
.hud-label { font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.hud-value { font-family: var(--font-display); font-size: 2rem; font-weight: 400; letter-spacing: -1px; line-height: 1.1; color: var(--accent-pink); }

.game-stage {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 0; min-height: 220px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.prompt-text {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 300; letter-spacing: -0.5px;
  text-align: center; color: var(--text);
}
.staff-svg { width: 100%; max-width: 520px; height: auto; }
.camelot-key {
  font-size: clamp(3rem, 8vw, 5rem); font-weight: 300; letter-spacing: -2px;
  margin-top: 8px; line-height: 1;
}

.game-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.opt-btn {
  font: inherit; font-size: 1.05rem; font-weight: 500;
  min-width: 64px; padding: 14px 18px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--text); cursor: pointer;
  transition: background-color .15s, color .15s, transform .05s;
  letter-spacing: 0.5px;
}
.opt-btn:hover { background: var(--bg-elev); }
.opt-btn:active { transform: scale(0.97); }
.opt-btn.wide { flex: 1 1 220px; max-width: 280px; }
.opt-btn.mini-staff { padding: 8px; background: #ffffff; }
.game-options.find-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 540px; margin: 0 auto; }
.game-options.find-grid .opt-btn { margin: 0; }
.game-options.note-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}
.opt-btn.note-label { padding: 12px 4px; min-width: 0; font-size: 1rem; }
:fullscreen .opt-btn.note-label { padding: 22px 8px; font-size: 1.6rem; }
:fullscreen .game-options.note-grid { max-width: 900px; gap: 14px; }

/* Level 3 — single chromatic row of 12 same-colour buttons */
.game-options.l3-row-wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 8px;
}
.opt-btn.l3-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 0;
  padding: 10px 2px;
  line-height: 1.1;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.opt-btn.l3-cell .hi { font-size: 1.15rem; font-weight: 500; }
.opt-btn.l3-cell .lo {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
  margin-top: 3px;
  min-height: 1.1em; /* keeps D, G, A the same height as the rest */
}
.opt-btn.l3-cell.correct .lo { color: rgba(255,255,255,0.92); }
.opt-btn.l3-cell.wrong .lo    { color: rgba(255,255,255,0.92); }

:fullscreen .game-options.l3-row-wrap { max-width: 1000px; }
:fullscreen .opt-btn.l3-cell .hi { font-size: 1.55rem; }
:fullscreen .opt-btn.l3-cell .lo { font-size: 1.2rem; }

/* Two-octave letter row — 14 buttons across, lower-octave on the left */
.game-options.two-oct-grid {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 6px;
  max-width: 820px;
  margin: 0 auto;
}
.opt-btn.note-2oct { padding: 12px 2px; min-width: 0; font-size: 1.05rem; line-height: 1; }
.opt-btn.note-2oct sub {
  font-size: 0.55rem; font-weight: 400;
  vertical-align: baseline; position: relative; top: 0.4em; margin-left: 1px;
}
:fullscreen .game-options.two-oct-grid { max-width: 1200px; gap: 10px; }
:fullscreen .opt-btn.note-2oct { padding: 22px 4px; font-size: 1.6rem; }
:fullscreen .opt-btn.note-2oct sub { font-size: 0.85rem; top: 0.4em; }

/* Piano keyboard for the piano-pitch quizzes — flat solid black keys, thick borders */
.game-options.piano-wrap { display: block; padding: 0 8px; }
.piano-toolbar {
  display: flex; justify-content: flex-end;
  max-width: 820px; margin: 0 auto 10px;
}
.piano-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.piano-toggle input { margin: 0; cursor: pointer; accent-color: var(--accent-pink); }
.piano.no-labels .white-key,
.piano.no-labels .black-key { color: transparent; }
.piano.no-labels .black-key span { color: transparent; }
/* C4 / C5 stay visible as orientation anchors in octave-strict mode */
.piano.no-labels .white-key.anchor { color: var(--text); }

/* Subscript octave digits on piano keys */
.piano-key sub {
  font-size: 0.55rem;
  font-weight: 400;
  vertical-align: baseline;
  position: relative;
  top: 0.35em;
  margin-left: 1px;
}

/* One-line strict-octave hint above the melody keyboard */
.strict-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 auto 12px;
  max-width: 760px;
  line-height: 1.4;
}
.strict-hint sub { font-size: 0.7em; }
:fullscreen .strict-hint { font-size: 1.05rem; }

/* ---------- Ukulele practice section ---------- */
.uke-player-wrap { max-width: 980px; margin: 0 auto; padding: 24px 0; }
.uke-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.uke-header .back-link { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; margin-bottom: 4px; }
.uke-header .back-link:hover { color: var(--text); }
.uke-header h2 { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 400; text-transform: uppercase; letter-spacing: -0.5px; }
.uke-header .meta { color: var(--text-dim); margin: 4px 0 0; font-size: 0.95rem; }
.uke-stage {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 24px 24px;
  margin-bottom: 24px;
}
.uke-chord-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 14px;
}
.uke-chord-cell {
  flex: 1 1 calc(25% - 16px);
  max-width: 200px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
}
.uke-chord-name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  text-align: center;
  padding: 4px 16px;
  border-radius: 6px;
  letter-spacing: -0.5px;
}
.uke-chord-cell.active .uke-chord-name {
  background: rgba(238, 61, 139, 0.22); /* accent-pink at low opacity */
  color: var(--text);
}
.uke-chord-svg { display: flex; justify-content: center; }
.uke-chord { display: block; }
.uke-beat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 8px;
}
.uke-beat-group {
  flex: 1 1 calc(25% - 16px);
  max-width: 200px;
  min-width: 130px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
}
.uke-beat {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: #c8c8c8;
  min-width: 14px;
  text-align: center;
  letter-spacing: -0.5px;
  transition: color 0.04s linear;
}
.uke-beat.uke-beat-and { font-size: 1.2rem; color: #d8d8d8; }
.uke-beat.active { color: var(--text); }
.uke-beat.uke-beat-and.active { color: var(--text); }

/* v2 modern audio + lyrics layout — all chord cells in a row, single lyric below */
.uke-stage-v2 {
  background: linear-gradient(180deg, #fcfcfc 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.uke-stage-v2 .uke-chord-row {
  display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center;
  margin-bottom: 24px;
}
.uke-stage-v2 .uke-chord-cell {
  flex: 1 1 calc(25% - 12px);
  max-width: 220px;
  min-width: 140px;
  background: transparent;
  border-radius: 10px;
  padding: 12px 8px 14px;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  position: relative;
  transition: background-color 0.15s ease;
}
.uke-stage-v2 .uke-chord-cell.active {
  background: rgba(238, 61, 139, 0.06);
}
.uke-stage-v2 .uke-chord-cell.next {
  background: rgba(46, 200, 130, 0.07);
}
.uke-stage-v2 .uke-chord-cell.next .uke-chord-svg .uke-chord ellipse,
.uke-stage-v2 .uke-chord-cell.next .uke-chord-svg .uke-chord circle[fill="#0a0a0a"] {
  fill: #2ec882;
}
.uke-stage-v2 .uke-chord-cell.next .uke-chord-name {
  color: #2ec882;
}
.uke-stage-v2 .uke-chord-name-row {
  display: inline-flex;
  padding: 2px 0;
}
.uke-stage-v2 .uke-chord-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.5px;
  padding: 4px 18px;
  border-radius: 8px;
  line-height: 1.1;
  transition: background 0.15s ease, color 0.15s ease;
}
.uke-stage-v2 .uke-chord-cell.active .uke-chord-name {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(238, 61, 139, 0.35);
}
.uke-stage-v2 .uke-chord-svg .uke-chord {
  width: 110px; height: 140px;
}
.uke-stage-v2 .uke-beat-group {
  display: flex; gap: 10px;
  align-items: center;
  margin-top: 4px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 140px;
  justify-content: space-around;
}
.uke-stage-v2 .uke-beat {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: #c8c8c8;
  min-width: 16px;
  text-align: center;
  letter-spacing: -0.5px;
  transition: color 0.04s linear, transform 0.04s linear;
}
.uke-stage-v2 .uke-beat.uke-beat-and {
  font-size: 1.15rem;
  color: #d8d8d8;
}
.uke-stage-v2 .uke-beat.active { color: var(--text); transform: scale(1.2); }
.uke-stage-v2 .uke-beat.uke-beat-and.active { color: var(--text); }
.uke-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
  background: var(--bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.uke-dropzone-active {
  border-color: var(--accent-pink);
  background: rgba(238, 61, 139, 0.06);
}
.uke-dropzone-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: pointer; gap: 4px;
}
.uke-dropzone-icon {
  font-size: 2rem; color: var(--accent-purple); line-height: 1;
}
.uke-dropzone strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -0.2px;
}
.uke-dropzone-sub { color: var(--text-dim); font-size: 0.88rem; margin: 4px 0 0; }
.uke-audio-error {
  background: #fff4f4;
  border: 1px solid #f5c2c7;
  color: #842029;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.uke-audio-error strong { display: block; margin-bottom: 2px; }
.uke-audio-error code { background: #ffe7e9; padding: 2px 6px; border-radius: 4px; font-size: 0.88em; }
.uke-chord-row-wrap { position: relative; }
.uke-bar-counter {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent-pink);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--accent-pink);
  line-height: 1;
  box-shadow: 0 2px 10px rgba(238, 61, 139, 0.18);
  pointer-events: none;
  z-index: 2;
}
.uke-stage-v2 .uke-bar-pips {
  display: flex; gap: 6px; margin-top: 4px;
}
.uke-stage-v2 .uke-bar-pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.15s ease, transform 0.15s ease;
}
.uke-stage-v2 .uke-bar-pip.active {
  background: var(--accent-pink);
  transform: scale(1.25);
}
.uke-lyric-line {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 28px;
  margin: 8px auto 0;
  max-width: 880px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text);
  min-height: 1.5em;
  line-height: 1.5;
  letter-spacing: -0.2px;
}
.uke-lyric-line:empty::before {
  content: "♪";
  color: var(--text-dim);
  font-size: 1.2rem;
}
.uke-lyric-flip { animation: ukeLyricFlip 0.4s ease-out; }
@keyframes ukeLyricFlip {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Old keep-around (audio+lyrics karaoke) — superseded by v2 above */
.uke-stage-song {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: stretch;
}
.uke-song-chords {
  display: flex; flex-direction: column;
  gap: 8px; align-items: center;
}
.uke-now-label, .uke-next-label {
  font-family: var(--font-display);
  font-size: 0.8rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-dim);
  margin-top: 4px;
}
.uke-current-diagram, .uke-next-diagram {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.uke-chord-name {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 400;
  letter-spacing: -0.5px;
}
.uke-chord-name-big { font-size: 2rem; }
.uke-end {
  color: var(--text-dim); font-style: italic;
  padding: 24px 12px; text-align: center;
}
.uke-lyrics {
  position: relative;
  height: 360px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.uke-lyrics-inner {
  position: absolute; left: 0; right: 0;
  padding: 160px 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.uke-lyric-line {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 14px 28px;
  font-size: 1.2rem;
  color: var(--text-dim);
}
.uke-lyric-line .uke-line-chord {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--accent-blue);
  min-width: 56px;
  text-align: right;
  letter-spacing: -0.5px;
}
.uke-lyric-line .uke-line-text { flex: 1; }
.uke-lyric-line.active {
  color: var(--text);
  font-weight: 500;
  background: rgba(238, 61, 139, 0.13);
}
.uke-lyric-line.active .uke-line-chord { color: var(--accent-pink); font-size: 1.6rem; }
.uke-lyric-line.past { opacity: 0.45; }
.uke-lyrics-fade-top,
.uke-lyrics-fade-bottom {
  position: absolute; left: 0; right: 0; height: 70px;
  pointer-events: none; z-index: 2;
}
.uke-lyrics-fade-top { top: 0;    background: linear-gradient(180deg, var(--bg), transparent); }
.uke-lyrics-fade-bottom { bottom: 0; background: linear-gradient(0deg,  var(--bg), transparent); }

@media (max-width: 720px) {
  .uke-stage-song { grid-template-columns: 1fr; gap: 16px; }
  .uke-lyrics { height: 260px; }
}
.uke-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.uke-controls .btn { padding: 12px 22px; min-width: 96px; }
.uke-transport { display: flex; gap: 8px; }

/* Instrument + label-mode + key-transpose row */
.uke-instrument-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 20px;
  align-items: center;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.uke-label-mode { display: flex; flex-direction: column; gap: 6px; }
.uke-label-mode label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.uke-label-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}
.uke-label-btn, .uke-vox-btn {
  font: inherit;
  font-size: 0.92rem;
  padding: 8px 14px;
  background: var(--bg);
  color: var(--text);
  border: 0;
  cursor: pointer;
  border-right: 1px solid var(--border-strong);
}
.uke-label-btn:last-child, .uke-vox-btn:last-child { border-right: 0; }
.uke-label-btn:hover:not(:disabled), .uke-vox-btn:hover { background: var(--bg-elev); }
.uke-label-btn.active, .uke-vox-btn.active {
  background: var(--accent-pink);
  color: #ffffff;
}
.uke-label-btn:disabled {
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.5;
}
.uke-instrument-pick { display: flex; flex-direction: column; gap: 6px; }
.uke-instrument-pick label,
.uke-transpose label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.uke-instrument-pick label span,
.uke-transpose label span { color: var(--accent-pink); font-size: 1rem; }
.uke-instrument-pick select {
  font: inherit;
  font-size: 0.95rem;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.uke-transpose { display: flex; flex-direction: column; gap: 6px; }
.uke-transpose input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
  border-radius: 3px;
  outline: none;
}
.uke-transpose input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  background: var(--text);
  border-radius: 50%;
  cursor: pointer;
}
.uke-transpose input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--text);
  border-radius: 50%;
  cursor: pointer; border: 0;
}
.uke-transpose-hints {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: var(--text-dim);
  font-family: var(--font-display);
}

/* Piano-chord diagram tweak — wider than tall, looks more like a real keyboard */
.uke-chord.piano-chord { background: #f8f8f8; border: 1px solid var(--border-strong); border-radius: 4px; }

/* When the player is showing piano diagrams the chord cell can be wider */
.piano-mode .uke-chord-cell { max-width: 320px; }
.piano-mode .uke-chord-svg .uke-chord { width: 100%; height: auto; max-height: 140px; }

/* When the player is showing guitar diagrams the chord cell is the standard
 * width, but the SVG needs to keep its natural aspect ratio (taller than wide). */
.guitar-mode .uke-chord-cell { max-width: 200px; }
.guitar-mode .uke-chord-svg .uke-chord { width: 100%; height: auto; max-height: 180px; }

/* Teacher dashboard tools */
.teacher-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 24px 0 32px; }
.teacher-tool {
  display: block; padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.teacher-tool:hover { background: var(--bg-elev); border-color: var(--accent-purple); text-decoration: none; }
.teacher-tool .tag { display: inline-block; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-blue); font-weight: 500; margin-bottom: 12px; }
.teacher-tool h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 500; }
.teacher-tool p { margin: 0; color: var(--text-dim); font-size: 0.93rem; }

/* Song Builder layout — 5-step progressive disclosure */
.sb-grid { display: grid; gap: 18px; margin-bottom: 48px; }
.sb-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
}
.sb-card-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
}
.sb-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.05rem;
  margin-top: 2px;
}
.sb-step-body { min-width: 0; }
.sb-step-body .sb-h { margin-top: 0; }

/* Compact summary line shown after audio analysis */
.sb-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 14px;
}
.sb-summary-line { display: flex; gap: 10px; flex-wrap: wrap; }
.sb-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-elev);
  border-radius: 8px;
  font-size: 0.9rem;
}
.sb-pill .lbl {
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sb-pill strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text);
}

/* Waveform section — kept in the main view, NOT hidden */
.sb-wave-section {
  margin-top: 18px;
}
.sb-wave-section .sb-wave { margin-bottom: 12px; }

/* The advanced-edit panel — collapsed by default, holds only BPM/first-beat
 * fine tuning. The waveform stays in the main view above. */
.sb-adjust-panel {
  margin-top: 18px;
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sb-adjust-h {
  font-size: 0.92rem;
  color: var(--text-dim);
  margin-bottom: 14px;
  line-height: 1.5;
}
.sb-fine-controls {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.sb-fine-row {
  display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
}
.sb-fine-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display); font-size: 0.78rem;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim);
}
.sb-fine-row input, .sb-fine-row select {
  font: inherit; font-size: 0.9rem;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-transform: none; letter-spacing: normal;
  width: 100px;
}
.sb-hint-small { font-size: 0.82rem; color: var(--text-dim); margin: 6px 0 0; }
.sb-h {
  font-family: var(--font-display);
  font-size: 1rem; letter-spacing: 0.5px; text-transform: uppercase;
  font-weight: 400; color: var(--text-dim);
  margin: 0 0 14px;
}
.sb-drop-card { padding: 16px; }
.sb-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: 10px;
  padding: 24px;
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s;
}
.sb-dropzone.dragging { border-color: var(--accent-pink); background: rgba(238, 61, 139, 0.05); }
.sb-dropzone-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: pointer; gap: 4px;
}
.sb-dropzone-icon { font-size: 2rem; color: var(--accent-purple); }
.sb-dropzone strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.1rem; letter-spacing: -0.2px;
}
.sb-dropzone-sub { color: var(--text-dim); font-size: 0.88rem; margin: 4px 0 0; }
.sb-wave {
  background: #fafafa; border-radius: 8px; padding: 8px;
  margin-bottom: 12px; min-height: 110px;
  position: relative;
}
.sb-beat-grid {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 4;            /* sit ABOVE the waveform but below the orange region marker */
}
/* Make the WaveSurfer container scroll horizontally when zoomed in */
.sb-wave wave { overflow-x: auto !important; }
.sb-zoom-control {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}
.sb-zoom-control label {
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-dim);
}
.sb-zoom-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 140px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}
.sb-zoom-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--accent-purple);
  border-radius: 50%; cursor: pointer;
}
.sb-zoom-control input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--accent-purple);
  border-radius: 50%; cursor: pointer; border: 0;
}
.sb-small-btn { padding: 8px 12px !important; min-width: 48px !important; font-size: 0.9rem; }
.sb-wave-dragging,
.sb-wave-dragging * { cursor: grabbing !important; }
.sb-wave-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sb-wave-controls .btn { padding: 8px 14px; min-width: 56px; }
.sb-time { font-family: var(--font-display); font-size: 0.9rem; color: var(--text-dim); }
.sb-keytip { color: var(--text-dim); font-size: 0.85rem; margin-left: auto; }
.sb-row {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: end;
  margin-bottom: 8px;
}
.sb-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-dim);
  flex: 1; min-width: 120px;
}
.sb-row input,
.sb-row select {
  font: inherit; font-size: 0.95rem;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.sb-row .btn { align-self: end; }
.sb-hint { color: var(--text-dim); font-size: 0.88rem; margin: 8px 0; line-height: 1.45; }
.sb-hint kbd {
  font: inherit; font-size: 0.85em;
  padding: 1px 6px; background: var(--bg); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: 4px;
}
.sb-lyrics { display: flex; flex-direction: column; gap: 6px; }
.sb-lyrics-empty { color: var(--text-dim); font-style: italic; font-size: 0.9rem; }
.sb-lyric-row {
  display: grid; grid-template-columns: 60px 70px 1fr 32px;
  gap: 10px; align-items: center;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 6px;
}
.sb-lyric-bar {
  font-family: var(--font-display);
  font-size: 0.85rem; color: var(--accent-pink);
}
.sb-lyric-time { font-size: 0.75rem; color: var(--text-dim); }
.sb-lyric-row input {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}
.sb-output {
  background: #0a0a0a;
  color: #ee3d8b;
  padding: 16px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  white-space: pre;
  overflow-x: auto;
  max-height: 320px;
}
.sb-sections { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.sb-section-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-section-pill {
  display: inline-flex; flex-direction: column;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  min-width: 120px;
}
.sb-section-pill strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent-purple);
  letter-spacing: 0.3px;
}
.sb-section-bars { color: var(--text-dim); font-size: 0.78rem; margin-top: 2px; }
.sb-section-label {
  position: absolute;
  top: 4px; left: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  padding: 1px 7px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  border-radius: 3px;
  letter-spacing: 0.3px;
  pointer-events: none;
}
.sb-marker-list { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.sb-marker-h {
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 4px;
}
.sb-marker-row {
  display: grid; grid-template-columns: 70px 1fr 32px;
  gap: 10px; align-items: center;
  padding: 4px 8px; background: var(--bg);
  border-radius: 4px;
}
.sb-marker-time {
  font-family: var(--font-display);
  font-size: 0.8rem; color: var(--accent-pink);
}
.sb-marker-row input {
  font: inherit; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text);
}

@media (max-width: 920px) {
  .uke-instrument-row { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .uke-instrument-row { grid-template-columns: 1fr; gap: 16px; }
}
.uke-progress {
  position: relative;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.uke-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
  width: 0%;
  transition: width 0.1s linear;
}
.uke-time { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-dim); white-space: nowrap; }
.uke-speed {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.uke-speed label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.uke-speed label span { color: var(--accent-pink); font-size: 1.1rem; }
.uke-speed input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}
.uke-speed input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  background: var(--accent-pink);
  border-radius: 50%;
  cursor: pointer;
}
.uke-speed input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--accent-pink);
  border-radius: 50%;
  cursor: pointer; border: 0;
}
.uke-speed-presets { display: flex; gap: 6px; }
.uke-speed-note { margin-left: 8px; font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.5px; }
.uke-progress[title] { cursor: pointer; }
.btn-ghost-pill {
  font: inherit; font-size: 0.85rem;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg); color: var(--text-dim);
  cursor: pointer;
}
.btn-ghost-pill:hover { color: var(--text); border-color: var(--border-strong); }
.uke-chord-unknown {
  padding: 20px; border: 2px dashed var(--border-strong);
  border-radius: 8px; color: var(--text-dim);
  text-align: center; font-weight: 500;
}

@media (max-width: 720px) {
  .uke-stage { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .uke-controls { grid-template-columns: 1fr; gap: 12px; }
  .uke-speed { grid-template-columns: 1fr; }
}

/* Rhythm symbol display + button grid */
.rhythm-display {
  display: flex; align-items: center; justify-content: center;
  gap: 36px; margin: 20px 0 8px;
  min-height: 150px;
}
.rhythm-display.rhythm-pair { gap: 40px; }
.rhythm-display .rhythm-svg { width: 76px; height: 140px; display: block; }
.rhythm-plus {
  font-size: 2.4rem; font-weight: 400; color: var(--text-dim);
}
.game-options.rhythm-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}
.game-options.rhythm-grid.wide-grid {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  max-width: 760px;
}
.game-options.rhythm-grid .opt-btn { min-width: 0; padding: 14px 6px; }
:fullscreen .rhythm-display .rhythm-svg { width: 110px; height: 200px; }
:fullscreen .rhythm-plus { font-size: 3.4rem; }

/* Name-the-Chord button grid — column count per level so L1 fits on one line */
.game-options.chord-name-grid {
  display: grid;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
}
.game-options.chord-name-grid.l1 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.game-options.chord-name-grid.l2 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.game-options.chord-name-grid.l3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.opt-btn.chord-name {
  font-size: 1.05rem;
  font-weight: 500;
  padding: 12px 6px;
  min-width: 0;
}
:fullscreen .opt-btn.chord-name { font-size: 1.5rem; padding: 18px 8px; min-width: 0; }

/* Chord-notes progress indicator (Levels 2 and 3) */
.chord-progress {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  margin-top: 20px;
  color: var(--accent-purple);
  text-transform: uppercase;
  width: 100%;
}
:fullscreen .chord-progress { font-size: 1.5rem; margin-top: 28px; }

/* Play-the-melody progress indicator */
.melody-progress {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  margin-top: 20px;
  color: var(--accent-purple);
  text-transform: uppercase;
}
:fullscreen .melody-progress { font-size: 1.6rem; margin-top: 32px; }

/* Player fine-tune row — small, neutral, lives under the speed/key controls */
.uke-finetune {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.uke-finetune-label {
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-dim);
  margin-right: 4px;
}
.uke-finetune .btn-ghost-pill {
  font-size: 0.82rem;
  padding: 5px 10px;
}
.uke-finetune-status {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-dim);
  min-width: 100px;
  text-align: right;
}

/* Songbook "Your own song" is a teachers' tool: what a pupil sees instead (uke-player.js gateOwnSong) */
.uke-teachers-wait { padding: 40px 24px; text-align: center; color: var(--text-dim); }
.uke-teachers-only { max-width: 620px; margin: 24px auto; padding: 32px 28px; text-align: center; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 18px; }
.uke-teachers-only h2 { margin: 0 0 10px; }
.uke-teachers-only p { color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.uke-teachers-only .uke-teachers-note { font-size: 0.9rem; margin-bottom: 20px; }

/* Songbook "Your own song": the bar strip and the corrections row */
.uke-own-empty {
  padding: 36px 24px; text-align: center; color: var(--text-dim);
  font-size: 1.05rem; max-width: 520px; margin: 0 auto;
}
.uke-own-empty strong { color: var(--accent-pink); font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.uke-bars {
  position: relative;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px;
  margin: 4px 0 0;
}
.uke-bar-box {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); padding: 8px 6px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 62px; opacity: 0.75;
}
.uke-bar-box.now {
  opacity: 1; border-color: var(--accent-pink);
  box-shadow: 0 2px 10px rgba(228, 58, 108, 0.18);
}
.uke-bar-box.pickup { border-style: dashed; }
.uke-bar-chords {
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1;
  letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.uke-bar-box.now .uke-bar-chords { color: var(--accent-pink); }
.uke-bar-beats { display: flex; gap: 4px; }
.uke-bar-beat { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.uke-bar-beat.done { background: var(--text-dim); opacity: 0.45; }
.uke-bar-beat.on { background: var(--accent-pink); transform: scale(1.35); }
.uke-countin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev); border-radius: 10px;
  font-family: var(--font-display); font-size: 2.6rem; color: var(--accent-pink);
}
.uke-own-group { display: inline-flex; gap: 4px; }
.uke-own-finetune .btn-ghost-pill.active { background: var(--accent-pink); color: #fff; border-color: var(--accent-pink); }
.uke-own-key {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-dim);
}
.uke-own-key select {
  font: inherit; font-family: var(--font); text-transform: none; letter-spacing: 0;
  font-size: 0.85rem; color: var(--text); padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
@media (max-width: 720px) {
  .uke-bars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uke-bars .uke-bar-box:nth-child(n+5):not(.uke-countin) { display: none; }
}

/* Print chord sheet button, and the Chord Converter (chords.html) */
.uke-own-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.uke-own-conv-link { color: var(--text-dim); font-size: 0.92rem; }
.uke-conv { margin: 28px 0 8px; }
.uke-conv-title {
  font-family: var(--font-display); font-weight: 400; font-size: 1.4rem;
  text-transform: uppercase; letter-spacing: -0.3px; margin: 26px 0 6px;
}
.uke-conv-sub { color: var(--text-dim); margin: 0 0 12px; }
.uke-conv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.uke-conv-table { border-collapse: collapse; min-width: 640px; width: 100%; background: var(--bg); }
.uke-conv-table th, .uke-conv-table td { border: 1px solid var(--border); padding: 8px; text-align: center; vertical-align: middle; }
.uke-conv-table thead th {
  font-family: var(--font-display); font-weight: 400; font-size: 0.85rem;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); background: var(--bg-elev);
}
.uke-conv-table tbody th { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; width: 90px; text-transform: none; }
.uke-conv-table .uke-chord { display: inline-block; max-width: 100%; height: auto; }
.uke-conv-table .uke-conv-piano .uke-chord { width: 200px; }
.uke-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.uke-chart-bar, .uke-print-chart .uke-chart-bar {
  position: relative; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  padding: 16px 8px 10px; text-align: center; min-height: 54px;
}
.uke-chart-bar.pickup { border-style: dashed; }
.uke-chart-bar.now { border-color: var(--accent-pink); box-shadow: 0 2px 10px rgba(228, 58, 108, 0.18); }
.uke-chart-bar.now .uke-chart-names { color: var(--accent-pink); }
.uke-chart-num { position: absolute; top: 3px; left: 7px; font-size: 0.7rem; color: var(--text-dim); }
.uke-chart-names { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.3px; word-spacing: 0.4em; text-transform: none; }
#uke-print { display: none; }
@media (max-width: 720px) {
  .uke-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Songbook "My songs" (12 Oct 2026): a teacher's saved songs, the save form, the MP3 prompt */
.uke-mine { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.uke-mine[hidden], .uke-own-actions[hidden], .uke-own-finetune[hidden], .uke-conv[hidden], .uke-subs[hidden], .uke-words[hidden], .uke-words-timing[hidden], .uke-words-btns .btn[hidden], .uke-own-actions .btn[hidden], .uke-save-form .btn[hidden] { display: none; }
.uke-mine-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; }
.uke-mine-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  background: none; border: 0; cursor: pointer; color: var(--text);
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.2px; text-transform: uppercase;
}
.uke-mine-count {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--accent-pink); color: #fff; font-family: var(--font); font-size: 0.78rem; font-weight: 700;
}
.uke-mine-note { color: var(--text-dim); font-size: 0.88rem; }
.uke-mine-body { padding: 0 14px 14px; }
.uke-mine-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.uke-mine-item { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.uke-mine-item.on { border-color: var(--accent-pink); box-shadow: 0 2px 10px rgba(228, 58, 108, 0.18); }
.uke-mine-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 12px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); font: inherit;
}
.uke-mine-open b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: -0.2px; line-height: 1.15; }
.uke-mine-open small { color: var(--text-dim); font-size: 0.82rem; overflow-wrap: anywhere; }
.uke-mine-here {
  display: none; margin-left: 6px; padding: 0 6px; border-radius: 6px;
  background: rgba(46, 200, 130, 0.14); color: #157a48; font-weight: 700;
}
.uke-mine-item.here .uke-mine-here { display: inline; }
.uke-mine-del {
  flex: none; width: 38px; border: 0; border-left: 1px solid var(--border); border-radius: 0 10px 10px 0;
  background: none; color: var(--text-dim); cursor: pointer; font-size: 0.95rem;
}
.uke-mine-del:hover { color: #b3261e; background: rgba(179, 38, 30, 0.06); }
.uke-mine-empty { margin: 0; color: var(--text-dim); font-size: 0.92rem; }
.uke-dropzone-mine { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 12px; }
.uke-dropzone-mine[hidden] { display: none; }
.uke-remember { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; color: var(--text-dim); cursor: pointer; }
.uke-remember[hidden] { display: none; }
.uke-dropzone-nudge { border-color: var(--accent-pink); animation: uke-nudge 0.22s ease-in-out 4 alternate; }
@keyframes uke-nudge { to { transform: translateX(-5px); } }
.uke-save-form {
  display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.uke-save-form[hidden] { display: none; }
.uke-save-title {
  display: flex; flex-direction: column; gap: 4px; color: var(--text-dim);
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase;
}
.uke-save-title input {
  font: inherit; font-family: var(--font); font-size: 1rem; letter-spacing: 0; text-transform: none;
  color: var(--text); padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.uke-save-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uke-save-note { margin: 0; color: var(--text-dim); font-size: 0.85rem; }
.uke-save-status { margin: 0; color: #b3261e; font-size: 0.88rem; }
.uke-save-status:empty { display: none; }
.uke-save-status.ok { color: #157a48; }
.uke-lib-mine { margin-top: 40px; }

/* ?board=1: the Songbook on the board, opened from Mix-Ed Classroom's Songbook tool */
body.uke-board .site-header, body.uke-board .site-footer, body.uke-board .lesson-header,
body.uke-board .uke-header .back-link, body.uke-board .uke-own-conv-link { display: none !important; }
body.uke-board main { max-width: none; padding: 10px 20px 48px; }
body.uke-board .uke-player-wrap { max-width: 1500px; padding: 0; }
body.uke-board .uke-header { margin-bottom: 12px; }
body.uke-embedded .uke-header h2 { display: none; }
body.uke-board .uke-stage-v2 { padding: 22px 20px 20px; }
body.uke-board .uke-stage-v2 .uke-chord-cell { max-width: 290px; }
body.uke-board .uke-stage-v2 .uke-chord-name { font-size: clamp(2rem, 3.4vw, 3.4rem); }
body.uke-board .uke-stage-v2 .uke-chord-svg .uke-chord { width: clamp(110px, 11vw, 180px); height: auto; }
body.uke-board .uke-bar-chords { font-size: clamp(1.25rem, 2.2vw, 2.2rem); }
body.uke-board .uke-bar-box { min-height: clamp(62px, 7vw, 96px); justify-content: center; }
body.uke-board .uke-dropzone { padding: 10px 16px; margin-bottom: 12px; }
body.uke-board .uke-dropzone-icon { display: none; }
@media print {
  body.uke-printing > *:not(#uke-print) { display: none !important; }
  body.uke-printing { background: #fff; }
  body.uke-printing #uke-print { display: block; color: #000; }
  .uke-print-page { padding: 0 4mm; }
  .uke-print-page2 { break-before: page; }
  .uke-print-brand { font-size: 9pt; letter-spacing: 1px; text-transform: uppercase; color: #e43a6c; }
  #uke-print h1 { font-family: var(--font-display); font-weight: 400; font-size: 22pt; margin: 2mm 0 1mm; text-transform: uppercase; }
  .uke-print-meta { margin: 0 0 5mm; font-size: 11pt; }
  .uke-print-chart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; }
  .uke-print-chart .uke-chart-bar { background: #fff; border: 1px solid #999; border-radius: 2mm; min-height: 13mm; padding: 4mm 2mm 2mm; break-inside: avoid; }
  #uke-print .uke-conv-table, #uke-print .uke-conv-table th, #uke-print .uke-conv-table td { background: #fff; border-color: #999; }
  .uke-print-chart .uke-chart-names { font-size: 15pt; }
  .uke-print-diagrams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }
  .uke-print-diagrams figure { margin: 0; text-align: center; break-inside: avoid; }
  .uke-print-diagrams figcaption { font-family: var(--font-display); font-size: 20pt; margin-bottom: 2mm; }
  .uke-print-diagrams .uke-chord { width: 100%; max-width: 55mm; height: auto; }
  #uke-print .uke-conv-table { min-width: 0; font-size: 10pt; }
  #uke-print .uke-conv-table tr { break-inside: avoid; }
  #uke-print .uke-conv-table .uke-chord { max-width: 30mm; }
  #uke-print .uke-conv-table .uke-conv-piano .uke-chord { max-width: 50mm; width: 50mm; }
  .uke-print-foot { margin-top: 8mm; font-size: 9pt; color: #666; }
}

/* MIDI connection indicator */
.midi-status {
  position: fixed;
  top: 88px; right: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--accent-blue);
  border-radius: 8px;
  padding: 8px 16px 8px 12px;
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
  z-index: 999;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.midi-status[hidden] { display: none; }
.midi-dot {
  width: 9px; height: 9px;
  background: var(--accent-blue);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-blue);
  animation: midiPulse 2s ease-in-out infinite;
}
@keyframes midiPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.piano {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  height: 220px;
  display: flex;
  border: 2px solid #000;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
}
.piano-key {
  font: inherit; font-family: var(--font);
  cursor: pointer; padding: 0 0 8px; margin: 0;
  display: flex; align-items: flex-end; justify-content: center;
  min-width: 0;
  box-sizing: border-box;
}
.white-key {
  flex: 1 1 0;
  background: #ffffff;
  color: #999;
  border: 0; border-right: 1.5px solid #000;
  height: 100%;
  font-size: 0.7rem; font-weight: 500;
  min-width: 0;
}
.white-key:last-of-type { border-right: 0; }
.white-key:hover { background: #f3f3f3; }
.black-key {
  position: absolute;
  top: 0;
  height: 62%;
  width: 3.2%;
  background: #000;
  color: #888;
  border: 0;
  border-radius: 0 0 2px 2px;
  z-index: 2;
  font-size: 0.55rem;
  padding-bottom: 4px;
  min-width: 0;
}
.black-key span { pointer-events: none; }
.black-key:hover { background: #222; }
.opt-btn.piano-key:disabled { cursor: default; }

:fullscreen .piano { max-width: 1240px; height: 300px; }
:fullscreen .white-key { font-size: 1rem; }
:fullscreen .black-key { font-size: 0.8rem; }
.opt-btn.mini-staff .staff-svg { display: block; width: 100%; height: auto; }
.opt-btn.mini-staff.correct { background: #ecf6ec; }
.opt-btn.mini-staff.wrong   { background: #fbf1ef; }

.big-letter {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 6rem);
  line-height: 1;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-align: center; margin-top: 8px;
}
.opt-btn.camelot { min-width: 84px; font-size: 1.2rem; padding: 18px 22px; }
.opt-btn:disabled { cursor: default; }
.opt-btn.correct {
  background: #00c853; color: #ffffff; border-color: #00c853;
  animation: flashCorrect 0.35s ease;
}
.opt-btn.wrong {
  background: #ff1744; color: #ffffff; border-color: #ff1744;
  animation: flashWrong 0.35s ease;
}
@keyframes flashCorrect {
  0%   { background: #00c853; box-shadow: 0 0 0 0 rgba(0,200,83,0.7); }
  50%  { background: #4ddc7e; box-shadow: 0 0 0 10px rgba(0,200,83,0.0); }
  100% { background: #00c853; box-shadow: 0 0 0 0 rgba(0,200,83,0); }
}
@keyframes flashWrong {
  0%   { background: #ff1744; box-shadow: 0 0 0 0 rgba(255,23,68,0.7); }
  50%  { background: #ff5470; box-shadow: 0 0 0 10px rgba(255,23,68,0.0); }
  100% { background: #ff1744; box-shadow: 0 0 0 0 rgba(255,23,68,0); }
}

.game-feedback {
  text-align: center; margin-top: 18px; min-height: 28px;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.5px;
}
.game-feedback.ok { color: var(--success); }
.game-feedback.no { color: var(--danger); }

.game-result { padding: 24px 0; text-align: left; }
.game-result h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; letter-spacing: -0.5px; margin: 8px 0 24px; text-transform: uppercase; }
.result-score {
  display: flex; align-items: baseline; gap: 18px;
  padding: 24px 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
  margin-bottom: 18px;
}
.big-num { font-family: var(--font-display); font-size: clamp(4rem, 11vw, 6.4rem); font-weight: 400; letter-spacing: -3px; line-height: 1; color: var(--accent-purple); }
.big-num .of { font-size: 0.4em; color: var(--text-dim); margin-left: 8px; letter-spacing: -1px; }
.result-pct { font-size: 1.4rem; color: var(--text-dim); font-weight: 300; }
.result-summary {
  color: var(--text-dim);
  font-size: 1rem;
  margin: 4px 0 18px;
  max-width: 720px;
  line-height: 1.45;
}
.result-verdict { font-size: 1.1rem; margin: 8px 0 4px; }
.result-meta { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 6px; }
.result-meta + .result-meta { margin-top: 0; }
.result-labels { margin-bottom: 22px; }
.result-labels strong { color: var(--text); font-weight: 500; letter-spacing: 0.5px; }

@media (max-width: 540px) {
  .site-header .inner { flex-wrap: wrap; padding: 18px 20px; }
  .brand .tagline { display: none; }
  .nav { width: 100%; }
  .game-hud { max-width: 100%; }
}

/* ------------------------------------------------------------------
 * Ukulele quizzes — Name the chord, Pick the shape, Open strings
 * ------------------------------------------------------------------ */
.uke-quiz-diagram {
  display: flex; justify-content: center; align-items: center;
  margin: 12px auto;
}
.uke-quiz-diagram .uke-chord {
  width: 220px; height: 280px;
}
.uke-chord-quiz { width: 200px; height: 240px; }
.uke-quiz-hint {
  text-align: center; color: var(--text-dim);
  font-size: 0.9rem; margin-top: 8px;
}
.game-options.uke-name-grid,
.game-options.uke-open-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
}
.game-options.uke-name-grid .opt-btn,
.game-options.uke-open-grid .opt-btn {
  min-width: 90px; padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600;
}
.game-options.uke-shape-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; max-width: 720px; margin: 0 auto;
}
.game-options.uke-shape-grid .opt-btn.uke-shape-opt {
  padding: 12px; background: var(--bg);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 6px;
  min-height: 180px;
}
.game-options.uke-shape-grid .opt-btn.uke-shape-opt .uke-chord {
  width: 100%; height: auto; max-width: 130px;
}
.game-options.uke-shape-grid .opt-btn.uke-shape-opt.correct {
  background: rgba(46, 200, 130, 0.12);
  border-color: #2ec882;
}
.game-options.uke-shape-grid .opt-btn.uke-shape-opt.wrong {
  background: rgba(238, 61, 139, 0.12);
  border-color: var(--accent-pink);
}
@media (max-width: 640px) {
  .game-options.uke-shape-grid { grid-template-columns: repeat(2, 1fr); }
}
.uke-wrong-label {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
  margin-bottom: 6px; letter-spacing: -0.5px;
}

/* Piano chord quiz diagrams render wider than a fretboard — give them
 * a 2-column grid and let the keyboard fill the card width. */
.uke-quiz-diagram.pno svg { width: 100%; max-width: 560px; height: auto; }
.game-options.pno-shape-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1040px;
  gap: 20px;
}
.game-options.pno-shape-grid .opt-btn.pno-opt {
  min-height: 200px; padding: 18px;
}
.game-options.pno-shape-grid .opt-btn.pno-opt svg.piano-chord {
  width: 100%; max-width: 460px; height: auto;
}
.uke-quiz-diagram.pno svg.piano-chord {
  width: 100%; max-width: 560px; height: auto;
}

/* Italian terms quiz — 2-column stacked answer buttons with room for
 * full-sentence meanings. */
.game-options.term-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 820px;
}
.game-options.term-grid .opt-btn.term-opt {
  padding: 16px 18px;
  font-size: 1.05rem;
  text-align: left;
  line-height: 1.35;
  white-space: normal;
  min-height: 64px;
}
/* Italic dynamics symbols overhang to the right — push following punctuation
 * away so it doesn't collide with the bottom of the glyph. */
.prompt-text em.dyn-symbol {
  display: inline-block;
  padding-right: 0.18em;
}

/* Bravura — Steinberg's SMuFL-standard music notation font. Renders
 * publisher-quality engraved glyphs (fermata, dynamics, articulations,
 * noteheads) used by the music-symbol quizzes. */
@font-face {
  font-family: "Bravura";
  src: url("https://cdn.jsdelivr.net/gh/steinbergmedia/bravura/redist/woff/Bravura.woff") format("woff");
  font-display: swap;
}

/* Music notation symbol quiz — staff snippet */
.sym-staff-wrap {
  display: flex; justify-content: center; align-items: center;
  margin: 18px auto 24px;
}
.sym-staff { width: 100%; max-width: 480px; height: auto; }
.sym-staff text.smufl {
  font-family: "Bravura", serif;
  font-weight: 400; font-style: normal;
  fill: #0a0a0a;
}
@media (max-width: 640px) {
  .game-options.term-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .game-options.pno-shape-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Project pages — Studio with side-stepper (YuStudio pattern)
   ============================================================ */
.project-main {
  display: grid; grid-template-columns: 320px 1fr;
  gap: 14px; max-width: 1640px; margin: 0 auto;
  padding: 14px 20px 32px;
}
.proj-sidebar {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 14px; align-self: flex-start;
  max-height: calc(100vh - 32px);
}
.proj-cover {
  border-radius: 14px; padding: 24px 20px;
  color: white; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #ee3d8b, #8b3dee);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.proj-cover-mood {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.85; margin-bottom: 6px;
}
.proj-cover-title {
  font-size: 24px; font-weight: 800; line-height: 1.1; margin-bottom: 4px;
}
.proj-cover-sub { font-size: 13px; opacity: 0.9; }
.proj-progress {
  height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 999px; overflow: hidden;
}
.proj-progress-bar {
  height: 100%; background: linear-gradient(90deg, #ee3d8b, #8b3dee, #3d5fec);
  transition: width 240ms;
}
.proj-steps {
  list-style: none; padding: 0; margin: 0;
  background: #14151c; border: 1px solid #2a2c38; border-radius: 12px;
  overflow: hidden;
}
.proj-step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #2a2c38;
  cursor: pointer; transition: background 100ms;
}
.proj-step:last-child { border-bottom: none; }
.proj-step:hover { background: #1a1c25; }
.proj-step.active { background: #1f212c; }
.proj-step.active .proj-step-num {
  background: #ee3d8b; color: white; border-color: #ee3d8b;
}
.proj-step.done .proj-step-num {
  background: #2ec882; color: white; border-color: #2ec882;
}
.proj-step.done .proj-step-num::after { content: "✓"; font-size: 10px; }
.proj-step.done .proj-step-num { font-size: 0; }
.proj-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #3a3d4e; background: #0f1018;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #c4c6d4;
  flex-shrink: 0;
}
.proj-step-title { font-size: 13px; color: #c4c6d4; line-height: 1.3; }
.proj-step.active .proj-step-title { color: white; font-weight: 700; }

/* Current-step instructions card */
.proj-current {
  background: #14151c; border: 1px solid #2a2c38; border-radius: 12px;
  padding: 14px 16px;
}
.proj-current-title {
  margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #f5f5fb;
}
.proj-current-body {
  margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #c4c6d4;
}
.proj-current-tip {
  margin: 0 0 12px; font-size: 12px; line-height: 1.4;
  color: #ffb84d; background: rgba(255, 184, 77, 0.08);
  padding: 6px 10px; border-radius: 6px;
}
.proj-nav { display: flex; gap: 6px; }
.proj-nav .btn { flex: 1; font-size: 13px; padding: 8px 12px; }

/* When a step says "focus on this element", outline it so the kid spots it. */
.proj-focus {
  outline: 2px solid #ee3d8b !important;
  outline-offset: 4px;
  border-radius: 10px;
  animation: proj-focus-pulse 1.6s ease-in-out infinite;
}
@keyframes proj-focus-pulse {
  50% { outline-color: rgba(238, 61, 139, 0.4); }
}

/* Suggested-loop highlight in the library list */
.cmp-lib-item.proj-suggest {
  background: rgba(238, 61, 139, 0.12) !important;
  border-color: #ee3d8b !important;
  position: relative;
}
.cmp-lib-item.proj-suggest::after {
  content: "Suggested →";
  position: absolute; top: 6px; right: 8px;
  background: #ee3d8b; color: white;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 6px;
}

.project-studio { /* inherits .composer-shell */ }

/* On narrow screens the sidebar drops above the studio */
@media (max-width: 900px) {
  .project-main { grid-template-columns: 1fr; }
  .proj-sidebar { position: static; max-height: none; }
}

/* ============================================================
   Film Music Composer DAW
   ============================================================ */
/* Composer page chrome — uses theme tokens so the outer page (header, page
   bg) follows the user's light/dark choice. The instrument inside .composer-
   shell stays dark via .instrument-dark. */
.composer-body { background: var(--bg); color: var(--text); }
.composer-main { padding: 18px 24px 32px; max-width: 1640px; margin: 0 auto; }
.composer-shell {
  display: flex; flex-direction: column; gap: 14px;
}

/* Transport bar */
.cmp-transport {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%);
  border: 1px solid #2a2c38; border-radius: 12px;
  padding: 10px 16px;
  /* Wrap to a second row when the film cluster + transport-right runs out
     of horizontal space. row-gap keeps the wrapped row breathing. */
  flex-wrap: wrap;
  row-gap: 8px;
}
.cmp-transport-left, .cmp-transport-mid, .cmp-transport-right {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  row-gap: 6px;
}
.cmp-btn {
  background: #2b2e3c; color: #f5f5fb; border: 1px solid #3a3d4e;
  border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-weight: 600; font-size: 14px; transition: background 120ms, transform 80ms;
  /* Keep labels on a single line so flex doesn't stack icon+text vertically
     when space is tight — wrap the row instead. */
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Film-scoring buttons stay compact so the whole cluster fits in one row
   on a normal-size window. */
.cmp-film-group .cmp-btn,
.cmp-film-group .cmp-snap-select {
  font-size: 12px;
  padding: 6px 10px;
}
.cmp-btn:hover { background: #383b4c; }
.cmp-btn:active { transform: scale(0.97); }
/* Transport play + stop — chrome CDJ-style buttons (same aesthetic as the
 * DJ Studio's hardware deck controls). Brushed-metal radial gradient, dark
 * border with a glowing ring in the action colour, glyph in the centre.
 * Same size always; play button takes an "active" state while running. */
.cmp-play, .cmp-stop {
  width: 64px; height: 64px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  font: inherit;
  line-height: 1;
  background: radial-gradient(circle at 35% 28%, #f0f0f5 0%, #c8c8d0 35%, #8a8a92 70%, #5a5a62 100%);
  border: 3px solid #2a2a32;
  color: #1a1a1f;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 90ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}
.cmp-play {
  border-color: #4ade80;
  font-size: 30px;          /* ▶ glyph has whitespace inside its em — needs to be bigger */
  padding-left: 4px;        /* nudge so the optical centre sits in the middle */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.65),
    inset 0 -3px 6px rgba(0,0,0,0.25),
    0 0 0 1px rgba(74,222,128,0.3),
    0 0 14px rgba(74,222,128,0.55),
    0 4px 10px rgba(0,0,0,0.55);
}
.cmp-play:hover {
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.65),
    inset 0 -3px 6px rgba(0,0,0,0.25),
    0 0 0 1px rgba(74,222,128,0.45),
    0 0 20px rgba(74,222,128,0.75),
    0 4px 10px rgba(0,0,0,0.55);
}
.cmp-stop {
  border-color: #f56db0;
  font-size: 0;              /* hide the ■ glyph — we render a real square below */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.65),
    inset 0 -3px 6px rgba(0,0,0,0.25),
    0 0 0 1px rgba(238,61,139,0.3),
    0 0 14px rgba(238,61,139,0.55),
    0 4px 10px rgba(0,0,0,0.55);
}
.cmp-stop:hover {
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.65),
    inset 0 -3px 6px rgba(0,0,0,0.25),
    0 0 0 1px rgba(238,61,139,0.45),
    0 0 20px rgba(238,61,139,0.75),
    0 4px 10px rgba(0,0,0,0.55);
}
.cmp-play:active, .cmp-stop:active { transform: translateY(2px); }

/* Stop button — CSS-rendered square, perfectly centred in the chrome face.
 * Beats Unicode ■ for vertical alignment (the glyph sits below centre in
 * most fonts). Slight border-radius keeps it modern, not severe. */
.cmp-stop::before {
  content: "";
  display: block;
  width: 16px; height: 16px;
  background: currentColor;
  border-radius: 3px;
}

/* Active (playing) state — the chrome lights up green */
.cmp-play.is-playing {
  background: radial-gradient(circle at 35% 28%, #d6f5e2 0%, #6ce695 50%, #4ade80 100%);
  border-color: #4ade80;
  color: #073;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  padding-left: 0;          /* pause glyph (❚❚) centres differently */
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.75),
    inset 0 -3px 6px rgba(0,0,0,0.15),
    0 0 0 2px rgba(74,222,128,0.55),
    0 0 28px rgba(74,222,128,0.85),
    0 4px 10px rgba(0,0,0,0.55);
}

.cmp-secondary { background: #232531; }

/* Play-Along (#uke-play) — pill button with the same modern green glow as the
 * Score Studio transport, but text-based so "Play" / "Stop" still reads big. */
#uke-play {
  background: radial-gradient(circle at 30% 30%, #6ce8b1 0%, #2ec882 55%, #1a9c63 100%);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 12px 28px;
  font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 8px 22px rgba(46, 200, 130, 0.38),
    0 2px 4px rgba(0,0,0,0.2);
  transition: transform 120ms ease, box-shadow 220ms ease, filter 160ms ease;
}
#uke-play:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 10px 30px rgba(46, 200, 130, 0.55),
    0 2px 4px rgba(0,0,0,0.2);
}
#uke-play:active { transform: translateY(0) scale(0.97); }

/* When the button reads "Stop" the JS swaps btn-primary → btn-secondary;
 * recolour the pill to ruby to match the same colour-language as Score Studio. */
#uke-play.btn-secondary {
  background: radial-gradient(circle at 30% 30%, #ff8585 0%, #d33b3b 55%, #a51d1d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 8px 22px rgba(211, 59, 59, 0.35),
    0 2px 4px rgba(0,0,0,0.2);
}
#uke-play.btn-secondary:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 10px 30px rgba(211, 59, 59, 0.55),
    0 2px 4px rgba(0,0,0,0.2);
}

/* Restart goes circular — same family, secondary colour. */
#uke-restart {
  width: 42px; height: 42px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border, #2a2c38);
  background: var(--surface-3, #1a1c25);
  color: var(--text, #f5f5fb);
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
}
#uke-restart:hover {
  transform: scale(1.06);
  background: var(--surface-2, #14151c);
  border-color: var(--accent-pink, #ee3d8b);
}
#uke-restart:active { transform: scale(0.94); }
.cmp-time { font-family: monospace; font-size: 14px; color: #a5a7b8; min-width: 96px; }
.cmp-meta { color: #8b8e9f; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.cmp-bpm-input, .cmp-key-select, .cmp-inst-select, .cmp-input {
  background: #14151c; color: #f5f5fb; border: 1px solid #3a3d4e;
  border-radius: 6px; padding: 6px 10px; font-size: 14px;
}
.cmp-bpm-input { width: 70px; text-align: center; }

/* Pitch fader — horizontal DJ-style slider next to the BPM input.
 * Thumb has a VERTICAL indicator line running top-to-bottom — the line
 * points to the exact position on the track, like a real DJ pitch fader. */
.cmp-pitch-group {
  display: inline-flex; align-items: center; gap: 10px;
}
.cmp-pitch-fader {
  -webkit-appearance: none; appearance: none;
  width: 140px; height: 22px;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin: 0;
}
/* Webkit (Chrome / Safari / Edge) — centre tick on the track is vertical */
.cmp-pitch-fader::-webkit-slider-runnable-track {
  height: 6px;
  background:
    linear-gradient(90deg,
      transparent calc(50% - 1px),
      rgba(255,255,255,0.6) calc(50% - 1px),
      rgba(255,255,255,0.6) calc(50% + 1px),
      transparent calc(50% + 1px)),
    linear-gradient(90deg, #0f1018 0%, #2a2c38 50%, #0f1018 100%);
  border: 1px solid #1a1c25;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.cmp-pitch-fader::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 24px;
  margin-top: -10px;
  border-radius: 4px;
  /* Vertical indicator line, INSET 4px from top and bottom (like the DJ Studio
     fader cap). Layered: a tall thin dark rectangle sits centred over the
     chrome gradient. background-size limits the line's extent. */
  background:
    linear-gradient(#4a4a4a, #4a4a4a),
    linear-gradient(180deg, #f0f0f5 0%, #c8c8d0 45%, #8a8a92 100%);
  background-size: 1px 16px, 100% 100%;
  background-position: center center, 0 0;
  background-repeat: no-repeat;
  border: 1px solid #2a2a32;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -2px 3px rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.5);
  position: relative;
}
/* Firefox */
.cmp-pitch-fader::-moz-range-track {
  height: 6px;
  background:
    linear-gradient(90deg,
      transparent calc(50% - 1px),
      rgba(255,255,255,0.6) calc(50% - 1px),
      rgba(255,255,255,0.6) calc(50% + 1px),
      transparent calc(50% + 1px)),
    linear-gradient(90deg, #0f1018 0%, #2a2c38 50%, #0f1018 100%);
  border: 1px solid #1a1c25;
  border-radius: 999px;
}
.cmp-pitch-fader::-moz-range-thumb {
  width: 16px; height: 22px;
  border-radius: 4px;
  background:
    linear-gradient(#4a4a4a, #4a4a4a),
    linear-gradient(180deg, #f0f0f5 0%, #c8c8d0 45%, #8a8a92 100%);
  background-size: 1px 14px, 100% 100%;
  background-position: center center, 0 0;
  background-repeat: no-repeat;
  border: 1px solid #2a2a32;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -2px 3px rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.5);
}
.cmp-pitch-fader:hover::-webkit-slider-thumb,
.cmp-pitch-fader:focus::-webkit-slider-thumb {
  filter: brightness(1.08);
}
.cmp-pitch-fader:hover::-moz-range-thumb,
.cmp-pitch-fader:focus::-moz-range-thumb {
  filter: brightness(1.08);
}

/* Work area */
.cmp-workarea {
  display: grid; grid-template-columns: 260px 1fr 340px;
  gap: 14px; min-height: 460px;
}
.cmp-library, .cmp-side > section, .cmp-tracks {
  background: #14151c; border: 1px solid #2a2c38; border-radius: 12px;
  padding: 14px;
}
.cmp-h3 {
  margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; color: #a5a7b8; font-weight: 700;
}

/* Library */
.cmp-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.cmp-tab {
  flex: 1; background: #1f212c; color: #c4c6d4;
  border: 1px solid #2a2c38; border-radius: 6px;
  padding: 6px 0; cursor: pointer; font-size: 13px; font-weight: 600;
}
.cmp-tab.active { background: #ee3d8b; border-color: #ee3d8b; color: white; }
.cmp-library-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 380px; overflow-y: auto; padding-right: 4px;
}
.cmp-lib-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  background: #14151c;
  padding-bottom: 6px;
}
.cmp-lib-chips:first-child { position: sticky; top: 0; z-index: 1; }
.cmp-lib-chip-label {
  font-size: 10px; font-weight: 700; color: #6b6e7f;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 2px;
  min-width: 28px;
}
.cmp-lib-chip {
  background: #1f212c; border: 1px solid #2a2c38; color: #c8cbdc;
  border-radius: 6px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer; transition: background 100ms;
}
.cmp-lib-chip:hover { background: #272a37; }
.cmp-lib-chip.on {
  background: #ee3d8b; border-color: #ee3d8b; color: #fff;
}
.cmp-lib-empty {
  color: #6b6e7f; font-size: 12px; text-align: center;
  padding: 18px 0; font-style: italic;
}

/* ============================================================
   Projects browser modal
   ============================================================ */
.pj-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 9, 14, 0.85);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pj-modal-card {
  background: #15161e; border: 1px solid #2a2c38; border-radius: 14px;
  width: min(720px, 95vw); max-height: 90vh;
  display: flex; flex-direction: column;
  color: #e6e8f1; overflow: hidden;
}
.pj-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #2a2c38;
}
.pj-head h2 { margin: 0; font-size: 18px; }
.pj-close {
  background: transparent; border: none; color: #8b8e9f;
  font-size: 24px; cursor: pointer; padding: 4px 10px;
}
.pj-close:hover { color: #e6e8f1; }
.pj-current {
  padding: 14px 18px; border-bottom: 1px solid #2a2c38;
  background: #0f1018;
}
.pj-current label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8b8e9f; }
.pj-current input {
  background: #1f212c; border: 1px solid #2a2c38; color: #f5f5fb;
  border-radius: 6px; padding: 8px 12px; font-size: 14px;
}
.pj-actions-top { padding: 12px 18px; }
.pj-list {
  list-style: none; padding: 0 18px 18px; margin: 0;
  overflow-y: auto; flex: 1;
}
.pj-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; margin-bottom: 8px;
  background: #1f212c; border: 1px solid #2a2c38; border-radius: 8px;
}
.pj-item.pj-active { border-color: #ee3d8b; }
.pj-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj-item-name { font-size: 14px; color: #f5f5fb; }
.pj-item-meta { font-size: 11px; color: #8b8e9f; }
.pj-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pj-item-actions .btn { font-size: 12px; padding: 5px 10px; }
.pj-empty { color: #6b6e7f; font-size: 13px; text-align: center; padding: 20px; font-style: italic; }
.cmp-lib-item {
  background: #1f212c; border: 1px solid #2a2c38; border-radius: 8px;
  padding: 8px 10px; cursor: grab; transition: background 100ms, border-color 100ms;
}
.cmp-lib-item:hover { background: #272a37; border-color: #3d5fec; }
.cmp-lib-item[data-kind="sfx"] { cursor: pointer; }
.cmp-lib-item:active { cursor: grabbing; }
/* Loop is being auditioned — quiet pulse + accent border so the kid sees
   which one they're hearing. */
.cmp-lib-item.playing {
  background: rgba(46, 200, 130, 0.12);
  border-color: var(--accent-green, #2ec882);
  box-shadow: 0 0 0 1px rgba(46, 200, 130, 0.35);
  animation: cmp-lib-pulse 1.1s ease-in-out infinite;
}
.cmp-lib-item.playing::before {
  content: "♪";
  position: absolute; top: 6px; right: 8px;
  color: var(--accent-green, #2ec882);
  font-size: 16px; line-height: 1;
  animation: cmp-lib-pulse-glyph 0.45s ease-in-out infinite alternate;
}
.cmp-lib-item { position: relative; }
@keyframes cmp-lib-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(46, 200, 130, 0.35); }
  50%      { box-shadow: 0 0 0 3px rgba(46, 200, 130, 0.45); }
}
@keyframes cmp-lib-pulse-glyph {
  from { opacity: 0.55; transform: translateY(0); }
  to   { opacity: 1;    transform: translateY(-1px); }
}
.cmp-lib-name {
  font-size: 13px; font-weight: 600; color: #f5f5fb;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.cmp-lib-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Loop card carries an instrument-coloured left-edge accent so the bank
   reads like a coloured palette of clips, matching the track colours. */
.cmp-lib-item { border-left: 3px solid var(--lib-accent, #3d5fec); }

/* Pill row — small chips on the right of each loop name (key + length). */
.cmp-lib-pill {
  display: inline-block; flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 7px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #c8cbdc;
}
.cmp-lib-key {
  background: rgba(46, 200, 130, 0.18); color: #2ec882;
  border-color: rgba(46, 200, 130, 0.4);
}
.cmp-lib-len {
  background: rgba(61, 95, 236, 0.20); color: #a9b9ff;
  border-color: rgba(61, 95, 236, 0.45);
}
.cmp-lib-meta { font-size: 11px; color: #8b8e9f; margin-top: 2px; }

/* Search bar at the top of the bank — quick filter across name / instrument / key / mood. */
.cmp-lib-search-row {
  position: relative;
  margin: 0 0 8px 0;
}
.cmp-lib-search {
  width: 100%;
  background: #15161e; border: 1px solid #2a2c38; border-radius: 8px;
  padding: 8px 32px 8px 12px;
  color: #e6e8f1; font-size: 13px;
  outline: none;
  transition: border-color 100ms, box-shadow 100ms;
}
.cmp-lib-search:focus {
  border-color: #3d5fec;
  box-shadow: 0 0 0 2px rgba(61, 95, 236, 0.25);
}
.cmp-lib-search-x {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px;
  background: transparent; border: none; color: #8b8e9f;
  cursor: pointer; font-size: 16px; line-height: 1;
}
.cmp-lib-search-x:hover { color: #f5f5fb; }

/* Count pill — "12 loops" under the chips so the kid sees how many match. */
.cmp-lib-count {
  font-size: 11px; color: #8b8e9f; font-weight: 600;
  padding: 4px 0 6px;
  border-bottom: 1px dashed #2a2c38;
  margin-bottom: 6px;
}
.cmp-help { color: #8b8e9f; font-size: 12px; line-height: 1.4; margin: 10px 0 0; }

/* Tracks timeline */
.cmp-tracks {
  padding: 0;
  /* Horizontal scroll: when --total-beats > what fits, content overflows and
     the lanes scroll. Track heads stay pinned via position:sticky. */
  overflow-x: auto;
  overflow-y: hidden;
  --beat-px: 24px;     /* default lane scale */
}
/* Width = max(fits-the-window, beats × beat-px + head). When totalBeats is
   small the first wins (no scroll); when it grows the lanes get wider.
   The +340px matches the track-head column so the ruler's bar numbers
   start exactly where the clip lanes begin (not above the track names). */
.cmp-ruler,
.cmp-track {
  min-width: 100%;
  width: calc(var(--total-beats, 32) * var(--beat-px) + 340px);
}
.cmp-ruler {
  height: 22px;
  background: #1a1c25; border-bottom: 1px solid #2a2c38;
  display: flex;
}
.cmp-ruler-spacer {
  flex: 0 0 340px;                       /* match .cmp-track head column */
  position: sticky; left: 0; z-index: 3;
  background: #1a1c25;
  border-right: 2px solid var(--track-colour, #2a2c38);
}
.cmp-ruler-ticks {
  flex: 1; position: relative;
  cursor: pointer;       /* click anywhere along the ruler to seek to that beat */
}
.cmp-ruler-ticks:hover { background: rgba(238, 61, 139, 0.08); }
.cmp-ruler-tick {
  position: absolute; top: 4px; font-size: 11px; color: #8b8e9f;
  font-family: monospace;
}

/* ---------- Film-scoring controls + hit-point markers ---------- */
.cmp-film-group {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  margin-right: 4px;
  border: 1px solid #2a2c38;
  border-radius: 8px;
  background: rgba(238, 61, 139, 0.06);
}
.cmp-frame-btn { padding: 4px 8px; font-size: 12px; }
/* Keyboard-shortcut key cap, e.g. the M on the Hit button. */
.cmp-kbd {
  display: inline-block; min-width: 1.5em; margin-left: 4px;
  padding: 0 5px; border: 1px solid #4a4d60; border-bottom-width: 2px;
  border-radius: 4px; background: #1a1b26; color: #f5f5fb;
  font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}
.cmp-snap-select {
  background: #1f2030; border: 1px solid #2a2c38; border-radius: 6px;
  color: #c8cbdc; padding: 5px 8px; font-size: 12px; font-weight: 600;
  outline: none;
}
.cmp-snap-select:hover { background: #2a2c38; }
.cmp-snap-select:focus { border-color: #ee3d8b; }

/* Hit-point markers sit on top of the ruler's tick area as vertical lines
   with a small label flag. Click jumps to the spot; right-click deletes. */
.cmp-hit-marker {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: #ee3d8b;
  cursor: pointer;
  z-index: 5;
  pointer-events: auto;
}
.cmp-hit-marker::before {
  content: ""; position: absolute; top: 0; left: -3px;
  border-top: 6px solid #ee3d8b;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.cmp-hit-label {
  position: absolute; top: 2px; left: 5px;
  font-size: 10px; font-weight: 700; color: #ee3d8b;
  background: rgba(15, 16, 24, 0.85);
  padding: 0 4px; border-radius: 3px;
  white-space: nowrap;
}
.cmp-hit-marker:hover { background: #fff; }
.cmp-hit-marker:hover::before { border-top-color: #fff; }
.cmp-hit-marker:hover .cmp-hit-label { color: #fff; }

/* Cue list + fit-BPM modals (share the pr-modal-* shell). */
.cue-card { max-width: 720px; height: auto; max-height: 80vh; }
/* Wider variant for the picture-alongside layout. */
.cue-card-vid { max-width: 1100px; }

/* Two-column body: cue list on the left, video preview on the right.
   The kid clicks a hit on the left, the right-hand video scrubs to that
   frame so they see the moment without leaving the modal. */
.cue-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0;
  flex: 1; min-height: 0;
}
.cue-split .cue-list { padding: 12px 18px; border-right: 1px solid #2a2c38; }
.cue-preview {
  display: flex; flex-direction: column;
  background: #0a0b10;
  padding: 14px;
  gap: 10px;
  min-height: 0;
}
.cue-preview-video {
  width: 100%; height: 100%;
  background: #000;
  border-radius: 8px;
  object-fit: contain;
  flex: 1; min-height: 240px;
}
.cue-preview-empty {
  flex: 1; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  background: #15161e; border-radius: 8px;
  color: #6b6e7f; font-style: italic; font-size: 13px;
  padding: 20px; text-align: center;
}
.cue-preview-meta {
  background: #15161e; border: 1px solid #2a2c38; border-radius: 6px;
  padding: 8px 10px;
  font-family: monospace; font-size: 12px; color: #c8cbdc;
  text-align: center;
}
/* Highlight the currently-previewed cue. */
.cue-row.active {
  border-color: var(--track-colour);
  box-shadow: 0 0 0 2px rgba(238, 61, 139, 0.35);
}

.cue-list {
  flex: 1; overflow-y: auto;
  padding: 12px 18px;
}
.cue-empty { color: #8b8e9f; font-size: 13px; text-align: center; padding: 20px; font-style: italic; }
.cue-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 32px 32px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #2a2c38; border-radius: 8px;
  margin-bottom: 6px;
  background: #1f2030;
}
.cue-row:hover { border-color: #3d5fec; }
.cue-label {
  font-size: 13px; font-weight: 600; color: #f5f5fb;
  padding: 2px 4px; border-radius: 4px;
  outline: none;
  min-width: 0;
}
.cue-label:focus { background: #15161e; outline: 1px solid #3d5fec; }
.cue-time, .cue-bar {
  font-family: monospace; font-size: 12px; color: #c8cbdc;
  text-align: right;
}
.cue-jump, .cue-del {
  width: 28px; height: 28px;
  background: #2a2c38; border: 1px solid #3a3c48; border-radius: 6px;
  color: #e6e8f1; cursor: pointer;
  font-size: 12px;
}
.cue-jump:hover { background: var(--track-colour); }
.cue-del:hover  { background: rgba(238, 111, 139, 0.4); border-color: #ee6f8b; }

/* Fit-BPM calculator body. */
.fit-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.fit-desc { color: #c8cbdc; font-size: 13px; line-height: 1.45; margin: 0; }
.fit-row {
  display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 10px;
  font-size: 13px; color: #c8cbdc;
}
.fit-row select, .fit-row input {
  background: #15161e; border: 1px solid #2a2c38; border-radius: 6px;
  color: #e6e8f1; padding: 6px 10px; font-size: 13px;
  outline: none;
}
.fit-result {
  background: #15161e; border: 1px solid #2a2c38; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; color: #e6e8f1; line-height: 1.5;
  text-align: center;
}
.fit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Mickey-mouse mode — pulse the record button while capturing so it's
   obvious every keypress is being timestamped to the video. */
.cmp-mickey-btn.recording {
  background: #ee3d8b;
  color: #fff;
  border-color: #ee3d8b;
  animation: cmp-mickey-pulse 1s ease-in-out infinite;
}
@keyframes cmp-mickey-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238, 61, 139, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(238, 61, 139, 0); }
}
/* Floating toast for Mickey events + global hotkeys ("M" = drop hit). */
.cmp-mickey-toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%);
  background: rgba(15, 16, 24, 0.92);
  border: 1px solid #ee3d8b;
  color: #f5f5fb;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  z-index: 2000;
  opacity: 0; pointer-events: none;
  transition: opacity 160ms;
}
.cmp-mickey-toast.show { opacity: 1; }
/* Zoom controls — sit next to the Bars dropdown */
.cmp-zoom-group { display: inline-flex; gap: 2px; }
.cmp-zoom-btn {
  width: 26px; padding: 4px 0;
  font-size: 16px; line-height: 1;
}
.cmp-track-list { display: flex; flex-direction: column; }
.cmp-track {
  display: grid; grid-template-columns: 340px 1fr;
  border-bottom: 1px solid #2a2c38;
  min-height: 82px;
}
.cmp-track:last-child { border-bottom: none; }
/* Logic-style track head — single content row split into two columns:
   [icon + colour swatch stacked] [meta: name on top, M/S/🗑/VOL/PAN below] */
.cmp-track-head {
  padding: 6px 8px; background: #1a1c25;
  border-right: 2px solid var(--track-colour, #3d5fec);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  position: sticky; left: 0; z-index: 4;
}
.cmp-track-id {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cmp-track-meta {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.cmp-track-row-mix {
  display: flex; align-items: center; gap: 5px;
}
.cmp-track-row-mix .cmp-track-ctrl {
  flex: 0 0 28px; height: 22px; padding: 0; font-size: 11px;
}
.cmp-track-row-mix .cmp-track-vol {
  flex: 1; min-width: 50px; height: 22px;
}
.cmp-track-row-mix .cmp-track-pan-knob {
  flex: 0 0 28px; width: 28px; height: 28px;
}
.cmp-track-name-input {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 1px solid transparent;
  color: #f5f5fb; font-size: 13px; font-weight: 600;
  padding: 1px 4px; border-radius: 4px;
  font-family: inherit;
  text-overflow: ellipsis;
}
.cmp-track-name-input:hover  { border-color: rgba(255,255,255,0.1); }
.cmp-track-name-input:focus  { border-color: rgba(255,255,255,0.4); background: rgba(0,0,0,0.25); outline: none; }

/* Instrument icon button — modern square with the track colour as the
   icon glyph. The SVG inside uses `currentColor`, so re-colouring the
   track instantly recolours the icon. */
.cmp-track-inst-btn {
  width: 56px; height: 56px; padding: 4px;
  background: linear-gradient(180deg, #2a2c38 0%, #15161e 100%);
  border: 1px solid #2a2c38; border-radius: 10px;
  cursor: pointer; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.45);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.cmp-track-inst-btn:hover {
  border-color: currentColor;
  transform: translateY(-1px);
}
.cmp-track-inst-btn svg { width: 100%; height: 100%; display: block; }

/* Instrument glyph — SVG silhouette painted in the track colour via CSS
   mask. Lets us swap artwork by editing assets/images/instruments/*.svg
   without touching JS. The image's alpha channel cuts the shape; the
   visible pixels are filled from `currentColor`. */
.cmp-inst-glyph {
  display: block; width: 100%; height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--inst-icon) no-repeat center / contain;
          mask: var(--inst-icon) no-repeat center / contain;
}

/* Floating instrument picker popover */
.cmp-inst-popover {
  background: #1a1c25; border: 1px solid #3a3d4e; border-radius: 8px;
  padding: 4px; min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex; flex-direction: column; gap: 2px;
}
.cmp-inst-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 5px;
  background: transparent; border: 0;
  color: #c4c6d4; font-family: inherit; font-size: 12px;
  cursor: pointer; text-align: left;
}
.cmp-inst-opt:hover { background: #2a2c38; color: #f5f5fb; }
.cmp-inst-opt.is-current { background: rgba(238, 61, 139, 0.18); color: #ee3d8b; }
.cmp-inst-opt-icon {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmp-inst-opt-icon svg { width: 100%; height: 100%; }
.cmp-inst-opt-label { flex: 1; }

/* Track-row layout — name input fills the row, colour swatch sits at the
   far right as a small clickable circle. */
.cmp-track-row-name {
  display: flex; align-items: center; gap: 6px;
}
.cmp-track-row-name .cmp-track-name-input { flex: 1; min-width: 0; }

/* Track colour selector — thin pill below the instrument icon. Mirrors
   the icon's width so the two read as a single identity column. */
.cmp-track-colour-btn {
  width: 36px; height: 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.cmp-track-colour-btn:hover { transform: scaleY(1.4); border-color: rgba(255,255,255,0.6); }

/* Track colour palette popover */
.cmp-colour-popover {
  background: #1a1c25; border: 1px solid #3a3d4e; border-radius: 8px;
  padding: 8px; min-width: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  z-index: 9999;
  display: grid; grid-template-columns: repeat(4, 22px); gap: 8px;
}
.cmp-colour-swatch {
  width: 22px; height: 22px; padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.cmp-colour-swatch:hover { transform: scale(1.15); }
.cmp-colour-swatch.is-current {
  border-color: #f5f5fb;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}
/* Track header controls — Logic-style M / S / 🗑 row, sits below the
   instrument selector inside the sticky track head. */
.cmp-track-controls {
  display: flex; gap: 4px; margin-top: 2px;
}
.cmp-track-ctrl {
  flex: 1; min-width: 0; height: 20px;
  background: #14151c; color: #8b8e9f;
  border: 1px solid #2a2c38; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  cursor: pointer; padding: 0;
  font-family: inherit;
}
.cmp-track-ctrl:hover { color: #f5f5fb; border-color: #3a3d4e; }
.cmp-track-ctrl.on.mute  { background: #d8a032; color: #14151c; border-color: #d8a032; }
.cmp-track-ctrl.on.solo  { background: #6bd1ff; color: #14151c; border-color: #6bd1ff; }
.cmp-track-ctrl.cmp-track-del {
  color: #8b3a3a; border-color: #2a2c38;
}
.cmp-track-ctrl.cmp-track-del:hover {
  background: #4a1a1a; border-color: #6a2a2a; color: #ff6b6b;
}

/* Volume + Pan rows on the track head — Logic-style inline mix controls.
   The mixer panel stays available for FX work, but levels live here so a
   kid can balance their tracks without flipping panels. */
.cmp-track-vp {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.cmp-track-vp-lbl {
  font-size: 9px; font-weight: 700; color: #6b6e7f;
  width: 22px; flex-shrink: 0; letter-spacing: 0.04em;
}
.cmp-track-vol,
.cmp-track-pan {
  flex: 1; min-width: 0; height: 14px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
}
/* Track volume slider — matches the DJ-style pitch fader on the transport.
   Dark grooved track with a centre tick, chrome cap with a vertical
   indicator line running top-to-bottom. */
.cmp-track-vol::-webkit-slider-runnable-track {
  height: 6px;
  background:
    linear-gradient(90deg,
      transparent calc(50% - 1px),
      rgba(255,255,255,0.6) calc(50% - 1px),
      rgba(255,255,255,0.6) calc(50% + 1px),
      transparent calc(50% + 1px)),
    linear-gradient(90deg, #0f1018 0%, #2a2c38 50%, #0f1018 100%);
  border: 1px solid #1a1c25;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.cmp-track-vol::-moz-range-track {
  height: 6px;
  background:
    linear-gradient(90deg,
      transparent calc(50% - 1px),
      rgba(255,255,255,0.6) calc(50% - 1px),
      rgba(255,255,255,0.6) calc(50% + 1px),
      transparent calc(50% + 1px)),
    linear-gradient(90deg, #0f1018 0%, #2a2c38 50%, #0f1018 100%);
  border: 1px solid #1a1c25;
  border-radius: 999px;
}
.cmp-track-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 24px; margin-top: -10px;
  border-radius: 4px;
  background:
    linear-gradient(#4a4a4a, #4a4a4a),
    linear-gradient(180deg, #f0f0f5 0%, #c8c8d0 45%, #8a8a92 100%);
  background-size: 1px 16px, 100% 100%;
  background-position: center center, 0 0;
  background-repeat: no-repeat;
  border: 1px solid #2a2a32;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -2px 3px rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.5);
  cursor: pointer;
}
.cmp-track-vol::-moz-range-thumb {
  width: 16px; height: 22px;
  border-radius: 4px;
  background:
    linear-gradient(#4a4a4a, #4a4a4a),
    linear-gradient(180deg, #f0f0f5 0%, #c8c8d0 45%, #8a8a92 100%);
  background-size: 1px 14px, 100% 100%;
  background-position: center center, 0 0;
  background-repeat: no-repeat;
  border: 1px solid #2a2a32;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -2px 3px rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.5);
  cursor: pointer;
}
.cmp-track-vol:hover::-webkit-slider-thumb,
.cmp-track-vol:focus::-webkit-slider-thumb { filter: brightness(1.08); }
.cmp-track-vol:hover::-moz-range-thumb,
.cmp-track-vol:focus::-moz-range-thumb { filter: brightness(1.08); }

/* Pan as a rotary knob — drag up/down to rotate, double-click to recentre.
   The pointer line shows the current angle. -1 ⇒ -135°, 0 ⇒ 0°, +1 ⇒ +135°. */
.cmp-track-pan-knob {
  width: 26px; height: 26px; flex-shrink: 0;
  position: relative; cursor: ns-resize;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3d4e 0%, #14151c 80%);
  border: 1px solid #2a2c38;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.4);
}
.cmp-track-pan-knob:hover { border-color: #4a4d5e; }
.cmp-track-pan-pointer {
  position: absolute; left: 50%; top: 50%;
  width: 2.5px; height: 12px;
  margin-left: -1.25px; margin-top: -13px;
  background: var(--track-colour, #ee3d8b);
  border-radius: 1.5px;
  transform-origin: 50% 100%;
  transform: rotate(var(--pan-angle, 0deg));
}
.cmp-track-pan-readout {
  font-size: 9px; font-weight: 700; color: #8b8e9f;
  width: 22px; flex-shrink: 0; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mixer toggle button glow when open */
#cmp-toggle-mixer.is-on {
  background: rgba(238, 61, 139, 0.18);
  border-color: rgba(238, 61, 139, 0.5);
  color: #ee3d8b;
}
.cmp-mixer-sub { color: #6b6e7f; font-weight: 400; font-size: 11px; }

/* "+ Add track" tile, sits below the last track in the timeline. */
.cmp-track-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  background: transparent;
  border: 2px dashed #3a3d4e; border-radius: 0;
  color: #8b8e9f; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  font-family: inherit;
}
.cmp-track-add:hover {
  background: rgba(238, 61, 139, 0.05);
  border-color: var(--accent-pink);
  color: var(--accent-pink);
}
.cmp-track-add-plus {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(238, 61, 139, 0.2); color: var(--accent-pink);
  font-size: 16px; font-weight: 800; line-height: 1;
}
.cmp-track-lane {
  position: relative; background:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc(100% / 8 - 1px),
      #2a2c38 calc(100% / 8 - 1px),
      #2a2c38 calc(100% / 8));
}
.cmp-track-lane.cmp-drop { background-color: #1f2535; }
.cmp-clip {
  position: absolute; top: 8px; bottom: 8px;
  border-radius: 6px; padding: 4px 8px; cursor: grab;
  display: flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: filter 120ms, box-shadow 120ms, transform 120ms;
  user-select: none;
}
.cmp-clip:hover { filter: brightness(1.15); }
.cmp-clip.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 14px rgba(0,0,0,0.5);
  z-index: 3;
}
.cmp-clip.dragging {
  cursor: grabbing;
  transform: scale(1.02);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 10px 26px rgba(0,0,0,0.55);
  z-index: 5;
  transition: none;  /* live-follow the cursor without easing */
}

/* Resize handle — small grippy bar on the right edge of the clip. */
.cmp-clip-resize {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 8px; cursor: ew-resize;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18));
  border-right: 1px solid rgba(255,255,255,0.35);
  border-top-right-radius: 6px; border-bottom-right-radius: 6px;
  opacity: 0; transition: opacity 100ms;
}
.cmp-clip:hover .cmp-clip-resize,
.cmp-clip.selected .cmp-clip-resize { opacity: 1; }
.cmp-clip.resizing {
  cursor: ew-resize;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 6px 18px rgba(0,0,0,0.45);
  z-index: 4;
  transition: none;
}
.cmp-clip.resizing .cmp-clip-resize { opacity: 1; }
.cmp-clip-label {
  font-size: 11px; font-weight: 600; color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Muted clip — visually dim so the kid sees what's playing vs not */
.cmp-clip-muted { opacity: 0.4; }
.cmp-clip-muted::after {
  content: "MUTED";
  position: absolute; top: 4px; right: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
}

/* Clip editor modal (opens on clip click) */
.cmp-clipedit-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: cmp-fade-in 120ms ease;
}
@keyframes cmp-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cmp-clipedit-card {
  background: #14151c; border: 1px solid #2a2c38;
  border-top: 4px solid var(--track-colour, #ee3d8b);
  border-radius: 14px; padding: 20px 22px;
  width: 100%; max-width: 420px;
  color: #f5f5fb;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  animation: cmp-card-up 160ms ease;
}
@keyframes cmp-card-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cmp-clipedit-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cmp-clipedit-track {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--track-colour, #ee3d8b);
}
.cmp-clipedit-close {
  background: transparent; border: 0; color: #8b8e9f;
  font-size: 22px; line-height: 1; cursor: pointer;
  padding: 0 4px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.cmp-clipedit-close:hover { background: rgba(255,255,255,0.08); color: #f5f5fb; }
.cmp-clipedit-title {
  margin: 0 0 16px; font-size: 18px; font-weight: 700;
}
.cmp-clipedit-field {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;
}
.cmp-clipedit-field > span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8b8e9f;
}
.cmp-clipedit-field > span em {
  font-style: normal; color: #f5f5fb; font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
.cmp-clipedit-field input[type="text"],
.cmp-clipedit-field input[type="number"] {
  background: #0f1018; border: 1px solid #2a2c38; border-radius: 8px;
  color: #f5f5fb; padding: 9px 12px; font-size: 14px;
}
.cmp-clipedit-field input[type="text"]:focus,
.cmp-clipedit-field input[type="number"]:focus {
  outline: none; border-color: var(--track-colour, #ee3d8b);
}
.cmp-clipedit-field input[type="range"] {
  width: 100%; margin-top: 4px;
}
.cmp-clipedit-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cmp-clipedit-row .cmp-clipedit-field { margin-bottom: 14px; }
.cmp-clipedit-quick {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: -6px 0 16px;
}
.cmp-clipedit-quick-label {
  font-size: 11px; color: var(--text-dim, #8b8e9f);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  margin-right: 4px;
}
.cmp-clipedit-quick .cmp-btn {
  padding: 6px 12px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Beatmaker — step grid
   ============================================================ */
.cmp-beatmaker-btn .cmp-beatmaker-icon { margin-right: 4px; }
.bm-grid-wrap { overflow-x: auto; }
.bm-grid { border-collapse: separate; border-spacing: 4px; margin: 0 auto; }
.bm-row-label {
  background: #1a1c25; color: #f5f5fb;
  font-size: 12px; font-weight: 700;
  text-align: right; padding: 0 12px;
  width: 64px; cursor: pointer;
  border-radius: 6px; user-select: none;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.bm-row-label:hover { background: #2a2c38; }
.bm-cell {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a2c38; border-radius: 6px;
  cursor: pointer;
  transition: background 80ms, border-color 80ms, transform 80ms;
}
.bm-cell-downbeat { background: rgba(255,255,255,0.08); }
.bm-cell:hover { border-color: #3d5fec; }
.bm-cell.on {
  background: linear-gradient(180deg, #ee3d8b, #8b3dee);
  border-color: #ee3d8b;
  box-shadow: 0 0 8px rgba(238, 61, 139, 0.4);
}
.bm-cell.playing { transform: scale(1.2); border-color: #f5f5fb; }
.bm-controls { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.bm-hint { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); font-style: italic; }
.cmp-clipedit-check {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 18px; font-size: 13px; color: #c4c6d4;
  cursor: pointer;
}
.cmp-clipedit-check input { width: 16px; height: 16px; cursor: pointer; }
.cmp-clipedit-actions {
  display: flex; justify-content: space-between; gap: 10px;
}
.cmp-clipedit-delete {
  background: #2a1a1a !important; color: #f56b6b !important;
  border: 1px solid #5a2a2a !important;
}
.cmp-clipedit-delete:hover {
  background: #c33 !important; color: white !important;
  border-color: #c33 !important;
}
.cmp-clipedit-done {
  background: var(--track-colour, #ee3d8b) !important;
  color: white !important; border: 0 !important;
  font-weight: 700;
}

.cmp-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #ee3d8b; pointer-events: none; z-index: 5;
  box-shadow: 0 0 8px #ee3d8b;
}

/* Mixer */
.cmp-side { display: flex; flex-direction: column; gap: 14px; }
.cmp-mixer-strips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cmp-strip {
  background: #1a1c25; border: 1px solid #2a2c38; border-top: 3px solid var(--track-colour, #3d5fec);
  border-radius: 6px; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cmp-strip-label { font-size: 11px; font-weight: 700; color: #f5f5fb; }
.cmp-vol { width: 90%; }
.cmp-pan { width: 80%; }
.cmp-pan-label { font-size: 9px; color: #8b8e9f; text-transform: uppercase; }
.cmp-strip-row { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.cmp-strip-buttons { display: flex; gap: 3px; }
.cmp-strip-btn {
  background: #2a2c38; color: #8b8e9f; border: 1px solid #3a3d4e;
  border-radius: 4px; width: 24px; height: 22px; cursor: pointer;
  font-size: 11px; font-weight: 700;
}
.cmp-strip-btn.on { background: #ee3d8b; color: white; border-color: #ee3d8b; }
/* Delete-track button — pushed to the right edge of the M/S row so it reads
   as a destructive action separate from the toggle buttons, not a third state. */
.cmp-strip-btn.cmp-strip-del {
  margin-left: auto;
  background: transparent;
  border-color: transparent;
  color: #8b3a3a;
  font-size: 13px;
}
.cmp-strip-btn.cmp-strip-del:hover {
  background: #4a1a1a;
  border-color: #6a2a2a;
  color: #ff6b6b;
}
.cmp-strip-buttons { gap: 4px; }

/* Motifs */
.cmp-motif-controls {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.cmp-motif-controls .cmp-input {
  flex: 1 1 100%;    /* full width on its own row — the side column is too narrow to share */
  min-width: 0;
  box-sizing: border-box;
}
.cmp-motif-controls .cmp-btn {
  flex: 1 1 auto;
  white-space: nowrap;
}
.cmp-motif-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.cmp-motif-empty { color: #8b8e9f; font-size: 12px; text-align: center; padding: 18px 4px; }
.cmp-motif {
  background: #1f212c; border: 1px solid #2a2c38; border-left: 3px solid #ee3d8b;
  border-radius: 6px; padding: 8px 10px; cursor: grab;
  display: flex; align-items: center; gap: 8px;
}
.cmp-motif:active { cursor: grabbing; }
.cmp-motif-name { flex: 1; font-size: 13px; font-weight: 600; }
.cmp-motif-meta { font-size: 11px; color: #8b8e9f; }
.cmp-motif-del {
  background: transparent; color: #8b8e9f; border: 0;
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.cmp-motif-del:hover { color: #ee3d8b; }

/* Virtual keyboard */
.cmp-keyboard-wrap {
  background: #14151c; border: 1px solid #2a2c38; border-radius: 12px;
  padding: 14px;
}
.cmp-keyboard-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cmp-rec-motif.recording {
  background: #c33; border-color: #c33; color: white;
  animation: cmp-rec-pulse 1s ease-in-out infinite;
}
.cmp-rec-status { color: #8b8e9f; font-size: 12px; font-style: italic; }
.cmp-hint { color: #6b6e7f; font-size: 11px; margin-left: auto; }
@keyframes cmp-rec-pulse { 50% { opacity: 0.6; } }

.cmp-keyboard {
  position: relative; height: 140px; user-select: none;
  background: #0a0b10; border-radius: 6px; overflow: hidden;
}
.cmp-whites {
  position: absolute; inset: 0; display: flex;
}
.cmp-key {
  cursor: pointer; transition: background 60ms;
  -webkit-user-select: none; user-select: none;
}
.cmp-white {
  flex: 1; background: #f5f5fb; color: #555;
  border-right: 1px solid #bbb;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px; font-size: 11px; font-weight: 700;
}
.cmp-white:last-child { border-right: none; }
.cmp-white.playing { background: #ee3d8b; color: white; }
.cmp-black {
  position: absolute; top: 0; height: 64%;
  width: calc(100% / 14 * 0.6); background: #18181c;
  border-radius: 0 0 4px 4px; z-index: 2;
  border: 1px solid #2a2c38; border-top: none;
}
.cmp-black.playing { background: #8b3dee; }

/* Smart Keys — keep every key its natural colour and highlight the IN-key
   ones with a coloured stripe. (Black keys are already position:absolute,
   so only the whites need position:relative for the ::after to anchor.) */
.cmp-white { position: relative; }
.cmp-white.cmp-key-in::after,
.cmp-black.cmp-key-in::after {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: 4px;
  height: 4px;
  border-radius: 2px;
  background: #ee3d8b;
  box-shadow: 0 0 6px rgba(238, 61, 139, 0.55);
  pointer-events: none;
}
.cmp-smart-keys {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(139, 61, 238, 0.18);
  color: #c8b4ff; cursor: pointer;
  user-select: none;
}
.cmp-smart-keys input { accent-color: #8b3dee; cursor: pointer; }

/* ============================================================
   Piano Roll modal (BandLab 2)
   ============================================================ */
.pr-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 9, 14, 0.85);
  z-index: 1000;
  display: flex;
  /* Fullscreen layout — no centring gutter, the card fills the window. */
  padding: 0;
}
.pr-modal-card {
  --track-colour: #8b3dee;
  background: #15161e;
  border: none;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #e6e8f1;
}
.pr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2a2c38;
}
.pr-head-l { display: flex; flex-direction: column; gap: 2px; }
.pr-track { font-size: 11px; color: #8b8e9f; text-transform: uppercase; letter-spacing: 0.05em; }
.pr-title { margin: 0; font-size: 18px; }
.pr-close {
  background: transparent; border: none; color: #8b8e9f;
  font-size: 24px; cursor: pointer; padding: 4px 10px;
}
.pr-close:hover { color: #e6e8f1; }

.pr-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid #2a2c38;
  background: #0f1018;
}
.pr-tb-label { font-size: 12px; color: #8b8e9f; }
.pr-tb-len { display: flex; gap: 4px; }
.pr-tb-btn {
  background: #1f2030; border: 1px solid #2a2c38;
  color: #c8cbdc; cursor: pointer;
  padding: 6px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
}
.pr-tb-btn:hover { background: #2a2c38; }
.pr-tb-btn.pr-on { background: var(--track-colour); border-color: var(--track-colour); color: #fff; }
.pr-tb-btn.pr-primary { background: var(--track-colour); border-color: var(--track-colour); color: #fff; }
.pr-tb-btn.pr-danger { color: #ee6f8b; border-color: rgba(238,61,139,0.5); }
.pr-tb-spacer { flex: 1; }

.pr-body {
  flex: 1;
  display: grid;
  grid-template-columns: 64px 1fr;
  min-height: 0;
}
/* Piano Roll keyboard column — styled like an actual piano viewed end-on:
   ivory white keys take the full column width; black keys sit on top, only
   covering about 65% from the left, so the right edge of every white key
   row stays visible — that's where the note name lives. The subtle shadow
   between the black key and the white key below mimics the gap on a real
   piano. */
.pr-keys-col {
  background: #f7f3ea;             /* white-key surface beneath everything */
  border-right: 2px solid #1a1c25;
  overflow-x: hidden;
  overflow-y: scroll;              /* synced from the grid scroll handler */
  scrollbar-width: none;           /* hide our own scrollbar (Firefox) */
  position: relative;
}
.pr-keys-col::-webkit-scrollbar { display: none; }   /* hide scrollbar (Webkit) */
/* The spacer takes the column's total height (set inline) so absolutely
   positioned keys have something to push the scrollbar against. */
.pr-keys-spacer { width: 0; visibility: hidden; }
.pr-key {
  position: absolute;
  left: 0; right: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 6px;
  font-size: 9px; font-weight: 700;
  user-select: none; cursor: pointer;
}
/* White keys — ivory, hairline separators only between two whites in a row
   (E→F and B→C) come through the underlying column colour. */
.pr-key.pr-kw {
  background: linear-gradient(90deg, #ffffff 0%, #f4eee0 70%, #e8e0cd 100%);
  color: #2a2438;
  border-bottom: 1px solid #d4cab2;
  box-shadow: inset 0 -1px 0 rgba(120, 90, 40, 0.08);
}
/* C labels stand out so the kid can navigate octaves. */
.pr-key.pr-kc {
  color: #b8430b;
  font-size: 10px;
  font-weight: 800;
}
/* Black keys — narrow bar overlapping the boundary between the two
   adjacent white keys, like a real piano. We use absolute positioning
   (set inline) so the key visually straddles two grid rows: the bottom
   half of the white above + the top half of the white below. */
.pr-key.pr-kb {
  /* Slimmer black-key bar — covers ~52% of the column width from the
     left, leaving more ivory on the right so the keyboard reads cleaner. */
  right: 48%;
  background: linear-gradient(180deg, #0d0e15 0%, #1a1c27 60%, #2a2c38 100%);
  border-radius: 0 4px 4px 0;
  border-bottom: 1px solid #0a0b10;
  color: #f5f5fb;
  font-size: 8px;
  font-weight: 700;
  padding-right: 5px;
  z-index: 2;                       /* sits on top of overlapped whites */
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.6),
    1px 1px 3px rgba(0,0,0,0.4);
}
/* Hover/active — flash the track colour onto the relevant key.
   Black keys are already FULL rowPx tall (just narrower than whites), so
   hover only needs to expand the bar to full column width and swap the
   gradient for a solid block of track colour. */
.pr-key.pr-kw:hover { filter: brightness(0.96); }
.pr-key.pr-kb:hover {
  background: var(--track-colour);
  color: #fff;
  filter: none;
  right: 0;                          /* fill full column width */
  z-index: 6;                        /* float over surrounding whites */
  border-radius: 0;
}
.pr-key.pr-kw:active,
.pr-key.pr-kb:active {
  background: var(--track-colour);
  color: #fff;
}

/* Hot key — paints the row the cursor (or a dragging note) is currently on
   in the track colour. Same full-row treatment for black keys. */
.pr-key.pr-kw.pr-hot {
  background: var(--track-colour);
  color: #fff;
}
.pr-key.pr-kb.pr-hot {
  background: var(--track-colour);
  color: #fff;
  filter: none;
  right: 0;
  z-index: 6;
  border-radius: 0;
}

.pr-grid-scroll {
  overflow: auto;
  background: #0a0b10;
  position: relative;
}
.pr-grid {
  position: relative;
  background: #0a0b10;
}
/* Horizontal lanes — one per WHITE key. Each lane has a faint top border
   so the grid reads as a stack of equal rows, exactly mirroring the keys
   column on the left. C lanes are tinted so the octave anchor is obvious. */
.pr-row-w, .pr-row-c {
  position: absolute; left: 0; right: 0;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pr-row-w { background: rgba(255,255,255,0.02); }
.pr-row-c { background: rgba(255,184,77,0.10); border-top-color: rgba(255,184,77,0.28); }
/* Smart Keys: out-of-scale rows get a dim overlay so in-key rows pop. */
.pr-row-oo, .pr-row-oo-b {
  position: absolute; left: 0; right: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.55);
  z-index: 1;
}
.pr-row-oo-b { background: rgba(0,0,0,0.65); }

/* Smart Keys toolbar checkbox in the Piano Roll. */
.pr-tb-smart {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: #1f2030; border: 1px solid #2a2c38; border-radius: 6px;
  font-size: 12px; color: #c8cbdc; cursor: pointer;
}
.pr-tb-smart input { accent-color: var(--track-colour); }
.pr-tb-smart:hover { background: #2a2c38; }

/* Step / Chord Sequencer modal grid — shared CSS for both editors. */
.stepseq-card { max-width: 1200px; }
.stepseq-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
  display: flex; align-items: center; justify-content: center;
}
.stepseq-grid {
  display: grid;
  grid-template-columns: 70px repeat(var(--cols), 1fr);
  gap: 4px;
  width: 100%;
  max-width: 1100px;
}
.stepseq-row-label {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10px;
  font-weight: 700; color: #c8cbdc;
  font-size: 13px;
}
.stepseq-cell {
  aspect-ratio: 1 / 1;
  min-height: 32px;
  background: #1a1c27;
  border: 1px solid #2a2c38;
  border-radius: 5px;
  cursor: pointer;
  transition: background 80ms;
}
.stepseq-cell.beat { border-color: #3a3c48; background: #1f2130; }
.stepseq-cell:hover { background: #2a2c38; }
.stepseq-cell.on {
  background: var(--track-colour);
  border-color: var(--track-colour);
  box-shadow: 0 0 0 1px var(--track-colour) inset, 0 1px 4px rgba(0,0,0,0.4);
}
.pr-col-beat, .pr-col-bar {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  pointer-events: none;
}
.pr-col-beat { background: rgba(255,255,255,0.04); }
.pr-col-bar  { background: rgba(255,255,255,0.16); }

.pr-note {
  position: absolute;
  background: var(--track-colour);
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  cursor: move;
  z-index: 2;
}
.pr-note.pr-sel { outline: 2px solid #fff; outline-offset: -1px; z-index: 3; }
/* Sharp / flat notes sit on the BOUNDARY between two white lanes — give
   them a darker tone so it's visually obvious they're black-key pitches. */
.pr-note.pr-note-b {
  background: color-mix(in srgb, var(--track-colour) 78%, #000 22%);
  border-color: rgba(0,0,0,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.5);
  z-index: 4;                       /* float over any overlapping whites */
}
.pr-note-resize {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 8px; cursor: ew-resize;
  background: rgba(255,255,255,0.18);
  border-radius: 0 3px 3px 0;
}

.pr-hint {
  padding: 8px 18px;
  font-size: 11px; color: #8b8e9f;
  border-top: 1px solid #2a2c38;
  text-align: center;
}

/* Clip editor — Piano Roll launcher row */
.cmp-clipedit-pianoroll-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  margin-top: 6px;
  border-top: 1px solid #2a2c38;
}
.cmp-clipedit-pianoroll-hint { font-size: 11px; color: #8b8e9f; }

/* Remix banner — shown at the top of Score Studio when a project was forked. */
.cmp-remix-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(238,61,139,0.22), rgba(139,61,238,0.22));
  border: 1px solid rgba(238,61,139,0.45);
  border-radius: 10px;
  margin-bottom: 12px;
  color: #f4d3e3;
  font-size: 13px;
}
.cmp-remix-icon { font-size: 18px; }
.cmp-remix-text { flex: 1; }
.cmp-remix-text strong { color: #fff; }
.cmp-remix-dismiss {
  background: transparent; border: none;
  color: #f4d3e3; font-size: 18px; cursor: pointer;
  padding: 0 6px;
}
.cmp-remix-dismiss:hover { color: #fff; }

/* Showcase work — Remix button sits next to Open in studio */
.sc-work-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   Per-track FX rack (BandLab 4) — 5 mini-knobs at the bottom of each strip
   ============================================================ */
.cmp-fx-rack {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: 6px;
  padding: 4px 2px;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  width: 100%;
}
.cmp-fx-knob {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  cursor: ns-resize;
  user-select: none;
  min-width: 0;
}
.cmp-fx-dial {
  --v: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: conic-gradient(
    var(--track-colour) 0deg,
    var(--track-colour) calc(var(--v) * 270deg),
    rgba(255,255,255,0.1) calc(var(--v) * 270deg),
    rgba(255,255,255,0.1) 270deg,
    transparent 270deg,
    transparent 360deg
  );
  transform: rotate(135deg);
  position: relative;
}
.cmp-fx-dial::after {
  content: "";
  position: absolute; inset: 3px;
  background: #14151c;
  border-radius: 50%;
  transform: rotate(-135deg);
}
.cmp-fx-label {
  font-size: 8px; font-weight: 700;
  color: #8b8e9f; letter-spacing: 0.02em;
}
.cmp-fx-knob:hover .cmp-fx-label { color: var(--track-colour); }

/* ============================================================
   SongStarter modal (BandLab 5)
   ============================================================ */
.ss-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 9, 14, 0.85);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ss-modal-card {
  background: #15161e;
  border: 1px solid #2a2c38;
  border-radius: 14px;
  max-width: 880px; width: 92vw;
  max-height: 90vh; overflow-y: auto;
  color: #e6e8f1;
  padding: 24px;
}
.ss-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.ss-head h2 { margin: 0; font-size: 22px; }
.ss-close {
  background: transparent; border: none; color: #8b8e9f;
  font-size: 24px; cursor: pointer; padding: 4px 10px;
}
.ss-close:hover { color: #e6e8f1; }
.ss-sub { color: #8b8e9f; margin: 0 0 18px; font-size: 13px; }
.ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.ss-card {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  color: #fff;
  text-align: left;
  min-height: 160px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.ss-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.ss-card:active { transform: translateY(0); }
.ss-icon { font-size: 28px; }
.ss-name { font-size: 17px; font-weight: 800; }
.ss-meta { font-size: 11px; opacity: 0.85; letter-spacing: 0.04em; text-transform: uppercase; }
.ss-desc { font-size: 12px; opacity: 0.92; margin-top: auto; line-height: 1.4; }

/* ============================================================
   Homepage — Studios layout (Phase 1)
   ============================================================ */
.home-body { background: var(--surface-1); color: var(--text); min-height: 100vh; }
.home-main { max-width: 1200px; margin: 0 auto; padding: 36px 24px 60px; }

.home-hero { text-align: center; margin: 8px 0 36px; }
.home-h1 {
  font-size: 44px; font-weight: 800; margin: 0 0 8px;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple), var(--accent-blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-sub { color: var(--text-dim); font-size: 17px; margin: 0; }
.home-sub strong { color: var(--text); }

.home-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 36px 0 14px;
}

/* Five Studio cards — main creative destinations */
.studio-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.studio-card {
  position: relative; display: block;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 24px 26px;
  color: var(--text); text-decoration: none;
  transition: transform 140ms, border-color 140ms, box-shadow 140ms;
  overflow: hidden;
}
.studio-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--studio-accent, var(--accent-pink));
}
.studio-card:hover {
  transform: translateY(-3px);
  border-color: var(--studio-accent, var(--accent-pink));
  box-shadow: var(--shadow-lg);
}
.studio-emoji { font-size: 38px; margin-bottom: 10px; line-height: 1; }
.studio-card h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.studio-card p { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.studio-cta { color: var(--studio-accent, var(--accent-pink)); font-weight: 700; font-size: 14px; }
.studio-soon {
  position: absolute; top: 14px; right: 14px;
  background: var(--surface-overlay); color: var(--text-dim);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 6px;
}

/* Per-studio accent colours — themed but readable */
.studio-dj       { --studio-accent: #3d5fec; }
.studio-producer { --studio-accent: #8b3dee; }
.studio-score    { --studio-accent: #ee3d8b; }
.studio-play     { --studio-accent: #2ec882; }
.studio-skills   { --studio-accent: #ffb84d; }

/* Homepage Projects row — themed "make this" tiles (YuStudio Artist Pack style) */
.proj-tile-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.proj-tile {
  position: relative; display: block;
  padding: 24px 20px 20px;
  border-radius: 14px;
  color: white; text-decoration: none;
  min-height: 160px;
  overflow: hidden;
  transition: transform 140ms, box-shadow 140ms;
  box-shadow: var(--shadow);
}
.proj-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.proj-tile::after {
  content: "Open project →";
  position: absolute; bottom: 16px; right: 18px;
  font-size: 12px; font-weight: 700; opacity: 0.85;
}
.proj-tile-mood {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 6px;
  margin-bottom: 10px;
}
.proj-tile-title {
  font-size: 22px; font-weight: 800; line-height: 1.15; margin-bottom: 4px;
}
.proj-tile-sub { font-size: 13px; opacity: 0.92; margin-bottom: 10px; }
.proj-tile-meta { font-size: 11px; opacity: 0.7; letter-spacing: 0.04em; }

/* Two lightweight extras — narrower, side-by-side */
.extra-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.extra-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px;
  color: var(--text); text-decoration: none;
  transition: border-color 140ms, transform 140ms;
}
.extra-card:hover { border-color: var(--accent-pink); transform: translateY(-2px); }
.extra-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.extra-card h3 { margin: 0 0 4px; font-size: 17px; }
.extra-card p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.4; }
.extra-card .studio-soon { position: static; display: inline-block; margin-top: 6px; }

/* Home — the three MIX-ED products (Classroom, Studio, Skills) */
.product-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 30px 28px 26px; min-height: 340px;
  color: var(--text); text-decoration: none; overflow: hidden;
  transition: transform 140ms, border-color 140ms, box-shadow 140ms;
}
.product-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--product-accent, var(--accent-pink));
}
.product-card:hover { transform: translateY(-4px); border-color: var(--product-accent, var(--accent-pink)); box-shadow: var(--shadow-lg); }
.product-emoji { font-size: 46px; line-height: 1; margin-bottom: 14px; }
.product-card h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; line-height: 1.15; }
.product-card p { margin: 0 0 14px; color: var(--text-dim); font-size: 15px; line-height: 1.5; }
.product-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.product-list li { font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; }
.product-cta { margin-top: auto; color: var(--product-accent, var(--accent-pink)); font-weight: 800; font-size: 15px; }
.product-classroom { --product-accent: #e43a6c; }
.product-studio    { --product-accent: #3d5fec; }
.product-skills    { --product-accent: #2ec882; }
.studio-games      { --studio-accent: #8b3dee; }

/* Hub pages (studio.html, skills.html) */
.hub-back { display: inline-block; margin: 0 0 6px; color: var(--text-dim); font-weight: 700; font-size: 14px; text-decoration: none; }
.hub-back:hover { color: var(--text); }
.hub-more { float: right; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--accent-pink); text-decoration: none; }

/* A product or module the school hasn't subscribed to (module-access.js) */
.product-card.is-locked, .studio-card.is-locked, .extra-card.is-locked { opacity: .55; filter: grayscale(.7); cursor: not-allowed; }
.product-card.is-locked:hover, .studio-card.is-locked:hover, .extra-card.is-locked:hover { transform: none; box-shadow: none; border-color: var(--border); }
.ma-lock-badge {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  background: var(--surface-overlay); color: var(--text);
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 6px;
}
.extra-card.is-locked { position: relative; }
.proj-tile-row.is-locked, .lesson-grid.is-locked { display: none; }

/* "Coming next" placeholder pages */
.soon-main {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 220px); padding: 36px 24px;
}
.soon-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 48px 40px; max-width: 580px; text-align: center;
}
.soon-emoji { font-size: 64px; margin-bottom: 12px; }
.soon-card h1 {
  margin: 0 0 10px; font-size: 32px; font-weight: 800;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.soon-lead { color: var(--text); font-size: 16px; line-height: 1.5; margin: 0 0 12px; }
.soon-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 24px; }
.soon-card a.btn { display: inline-block; }

/* Teacher dashboard — Live class presence grid */
.live-class {
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 24px; margin: 18px 0;
}
.lc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.lc-head .cc-title { margin: 0; }
.lc-meta { display: flex; align-items: center; gap: 10px; }
.lc-backend {
  font-size: 12px; color: var(--text-dim); font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
  background: var(--surface-overlay); border: 1px solid var(--border);
}
.lc-be-supabase  { color: #2ec882; border-color: rgba(46, 200, 130, 0.4); }
.lc-be-broadcast { color: #ffb84d; border-color: rgba(255, 184, 77, 0.4); }
.lc-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.lc-empty {
  grid-column: 1 / -1;
  text-align: center; color: var(--text-dim); padding: 36px 12px;
  font-style: italic; font-size: 14px;
  background: var(--surface-overlay); border-radius: 8px;
  border: 1px dashed var(--border);
}
.lc-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 140ms;
}
.lc-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lc-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #2ec882; flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
  color: #2ec882;
}
.lc-name { font-weight: 700; color: var(--text); font-size: 14px; flex: 1; }
.lc-class {
  background: #3d5fec; color: white;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.lc-page { color: var(--text-dim); font-size: 13px; }
.lc-status { color: var(--text-dim); font-size: 11px; margin-top: 4px; }
.lc-card.lc-active  { border-color: rgba(46, 200, 130, 0.3); }
.lc-card.lc-idle    .lc-dot { background: #ffb84d; color: #ffb84d; }
.lc-card.lc-idle    { border-color: rgba(255, 184, 77, 0.3); }
.lc-card.lc-offline .lc-dot { background: #6b6e7f; color: #6b6e7f; box-shadow: none; }
.lc-card.lc-offline { opacity: 0.6; }

/* Teacher dashboard — classroom controls block */
.classroom-controls {
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 24px; margin: 18px 0 24px;
}
.cc-title {
  margin: 0 0 14px; font-size: 18px; font-weight: 700;
  color: var(--text);
}
.cc-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.cc-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px;
}
.cc-card h3 {
  margin: 0 0 6px; font-size: 14px; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cc-card p {
  margin: 0 0 12px; color: var(--text-dim); font-size: 13px; line-height: 1.4;
}
.cc-hint { color: #6b6e7f; font-size: 12px; font-style: italic; margin-top: 8px; }
.cc-select {
  width: 100%; background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 14px;
}

/* Stale-identity banner — shown when a different kid may be at this laptop.
   Sits above the site header so it's the first thing they see. */
.stale-banner {
  background: linear-gradient(90deg, #ee3d8b 0%, #8b3dee 100%);
  color: white; padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  position: sticky; top: 0; z-index: 100;
}
.stale-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.stale-q { flex: 1; min-width: 200px; font-size: 15px; }
.stale-q strong { font-weight: 800; }
.stale-yes, .stale-no {
  border: 0; border-radius: 8px; padding: 8px 16px;
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.stale-yes { background: white; color: #ee3d8b; }
.stale-yes:hover { background: #fce7f1; }
.stale-no { background: rgba(0,0,0,0.25); color: white; }
.stale-no:hover { background: rgba(0,0,0,0.4); }

/* Identity chip in site header — shows current name + class + "Switch user" */
.identity-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 4px 8px 4px 12px;
  background: var(--surface-overlay); border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; color: var(--text);
}
.identity-name { font-weight: 700; }
.identity-class {
  background: var(--accent-pink); color: var(--text-on-accent); border-radius: 6px;
  padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.identity-switch {
  background: transparent; border: 0; color: var(--text-dim);
  cursor: pointer; font-size: 12px; padding: 0 4px;
  text-decoration: underline;
}
.identity-switch:hover { color: var(--text); }
.identity-signin {
  color: var(--accent-pink); font-weight: 700; text-decoration: none; font-size: 13px;
  padding: 4px 10px; border: 1px solid var(--accent-pink); border-radius: 8px;
}
.identity-signin:hover { background: rgba(238, 61, 139, 0.1); }

/* Theme toggle button — sits next to the identity chip in the header */
.theme-toggle {
  background: var(--surface-overlay); border: 1px solid var(--border);
  border-radius: 999px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
  margin-left: 8px; font-size: 16px;
  transition: background 120ms, transform 120ms;
}
.theme-toggle:hover { background: var(--surface-3); transform: scale(1.05); }

/* Who's playing? sign-in page */
.who-body { background: var(--surface-1); min-height: 100vh; color: var(--text); }
.who-main {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 160px); padding: 24px;
}
.who-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 36px 40px; max-width: 480px; width: 100%;
  box-shadow: var(--shadow-lg);
}
.who-h1 {
  margin: 0 0 8px; font-size: 32px; font-weight: 800; color: var(--text);
}
.who-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 24px; }
.who-form { display: flex; flex-direction: column; gap: 16px; }
.who-field { display: flex; flex-direction: column; gap: 6px; }
.who-field > span {
  font-size: 12px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600;
}
.who-field select, .who-field input {
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; font-size: 16px;
}
.who-field select:focus, .who-field input:focus {
  outline: none; border-color: var(--accent-pink);
}
.who-go {
  margin-top: 8px; padding: 14px 24px; font-size: 16px; font-weight: 700;
}
.who-fineprint { color: var(--text-muted); font-size: 12px; margin: 8px 0 0; text-align: center; }
.t-acct-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.t-acct-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.who-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.who-google svg { background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; }

/* Scene picker (film-scoring video bank) */
.cmp-scene {
  background: #14151c; border: 1px solid #2a2c38; border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.cmp-scene-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cmp-scene-toggle {
  background: transparent; border: 1px solid #2a2c38; color: #c8cbdc;
  width: 26px; height: 26px; border-radius: 6px;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.cmp-scene-toggle:hover { background: #2a2c38; }
.cmp-scene.collapsed .cmp-scene-toggle { transform: rotate(-90deg); }
.cmp-scene.collapsed .cmp-video-wrap { display: none; }
.cmp-scene.collapsed { padding: 8px 14px; }
.cmp-scene-desc {
  flex: 1; min-width: 200px; color: #a5a7b8; font-size: 12px; font-style: italic;
}
.cmp-scene-tip {
  color: #c8cbdc; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.cmp-scene-tip .cmp-kbd { margin: 0 2px; }
.cmp-upload-btn {
  background: #232531; color: #f5f5fb; border: 1px solid #3a3d4e;
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  font-weight: 600; font-size: 13px;
}
.cmp-upload-btn:hover { background: #2b2e3c; }
.cmp-video-wrap {
  position: relative; background: #0a0b10; border-radius: 8px;
  overflow: hidden; aspect-ratio: 16 / 9; max-height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.cmp-video {
  width: 100%; height: 100%; object-fit: contain;
  display: block;     /* JS toggles via inline display:none when no scene */
}
.cmp-video-empty {
  color: #6b6e7f; font-size: 14px; font-style: italic;
}
/* Fullscreen toggle — sits in the bottom-right corner of the picture frame,
   semi-transparent so it doesn't clutter the scene, brightens on hover. */
.cmp-video-fs {
  position: absolute; right: 10px; bottom: 10px;
  width: 36px; height: 36px;
  background: rgba(8, 9, 14, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #fff;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  z-index: 4;
  transition: background 120ms, transform 80ms;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cmp-video-fs:hover { background: rgba(238, 61, 139, 0.9); border-color: #ee3d8b; }
.cmp-video-fs:active { transform: scale(0.94); }
/* When the wrap is itself fullscreen the button stays glued to the corner. */
.cmp-video-wrap:fullscreen { aspect-ratio: auto; max-height: none; width: 100vw; height: 100vh; }
.cmp-video-wrap:-webkit-full-screen { aspect-ratio: auto; max-height: none; width: 100vw; height: 100vh; }

/* Responsive */
@media (max-width: 1100px) {
  .cmp-workarea { grid-template-columns: 1fr; }
  .cmp-mixer-strips { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Phase 3 — Classroom control (Freeze / Focus / Toast)
   ============================================================ */

/* Full-screen freeze overlay — covers everything, blocks pointer events. */
.cc-freeze {
  position: fixed; inset: 0; z-index: 99999;
  background: radial-gradient(ellipse at center, rgba(20, 20, 40, 0.96) 0%, rgba(8, 8, 16, 0.99) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: cc-freeze-in 240ms ease-out;
}
@keyframes cc-freeze-in {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}
.cc-freeze-card {
  background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%);
  border: 1px solid rgba(238, 61, 139, 0.4);
  border-radius: 20px;
  padding: 48px 56px;
  max-width: 560px; text-align: center;
  box-shadow: 0 20px 80px rgba(238, 61, 139, 0.25), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.cc-freeze-icon {
  font-size: 64px; line-height: 1; margin-bottom: 12px;
  background: linear-gradient(90deg, #ee3d8b, #8b3dee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cc-freeze-title {
  margin: 0 0 12px; font-size: 28px; font-weight: 800; color: #f5f5fb;
}
.cc-freeze-msg {
  margin: 0 0 16px; font-size: 18px; line-height: 1.4; color: #d6d8e6;
  min-height: 1.4em;
}
.cc-freeze-msg:empty { display: none; }
.cc-freeze-sub {
  margin: 0; font-size: 13px; color: #8b8e9f; font-style: italic;
}

/* Focus-mode top bar — sits above the site header. */
.cc-focus-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
  background: linear-gradient(90deg, #ee3d8b 0%, #8b3dee 100%);
  color: white; padding: 8px 16px;
  font-size: 13px; font-weight: 700; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  letter-spacing: 0.02em;
  animation: cc-slide-down 180ms ease-out;
}
.cc-focus-icon { margin-right: 6px; }
@keyframes cc-slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
/* Push the rest of the page down so the bar doesn't cover the header. */
body.cc-focus-on { padding-top: 32px; }
body.cc-focus-on .stale-banner { top: 32px; }

/* Toast — bottom right, auto-fades. */
.cc-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 9997;
  background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%);
  border: 1px solid rgba(61, 95, 236, 0.5);
  border-left: 4px solid #3d5fec;
  border-radius: 10px;
  padding: 14px 18px;
  max-width: 360px;
  color: #f5f5fb; font-size: 14px; line-height: 1.4;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  animation: cc-toast-in 240ms ease-out;
}
.cc-toast-leave { animation: cc-toast-out 1000ms ease-in forwards; }
@keyframes cc-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes cc-toast-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(20px); opacity: 0; }
}

/* Teacher controls — three big cards for Freeze / Focus / Send. */
.cc-control-card { display: flex; flex-direction: column; gap: 8px; }
.cc-control-card .cc-state {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 6px; display: inline-block; width: max-content;
}
.cc-state-off { background: var(--surface-overlay); color: var(--text-dim); }
.cc-state-on  { background: rgba(238, 61, 139, 0.2); color: #ff86b9; border: 1px solid rgba(238, 61, 139, 0.4); }
.cc-input {
  width: 100%; background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 14px;
  font-family: inherit;
}
.cc-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-btn-row .btn { flex: 1; min-width: 110px; }
.btn-danger {
  background: linear-gradient(90deg, #ee3d8b 0%, #8b3dee 100%);
  color: white; border: 0;
}
.btn-danger:hover { filter: brightness(1.1); }
.cc-target {
  font-size: 12px; color: var(--text-dim); margin-top: 4px;
}

/* Phase 3b — Screen mirror modal + privacy banner */

.lc-hint {
  margin: 14px 0 0; font-size: 12px; color: var(--text-dim); font-style: italic; text-align: center;
}
.lc-card { cursor: pointer; }
.lc-card:hover { border-color: var(--border-strong); }

/* Privacy banner shown on the mirrored student's tab. */
.cc-eye-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9996;
  background: linear-gradient(90deg, #ff2e63 0%, #c1124b 100%);
  color: white; padding: 8px 16px;
  font-size: 13px; font-weight: 700; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  letter-spacing: 0.02em;
  animation: cc-slide-down 180ms ease-out;
}
.cc-eye-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: white; margin-right: 8px; vertical-align: middle;
  animation: cc-eye-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
}
@keyframes cc-eye-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
body.cc-eye-on { padding-top: 32px; }
body.cc-eye-on .stale-banner { top: 32px; }
/* Stack focus-bar above eye-bar if both are active. */
body.cc-eye-on.cc-focus-on .cc-focus-bar { top: 32px; }
body.cc-eye-on.cc-focus-on { padding-top: 64px; }

/* Teacher-side mirror modal. */
.cc-modal {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(8, 8, 16, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: cc-freeze-in 200ms ease-out;
}
.cc-modal[hidden] { display: none; }
body.cc-modal-open { overflow: hidden; }
.cc-modal-card {
  background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%);
  border: 1px solid #2a2c38; border-radius: 14px;
  width: min(1100px, 100%); max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}
.cc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #2a2c38;
}
.cc-modal-title {
  display: flex; align-items: center; gap: 10px;
  color: #f5f5fb; font-size: 15px;
}
.cc-modal-title strong { color: #f5f5fb; font-weight: 800; }
.cc-modal-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #2ec882; box-shadow: 0 0 8px #2ec882;
  animation: cc-eye-pulse 1.5s ease-in-out infinite;
}
.cc-mirror-class {
  background: #3d5fec; color: white;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.cc-mirror-page {
  color: #8b8e9f; font-size: 13px;
}
.cc-modal-close {
  background: transparent; border: 0; color: #8b8e9f;
  font-size: 28px; line-height: 1; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
}
.cc-modal-close:hover { background: rgba(255,255,255,0.06); color: #f5f5fb; }
.cc-modal-body {
  padding: 14px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: auto;
}
.cc-mirror-stage {
  position: relative;
  background: #0a0b10; border: 1px solid #2a2c38; border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
}
.cc-mirror-img {
  display: block; max-width: 100%; max-height: 100%;
  opacity: 0; transition: opacity 240ms;
}
.cc-mirror-img.cc-mirror-img-ready { opacity: 1; }
.cc-mirror-status {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #8b8e9f; font-style: italic; font-size: 14px; text-align: center; padding: 24px;
}
.cc-mirror-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.cc-mirror-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  color: #c4c6d4; font-size: 13px; cursor: pointer;
}
.cc-mirror-toggle input { width: 16px; height: 16px; }
.cc-mirror-meta { color: #6b6e7f; font-size: 12px; font-style: italic; }

/* ============================================================
   Phase 4 — Studio access (lock/unlock + tamper log)
   ============================================================ */

/* Locked overlay shown on student pages when their class can't access the
   Studio they're trying to open. Sits below freeze overlay (z-index 99999) so
   teacher can still freeze even a kid who's looking at a locked screen. */
.ma-locked {
  position: fixed; inset: 0; z-index: 99000;
  background: radial-gradient(ellipse at center, rgba(20, 20, 40, 0.96) 0%, rgba(8, 8, 16, 0.99) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: cc-freeze-in 240ms ease-out;
}
.ma-locked-card {
  background: linear-gradient(180deg, #1a1c25 0%, #14151c 100%);
  border: 1px solid rgba(255, 184, 77, 0.4);
  border-radius: 20px; padding: 48px 56px;
  max-width: 560px; text-align: center;
  box-shadow: 0 20px 80px rgba(255, 184, 77, 0.18), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.ma-locked-icon { font-size: 64px; line-height: 1; margin-bottom: 12px; }
.ma-locked-title { margin: 0 0 12px; font-size: 26px; font-weight: 800; color: #f5f5fb; }
.ma-locked-msg { margin: 0 0 24px; font-size: 16px; color: #c4c6d4; }

/* Teacher matrix. */
.ma-matrix-wrap { overflow-x: auto; margin: 6px 0 14px; }
.ma-matrix {
  border-collapse: separate; border-spacing: 0;
  width: 100%; font-size: 13px;
}
.ma-matrix th, .ma-matrix td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  text-align: center; vertical-align: middle;
}
.ma-matrix thead th {
  background: var(--surface-overlay);
  color: var(--text-dim); font-weight: 700;
  position: sticky; top: 0;
}
.ma-corner { text-align: left !important; color: var(--text-dim); font-weight: 600; font-size: 12px; }
.ma-studio { text-align: left !important; color: var(--text); font-weight: 700; }
.ma-row-action { white-space: nowrap; }
.ma-row-action .btn { padding: 6px 10px; font-size: 12px; }
.ma-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 28px; border-radius: 8px;
  background: var(--surface-overlay); border: 1px solid var(--border);
  cursor: pointer; transition: background 120ms, border-color 120ms;
  font-size: 16px;
}
.ma-cell input { position: absolute; opacity: 0; pointer-events: none; }
.ma-cell:hover { background: var(--surface-3); }
.ma-locked-cell {
  background: rgba(255, 184, 77, 0.18);
  border-color: rgba(255, 184, 77, 0.5);
}
.ma-matrix tfoot td { border-bottom: 0; padding-top: 12px; }

/* Tamper log feed below the matrix. */
.ma-tamper {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px;
}
.ma-tamper-title {
  margin: 0 0 8px; font-size: 13px; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ma-tamper-count {
  display: inline-block; min-width: 24px; padding: 2px 8px; margin-left: 6px;
  background: rgba(255, 184, 77, 0.22); color: #ffb84d;
  border-radius: 6px; font-size: 11px; font-weight: 800;
}
.ma-tamper-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
}
.ma-tamper-empty { color: var(--text-dim); font-style: italic; font-size: 13px; padding: 4px 0; }
.ma-tamper-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: 6px;
  background: var(--surface-overlay);
  font-size: 13px; color: var(--text-dim);
}
.ma-tamper-time { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 48px; }
.ma-tamper-studio { color: #ffb84d; font-weight: 700; }

/* ============================================================
   Phase 5 — Producer Lab (Pack browser + Pack workspace)
   ============================================================ */

/* Pack browser grid */
.pack-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-width: var(--max); margin: 0 auto; padding: 0 24px 20px;
}
.pack-card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform 160ms, border-color 160ms, box-shadow 160ms;
}
.pack-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-purple);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.pack-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px 20px;
  color: white;
  font-family: var(--font-display);
}
.pack-cover-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pack-cover-tag {
  background: rgba(0,0,0,0.25); padding: 4px 10px; border-radius: 6px;
  backdrop-filter: blur(4px);
}
.pack-cover-bpm {
  background: rgba(255,255,255,0.18); padding: 4px 10px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.pack-cover-title {
  font-size: 32px; line-height: 1.05; letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.pack-cover-sub {
  font-family: var(--font); font-size: 13px; font-weight: 500;
  opacity: 0.92; margin-top: 4px;
}
.pack-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.pack-tagline { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.pack-desc { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.pack-cta { margin-top: 8px; font-weight: 700; color: var(--accent-pink); font-size: 14px; }
.pack-soon {
  text-align: center; color: var(--text-dim); font-style: italic; font-size: 13px;
  margin: 20px 0 40px;
}
.pack-empty { text-align: center; color: var(--text-dim); padding: 40px; }

/* Stem-pack browser — reuses .pack-grid / .pack-card */
.stem-card .pack-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.stem-card .pack-actions .btn-primary { flex: 1 1 100%; }
.stem-card .pack-actions .btn-secondary { flex: 1 1 calc(50% - 4px); text-align: center; font-size: 13px; }
.stem-roles {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0;
}
.stem-role-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stem-head { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.stem-promo {
  background: linear-gradient(135deg, rgba(139,61,238,0.08), rgba(238,61,139,0.08));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  margin: 24px auto 40px;
  max-width: 720px;
}

/* DJ Studio — per-deck stem isolation bar (V / D / B / O) */
.deck-stem-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin: 4px 8px;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  min-height: 30px;
}
.deck-stem-bar.has-stems { background: rgba(139, 61, 238, 0.22); }
.deck-stems-empty {
  color: rgba(255,255,255,0.45);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.deck-stem-btn {
  --stem-colour: #888;
  width: 36px; height: 26px;
  border-radius: 4px;
  border: 1.5px solid var(--stem-colour);
  background: var(--stem-colour);
  color: #fff;
  font: 800 13px/1 system-ui, sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
}
.deck-stem-btn:hover { transform: translateY(-1px); }
.deck-stem-btn:active { transform: translateY(0); }
.deck-stem-btn.muted {
  background: transparent;
  color: var(--stem-colour);
  opacity: 0.55;
  text-decoration: line-through;
}
.deck-stem-btn.disabled {
  background: transparent;
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.2);
  cursor: not-allowed;
}

/* Pack workspace — sidebar mirrors project.html, cover sits inline */
.pack-sidebar { /* inherits .proj-sidebar */ }
.pack-cover-inline {
  aspect-ratio: auto; padding: 18px 18px 14px;
  border-radius: 12px; margin-bottom: 10px;
}
.pack-cover-inline .pack-cover-title { font-size: 22px; }
.pack-back {
  display: block; margin-top: 12px;
  text-align: center; font-size: 13px;
  color: var(--text-dim);
}

/* ============================================================
   Phase 6 — Showcase gallery + work detail + comment thread
   ============================================================ */

.sc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
.sc-filter { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.sc-filter-label { font-size: 12px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

.sc-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  max-width: var(--max); margin: 16px auto 40px; padding: 0 24px;
}
.sc-empty {
  grid-column: 1 / -1;
  text-align: center; color: var(--text-dim);
  font-style: italic; font-size: 14px;
  padding: 48px 12px; border-radius: 12px;
  background: var(--surface-overlay); border: 1px dashed var(--border);
}
.sc-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: var(--text);
  transition: transform 140ms, border-color 140ms;
}
.sc-card:hover { transform: translateY(-2px); border-color: var(--accent-purple); text-decoration: none; }
.sc-card-cover {
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid;
}
.sc-card-icon { font-size: 42px; line-height: 1; }
.sc-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.sc-card-meta { display: flex; justify-content: space-between; align-items: center; }
.sc-card-studio { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.sc-card-ago    { font-size: 11px; color: var(--text-dim); }
.sc-card-title  { margin: 2px 0; font-size: 16px; font-weight: 800; }
.sc-card-author { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.sc-card-author strong { color: var(--text); font-weight: 700; }
.sc-card-comments { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* Work detail page. */
.sc-work-main { max-width: 820px; margin: 0 auto; padding: 24px; }
.sc-back { display: inline-block; margin-bottom: 14px; color: var(--text-dim); font-size: 13px; }
.sc-work { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.sc-work-head {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 20px;
}
.sc-work-cover {
  width: 140px; height: 140px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid;
}
.sc-work-icon { font-size: 64px; line-height: 1; }
.sc-work-meta { flex: 1; min-width: 220px; }
.sc-work-studio { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.sc-work-title  { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
.sc-work-author { font-size: 14px; color: var(--text-dim); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sc-work-author strong { color: var(--text); }
.sc-work-time { color: var(--text-dim); font-size: 12px; }
.sc-work-actions { margin-top: 14px; }

.sc-comments { }
.sc-comments-title {
  margin: 0 0 12px; font-size: 16px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
}
.sc-comment-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.sc-comment-empty { color: var(--text-dim); font-style: italic; padding: 10px; }
.sc-comment {
  background: var(--surface-overlay); border-left: 3px solid var(--border);
  padding: 10px 14px; border-radius: 8px;
}
.sc-comment-teacher { border-left-color: var(--accent-pink); background: rgba(238, 61, 139, 0.06); }
.sc-comment-student { border-left-color: var(--accent-blue); }
.sc-comment-head    { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.sc-comment-author  { font-size: 13px; }
.sc-comment-role {
  background: var(--accent-pink); color: white;
  padding: 1px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
}
.sc-comment-time    { color: var(--text-muted); margin-left: auto; }
.sc-comment-body    { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

.sc-comment-form { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sc-comment-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-family: inherit; font-size: 14px;
  resize: vertical; min-height: 60px;
}
.sc-comment-row { display: flex; justify-content: space-between; align-items: center; }
.sc-comment-as  { font-size: 12px; color: var(--text-dim); }
.sc-work-missing { text-align: center; padding: 60px 24px; }

/* ============================================================
   Phase 7 — Group sessions (collab pill + modal)
   ============================================================ */
.cmp-collab-pill {
  display: inline-flex; align-items: center; gap: 6px;
}
.cmp-collab-pill.cmp-collab-on {
  background: linear-gradient(90deg, rgba(46, 200, 130, 0.18), rgba(61, 95, 236, 0.18));
  border-color: rgba(46, 200, 130, 0.5);
  color: #f5f5fb;
}
.cmp-collab-pill .cmp-collab-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2ec882; box-shadow: 0 0 6px #2ec882;
  animation: cc-eye-pulse 1.5s ease-in-out infinite;
}
.cmp-collab-pill .cmp-collab-icon { font-size: 14px; }
.cmp-collab-pill .cmp-collab-label {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; font-weight: 700;
}
.cmp-collab-pill .cmp-collab-count {
  background: rgba(255,255,255,0.12); padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 800;
}
.cmp-collab-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 22px; font-weight: 800; letter-spacing: 0.05em;
  color: #2ec882;
}
.cmp-collab-membh {
  margin: 16px 0 6px; font-size: 12px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cmp-collab-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-collab-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.04); font-size: 13px;
}
.cmp-collab-list li .cmp-collab-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2ec882; box-shadow: 0 0 6px #2ec882;
}
.cmp-collab-empty { color: var(--text-muted); font-style: italic; }

/* ============================================================
   World Music hub
   ============================================================ */
.wm-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  max-width: var(--max); margin: 12px auto 32px; padding: 0 24px;
}
.wm-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.wm-cover {
  position: relative;
  padding: 22px 24px;
  color: white;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-display);
}
.wm-cover-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wm-cover-tag {
  background: rgba(0,0,0,0.28); padding: 4px 10px; border-radius: 6px;
  backdrop-filter: blur(4px);
}
.wm-cover-title {
  font-size: 28px; line-height: 1.05;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.wm-body { padding: 18px 22px 22px; }
.wm-intro {
  margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text);
}
.wm-h4 {
  margin: 14px 0 6px; font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.wm-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); }
.wm-list li { margin-bottom: 2px; }
.wm-teach { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; font-style: italic; }
.wm-try { display: flex; flex-direction: column; gap: 6px; }
.wm-try-card {
  display: block;
  background: var(--surface-overlay);
  border: 1px solid var(--border); border-left: 3px solid var(--accent-purple);
  border-radius: 8px; padding: 10px 12px;
  text-decoration: none; color: var(--text);
  transition: border-color 140ms, background 140ms;
}
.wm-try-card:hover {
  border-color: var(--accent-pink); border-left-color: var(--accent-pink);
  background: rgba(238, 61, 139, 0.06); text-decoration: none;
}
.wm-try-card strong { display: block; font-size: 13px; margin-bottom: 2px; }
.wm-try-card span { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* ============================================================
   Teacher identity — Sign in as Teacher card + teacher chip styling
   ============================================================ */
.t-id-card {
  background: linear-gradient(135deg, rgba(238, 61, 139, 0.08), rgba(139, 61, 238, 0.08));
  border: 1px solid rgba(238, 61, 139, 0.3);
  border-radius: 14px;
  padding: 18px 22px; margin: 12px 0 18px;
  max-width: var(--max);
}
.t-id-title {
  margin: 0 0 6px; font-size: 16px; font-weight: 800;
  color: var(--accent-pink);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.t-id-sub { margin: 0 0 12px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.t-id-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* When the current identity is a teacher, pink-purple ring on the header chip
   so the role is unmistakable across every page. */
body.identity-teacher .identity-chip {
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 2px rgba(238, 61, 139, 0.25);
}
body.identity-teacher .identity-chip::before {
  content: "👩‍🏫";
  margin-right: 6px;
}

/* ---- quiz-ext.js: orchestra seating plan ---- */
.orch-plan { width: 100%; max-width: 640px; height: auto; display: block; margin: 8px auto 0; }
.orch-sec path { fill: var(--bg-elev); stroke: var(--text); stroke-width: 2; cursor: pointer; transition: fill .12s; }
.orch-sec:hover path, .orch-sec.over path { fill: var(--accent-amber); }
.orch-sec.correct path { fill: var(--accent-green); }
.orch-sec.wrong path { fill: var(--danger); }
.orch-sec text { font-size: 15px; font-weight: 700; fill: var(--text); pointer-events: none; }
.orch-cond { fill: var(--bg-card); stroke: var(--text); stroke-width: 2; }
.orch-condlbl { font-size: 12px; font-weight: 700; fill: var(--text-dim); }
.orch-wrap { position: relative; }
.orch-chip { position: absolute; left: 16px; top: 8px; background: var(--accent-pink); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 10px; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 6px 16px rgba(0,0,0,.25); display: inline-flex; gap: 8px; align-items: center; }
.orch-chip.armed { outline: 3px solid var(--accent-amber); }
.orch-chip.drag { cursor: grabbing; transform: scale(1.06); z-index: 5; }
.orch-emoji { font-size: 1.3rem; }
.orch-hint { text-align: center; color: var(--text-muted); font-size: .85rem; margin-top: 6px; }

/* ---- quiz-ext.js: draw the note ---- */
.draw-sub { text-align: center; color: var(--text-dim); margin: 0 0 10px; }
.draw-sub em { color: var(--text-muted); }
.draw-wrap { max-width: 720px; margin: 0 auto; }
.draw-canvas { width: 100%; height: auto; display: block; background: #fff; border: 2px solid var(--border); border-radius: 12px; touch-action: none; cursor: crosshair; }
:root[data-theme="dark"] .draw-canvas { background: #f5f5fb; }
.draw-opts { justify-content: center; gap: 10px; }
.draw-msg { text-align: center; min-height: 1.5em; margin-top: 10px; font-weight: 600; color: var(--text-dim); }
.draw-msg.ok { color: var(--accent-green); }
.draw-msg.no { color: var(--danger); }
/* quiz-ext.js types stack their prompt above a full-width board */
.game-stage.ext-stage { flex-direction: column; align-items: stretch; gap: 8px; }
.game-stage.ext-stage .prompt-text { text-align: center; width: 100%; max-width: none; }
.game-stage.ext-stage .orch-wrap, .game-stage.ext-stage .draw-wrap { width: 100%; }


/* ============================================================
   Mix-Ed Classroom look — header, menu, buttons, headings, cards.
   Kept at the end so it wins over the older rules above.
   ============================================================ */
/* Brand: the slanted pink MIX-ED tag (the old logo image is hidden) */
.site-header { background: var(--bg); border-bottom: 2px solid var(--accent-pink); }
.site-header .inner { padding: 14px 24px; gap: 18px; }
.brand { gap: 14px; }
.brand img { display: none; }
.brand::before {
  content: "MIX-ED"; display: inline-block;
  background: var(--accent-pink); color: #fff;
  font: 800 15px/1 var(--font); letter-spacing: .04em;
  padding: 10px 22px 10px 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.brand .tagline { font: 700 13px var(--font); letter-spacing: .02em; color: var(--text); border-left: 0; padding-left: 0; text-transform: none; }

/* Menu: Classroom's dark rounded bar with a pink active button */
.nav { background: #111114; border-radius: 14px; padding: 6px; gap: 4px; }
.nav a { color: #e9e7ef; font: 700 14px/1 var(--font); letter-spacing: .02em; padding: 10px 14px; border-radius: 10px; }
.nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav a.active { background: var(--accent-pink); color: #fff; }
:root[data-theme="dark"] .nav, body.always-dark .nav { background: #1c1c24; box-shadow: inset 0 0 0 1px #2e2e38; }

/* Buttons: as in Classroom — ink, rounded, Open Sans bold */
.btn { font: 700 14px/1.2 var(--font); letter-spacing: .01em; border-radius: 10px; border: 1.5px solid var(--border-strong); padding: 11px 18px; }
.btn-primary { background: var(--text); color: var(--bg-card); border-color: var(--text); }
.btn-primary:hover { background: var(--accent-pink); border-color: var(--accent-pink); color: #fff; }
.btn-secondary { background: var(--bg-card); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-elev); }
.btn-ghost { border-color: transparent; }
.pill.active { background: var(--text); color: var(--bg-card); border-color: var(--text); }

/* Headings: Anton, uppercase */
.section-title, .home-h1, .home-section-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
.section-title { font-size: 2.1rem; line-height: 1.05; }
.home-hero { text-align: left; margin: 6px 0 26px; }
.home-h1 { font-size: clamp(40px, 6vw, 64px); line-height: .95; margin: 0 0 10px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); }
.home-h1 em { font-style: normal; color: var(--accent-pink); }
.home-sub { font-weight: 700; font-size: 16px; color: var(--text); }
.home-section-title { font-size: 28px; color: var(--text); margin: 34px 0 14px; }
.hub-more { font-family: var(--font); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-pink); }

/* Cards: off-white, 18px corners, a 2px outline in the card's own colour */
.product-card, .studio-card, .extra-card {
  background: var(--bg-card); border: 2px solid var(--card-accent, var(--accent-pink)); border-radius: 18px;
  box-shadow: var(--shadow);
}
.product-card::before, .studio-card::before { display: none; }
.product-card:hover, .studio-card:hover, .extra-card:hover { border-color: var(--card-accent, var(--accent-pink)); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.product-card { padding: 28px; }
.product-classroom { --product-accent: var(--accent-pink);   --card-accent: var(--accent-pink); }
.product-studio    { --product-accent: var(--accent-purple); --card-accent: var(--accent-purple); }
.product-skills    { --product-accent: var(--accent-green);  --card-accent: var(--accent-green); }
.studio-dj       { --studio-accent: var(--accent-purple); --card-accent: var(--accent-purple); }
.studio-producer { --studio-accent: var(--accent-pink);   --card-accent: var(--accent-pink); }
.studio-score    { --studio-accent: var(--accent-green);  --card-accent: var(--accent-green); }
.studio-notation { --studio-accent: var(--accent-blue);   --card-accent: var(--accent-blue); }
.studio-looper   { --studio-accent: var(--accent-amber);  --card-accent: var(--accent-amber); }
.studio-play     { --studio-accent: var(--accent-green);  --card-accent: var(--accent-green); }
.studio-skills   { --studio-accent: var(--accent-pink);   --card-accent: var(--accent-pink); }
.studio-games    { --studio-accent: var(--accent-purple); --card-accent: var(--accent-purple); }
.extra-showcase  { --card-accent: var(--accent-pink); }
.extra-piano     { --card-accent: var(--accent-purple); }
.extra-world     { --card-accent: var(--accent-green); }

/* Icon tile: a rounded square tinted in the card's colour */
.product-emoji, .studio-emoji, .extra-emoji {
  display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--card-accent, var(--accent-pink)) 14%, transparent);
  border-radius: 18px; line-height: 1;
}
.product-emoji { width: 66px; height: 66px; font-size: 34px; margin-bottom: 18px; }
.studio-emoji { width: 58px; height: 58px; font-size: 30px; margin-bottom: 14px; }
.extra-emoji { width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }

/* Card text: Anton titles, bold muted body, small uppercase call to action */
.product-card h2, .studio-card h3, .extra-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; color: var(--text); line-height: 1; }
.product-card h2 { font-size: clamp(30px, 3.2vw, 42px); margin: 0 0 10px; }
.studio-card h3 { font-size: 30px; margin: 0 0 8px; }
.extra-card h3 { font-size: 22px; margin: 0 0 4px; }
.product-card p, .studio-card p, .extra-card p { font-weight: 600; color: var(--text-dim); }
.product-cta, .studio-cta { font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--card-accent, var(--accent-pink)); }
.product-list li { background: var(--bg-elev); border-color: var(--border); color: var(--text); font-weight: 700; }

/* Project tiles and lesson cards: same corners */
.proj-tile { border-radius: 18px; }
.lesson-card { border-radius: 14px; }

/* Dark theme: cards sit on the near-black board like Classroom's */
:root[data-theme="dark"] .product-card, :root[data-theme="dark"] .studio-card, :root[data-theme="dark"] .extra-card { background: rgba(24,24,32,.72); }
:root[data-theme="dark"] .site-header { background: var(--bg); }
@media (max-width: 720px) {
  .nav { width: 100%; justify-content: space-between; }
  .nav a { padding: 9px 10px; font-size: 13px; }
}

/* Anton has one weight: never fake a bold version of it */
html{font-synthesis-weight:none;}

/* Classroom look: flat colours instead of colour fades */
.hero h1, .big-letter, .soon-card h1, .cc-freeze-icon {
  background: none; -webkit-text-fill-color: currentColor; color: var(--text);
}
.big-letter { color: var(--accent-pink); }
.cc-freeze-icon { color: var(--accent-pink); }
.quiz-cta, .teach-cta, .stem-promo, .t-id-card, .cmp-remix-banner {
  background: var(--bg-card); border: 2px solid var(--accent-pink); border-radius: 18px; box-shadow: var(--shadow);
}
.teach-cta { border-color: var(--accent-purple); }
.stem-promo { border-color: var(--accent-purple); }
.uke-stage-v2 .uke-chord-cell.active .uke-chord-name { background: var(--accent-pink); box-shadow: none; }
.sb-step-num { background: var(--accent-purple); }
.uke-progress-fill, .proj-progress-bar { background: var(--accent-pink); }
.stale-banner, .cc-focus-bar { background: var(--accent-purple); }
.cc-eye-bar { background: #d02a5b; }
.btn-danger { background: var(--accent-pink); border: 1.5px solid var(--accent-pink); color: #fff; }
.btn-danger:hover { filter: none; background: #d02a5b; border-color: #d02a5b; }
.who-h1, .soon-card h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; font-size: 34px; }

/* Quiz, lesson and song cards: each a card of its own with a thin line in its
   colour (data-c from the list scripts: 0 pink, 1 purple, 2 green, 3 blue).
   Hover lifts the card with a shadow; the background stays the same. */
.lesson-grid { gap: 16px; border: 0; }
.lesson-card {
  --card-accent: var(--accent-pink);
  background: var(--bg-card);
  border: 1.5px solid var(--card-accent);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(70,50,20,.06);
  transition: transform .15s, box-shadow .15s;
}
.lesson-card[data-c="1"] { --card-accent: var(--accent-purple); }
.lesson-card[data-c="2"] { --card-accent: var(--accent-green); }
.lesson-card[data-c="3"] { --card-accent: var(--accent-blue); }
.lesson-card .tag,
.lesson-card:nth-child(3n+2) .tag,
.lesson-card:nth-child(3n+3) .tag { color: var(--card-ink, var(--card-accent)); font-weight: 700; }
/* darker text versions on the cream background so the small labels stay readable */
:root:not([data-theme="dark"]) .lesson-card[data-c="0"] { --card-ink: #c4245a; }
:root:not([data-theme="dark"]) .lesson-card[data-c="2"] { --card-ink: #127f4a; }
.lesson-card:hover {
  background: var(--bg-card); border-color: var(--card-accent);
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.lesson-grid > .empty { border-radius: 14px; }
:root[data-theme="dark"] .lesson-card { background: rgba(24,24,32,.72); box-shadow: none; }
:root[data-theme="dark"] .lesson-card:hover { background: rgba(24,24,32,.72); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .lesson-card, .lesson-card:hover { transition: none; transform: none; } }
/* phones: the two-row menu scrolls away instead of covering a quarter of the screen */
@media (max-width: 720px) { .site-header { position: static; } }

/* Home page cards: a small moving picture in the top corner (like Classroom's cards).
   Classroom: desks lighting up in turn. Studio: a spinning record. Skills: keys playing a scale. */
.prod-mo { position: absolute; top: 28px; right: 28px; width: 84px; height: 66px; pointer-events: none; }
.product-card.is-locked .prod-mo { display: none; }
/* staff-only products (Mix-Ed Classroom) hidden from pupils — module-access.js */
.ma-staff-only { display: none !important; }

/* Classroom: the board at the front, six desks lighting up one after another */
.mo-desks { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 8px 1fr 1fr; gap: 6px; padding: 2px 4px; }
.mo-desks i { grid-column: 1 / -1; border-radius: 4px; background: color-mix(in srgb, var(--card-accent) 35%, transparent); }
.mo-desks b { border-radius: 5px; background: color-mix(in srgb, var(--card-accent) 18%, transparent); animation: moDesk 3.6s steps(1) infinite; }
.mo-desks b:nth-of-type(2) { animation-delay: .6s; }
.mo-desks b:nth-of-type(3) { animation-delay: 1.2s; }
.mo-desks b:nth-of-type(6) { animation-delay: 1.8s; }
.mo-desks b:nth-of-type(5) { animation-delay: 2.4s; }
.mo-desks b:nth-of-type(4) { animation-delay: 3s; }
@keyframes moDesk { 0% { background: var(--card-accent); } 16.66%, 100% { background: color-mix(in srgb, var(--card-accent) 18%, transparent); } }

/* Studio: a record spinning under the tonearm */
.mo-vinyl b {
  position: absolute; left: 4px; top: 0; width: 62px; height: 62px; border-radius: 50%;
  background: repeating-radial-gradient(circle, #18181d 0 2px, #2c2c35 2px 3px);
  box-shadow: 0 0 0 1px var(--border);
  animation: moSpin 1.8s linear infinite;
}
/* the label: two colours so you can see it turning, and the hole in the middle */
.mo-vinyl b::after {
  content: ""; position: absolute; inset: 19px; border-radius: 50%;
  background:
    radial-gradient(circle, var(--bg-card) 0 2.5px, transparent 3px),
    conic-gradient(var(--card-accent) 0 50%, color-mix(in srgb, var(--card-accent) 55%, #fff) 0 100%);
}
.mo-vinyl i {
  position: absolute; right: 6px; top: 4px; width: 4px; height: 40px; border-radius: 2px;
  background: var(--text-dim); transform-origin: 50% 3px; transform: rotate(28deg);
}
.mo-vinyl i::before { content: ""; position: absolute; left: -4px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-dim); }
.mo-vinyl i::after { content: ""; position: absolute; left: -2px; bottom: -4px; width: 8px; height: 9px; border-radius: 2px; background: var(--card-accent); }
@keyframes moSpin { to { transform: rotate(360deg); } }

/* Skills: five keys playing up a scale, a note floating up */
.mo-keys b { position: absolute; bottom: 0; width: 17px; height: 44px; border: 1.5px solid var(--border); border-radius: 0 0 4px 4px; background: #fff; animation: moKey 3s steps(1) infinite; }
.mo-keys b:nth-of-type(1) { left: 0; }
.mo-keys b:nth-of-type(2) { left: 16px; animation-delay: .6s; }
.mo-keys b:nth-of-type(3) { left: 32px; animation-delay: 1.2s; }
.mo-keys b:nth-of-type(4) { left: 48px; animation-delay: 1.8s; }
.mo-keys b:nth-of-type(5) { left: 64px; animation-delay: 2.4s; }
.mo-keys i { position: absolute; bottom: 19px; width: 10px; height: 25px; border-radius: 0 0 3px 3px; background: #15151a; z-index: 1; }
.mo-keys i:nth-of-type(1) { left: 12px; }
.mo-keys i:nth-of-type(2) { left: 28px; }
.mo-keys i:nth-of-type(3) { left: 60px; }
.mo-keys em { position: absolute; left: 30px; top: -4px; font-style: normal; font-weight: 800; font-size: 18px; line-height: 1; color: var(--card-accent); animation: moNote 1.5s ease-out infinite; }
@keyframes moKey { 0% { background: var(--card-accent); border-color: var(--card-accent); } 20%, 100% { background: #fff; border-color: var(--border); } }
@keyframes moNote { 0% { transform: translate(0, 10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(14px, -6px); opacity: 0; } }

@media (max-width: 400px) { .prod-mo { top: 24px; right: 20px; transform: scale(.85); transform-origin: top right; } }
@media (prefers-reduced-motion: reduce) {
  .prod-mo, .prod-mo * { animation: none !important; }
  .mo-keys em { opacity: 0; }
}

/* Card icons: line icons in the card's colour on a soft tile, as in Classroom */
.product-emoji, .studio-emoji, .extra-emoji { color: var(--card-accent, var(--accent-pink)); }
.product-emoji { width: 62px; height: 62px; }
.product-emoji svg { width: 32px; height: 32px; }
.studio-emoji svg { width: 30px; height: 30px; }
.extra-emoji svg { width: 26px; height: 26px; }
:root[data-theme="dark"] .product-emoji, :root[data-theme="dark"] .studio-emoji, :root[data-theme="dark"] .extra-emoji {
  background: color-mix(in srgb, var(--card-accent, var(--accent-pink)) 22%, transparent);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--card-accent, var(--accent-pink)) 70%, transparent);
}
/* the moving picture lines up with the 62px icon tile */
.prod-mo { height: 62px; }

/* Studio and Skills & Games cards: small moving pictures too.
   Studio-card pictures sit in the top corner beside the icon; extra-card ones on the right. */
.card-mo { position: absolute; pointer-events: none; }
.studio-card .card-mo { top: 28px; right: 24px; width: 76px; height: 58px; }
.extra-card { position: relative; }
.extra-card.has-mo { padding-right: 112px; }
.extra-card .card-mo { right: 22px; top: 50%; margin-top: -22px; width: 72px; height: 44px; }
.is-locked .card-mo { display: none; }
@media (max-width: 560px) { .extra-card .card-mo { display: none; } .extra-card.has-mo { padding-right: 20px; } }

/* a record: grooves, and a two-colour label so you can see it turn */
.mo-disc { position: absolute; border-radius: 50%; background: repeating-radial-gradient(circle, #18181d 0 1.5px, #2c2c35 1.5px 2.5px); box-shadow: 0 0 0 1px var(--border); animation: moSpin 1.8s linear infinite; }
.mo-disc::after { content: ""; position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle, var(--bg-card) 0 1.5px, transparent 2px), conic-gradient(var(--card-accent) 0 50%, color-mix(in srgb, var(--card-accent) 55%, #fff) 0 100%); }

/* DJ Studio: two decks spinning, the crossfader sliding between them */
.mo-decks .mo-disc { top: 0; width: 32px; height: 32px; }
.mo-decks .mo-disc:nth-child(1) { left: 0; }
.mo-decks .mo-disc:nth-child(2) { right: 0; animation-duration: 2.3s; }
.mo-decks i { position: absolute; left: 14px; right: 14px; top: 46px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--card-accent) 25%, transparent); }
.mo-decks em { position: absolute; left: 14px; top: 41px; width: 10px; height: 14px; border-radius: 3px; background: var(--card-accent); animation: moFader 2.4s ease-in-out infinite alternate; }
@keyframes moFader { to { transform: translateX(38px); } }

/* Producer Lab: a beat grid with the playhead stepping across it */
.mo-steps { display: grid; grid-template-columns: repeat(6, 10px); grid-auto-rows: 10px; gap: 3px; align-content: center; justify-content: end; }
.mo-steps b { border-radius: 3px; background: color-mix(in srgb, var(--card-accent) 18%, transparent); }
.mo-steps b.on { background: var(--card-accent); }
.mo-steps i { position: absolute; left: -1px; top: 8px; width: 14px; height: 42px; border: 2px solid var(--text); border-radius: 4px; animation: moPlayhead 2.4s steps(6) infinite; }
@keyframes moPlayhead { to { transform: translateX(78px); } }

/* Score Studio: a filmstrip rolling past, the REC light blinking */
.mo-film b {
  position: absolute; left: 0; right: 0; top: 16px; height: 34px; border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.85) 0 4px, transparent 4px) 0 4px / 8px 4px repeat-x,
    linear-gradient(90deg, rgba(255,255,255,.85) 0 4px, transparent 4px) 0 26px / 8px 4px repeat-x,
    linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 75%, #fff) 0 20px, transparent 20px) 2px 10px / 24px 14px repeat-x,
    #15151a;
  box-shadow: 0 0 0 1px var(--border);
  animation: moFilm 1.2s linear infinite;
}
@keyframes moFilm { to { background-position: -24px 4px, -24px 26px, -22px 10px; } }
.mo-film i { position: absolute; right: 0; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: #e43a6c; animation: moRec 1.2s steps(1) infinite; }
.mo-film i::before { content: "REC"; position: absolute; right: 12px; top: -1px; font: 800 9px/1 var(--font); letter-spacing: .08em; color: var(--text-dim); }
@keyframes moRec { 50% { opacity: .2; } }

/* Notation: a stave, notes popping onto it one after another */
.mo-stave i { position: absolute; left: 0; right: 0; top: 12px; height: 33px; background: repeating-linear-gradient(to bottom, var(--text-dim) 0 1px, transparent 1px 8px); opacity: .55; }
.mo-stave b { position: absolute; width: 10px; height: 8px; border-radius: 50%; background: var(--card-accent); transform: scale(0); animation: moNote 3.2s ease-out infinite; }
.mo-stave b::after { content: ""; position: absolute; right: 0; bottom: 4px; width: 2px; height: 22px; background: var(--card-accent); }
.mo-stave b:nth-child(2) { left: 6px;  top: 40px; }
.mo-stave b:nth-child(3) { left: 26px; top: 32px; animation-delay: .4s; }
.mo-stave b:nth-child(4) { left: 46px; top: 24px; animation-delay: .8s; }
.mo-stave b:nth-child(5) { left: 64px; top: 28px; animation-delay: 1.2s; }
@keyframes moNote { 0% { transform: scale(0); } 8%, 80% { transform: scale(1); } 100% { transform: scale(0); } }

/* Looper: a loop going round, the pedal's light, and layers stacking up */
.mo-loop b { position: absolute; right: 2px; top: 2px; width: 54px; height: 54px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--card-accent) 25%, transparent); }
.mo-loop b::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--card-accent); border-right-color: var(--card-accent); animation: moSpin 1.6s linear infinite; }
.mo-loop i { position: absolute; right: 19px; top: 19px; width: 20px; height: 20px; border-radius: 50%; background: #e43a6c; box-shadow: 0 0 10px #e43a6c; animation: moLoopLed 4.8s steps(1) infinite; }
.mo-loop em { position: absolute; left: 0; bottom: 4px; width: 14px; height: 6px; border-radius: 2px; background: var(--card-accent); animation: moLayers 4.8s steps(1) infinite; }
@keyframes moLoopLed { 0% { background: #e43a6c; box-shadow: 0 0 10px #e43a6c; } 33%, 100% { background: #1fa463; box-shadow: 0 0 10px #1fa463; } }
@keyframes moLayers { 0% { box-shadow: none; } 33% { box-shadow: 0 -9px 0 var(--accent-blue); } 66%, 100% { box-shadow: 0 -9px 0 var(--accent-blue), 0 -18px 0 var(--accent-pink); } }
@media (prefers-reduced-motion: reduce) { .mo-loop b::after { animation: none; } }

/* Showcase: level bars bouncing, a track playing */
.mo-eq { display: flex; align-items: flex-end; justify-content: center; gap: 5px; }
.mo-eq b { width: 7px; height: 100%; border-radius: 4px; background: var(--card-accent); transform-origin: bottom; animation: moEq 1.1s ease-in-out infinite alternate; }
.mo-eq b:nth-child(2) { animation-delay: -.3s; opacity: .75; }
.mo-eq b:nth-child(3) { animation-delay: -.7s; }
.mo-eq b:nth-child(4) { animation-delay: -.15s; opacity: .75; }
.mo-eq b:nth-child(5) { animation-delay: -.5s; }
@keyframes moEq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* Skills Hub: a stopwatch counting down (the 60-second quizzes) */
@property --mo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mo-watch b {
  position: absolute; left: 16px; top: 8px; width: 48px; height: 48px; border-radius: 50%;
  background: conic-gradient(color-mix(in srgb, var(--card-accent) 18%, transparent) var(--mo-a), var(--card-accent) 0);
  -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px); mask: radial-gradient(circle, transparent 17px, #000 18px);
  animation: moWatchRing 6s linear infinite;
}
@keyframes moWatchRing { from { --mo-a: 0deg; } to { --mo-a: 360deg; } }
.mo-watch i { position: absolute; left: 38.5px; top: 17px; width: 3px; height: 15px; border-radius: 2px; background: var(--text); transform-origin: 50% 100%; animation: moSpin 6s linear infinite; }
.mo-watch em { position: absolute; left: 35px; top: 1px; width: 10px; height: 6px; border-radius: 2px; background: var(--card-accent); }

/* Music Games: notes dropping onto the hit line, as in Key Strike */
.mo-drop i { position: absolute; left: 6px; right: 6px; top: 44px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--card-accent) 50%, transparent); }
.mo-drop b { position: absolute; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--card-accent); opacity: 0; animation: moDrop 1.8s linear infinite; }
.mo-drop b:nth-of-type(1) { left: 14px; }
.mo-drop b:nth-of-type(2) { left: 32px; animation-delay: -.6s; }
.mo-drop b:nth-of-type(3) { left: 50px; animation-delay: -1.2s; }
@keyframes moDrop {
  0% { transform: translateY(-12px); opacity: 0; }
  10% { opacity: 1; }
  75% { transform: translateY(39px) scale(1); opacity: 1; }
  90%, 100% { transform: translateY(39px) scale(1.8); opacity: 0; }
}

/* Songbook: ukulele strings plucked in turn, a C chord on the bottom string */
.mo-strings::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--text-dim); }
.mo-strings::after { content: ""; position: absolute; left: 8px; right: 0; top: 6px; bottom: 6px; background: repeating-linear-gradient(90deg, transparent 0 20px, var(--border) 20px 22px); }
.mo-strings b { position: absolute; left: 4px; right: 0; height: 2px; border-radius: 1px; background: var(--text-dim); z-index: 1; animation: moPluck 2.4s linear infinite; }
.mo-strings b:nth-of-type(1) { top: 13px; }
.mo-strings b:nth-of-type(2) { top: 24px; animation-delay: .6s; }
.mo-strings b:nth-of-type(3) { top: 35px; animation-delay: 1.2s; }
.mo-strings b:nth-of-type(4) { top: 46px; animation-delay: 1.8s; }
.mo-strings em { position: absolute; left: 56px; top: 42.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--card-accent); z-index: 2; }
@keyframes moPluck {
  0% { transform: translateY(0); background: var(--card-accent); }
  2% { transform: translateY(-2px); } 4% { transform: translateY(2px); }
  6% { transform: translateY(-1.5px); } 8% { transform: translateY(1.5px); }
  10% { transform: translateY(-1px); } 12% { transform: translateY(1px); }
  14% { transform: translateY(0); background: var(--card-accent); }
  22%, 100% { transform: none; background: var(--text-dim); }
}

/* Piano Visualiser: notes falling onto the keys, in two colours for two hands */
.mo-fall { overflow: hidden; border-radius: 4px; }
.mo-fall i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 1;
  border: 1px solid #c9c2b0; border-top: 2px solid var(--card-accent); border-radius: 0 0 3px 3px;
  background:
    linear-gradient(#15151a, #15151a) 10px 0 / 8px 8px no-repeat,
    linear-gradient(#15151a, #15151a) 24px 0 / 8px 8px no-repeat,
    linear-gradient(#15151a, #15151a) 52px 0 / 8px 8px no-repeat,
    repeating-linear-gradient(90deg, #fff 0 13px, #c9c2b0 13px 14px);
}
.mo-fall b { position: absolute; top: 0; width: 10px; height: 12px; border-radius: 3px; background: var(--card-accent); animation: moFall 1.6s linear infinite; }
.mo-fall b:nth-of-type(1) { left: 2px; }
.mo-fall b:nth-of-type(2) { left: 31px; height: 14px; background: var(--accent-pink); animation-delay: -.5s; }
.mo-fall b:nth-of-type(3) { left: 45px; height: 10px; animation-delay: -1s; }
.mo-fall b:nth-of-type(4) { left: 60px; background: var(--accent-pink); animation-delay: -1.3s; }
@keyframes moFall { from { transform: translateY(-16px); } to { transform: translateY(30px); } }

/* World Music: the globe turning */
.mo-globe b {
  position: absolute; left: 16px; top: 1px; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--card-accent);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(7px 5px at 8px 13px, var(--card-accent) 95%, transparent 100%) 0 0 / 30px 42px repeat-x,
    radial-gradient(5px 8px at 22px 25px, var(--card-accent) 95%, transparent 100%) 0 0 / 30px 42px repeat-x,
    radial-gradient(4px 3px at 13px 32px, var(--card-accent) 95%, transparent 100%) 0 0 / 30px 42px repeat-x,
    color-mix(in srgb, var(--card-accent) 14%, transparent);
  animation: moGlobe 3s linear infinite;
}
@keyframes moGlobe { to { background-position: 0 0, 30px 0, 30px 0, 30px 0; } }

@media (prefers-reduced-motion: reduce) {
  .card-mo, .card-mo *, .card-mo .mo-disc { animation: none !important; }
  .mo-drop b { opacity: 1; transform: translateY(20px); }
}

/* Quiz, lesson and song cards in the same style as the hub cards: a line icon on a soft tile,
   Anton capitals for the title, Open Sans for the words, a coloured link at the bottom. */
.lesson-card { display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 18px; }
.qc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 54px; }
.qc-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 14%, transparent);
}
.qc-ico svg { width: 24px; height: 24px; }
:root[data-theme="dark"] .qc-ico {
  background: color-mix(in srgb, var(--card-accent) 22%, transparent);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--card-accent) 70%, transparent);
}
.lesson-card .tag { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1.3; }
.lesson-card h3 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 24px; line-height: 1.05; letter-spacing: .005em; color: var(--text); margin: 0 0 8px;
}
.lesson-card p { font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--text-dim); margin: 0 0 16px; }
.lesson-card .meta { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); }
.qc-cta { margin-top: auto; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink, var(--card-accent)); }
.lesson-card .complete-badge { top: 20px; right: 20px; font-weight: 800; }

/* Quiz start screen: the "watch first" warm-up video */
.quiz-video { margin: 18px 0 22px; padding: 16px; background: var(--bg-card); border: 1.5px solid var(--accent-pink); border-radius: 18px; box-shadow: var(--shadow); max-width: 820px; }
.quiz-video-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-pink); margin-bottom: 10px; }
.quiz-video .video-wrap { margin: 0; }
/* the tall (9:16) phone version of a quiz video (game.js): as wide as fits, but never taller than most of the screen */
.video-wrap.is-portrait { padding-bottom: 0; height: auto; aspect-ratio: 9 / 16; width: min(100%, calc(78vh * 9 / 16)); margin-left: auto; margin-right: auto; }
.quiz-video-sub { margin: 10px 0 0; font-weight: 600; font-size: 14px; color: var(--text-dim); }
#start-btn.pulse-ready { animation: startPulse 1.2s ease-in-out 3; }
@keyframes startPulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-pink) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { #start-btn.pulse-ready { animation: none; outline: 3px solid var(--accent-pink); } }

/* Teacher page → Pupils' pieces (Notation) */
.nt-list { overflow-x: auto; }
.nt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nt-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.nt-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.nt-table a { font-weight: 700; color: var(--accent-blue); }
.nt-fbbtn { padding: 4px 10px; font-weight: 700; }
.nt-fbrow td { background: var(--bg-elev); }
.nt-fbbox { max-width: 640px; }

/* Notation feedback box (assets/js/notation-feedback.js): Teacher page and beside a piece */
.nfb-h { margin: 0 0 10px; font: 400 20px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.nfb-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.nfb-list li { padding: 10px 12px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); }
.nfb-body { font-size: 14.5px; line-height: 1.5; }
.nfb-meta { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.nfb-link { border: 0; background: none; padding: 0; color: var(--accent-blue); font: 700 12px var(--font); cursor: pointer; }
.nfb-msg { margin: 0 0 10px; color: var(--text-dim); font-size: 14px; }
.nfb-in { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: 500 14px/1.45 var(--font); resize: vertical; }
.nfb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.nfb-st { font-size: 13px; font-weight: 700; color: var(--text-dim); }

/* ============================================================
   Menu as icons (10 Oct 2026): an icon for each part of the site, and the
   round button with lines (as in Classroom's app bar) that opens a list of
   them by name. Markup in each page's header; assets/js/nav.js opens it.
   ============================================================ */
/* the MIX-ED tag never squashes onto two lines */
.brand { flex: none; }
.brand::before { white-space: nowrap; }
.nav.nav-icons { position: relative; align-items: center; flex-wrap: nowrap; margin-left: 0; }   /* next to the logo; the name chip and light/dark button stay right */
.nav-icons .ic { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-icons .nav-menu {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px;
  border-radius: 50%; border: 2.5px solid #fff; background: transparent; color: #fff; cursor: pointer;
}
.nav-icons .nav-menu[aria-expanded="true"] { background: #fff; color: #111; }
.nav-icons > a { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 10px; }
.nav-pop {
  position: absolute; left: 6px; top: calc(100% + 8px); z-index: 60;
  display: flex; flex-direction: column; gap: 2px; min-width: 230px; padding: 8px;
  border-radius: 16px; background: #111114; box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.nav-pop[hidden] { display: none; }
.nav-pop a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #f4f4f6; font: 700 15px/1.2 var(--font); text-decoration: none; }
.nav-pop a .ic { width: 20px; height: 20px; }
.nav-pop a:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-pop a.active { background: var(--accent-pink); color: #fff; }
@media (max-width: 720px) {
  .nav.nav-icons { width: auto; justify-content: flex-start; }
  .nav-icons > a { width: 38px; height: 38px; }
}
@media (max-width: 480px) {   /* eight icons and the menu button still fit across a phone */
  .nav-icons > a { width: 31px; height: 36px; border-radius: 8px; }
  .nav-icons .ic { width: 20px; height: 20px; }
  .nav-icons .nav-menu { width: 36px; height: 36px; margin-right: 2px; }
}

/* Songbook own songs (12 Oct 2026): Vocals On / Quieter / Off, and the words as subtitles */
.uke-vocals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.uke-vocals > label { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); }
.uke-vocals-note { color: var(--text-dim); font-size: 0.88rem; flex: 1 1 260px; }
.uke-vocals-bar { flex: 1 0 100%; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.uke-vocals-bar > span { display: block; height: 100%; width: 0; background: var(--accent-pink); transition: width 0.3s; }
.uke-vocals-bar[hidden] { display: none; }
.uke-subs { margin: 14px auto 0; max-width: 1100px; padding: 14px 22px 12px; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.uke-sub-now { font-size: clamp(1.3rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1.3; color: var(--text); }
.uke-sub-next { margin-top: 4px; font-size: clamp(0.95rem, 1.5vw, 1.3rem); line-height: 1.3; color: var(--text-dim); opacity: 0.75; }
body.uke-board .uke-sub-now { font-size: clamp(1.8rem, 3.4vw, 3.4rem); }
body.uke-board .uke-sub-next { font-size: clamp(1.2rem, 2vw, 2rem); }
.uke-words { margin: 18px 0 8px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, var(--bg-elev)); }
.uke-words-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 10px; }
.uke-words-head h3 { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.2rem; }
.uke-words-show { font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
.uke-words-note { color: var(--text-dim); font-size: 0.85rem; flex: 1 1 280px; }
.uke-words textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); resize: vertical; }
.uke-words-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0; }
.uke-words-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.uke-words-auto .uke-words-hint { flex: 1 1 280px; }
.uke-words-draft { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg-elev); border-left: 4px solid var(--accent-pink); font-size: 0.92rem; line-height: 1.5; }
.uke-words-draft[hidden] { display: none; }
.uke-words-draft .btn-ghost-pill { margin-left: 6px; }
.uke-words-hint { color: var(--text-dim); font-size: 0.9rem; }
.uke-words-timing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.uke-words-tap { font-size: 1.05rem; padding: 12px 20px; max-width: 100%; text-align: left; }
.uke-words-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border-top: 1px solid var(--border); }
.uke-words-list li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.uke-words-list li.next { background: var(--bg-elev); box-shadow: inset 3px 0 0 var(--accent-pink); }
.uke-words-list li.untimed .uke-w-time, .uke-words-list li.untimed .uke-w-text { color: var(--text-dim); }
.uke-w-time { font-family: var(--font-display); font-size: 0.9rem; color: var(--text-dim); }
.uke-w-btns { display: inline-flex; gap: 4px; }
.uke-w-btns .btn-ghost-pill { padding: 4px 9px; }
.uke-w-btns .btn-ghost-pill:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 720px) {
  .uke-words-list li { grid-template-columns: 54px 1fr; }
  .uke-w-btns { grid-column: 1 / -1; }
}

/* Quiz set as a class task: the video is an optional recap below Start (19 Oct 2026) */
.quiz-recap { margin-top: 22px; }
.quiz-recap summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.quiz-recap summary::-webkit-details-marker { display: none; }
/* Teacher-only "Set for a class" on quiz cards */
.qc-set { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-dim); }
.qc-set:hover { border-color: var(--accent-pink); color: var(--accent-pink); }

/* Teacher page: School timetable editor (19 Oct 2026) */
.tt-months { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.tt-month { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tt-month.done { border-color: #0f766e; color: #0f766e; }
.tt-month.on { background: var(--accent-pink); border-color: var(--accent-pink); color: #fff; }
.tt-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tt-week { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--bg-card); }
.tt-week-date { font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.tt-week-ab { display: flex; gap: 4px; margin-bottom: 6px; }
.tt-L { min-width: 38px; padding: 4px 0; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); font: inherit; font-weight: 800; cursor: pointer; }
.tt-L.on { background: var(--accent-pink); border-color: var(--accent-pink); color: #fff; }
.tt-week-days { display: flex; gap: 4px; }
.tt-day { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elev); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tt-day.off { text-decoration: line-through; color: var(--text-muted); background: transparent; opacity: .6; }
.tt-grid { border-collapse: collapse; width: 100%; max-width: 760px; margin: 6px 0 4px; }
.tt-grid th, .tt-grid td { border: 1px solid var(--border); padding: 4px; text-align: center; }
.tt-grid th { font-size: 12px; font-weight: 800; background: var(--bg-elev); }
.tt-grid tbody th { text-align: left; width: 70px; }
.tt-grid tbody th small { display: block; font-weight: 600; color: var(--text-muted); }
.tt-cell { width: 100%; box-sizing: border-box; border: 0; background: transparent; font: inherit; font-weight: 700; text-align: center; padding: 6px 2px; color: var(--text); }
.tt-cell:focus { outline: 2px solid var(--accent-pink); border-radius: 6px; }
.tt-cell::placeholder { color: var(--text-muted); font-weight: 400; }
.tt-more { margin-top: 14px; }
.tt-more summary { cursor: pointer; font-weight: 700; color: var(--text-dim); }
.tt-periods { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.tt-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.tt-prow > span { min-width: 30px; font-weight: 800; }
.tt-prow .cc-input[type=time] { width: 120px; }
.tt-prow .cc-input[type=date] { width: 170px; }
.tt-prow .cc-select { width: auto; }
.tt-ovs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tt-ov { display: inline-flex; align-items: center; gap: 6px; }
.tt-ov-x { border: 0; background: none; cursor: pointer; color: var(--text-muted); }
.tt-ov-x:hover { color: var(--accent-pink); }

/* ============================================================================
   Quizzes, livened up (20 Oct 2026) — the Classroom treatment for the quiz side.
   Quizzes page: topic groups with a coloured heading, one card per series with
   Level pills and medals, and a scorecard at the top. Game page: a card-shaped
   stage, a streak cell, a time bar that goes amber then red, score pops, a shake
   on a wrong answer, a medal and confetti at the end. All additive.
   ============================================================================ */

/* ---- Quizzes page ---- */
.qz-grid { display: block; border: 0; }
.qz-group { margin: 0 0 30px; --card-accent: var(--accent-pink); }
.qz-group[data-c="1"] { --card-accent: var(--accent-purple); }
.qz-group[data-c="2"] { --card-accent: var(--accent-green); }
.qz-group[data-c="3"] { --card-accent: var(--accent-blue); }
.qz-group-h {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 0 0 10px;
  border-bottom: 3px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--text);
}
.qz-group-h .qc-ico { width: 40px; height: 40px; border-radius: 12px; }
.qz-group-h small { margin-left: auto; font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.qz-group-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.qz-card { position: relative; overflow: hidden; }
.qz-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--card-accent); opacity: .9; }
.qz-card.qz-done::after { content: "✓ All gold"; position: absolute; top: 14px; right: -34px; transform: rotate(35deg); background: #f4b400; color: #3a2a00; font: 800 10px/1 var(--font); letter-spacing: .06em; padding: 6px 40px; }
.qz-top-medal { margin-left: auto; font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.qz-levels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.qz-lvl {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text-dim);
  font: 800 12px/1 var(--font); letter-spacing: .04em; cursor: pointer; transition: transform .12s, border-color .12s, background .12s;
}
.qz-lvl:hover { transform: translateY(-2px); border-color: var(--card-accent); color: var(--text); }
.qz-lvl.next { border-color: var(--card-accent); color: var(--card-ink, var(--card-accent)); background: color-mix(in srgb, var(--card-accent) 10%, transparent); }
.qz-lvl.played { color: var(--text); }
.qz-lvl.bronze { border-color: #b87333; background: color-mix(in srgb, #b87333 14%, transparent); color: var(--text); }
.qz-lvl.silver { border-color: #8f98a3; background: color-mix(in srgb, #8f98a3 18%, transparent); color: var(--text); }
.qz-lvl.gold { border-color: #e2a600; background: color-mix(in srgb, #f4b400 22%, transparent); color: var(--text); }
.qz-secs { margin-left: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.lesson-card.qz-card:hover { transform: translateY(-4px) rotate(-.4deg); }

/* the scorecard */
.qs-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 22px; padding: 16px 18px;
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
}
.qs-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qs-stat > b { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--accent-pink); }
.qs-stat > span { font: 700 12px/1.3 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.qs-stat > a { font-weight: 800; font-size: 15px; color: var(--accent-purple); text-decoration: none; }
.qs-stat > a:hover { text-decoration: underline; }
.qs-medals { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
.qs-medals > b { font-size: 26px; }
.qs-medals > span { flex-basis: 100%; }
.qs-bar { display: block; height: 8px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; margin-top: 4px; }
.qs-bar u { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple)); border-radius: 999px; transition: width .6s ease; }

/* ---- Game page ---- */
.game-hud { position: relative; border-radius: 14px; overflow: visible; background: var(--bg-card); box-shadow: var(--shadow); border: 1.5px solid var(--border); }
.game-hud.three-cell { grid-template-columns: 1fr 1fr 1fr; max-width: 440px; }
.hud-cell { position: relative; }
.hud-streak .hud-value { color: var(--text-dim); transition: color .2s, transform .2s; }
.hud-streak .hud-value.hot { color: #f08a00; transform: scale(1.08); }
.hud-streak .hud-value.fire { color: #e43a6c; transform: scale(1.16); text-shadow: 0 0 14px rgba(228,58,108,.45); }
.hud-streak .hud-value.hot::after { content: "🔥"; font-size: .55em; margin-left: 2px; vertical-align: middle; }
.qz-sound { position: absolute; top: -12px; right: -12px; width: 30px; height: 30px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg-card); font-size: 15px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); padding: 0; }
.qz-sound.off { opacity: .55; }
.qz-timebar { height: 10px; border-radius: 999px; background: var(--bg-elev); max-width: 440px; margin: -18px 0 24px auto; overflow: hidden; border: 1px solid var(--border); }
.qz-timebar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-green), #5ad08a); transition: width 1s linear, background .3s; }
.qz-timebar i.amber { background: linear-gradient(90deg, #f4b400, #f7cd4f); }
.qz-timebar i.red { background: linear-gradient(90deg, #e43a6c, #ff6b8f); animation: qzBlink .5s steps(2) infinite; }
@keyframes qzBlink { 50% { opacity: .55; } }
.qz-pop { position: absolute; right: 10px; top: 4px; font: 800 18px/1 var(--font); pointer-events: none; animation: qzPop .9s ease-out forwards; }
.qz-pop.ok { color: var(--accent-green); }
.qz-pop.no { color: var(--accent-pink); }
@keyframes qzPop { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 20% { opacity: 1; transform: translateY(-4px) scale(1.2); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }
.game-stage { border: 1.5px solid var(--border); border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow); padding: 32px 16px; }
.game-stage.qz-shake { animation: qzShake .4s ease; }
@keyframes qzShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.opt-btn { border-width: 1.5px; border-radius: 12px; box-shadow: 0 2px 0 var(--border-strong); transition: background-color .15s, color .15s, transform .08s, box-shadow .08s, border-color .15s; }
.opt-btn:not(:disabled):hover { border-color: var(--accent-purple); transform: translateY(-2px); box-shadow: 0 4px 0 var(--border-strong); }
.opt-btn:not(:disabled):active { transform: translateY(1px); box-shadow: 0 0 0 var(--border-strong); }
.opt-btn.correct, .opt-btn.wrong { box-shadow: none; }
.opt-btn.correct { animation: flashCorrect .35s ease, qzBounce .5s ease; }
@keyframes qzBounce { 30% { transform: scale(1.12); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }
.game-feedback { font-size: 1.15rem; font-weight: 800; }
#qz-toast { position: fixed; left: 50%; top: 18%; transform: translate(-50%, -20px); padding: 14px 24px; border-radius: 999px; background: var(--accent-pink); color: #fff; font: 800 20px/1 var(--font); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; z-index: 60; }
#qz-toast.show { animation: qzToast 1.6s ease forwards; }
@keyframes qzToast { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }

/* result screen */
.qz-medal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; padding: 14px 18px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow); animation: qzIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.qz-medal.gold { border-color: #e2a600; background: linear-gradient(135deg, color-mix(in srgb, #f4b400 28%, var(--bg-card)), var(--bg-card)); }
.qz-medal.silver { border-color: #8f98a3; background: linear-gradient(135deg, color-mix(in srgb, #8f98a3 26%, var(--bg-card)), var(--bg-card)); }
.qz-medal.bronze { border-color: #b87333; background: linear-gradient(135deg, color-mix(in srgb, #b87333 22%, var(--bg-card)), var(--bg-card)); }
.qz-medal-icon { font-size: 44px; line-height: 1; animation: qzSpin .9s ease; }
.qz-medal-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 32px; line-height: 1; }
.qz-medal-streak, .qz-medal-best { padding: 6px 12px; border-radius: 999px; background: var(--accent-pink); color: #fff; font: 800 12px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.qz-medal-streak { background: #f08a00; }
.qz-medal-best.muted { background: var(--bg-elev); color: var(--text-dim); }
@keyframes qzIn { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: scale(1); } }
@keyframes qzSpin { 0% { transform: rotateY(0) scale(.4); } 100% { transform: rotateY(720deg) scale(1); } }
.qz-next { margin-left: auto; }
.qz-confetti { position: fixed; top: -14px; width: 10px; height: 14px; border-radius: 2px; z-index: 70; pointer-events: none; animation: qzFall linear forwards; }
@keyframes qzFall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  .qz-confetti, .game-stage.qz-shake, .qz-medal, .qz-medal-icon, .qz-timebar i.red, #qz-toast.show { animation: none; }
  .lesson-card.qz-card:hover, .qz-lvl:hover, .opt-btn:not(:disabled):hover { transform: none; }
}