:root{
    --cream: #FAF3E6;
    --cream-deep: #F0E4CE;
    --paper: #FFFDF8;
    --wood: #8A5A34;
    --wood-deep: #6B4426;
    --wood-light: #C6893F;
    --ink: #3B2A1E;
    --ink-soft: #6B5847;
    --correct: #5C9C7C;
    --correct-deep: #3F7A5E;
    --wrong: #C1556B;
    --wrong-deep: #A1354C;
    --glass-bg: rgba(255,253,248,0.55);
    --glass-bg-strong: rgba(255,253,248,0.78);
    --glass-border: rgba(255,255,255,0.65);
    --shadow: 0 8px 32px rgba(139,90,43,0.16);
    --shadow-sm: 0 4px 14px rgba(139,90,43,0.12);
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 12px;
  }

  *{ box-sizing: border-box; }
  html, body{ margin:0; padding:0; min-height:100%; }

  body{
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--ink);
    background:
      radial-gradient(circle at 15% -10%, rgba(198,137,63,0.28), transparent 55%),
      radial-gradient(circle at 110% 15%, rgba(193,85,107,0.16), transparent 50%),
      radial-gradient(circle at 20% 115%, rgba(92,156,124,0.14), transparent 45%),
      var(--cream);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  .app{
    max-width: 460px;
    margin: 0 auto;
    padding: 24px 18px calc(28px + env(safe-area-inset-bottom));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* ---------- Desktop banner ---------- */
  .desktop-banner{
    display:flex; align-items:center; gap:10px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 0.78rem;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
  }
  .desktop-banner span.icon{ font-size:1.1rem; flex-shrink:0; }
  .desktop-banner button{
    margin-left:auto;
    background:none; border:none; cursor:pointer;
    font-size:1rem; color: var(--ink-soft);
    line-height:1; padding:2px 4px;
    flex-shrink:0;
  }

  /* ---------- Header ---------- */
  header{ display:flex; align-items:center; gap:12px; margin-bottom: 18px; }
  .clef-badge{
    width:46px; height:46px; border-radius: 14px;
    background: linear-gradient(155deg, var(--wood-light), var(--wood-deep));
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-sm); flex-shrink:0;
  }
  .clef-badge svg{ width:26px; height:26px; }
  header h1{ font-family:'Fraunces', serif; font-weight:600; font-size: 1.55rem; margin:0; letter-spacing: 0.01em; color: var(--wood-deep); }
  header p{ margin:2px 0 0; font-size:0.8rem; color: var(--ink-soft); }

  /* ---------- Tabs ---------- */
  .tabs{
    display:flex; background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 999px; padding: 4px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
  }
  .tab-btn{
    flex:1; border:none; background: transparent; font-family:'Manrope', sans-serif;
    font-weight:700; font-size:0.92rem; color: var(--ink-soft); padding: 10px 0;
    border-radius: 999px; cursor:pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  }
  .tab-btn[aria-selected="true"]{
    background: linear-gradient(155deg, var(--wood-light), var(--wood));
    color: var(--paper); box-shadow: 0 4px 14px rgba(139,90,43,0.3);
  }

  section[role="tabpanel"]{ display:none; flex:1; }
  section[role="tabpanel"].active{ display:flex; flex-direction:column; }

  /* ---------- Score ---------- */
  .scorebar{ display:flex; justify-content:center; gap: 22px; margin-bottom: 14px; }
  .score-chip{
    display:flex; flex-direction:column; align-items:center;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px); border-radius: var(--radius-sm); padding: 6px 18px; min-width: 76px;
  }
  .score-chip .num{ font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem; color: var(--wood-deep); }
  .score-chip .lbl{ font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); }

  /* ---------- Staff card ---------- */
  .staff-card{
    background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 14px 6px 6px; position:relative; overflow:hidden;
  }
  .staff-card::before{
    content:""; position:absolute; inset:0;
    background: repeating-linear-gradient(115deg, rgba(139,90,43,0.035) 0 2px, transparent 2px 60px);
    pointer-events:none;
  }
  #staffSvg{ width:100%; height:auto; display:block; }
  .staff-line{ stroke: var(--ink); stroke-width:1.6; opacity:0.75; }
  .ledger-line{ stroke: var(--ink); stroke-width:1.6; opacity:0.6; }
  .notehead{ fill: var(--wood-deep); }
  .notehead.correct-flash{ fill: var(--correct-deep); }
  .notehead.wrong-flash{ fill: var(--wrong-deep); }
  .stem{ stroke: var(--wood-deep); stroke-width:1.8; }
  .clef-glyph{ fill: var(--ink); font-family: 'Fraunces', serif; }

  .note-anim{ animation: noteIn 0.38s cubic-bezier(.2,.9,.3,1.25); }
  @keyframes noteIn{ from{ opacity:0; transform: translateY(-8px) scale(0.85); } to{ opacity:1; transform: translateY(0) scale(1); } }

  .listen-row{ display:flex; justify-content:center; margin: 6px 0 4px; }
  .listen-btn{
    display:flex; align-items:center; gap:6px; background: transparent;
    border: 1px solid rgba(139,90,43,0.3); color: var(--wood-deep);
    font-family:'Manrope', sans-serif; font-weight:600; font-size: 0.78rem;
    padding: 6px 14px; border-radius: 999px; cursor:pointer;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .listen-btn:hover{ background: rgba(139,90,43,0.08); }
  .listen-btn:active{ transform: scale(0.96); }
  .listen-btn svg{ width:14px; height:14px; }

  /* ---------- Feedback ---------- */
  .feedback{ min-height: 26px; text-align:center; font-size:0.9rem; font-weight:700; margin: 12px 0 6px; color: var(--ink-soft); transition: color 0.2s ease; }
  .feedback.is-correct{ color: var(--correct-deep); }
  .feedback.is-wrong{ color: var(--wrong-deep); }

  /* ---------- Answer buttons ---------- */
  .answers{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
  .note-btn{
    font-family:'Fraunces', serif; font-weight:600; font-size: 1rem; padding: 16px 4px;
    border-radius: var(--radius-md); border: 1px solid var(--glass-border);
    background: var(--glass-bg); backdrop-filter: blur(10px); color: var(--wood-deep);
    cursor:pointer; box-shadow: var(--shadow-sm);
    transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .note-btn:active{ transform: scale(0.94); }
  .note-btn:focus-visible{ outline: 2px solid var(--wood-light); outline-offset:2px; }
  .note-btn:disabled{ cursor:default; }
  .note-btn.is-correct{ background: linear-gradient(155deg, var(--correct), var(--correct-deep)); color:#fff; border-color: transparent; }
  .note-btn.is-wrong{ background: linear-gradient(155deg, var(--wrong), var(--wrong-deep)); color:#fff; border-color: transparent; }

  /* ---------- Options ---------- */
  .opt-intro{ font-size:0.85rem; color: var(--ink-soft); line-height:1.5; margin: 0 0 16px; }
  .opt-card{
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px); border-radius: var(--radius-md);
    padding: 14px 16px 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
  }
  .opt-card h3{
    font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; margin: 0 0 3px;
    color: var(--wood-deep); display:flex; align-items:center; gap:8px;
  }
  .string-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
  .opt-card .opt-sub{ font-size:0.72rem; color: var(--ink-soft); margin:0 0 10px; }
  .chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{
    font-family:'Manrope', sans-serif; font-weight:700; font-size:0.85rem; padding: 8px 0; width: 44px;
    text-align:center; border-radius: 12px; border: 1px solid rgba(139,90,43,0.25);
    background: rgba(255,255,255,0.5); color: var(--ink-soft); cursor:pointer; transition: all 0.18s ease;
  }
  .chip[aria-pressed="true"]{
    background: linear-gradient(155deg, var(--wood-light), var(--wood)); color:#fff;
    border-color: transparent; box-shadow: 0 3px 10px rgba(139,90,43,0.3);
  }
  .chip.wide{ width:auto; padding: 8px 16px; }

  .opt-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top: 6px; }
  .count-badge{ font-size:0.78rem; color: var(--ink-soft); }
  .count-badge strong{ color: var(--wood-deep); }
  .reset-btn{
    font-family:'Manrope', sans-serif; font-weight:700; font-size:0.78rem; background: transparent;
    border: 1px solid rgba(193,85,107,0.4); color: var(--wrong-deep); padding: 8px 14px;
    border-radius: 999px; cursor:pointer;
  }
  .reset-btn:active{ transform: scale(0.96); }

  .warning-box{
    text-align:center; font-size:0.85rem; color: var(--wrong-deep);
    background: rgba(193,85,107,0.1); border: 1px solid rgba(193,85,107,0.25);
    border-radius: var(--radius-md); padding: 18px; margin-top: 6px;
  }

  footer{ text-align:center; font-size:0.68rem; color: var(--ink-soft); opacity:0.6; margin-top: 24px; }

  /* ---------- Onboarding modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; background: rgba(59,42,30,0.45);
    backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center;
    padding: 20px; z-index: 50;
  }
  .modal-card{
    background: var(--paper); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    max-width: 360px; width:100%; padding: 28px 24px; text-align:center;
  }
  .modal-card .clef-badge{ margin: 0 auto 14px; }
  .modal-card h2{ font-family:'Fraunces', serif; font-weight:600; font-size:1.35rem; margin: 0 0 6px; color: var(--wood-deep); }
  .modal-card p{ font-size:0.85rem; color: var(--ink-soft); margin: 0 0 20px; line-height:1.5; }
  .lang-choice{ display:flex; gap:12px; }
  .lang-btn{
    flex:1; font-family:'Manrope', sans-serif; font-weight:700; font-size:0.95rem;
    padding: 14px 8px; border-radius: var(--radius-md); border: 1px solid rgba(139,90,43,0.3);
    background: rgba(255,255,255,0.6); color: var(--wood-deep); cursor:pointer;
    transition: transform 0.15s ease, background 0.2s ease;
  }
  .lang-btn:hover{ background: rgba(198,137,63,0.15); }
  .lang-btn:active{ transform: scale(0.96); }

  /* ---------- Toast ---------- */
  .toast{
    position: fixed; left:50%; bottom: 22px; transform: translateX(-50%) translateY(12px);
    background: var(--wood-deep); color: var(--paper); font-size:0.78rem; font-weight:600;
    padding: 9px 18px; border-radius: 999px; box-shadow: var(--shadow);
    opacity:0; pointer-events:none; transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 60;
  }
  .toast.visible{ opacity:1; transform: translateX(-50%) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .note-anim{ animation:none; }
    *{ transition-duration: 0.01ms !important; }
  }