/* =========================================================================
   PianoBoss — visual design system
   Palette: obsidian background, warm brass accent, piano ivory, ember red.
   Typography: Playfair Display (serif, brand) + Inter (UI).
   ========================================================================= */

/* Fonts load from index.html <head> (non-blocking) since 2026-11-01; the @import here chained them behind this file. */

:root {
  /* Core palette */
  --bg-0:        #08080c;       /* deepest background */
  --bg-1:        #0f0f16;       /* panel bg */
  --bg-2:        #181823;       /* elevated panel */
  --bg-3:        #22222f;       /* hover */
  --line:        rgba(201,165,90,0.12);

  /* Brass / gold — the PianoBoss signature */
  --brass:       #c9a55a;
  --brass-hi:    #e8c886;
  --brass-lo:    #8a6e3a;
  --brass-glow:  rgba(201,165,90,0.35);

  /* Piano-inspired */
  --ivory:       #f5ecd9;
  --ivory-warm:  #e6dcc3;
  --ebony:       #0c0c12;

  /* Level accents */
  --beginner:    #7fb069;     /* sage green */
  --intermed:    #5aa0d6;     /* sky blue */
  --advanced:    #b96ad6;     /* royal violet */

  /* Semantic */
  --text:        #ece5d5;
  --text-dim:    #98927f;
  --muted:       #6c6759;
  --success:     #7fb069;
  --error:       #e07b5a;

  /* Key colors */
  --white-key:            #f5ecd9;
  --white-key-active:     #ffe8a8;
  --white-key-target:     #bfe0ff;
  --white-key-correct:    #a6e0a6;
  --white-key-wrong:      #ffb3a3;
  --black-key:            #16161e;
  --black-key-active:     #c9a55a;
  --black-key-target:     #5aa0d6;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(ellipse 1200px 600px at 20% -10%, rgba(201,165,90,0.08), transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 110%, rgba(185,106,214,0.06), transparent 60%),
    var(--bg-0);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* =========================================================================
   Header
   ========================================================================= */
header {
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(10,10,16,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo {
  width: 38px; height: 38px;
  display: inline-block;
  position: relative;
}
.brand-logo img,
.brand-logo svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
h1.brand-name {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.5px;
  color: var(--ivory);
}
h1.brand-name span {
  color: var(--brass);
  font-style: italic;
  font-weight: 700;
}
h1 { /* fallback for old markup */
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.5px;
  color: var(--ivory);
}
h1 span { color: var(--brass); font-style: italic; font-weight: 700; }

nav { display: flex; gap: 4px; background: rgba(255,255,255,0.03); padding: 4px; border-radius: 10px; border: 1px solid var(--line); }
.nav-btn {
  padding: 8px 16px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font: 500 13px 'Inter', sans-serif;
  letter-spacing: 0.2px;
  transition: all 0.18s;
}
.nav-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav-btn.active {
  color: var(--ebony);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  box-shadow: 0 2px 10px var(--brass-glow);
}
.user-menu { display: flex; align-items: center; gap: 10px; }

/* =========================================================================
   Container + typography
   ========================================================================= */
.container { max-width: 1280px; margin: 0 auto; padding: 32px 40px 60px; }
h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ivory); }
h2 { font-size: 32px; margin: 0 0 8px 0; letter-spacing: 0.3px; }
h3 { font-size: 20px; margin: 0 0 10px 0; }

.view { display: none; }
.view.active { display: block; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20,20,28,0.95) 0%, rgba(12,12,18,0.95) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 56px 40px 44px;
  margin-bottom: 28px;
  text-align: center;
  overflow: hidden;
}
/* Faint keyboard pattern as hero background */
.hero::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(245,236,217,0.025) 60%, rgba(245,236,217,0.04) 100%),
    repeating-linear-gradient(90deg,
      rgba(245,236,217,0.03) 0,
      rgba(245,236,217,0.03) 44px,
      rgba(12,12,18,0.6) 44px,
      rgba(12,12,18,0.6) 46px);
  pointer-events: none;
  opacity: 0.7;
}
/* Decorative brass line above content */
.hero::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 26px;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  transform: translateX(-50%);
}
.hero h2 {
  font-size: 40px;
  letter-spacing: 0.3px;
  margin: 0 0 12px 0;
}
.hero p {
  color: var(--text-dim);
  margin: 0 0 30px 0;
  font-size: 15px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.stats {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.stat {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  padding: 18px 28px;
  border-radius: 12px;
  min-width: 150px;
  transition: all 0.2s;
}
.stat:hover { border-color: var(--brass-lo); transform: translateY(-1px); }
.stat .num {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--brass-hi);
  line-height: 1;
}
.stat .lbl {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 8px;
  font-weight: 500;
}

/* =========================================================================
   Track cards
   ========================================================================= */
.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}
.track-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px 24px;
  transition: all 0.25s;
  overflow: hidden;
}
.track-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity: 0.7;
}
.track-card:hover {
  border-color: rgba(201,165,90,0.3);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
/* Level-specific accent stripes */
.track-card:nth-child(1)::before { background: linear-gradient(90deg, transparent, var(--beginner), transparent); }
.track-card:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--intermed), transparent); }
.track-card:nth-child(3)::before { background: linear-gradient(90deg, transparent, var(--advanced), transparent); }

.track-card h3 {
  font-size: 24px;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.track-card .track-desc {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi));
  box-shadow: 0 0 10px var(--brass-glow);
  transition: width 0.5s ease;
}
.track-card:nth-child(1) .progress-fill { background: linear-gradient(90deg, #4d7d3d, var(--beginner)); box-shadow: 0 0 10px rgba(127,176,105,0.4); }
.track-card:nth-child(2) .progress-fill { background: linear-gradient(90deg, #376b95, var(--intermed)); box-shadow: 0 0 10px rgba(90,160,214,0.4); }
.track-card:nth-child(3) .progress-fill { background: linear-gradient(90deg, #7a4390, var(--advanced)); box-shadow: 0 0 10px rgba(185,106,214,0.4); }

.progress-text { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; }

.lesson-list { margin-top: 18px; }
.lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.lesson-item:hover {
  background: rgba(201,165,90,0.06);
  border-color: rgba(201,165,90,0.15);
  transform: translateX(2px);
}
.lesson-item.done {
  background: rgba(127,176,105,0.05);
}
.lesson-item.locked { opacity: 0.55; cursor: not-allowed; }
.lesson-item.locked:hover { background: rgba(255,255,255,0.02); transform: none; border-color: transparent; }
.lesson-item .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(236,229,213,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.lesson-item.done .check { background: var(--success); border-color: var(--success); color: var(--ebony); }
.lesson-item .info { flex: 1; min-width: 0; }
.lesson-item .title { font-size: 14px; font-weight: 500; color: var(--text); }
.lesson-item .meta {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 2px;
  font-weight: 600;
}

.pro-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--brass-hi), var(--brass-lo));
  color: var(--ebony);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 1.5px;
  vertical-align: middle;
  margin-left: 6px;
}

/* =========================================================================
   Trial banner (top of dashboard, 2026-10-11)
   ========================================================================= */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(201,165,90,0.35);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(201,165,90,0.14) 0%, rgba(12,12,18,0.4) 100%);
  font-size: 14px;
  color: var(--text);
}
.trial-banner strong { color: var(--brass-hi); }
.trial-banner .btn-sm { padding: 6px 14px; font-size: 13px; }
.trial-banner--urgent, .trial-banner--ended { border-color: rgba(232,127,90,0.6); background: linear-gradient(90deg, rgba(232,127,90,0.16) 0%, rgba(12,12,18,0.4) 100%); }
@media (max-width: 600px) {
  .trial-banner { font-size: 13px; padding: 8px 12px; }
  .trial-banner .btn-sm { width: 100%; }
}

/* =========================================================================
   Upgrade card
   ========================================================================= */
.upgrade-card {
  background: linear-gradient(135deg, rgba(201,165,90,0.08) 0%, rgba(12,12,18,0.4) 60%);
  border: 1px solid rgba(201,165,90,0.25);
  border-radius: 16px;
  padding: 28px 32px;
  margin-top: 24px;
  text-align: center;
}
.upgrade-card h3 { font-size: 22px; color: var(--brass-hi); margin-bottom: 8px; }
.upgrade-card p { color: var(--text-dim); margin: 0 0 16px 0; font-size: 14px; }

/* =========================================================================
   Info / prompt panel
   ========================================================================= */
.info-panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 20px;
  border-left: 3px solid var(--brass);
}
.info-panel h2 { font-size: 22px; margin: 0 0 8px 0; }
.info-panel p { margin: 0; color: var(--text-dim); line-height: 1.6; }

/* =========================================================================
   Lesson header & prompt
   ========================================================================= */
.lesson-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.lesson-header h2 { font-size: 26px; }

.lesson-prompt {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 28px;
  margin-bottom: 20px;
  text-align: center;
}
.lesson-prompt .big-note {
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  font-weight: 700;
  color: var(--brass-hi);
  margin: 14px 0;
  letter-spacing: 3px;
  text-shadow: 0 0 30px var(--brass-glow);
}
.lesson-prompt .instruction { color: var(--text-dim); font-size: 15px; }
.lesson-prompt .score {
  display: inline-block;
  background: rgba(201,165,90,0.08);
  border: 1px solid rgba(201,165,90,0.25);
  color: var(--brass-hi);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  margin-top: 12px;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.feedback {
  padding: 14px 18px;
  border-radius: 10px;
  margin-top: 18px;
  font-weight: 500;
  display: none;
  font-size: 14px;
}
.feedback.show { display: block; }
.feedback.correct { background: rgba(127,176,105,0.12); color: var(--success); border: 1px solid rgba(127,176,105,0.4); }
.feedback.wrong { background: rgba(224,123,90,0.12); color: var(--error); border: 1px solid rgba(224,123,90,0.4); }

.answer-choices {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.choice-btn {
  padding: 12px 26px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font: 500 15px 'Inter', sans-serif;
  min-width: 80px;
  transition: all 0.15s;
}
.choice-btn:hover {
  background: var(--bg-3);
  border-color: var(--brass);
  color: var(--brass-hi);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 20px;
  font: 500 14px 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.2px;
}
.btn:hover { background: var(--bg-3); border-color: var(--brass-lo); color: var(--brass-hi); }
.btn-primary {
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 100%);
  color: var(--ebony);
  border: 1px solid var(--brass);
  font-weight: 600;
  box-shadow: 0 2px 16px var(--brass-glow);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #f4d89a 0%, var(--brass-hi) 100%);
  color: var(--ebony);
  border-color: var(--brass-hi);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--brass-glow);
}

/* =========================================================================
   Level chips (Free Play range selector)
   ========================================================================= */
.level-selector { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 24px; }
.level-chip {
  padding: 9px 18px;
  background: var(--bg-2);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font: 500 13px 'Inter', sans-serif;
  transition: all 0.15s;
  letter-spacing: 0.2px;
}
.level-chip:hover { color: var(--text); border-color: var(--brass-lo); }
.level-chip.active {
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  color: var(--ebony);
  border-color: var(--brass);
  font-weight: 600;
}

/* =========================================================================
   Sound bank
   ========================================================================= */
.soundbank {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
}
.soundbank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.current-patch {
  color: var(--brass-hi);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
}
.categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-btn {
  padding: 8px 16px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: 500 12px 'Inter', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.cat-btn:hover { color: var(--text); border-color: var(--brass-lo); }
.cat-btn.active { color: var(--brass-hi); border-color: var(--brass); background: rgba(201,165,90,0.05); }
.patches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.patch-btn {
  padding: 12px 14px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: 500 13px 'Inter', sans-serif;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.15s;
}
.patch-btn:hover { background: var(--bg-3); border-color: var(--brass-lo); }
.patch-btn.active {
  background: linear-gradient(135deg, rgba(201,165,90,0.15), rgba(201,165,90,0.05));
  border-color: var(--brass);
  color: var(--brass-hi);
}
.patch-btn .engine {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

/* =========================================================================
   Falling notes (play-along)
   ========================================================================= */
.falling-stage {
  position: relative;
  height: 300px;
  background:
    linear-gradient(180deg, rgba(10,10,18,0.95) 0%, rgba(20,20,30,0.95) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.falling-note {
  position: absolute;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  border-radius: 4px;
  box-shadow: 0 0 14px var(--brass-glow), inset 0 1px 0 rgba(255,255,255,0.2);
  color: var(--ebony);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4px;
}
.falling-note.hit { background: linear-gradient(180deg, #9fd085, var(--success)); box-shadow: 0 0 16px rgba(127,176,105,0.5); }
.falling-note.miss { background: linear-gradient(180deg, var(--error), #b85a3f); opacity: 0.45; }
/* Hand-based coloring: right hand = gold/brass (default), left hand = blue */
.falling-note.hand-r { background: linear-gradient(180deg, var(--brass-hi), var(--brass)); box-shadow: 0 0 14px var(--brass-glow), inset 0 1px 0 rgba(255,255,255,0.2); }
.falling-note.hand-l { background: linear-gradient(180deg, #8ec5ff, #4a90e2); box-shadow: 0 0 14px rgba(74,144,226,0.5), inset 0 1px 0 rgba(255,255,255,0.2); color: #fff; }
/* hit and miss still override hand colors */
.falling-note.hand-l.hit, .falling-note.hand-r.hit { background: linear-gradient(180deg, #9fd085, var(--success)); box-shadow: 0 0 16px rgba(127,176,105,0.5); }
.falling-note.hand-l.miss, .falling-note.hand-r.miss { background: linear-gradient(180deg, var(--error), #b85a3f); opacity: 0.45; }
/* Hand legend shown above play-along controls */
.hand-legend { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; background: rgba(255,255,255,0.04); border-radius: 14px; font-size: 12px; color: var(--text-dim); }
.hand-legend .hand-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-left: 4px; }
.hand-legend .hand-swatch.hand-r { background: linear-gradient(180deg, var(--brass-hi), var(--brass)); }
.hand-legend .hand-swatch.hand-l { background: linear-gradient(180deg, #8ec5ff, #4a90e2); }
.hand-legend .hand-lbl { margin-right: 8px; }
.strike-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-hi) 20%, var(--brass-hi) 80%, transparent);
  box-shadow: 0 0 12px var(--brass-glow);
}

/* =========================================================================
   Piano
   ========================================================================= */
.piano-wrap {
  background: linear-gradient(180deg, #1a1a22 0%, #0c0c12 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px 16px;
  overflow-x: auto;
  box-shadow: inset 0 2px 20px rgba(0,0,0,0.5);
}
.piano {
  position: relative;
  display: flex;
  height: 220px;
  user-select: none;
  min-width: min-content;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
/* 2026-04-28: percentage-based responsive layout (Option A — final).
   .piano fills its grid column (1fr); white keys flex equally to fill .piano;
   black keys positioned by JS as % of .piano width. CSS handles all sizing —
   no JS clientWidth measurements needed, no padding-math edge cases. */
.piano { width: 100%; }
.piano .key.white { width: auto; flex: 1; min-width: 0; }
.piano .key.black { height: 60%; width: auto; }
/* 2026-04-28: subtle range label above the keyboard. Communicates auto-range
   choice without being visually loud. */
.piano-range-label {
  text-align: center;
  font-size: 11px;
  color: var(--brass-hi);
  opacity: 0.65;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 4px 0 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.key {
  position: relative;
  cursor: pointer;
  transition: background 0.06s, transform 0.06s;
}
.key.white {
  width: 52px;
  height: 100%;
  background: linear-gradient(180deg, var(--white-key) 0%, var(--ivory-warm) 100%);
  border: 1px solid #3a3529;
  border-radius: 0 0 5px 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 12px;
  color: #4a402c;
  font-size: 11px;
  font-weight: 500;
  box-shadow: inset 0 -2px 6px rgba(58,53,41,0.25);
}
.key.white:active,
.key.white.active { background: linear-gradient(180deg, var(--white-key-active), #fbd987); }
.key.white.target { background: linear-gradient(180deg, var(--white-key-target), #9fc7e8); }
.key.white.correct { background: linear-gradient(180deg, var(--white-key-correct), #7fc67f); }
.key.white.wrong { background: linear-gradient(180deg, var(--white-key-wrong), #e89080); }
.key.black {
  position: absolute;
  width: 32px;
  height: 130px;
  background: linear-gradient(180deg, #2a2a33 0%, var(--black-key) 100%);
  border-radius: 0 0 4px 4px;
  z-index: 2;
  color: #ddd;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.5), inset 0 -3px 2px rgba(201,165,90,0.1);
}
.key.black:active,
.key.black.active { background: linear-gradient(180deg, var(--brass-hi), var(--black-key-active)); color: var(--ebony); }
.key.black.target { background: linear-gradient(180deg, #8bc6ee, var(--black-key-target)); }
.key.black.correct { background: linear-gradient(180deg, #9fd085, var(--success)); }
.key.black.wrong { background: linear-gradient(180deg, var(--error), #b85a3f); }

.key-binding {
  font-size: 9px;
  color: rgba(0,0,0,0.35);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.key.black .key-binding { color: rgba(255,255,255,0.35); }
.note-label { font-weight: 600; font-size: 11px; }
/* Black-key dual labels: sharp name on top, flat name below, tighter size */
.key.black .note-label-dual {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  font-size: 9px;
  letter-spacing: 0;
}
.key.black .note-label-dual .nl-sharp,
.key.black .note-label-dual .nl-flat { display: block; }
.key.black .note-label-dual .nl-flat { opacity: 0.75; }

/* Piano controls */
.controls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 0 4px;
}
.controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}
.controls input[type="range"] { accent-color: var(--brass); }
.controls button {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font: 500 12px 'Inter', sans-serif;
  transition: all 0.15s;
}
.controls button:hover { border-color: var(--brass-lo); color: var(--brass-hi); }

/* =========================================================================
   Footer
   ========================================================================= */
footer {
  text-align: center;
  padding: 40px 20px 24px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--line);
  margin-top: 60px;
}

/* =========================================================================
   Auth modal
   ========================================================================= */
#auth-modal { display: none; }
#auth-modal.open { display: block; }
#auth-modal .auth-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
}
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,5,10,0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 36px 30px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  position: relative;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.auth-tabs { display: flex; gap: 6px; margin-bottom: 22px; background: rgba(255,255,255,0.03); padding: 4px; border-radius: 10px; }
.auth-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-radius: 7px;
  font: 500 14px 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}
.auth-tab.active {
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  color: var(--ebony);
  font-weight: 600;
}
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.auth-field input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font: 400 14px 'Inter', sans-serif;
  transition: all 0.15s;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-glow);
}
.auth-submit {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-size: 15px;
}
.auth-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none; border: none;
  color: var(--text-dim); font-size: 22px; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
}
.auth-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
/* Override when .auth-close is used as the full-width Cancel button (combined with .btn) */
.btn.auth-close {
  position: static;
  top: auto; right: auto;
  width: 100%;
  height: auto;
  border-radius: 10px;
  font-size: 14px;
  margin-top: 8px;
}
.auth-error { color: var(--error); font-size: 13px; margin-top: 8px; min-height: 18px; }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
}
.plan-label {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}
.user-chip:has(.plan-label):not(:has(.plan-label:contains("Pro"))) .plan-label { background: var(--bg-3); }
/* Pro plan label gets the brass treatment */
.user-chip .plan-label { background: var(--bg-3); color: var(--text-dim); }

/* =========================================================================
   Concept lesson styling
   ========================================================================= */
.concept { max-width: 720px; margin: 0 auto; text-align: left; }
.concept-block { margin: 20px 0; line-height: 1.7; color: var(--text); font-size: 15px; }
.concept h3 {
  font-family: 'Playfair Display', serif;
  margin-top: 28px;
  margin-bottom: 8px;
  color: var(--brass-hi);
  font-size: 22px;
}
.concept p { margin: 10px 0; }
.concept ul, .concept ol { padding-left: 22px; }
.concept li { margin: 6px 0; }
.concept strong { color: var(--brass-hi); font-weight: 600; }
.concept em { color: var(--ivory-warm); }
.concept-listen, .concept-try {
  background: linear-gradient(135deg, rgba(201,165,90,0.06), rgba(12,12,18,0.3));
  border-left: 3px solid var(--brass);
  padding: 16px 20px;
  border-radius: 6px;
  margin: 18px 0;
}
.concept-try {
  border-left-color: var(--intermed);
  background: linear-gradient(135deg, rgba(90,160,214,0.06), rgba(12,12,18,0.3));
}
.concept-try .try-status { margin-top: 10px; font-size: 13px; color: var(--muted); }
.concept-try .try-status .ok { color: var(--success); font-weight: 600; }
.concept-done { display: block; margin: 36px auto 10px; padding: 14px 36px; font-size: 15px; }
.caption {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* concept diagrams */
.diagram-kb, .diagram-staff, .diagram-steps { text-align: center; margin: 16px 0; }
.diagram-hands { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.diagram-hands .hand { text-align: center; }
.hand-label {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ivory);
  font-size: 16px;
}
.diagram-hands .fingers { display: flex; gap: 8px; justify-content: center; }
.finger {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
  border: 2px solid;
  background: rgba(12,12,18,0.5);
}
.finger.f-r { border-color: var(--intermed); color: var(--intermed); }
.finger.f-l { border-color: var(--error); color: var(--error); }
.finger-names { font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: 0.3px; }

/* photo-based lesson diagram (real hand/keyboard with labelled fingertips) */
.lesson-photo {
  margin: 24px auto;
  max-width: 720px;
  text-align: center;
}
.lesson-photo .photo-frame {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  background: #0b0b10;
}
.lesson-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.lesson-photo .photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lesson-photo .photo-mark {
  position: absolute;
  width: 6.2%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: var(--brass);
  border: 2px solid rgba(30,22,10,0.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.lesson-photo .photo-mark span {
  color: #1a1208;
  font-weight: 800;
  font-family: 'Playfair Display', serif;
  font-size: clamp(12px, 2.2vw, 20px);
  line-height: 1;
}

.diagram-notes { display: flex; gap: 28px; justify-content: center; margin: 20px 0; }
.note-val { text-align: center; }
.nv-sym { font-size: 52px; line-height: 1; color: var(--ivory); }
.nv-label { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.3px; }

/* finger badge on piano key */
.finger-badge {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: #fff;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.finger-badge.f-r { background: var(--intermed); }
.finger-badge.f-l { background: var(--error); }
.key.black .finger-badge { bottom: 4px; width: 18px; height: 18px; font-size: 10px; }

/* finger tag next to big-note */
.finger-tag {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  vertical-align: middle;
  font-family: 'Inter', sans-serif;
}
.finger-tag.f-r { background: var(--intermed); }
.finger-tag.f-l { background: var(--error); }

/* finger number above falling notes */
.fn-finger {
  display: block;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.fn-finger.f-r { color: #c7e3ff; }
.fn-finger.f-l { color: #ffc7b5; }
.falling-note .fn-note { font-size: 11px; font-weight: 600; }

/* =========================================================================
   Mobile adjustments
   ========================================================================= */
@media (max-width: 720px) {
  header { padding: 14px 20px; flex-wrap: wrap; gap: 10px; }
  .container { padding: 20px 16px 40px; }
  .hero { padding: 36px 20px 30px; }
  .hero h2 { font-size: 28px; }
  .stat { min-width: 110px; padding: 14px 18px; }
  .stat .num { font-size: 28px; }
  .tracks { grid-template-columns: 1fr; }
  .lesson-prompt .big-note { font-size: 48px; }
}

/* =========================================================================
   Play-Along difficulty selector
   ========================================================================= */
.difficulty-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}
.diff-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 18px;
  min-width: 170px;
  background: linear-gradient(180deg, #16161e 0%, #0c0c12 100%);
  border: 1px solid #2a2a36;
  border-radius: 10px;
  color: var(--ivory, #f5ecd9);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.diff-btn:hover {
  transform: translateY(-2px);
  border-color: var(--brass, #c9a55a);
}
.diff-btn.active {
  border-color: var(--brass, #c9a55a);
  box-shadow: 0 0 0 2px rgba(201, 165, 90, 0.35), 0 8px 24px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, #1f1a10 0%, #12100a 100%);
}
.diff-btn .diff-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--brass, #c9a55a);
}
.diff-btn .diff-desc {
  font-size: 12px;
  color: #9a968b;
  line-height: 1.3;
}
.falling-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #6b6862;
  font-size: 14px;
  font-style: italic;
  pointer-events: none;
}

/* =========================================================================
   Home — Featured Songs row (Play Your First Real Song)
   Sits between the hero and the genre tiles. Gives new users an instant
   "I could play this" moment. Only authentic, PD pieces are featured here.
   ========================================================================= */
.featured-songs { margin: 28px 0 8px; }
.featured-songs-head { margin-bottom: 14px; }
.featured-songs-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #f5ecd9;
}
.featured-songs-sub {
  margin: 0;
  color: var(--muted, #9a9aa8);
  font-size: 13.5px;
}
.featured-song-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.featured-song-card {
  --fs-accent: #c9a55a;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(160deg, #15151d 0%, #0a0a10 100%);
  border: 1px solid #24242e;
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.featured-song-card::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--fs-accent);
  opacity: 0.9;
}
.featured-song-card:hover {
  transform: translateY(-2px);
  border-color: var(--fs-accent);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.featured-song-card.locked { opacity: 0.7; }
.fs-emoji {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  flex-shrink: 0;
}
.fs-body { flex: 1; min-width: 0; }
.fs-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #f5ecd9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-composer {
  font-size: 12px;
  color: var(--fs-accent);
  margin: 1px 0 3px;
  letter-spacing: 0.02em;
}
.fs-teaser {
  font-size: 12.5px;
  color: var(--muted, #9a9aa8);
  line-height: 1.35;
}
.fs-cta {
  font-size: 18px;
  color: var(--fs-accent);
  flex-shrink: 0;
  padding-left: 4px;
}
@media (max-width: 640px) {
  .featured-song-cards { grid-template-columns: 1fr; }
}

/* =========================================================================
   Song Preview Modal (opens from featured-song cards — tap → hear → play)
   ========================================================================= */
.song-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.song-preview-modal.open { display: flex; }
.spm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: spm-fade 180ms ease-out;
}
.spm-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #16161e;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: spm-pop 220ms cubic-bezier(0.2, 0.8, 0.3, 1.1);
  --spm-accent: #c9a55a;
}
@keyframes spm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spm-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
.spm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
}
.spm-close:hover { background: rgba(0, 0, 0, 0.6); }
.spm-header {
  position: relative;
  padding: 48px 24px 28px;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--spm-accent) 32%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in oklab, var(--spm-accent) 24%, #0c0c14) 0%, #0c0c14 85%);
  text-align: center;
  overflow: hidden;
}
.spm-header::after {
  content: attr(data-watermark);
  position: absolute;
  right: -30px;
  bottom: -50px;
  font-size: 220px;
  font-weight: 900;
  color: color-mix(in oklab, var(--spm-accent) 18%, transparent);
  line-height: 1;
  letter-spacing: -8px;
  pointer-events: none;
  font-family: Georgia, serif;
}
.spm-emoji {
  display: inline-block;
  font-size: 56px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
  position: relative;
  z-index: 1;
}
.spm-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #f5ecd9;
  position: relative;
  z-index: 1;
}
.spm-composer {
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--spm-accent) 85%, #fff);
  position: relative;
  z-index: 1;
}
.spm-body { padding: 22px 24px 24px; }
.spm-teaser {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--muted, #b8b8c8);
  line-height: 1.4;
  text-align: center;
}
.spm-diffs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.spm-diff-btn {
  padding: 10px 6px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #cfcfdc;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 150ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.spm-diff-btn:hover { background: rgba(255, 255, 255, 0.06); }
.spm-diff-btn.active {
  border-color: var(--spm-accent);
  background: color-mix(in oklab, var(--spm-accent) 14%, transparent);
  color: #fff;
}
.spm-diff-btn .spm-diff-name { font-size: 14px; }
.spm-diff-btn .spm-diff-meta {
  font-size: 10px;
  opacity: 0.65;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.spm-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.spm-preview-btn,
.spm-start-btn {
  flex: 1;
  padding: 14px 12px;
  border-radius: 12px;
  border: 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms, box-shadow 150ms, background 150ms;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.spm-preview-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #cfcfdc;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
}
.spm-preview-btn:hover { background: rgba(255, 255, 255, 0.1); }
.spm-preview-btn.playing {
  background: color-mix(in oklab, var(--spm-accent) 18%, transparent);
  border-color: var(--spm-accent);
  color: #fff;
}
.spm-start-btn {
  background: linear-gradient(135deg, var(--spm-accent), color-mix(in oklab, var(--spm-accent) 70%, #8a6e3a));
  color: #0c0c14;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--spm-accent) 30%, transparent);
}
.spm-start-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in oklab, var(--spm-accent) 40%, transparent); }
.spm-hint {
  font-size: 11px;
  color: var(--muted, #b8b8c8);
  text-align: center;
  margin-top: 12px;
  opacity: 0.7;
}
@media (max-width: 480px) {
  .spm-header { padding: 40px 18px 22px; }
  .spm-emoji { font-size: 44px; }
  .spm-title { font-size: 22px; }
  .spm-body { padding: 18px 18px 20px; }
  .spm-diff-btn { padding: 8px 4px; font-size: 12px; }
  .spm-diff-btn .spm-diff-name { font-size: 13px; }
}

/* =========================================================================
   Home — Level Tiles (big interactive cards)
   ========================================================================= */
.level-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.level-tile {
  --tile-accent: #c9a55a;
  position: relative;
  background: linear-gradient(160deg, #15151d 0%, #0a0a10 100%);
  border: 1px solid #24242e;
  border-radius: 18px;
  padding: 28px 26px 24px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  min-height: 340px;
}
.level-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--tile-accent);
  opacity: 0.9;
}
.level-tile:hover {
  transform: translateY(-4px);
  border-color: var(--tile-accent);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,165,90,0.15);
}
.level-tile.locked { opacity: 0.72; }
.level-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.level-emoji { font-size: 44px; line-height: 1; }

/* Q3-Genres.1 (2026-05-16): Early Access badge on level tiles + banner on track
   pages. Used to honestly mark blues/boogie/ragtime/latin tracks whose
   fingerings + sheets are still being authored. Tasteful, not alarming. */
.early-access-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 200, 134, 0.18), rgba(212, 175, 55, 0.12));
  border: 1px solid rgba(232, 200, 134, 0.45);
  color: var(--brass-hi, #e8c886);
  white-space: nowrap;
}
.early-access-banner {
  display: block;
  margin: 8px 0 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--brass-hi, #e8c886);
  background: linear-gradient(135deg, rgba(232, 200, 134, 0.10), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(232, 200, 134, 0.30);
  border-radius: 8px;
}
.early-access-banner strong {
  color: var(--brass-hi, #e8c886);
  margin-right: 6px;
}
.level-tile-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  margin: 0 0 4px;
  color: var(--ivory, #f5ecd9);
}
.level-tile-tagline {
  color: var(--tile-accent);
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 600;
}
.level-tile-desc {
  color: #9a968b;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
  flex: 1;
}
.level-tile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.lts {
  background: #0a0a10;
  border: 1px solid #1e1e28;
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}
.lts-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--tile-accent);
  font-weight: 700;
}
.lts-lbl {
  display: block;
  font-size: 11px;
  color: #807c73;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.level-tile-cta {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tile-accent);
  letter-spacing: 0.3px;
}

/* =========================================================================
   Track View — section header + grouped lessons
   ========================================================================= */
.track-page-header {
  --tile-accent: #c9a55a;
  margin-bottom: 28px;
}
.back-btn {
  margin-bottom: 18px;
}
.track-page-title {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: linear-gradient(160deg, #15151d 0%, #0a0a10 100%);
  border: 1px solid #24242e;
  border-radius: 16px;
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
}
.track-page-title::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 5px;
  background: var(--tile-accent);
}
.track-page-title .track-emoji { font-size: 54px; line-height: 1; }
.track-page-title h2 {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  margin: 0 0 4px;
}
.track-page-title p { color: #9a968b; margin: 0; font-size: 14px; }

.lesson-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.lesson-group-head {
  margin-bottom: 14px;
}
.lesson-group-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--ivory, #f5ecd9);
}
.lesson-group-head p {
  margin: 0;
  color: #807c73;
  font-size: 13px;
}
.artist-group {
  margin-bottom: 24px;
}
.artist-group-head {
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 165, 90, 0.15);
}
.artist-group-head h4 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: #c9a55a;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.lesson-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: linear-gradient(180deg, #13131a 0%, #0a0a10 100%);
  border: 1px solid #22222c;
  border-radius: 12px;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  min-height: 78px;
}
.lesson-card:hover {
  transform: translateY(-2px);
  border-color: var(--brass, #c9a55a);
  background: linear-gradient(180deg, #181820 0%, #0e0e15 100%);
}
.lesson-card.done {
  border-color: rgba(110, 203, 138, 0.45);
}
.lesson-card.done .lesson-card-status {
  background: #6ecb8a;
  color: #0a0a10;
}
.lesson-card-status {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #1e1e28;
  color: var(--brass, #c9a55a);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.lesson-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ivory, #f5ecd9);
  margin-bottom: 3px;
}
.lesson-card-sub {
  font-size: 12px;
  color: #807c73;
  letter-spacing: 0.3px;
}

/* Songs get a brass glow */
.lesson-group-play-along .lesson-card.is-song {
  background: linear-gradient(180deg, #1a1712 0%, #0e0b07 100%);
  border-color: rgba(201, 165, 90, 0.3);
}
.lesson-group-play-along .lesson-card.is-song .lesson-card-status {
  background: rgba(201, 165, 90, 0.15);
  color: var(--brass, #c9a55a);
}

@media (max-width: 720px) {
  .level-tiles { grid-template-columns: 1fr; gap: 18px; }
  .track-page-title { flex-direction: column; gap: 10px; padding: 20px; }
  .track-page-title h2 { font-size: 24px; }
  .lesson-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Continue Learning + Gamification
   ========================================================================= */
.continue-card {
  margin-top: 18px;
  padding: 22px 26px;
  background: linear-gradient(135deg, #1c1810 0%, #0e0b07 50%, #0a0a10 100%);
  border: 1px solid rgba(201, 165, 90, 0.45);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}
.continue-card::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #e8c886, #8a6e3a);
}
.continue-card:hover {
  transform: translateY(-2px);
  border-color: #c9a55a;
  box-shadow: 0 12px 36px rgba(201, 165, 90, 0.2);
}
.continue-card.done { cursor: default; }
.continue-card.done:hover { transform: none; }
.continue-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-size: 12px; letter-spacing: 0.5px;
}
.cc-tag {
  background: #c9a55a; color: #0a0a10;
  padding: 4px 10px; border-radius: 20px;
  font-weight: 700; text-transform: uppercase; font-size: 11px;
}
.cc-path { color: #9a968b; text-transform: uppercase; font-size: 11px; }
.cc-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  margin: 4px 0 6px;
  color: #f5ecd9;
}
.cc-sub { color: #9a968b; margin: 0 0 12px; font-size: 14px; }
.cc-cta {
  color: #c9a55a;
  font-weight: 700; font-size: 14px; letter-spacing: 0.3px;
}

.stat.game { position: relative; }
.xp-mini {
  height: 4px; background: #1e1e28; border-radius: 2px; margin-top: 6px; overflow: hidden;
}
.xp-mini-fill { height: 100%; background: #c9a55a; transition: width .4s ease; }
.xp-mini-txt { font-size: 10px; color: #807c73; margin-top: 3px; letter-spacing: 0.3px; }

/* Reward chips shown on lesson complete */
.reward-row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 16px 0 4px;
}
.reward-chip {
  padding: 8px 14px; border-radius: 20px;
  font-weight: 700; font-size: 14px; letter-spacing: 0.3px;
  animation: rewardPop .5s ease both;
}
.reward-chip.xp     { background: rgba(201, 165, 90, 0.2); color: #e8c886; border: 1px solid #c9a55a; }
.reward-chip.streak { background: rgba(255, 120, 60, 0.15); color: #ff9562; border: 1px solid rgba(255, 120, 60, 0.5); }
.reward-chip.level  { background: rgba(110, 203, 138, 0.15); color: #6ecb8a; border: 1px solid rgba(110, 203, 138, 0.5); }
@keyframes rewardPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.complete-burst {
  animation: burstIn .7s ease both;
  color: #6ecb8a;
  text-shadow: 0 0 30px rgba(110, 203, 138, 0.5);
}
@keyframes burstIn {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Floating XP toast */
.xp-toast {
  position: fixed;
  top: 90px;
  right: 24px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #1f1a10 0%, #0e0b07 100%);
  border: 1px solid #c9a55a;
  border-radius: 12px;
  color: #e8c886;
  font-size: 15px;
  box-shadow: 0 8px 32px rgba(201, 165, 90, 0.3);
  opacity: 0; transform: translateX(120%);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
  z-index: 9999;
  pointer-events: none;
}
.xp-toast.show { opacity: 1; transform: translateX(0); }
.xp-toast.level-up {
  border-color: #6ecb8a;
  color: #6ecb8a;
  box-shadow: 0 8px 32px rgba(110, 203, 138, 0.4);
}

/* =========================================================================
   Learning Path (Duolingo-style node chain)
   ========================================================================= */
.learning-path {
  --tile-accent: #c9a55a;
  margin: 0 0 32px;
  padding: 20px 4px 4px;
  overflow-x: auto;
  overflow-y: hidden;
}
.learning-path::-webkit-scrollbar { height: 6px; }
.learning-path::-webkit-scrollbar-thumb { background: #24242e; border-radius: 3px; }
.learning-path-inner {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 16px 24px;
}
.lp-step {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  min-width: 72px;
  position: relative;
}
.lp-node {
  width: 54px; height: 54px; border-radius: 50%;
  background: #13131a;
  border: 2px solid #2a2a36;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #807c73;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.lp-step:hover .lp-node {
  transform: scale(1.08);
  border-color: var(--tile-accent);
}
.lp-step.done .lp-node {
  background: var(--tile-accent);
  border-color: var(--tile-accent);
  color: #0a0a10;
  font-weight: 800;
}
.lp-step.current .lp-node {
  border-color: var(--tile-accent);
  background: rgba(201, 165, 90, 0.12);
  color: var(--tile-accent);
  box-shadow: 0 0 0 4px rgba(201, 165, 90, 0.18);
  animation: pulseCurrent 1.8s ease-in-out infinite;
}
@keyframes pulseCurrent {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201, 165, 90, 0.18); }
  50%      { box-shadow: 0 0 0 10px rgba(201, 165, 90, 0.05); }
}
.lp-label {
  margin-top: 8px;
  font-size: 10px;
  color: #9a968b;
  max-width: 80px;
  text-align: center;
  line-height: 1.2;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.lp-step.current .lp-label { color: var(--tile-accent); font-weight: 600; }
.lp-connector {
  width: 28px; height: 3px; background: #2a2a36;
  margin: 0 2px 24px;
  border-radius: 2px;
  flex-shrink: 0;
}
.lp-step.done + .lp-connector { background: var(--tile-accent); }

@media (max-width: 720px) {
  .xp-toast { right: 10px; top: 80px; padding: 10px 16px; font-size: 13px; }
  .continue-card { padding: 18px; }
  .cc-title { font-size: 20px; }
}

/* =========================================================================
   Goal Hook + Next Song Unlock
   ========================================================================= */
.goal-line {
  margin: 14px 0 8px;
  padding: 10px 16px;
  background: rgba(201, 165, 90, 0.08);
  border-left: 3px solid var(--brass, #c9a55a);
  border-radius: 6px;
  color: #d8d0bc;
  font-size: 14px;
  line-height: 1.5;
}
.goal-line.ok {
  background: rgba(110, 203, 138, 0.1);
  border-left-color: #6ecb8a;
  color: #b6e5c2;
}
.goal-line strong { color: var(--brass, #c9a55a); }
.goal-line.ok strong { color: #6ecb8a; }

.unlock-card {
  margin-top: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #13131d 0%, #0a0a10 100%);
  border: 1px dashed rgba(201, 165, 90, 0.5);
  border-radius: 12px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.unlock-card:hover {
  transform: translateY(-1px);
  border-color: #c9a55a;
  background: linear-gradient(135deg, #16161f 0%, #0c0c12 100%);
}
.unlock-card.ready {
  border: 1px solid #6ecb8a;
  background: linear-gradient(135deg, #0e1a12 0%, #080b09 100%);
}
.unlock-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(201, 165, 90, 0.5));
}
.unlock-card.ready .unlock-icon {
  filter: drop-shadow(0 0 10px rgba(110, 203, 138, 0.7));
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(110, 203, 138, 0.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(110, 203, 138, 0.9)); }
}
.unlock-body { flex: 1; min-width: 0; }
.unlock-label {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brass, #c9a55a);
  font-weight: 700;
  margin-bottom: 3px;
}
.unlock-card.ready .unlock-label { color: #6ecb8a; }
.unlock-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #f5ecd9;
  margin-bottom: 2px;
}
.unlock-sub { color: #9a968b; font-size: 13px; }
.unlock-sub strong { color: #f5ecd9; }
.unlock-cta {
  color: var(--brass, #c9a55a);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.unlock-card.ready .unlock-cta { color: #6ecb8a; }

@media (max-width: 520px) {
  .unlock-card { flex-wrap: wrap; }
  .unlock-cta { width: 100%; text-align: right; margin-top: 4px; }
}

/* ===== Phase 3: Quick Play, confetti, soft locks ===== */
.quick-play-card {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 14px 18px;
  border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, rgba(110,203,138,0.12), rgba(106,176,255,0.10));
  border: 1px solid rgba(110,203,138,0.45);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.quick-play-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.28); border-color: rgba(110,203,138,0.8); }
.quick-play-card.playing { border-color: #e8c886; }
.quick-play-card.success { background: linear-gradient(135deg, rgba(110,203,138,0.28), rgba(232,200,134,0.22)); border-color: #6ecb8a; }
.qp-icon { font-size: 28px; line-height: 1; }
.qp-body { flex: 1; min-width: 0; }
.qp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #6ecb8a; font-weight: 700; }
.qp-title { font-size: 15px; color: var(--ivory, #f5ecd9); margin-top: 2px; }
.qp-cta { font-size: 14px; color: #e8c886; font-weight: 600; white-space: nowrap; }

/* Confetti */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.confetti {
  position: absolute; width: 8px; height: 14px; border-radius: 2px;
  transform: translate(-50%, -50%);
  animation: confettiFly 1.2s cubic-bezier(0.15, 0.8, 0.35, 1) forwards;
}
@keyframes confettiFly {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); opacity: 0; }
}

/* Preview + Earn card states
   ----------------------------------------------------------------
   earn-blocked: can be played, but no credit/stars/XP yet — card
   stays fully clickable and full-colored. Only the status glyph
   (🎯) signals "mastery is out there to be earned." Do NOT gray it
   out or blur it; that re-introduces the "this is broken" feel we
   just removed.
   attempted: user has opened the lesson at least once but not
   mastered it. Subtle halo — a desire-signal cue, not a badge. */
.lesson-card.earn-blocked .lesson-card-status { color: #c9a55a; }
.lesson-card.attempted {
  border-color: rgba(201, 165, 90, 0.45);
  box-shadow: 0 0 0 1px rgba(201, 165, 90, 0.18) inset;
}
.lesson-card.attempted .lesson-card-status { color: #c9a55a; }

@media (max-width: 520px) {
  .quick-play-card { flex-wrap: wrap; }
  .qp-cta { width: 100%; text-align: right; }
}

/* Preview + Earn completion: quieter, honest, no gold-radial. No stars/XP
   numbers — this is a preview run, not a mastered run. The visual difference
   is the whole point: if this screen looked the same as a mastered completion,
   users would feel the lesson "lied" about earning progress. */
.complete-panel.preview-run {
  background: linear-gradient(180deg, rgba(201,165,90,0.06), rgba(0,0,0,0));
  border: 1px solid rgba(201,165,90,0.25);
  box-shadow: none;
}
.complete-panel.preview-run .cp-check.preview {
  background: rgba(110,203,138,0.14);
  color: #8fd0a3;
  box-shadow: none;
  border: 1px solid rgba(143,208,163,0.35);
  font-size: 34px;
  animation: none; /* no celebratory pop */
}
.complete-panel.preview-run .cp-title {
  font-size: 22px;
  color: #f4ead6;
}
.complete-panel.preview-run .cp-subtitle {
  color: rgba(244,234,214,0.7);
}
.preview-earn-hint {
  margin: 14px auto 6px;
  max-width: 420px;
  padding: 10px 14px;
  background: rgba(201,165,90,0.12);
  border: 1px solid rgba(201,165,90,0.35);
  border-radius: 10px;
  color: #f4ead6;
  font-size: 14px;
  line-height: 1.4;
}
.preview-earn-hint strong { color: #ffd98a; }
.preview-earn-sub {
  max-width: 420px;
  margin: 0 auto 14px;
  color: rgba(244,234,214,0.6);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ===== Phase 4: Completion panel, daily challenge, level identity ===== */
.complete-panel {
  text-align: center;
  padding: 28px 20px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(232,200,134,0.18), transparent 60%),
              linear-gradient(180deg, rgba(110,203,138,0.08), rgba(0,0,0,0));
  border: 1px solid rgba(232,200,134,0.4);
  animation: panelRise 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  position: relative;
}
.complete-panel.level-up {
  border-color: #e8c886;
  box-shadow: 0 0 0 2px rgba(232,200,134,0.25), 0 10px 40px rgba(232,200,134,0.2);
}
@keyframes panelRise {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cp-check {
  display: inline-flex; width: 72px; height: 72px;
  align-items: center; justify-content: center;
  font-size: 40px; font-weight: 700; color: #0c0c12;
  background: radial-gradient(circle at 30% 30%, #f5ecd9, #e8c886 60%, #8a6e3a);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(232,200,134,0.15), 0 8px 24px rgba(0,0,0,0.4);
  animation: checkPop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  margin-bottom: 10px;
}
@keyframes checkPop {
  0%   { transform: scale(0) rotate(-40deg); }
  60%  { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.cp-title { font-size: 28px; margin: 6px 0 4px; font-family: 'Playfair Display', serif; }
.cp-subtitle { font-size: 14px; color: #c9a55a; margin-bottom: 14px; letter-spacing: 0.02em; }
.cp-xp {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 700;
  color: #e8c886;
  text-shadow: 0 0 18px rgba(232,200,134,0.45);
  margin: 8px 0 14px;
  animation: xpGlow 1.4s ease-in-out 0.3s;
}
.cp-xp-plus { font-size: 32px; }
.cp-xp-lbl  { font-size: 18px; margin-left: 4px; letter-spacing: 0.1em; color: #c9a55a; }
@keyframes xpGlow {
  0%   { text-shadow: 0 0 0 rgba(232,200,134,0); }
  50%  { text-shadow: 0 0 30px rgba(232,200,134,0.8); }
  100% { text-shadow: 0 0 18px rgba(232,200,134,0.45); }
}
.cp-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.reward-chip.pulse { animation: streakPulse 1.2s ease-in-out 2; }
@keyframes streakPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,138,181,0); }
  50%      { transform: scale(1.08); box-shadow: 0 0 18px rgba(255,138,181,0.55); }
}
.cp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Daily challenge */
.daily-challenge {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 14px 18px;
  border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,138,181,0.10), rgba(232,200,134,0.08));
  border: 1px solid rgba(255,138,181,0.4);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.daily-challenge::before {
  content: ''; position: absolute; inset: 0; border-radius: 14px;
  box-shadow: 0 0 0 0 rgba(255,138,181,0.5);
  animation: dcBeacon 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dcBeacon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,181,0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(255,138,181,0); }
}
.daily-challenge:hover { transform: translateY(-2px); border-color: rgba(255,138,181,0.7); }
.daily-challenge.done {
  background: linear-gradient(135deg, rgba(110,203,138,0.14), rgba(110,203,138,0.06));
  border-color: rgba(110,203,138,0.5);
  cursor: default;
}
.daily-challenge.done::before { animation: none; box-shadow: none; }
.dc-icon { font-size: 26px; }
.dc-body { flex: 1; min-width: 0; }
.dc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #ff8ab5; font-weight: 700; }
.daily-challenge.done .dc-label { color: #6ecb8a; }
.dc-title { font-size: 15px; color: var(--ivory, #f5ecd9); margin-top: 2px; }
.dc-cta { font-size: 14px; color: #e8c886; font-weight: 600; white-space: nowrap; }

/* Ready-unlock glow boost */
.unlock-card.ready {
  animation: readyGlow 2s ease-in-out infinite;
}
@keyframes readyGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110,203,138,0.5); }
  50%      { box-shadow: 0 0 28px 4px rgba(110,203,138,0.35); }
}

/* ===== Phase 5: Moment-to-moment feedback ===== */
.micro-xp {
  position: fixed;
  transform: translate(-50%, 0);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 22px;
  color: #6ecb8a;
  text-shadow: 0 0 12px rgba(110,203,138,0.6), 0 2px 6px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 9998;
  animation: microXpFloat 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes microXpFloat {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(0.95); }
}

.lesson-prompt.flash-correct {
  animation: flashCorrect 0.7s ease-out;
}
.lesson-prompt.flash-wrong {
  animation: flashWrong 0.45s ease-out;
}
@keyframes flashCorrect {
  0%   { box-shadow: 0 0 0 0 rgba(110,203,138,0); }
  30%  { box-shadow: 0 0 0 4px rgba(110,203,138,0.35), 0 0 30px rgba(110,203,138,0.4); }
  100% { box-shadow: 0 0 0 0 rgba(110,203,138,0); }
}
@keyframes flashWrong {
  0%, 100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(255,120,120,0); }
  25% { transform: translateX(-6px); box-shadow: 0 0 0 3px rgba(255,120,120,0.3); }
  75% { transform: translateX(6px); }
}

/* Also pulse the big-note / cp-check when correct */
.lesson-prompt.flash-correct .big-note { animation: noteZing 0.5s ease-out; }
@keyframes noteZing {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); text-shadow: 0 0 24px rgba(110,203,138,0.7); }
  100% { transform: scale(1); }
}

/* Keep hit falling-notes visually distinct */
.falling-note.hit {
  background: linear-gradient(180deg, rgba(110,203,138,0.9), rgba(110,203,138,0.4)) !important;
  box-shadow: 0 0 18px rgba(110,203,138,0.7);
  animation: hitPop 0.35s ease-out;
}
@keyframes hitPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ===== Phase 6: Skill unlocks, star mastery, 60-sec song hook ===== */
.stars {
  display: flex; gap: 6px; justify-content: center; margin: 6px 0 8px;
  font-size: 26px;
}
.stars span { color: rgba(255,255,255,0.15); transition: color 0.3s ease, transform 0.3s ease; }
.stars span.on {
  color: #e8c886;
  text-shadow: 0 0 14px rgba(232,200,134,0.8);
  animation: starPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.stars span.on:nth-child(1) { animation-delay: 0.2s; }
.stars span.on:nth-child(2) { animation-delay: 0.4s; }
.stars span.on:nth-child(3) { animation-delay: 0.6s; }
@keyframes starPop {
  0%   { transform: scale(0) rotate(-30deg); }
  60%  { transform: scale(1.35) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

.skill-unlock {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 4px 0 14px; padding: 8px 14px;
  background: rgba(110,203,138,0.12);
  border: 1px solid rgba(110,203,138,0.4);
  border-radius: 999px;
  animation: skillSlide 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.5s both;
}
@keyframes skillSlide {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.su-tag {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: #6ecb8a;
}
.su-text { font-size: 14px; color: var(--ivory, #f5ecd9); }

.mastery-hint {
  font-size: 13px; color: #c9a55a; margin-bottom: 12px;
  opacity: 0.85;
}
.mastery-hint.done { color: #6ecb8a; }

/* Stars on lesson cards (track view) */
.lc-stars {
  display: flex; gap: 2px; margin-top: 6px;
  font-size: 13px;
}
.lc-stars span { color: rgba(255,255,255,0.18); }
.lc-stars span.on { color: #e8c886; }

/* ===== Phase 7: Play experience polish, in-play HUD, identity ===== */
.tempo-bar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(232,200,134,0.2);
  border-radius: 10px;
}
.tempo-lbl { font-size: 12px; color: #c9a55a; letter-spacing: 0.05em; }
.tempo-btn {
  background: rgba(255,255,255,0.04);
  color: var(--ivory, #f5ecd9);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 12px; border-radius: 8px; font-size: 13px;
  cursor: pointer; transition: all 0.15s ease;
}
.tempo-btn:hover { background: rgba(232,200,134,0.12); border-color: rgba(232,200,134,0.4); }
.tempo-btn.active {
  background: linear-gradient(180deg, #e8c886, #c9a55a);
  color: #0c0c12; border-color: #e8c886;
  box-shadow: 0 0 14px rgba(232,200,134,0.35);
}

/* Play HUD — live feedback during song */
.play-hud {
  display: flex; gap: 18px; justify-content: center;
  margin-top: 10px; padding: 10px 16px;
  background: linear-gradient(135deg, rgba(232,200,134,0.08), rgba(110,203,138,0.05));
  border: 1px solid rgba(232,200,134,0.25);
  border-radius: 12px;
}
.hud-item { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.hud-val {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700; color: #e8c886;
  line-height: 1;
  transition: transform 0.15s ease;
}
.hud-val.pop {
  animation: hudPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes hudPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); color: #ffdf87; text-shadow: 0 0 16px rgba(232,200,134,0.7); }
  100% { transform: scale(1); }
}
.hud-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: #c9a55a; margin-top: 4px;
}

/* Combo milestones */
.combo-shout {
  position: absolute; left: 50%; top: 40%;
  transform: translateX(-50%);
  font-family: 'Playfair Display', serif;
  font-size: 42px; font-weight: 700;
  color: #e8c886;
  text-shadow: 0 0 24px rgba(232,200,134,0.8), 0 4px 10px rgba(0,0,0,0.6);
  pointer-events: none;
  animation: shoutBurst 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  z-index: 20;
}
@keyframes shoutBurst {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.5); }
  25%  { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

/* Identity banner */
.identity-banner {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 10px 0 6px; padding: 6px 14px;
  background: linear-gradient(135deg, rgba(232,200,134,0.18), rgba(110,203,138,0.12));
  border: 1px solid rgba(232,200,134,0.45);
  border-radius: 999px;
  animation: idGlow 3s ease-in-out infinite;
}
@keyframes idGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,200,134,0.35); }
  50%      { box-shadow: 0 0 18px 2px rgba(232,200,134,0.25); }
}
.id-tag {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #c9a55a; font-weight: 700;
}
.id-text {
  font-family: 'Playfair Display', serif;
  font-size: 15px; color: var(--ivory, #f5ecd9);
}

/* Streak-at-risk warning */
.streak-risk {
  margin: 10px 0; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255,138,181,0.14), rgba(255,120,120,0.08));
  border: 1px solid rgba(255,120,120,0.45);
  border-radius: 10px;
  font-size: 14px; color: var(--ivory, #f5ecd9);
  animation: riskShake 2.5s ease-in-out infinite;
}
@keyframes riskShake {
  0%, 100% { transform: translateX(0); }
  96%      { transform: translateX(-2px); }
  98%      { transform: translateX(2px); }
}

/* ===== Phase 8: Mobile polish + performance ===== */
/* Kill 300ms tap delay + prevent accidental text selection on rapid taps */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, .key, .lesson-card, .level-tile, .quick-play-card, .daily-challenge, .unlock-card,
.continue-card, .diff-btn, .tempo-btn, .lp-step {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Piano keys respond instantly on touch — no text select, no callouts */
.key { -webkit-touch-callout: none; }

@media (max-width: 720px) {
  /* Larger tap targets for level tiles + lesson cards */
  .level-tile { padding: 18px 16px; min-height: 180px; }
  .lesson-card { padding: 14px 12px; min-height: 66px; }
  .level-tile-title { font-size: 20px; }
  /* Header nav wraps cleanly */
  header { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  header nav { order: 3; width: 100%; justify-content: center; }
  .nav-btn { padding: 8px 12px; font-size: 13px; }
  .brand-name { font-size: 20px; }
  /* Hero sections stack */
  .hero { padding: 14px; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .stat { padding: 10px; }
  /* Piano scales to device width */
  .piano-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Phase M1.2.4 (2026-04-30): mobile piano keyboard usability.
     White keys get a 52px min-width so each key is comfortably tappable
     (iOS recommended minimum tap target = 44px; 52 gives finger margin).
     The .piano element grows wider than the viewport; .piano-wrap and
     .falling-stage both scroll horizontally and stay in sync via a JS hook
     in player.js. This keeps falling tiles aligned with their target keys
     instead of squeezing 21 keys into 367px (~17px each = un-tappable). */
  .piano .key.white { min-width: 52px; flex: 1 0 52px; }
  .falling-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .falling-stage::-webkit-scrollbar,
  .piano-wrap::-webkit-scrollbar { height: 4px; }
  .falling-stage::-webkit-scrollbar-thumb,
  .piano-wrap::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 2px; }
  /* Phase M1.3 (2026-04-30): landscape-orientation soft nudge.
     Piano apps are landscape-primary. On phone portrait + lesson view,
     show a top banner suggesting rotation. Soft guidance — does NOT block
     play. Persists dismiss via localStorage. */
  .landscape-nudge {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 12px));
    left: 12px;
    right: 12px;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(212,175,55,0.96) 0%, rgba(184,134,11,0.96) 100%);
    color: #1a1a22;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
    animation: landscape-nudge-in 0.28s ease-out;
  }
  .landscape-nudge .ln-emoji { font-size: 20px; line-height: 1; }
  .landscape-nudge .ln-text { flex: 1; line-height: 1.3; }
  .landscape-nudge .ln-dismiss {
    background: rgba(0,0,0,0.18);
    border: none;
    color: inherit;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .landscape-nudge .ln-dismiss:active { background: rgba(0,0,0,0.32); }
  .controls { flex-wrap: wrap; gap: 8px; }
  /* Completion panel comfortable on phone */
  .cp-title { font-size: 22px; }
  .cp-xp { font-size: 38px; }
  .cp-actions { flex-direction: column; }
  .cp-actions .btn { width: 100%; }
  /* Tempo bar + difficulty bar wrap on phone */
  .tempo-bar, .difficulty-bar { gap: 4px; }
  .tempo-btn { padding: 8px 10px; font-size: 12px; }
  .diff-btn { flex: 1 1 100%; }
  /* HUD compact */
  .play-hud { gap: 10px; padding: 8px 10px; }
  .hud-val { font-size: 22px; }
  .hud-item { min-width: 56px; }
  /* Falling-stage fits phone */
  .falling-stage { max-height: 260px; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 18px; }
  .level-tiles { grid-template-columns: 1fr !important; }
  .nav-btn { font-size: 12px; padding: 6px 10px; }
}

/* Phase M1.3 — only show landscape nudge at phone portrait. Keyframes live
   outside any @media so the animation is defined when JS injects the banner. */
@keyframes landscape-nudge-in {
  from { transform: translateY(-120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (max-width: 720px) and (orientation: portrait) {
  .landscape-nudge { display: flex; }
}

/* ===== Phase 9: Cinematic first-song moment, ghost assist, momentum ===== */
.cinematic-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: radial-gradient(circle at 50% 40%, rgba(20,16,8,0.92), rgba(5,5,10,0.98));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  text-align: center;
  animation: cineFadeIn 0.6s ease-out;
}
.cinematic-overlay.fade-out { animation: cineFadeOut 0.4s ease-in forwards; }
@keyframes cineFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cineFadeOut { from { opacity: 1; } to { opacity: 0; } }
.cinematic-glow {
  position: absolute; left: 50%; top: 40%;
  width: 600px; height: 600px; max-width: 120vw; max-height: 120vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,200,134,0.35), transparent 60%);
  filter: blur(20px);
  animation: cineGlow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cineGlow {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}
.cinematic-stars {
  display: flex; gap: 18px; font-size: 60px; color: #e8c886;
  text-shadow: 0 0 30px rgba(232,200,134,0.9);
  margin-bottom: 28px;
  position: relative; z-index: 2;
}
.cinematic-stars .c-star { animation: cineStar 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.cinematic-stars .s1 { animation-delay: 0.4s; }
.cinematic-stars .s2 { animation-delay: 0.7s; }
.cinematic-stars .s3 { animation-delay: 1.0s; }
@keyframes cineStar {
  0%   { opacity: 0; transform: scale(0) rotate(-60deg); }
  70%  { transform: scale(1.3) rotate(15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.cinematic-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 6vw, 48px);
  color: #f5ecd9;
  margin: 0 0 16px;
  opacity: 0;
  animation: cineTextIn 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 1.2s forwards;
  position: relative; z-index: 2;
  text-shadow: 0 0 26px rgba(232,200,134,0.4);
}
.cinematic-line {
  font-size: clamp(16px, 3vw, 20px);
  color: #e8c886; margin-bottom: 10px;
  opacity: 0;
  animation: cineTextIn 0.8s ease-out 1.8s forwards;
  position: relative; z-index: 2;
}
.cinematic-sub {
  font-size: 14px; color: #c9a55a; max-width: 520px;
  margin-bottom: 28px; line-height: 1.5;
  opacity: 0;
  animation: cineTextIn 0.8s ease-out 2.4s forwards;
  position: relative; z-index: 2;
}
.cinematic-cta {
  opacity: 0;
  animation: cineTextIn 0.6s ease-out 2.2s forwards;
  position: relative; z-index: 2;
  font-size: 16px; padding: 12px 26px;
}
.cinematic-identity {
  margin-top: 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  color: #e8c886;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: cineTextIn 0.8s ease-out 3.2s forwards;
  position: relative; z-index: 2;
  text-shadow: 0 0 14px rgba(232,200,134,0.35);
}
.cinematic-overlay.perfect {
  background: radial-gradient(ellipse at center, rgba(255,240,200,0.18) 0%, rgba(10,8,6,0.96) 70%);
}
.cinematic-overlay.perfect .cinematic-title {
  text-shadow: 0 0 32px rgba(255,235,180,0.6), 0 0 60px rgba(232,200,134,0.3);
}
.cinematic-overlay.perfect .cinematic-star {
  filter: drop-shadow(0 0 20px rgba(255,235,180,0.95));
}
.reward-chip.combo {
  background: linear-gradient(135deg, rgba(255,140,90,0.18), rgba(232,200,134,0.18));
  border: 1px solid rgba(255,170,120,0.45);
  color: #ffd6b5;
}
@keyframes cineTextIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Ghost assist — softly highlights a missed key on the first song */
.key.ghost {
  box-shadow: inset 0 0 0 3px rgba(232,200,134,0.55), 0 0 18px rgba(232,200,134,0.35) !important;
  animation: ghostPulse 0.5s ease-out;
}
@keyframes ghostPulse {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

/* Momentum chip */
.reward-chip.improve {
  background: linear-gradient(135deg, rgba(110,203,138,0.22), rgba(106,176,255,0.18));
  border-color: rgba(110,203,138,0.55);
  color: #6ecb8a;
  animation: chipPulse 1.4s ease-in-out 2;
}
@keyframes chipPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); box-shadow: 0 0 16px rgba(110,203,138,0.4); }
}

/* Simplified HUD for first-song experience */
.play-hud.hud-simple { background: rgba(232,200,134,0.06); border-color: rgba(232,200,134,0.15); }
.play-hud.hud-simple .hud-val { font-size: 22px; }

/* ---------- Input-source selector (Phase 11 mic pilot) ---------- */
.input-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 10px; padding: 10px 12px;
  background: rgba(232,200,134,0.05);
  border: 1px solid rgba(232,200,134,0.18);
  border-radius: 10px;
}
.input-bar .tempo-lbl { font-weight: 600; color: #e8c886; margin-right: 4px; }
.input-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(232,200,134,0.25);
  color: #f4ead6;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  display: inline-flex; align-items: center; gap: 6px;
}
.input-btn:hover:not(:disabled) { background: rgba(232,200,134,0.1); }
.input-btn.active {
  background: linear-gradient(135deg, rgba(232,200,134,0.28), rgba(232,200,134,0.12));
  border-color: rgba(232,200,134,0.7);
  color: #fff5dc;
}
.input-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.beta-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  background: rgba(255,140,90,0.25); color: #ffd6b5;
  padding: 2px 6px; border-radius: 4px; margin-left: 2px;
}
.input-hint {
  width: 100%;
  font-size: 13px; color: rgba(244,234,214,0.72);
  font-style: italic; margin-top: 4px;
}
.midi-status {
  width: 100%;
  font-size: 13px;
  color: #9cc2a3;
  margin-top: 2px;
  min-height: 16px;
}
.midi-status.warn { color: #fbbf24; }
.midi-status.err  { color: #f87171; }

/* ---------- Staff notation (Read the Staff track) ---------- */
.staff-wrap {
  display: flex; justify-content: center;
  background: #fdf7e7;
  border-radius: 12px;
  padding: 12px 8px;
  margin: 14px auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.25);
  max-width: 100%;
  overflow-x: auto;
}
.staff-wrap.staff-wide { padding: 16px 8px; }
.staff-wrap svg { display: block; }
.staff-wrap svg text, .staff-wrap svg path { fill: #1a1410; }
.staff-progress {
  text-align: center; color: #e8c886;
  font-family: 'Inter', sans-serif; font-size: 14px;
  margin-top: 6px;
}
.staff-fallback {
  padding: 24px; text-align: center; color: #6b5b3a;
  font-style: italic;
}
.staff-helper {
  text-align: center; font-size: 13px;
  color: rgba(244,234,214,0.65);
  font-style: italic; margin-top: 4px;
}

/* Soft hint pulse on the keyboard when a note appears on the staff */
.key.staff-hint {
  animation: staffHintPulse 1.1s ease-out;
  box-shadow: inset 0 0 0 3px rgba(110,203,138,0.55), 0 0 20px rgba(110,203,138,0.4) !important;
}
@keyframes staffHintPulse {
  0%   { box-shadow: inset 0 0 0 3px rgba(110,203,138,0), 0 0 0 rgba(110,203,138,0); }
  30%  { box-shadow: inset 0 0 0 3px rgba(110,203,138,0.75), 0 0 26px rgba(110,203,138,0.6); }
  100% { box-shadow: inset 0 0 0 3px rgba(110,203,138,0), 0 0 0 rgba(110,203,138,0); }
}

/* Contextual theory bridge in completion panel */
.theory-bridge {
  margin-top: 20px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(110,203,138,0.08), rgba(232,200,134,0.08));
  border: 1px solid rgba(110,203,138,0.35);
  border-radius: 14px;
  text-align: center;
  animation: cineFadeIn 0.5s ease-out 1.2s both;
}
.theory-bridge .tb-head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px; color: #e8f5d5; margin-bottom: 6px;
}
.theory-bridge .tb-body {
  font-size: 14px; color: rgba(244,234,214,0.82);
  margin-bottom: 12px; line-height: 1.45;
}
.theory-bridge .tb-cta {
  font-size: 14px; padding: 10px 18px;
  background: linear-gradient(135deg, #6ecb8a, #8fd9a1);
  color: #0a1f12; border: none; font-weight: 600;
}
.theory-bridge .tb-cta:hover { filter: brightness(1.08); }

/* Canon-in-D "real song" bridge (primary reward card on b-01b completion).
   Same structure as .theory-bridge but uses the cl-04 Canon accent (#4ab09a)
   so the two cards read as reward-vs-theory, not identical twins. */
.song-bridge {
  margin-top: 20px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(74,176,154,0.12), rgba(232,184,122,0.08));
  border: 1px solid rgba(74,176,154,0.42);
  border-radius: 14px;
  text-align: center;
  animation: cineFadeIn 0.5s ease-out 1.0s both;
}
.song-bridge .sb-head {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px; color: #eaf7f2; margin-bottom: 6px;
}
.song-bridge .sb-body {
  font-size: 14px; color: rgba(244,234,214,0.85);
  margin-bottom: 12px; line-height: 1.45;
}
.song-bridge .sb-cta {
  font-size: 14px; padding: 10px 18px;
  background: linear-gradient(135deg, #4ab09a, #6fc9b4);
  color: #07221c; border: none; font-weight: 700;
}
.song-bridge .sb-cta:hover { filter: brightness(1.08); }

/* Sequence cursor + hit states (applied to VexFlow stavenote <g> nodes) */
.vf-stavenote.staff-cursor {
  fill: #d97706 !important;
}
.vf-stavenote.staff-cursor path,
.vf-stavenote.staff-cursor ellipse,
.vf-stavenote.staff-cursor rect {
  stroke: #d97706 !important;
  fill: #d97706 !important;
}
.vf-stavenote.staff-done path,
.vf-stavenote.staff-done ellipse,
.vf-stavenote.staff-done rect {
  stroke: #16a34a !important;
  fill: #16a34a !important;
}
.vf-stavenote.staff-hit { animation: staffHit 0.4s ease-out; }
.vf-stavenote.staff-shake { animation: staffShake 0.32s ease-in-out; }
@keyframes staffHit {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes staffShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Mic calibration overlay */
.mic-cal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,8,6,0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  animation: cineFadeIn 0.3s ease-out;
}
.mic-cal-card {
  background: linear-gradient(180deg, #1a1410, #0f0c09);
  border: 1px solid rgba(232,200,134,0.4);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 420px; width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(232,200,134,0.15);
}
.mic-cal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; color: #e8c886; margin-bottom: 14px;
}
.mic-cal-step {
  font-size: 16px; color: #f4ead6; margin-bottom: 14px; line-height: 1.5;
}
.mic-cal-meter {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 4px; overflow: hidden; margin: 14px 0;
}
.mic-cal-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #e8c886, #ffd68a);
  transition: width 0.1s linear;
}
.mic-cal-hint { font-size: 13px; color: rgba(244,234,214,0.7); margin-bottom: 18px; }
.mic-cal-actions { display: flex; justify-content: center; gap: 10px; }

/* MI-1 step 2 (2026-07-10): global Connect Mic button in piano-shell.
   State classes: idle | busy | connected | error. Matches the visual
   language of the existing Connect MIDI button. */
.mic-btn {
  /* inherits .controls button base */
  transition: border-color 120ms, color 120ms, background 120ms;
}
.mic-btn-idle       { }
.mic-btn-busy       { color: #e8c886; border-color: rgba(232,200,134,0.4); }
.mic-btn-connected  { color: #86efac; border-color: rgba(134,239,172,0.5); background: rgba(134,239,172,0.06); }
.mic-btn-error      { color: #fbbf24; border-color: rgba(251,191,36,0.5); }
.mic-btn[disabled]  { opacity: 0.55; cursor: not-allowed; }

.mic-status { font-size: 13px; color: var(--muted); }
.mic-status-info { color: var(--muted); }
.mic-status-ok   { color: #86efac; }
.mic-status-warn { color: #fbbf24; }

/* MI-1 step 2 overlay — appears during measuring-room + play-a-note.
   Visual style borrowed from the retired mic-cal-overlay so it feels
   familiar. */
.mic-overlay {
  position: fixed; inset: 0;
  background: rgba(10,8,6,0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  animation: cineFadeIn 0.3s ease-out;
}
.mic-overlay-card {
  background: linear-gradient(180deg, #1a1410, #0f0c09);
  border: 1px solid rgba(232,200,134,0.4);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 420px; width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(232,200,134,0.15);
}
.mic-overlay-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; color: #e8c886; margin-bottom: 14px;
}
.mic-overlay-step {
  font-size: 16px; color: #f4ead6; margin-bottom: 14px; line-height: 1.5;
}
.mic-overlay-hint {
  font-size: 13px; color: rgba(244,234,214,0.7); margin-bottom: 18px;
}
.mic-overlay-actions { display: flex; justify-content: center; gap: 10px; }

/* MI-1 step 2b diagnostic HUD — last-detected notes strip.
   Only visible while mic is Connected; hidden otherwise. */
.mic-diag {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(232, 200, 134, 0.08);
  border: 1px solid rgba(232, 200, 134, 0.2);
  color: #e8c886;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Phase 13: Speed layer + mini staff preview ===== */
.speed-bonus-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 6px 12px;
  background: linear-gradient(90deg, #fde68a, #fbbf24);
  color: #78350f; font-weight: 700; font-size: 13px;
  border-radius: 999px; box-shadow: 0 4px 14px rgba(251,191,36,0.45);
  animation: speedChipPop 0.5s ease-out both;
}
@keyframes speedChipPop {
  0% { transform: scale(0.6) translateY(8px); opacity: 0; }
  60% { transform: scale(1.15) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.reward-chip.speed {
  background: linear-gradient(90deg, #fef3c7, #fcd34d);
  color: #78350f; border: 1px solid #fbbf24;
}
.reward-chip.fluent {
  background: linear-gradient(90deg, #fde68a, #f59e0b);
  color: #422006; border: 1px solid #d97706;
  box-shadow: 0 0 18px rgba(245,158,11,0.55);
  animation: fluentGlow 1.8s ease-in-out infinite alternate;
}
@keyframes fluentGlow {
  from { box-shadow: 0 0 12px rgba(245,158,11,0.4); }
  to   { box-shadow: 0 0 22px rgba(245,158,11,0.75); }
}

/* Mini "You can spot X instantly" preview */
.mini-staff-preview {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin-top: 12px; padding: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  animation: miniPreviewFade 0.9s ease-out 0.4s both;
}
@keyframes miniPreviewFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msp-staff { background: #fdf7e7; border-radius: 8px; padding: 2px; }
.msp-arrow { font-size: 22px; color: #e8c886; font-weight: 700; }
.msp-key {
  width: 44px; height: 70px; position: relative;
}
.msp-key-white {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #fff, #f5e9cf);
  border: 2px solid #16a34a;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 14px rgba(22,163,74,0.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
  animation: mspKeyPulse 1.6s ease-in-out infinite;
}
@keyframes mspKeyPulse {
  0%,100% { box-shadow: 0 0 10px rgba(22,163,74,0.4); }
  50%     { box-shadow: 0 0 20px rgba(22,163,74,0.8); }
}
.msp-key-label {
  font-weight: 800; font-size: 15px; color: #16a34a;
}
.msp-caption {
  width: 100%; text-align: center; font-size: 13px;
  color: rgba(244,234,214,0.9); margin-top: 4px;
}
.msp-caption strong { color: #fde68a; }

/* ===== Phase 14: Mastery Achieved (replaces +0 XP) + Chain Identity ===== */
.cp-xp.mastery-maxed {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin: 14px 0;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(253,230,138,0.14), rgba(245,158,11,0.08));
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 14px;
  animation: masteryShimmer 2.4s ease-in-out infinite alternate;
}
@keyframes masteryShimmer {
  from { box-shadow: 0 0 10px rgba(245,158,11,0.25); }
  to   { box-shadow: 0 0 22px rgba(245,158,11,0.55); }
}
.cp-xp.mastery-maxed .mm-icon { font-size: 28px; }
.cp-xp.mastery-maxed .mm-text {
  font-weight: 800; font-size: 18px;
  background: linear-gradient(90deg, #fde68a, #f59e0b, #fde68a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cp-xp.mastery-maxed .mm-sub {
  font-size: 12px; color: rgba(244,234,214,0.7);
  letter-spacing: 0.3px;
}

/* Chain Identity chips */
.reward-chip.chain-hint {
  background: linear-gradient(90deg, rgba(251,191,36,0.15), rgba(245,158,11,0.15));
  color: #fde68a; border: 1px dashed #fbbf24;
  animation: chainHintPulse 2s ease-in-out infinite;
}
@keyframes chainHintPulse {
  0%,100% { opacity: 0.85; }
  50%     { opacity: 1; }
}
.reward-chip.chain-fire {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #fff7ed; border: 1px solid #dc2626; font-weight: 800;
  box-shadow: 0 0 18px rgba(239,68,68,0.55);
  animation: chainFireGlow 1.4s ease-in-out infinite alternate;
}
@keyframes chainFireGlow {
  from { box-shadow: 0 0 12px rgba(239,68,68,0.4); }
  to   { box-shadow: 0 0 24px rgba(239,68,68,0.85); }
}

/* ==========================================================================
   Phase 16 — Mistake Intelligence + Chain Anticipation
   ========================================================================== */

/* Inline coaching tip shown after the 3rd miss on the same note. */
.mistake-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, #fff7e0 0%, #ffeec7 100%);
  border: 1px solid #f4c87a;
  border-left: 4px solid #e8a034;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0 0;
  color: #4a2d0a;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 6px 18px rgba(232, 160, 52, 0.18);
  animation: mistakeTipIn 0.35s ease-out;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mistake-tip .mt-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.mistake-tip .mt-body { flex: 1; min-width: 0; }
.mistake-tip .mt-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
  color: #3a2205;
}
.mistake-tip .mt-hint { opacity: 0.88; }
.mistake-tip.fade-out {
  opacity: 0;
  transform: translateY(-4px);
}
@keyframes mistakeTipIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Green flash on the staff note when a tip is shown — reinforces position ↔ name. */
.vf-stavenote.staff-tipped {
  animation: staffTippedFlash 1.4s ease-in-out;
}
@keyframes staffTippedFlash {
  0%   { filter: none; }
  20%  { filter: drop-shadow(0 0 6px #22c55e) drop-shadow(0 0 10px #22c55e); }
  100% { filter: none; }
}

/* Close-loop micro-chip: "🟢 Got it — that's E" after user nails a previously-tipped note. */
.got-it-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 11px;
  background: linear-gradient(90deg, #dcfce7, #bbf7d0);
  border: 1px solid #22c55e;
  border-radius: 999px;
  color: #14532d;
  font-size: 13px;
  font-weight: 600;
  animation: gotItPop 0.4s ease-out;
}
@keyframes gotItPop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Preview + Earn: player entry breadcrumb.
   Positive framing for lessons that can be played now but not yet earn credit.
   Quiet, warm, NOT a lock — this should feel like an invitation, not a barrier. */
.earn-breadcrumb {
  margin: 10px 0 14px;
  padding: 10px 14px;
  background: rgba(201, 165, 90, 0.12);
  border: 1px solid rgba(201, 165, 90, 0.35);
  border-radius: 10px;
  color: #f4ead6;
  font-size: 13.5px;
  line-height: 1.35;
}
.earn-breadcrumb strong { color: #ffd98a; font-weight: 700; }

/* In-lesson streak-2 anticipation banner — the real push beyond the completion chip. */
.chain-anticipation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(232,200,134,0.18), rgba(245,158,11,0.12));
  border: 1px dashed #e8c886;
  border-radius: 12px;
  color: #f4ead6;
  animation: cabPulse 2.2s ease-in-out infinite;
}
.chain-anticipation-banner .cab-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chain-anticipation-banner .cab-flash {
  font-size: 24px;
  animation: cabFlash 1.3s ease-in-out infinite;
}
.chain-anticipation-banner .cab-title {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
}
.chain-anticipation-banner .cab-sub {
  font-size: 12.5px;
  opacity: 0.78;
  margin-top: 2px;
}
.chain-anticipation-banner .cab-progress {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.chain-anticipation-banner .cab-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(232,200,134,0.25);
  border: 1px solid rgba(232,200,134,0.5);
}
.chain-anticipation-banner .cab-dot.filled {
  background: #e8c886;
  box-shadow: 0 0 8px rgba(232,200,134,0.7);
}
@keyframes cabPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,200,134,0); }
  50%     { box-shadow: 0 0 18px 0 rgba(232,200,134,0.22); }
}
@keyframes cabFlash {
  0%,100% { opacity: 0.75; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.12); }
}

/* ==========================================================================
   Sheet Music Viewer — OSMD-powered modal with a Simply Piano-style follow cursor
   ========================================================================== */
/* =========================================================================
   Sheet music viewer — 61B redesign (2026-05-16)
   "Premium PianoBoss" shell around OSMD: dark charcoal topbar + footer
   matching the rest of the app, cream sheet body for legibility, brass
   accents on title and action buttons, larger close target, metadata
   chips (difficulty / tempo / key / hand).
   ========================================================================= */
.sheet-viewer-host {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.sheet-viewer-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 16, 0.78);
  backdrop-filter: blur(4px);
}
.sheet-viewer-modal {
  position: relative;
  width: min(1100px, 94vw);
  height: min(86vh, 920px);
  background: #faf8f2;
  color: #1a1a22;
  border: 1px solid rgba(232,200,134,0.5);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(232,200,134,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Topbar: dark chrome with close-x | meta | actions ---------- */
.sheet-viewer-topbar {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #1a1a24, #14141c);
  border-bottom: 1px solid rgba(232,200,134,0.28);
  color: #f5efde;
}
.sheet-viewer-close-x {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(232,200,134,0.08);
  border: 1px solid rgba(232,200,134,0.25);
  color: #e8c886;
  font-size: 22px; font-weight: 400;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.sheet-viewer-close-x:hover {
  background: rgba(232,200,134,0.18);
  border-color: rgba(232,200,134,0.5);
}
.sheet-viewer-close-x:active { transform: scale(0.96); }
.sheet-viewer-meta {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; /* allow ellipsis */
}
.sheet-viewer-title {
  font-size: 18px; font-weight: 700;
  color: #f1e6c9;
  letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-viewer-composer {
  font-size: 13px;
  color: rgba(232,200,134,0.7);
  letter-spacing: 0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-viewer-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.sheet-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(232,200,134,0.12);
  border: 1px solid rgba(232,200,134,0.3);
  color: #f1e6c9;
}
.sheet-chip-diff-easy         { background: rgba(120,200,140,0.18); border-color: rgba(120,200,140,0.45); color: #c4e8d0; }
.sheet-chip-diff-intermediate { background: rgba(232,200,134,0.18); border-color: rgba(232,200,134,0.55); color: #f1e6c9; }
.sheet-chip-diff-advanced     { background: rgba(220,140,110,0.18); border-color: rgba(220,140,110,0.55); color: #f5d4c2; }
.sheet-chip-tempo, .sheet-chip-key, .sheet-chip-hand {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
  color: rgba(241,230,201,0.92);
  text-transform: none; letter-spacing: 0.1px;
}
.sheet-viewer-actions {
  display: flex; align-items: center; gap: 8px;
}
.sheet-action-btn {
  padding: 8px 14px; font-size: 13px;
  background: rgba(232,200,134,0.08);
  color: #f1e6c9;
  border: 1px solid rgba(232,200,134,0.28);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.sheet-action-btn:hover {
  background: rgba(232,200,134,0.18);
  border-color: rgba(232,200,134,0.5);
}
.sheet-action-btn:active { transform: scale(0.97); }
.sheet-action-btn.btn-primary {
  background: linear-gradient(180deg, var(--brass-hi, #e8c886), var(--brass, #c8a86a));
  color: #1a1410;
  border-color: rgba(232,200,134,0.7);
  font-weight: 700;
}
.sheet-action-btn.btn-primary:hover {
  background: linear-gradient(180deg, #f0d399, var(--brass-hi, #e8c886));
}

/* ---------- Body: cream sheet area (unchanged from 61A) ---------- */
.sheet-viewer-body {
  flex: 1; overflow: auto; padding: 18px;
  background: #faf8f2;
  scroll-behavior: smooth;
}
.sheet-viewer-loading {
  padding: 40px; text-align: center; color: #5a4c2e;
  font-size: 14px;
}
#sheet-viewer svg { max-width: 100%; height: auto; }
/* OSMD cursor — keep amber highlight visible */
#sheet-viewer img[id^="cursorImg"],
#sheet-viewer [id^="cursorImg"] {
  opacity: 0.45 !important;
}

/* ---------- 61C: Playback-linked mini keyboard ---------- */
/* Sits between the cream sheet body and the dark footer. Display-only —
   highlights the notes currently sounding in RH (brass) or LH (teal). Same
   beat clock as the OSMD cursor (single source of truth). */
.sheet-mini-piano-row {
  display: flex; align-items: stretch;
  gap: 12px;
  padding: 8px 16px;
  background: #14141c;
  border-top: 1px solid rgba(232,200,134,0.18);
}
.sheet-mini-range {
  flex: 0 0 auto;
  align-self: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(232,200,134,0.7);
  white-space: nowrap;
  padding: 4px 0;
}
.sheet-mini-piano-scroll {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,200,134,0.4) transparent;
}
.sheet-mini-piano-scroll::-webkit-scrollbar { height: 6px; }
.sheet-mini-piano-scroll::-webkit-scrollbar-thumb { background: rgba(232,200,134,0.4); border-radius: 3px; }
.sheet-mini-piano {
  position: relative;
  display: flex;
  height: 64px;
  /* Default width ≈ 1100px; scrolls if wider ranges (extended) overflow */
  min-width: 100%;
}
.sheet-mini-key {
  position: relative;
  user-select: none;
  pointer-events: none; /* v1 is display-only */
  transition: background-color 0.08s ease, box-shadow 0.08s ease;
}
.sheet-mini-key-white {
  background: #f5efde;
  border-right: 1px solid #b8a875;
  border-radius: 0 0 3px 3px;
  height: 100%;
}
.sheet-mini-key-white:last-child { border-right: none; }
.sheet-mini-key-black {
  position: absolute;
  top: 0;
  height: 64%;
  background: #1a1a22;
  border: 1px solid #0a0a10;
  border-radius: 0 0 2px 2px;
  z-index: 2;
}
/* Active highlights — RH (brass) vs LH (teal) */
.sheet-mini-key-white.active-rh {
  background: linear-gradient(180deg, #f0d399, var(--brass, #e8c886));
  box-shadow: 0 0 0 1px rgba(232,200,134,0.7) inset, 0 0 8px rgba(232,200,134,0.6);
}
.sheet-mini-key-black.active-rh {
  background: linear-gradient(180deg, #c8a86a, #8a6e3a);
  box-shadow: 0 0 0 1px rgba(232,200,134,0.7) inset, 0 0 8px rgba(232,200,134,0.6);
}
.sheet-mini-key-white.active-lh {
  background: linear-gradient(180deg, #b4e0e0, #7ec8c8);
  box-shadow: 0 0 0 1px rgba(126,200,200,0.7) inset, 0 0 8px rgba(126,200,200,0.5);
}
.sheet-mini-key-black.active-lh {
  background: linear-gradient(180deg, #5ca6a6, #3e7878);
  box-shadow: 0 0 0 1px rgba(126,200,200,0.7) inset, 0 0 8px rgba(126,200,200,0.5);
}

/* ---------- Footer: dark chrome with zoom cluster + legend ---------- */
.sheet-viewer-footer {
  padding: 10px 16px;
  border-top: 1px solid rgba(232,200,134,0.28);
  background: linear-gradient(180deg, #14141c, #0e0e15);
  color: rgba(232,200,134,0.7);
  font-size: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.sheet-viewer-zoom-cluster {
  display: inline-flex; align-items: center; gap: 4px;
}
.sheet-zoom-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font-size: 16px;
  background: rgba(232,200,134,0.08);
  color: #e8c886;
  border: 1px solid rgba(232,200,134,0.25);
  border-radius: 6px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sheet-zoom-btn:hover {
  background: rgba(232,200,134,0.18);
  border-color: rgba(232,200,134,0.5);
}
.sheet-viewer-zoom {
  min-width: 46px; text-align: center; font-size: 12px;
  color: rgba(241,230,201,0.85); font-weight: 600;
}
.sheet-legend-item {
  justify-self: center; text-align: center;
}
.sheet-legend-dot {
  display: inline-block; width: 10px; height: 12px;
  background: rgba(232,200,134,0.65);
  border: 1px solid rgba(138,110,58,0.6);
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 6px;
}

/* ---------- Practice mode status pill (right side of footer) ---------- */
.sheet-practice-status {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 600; font-size: 12px;
  background: rgba(232,200,134,0.25);
  border: 1px solid rgba(232,200,134,0.4);
  color: #f1e6c9;
}
.sheet-practice-status.wait  { background: rgba(232,200,134,0.4); border-color: rgba(232,200,134,0.6); color: #f9efd2; }
.sheet-practice-status.good  { background: rgba(120,200,140,0.3); border-color: rgba(120,200,140,0.6); color: #c4e8d0; }
.sheet-practice-status.wrong { background: rgba(220,110,110,0.28); border-color: rgba(220,110,110,0.55); color: #f5d4c2; }
.sheet-practice-status.done  { background: rgba(232,200,134,0.5); border-color: rgba(232,200,134,0.7); color: #f9efd2; }

/* Sheet button in the play-along picker */
.sheet-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- Mobile / phone-landscape ---------- */
@media (max-width: 720px) {
  .sheet-viewer-modal { width: 98vw; height: 94vh; border-radius: 10px; }
  .sheet-viewer-topbar {
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .sheet-viewer-close-x { width: 36px; height: 36px; font-size: 20px; }
  .sheet-viewer-title { font-size: 15px; }
  .sheet-viewer-composer { font-size: 12px; }
  .sheet-chip { padding: 2px 7px; font-size: 10px; }
  .sheet-action-btn { padding: 6px 10px; font-size: 12px; }
  .sheet-viewer-body { padding: 12px; }
  .sheet-viewer-footer {
    padding: 8px 12px;
    grid-template-columns: auto 1fr;
    grid-template-areas: "zoom legend" "status status";
  }
  .sheet-viewer-zoom-cluster { grid-area: zoom; }
  .sheet-legend-item { grid-area: legend; font-size: 11px; }
  .sheet-practice-status { grid-area: status; justify-self: center; margin-top: 4px; }
  /* 61C: shrink mini piano on phone */
  .sheet-mini-piano-row { padding: 6px 10px; gap: 8px; }
  .sheet-mini-range { font-size: 9px; }
  .sheet-mini-piano { height: 48px; }
}

/* ---------- iPad portrait (narrow but tablet-roomy) ---------- */
@media (min-width: 721px) and (max-width: 1024px) {
  .sheet-viewer-modal { width: 96vw; height: 92vh; }
  .sheet-viewer-title { font-size: 17px; }
}

/* =========================================================================
   Phase 1A redesign — Lesson Sidebar (left rail)
   2026-04-26: premium two-column lesson layout. Sidebar lives on desktop
   widths only (>=1024px); stacks above main lesson content on smaller
   screens. Mirrors the Preview + Earn state vocabulary used by the track-
   page lesson cards (✓ done / 👀 attempted / 🎯 earn-blocked / ▸ fresh).
   ========================================================================= */

/* Default (mobile-first): sidebar stacks above main lesson content. */
.lesson-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.lesson-main { min-width: 0; } /* allow flex/grid child to shrink */

/* Desktop: sidebar is absolutely positioned inside a positioned lesson view so
   it doesn't stretch the layout to its own (tall) height. Without this, the
   grid row sizes to the sidebar's ~700px height and shoves the piano (which
   lives BELOW #view-lesson in the document) far off-screen — meaning the
   student can't reach the keyboard to practice the prompt. The sidebar still
   shows at the top of the lesson view; it scrolls away as the user goes down
   to the piano (acceptable: you don't need lesson nav while playing). When
   the user wants to switch lessons, they scroll back up. */
@media (min-width: 1024px) {
  #view-lesson.active {
    display: block;
    position: relative;
    padding-left: 304px; /* 280 sidebar + 24 gutter */
  }
  .lesson-sidebar {
    /* 2026-04-27 final: sidebar is absolute inside #view-lesson with bottom:0
       so its height is tied to the lesson view's actual height. This means
       the sidebar NEVER extends below #view-lesson into the piano area —
       when the lesson content is short, the sidebar stops at the lesson's
       bottom (with internal scroll if it's a long lesson list). Earlier
       attempts: absolute+max-height (sidebar bled past short lessons into
       piano area), fixed (sidebar always at viewport bottom, still
       competed with piano). bottom:0 ties height to parent — clean. */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    overflow-y: auto;
    margin-bottom: 0;
  }
}

/* Sidebar header (track title) */
.ls-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ls-track-icon { font-size: 16px; }
.ls-track-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--brass-hi);
  letter-spacing: 0.3px;
}

/* Lesson list */
.ls-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ls-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.ls-item:hover {
  background: var(--bg-2);
  border-color: var(--line);
}
.ls-item .ls-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.ls-item .ls-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ls-item .ls-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-item .ls-sub {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-item .ls-icon {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Active lesson — gold gradient + glow. */
.ls-item.active {
  background: linear-gradient(180deg, rgba(201,165,90,0.16) 0%, rgba(201,165,90,0.04) 100%);
  border-color: var(--brass-lo);
  box-shadow: 0 0 0 1px rgba(201,165,90,0.05) inset;
}
.ls-item.active .ls-num {
  background: var(--brass);
  color: var(--ebony);
  border-color: var(--brass-hi);
  box-shadow: 0 0 12px var(--brass-glow);
}
.ls-item.active .ls-title { color: var(--brass-hi); font-weight: 600; }
.ls-item.active .ls-icon { color: var(--brass-hi); }

/* Completed */
.ls-item.done .ls-num {
  background: rgba(127,176,105,0.18);
  border-color: rgba(127,176,105,0.5);
  color: var(--success);
}
.ls-item.done .ls-icon { color: var(--success); }
.ls-item.done.active .ls-num {
  /* Active + done — keep the gold treatment, success state is implicit. */
  background: var(--brass);
  border-color: var(--brass-hi);
  color: var(--ebony);
}

/* Earn-blocked (Preview + Earn — playable, mastery gated) */
.ls-item.earn-blocked .ls-icon { opacity: 0.85; }
.ls-item.attempted .ls-icon { opacity: 0.85; }

/* Progress card */
.ls-progress {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.ls-progress-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}
.ls-progress-stat {
  font-size: 14px;
  color: var(--text);
  margin-top: 6px;
  font-weight: 500;
}
.ls-progress-bar {
  height: 6px;
  background: var(--bg-1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--line);
}
.ls-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi));
  border-radius: 3px;
  transition: width 0.3s;
}
.ls-progress-pct {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Quick Tip card */
.ls-tip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.ls-tip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brass-hi);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.ls-tip-icon { font-size: 13px; }
.ls-tip-body {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* =========================================================================
   Phase 1B redesign — Track page polish (Mockup 1 look-and-feel)
   2026-04-26: visual polish layer over the track view. Adds stats quartet
   (rendered as 3 cards — concepts/songs/lessons — only data we actually
   have), Continue Your Journey panel, and Learning Journey horizontal
   step path. No backend / data-model changes; uses existing Storage +
   Progression. Reuses CSS variables exclusively (no new color tokens).
   ========================================================================= */

/* Stats row — 3 equal cards on desktop, stacked on narrow */
.track-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 768px) {
  .track-stats { grid-template-columns: 1fr; }
}
.track-stat {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 0.15s, transform 0.15s;
}
.track-stat:hover {
  border-color: var(--brass-lo);
  transform: translateY(-1px);
}
.track-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.track-stat-icon--concepts { background: rgba(127,176,105,0.15); border-color: rgba(127,176,105,0.4); }
.track-stat-icon--songs    { background: rgba(168,124,234,0.15); border-color: rgba(168,124,234,0.4); }
.track-stat-icon--lessons  { background: rgba(201,165,90,0.15);  border-color: var(--brass-lo); }
.track-stat-body { min-width: 0; flex: 1; }
.track-stat-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}
.track-stat-value {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ivory);
  margin-top: 4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.track-stat-divider {
  font-size: 18px;
  color: var(--muted);
  font-weight: 500;
}
.track-stat-foot {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

/* Continue + Journey two-column row */
.track-continue-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 1024px) {
  .track-continue-row { grid-template-columns: 1fr; }
}
.track-continue,
.track-journey {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.track-continue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tile-accent, var(--brass-hi)), transparent);
}

.track-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.track-section-icon { font-size: 16px; }
.track-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--brass-hi);
  letter-spacing: 0.2px;
}
.track-section-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.track-continue-card {
  background: var(--bg-2);
  border: 1px solid var(--brass-lo);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 0 24px rgba(201,165,90,0.06) inset;
}
.track-continue-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(201,165,90,0.18);
  border: 1px solid var(--brass-lo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.track-continue-body {
  min-width: 0;
  flex: 1;
}
.track-continue-lesson {
  font-size: 14px;
  font-weight: 600;
  color: var(--ivory);
  margin-bottom: 2px;
  /* Allow long lesson titles ("Welcome — Before You Touch a Key") to wrap to
     2 lines instead of getting truncated. Cap at 2 lines via line-clamp so
     the card height stays predictable. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.track-continue-type {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.track-continue-cta {
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  color: var(--ebony);
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 16px rgba(201,165,90,0.3);
  font-family: inherit;
  white-space: nowrap;
}
.track-continue-cta:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 22px rgba(201,165,90,0.5);
}
.track-continue-done .track-continue-card { display: none; }
.track-continue-done .track-section-sub { margin-bottom: 0; }

/* Learning Journey — horizontal stepped path */
.track-journey-path {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-top: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.track-journey-path::-webkit-scrollbar { height: 6px; }
.track-journey-path::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
.tjp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 84px;
  padding: 4px 2px;
  background: transparent;
  border: none;
  font-family: inherit;
}
/* Current step is the focal point — give its label more breathing room so
   long titles don't wrap to 3 lines under the gold circle. */
.tjp-step.current { min-width: 100px; }
.tjp-step.current .tjp-label { max-width: 100px; }
.tjp-node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-dim);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tjp-step:hover .tjp-node {
  transform: scale(1.08);
  border-color: var(--brass-lo);
}
.tjp-label {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  max-width: 84px;
  line-height: 1.25;
  white-space: normal;
  overflow: hidden;
  /* Cap at 2 lines so very-long titles don't blow out the row height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tjp-connector {
  flex: 1 0 14px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px);
  margin-top: 19px;
  align-self: flex-start;
}
.tjp-step.done .tjp-node {
  background: rgba(127,176,105,0.18);
  border-color: var(--success);
  color: var(--success);
}
.tjp-step.current .tjp-node {
  background: var(--brass);
  border-color: var(--brass-hi);
  color: var(--ebony);
  box-shadow: 0 0 14px var(--brass-glow);
}
.tjp-step.current .tjp-label {
  color: var(--brass-hi);
  font-weight: 600;
}

/* =========================================================================
   Phase 1C/D — Track filter chips, sticky piano, home level-tile polish
   2026-04-26: filter chips above lesson groups (All / Completed /
   In Progress / To Earn) — client-side hide/show via [data-filter] on
   #lesson-groups. Sticky piano shell so the keyboard stays reachable on
   short-content lessons. Home level-tile polish for visual consistency
   with the Mockup 1 language already applied to track pages.
   ========================================================================= */

/* Track filter chips */
.track-filters {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.track-filter-chip {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.track-filter-chip:hover {
  border-color: var(--brass-lo);
  color: var(--text);
}
.track-filter-chip.active {
  background: linear-gradient(180deg, rgba(201,165,90,0.18) 0%, rgba(201,165,90,0.06) 100%);
  border-color: var(--brass-hi);
  color: var(--brass-hi);
  font-weight: 600;
  box-shadow: 0 0 12px rgba(201,165,90,0.18);
}

/* Filter logic — hide non-matching cards. Default (data-filter=all) shows all. */
#lesson-groups[data-filter="done"] .lesson-card:not(.done) { display: none; }
#lesson-groups[data-filter="attempted"] .lesson-card:not(.attempted) { display: none; }
#lesson-groups[data-filter="earn-blocked"] .lesson-card:not(.earn-blocked) { display: none; }

/* =========================================================================
   Phase 1 final polish — Right-side Lesson Panel (Key Takeaways + Stats)
   2026-04-26: opt-in right rail rendered when a lesson defines `takeaways`
   and/or `estTime/difficulty/focus`. Lessons without those fields keep the
   prior 2-column layout (sidebar + main only) — fully backwards-compatible.
   ========================================================================= */

/* Mobile-first default: panel stacks below main when present */
.lesson-right-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
}
#view-lesson.active.has-right-panel .lesson-right-panel {
  display: flex;
  margin-top: 16px;
}

/* Desktop: 3-column layout (sidebar absolute left, right panel absolute right,
   main centered in between via padding). Only kicks in when has-right-panel. */
@media (min-width: 1024px) {
  #view-lesson.active.has-right-panel {
    padding-right: 304px; /* mirror of sidebar's 304px on the left */
  }
  #view-lesson.active.has-right-panel .lesson-right-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 280px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    margin-top: 0;
  }
}

.lr-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.lr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brass-hi);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.lr-icon { font-size: 14px; }

.lr-takeaways {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lr-takeaways li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.lr-check {
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.lr-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lr-stat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lr-stat-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--brass-hi);
}
.lr-stat-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.lr-stat-val {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  margin-top: 2px;
}

/* Piano shell — natural document flow (no sticky). The earlier sticky-bottom
   experiment overlapped the lesson content + obscured the Back button on
   short-viewport pages. Reverted 2026-04-26 per Jean's prod feedback:
   "poor design, I can't press the back button; that piano keyboard is blocking
   it. I don't like the way that piano stays static on all pages." Piano now
   sits below the lesson content where it's always been.

   2026-04-26 follow-up: piano shell starts at the container's left edge by
   default, which on desktop visually overlaps with the absolute-positioned
   lesson sidebar that occupies that same left column inside #view-lesson.
   Indent the piano shell to match the lesson-main column when a lesson is
   active so the keyboard sits to the right of the sidebar (or, more
   accurately, in the same column as the lesson content above it). Free Play
   view has no sidebar, so #view-lesson.active won't match and the piano
   stays at full container width there. */
@media (min-width: 1024px) {
  /* 2026-04-27 final: lesson sidebar (absolute, 280px wide, left:0 inside
     #view-lesson) and piano shell (sibling of #view-lesson, no padding by
     default) BOTH start at the container's left edge → they overlap on
     screen. Per Jean: "make them live in harmony with the piano." Fix:
     give the piano shell the same padding-left as #view-lesson so it sits
     in the same column as the lesson main content (right of the sidebar).
     Then use Grid centering so the piano centers WITHIN that right column
     — visually balanced under the lesson content above, no overlap with
     the sidebar. */
  #view-lesson.active ~ #piano-shell {
    padding-left: 304px; /* matches #view-lesson padding (sidebar 280 + 24 gutter) */
    display: grid;
    grid-template-columns: 1fr; /* one column = full available width */
    /* Children (.falling-stage, .piano-wrap, .controls) all fill this column,
       so they have IDENTICAL widths. Piano keys size responsively (piano.js
       derives white-key width from .piano-wrap clientWidth) — this keeps
       falling-tile X coords aligned with key positions and ensures the full
       lesson range fits the viewport (Jean: "we should have the whole
       keyboard showing"). */
  }
  /* 2026-04-28: All three children (.falling-stage, .piano, .controls) share
     the SAME column width (= piano's natural width). This is critical: the
     falling-note renderer computes tile X as `keyRect.left - stageRect.left`,
     so if falling-stage and piano have different widths/x-positions, tiles
     spawn off-axis from their target keys. The previous `width: 100%` rule
     made falling-stage wider than piano, so leftmost-key tiles (e.g. C3 LH
     bass anchors) rendered in the middle of the stage instead of over the
     C3 key. Reported by Jean 2026-04-28: "the falling window is too small
     compared to the keyboard." */
}

/* Home level-tile polish — match the Mockup 1 visual language used on the
   track page. Existing .level-tile gets a subtle gold accent strip on top
   when hovered, and the gold-glow on the CTA matches the Continue Resume
   button on the track page. Non-destructive: just visual layer over the
   existing structure. */
.level-tile {
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.level-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tile-accent, var(--brass-hi)), transparent);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.level-tile:hover::before { opacity: 1; }
.level-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,165,90,0.12);
}
.level-tile-cta {
  transition: filter 0.15s;
}
.level-tile:hover .level-tile-cta {
  filter: brightness(1.15);
}