/* ─────────────────────────────────────────────────────────────────────────
   What Instrument Is It?! — styles.
   PK-5 visual system: paper neutrals + Chroma-Note family colors,
   Nunito throughout — titles 900, eyebrows 900 tracked-out. The paper
   palette is deliberate: this game reads as a bright listening lesson,
   not an arcade cabinet. Only the TYPE was aligned to the games.
   Mobile-first full-bleed; ≥901px becomes a floating card on paper
   (matches the other PK-5 games; nav.js sidebar kicks in at 901px).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Chroma-Note palette */
  --p-red: #E72829; --p-poppy: #EE5524; --p-orange: #F39422; --p-gold: #FFD25B;
  --p-yellow: #F1E606; --p-green: #6AB845; --p-mint: #65C081; --p-teal: #009999;
  --p-blue: #1E7FC3; --p-purple: #7B569E; --p-plum: #9F5B90; --p-pink: #EA6BA3;
  --p-navy: #1A233D; --p-brown: #512D1C;
  /* PK-5 paper + ink */
  --paper: #f5f5f3; --paper-light: #fbfbf9; --paper-deep: #ebebe8;
  --ink: #1f1d1a; --ink-soft: #4a463f; --ink-faded: #8a8478; --rule: #d8d4cb;
  --cta: #1E7FC3;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Nunito', 'Inter Tight', sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 6px; }

/* ── Shell ── */
.app-shell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 44px);
  padding: 0;
}
#app { width: 100%; background: #fff; min-height: calc(100vh - 44px); position: relative; overflow: hidden; }

@media (min-width: 901px) {
  html, body { background: var(--paper); }
  .app-shell { padding: 36px 40px 56px; }
  #app {
    width: min(880px, 100%);
    min-height: 0;
    border-radius: 20px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.04);
  }
}

.screen { padding: 26px 22px 40px; max-width: 760px; margin: 0 auto; }
@media (min-width: 901px) { .screen { padding: 34px 44px 48px; } }

/* ── Chroma bar ── */
.chroma-bar {
  height: 8px;
  background: linear-gradient(to right,
    #E72829 0% 12.5%, #F39422 12.5% 25%, #F1E606 25% 37.5%, #6AB845 37.5% 50%,
    #009999 50% 62.5%, #7B569E 62.5% 75%, #EA6BA3 75% 87.5%, #E72829 87.5% 100%);
}

/* ── Type ── */
.eyebrow {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.eyebrow-div { color: var(--rule); }
.back-link { color: var(--ink-faded); text-decoration: none; letter-spacing: 2px; }
.back-link:hover { color: var(--ink); }

.screen-title, .home-title, .results-title, .q-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin: 0 0 8px;
}
.screen-title { font-size: 28px; }
.screen-sub, .home-sub {
  font-size: 15.5px; font-weight: 600; color: var(--ink-soft);
  margin: 0 0 22px; line-height: 1.5; max-width: 52ch;
}

/* ── Buttons ── */
.big-btn {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 17px;
  color: #fff; background: var(--cta);
  border: none; border-radius: 14px; padding: 14px 26px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.14s var(--ease-snap), box-shadow 0.14s;
}
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.15); }
.big-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
.mid-btn {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px;
  color: var(--ink); background: var(--paper-light);
  border: 1.5px solid var(--rule); border-radius: 12px; padding: 12px 20px;
  transition: transform 0.14s, border-color 0.14s;
}
.mid-btn:hover { transform: translateY(-1px); border-color: var(--ink-faded); }
.quiet-btn {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13.5px;
  color: var(--ink-soft); background: transparent;
  border: 1.5px solid var(--rule); border-radius: 10px; padding: 9px 14px;
  transition: border-color 0.14s, color 0.14s;
}
.quiet-btn:hover:not(:disabled) { border-color: var(--ink-faded); color: var(--ink); }
.quiet-btn:disabled { opacity: 0.4; }

/* ── Family badge + dots ── */
.fam-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 11.5px;
  background: var(--fam); color: var(--fam-on);
  border-radius: 999px; padding: 3px 10px 3px 7px;
  vertical-align: middle; white-space: nowrap;
}
.fam-badge-glyph { display: inline-flex; }
.fam-dots { display: inline-flex; gap: 5px; }
.fam-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ── Instrument art (image with family-card fallback behind it) ── */
.inst-art {
  position: relative; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 16px;
  background: var(--fam-soft);
  color: var(--fam);
  overflow: hidden; flex-shrink: 0;
}
.inst-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 8px; background: var(--fam-soft);
  opacity: 0; transition: opacity 0.2s;  /* invisible until loaded — no broken-icon flash */
}
.inst-art img.ok { opacity: 1; }
.inst-art-fallback { display: grid; place-items: center; }

/* ── HOME ── */
.screen-home { text-align: center; padding-top: 40px; }
.home-title { font-size: clamp(34px, 6vw, 52px); line-height: 1.04; }
.home-sub { margin: 10px auto 30px; }
.home-cards { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; }
@media (min-width: 660px) { .home-cards { grid-template-columns: 1fr 1fr; } }
.home-card {
  background: var(--paper-light); border: 1.5px solid var(--rule); border-radius: 18px;
  padding: 24px 20px 20px; text-align: center;
  transition: transform 0.16s var(--ease-out), box-shadow 0.16s, border-color 0.16s;
}
.home-card:hover { transform: translateY(-3px); border-color: var(--ink-faded); box-shadow: 0 10px 26px rgba(31, 29, 26, 0.11); }
.home-card-art { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; min-height: 44px; align-items: center; flex-wrap: wrap; }
.home-fam-chip {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--fam); color: var(--fam-on);
}
.home-grade-chip {
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 5px;
  border-radius: 9px; background: var(--paper-deep); color: var(--ink-soft);
  font-weight: 900; font-size: 13px;
}
.home-grade-chip.done { background: var(--p-teal); color: #fff; }
.home-card-title { display: block; font-family: 'Nunito', sans-serif; font-size: 21px; font-weight: 900; letter-spacing: -0.3px; color: var(--ink); }
.home-card-sub { display: block; font-size: 13px; font-weight: 700; color: var(--ink-faded); margin-top: 5px; }

/* ── FAMILIES HUB ── */
.fam-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .fam-grid { grid-template-columns: 1fr; } }
.fam-card {
  position: relative;
  border: 1.5px solid var(--rule); border-radius: 18px;
  background: linear-gradient(150deg, var(--fam-soft) 0%, #ffffff 78%);
  padding: 22px 18px 18px; text-align: left;
  transition: transform 0.16s var(--ease-out), box-shadow 0.16s, border-color 0.16s;
}
.fam-card:hover { transform: translateY(-3px); border-color: var(--fam); box-shadow: 0 10px 26px rgba(31, 29, 26, 0.12); }
.fam-card-glyph {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px;
  background: var(--fam); color: var(--fam-on); margin-bottom: 12px;
}
.fam-card-name { display: block; font-family: 'Nunito', sans-serif; font-size: 22px; font-weight: 900; color: var(--ink); }
.fam-card-count { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-faded); margin-top: 3px; }
.fam-card-done {
  position: absolute; top: 14px; right: 14px;
  font-size: 11px; font-weight: 900; color: var(--fam);
  background: #fff; border: 1.5px solid var(--fam); border-radius: 999px; padding: 3px 9px;
}

/* ── GRADE SELECT ── */
.grade-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 660px) { .grade-grid { grid-template-columns: 1fr 1fr; } }
.grade-card {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto;
  column-gap: 14px; align-items: center; text-align: left;
  background: var(--paper-light); border: 1.5px solid var(--rule); border-radius: 16px;
  padding: 16px 18px;
  transition: transform 0.16s var(--ease-out), box-shadow 0.16s, border-color 0.16s;
}
.grade-card:hover { transform: translateY(-2px); border-color: var(--ink-faded); box-shadow: 0 8px 22px rgba(31, 29, 26, 0.1); }
.grade-card-num {
  grid-row: 1 / 4;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--gc); color: #fff;
  font-weight: 900; font-size: 19px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.grade-card:nth-child(3) .grade-card-num { color: #3b3a10; text-shadow: none; } /* yellow chip needs dark ink */
.grade-card-name { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 900; color: var(--ink); }
.grade-card-tag { font-size: 12.5px; font-weight: 700; color: var(--ink-faded); line-height: 1.35; }
.grade-card-stars { min-height: 18px; display: flex; align-items: center; gap: 8px; }
.grade-best { font-size: 11px; font-weight: 800; color: var(--ink-faded); }

/* ── Stars ── */
.stars { display: inline-flex; gap: 3px; }
.star { font-size: var(--star-size, 18px); color: var(--rule); line-height: 1; }
.star.on { color: #f6b40e; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }

/* ── ROUND INTRO ── */
.intro-panel {
  background: var(--paper-light); border: 1.5px solid var(--rule); border-radius: 18px;
  padding: 26px 24px; display: grid; gap: 18px; justify-items: start; max-width: 560px;
}
.intro-line { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-soft); line-height: 1.55; }

/* ── QUESTION ── */
.q-header { margin-bottom: 4px; }
.q-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-dots, .seg-dots { display: flex; gap: 6px; }
.seg-dots { margin: 2px 0 14px; }
.q-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper-deep); border: 1.5px solid var(--rule);
  transition: transform 0.15s, background 0.15s;
}
.q-dot.now { border-color: var(--cta); transform: scale(1.25); }
.q-dot.hit { background: var(--p-green); border-color: var(--p-green); }
.q-dot.miss { background: var(--p-orange); border-color: var(--p-orange); }
.q-streak { font-size: 13px; font-weight: 900; color: var(--p-orange); white-space: nowrap; }

.q-title { font-size: clamp(24px, 4.5vw, 32px); text-align: center; margin: 14px 0 4px; }

.listen-card { display: grid; justify-items: center; gap: 6px; padding: 10px 0 6px; }
.listen-btn {
  position: relative; width: 108px; height: 108px; border-radius: 50%;
  border: none; background: var(--cta); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.16), 0 10px 26px rgba(30, 127, 195, 0.35);
  transition: transform 0.15s var(--ease-snap);
}
.listen-btn:hover { transform: scale(1.04); }
.listen-btn:active { transform: scale(0.97); }
.listen-ring-svg { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; }
.listen-ring-track { fill: none; stroke: var(--paper-deep); stroke-width: 5; }
.listen-ring { fill: none; stroke: var(--p-orange); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
.listen-icon { display: grid; place-items: center; }
.play-mark {
  width: 0; height: 0; display: block;
  border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent;
  margin-left: 6px;
}
.sound-wave { display: none; gap: 4px; align-items: center; height: 34px; }
.sound-wave span { width: 5px; border-radius: 3px; background: #fff; height: 12px; animation: wave 0.9s ease-in-out infinite; }
.sound-wave span:nth-child(2) { animation-delay: 0.12s; }
.sound-wave span:nth-child(3) { animation-delay: 0.24s; }
.sound-wave span:nth-child(4) { animation-delay: 0.36s; }
.sound-wave span:nth-child(5) { animation-delay: 0.48s; }
@keyframes wave { 0%, 100% { height: 10px; } 50% { height: 30px; } }
.listen-btn.is-playing .play-mark { display: none; }
.listen-btn.is-playing .sound-wave { display: flex; }
.listen-btn:not(.is-playing) .sound-wave { display: none; }
.listen-label { margin: 4px 0 0; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.voice-chip {
  margin: 0; font-size: 11px; font-weight: 800; color: var(--p-plum);
  background: #f7eef5; border: 1px solid #e6cfe0; border-radius: 999px; padding: 3px 10px;
}

/* Choices */
.choices { display: grid; gap: 12px; margin-top: 14px; }
.choices.is-three { grid-template-columns: repeat(3, 1fr); }
.choices.is-four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .choices.is-three, .choices.is-four { grid-template-columns: repeat(2, 1fr); }
  .choices.is-three .choice-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}
.choice-card {
  position: relative;
  display: grid; justify-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--rule); border-radius: 16px;
  border-bottom-width: 4px;
  padding: 14px 10px 12px;
  transition: transform 0.15s var(--ease-out), border-color 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.choice-card:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--fam); box-shadow: 0 8px 20px rgba(31, 29, 26, 0.1); }
.choice-card:disabled:not(.is-correct):not(.is-wrong) { opacity: 0.6; }
.choice-card .choice-key {
  position: absolute; top: 7px; left: 8px;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 9px; color: var(--ink-faded);
  border: 1px solid var(--rule); border-radius: 4px; padding: 1px 4px;
}
.choice-name { font-weight: 900; font-size: 14.5px; color: var(--ink); text-align: center; line-height: 1.2; }
.choice-card.is-correct { border-color: var(--p-green); background: #f2faee; animation: pop 0.4s var(--ease-snap); }
.choice-card.is-wrong { border-color: var(--p-red); background: #fdf0f0; animation: shake 0.4s ease; }
.choice-card.is-out { opacity: 0.35; }
.choice-card.is-dim { opacity: 0.45; }
.choice-card.is-revealed { box-shadow: 0 0 0 4px rgba(106, 184, 69, 0.25); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 60% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }

.feedback {
  text-align: center; font-size: 15.5px; font-weight: 800; color: var(--ink-soft);
  min-height: 24px; margin: 16px 0 0;
}
.feedback.is-correct { color: #2e7d32; }
.feedback.is-gentle { color: var(--p-orange); }
.feedback.is-reveal { color: var(--ink); }

/* Reveal panel */
.reveal-slot { margin-top: 14px; }
.reveal-panel {
  background: var(--fam-soft); border: 1.5px solid var(--fam); border-radius: 18px;
  padding: 18px; animation: rise 0.35s var(--ease-out);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal-head { display: flex; gap: 16px; align-items: flex-start; }
.reveal-art { width: 96px; height: 96px; background: #fff; }
.reveal-text { flex: 1; min-width: 0; }
.reveal-name { margin: 0 0 6px; font-family: 'Nunito', sans-serif; font-size: 20px; font-weight: 900; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reveal-blurb { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink-soft); line-height: 1.45; }
.reveal-source { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.reveal-clue { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.reveal-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 520px) { .reveal-head { flex-direction: column; align-items: center; text-align: center; } .reveal-name { justify-content: center; } }

/* ── RESULTS ── */
.screen-results { text-align: center; }
.results-title { font-size: clamp(26px, 5vw, 36px); }
.results-score-card {
  background: var(--paper-light); border: 1.5px solid var(--rule); border-radius: 18px;
  padding: 22px; margin: 18px auto; max-width: 380px;
}
.results-score { margin: 0; font-family: 'Nunito', sans-serif; font-size: 54px; font-weight: 900; color: var(--ink); line-height: 1; }
.results-total { font-size: 24px; color: var(--ink-faded); }
.results-stars { margin-top: 8px; }
.results-streak { margin: 10px 0 0; font-size: 14px; font-weight: 900; color: var(--p-orange); }
.results-note { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-faded); }
.perfect-note { font-size: 16px; font-weight: 800; color: var(--p-teal); }
.missed-panel {
  text-align: left; background: var(--paper-light); border: 1.5px solid var(--rule);
  border-radius: 18px; padding: 18px; margin: 0 auto 18px; max-width: 560px;
}
.missed-title { margin: 0 0 12px; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faded); }
.missed-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.missed-row:first-of-type { border-top: none; }
.missed-art { width: 54px; height: 54px; border-radius: 12px; }
.missed-text { flex: 1; min-width: 0; }
.missed-name { margin: 0 0 3px; font-weight: 900; font-size: 15px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.missed-clue { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.35; }
.results-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
#pk5ScoreSubmit { max-width: 560px; margin: 0 auto; text-align: left; }

/* ── LESSONS ── */
.lesson-head { margin: -26px -22px 18px; padding: 24px 22px 18px; background: linear-gradient(160deg, var(--fam-soft), #fff 85%); border-bottom: 1.5px solid var(--rule); }
@media (min-width: 901px) { .lesson-head { margin: -34px -44px 22px; padding: 30px 44px 20px; } }
.lesson-head-row { display: flex; gap: 16px; align-items: center; }
.lesson-head-glyph { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--fam); color: var(--fam-on); flex-shrink: 0; }
.lesson-concept { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); line-height: 1.45; max-width: 56ch; }
.lesson-panel { display: grid; gap: 16px; justify-items: start; }
.lesson-intro-text { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-soft); line-height: 1.55; max-width: 58ch; }
.lesson-mini-title { margin: 4px 0 -6px; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faded); }
.lesson-clue { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.highlow-row { display: flex; gap: 14px; flex-wrap: wrap; }
.highlow-card {
  display: grid; justify-items: center; gap: 6px;
  background: #fff; border: 2px solid var(--rule); border-radius: 16px; border-bottom-width: 4px;
  padding: 14px 18px 12px; transition: transform 0.15s, border-color 0.15s;
}
.highlow-card:hover { transform: translateY(-2px); border-color: var(--fam); }
.highlow-card.is-active { border-color: var(--fam); background: var(--fam-soft); }
.highlow-art { width: 72px; height: 72px; }
.highlow-tag { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faded); }
.highlow-name { font-weight: 900; font-size: 14.5px; color: var(--ink); }

.seg-panel { position: relative; }
.seg-kind {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 8.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--fam-on); background: var(--fam);
  border-radius: 999px; padding: 4px 12px;
}
.seg-row { display: flex; gap: 20px; align-items: flex-start; width: 100%; }
@media (max-width: 560px) { .seg-row { flex-direction: column; align-items: center; text-align: center; } }
.seg-art-btn {
  position: relative; border: none; background: none; padding: 0; flex-shrink: 0;
  transition: transform 0.15s var(--ease-snap);
}
.seg-art-btn:hover { transform: scale(1.04); }
.seg-art { width: 132px; height: 132px; border-radius: 20px; background: #fff; border: 2px solid var(--rule); }
.seg-play {
  position: absolute; right: -6px; bottom: -6px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cta); color: #fff; font-size: 15px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.16);
}
.seg-text { flex: 1; min-width: 0; display: grid; gap: 7px; justify-items: start; }
@media (max-width: 560px) { .seg-text { justify-items: center; } }
.seg-name { margin: 0; font-family: 'Nunito', sans-serif; font-size: 24px; font-weight: 900; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.seg-blurb { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.45; }
.seg-point { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.45; }
.seg-source { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-faded); }
.seg-actions { display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 10px; margin-top: 6px; }

.badge-hero {
  display: grid; place-items: center; width: 112px; height: 112px; border-radius: 28px;
  background: var(--fam); color: var(--fam-on); margin: 6px auto 16px;
  box-shadow: 0 10px 28px rgba(31, 29, 26, 0.18);
  animation: pop 0.5s var(--ease-snap);
}

/* ── CONFETTI ── */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti-bit {
  position: absolute; width: 9px; height: 13px; border-radius: 2px;
  animation: confetti-fly 1.15s var(--ease-out) forwards;
}
@keyframes confetti-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 190px)) rotate(var(--rot)); }
}

/* ── DEV MODE ── */
.dev-banner, .dev-strip {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 10.5px; color: #d7e3ea;
  background: #1a2430; border-radius: 10px; padding: 10px 12px; margin-top: 20px;
  text-align: left; line-height: 1.7;
}
.dev-strip { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.dev-btn {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 9.5px; letter-spacing: 1px;
  color: #9fd8ff; background: transparent; border: 1px solid #3a4a5c; border-radius: 6px; padding: 3px 9px;
}
.dev-btn:hover { border-color: #9fd8ff; }
.dev-issues { color: #ffbb66; margin-top: 6px; }
.dev-table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.dev-table th, .dev-table td { border: 1px solid #33404f; padding: 2.5px 7px; text-align: left; font-weight: 400; }
.dev-table tr.good td { color: #93e29b; }
.dev-table tr.bad td { color: #ff9c9c; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .confetti-layer { display: none; }
}