/* Shared interface typography. Music glyphs and the mascot artwork keep their own styling. */
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/NunitoSans-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-brand: 'Nunito Sans', sans-serif;
  font-family: var(--font-ui);
  font-optical-sizing: auto;
}
body { font-size: 17px; line-height: 1.6; }
button, input, select, textarea { font-family: var(--font-ui); }
button, select { line-height: 1.4; }
h1, h2, h3, h4, .feedback-title, .progress h2, .result h1, dialog h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
}
main > section:not(#lobby) > h1,
main > section:not(#lobby) > h2,
.section-menu h1,
.flashcard-hub h2,
#note-practice h2 {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin-top: 12px;
  margin-bottom: 28px;
}
.menu-option strong { font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.menu-option > span:first-child > span { font-size: 17px; line-height: 1.55; font-weight: 400; }
main .primary, main .secondary, dialog .primary, dialog .secondary,
.flash-navigation button, .flash-quiz, .section-back, .text-btn {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}
.flashcard-hub label, .instrument-choice, legend, dialog label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
.flashcard-hub select, .key-panel select, .rhythm-lesson select, dialog select {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
.flashcard-hub .flash-progress {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .015em;
  color: #655f55;
  font-variant-numeric: tabular-nums;
}
.flashcard-hub .flash-answer h4 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
}
.flash-answer p { font-size: 18px; line-height: 1.55; margin: 8px 0; }
.flash-answer b { font-weight: 600; }
.segmented span, .mode-options b { font-size: 17px; font-weight: 600; }
.segmented small, .mode-options small { font-size: 15px; line-height: 1.5; font-weight: 400; }
.intro, .feedback-note, .new-profile-help, .progress p, dialog p { font-size: 16px; line-height: 1.65; }
.rhythm-lesson h2, .key-panel h2, .score-panel h2, .care-grid h3, dialog h3 {
  font-size: 23px;
  line-height: 1.3;
  font-weight: 700;
}
#rhythm-question, #keys-question { font-size: clamp(23px, 3vw, 28px); line-height: 1.35; }
.feedback-title { font-size: 32px; }
.answer-row { font-size: 16px; }
.answer-row strong { font-size: 19px; font-weight: 700; }
.music-caption, .quiet, .stats span, .metric span { font-size: 14px; line-height: 1.55; }
.stats strong, .metric strong, .result-score { font-variant-numeric: tabular-nums; }
dialog h2 { font-size: 30px; line-height: 1.2; }
.belt-dialog .board-kicker, .tournament-eyebrow { font-size: 13px; letter-spacing: .1em; }
.topbar .brand { font-family: var(--font-brand); font-weight: 900; letter-spacing: -.035em; }
@media (max-width: 600px) {
  body { font-size: 16px; }
  main > section:not(#lobby) > h1,
  main > section:not(#lobby) > h2,
  .section-menu h1, .flashcard-hub h2, #note-practice h2 { font-size: 32px; }
  .menu-option strong { font-size: 24px; }
  .menu-option > span:first-child > span { font-size: 16px; }
  .flashcard-hub select { font-size: 16px; padding-left: 12px; padding-right: 12px; }
  .flashcard-hub .flash-answer h4 { font-size: 28px; }
  dialog h2 { font-size: 27px; }
  .rhythm-lesson h2, .key-panel h2, .score-panel h2, .care-grid h3, dialog h3 { font-size: 21px; }
}

/* Keep rounded lettering exclusive to the Slide Sensei wordmark. */
.deck-choice strong, .flashcard-hub .deck-choices legend, .board-heading h3, .tournament-hero h3, .tournament-stage h3 { font-weight:700; }
.deck-choice strong, .menu-option strong { letter-spacing:-.015em; }