:root {
  --ink: #24323f;
  --muted: #667789;
  --line: #dce4eb;
  --paper: #ffffff;
  --mist: #f3f7fa;
  --green: #58c96f;
  --green-dark: #2d9f4a;
  --coral: #ff735c;
  --gold: #f4b740;
  --blue: #4a90e2;
  --violet: #8b72e6;
  --immersion-purple: #d9631e;
  --immersion-purple-dark: #a8480f;
  --shadow: 0 18px 40px rgba(36, 50, 63, 0.12);
  --journey: var(--green);
  --journey-dark: var(--green-dark);
  --page-bg:
    radial-gradient(circle at 14% 10%, rgba(244, 183, 64, 0.18), transparent 24rem),
    linear-gradient(135deg, #f7fbfd 0%, #eef5f0 50%, #fff8f4 100%);
  --rail-bg: rgba(255, 255, 255, 0.78);
  --soft-card: rgba(255, 255, 255, 0.82);
  --button-shadow: #d6e0e7;
  --unit-shadow: #d5e0e7;
  --control-bg: var(--ink);
  --control-fg: #ffffff;
  --control-shadow: #111a22;
  --note-bg: #fff8e8;
  --kana-border: var(--ink);
  --foundation-page-bg:
    radial-gradient(circle at 14% 10%, rgba(244, 183, 64, 0.18), transparent 24rem),
    linear-gradient(135deg, #f7fbfd 0%, #eef5f0 50%, #fff8f4 100%);
  --confidence-page-bg:
    radial-gradient(circle at 14% 10%, rgba(74, 144, 226, 0.16), transparent 24rem),
    linear-gradient(135deg, #f7fbfd 0%, #edf5ff 52%, #f8fbff 100%);
  --immersion-page-bg:
    radial-gradient(circle at 14% 10%, rgba(217, 99, 30, 0.16), transparent 24rem),
    linear-gradient(135deg, #fffaf5 0%, #fdf1e3 52%, #fdf3ec 100%);
  --foundation-page-bg-dark:
    radial-gradient(circle at 14% 10%, rgba(244, 183, 64, 0.08), transparent 24rem),
    linear-gradient(135deg, #101820 0%, #12231c 50%, #201816 100%);
  --confidence-page-bg-dark:
    radial-gradient(circle at 14% 10%, rgba(74, 144, 226, 0.12), transparent 24rem),
    linear-gradient(135deg, #0f1720 0%, #102235 52%, #151b24 100%);
  --immersion-page-bg-dark:
    radial-gradient(circle at 14% 10%, rgba(217, 99, 30, 0.16), transparent 24rem),
    linear-gradient(135deg, #1a140d 0%, #241608 52%, #1c1410 100%);
}

body.dark-mode {
  --ink: #edf4f7;
  --muted: #a6b6c3;
  --line: #314353;
  --paper: #182532;
  --mist: #223343;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  --page-bg:
    radial-gradient(circle at 14% 10%, rgba(244, 183, 64, 0.08), transparent 24rem),
    linear-gradient(135deg, #101820 0%, #12231c 50%, #201816 100%);
  --rail-bg: rgba(18, 28, 37, 0.88);
  --soft-card: rgba(24, 37, 50, 0.9);
  --button-shadow: #0d151d;
  --unit-shadow: #0d151d;
  --control-bg: #0d151d;
  --control-fg: #edf4f7;
  --control-shadow: #05090d;
  --note-bg: #2b2519;
  --kana-border: #3a4d5e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  background: var(--page-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
  /* viewport-fit=cover lets the theme background run edge-to-edge in landscape
     (no white letterbox bars); the safe-area padding keeps the actual content
     clear of the notch. Zero on notchless devices and in portrait. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.course-backdrop {
  display: none;
}

.course-rail {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 400px;
  gap: 18px;
  min-height: 0;
  overflow: hidden;
  padding: 28px;
  background: var(--rail-bg);
  border-right: 1px solid rgba(220, 228, 235, 0.9);
  backdrop-filter: blur(16px);
}

.rail-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: none;
}

.rail-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.brand-lockup {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  align-items: flex-start;
}

.brand-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 4px solid #24323f;
  border-radius: 8px;
  background: var(--coral);
  color: white;
  font-size: 1.85rem;
  font-weight: 900;
  box-shadow: 0 6px 0 #d94f3e;
}

.brand-lockup h1,
.stage-header h2 {
  margin: 0;
  letter-spacing: 0;
}

.brand-lockup h1 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.brand-lockup p,
.kicker {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.brand-lockup .app-version {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 850;
}

.course-navigator {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

.course-slider {
  display: grid;
  grid-template-columns: 100% 100%;
  min-height: 0;
  transform: translateX(-100%);
}

/* The slide animation only arms after the first painted frame (JS adds
   .animate post-load), so a refresh restoring the path pane lands there
   instantly instead of visibly sliding from the units position. */
.course-slider.animate {
  transition: transform 240ms ease;
}

.course-slider[data-panel="path"] {
  transform: translateX(0);
}

.course-slider[data-panel="units"] {
  transform: translateX(-100%);
}

/* Once a slide settles (JS adds .settled), the off-screen pane collapses so it
   stops dictating the rail's scroll height - e.g. the section list must not
   scroll as if Foundation's full unit list were behind it. It also drops out
   of the tab order while hidden. */
.course-slider.settled[data-panel="path"] .course-pane:last-child,
.course-slider.settled[data-panel="units"] .course-pane:first-child {
  height: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.course-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow: visible;
}

.navigator-header {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.navigator-header strong {
  display: block;
  font-size: 1rem;
  line-height: 1.1;
}

.back-button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--button-shadow);
}

.back-button span {
  display: block;
  font-size: 1rem;
  line-height: 1;
}

.section-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.course-parts {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
  overflow: visible;
  padding-bottom: 8px;
}

.journey-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.journey-tab {
  min-width: 0;
  height: auto;
  padding: 10px 8px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--button-shadow);
}

.journey-tab[data-journey="foundation"] {
  --tab-accent: var(--green);
}

.journey-tab[data-journey="confidence"] {
  --tab-accent: var(--blue);
}

.journey-tab[data-journey="immersion"] {
  --tab-accent: var(--immersion-purple);
}

.journey-tab strong,
.journey-tab span {
  display: block;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.journey-tab strong {
  font-size: 0.78rem;
  font-weight: 950;
}

.journey-tab strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--tab-accent, var(--muted));
  vertical-align: 1px;
}

.journey-tab span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 850;
}

.journey-tab.active {
  border-color: var(--tab-accent, var(--journey));
  background: color-mix(in srgb, var(--tab-accent, var(--journey)) 14%, var(--paper));
}

.journey-tab.active strong {
  color: var(--ink);
}

.journey-tab.active span {
  color: var(--muted);
}

.course-part-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: start;
  width: 100%;
  min-height: 66px;
  padding: 14px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--soft-card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--button-shadow);
}

.course-part-button:hover,
.course-part-button.active {
  border-color: var(--journey);
  background: color-mix(in srgb, var(--journey) 12%, var(--paper));
}

.course-part-index {
  display: grid;
  width: 30px;
  height: 30px;
  align-self: center;
  place-items: center;
  border-radius: 50%;
  background: var(--mist);
  color: var(--journey-dark);
  font-size: 0.82rem;
  font-weight: 950;
}

.course-part-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.course-part-copy strong,
.course-part-copy span {
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
}

.course-part-copy strong {
  font-size: 0.92rem;
  line-height: 1.24;
}

.course-part-copy span,
.course-part-status {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.28;
}

.course-part-status {
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

.course-notice {
  display: none;
  margin: 0;
  padding: 9px 10px;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--mist);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
}

.course-notice.show {
  display: block;
}

.profile-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex-shrink: 0;
  gap: 8px;
}

.profile-panel > div {
  min-width: 0;
  padding: 12px 4px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  text-align: center;
  box-shadow: 0 4px 0 #d7e3dd;
}

body.dark-mode .profile-panel > div {
  box-shadow: 0 4px 0 var(--button-shadow);
}

.stat-label {
  display: grid;
  min-height: 2em;
  place-items: center;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.profile-panel strong {
  display: block;
  margin-top: 2px;
  font-size: 1.25rem;
}

.stat-label > span {
  font-size: 1.05rem;
  line-height: 1;
}

.unit-list {
  display: grid;
  gap: 13px;
  overflow: visible;
  padding: 2px 0 8px;
}

.unit-button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 90px;
  padding: 14px 14px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--unit-shadow);
}

.unit-button:hover,
.unit-button.active {
  border-color: var(--journey);
  transform: translateY(1px);
  box-shadow: 0 4px 0 #b7ddc1;
}

body.dark-mode .unit-button:hover,
body.dark-mode .unit-button.active {
  box-shadow: 0 4px 0 var(--button-shadow);
}

.unit-badge {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--mist);
  color: var(--journey-dark);
  font-weight: 900;
}

.unit-copy strong,
.unit-copy span {
  display: block;
}

.unit-copy {
  min-width: 0;
}

.unit-copy strong {
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.unit-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.unit-stars {
  justify-self: end;
  color: var(--gold);
  font-weight: 900;
  white-space: nowrap;
  font-size: 0.9rem;
}

.summary-stars {
  font-size: 1.5rem;
  letter-spacing: 3px;
  align-self: center;
}

.star-explainer {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: var(--mist);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.4;
}

.unit-emblem {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.unit-emblem:hover {
  border-color: var(--journey);
}

.unit-emblem-glyph {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--mist);
  color: var(--journey-dark);
  font-size: 1.2rem;
  font-weight: 900;
}

.unit-emblem-copy {
  min-width: 0;
}

.unit-emblem-copy strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.3;
}

.unit-emblem-copy span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.lesson-stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden; /* overflow-y alone computes overflow-x to auto, which lets iOS pan sideways when content runs long */
  overflow-anchor: none;
  padding: 32px clamp(18px, 4vw, 54px);
}

.stage-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}

.stage-header h2 {
  font-size: clamp(1.7rem, 4vw, 3.15rem);
}

.header-actions {
  position: relative;
  display: flex;
  gap: 10px;
}

.icon-button,
.speak-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--control-fg);
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--control-shadow);
}

.audio-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.read-instead-button {
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--button-shadow);
}

.read-instead-button:hover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--paper));
}

.ui-icon {
  display: block;
  width: 1.15em;
  height: 1.15em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-1px);
}

.ui-icon-play {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: none;
  transform: translateX(-1.5px);
}

.icon-button span {
  display: block;
  line-height: 1;
  transform: translateX(-1px);
}

/* Real iOS devices render these square icon controls slightly right of center
   even when desktop emulation looks correct. -webkit-touch-callout exists only
   in iOS Safari, so this calibration nudge targets iPhones/iPads at every
   width - it used to live inside the 640px breakpoint, which silently dropped
   the fix when the phone rotated to landscape. Values are calibrated from
   real-device screenshots: -7px on the 44px small-screen buttons, -10px on
   the 48px buttons used above 640px (measured +3px residual in landscape on
   an iPhone 16e). The Journey close is a plain text ×, which iOS misplaces
   less than emoji/SVG glyphs, so it gets a gentler nudge at every width. */
@supports (-webkit-touch-callout: none) {
  .icon-button .ui-icon,
  .icon-button span,
  .back-button span,
  .speak-button .ui-icon,
  .review-play .ui-icon {
    transform: translateX(-7px);
  }

  /* Per-glyph refinement: on the 44px buttons the theme (🌃/🌅) and settings
     (⚙) emoji measure ~2px right of the burger and 🧳, which sit dead centre
     at -7px. Vertical centering measured within 1px for every glyph - do not
     add translateY without fresh device screenshots proving the need. */
  #themeToggle span,
  #settingsButton span {
    transform: translateX(-9px);
  }

  #journeyClose span {
    transform: translateX(-3px);
  }

  @media (min-width: 641px) {
    .icon-button .ui-icon,
    .icon-button span,
    .back-button span,
    .speak-button .ui-icon,
    .review-play .ui-icon,
    #themeToggle span,
    #settingsButton span {
      transform: translateX(-10px);
    }

    #journeyClose span {
      transform: translateX(-5px);
    }
  }
}

.menu-button {
  display: grid;
}

.settings-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  display: none;
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

body.settings-menu-open .settings-menu {
  display: grid;
  gap: 8px;
}

.settings-menu a,
.settings-menu button {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--mist);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.settings-menu #resetButton {
  background: #fff0ed;
  color: #b43e2d;
}

body.dark-mode .settings-menu #resetButton {
  background: rgba(255, 115, 92, 0.16);
  color: #ff9d8b;
}

.journey-backdrop {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: none;
  border: 0;
  background: rgba(36, 50, 63, 0.28);
  backdrop-filter: blur(4px);
}

.journey-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 19;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, 100%);
  height: 100dvh;
  padding: 24px;
  /* Fixed to the right edge, so it manages its own notch buffer. */
  padding-right: calc(24px + env(safe-area-inset-right, 0px));
  border-left: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 0%, rgba(88, 201, 111, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 250, 0.96));
  box-shadow: -24px 0 60px rgba(36, 50, 63, 0.22);
  transform: translateX(105%);
  transition: transform 220ms ease;
}

body.dark-mode .journey-panel {
  background:
    radial-gradient(circle at 18% 0%, rgba(88, 201, 111, 0.1), transparent 18rem),
    linear-gradient(135deg, #101820 0%, #12231c 100%);
}

body.journey-open .journey-backdrop {
  display: block;
}

body.journey-open .journey-panel {
  transform: translateX(0);
}

.journey-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
}

.journey-panel-header h2 {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: 0.95;
}

.journey-content {
  display: grid;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 8px 18px 2px;
}

.journey-hero,
.journey-section,
.journey-metric,
.travel-stamp,
.journey-map-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 0 var(--button-shadow);
}

body.dark-mode .journey-hero,
body.dark-mode .journey-section,
body.dark-mode .journey-metric,
body.dark-mode .travel-stamp,
body.dark-mode .journey-map-card {
  background: rgba(24, 37, 50, 0.9);
  box-shadow: 0 5px 0 #0d151d;
}

.journey-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 3px solid var(--journey);
  background:
    linear-gradient(135deg, rgba(88, 201, 111, 0.15), rgba(74, 144, 226, 0.08)),
    var(--paper);
}

.journey-hero h3,
.journey-section h3,
.journey-map-card h4 {
  margin: 0;
}

.journey-hero p,
.journey-map-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.journey-map-card p {
  margin: 0;
  line-height: 1.35;
}

.journey-hero-score {
  display: grid;
  flex: 0 0 auto;
  gap: 6px;
  justify-items: end;
}

.journey-hero-score strong {
  color: var(--journey-dark);
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  line-height: 1;
}

.journey-hero-stamps {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: help;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.journey-metric {
  display: grid;
  gap: 5px;
  padding: 16px;
}

.journey-metric span,
.journey-section-header span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.journey-metric strong {
  color: var(--ink);
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  line-height: 1;
}

.journey-section {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.journey-section-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.recent-words,
.stamp-grid,
.journey-map {
  display: grid;
  gap: 12px;
}

.recent-words {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.recent-words span {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
  text-align: center;
  overflow: hidden;
}

.recent-words strong {
  color: var(--ink);
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}

.recent-words small {
  color: var(--blue);
  font-weight: 900;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

.stamp-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.travel-stamp {
  display: grid;
  gap: 5px;
  min-height: 136px;
  align-content: center;
  justify-items: center;
  padding: 16px;
  border: 2px dashed #cbd7e0;
  color: var(--muted);
  text-align: center;
  filter: grayscale(0.75);
  opacity: 0.72;
}

body.dark-mode .travel-stamp {
  border-color: #3a4d5e;
}

.travel-stamp.unlocked {
  border-color: var(--journey);
  color: var(--ink);
  filter: none;
  opacity: 1;
}

.travel-stamp > span {
  font-size: 2rem;
}

.travel-stamp strong {
  font-size: 1rem;
}

.travel-stamp small {
  font-weight: 800;
  line-height: 1.25;
}

.journey-map {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.journey-map-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border-width: 2px;
  box-shadow: 0 4px 0 var(--button-shadow);
}

/* Share row tracks across the three cards so the title, promise, and every
   section row sit at the same height in every column. Each card's row span
   (2 + module count) is set inline by renderJourneyPage; the ul dissolves
   via display: contents so its li rows join the shared tracks. */
@supports (grid-template-rows: subgrid) {
  .journey-map-card {
    grid-template-rows: subgrid;
  }

  .journey-map .journey-map-card ul {
    display: contents;
  }
}

@supports not (grid-template-rows: subgrid) {
  .journey-map-card p {
    min-height: 2.7em;
  }
}

.journey-map-card h4 {
  font-size: 1.3rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}

/* Each journey card carries its own sky tint, echoing the homepage's
   Shadow Dancer gradient - green dawn, blue day, orange dusk. */
.journey-map-card.foundation {
  border-color: var(--green);
  background: linear-gradient(180deg, rgba(205, 233, 216, 0.6), rgba(243, 251, 246, 0.12) 62%), rgba(255, 255, 255, 0.88);
}

.journey-map-card.confidence {
  border-color: var(--blue);
  background: linear-gradient(180deg, rgba(207, 231, 246, 0.6), rgba(246, 251, 255, 0.12) 62%), rgba(255, 255, 255, 0.88);
}

.journey-map-card.immersion {
  border-color: var(--immersion-purple);
  background: linear-gradient(180deg, rgba(251, 226, 201, 0.6), rgba(255, 247, 238, 0.12) 62%), rgba(255, 255, 255, 0.88);
}

body.dark-mode .journey-map-card.foundation {
  background: linear-gradient(180deg, rgba(20, 38, 29, 0.85), rgba(14, 26, 20, 0.2) 62%), rgba(24, 37, 50, 0.9);
}

body.dark-mode .journey-map-card.confidence {
  background: linear-gradient(180deg, rgba(23, 34, 46, 0.85), rgba(16, 24, 35, 0.2) 62%), rgba(24, 37, 50, 0.9);
}

body.dark-mode .journey-map-card.immersion {
  background: linear-gradient(180deg, rgba(43, 29, 18, 0.85), rgba(26, 18, 11, 0.2) 62%), rgba(24, 37, 50, 0.9);
}

.journey-map-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-map-card li {
  display: grid;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.journey-map-card li span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.preview-badge {
  border-radius: 8px;
}

.preview-panel {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 4vw, 28px);
  border: 4px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(88, 201, 111, 0.12), rgba(74, 144, 226, 0.1)),
    var(--paper);
  box-shadow: 0 8px 0 var(--button-shadow);
}

.preview-panel h3 {
  margin: 6px 0 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.preview-panel p {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.preview-panel .preview-focus {
  padding: 10px 12px;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--soft-card);
  color: var(--ink);
  font-size: 0.96rem;
}

.preview-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.preview-outcomes article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--soft-card);
  box-shadow: 0 4px 0 var(--button-shadow);
}

.preview-outcomes span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-weight: 950;
}

.preview-outcomes strong {
  line-height: 1.25;
}

.see-also-panel.compact {
  padding: 14px;
}

.docs-body {
  min-height: 100dvh;
  height: auto;
  overflow: auto;
}

.docs-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

.docs-header {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

.docs-back {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--button-shadow);
}

.docs-brand h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.98;
}

.docs-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.docs-nav,
.docs-reader {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.docs-nav {
  display: grid;
  gap: 8px;
  padding: 10px;
  position: sticky;
  top: 18px;
}

.doc-link {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 62px;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--mist);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.doc-link span {
  font-size: 0.94rem;
  font-weight: 950;
}

.doc-link small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.doc-link.active,
.doc-link:hover {
  border-color: var(--green);
  background: #f3fff6;
}

.docs-reader {
  min-height: 72dvh;
  padding: clamp(18px, 4vw, 42px);
}

.docs-reader-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.docs-reader-header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
}

.docs-raw {
  display: grid;
  min-width: 82px;
  min-height: 44px;
  place-items: center;
  text-decoration: none;
}

.markdown-view {
  display: grid;
  gap: 12px;
  max-width: 76ch;
}

.markdown-view h2,
.markdown-view h3,
.markdown-view h4,
.markdown-view h5 {
  margin: 22px 0 4px;
  line-height: 1.08;
}

.markdown-view h2 {
  font-size: 1.8rem;
}

.markdown-view h3 {
  font-size: 1.35rem;
}

.markdown-view p,
.markdown-view li,
.markdown-view blockquote {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.65;
}

.markdown-view p {
  margin: 0;
}

.markdown-view ul,
.markdown-view ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.markdown-view code {
  padding: 0.12em 0.35em;
  border-radius: 6px;
  background: var(--mist);
  color: var(--blue);
  font-weight: 900;
}

.markdown-view pre {
  overflow: auto;
  margin: 4px 0;
  padding: 14px;
  border-radius: 8px;
  background: #172433;
  color: white;
}

.markdown-view pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

.markdown-view blockquote {
  margin: 4px 0;
  padding: 12px 16px;
  border-left: 5px solid var(--green);
  border-radius: 0 8px 8px 0;
  background: var(--mist);
}

.docs-error {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.progress-meta > span:last-child {
  color: var(--ink);
  text-align: right;
}

.live-stars {
  position: relative;
  display: none;
  gap: 6px;
  align-self: center;
  align-items: center;
  height: 1rem; /* fixed box: bigger glyphs overflow into surrounding breathing room instead of growing the row */
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

.live-stars.show {
  display: inline-flex;
}

.score-mark {
  color: var(--gold);
  font-weight: 900;
  transition: opacity 300ms ease, transform 300ms ease, filter 300ms ease;
}

.score-mark.dim {
  opacity: 0.3;
  transform: scale(0.82);
  filter: grayscale(1);
}

@keyframes star-lost-pop {
  0% { opacity: 1; transform: scale(1.45) rotate(0deg); filter: grayscale(0); }
  55% { transform: scale(0.72) rotate(-14deg); }
  100% { opacity: 0.3; transform: scale(0.82) rotate(0deg); filter: grayscale(1); }
}

.live-star.just-lost {
  animation: star-lost-pop 550ms ease;
}

.score-tip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 40;
  width: min(320px, 80vw);
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.score-tip strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.86rem;
  font-weight: 950;
}

.score-tip::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--line);
  border-left: 2px solid var(--line);
  background: var(--paper);
  transform: translateX(-50%) rotate(45deg);
}

.live-stars.tip-open .score-tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.progress-track {
  flex-shrink: 0;
  height: 16px;
  border-radius: 999px;
  background: #dde8ee;
  overflow: hidden;
}

body.dark-mode .progress-track {
  background: #2c3f52;
  border: 1px solid #3a4d5e;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--journey), var(--gold));
  transition: width 220ms ease;
}

.lesson-card {
  display: grid;
  gap: 22px;
  align-content: start;
  flex: 0 0 auto;
  min-height: calc(100dvh - 280px);
  margin-bottom: 32px;
  padding: clamp(20px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-card);
  box-shadow: var(--shadow);
}

.prompt-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.prompt-row h3 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 2rem);
  letter-spacing: 0;
}

.prompt-row p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

.prompt-study {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.exercise-script {
  display: block;
  margin-top: 8px;
}

.read-instead-panel {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 2px solid #cfe0eb;
  border-radius: 8px;
  background: #f7fbfd;
}

body.dark-mode .read-instead-panel {
  border-color: #2c4054;
  background: #1b2a38;
}

.read-jp {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 950;
  line-height: 1.08;
}

.read-romaji {
  color: var(--blue);
  font-size: 1.08rem;
  font-weight: 900;
}

.read-meaning {
  color: var(--muted);
  font-weight: 800;
}

.character-loop {
  display: grid;
  grid-template-columns: minmax(150px, 260px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
  align-items: stretch;
  padding: clamp(16px, 3vw, 24px);
  border: 4px solid var(--kana-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(88, 201, 111, 0.14), rgba(74, 144, 226, 0.14)),
    var(--paper);
  box-shadow: 0 8px 0 #cfdce5;
  text-align: center;
}

body.dark-mode .character-loop {
  box-shadow: 0 8px 0 var(--button-shadow);
}

.character-card {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  gap: 8px;
  min-height: 230px;
  place-content: center;
  justify-items: center;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.character-loop-answers {
  grid-column: 2;
  grid-row: 1 / 3;
  container: challenge-answers / inline-size;
}

/* Below ~4 comfortable columns, snap the four answer buttons to a symmetric 2x2. */
@container challenge-answers (max-width: 520px) {
  .compact-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.character-symbol {
  font-size: clamp(5.4rem, 16vw, 9rem);
  font-weight: 950;
  line-height: 0.9;
}

.character-hint {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.character-reveal {
  display: none;
  gap: 4px;
  grid-column: 1;
  grid-row: 2;
  justify-items: center;
  align-self: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

body.dark-mode .character-reveal {
  background: rgba(34, 51, 67, 0.85);
}

.character-reveal.show {
  display: grid;
}

.character-reading {
  color: var(--blue);
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  font-weight: 950;
}

.character-meaning {
  color: var(--ink);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 900;
}

.character-prompt {
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 950;
  text-align: left;
}

.set-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.set-card {
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 16px 12px 14px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--button-shadow);
}

.set-card:hover {
  border-color: var(--journey);
  background: color-mix(in srgb, var(--journey) 10%, var(--paper));
}

.set-card-jp {
  max-width: 100%;
  font-size: 1.7rem;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.set-card-jp.long {
  font-size: 1.15rem;
}

.set-card-romaji {
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 900;
}

.set-card-meaning {
  font-size: 0.84rem;
  font-weight: 800;
}

.set-card-note {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.set-card-play {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--muted);
  font-size: 0.62rem;
}

.emoji-prompt {
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
  padding: 18px 16px 22px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(88, 201, 111, 0.12), rgba(74, 144, 226, 0.08)),
    var(--mist);
  box-shadow: 0 5px 0 var(--button-shadow);
  text-align: center;
}

.emoji-prompt-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.emoji-prompt-art {
  font-size: clamp(3rem, 9vw, 4.6rem);
  line-height: 1.15;
  letter-spacing: 0.1em;
}

.gallery-prompt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(88, 201, 111, 0.12), rgba(74, 144, 226, 0.08)),
    var(--mist);
  color: var(--muted);
  font-weight: 900;
  box-shadow: 0 5px 0 var(--button-shadow);
}

.gallery-prompt span {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gallery-prompt strong {
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
}

.character-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}

.gallery-card {
  min-height: 190px;
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  padding: clamp(18px, 3vw, 26px);
  border: 3px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(235, 246, 241, 0.9)),
    var(--paper);
  box-shadow: 0 8px 0 #d6e1e8;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.gallery-card:hover,
.gallery-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: 0 10px 0 #c8d8e1;
}

body.dark-mode .gallery-card {
  box-shadow: 0 8px 0 var(--button-shadow);
}

body.dark-mode .gallery-card:hover,
body.dark-mode .gallery-card:focus-visible {
  box-shadow: 0 10px 0 var(--button-shadow);
}

.gallery-card.selected {
  border-color: var(--blue);
  background:
    linear-gradient(180deg, rgba(232, 242, 255, 0.98), rgba(241, 250, 246, 0.96)),
    var(--paper);
}

body.dark-mode .gallery-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(88, 201, 111, 0.08)),
    var(--paper);
}

body.dark-mode .gallery-card.selected {
  background:
    linear-gradient(180deg, rgba(74, 144, 226, 0.16), rgba(88, 201, 111, 0.1)),
    var(--paper);
}

.gallery-jp {
  color: var(--ink);
  font-size: clamp(2.35rem, 8vw, 4.6rem);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.gallery-card.long .gallery-jp {
  max-width: 100%;
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
}

.gallery-romaji {
  color: var(--blue);
  font-size: 1rem;
  font-weight: 950;
}

.gallery-meaning {
  color: var(--ink);
  font-weight: 850;
}

.gallery-script {
  margin-top: 4px;
}

.speech-warning {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: var(--note-bg);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.35;
}

.prompt-jp {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 950;
  line-height: 1.08;
}

.prompt-romaji {
  color: var(--blue);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 900;
}

.inline-romaji {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
}

.script-note {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.phrase-focus {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.kana-art {
  width: 100%;
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: center;
  min-height: 190px;
  padding: 18px 14px;
  border: 4px solid var(--kana-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(74, 144, 226, 0.16), rgba(255, 115, 92, 0.2)),
    var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 950;
  text-align: center;
  cursor: pointer;
  appearance: none;
  box-shadow: 0 8px 0 var(--button-shadow);
}

.kana-art:hover {
  transform: translateY(1px);
  box-shadow: 0 7px 0 var(--button-shadow);
}

.kana-symbol {
  font-size: clamp(3rem, 12vw, 6.4rem);
  line-height: 0.95;
}

.kana-romaji {
  margin-top: 2px;
  color: var(--blue);
  font-size: clamp(0.95rem, 2vw, 1.18rem);
  line-height: 1;
  font-weight: 950;
}

.kana-meaning {
  margin-top: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.1;
  font-weight: 850;
  text-align: center;
}

.phrase-text {
  min-width: 0;
}

.jp {
  display: block;
  overflow-wrap: anywhere;
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 950;
  line-height: 1.05;
}

.romaji {
  display: block;
  margin-top: 8px;
  color: var(--blue);
  font-size: clamp(1.15rem, 3vw, 1.8rem);
  font-weight: 900;
}

.phrase-script {
  display: block;
  margin-top: 5px;
}

.meaning {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 750;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.choice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
  align-items: start;
}

.choice-button,
.primary-button,
.secondary-button {
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.choice-button {
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 14px;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--button-shadow);
}

.choice-main {
  font-weight: 950;
}

.choice-romaji {
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 900;
}

.choice-button:hover,
.choice-button.selected {
  border-color: var(--journey);
  background: color-mix(in srgb, var(--journey) 14%, var(--paper));
}

.choice-button.correct {
  border-color: var(--green);
  background: #eaffef;
}

.choice-button.wrong {
  border-color: var(--coral);
  background: #fff0ed;
}

.choice-button:disabled {
  cursor: default;
  opacity: 1;
}

body.dark-mode .choice-button.correct {
  background: rgba(88, 201, 111, 0.22);
}

body.dark-mode .choice-button.wrong {
  background: rgba(255, 115, 92, 0.22);
}

.compact-choice-grid {
  /* Wrap to fewer columns instead of crushing labels when space runs short. */
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  align-content: start;
}

.fill-blank-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 18px;
  border: 2px dashed #c9d7df;
  border-radius: 8px;
  background: var(--mist);
}

.blank-slot,
.blank-after {
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 950;
  line-height: 1.08;
}

.blank-slot {
  min-width: 4.5ch;
  color: var(--blue);
}

.conversation-panel {
  display: grid;
  gap: 10px;
}

.conversation-line {
  display: grid;
  grid-template-columns: minmax(56px, max-content) minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.speaker-label {
  grid-row: span 3;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
}

.conversation-jp {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 950;
  line-height: 1.08;
}

.conversation-romaji {
  color: var(--blue);
  font-weight: 900;
}

.conversation-meaning {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.see-also-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  background: var(--note-bg);
}

.see-also-panel p {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.45;
}

.mini-phrase-list {
  display: grid;
  gap: 10px;
}

.mini-phrase {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(36, 50, 63, 0.12);
}

.mini-jp {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 950;
}

.mini-romaji {
  color: var(--blue);
  font-weight: 900;
}

.mini-meaning {
  color: var(--muted);
  font-weight: 800;
}

.listen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
  align-items: start;
}

.build-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
  align-items: start;
}

.build-workspace {
  display: grid;
  gap: 14px;
}

.answer-bank,
.answer-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.answer-slots {
  min-height: 72px;
  padding: 12px;
  border: 2px dashed #c9d7df;
  border-radius: 8px;
  background: var(--mist);
}

body.dark-mode .fill-blank-card,
body.dark-mode .answer-slots {
  border-color: #3a4d5e;
}

.word-chip {
  min-height: 44px;
  display: inline-grid;
  gap: 2px;
  place-items: center;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--violet);
  color: white;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 #6952bf;
}

.chip-jp {
  font-size: 1rem;
  line-height: 1;
}

.chip-romaji {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.82;
}

.word-chip.in-slot {
  background: var(--control-bg);
  box-shadow: 0 4px 0 var(--control-shadow);
}

.vocab-rail {
  display: grid;
  gap: 12px;
  padding-left: 18px;
  border-left: 2px solid var(--line);
}

.vocab-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.vocab-heading h4 {
  margin: 0;
  font-size: 0.98rem;
}

.vocab-heading span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.vocab-list {
  display: grid;
  gap: 8px;
}

.vocab-item {
  display: grid;
  gap: 3px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.vocab-term {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.vocab-jp {
  font-weight: 950;
}

.vocab-romaji {
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 900;
}

.vocab-meaning {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.feedback {
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--mist);
  color: var(--ink);
  font-weight: 850;
}

.feedback.good {
  background: #eaffef;
  color: var(--green-dark);
}

.feedback.bad {
  background: #fff0ed;
  color: #b43e2d;
}

body.dark-mode .feedback.good {
  background: rgba(88, 201, 111, 0.18);
  color: #7be392;
}

body.dark-mode .feedback.bad {
  background: rgba(255, 115, 92, 0.18);
  color: #ff9d8b;
}

.answer-feedback {
  display: grid;
  gap: 4px;
}

.feedback-kicker,
.feedback-meaning {
  font-size: 0.9rem;
  font-weight: 850;
}

.feedback-jp {
  color: var(--ink);
  font-size: clamp(1.55rem, 4vw, 2.5rem);
  font-weight: 950;
  line-height: 1.08;
}

.feedback-romaji {
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 900;
}

.lesson-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
}

.primary-button {
  padding: 0 24px;
  background: var(--journey);
  color: white;
  box-shadow: 0 5px 0 var(--journey-dark);
}

.secondary-button {
  padding: 0 20px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: 0 5px 0 var(--button-shadow);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.summary-tile {
  padding: 18px;
  border-radius: 8px;
  background: var(--mist);
  text-align: center;
}

.summary-tile strong {
  display: block;
  font-size: 2rem;
}

.summary-tile span {
  color: var(--muted);
  font-weight: 800;
}

.review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.review-content {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.review-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.review-jp {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 950;
  line-height: 1.08;
}

.review-romaji {
  color: var(--blue);
  font-weight: 900;
}

.review-meaning {
  color: var(--muted);
  font-weight: 800;
}

.review-play {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--control-fg);
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--control-shadow);
}

@media (min-width: 1101px) {
  .course-rail {
    transition: width 280ms ease, padding 280ms ease, border-right-color 280ms ease, opacity 200ms ease;
  }

  .brand-lockup,
  .rail-scroll {
    min-width: 344px;
  }

  body.rail-collapsed .course-rail {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right-color: transparent;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 1100px) {
  .app-shell {
    display: block;
    height: 100dvh;
  }

  .course-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(82vw, 400px);
    height: 100dvh;
    gap: 16px;
    padding: 22px;
    /* Fixed to the left edge, so it manages its own notch buffer. */
    padding-left: calc(22px + env(safe-area-inset-left, 0px));
    border-right: 1px solid var(--line);
    border-bottom: 0;
    transform: translateX(-105%);
    transition: transform 240ms ease;
    box-shadow: 18px 0 42px rgba(36, 50, 63, 0.22);
  }

  body.course-menu-open .course-rail {
    transform: translateX(0);
  }

  .rail-scroll {
    gap: 16px;
  }

  .course-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: block;
    border: 0;
    background: rgba(36, 50, 63, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  body.course-menu-open .course-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .menu-button {
    display: grid;
  }

  .brand-mark {
    width: 52px;
    height: 52px;
    font-size: 1.65rem;
  }

  .brand-lockup h1 {
    font-size: 1.65rem;
  }

  .profile-panel > div {
    padding: 8px 4px;
  }

  .profile-panel strong {
    font-size: 1.2rem;
  }

  .unit-button {
    min-height: 68px;
    padding: 8px 12px;
  }

  .unit-badge {
    width: 42px;
    height: 42px;
  }

  .lesson-stage {
    height: 100dvh;
    gap: 12px;
    padding: 22px clamp(18px, 4vw, 40px) 18px;
  }

  .stage-header h2 {
    font-size: clamp(1.9rem, 4vw, 2.65rem);
  }

  .lesson-card {
    gap: 16px;
    padding: 24px;
    min-height: calc(100dvh - 190px);
    margin-bottom: 18px;
  }

  .journey-panel {
    width: min(92vw, 720px);
  }

  .preview-outcomes {
    grid-template-columns: 1fr;
  }

  .kana-art {
    min-height: 160px;
  }

  .kana-symbol {
    font-size: clamp(3rem, 9vw, 5.2rem);
  }

  .jp {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
  }

  .unit-list {
    display: grid;
    gap: 12px;
    overflow: visible;
    padding-bottom: 8px;
  }

  .unit-button {
    min-width: 0;
    min-height: 90px;
  }

  .course-parts {
    display: grid;
    gap: 12px;
    overflow: visible;
    padding-bottom: 8px;
  }

  .course-part-button {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .docs-shell {
    width: min(100% - 20px, 1180px);
    padding: 10px 0 24px;
  }

  .docs-header {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
  }

  .docs-brand .brand-mark {
    width: 48px;
    height: 48px;
    border-width: 3px;
    font-size: 1.45rem;
  }

  .docs-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .docs-nav {
    position: static;
  }

  .doc-link {
    min-height: 54px;
    padding: 10px;
  }

  .docs-reader {
    min-height: auto;
    padding: 16px;
  }

  .docs-reader-header {
    display: grid;
  }

  .docs-raw {
    width: 100%;
  }

  .markdown-view {
    max-width: none;
  }

  .markdown-view p,
  .markdown-view li,
  .markdown-view blockquote {
    font-size: 0.94rem;
  }

  .course-rail {
    width: min(88vw, 360px);
    padding: 16px;
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    gap: 12px;
  }

  .profile-panel > div {
    padding: 10px 4px;
  }

  .journey-tabs {
    gap: 6px;
  }

  .lesson-stage {
    height: 100dvh;
    gap: 12px;
    padding: 16px;
  }

  .stage-header h2 {
    font-size: 1.55rem;
  }

  .lesson-card {
    gap: 14px;
    padding: 20px;
    min-height: calc(100dvh - 170px);
    margin-bottom: 16px;
  }

  .journey-panel {
    width: 100%;
    padding: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
  }

  .journey-panel-header {
    padding-bottom: 12px;
  }

  .journey-grid,
  .stamp-grid,
  .journey-map {
    grid-template-columns: 1fr;
  }

  .journey-hero {
    align-items: flex-start;
    padding: 18px;
  }

  .journey-hero > strong {
    font-size: 2.4rem;
  }

  .recent-words {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-meta {
    font-size: 0.74rem;
  }

  .choice-grid,
  .compact-choice-grid,
  .choice-layout,
  .character-loop,
  .listen-layout,
  .build-layout,
  .summary-grid,
  .review-list {
    grid-template-columns: 1fr;
  }

  .character-loop {
    grid-template-rows: none;
  }

  .character-card,
  .character-reveal,
  .character-loop-answers {
    grid-column: 1;
    grid-row: auto;
  }

  .phrase-focus {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }

  .kana-art {
    max-width: 180px;
    min-height: 138px;
    padding: 10px;
  }

  .kana-symbol {
    font-size: clamp(3.2rem, 17vw, 4.6rem);
  }

  .kana-romaji {
    font-size: 0.88rem;
  }

  .kana-meaning {
    font-size: 0.78rem;
  }

  .jp {
    font-size: clamp(2rem, 11vw, 2.8rem);
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .romaji {
    font-size: 1.05rem;
  }

  .fill-blank-card {
    padding: 14px;
  }

  .character-card {
    min-height: 180px;
  }

  .gallery-prompt {
    margin-right: auto;
    margin-left: 0;
  }

  .gallery-card {
    min-width: 0;
    min-height: 150px;
  }

  .character-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-jp {
    font-size: clamp(1.9rem, 9vw, 2.3rem);
  }

  .gallery-card.long .gallery-jp {
    font-size: clamp(1.2rem, 5.4vw, 1.55rem);
    line-height: 1.12;
  }

  .character-reveal {
    grid-column: auto;
  }

  .blank-slot,
  .blank-after {
    font-size: clamp(1.8rem, 10vw, 2.7rem);
  }

  .conversation-line {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 13px 14px;
  }

  .speaker-label {
    grid-row: auto;
  }

  .see-also-panel {
    padding: 16px;
  }

  .unit-list,
  .course-parts {
    display: grid;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 8px;
  }

  .unit-button,
  .course-part-button {
    min-width: 0;
  }

  .unit-button {
    min-height: 90px;
  }

  .course-part-button {
    min-height: 76px;
    padding: 10px 12px;
  }

  .vocab-rail {
    padding: 14px 0 0;
    border-top: 2px solid var(--line);
    border-left: 0;
  }

  .stage-header,
  .prompt-row {
    align-items: stretch;
  }

  .stage-header {
    flex-direction: row;
    align-items: flex-start;
  }

  .prompt-row {
    flex-direction: row;
    align-items: flex-start;
  }

  .prompt-row h3 {
    font-size: 1.4rem;
  }

  .prompt-row p {
    font-size: 0.9rem;
  }

  .icon-button,
  .speak-button {
    width: 44px;
    height: 44px;
  }

  .audio-actions {
    flex: 0 0 auto;
  }

  .read-instead-button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 0.86rem;
  }

  .lesson-actions {
    flex-wrap: wrap;
  }

  .lesson-actions .primary-button {
    flex: 1 1 100%;
  }

  .lesson-actions .secondary-button {
    flex: 1 1 0;
  }
}

/* --- Homepage (Fujisan splash) --- */

.brand-mark {
  cursor: pointer;
}

.brand-home {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.brand-home:hover,
.brand-home:focus-visible {
  color: var(--journey-dark);
}

.brand-home:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--journey);
  outline-offset: 3px;
}

body.home-open .progress-meta,
body.home-open .progress-track {
  display: none;
}

.home-view {
  display: grid;
  gap: 18px;
}

.home-hero {
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.fuji-scene {
  display: block;
  width: 100%;
  height: clamp(170px, 30vh, 280px);
}

/* The sky tints subtly with the selected Journey (green, blue, orange) - a
   nod to Shadow Dancer on the Mega Drive, whose intro sky changed colour
   with the difficulty level. */
.fuji-sky-top,
.fuji-sky-bottom {
  transition: stop-color 500ms ease;
}

.fuji-sky-top { stop-color: #cde9d8; }
.fuji-sky-bottom { stop-color: #f3fbf6; }

body[data-journey="confidence"] .fuji-sky-top { stop-color: #cfe7f6; }
body[data-journey="confidence"] .fuji-sky-bottom { stop-color: #f6fbff; }

body[data-journey="immersion"] .fuji-sky-top { stop-color: #fbe2c9; }
body[data-journey="immersion"] .fuji-sky-bottom { stop-color: #fff7ee; }
.fuji-sun { fill: var(--coral); }
.fuji-moon,
.fuji-stars { display: none; }
.fuji-ridge { fill: #b9d2e3; }
.fuji-mountain { fill: #4c6a8a; }
.fuji-snow { fill: #ffffff; }
.fuji-mist { fill: rgba(255, 255, 255, 0.62); }

body.dark-mode .fuji-sky-top { stop-color: #14261d; }
body.dark-mode .fuji-sky-bottom { stop-color: #0e1a14; }

body.dark-mode[data-journey="confidence"] .fuji-sky-top { stop-color: #17222e; }
body.dark-mode[data-journey="confidence"] .fuji-sky-bottom { stop-color: #101823; }

body.dark-mode[data-journey="immersion"] .fuji-sky-top { stop-color: #2b1d12; }
body.dark-mode[data-journey="immersion"] .fuji-sky-bottom { stop-color: #1a120b; }
body.dark-mode .fuji-sun { display: none; }
body.dark-mode .fuji-moon,
body.dark-mode .fuji-stars { display: block; }
body.dark-mode .fuji-moon-body { fill: #f6d78e; }
body.dark-mode .fuji-moon-crater { fill: #e2bd68; }
body.dark-mode .fuji-stars circle { fill: rgba(238, 244, 250, 0.8); }
body.dark-mode .fuji-ridge { fill: #23364a; }
body.dark-mode .fuji-mountain { fill: #2c405a; }
body.dark-mode .fuji-snow { fill: #dfe9f2; }
body.dark-mode .fuji-mist { fill: rgba(9, 14, 20, 0.5); }

/* --- Sakura petals ---
   Falling top-right to bottom-left in three layers per petal: a long linear
   drift, an alternating sway that bends the diagonal into a serpentine, and a
   flutter about the petal's own centre. The wind (drift distance + sway
   amplitude) is a pair of custom properties, so each Journey blows a little
   differently and the night air is nearly still. */
body {
  --petal-wind: -280px;
  --petal-sway: 24px;
  color-scheme: light;
}

body[data-journey="confidence"] {
  --petal-wind: -350px;
  --petal-sway: 30px;
}

body[data-journey="immersion"] {
  --petal-wind: -200px;
  --petal-sway: 19px;
}

body.dark-mode {
  --petal-wind: -150px;
  --petal-sway: 13px;
  color-scheme: dark;
}

.sakura-shape {
  fill: #f7b9c9;
  fill-opacity: 0.95;
  transform-box: fill-box;
  transform-origin: center;
  animation: sakura-spin var(--spin-dur, 7s) ease-in-out infinite alternate;
}

.sakura.alt .sakura-shape {
  fill: #fbd3dd;
}

body.dark-mode .sakura-shape {
  fill: #b0728a;
}

body.dark-mode .sakura.alt .sakura-shape {
  fill: #93607b;
}

.sakura-drift {
  opacity: 0.9;
  animation: sakura-drift var(--dur, 20s) linear var(--delay, 0s) infinite;
}

.sakura-sway {
  animation: sakura-sway var(--sway-dur, 4s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes sakura-drift {
  0% {
    transform: translate(150px, -260px);
    opacity: 0;
  }
  7% {
    opacity: 0.9;
  }
  86% {
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--petal-wind, -280px), 190px);
    opacity: 0;
  }
}

@keyframes sakura-sway {
  from {
    transform: translateX(calc(var(--petal-sway, 24px) * -1));
  }
  to {
    transform: translateX(var(--petal-sway, 24px));
  }
}

@keyframes sakura-spin {
  from {
    transform: rotate(-42deg);
  }
  to {
    transform: rotate(48deg);
  }
}

/* Petals hold a gentle static scatter for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .sakura-drift,
  .sakura-sway,
  .sakura-shape {
    animation: none;
  }
}

/* Portrait phones crop the 1200-unit scene to roughly its middle 400 units
   (xMidYMax slice keeps the peak, slices the sides), which pushed the sun,
   moon, petals, and outer stars out of frame. Pull the sky details toward the
   centre so dawn and night keep their character on narrow screens. Landscape
   keeps the original composition - the wide hero shows the full scene. */
@media (max-width: 900px) and (orientation: portrait) {
  .fuji-sun { transform: translateX(-160px); }
  .fuji-moon { transform: translateX(240px); }
  .fuji-stars circle:nth-child(1) { transform: translateX(440px); }
  .fuji-stars circle:nth-child(4) { transform: translateX(-290px); }
  .fuji-stars circle:nth-child(6) { transform: translateX(280px); }
}

.home-greeting {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 20px 22px 24px;
  text-align: center;
}

.home-greeting-ja {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
}

.home-greeting-ja:hover,
.home-greeting-ja:focus-visible {
  color: var(--journey-dark);
}

.home-greeting-romaji {
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-greeting p {
  max-width: 46ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.home-stats article {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  text-align: center;
}

.home-stats strong {
  font-size: 1.45rem;
  line-height: 1.1;
}

.home-stats span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
}

.home-resume-badge {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  background: var(--paper);
  font-size: 1.35rem;
}

.home-resume-copy {
  display: grid;
  flex: 1 1 200px;
  gap: 2px;
  min-width: 0;
}

.home-resume-copy strong {
  font-size: 1.05rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.home-resume .primary-button {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 640px) {
  .home-resume .primary-button {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* --- Shō-chiku-bai module grading (Course Map) --- */

.shochikubai-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.55;
}

.shochikubai-note em {
  color: var(--ink);
  font-style: normal;
  font-weight: 850;
}

.shochikubai-note span[lang="ja"],
.shochikubai-note .nowrap {
  white-space: nowrap;
  font-weight: 850;
}

.module-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.journey-map-card li .module-title-row {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.module-grade {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.journey-map-card li .module-grade {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.module-grade em {
  font-size: 0.95rem;
  font-style: normal;
}

.module-grade.complete-only {
  color: var(--green-dark);
}