/* ============================================================================
   Stress Circle - shared styles
   Base palette/type inherited verbatim from sounds/learn's assets/style.css
   (chalkboard bg, muted gold accent, Verdana) so this reads as the same
   site, not a reskin. Brick colors (--stress-primary/none) are new -
   inherited from the sibling apps' own existing palette tokens (amber,
   silent-gray in engine.js) rather than invented. This course doesn't
   introduce secondary stress, so there's no third brick color.
   ============================================================================ */

:root {
  --bg-color: #232323;
  --card-color: #1d1d1d;
  --exception-bg: #161616;
  --accent-gold: #e6c27a;
  --hot-pink: #FF2E88;
  --light-gray: #D8D8D8;
  --darker-gray: #888888;
  /* Word-stage background - the same near-black used by sounds/learn's own
     #viewer (--stage-bg in its style.css), deliberately darker than this
     page's own --bg-color so the animation reads as its own contained
     "screen" rather than blending into the page. */
  --stage-bg: #0A0A0A;

  /* Brick colors - inherited from sounds/'s existing engine.js palette:
     amber (#FFB74D) is already "this vowel says its full/strong sound",
     silent-gray (#9E9E9E) is already "present but not enunciated". Reusing
     them here keeps stress bricks speaking the same visual language as the
     rest of the trio instead of introducing new hues. */
  --stress-primary: #FFB74D;
  --stress-none: #9E9E9E;
  /* A soft, gentle rose - the mid-point color the primary brick passes
     through while rising, before settling into --stress-primary. Not
     --hot-pink (that's a saturated alert color used for exception
     callouts elsewhere) - this needs to read as soft, not alarming. */
  --stress-primary-mid: #FFA9D6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg-color);
  color: var(--light-gray);
  font-family: Verdana, Geneva, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  padding-bottom: 60px;
}

a { color: inherit; }

.game-body { padding-bottom: 0; }

/* Pause overlay - fixed, covers the whole viewport, so it also blocks
   interaction with anything beneath it just by sitting on top. */
#pause-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#pause-overlay.visible { display: flex; }
#pause-overlay .paused-label {
  color: var(--accent-gold);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------------
   Header (shared: start screen, game)
   ------------------------------------------------------------------------- */
header.app-header {
  position: sticky;
  top: 0;
  background-color: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(5px);
  border-bottom: 2px solid var(--card-color);
  padding: 15px 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-title { display: flex; align-items: center; gap: 12px; }
.logo-link { display: inline-flex; border-radius: 50%; line-height: 0; flex-shrink: 0; }
.logo-img { width: 56px; height: 56px; border-radius: 50%; display: block; object-fit: cover; }

.back-link {
  color: var(--darker-gray);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.2s;
}
.back-link:hover { color: var(--accent-gold); }

header.app-header h1 {
  color: var(--accent-gold);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.game-controls { display: flex; align-items: center; gap: 8px; }
.game-controls .icon-btn[data-action="exit"]:hover { border-color: var(--hot-pink); color: var(--hot-pink); }

.icon-btn {
  background: none;
  border: 1px solid #444;
  color: var(--darker-gray);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.icon-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* -------------------------------------------------------------------------
   Start screen
   ------------------------------------------------------------------------- */
.hero { max-width: 800px; margin: 30px auto 0; padding: 0 20px; }
.hero p { color: #c8c8c8; font-size: 1.05rem; }

.learn-index-body .index-header .header-title {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.learn-index-body .index-header-nav { display: flex; align-items: center; gap: 12px; }
.learn-index-body .index-header h1 { grid-column: 2; text-align: center; }

.stress-intro {
  max-width: 760px;
  padding: 26px 28px;
  text-align: center;
  background: linear-gradient(145deg, #1b1b1b, #202020);
  border: 1px solid #34302a;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}
.stress-intro h2 {
  margin-bottom: 10px;
  color: var(--accent-gold);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.3;
}
.stress-intro p + p { margin-top: 2px; }

.morse-examples {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
}
.morse-example {
  min-width: 190px;
  padding: 16px 20px;
  background: #171717;
  border: 1px solid #333;
  border-radius: 14px;
}
.morse-pattern {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.morse-beat { display: inline-block; transform-origin: center bottom; }
.morse-beat.strong-beat { color: var(--stress-primary); font-size: 1.25em; }
.morse-beat.weak-beat { color: var(--stress-none); font-size: 0.82em; font-weight: 700; }
.morse-example.is-playing .morse-beat:first-child { animation: morseBeat 0.55s ease 0.05s both; }
.morse-example.is-playing .morse-beat:last-child { animation: morseBeat 0.55s ease 0.62s both; }
.morse-example.is-playing .weak-beat { animation-name: morseWeakBeat; }
.morse-play-btn {
  margin-top: 10px;
  padding: 7px 18px;
  color: #151515;
  background: var(--accent-gold);
  border: 0;
  border-radius: 999px;
  font: 800 0.82rem/1 Verdana, Geneva, sans-serif;
  cursor: pointer;
}
.morse-play-btn:disabled { opacity: 0.55; cursor: default; }
.morse-play-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@keyframes morseBeat {
  0% { transform: translateY(0) scale(1); text-shadow: none; }
  45% { transform: translateY(-9px) scale(1.18); text-shadow: 0 0 18px rgba(255, 183, 77, 0.65); }
  100% { transform: translateY(0) scale(1); text-shadow: none; }
}
@keyframes morseWeakBeat {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  45% { transform: translateY(5px) scale(0.9); opacity: 0.62; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

main { max-width: 800px; margin: 0 auto; padding: 20px; }
.learn-index-body main { max-width: 1240px; text-align: center; }
.learn-index-body .course-accent-selector { text-align: center; }

.level-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.level-card {
  background-color: var(--card-color);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  /* Grid rows already stretch every card in a row to equal height (grid's
     default align-items:stretch) - flex-column + pinning .group-actions to
     the bottom (margin-top:auto below) is what actually keeps the Go/?
     buttons on one shared baseline across cards even when their
     descriptions run to different lengths. */
  display: flex;
  flex-direction: column;
}
.learn-index-body .level-card { text-align: center; }
.learn-index-body .group-actions { justify-content: center; }
.learn-index-body .lock-note { flex: 1 1 auto; align-self: center; text-align: center; }

.level-card.is-locked { opacity: 0.5; }

.level-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.level-desc { color: #999; font-size: 0.85rem; margin-bottom: 14px; }

.level-progress {
  font-size: 0.75rem;
  color: var(--darker-gray);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.group-actions { display: flex; gap: 10px; margin-top: auto; }

.go-btn,
.help-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.go-btn { flex: 1 1 auto; background-color: var(--accent-gold); color: #121212; padding: 8px 20px; }
.help-btn { width: 36px; flex: 0 0 auto; background-color: #2a2a2a; color: var(--light-gray); border: 1px solid #3a3a3a; }
.go-btn:hover,
.help-btn:hover { transform: translateY(-1px); opacity: 0.92; }

.resume-btn {
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--accent-gold);
  color: #121212;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 0 rgba(230, 194, 122, 0);
}
.resume-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(230, 194, 122, 0.25);
}
.resume-btn:disabled {
  background-color: var(--card-color);
  color: var(--darker-gray);
  cursor: default;
}

.start-sequence-btn {
  min-width: 150px;
  padding: 13px 30px;
  color: #121212;
  background: var(--accent-gold);
  border: 0;
  border-radius: 999px;
  font: 800 1rem/1 Verdana, Geneva, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.start-sequence-btn:hover { transform: translateY(-1px); }
.start-sequence-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.start-sequence-btn[hidden] { display: none; }

.lock-note {
  font-size: 0.8rem;
  color: var(--darker-gray);
  font-style: italic;
}

/* -------------------------------------------------------------------------
   Game screen
   ------------------------------------------------------------------------- */
.game-shell {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.mode-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--darker-gray);
}

.mode-toggle {
  display: flex;
  border: 1px solid #333;
  border-radius: 20px;
  overflow: hidden;
}
.mode-toggle button {
  background: none;
  border: none;
  color: var(--darker-gray);
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mode-toggle button.active { background-color: var(--accent-gold); color: #121212; }

.progress-line {
  font-size: 0.8rem;
  color: var(--darker-gray);
}

/* The word stage - a full-bleed dark "screen" (--stage-bg, matching
   sounds/learn's own #viewer) stretching edge to edge, outside the narrow
   centered .game-shell column below it - same relationship sounds/learn
   has between #viewer and its own content.

   Syllable bricks: real boxes (background/border/padding), not plain
   text. One set of elements lives here for the word's entire visit,
   driven purely by class changes (no teardown/rebuild - see game.html's
   renderIntro/splitIntoBricks/reveal):
     1. .brick.brick-intro - plain, large, white text, zero gap between
                              syllables so they read as one whole word.
     2. .brick (intro class removed) - the same elements now boxed into
                              bricks, .word-stage's gap growing to spread
                              them apart - the "split".
     3. .brick.revealed.stress-* - final stress coloring/sizing. The
        primary brick's box ends up lower (shorter) than earlier drafts
        but reliably wider than every unstressed brick, guaranteed by
        game.html's reveal() measuring actual rendered widths and
        widening the primary brick's box if it didn't win on its own -
        not left to padding/font-size alone, which can lose that fight
        when the stressed syllable has fewer letters than an unstressed
        neighbor (muSIcian: "si" vs "cian"). */
.word-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38vh;
  width: 100%;
  background-color: var(--stage-bg);
  padding: 40px 16px 20px;
}

.word-presentation {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.word-bricks {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: gap 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.word-stage.split .word-bricks { gap: 18px; }
.word-pos-labels {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}
.word-pos-label {
  opacity: 0;
  padding: 5px 12px;
  color: var(--stress-primary-mid);
  background: rgba(255, 169, 214, 0.1);
  border: 1px solid rgba(255, 169, 214, 0.48);
  border-radius: 999px;
  font-size: clamp(0.82rem, 2vw, 1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  transition: opacity 0.4s;
}
.word-pos-label.visible { opacity: 1; }

.brick {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  min-width: 120px;
  padding: 0 34px;
  border-radius: 8px;
  background-color: #2a2a2a;
  border: 1px solid #3a3a3a;
  /* A thin lighter top edge + darker bottom edge reads as a mortar line -
     the cheapest way to make a flat rectangle look like a laid brick
     rather than a plain button. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  color: var(--light-gray);
  font-weight: 800;
  /* Sized to match sounds/learn's own letters (clamp(80px,11vw,160px)) -
     the stage has plenty of room (38vh, full width), so use it. */
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: transform 0.4s, height 0.6s, padding 0.6s, background-color 0.6s, border-color 0.6s, box-shadow 0.6s, color 0.6s, opacity 0.4s, font-size 0.6s, min-width 0.6s;
  user-select: none;
}
.brick.visible { opacity: 1; transform: none; }

/* Plain "whole word" look - same elements as the bricks, just stripped of
   every boxed/brick trait and blown up to word-intro scale. Removing this
   class (splitIntoBricks) transitions every overridden property back to
   .brick's own boxed values above, using the same transition list - no
   separate fade-out/fade-in swap between two different elements. */
.brick.brick-intro {
  height: auto;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #FFFFFF;
  font-size: clamp(3.8rem, 10.5vw, 7.5rem);
  cursor: default;
}

.brick:hover { transform: translateY(-3px); }

.brick.is-tappable:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }

/* Unstressed brick - lower and narrower than the primary brick, always. */
.brick.revealed.stress-none {
  height: 118px;
  padding: 0 26px;
  background-color: var(--stress-none);
  border-color: var(--stress-none);
  color: #1a1a1a;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

/* Primary brick: rises in a soft rose past its own final size - "raise" -
   then settles into orange, LOWER than the rise but wider than it started
   (bigger padding and font-size than the neutral/unstressed state) -
   "settle". Height stays modest on purpose - width is the real stress
   signal here, backed up by game.html's reveal() width guarantee. */
.brick.revealed.stress-primary {
  animation: brickRise 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes brickRise {
  0% {
    height: 150px;
    padding: 0 34px;
    font-size: clamp(2.4rem, 6.5vw, 4.4rem);
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: var(--light-gray);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  }
  55% {
    height: 205px;
    padding: 0 88px;
    font-size: clamp(3.6rem, 9.5vw, 6.6rem);
    background-color: var(--stress-primary-mid);
    border-color: var(--stress-primary-mid);
    color: #3a0022;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.2),
      0 0 30px rgba(255, 169, 214, 0.4);
  }
  100% {
    height: 148px;
    padding: 0 94px;
    font-size: clamp(3.6rem, 9.5vw, 6.6rem);
    background-color: var(--stress-primary);
    border-color: var(--stress-primary);
    color: #1a1200;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.25),
      0 0 26px rgba(255, 183, 77, 0.45);
  }
}

.next-btn {
  background-color: var(--accent-gold);
  border: none;
  color: #121212;
  padding: 10px 26px;
  border-radius: 24px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
}
.next-btn:disabled { opacity: 0.35; cursor: default; }

.legend-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  /* Matches sounds/learn's own .pattern-card .p-name font-size (0.95rem). */
  font-size: 0.95rem;
  color: var(--darker-gray);
}
.legend-row span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-dot.primary { background-color: var(--stress-primary); }
.legend-dot.none { background-color: var(--stress-none); }

.rule-hint {
  max-width: 520px;
  text-align: center;
  color: #999;
  font-size: 0.88rem;
  min-height: 20px;
}

.site-footer {
  text-align: center;
  color: var(--darker-gray);
  font-size: 0.8rem;
  margin-top: 40px;
}

.no-results {
  display: none;
  text-align: center;
  padding: 40px;
  color: var(--darker-gray);
}

/* -------------------------------------------------------------------------
   Word navigation within a selected pattern - prev/next only, one word at
   a time. No upfront list of every word in the pattern; stepping through
   is the point (see game.html's loadWordAt/selectPattern).
   ------------------------------------------------------------------------- */
.word-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#word-picker {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
}
#word-picker.visible { display: flex; }

.word-nav-btn {
  background: transparent;
  border: 1px solid #3a3a3a;
  color: var(--light-gray);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.word-nav-btn:hover:not(:disabled) { border-color: var(--accent-gold); color: var(--accent-gold); }
.word-nav-btn:disabled { opacity: 0.3; cursor: default; }

.word-nav-line { width: 56px; height: 0; border-top: 2px dotted #444; opacity: 0.7; }

#word-meta { font-size: 0.8rem; color: var(--darker-gray); text-align: center; }

/* -------------------------------------------------------------------------
   Pattern library - a grid of every pattern (rule) in the current group.
   Clicking one loads its word pool into the stage above. Purely a picker;
   no scoring.
   ------------------------------------------------------------------------- */
#pattern-library { max-width: 820px; margin: 0 auto; width: 100%; padding: 20px; }

/* minmax(...,1fr) rather than a fixed upper bound, plus min-width:0 on the
   cards themselves below - grid items default to min-width:auto, which
   lets a card's own content (a long pattern label) silently force its
   track wider than the declared 100px minimum, so fewer columns fit than
   the math suggests. The five approved ending patterns need all five in
   one row when the viewport has room. */
.pattern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); justify-content: center; gap: 12px; }

.pattern-card {
  position: relative;
  min-width: 0;
  background: var(--card-color);
  border: 1px solid #252525;
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.pattern-card:hover { border-color: #3a3a3a; transform: translateY(-2px); }
.pattern-card.active { border-style: dotted; border-width: 2px; border-color: var(--accent-gold); }
.pattern-card .p-name { font-size: 0.9rem; font-weight: 800; color: var(--accent-gold); letter-spacing: 0.02em; }
.pattern-card .pattern-count { margin-top: 6px; color: var(--darker-gray); font-size: 0.68rem; line-height: 1.3; }
.pattern-card.empty { cursor: default; opacity: 0.58; }
.pattern-card.empty:hover { border-color: #252525; transform: none; }

.pattern-help-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #2a2a2a;
  color: var(--darker-gray);
  border: 1px solid #3a3a3a;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 14px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.pattern-help-btn:hover { color: var(--accent-gold); border-color: var(--accent-gold); }

/* -------------------------------------------------------------------------
   Guide pages - rule cards, confidence badges, word chips, exception
   panels. Ported verbatim (structure + class names) from Stress_guide_S.html
   / sounds/learn's own guide styling, just repointed at this site's
   --accent-gold/--hot-pink instead of --electric-yellow/--hot-pink literals.
   ------------------------------------------------------------------------- */
.guide-main { max-width: 800px; margin: 30px auto; padding: 0 20px; }

.section-title {
  color: white;
  font-size: 1.4rem;
  margin: 35px 0 15px 0;
  border-left: 4px solid var(--accent-gold);
  padding-left: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.section-title:first-child { margin-top: 0; }

.rule-card {
  background-color: var(--card-color);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid #252525;
}

.card-header {
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  user-select: none;
  background-color: #222222;
}

.pattern-visual {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: 0.03em;
}

.header-meta { display: flex; align-items: center; gap: 12px; }

.badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-high { background-color: #2b7a3e; color: #e2f7e6; }
.badge-mid { background-color: #3b6b8c; color: #e6f2fc; }
.badge-low { background-color: #8c4f3b; color: #fcebe6; }

.arrow { font-size: 0.8rem; transition: transform 0.3s; color: var(--darker-gray); }
.rule-card.active .arrow { transform: rotate(180deg); }

.card-body { padding: 20px; display: none; border-top: 1px solid #2a2a2a; }
.rule-card.active .card-body { display: block; }

.explanation { font-size: 0.95rem; margin-bottom: 15px; color: #c8c8c8; }

.chip-group-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--darker-gray);
  margin-bottom: 6px;
  font-weight: 600;
}

.chips-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.word-chip {
  background-color: #2a2a2a;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid #3a3a3a;
}

/* The primary-stressed syllable within a chip - matches the brick's own
   --stress-primary hue so a guide chip and its game brick read as the same
   signal. */
.word-chip .str { color: var(--accent-gold); font-weight: 800; }
.p-sub-inline { color: var(--darker-gray); font-weight: 600; font-size: 0.85em; }

.meta-note {
  font-size: 0.85rem;
  color: var(--darker-gray);
  font-style: italic;
  margin-top: 4px;
}

.exception-words code {
  font-family: inherit;
  font-weight: 700;
  background: none;
  padding: 0;
}

.exception-panel {
  background-color: var(--exception-bg);
  border-left: 4px solid var(--hot-pink);
  border-top: 1px solid #25121a;
  border-right: 1px solid #25121a;
  border-bottom: 1px solid #25121a;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

.exception-title {
  color: var(--hot-pink);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  font-style: normal;
}

.exception-words { color: #e0b3c5; }

.guide-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--darker-gray);
  text-decoration: none;
  border-bottom: 1px dotted var(--darker-gray);
}
.guide-link:hover { color: var(--accent-gold); border-color: var(--accent-gold); }

@media (max-width: 1050px) {
  .learn-index-body main { max-width: 760px; }
  .learn-index-body .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .learn-index-body .index-header .header-title { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .learn-index-body .index-header-nav { justify-self: center; }
  .learn-index-body .index-header h1 { grid-column: 1; grid-row: 2; }
  .stress-intro { margin: 20px 14px 0; padding: 22px 16px; }
  .morse-example { width: 100%; min-width: 0; }
  .learn-index-body .level-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .word-stage { min-height: 36vh; }
  .word-bricks { width: 100%; }
  .word-stage.split .word-bricks { gap: 8px; }
  .word-pos-labels { max-width: calc(100vw - 32px); }
  .word-pos-label { max-width: 100%; }
  .brick {
    flex: 1 1 0;
    min-width: 0;
    height: 120px;
    padding: 0 6px;
    font-size: clamp(1.2rem, 7vw, 2rem);
  }
  .brick.brick-intro {
    flex: 0 1 auto;
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }
  .brick.revealed.stress-none {
    height: 96px;
    min-width: 0;
    padding: 0 6px;
  }
  @keyframes brickRise {
    0% {
      height: 120px;
      padding: 0 6px;
      font-size: clamp(1.2rem, 7vw, 2rem);
      background-color: #2a2a2a;
      border-color: #3a3a3a;
      color: var(--light-gray);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    }
    55% {
      height: 160px;
      padding: 0 14px;
      font-size: clamp(2rem, 10vw, 3rem);
      background-color: var(--stress-primary-mid);
      border-color: var(--stress-primary-mid);
      color: #3a0022;
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 0 22px rgba(255, 169, 214, 0.38);
    }
    100% {
      height: 124px;
      padding: 0 16px;
      font-size: clamp(2rem, 10vw, 3rem);
      background-color: var(--stress-primary);
      border-color: var(--stress-primary);
      color: #1a1200;
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.25),
        0 0 22px rgba(255, 183, 77, 0.4);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .morse-example.is-playing .morse-beat { animation: none; }
}