:root {
  --blue: #1e3a5f;
  --blue-dark: #142a47;
  --gold: #d4a942;
  --gold-dark: #b8902f;
  --cream: #faf6ee;
  --card: #ffffff;
  --ink: #2b2b2b;
  --muted: #6b6558;
  --green: #3f9d58;
  --green-bg: #e6f5ea;
  --red: #c94f4f;
  --red-bg: #fbeaea;
  --locked: #d8d2c4;
  --radius: 16px;
  --shadow: 0 2px 8px rgba(30, 58, 95, 0.10);
  /* Height of the sticky topbar, kept in sync by syncTopbarHeight() in game.js.
     The sticky lesson progress row parks directly beneath it. */
  --topbar-h: 50px;

  /* Text-only variants of the accent colours. The plain --gold-dark / --green /
     --red are tuned for fills, borders and the 3D button shadows, where they
     look right but land under the 4.5:1 WCAG AA ratio when used as small text. */
  --gold-ink: #8a6a1f;
  --green-ink: #2f7a43;
  --red-ink: #a83535;

  /* --blue is a dark *surface* (topbar, unit headers, the Play card). --blue-ink
     is the same blue used as *text* (headings, accents, focus rings). They read
     identically in light mode but must invert in opposite directions in dark. */
  --blue-ink: #1e3a5f;

  /* Surfaces, lines and state fills, tokenised so dark mode has something to
     override — these were literal hexes scattered through the file. */
  --line: #e5ddca;
  --track: #e8e1d1;
  --blue-tint: #eef3fa;
  --gold-tint: #fdf6e3;
  --choice-shadow: #e0d7c0;
  --choice-shadow-sel: #c3d2e6;
  --choice-shadow-ok: #b9dfc4;
  --choice-shadow-bad: #eec9c9;
  --green-shadow: #2f7a43;
  --locked-ink: #8b8574;
  --locked-shadow: #c2bbaa;
  --disabled-bg: #e8e1d1;
  --disabled-shadow: #d5cdb9;
  --disabled-ink: #a9a290;
  --badge-bg: rgba(255, 255, 255, 0.55);
  /* Transparent *cream*, not `transparent` — that resolves to transparent black
     and fades the sticky gradients through grey in Safari. */
  --cream-fade: rgba(250, 246, 238, 0);

  /* Side padding, shared by .screen and by the negative margins the sticky
     lesson bars use to cover its gutters. */
  --gutter: 16px;
}

/* Landscape notches: widen the gutter only where the inset actually exists. */
@supports (padding: max(0px)) {
  :root {
    --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
}

/* Every pairing below was checked against WCAG AA (4.5:1); the weakest is the
   disabled button label at 4.78. */
@media (prefers-color-scheme: dark) {
  :root {
    --blue: #17293f;
    --blue-dark: #0f1d2e;
    --blue-ink: #a8c7e8;
    --gold: #d9b356;
    --gold-dark: #a8842c;
    --gold-ink: #e3c273;
    --cream: #121a24;
    --card: #1b2532;
    --ink: #e9e4d9;
    --muted: #a7a093;
    --green: #48a862;
    --green-bg: #17301f;
    --green-ink: #84d69b;
    --green-shadow: #2c6b3f;
    --red: #d76464;
    --red-bg: #331d1d;
    --red-ink: #f2a6a6;
    --locked: #2a3340;
    --locked-ink: #9aa5b4;
    --locked-shadow: #1e2632;
    --line: #2f3b4b;
    --track: #2b3644;
    --blue-tint: #1d2f45;
    --gold-tint: #2b2413;
    --choice-shadow: #141c26;
    --choice-shadow-sel: #14243a;
    --choice-shadow-ok: #17301f;
    --choice-shadow-bad: #2e1a1a;
    --disabled-bg: #232d3a;
    --disabled-shadow: #1a222c;
    --disabled-ink: #8f98a5;
    --badge-bg: rgba(255, 255, 255, 0.12);
    --cream-fade: rgba(18, 26, 36, 0);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }
  /* The white ✓ badge on a done day-circle needs to stay lighter than the node. */
  .lesson-node.done::after { background: var(--card); }
  /* --blue sits only a shade off the canvas here, so the filled active pill
     needs a light edge to still read as the selected tab. */
  .course-tab.active { border-color: var(--blue-ink); }
}

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

body {
  font-family: "Nunito", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
}

/* Keyboard focus. :focus-visible keeps the ring off mouse clicks. Deliberately
   no border-radius here — the outline already follows each element's own
   corners, so pills and circles stay pills and circles. */
:where(button, a, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-ink);
  outline-offset: 2px;
}
/* A blue ring vanishes against the dark blue surfaces. */
#topbar :focus-visible,
.play-today :focus-visible,
.unit-header:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The top inset keeps the bar clear of the notch when installed as a PWA in
     standalone mode, where the status bar overlays the page. syncTopbarHeight()
     measures the result, so the sticky lesson row follows automatically. */
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter) 12px;
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow);
}
.brand {
  font-family: inherit;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.brand:hover { opacity: 0.85; }
.stats { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; flex-shrink: 0; }
.stat { white-space: nowrap; }

/* Stroked icon set for the always-visible chrome. Emoji render differently on
   every platform — Android, Windows and older iOS each ship their own glyphs —
   so the one row of the app that's on screen at all times uses real vectors.
   Sized in em so they track the surrounding text, including the 420px step-down. */
.ic {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* At ~13px the stat icons sit well below the size where a 2px stroke in a 24
   viewBox stays legible — the flame read as a droplet and the medal as a keyhole.
   Solid shapes hold up; the larger brand mark is fine stroked. */
.ic-solid { fill: currentColor; stroke: none; }
.brand { display: inline-flex; align-items: center; gap: 7px; }
.brand .ic { width: 1.2em; height: 1.2em; }
.stat { display: inline-flex; align-items: center; gap: 5px; }
.stat .ic { width: 1.15em; height: 1.15em; color: var(--gold); }
.stat b { font-weight: 800; }
.help-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.help-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* ---------- How-to-play modal ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 42, 71, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.help-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(20, 42, 71, 0.35);
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 24px 24px;
  text-align: center;
}
.help-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
}
.help-emoji { font-size: 2.6rem; }
.help-card h2 { color: var(--blue-ink); margin: 6px 0 2px; }
.help-sub {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  color: var(--gold-ink);
  margin-bottom: 14px;
}
.help-intro {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 18px;
}
.help-list {
  list-style: none;
  text-align: left;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-list li { display: flex; gap: 12px; align-items: flex-start; }
.help-list li span { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.help-list li div { font-size: 0.92rem; line-height: 1.45; color: var(--ink); }
.help-list li b { color: var(--blue-ink); }
.help-version {
  margin-top: 14px;
  font-size: 0.72rem;
  color: var(--muted);
}

.screen {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px var(--gutter) 60px;
}
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-h1 {
  text-align: center;
  color: var(--blue-ink);
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  margin: 2px 0 4px;
}

.site-tagline {
  text-align: center;
  color: var(--blue-ink);
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

/* Body copy is left-aligned and held to a ~480px measure: centring a four-line
   paragraph gives every line a different start point, which is the slowest thing
   to read on the page. The h1 and the italic tagline above stay centred. */
.site-intro {
  text-align: left;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto 16px;
}

.tagline {
  text-align: left;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto 20px;
}

/* ---------- Play Today ---------- */
.play-today {
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.play-today-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-bottom: 4px;
}
.play-today-title {
  font-family: "Lora", Georgia, serif;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.play-today .big-btn, .play-today .ghost-btn { margin-bottom: 0; }
.play-today .ghost-btn { border-color: #fff; color: #fff; }
.play-today .ghost-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* Countdown to the next daily challenge (Today card, results screen, week page) */
.next-challenge {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  margin: 12px 0 0;
}
.next-challenge b {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  color: var(--blue-ink);
}
.play-today .next-challenge { color: rgba(255, 255, 255, 0.85); }
.play-today .next-challenge b { color: var(--gold); }
#done-next { margin: 0 0 18px; }
#week-next { margin: 0 0 18px; }

/* ---------- Practice Quiz builder (Doctrinal Mastery) ---------- */
.quiz-builder {
  background: var(--card);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.qb-title {
  font-family: "Lora", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.qb-modes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.qb-mode {
  border: 2px solid var(--line);
  background: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
.qb-mode.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--blue-dark);
}
.qb-mode-desc {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 14px;
}
.qb-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.qb-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
}
.qb-count {
  font-weight: 800;
  color: var(--blue-ink);
  white-space: nowrap;
  min-width: 88px;
  text-align: right;
}
#quiz-builder .big-btn { margin-bottom: 0; }

/* ---------- Catch-up nudge & past weeks ---------- */
.catchup-nudge {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--gold-ink);
  line-height: 1.4;
}
.past-toggle {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 4px 0 20px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}
.past-toggle:hover { background: rgba(0, 0, 0, 0.04); }

/* ---------- Course tabs & CFM banner ---------- */
#course-tabs {
  display: flex;
  flex-wrap: wrap; /* three courses won't fit on one line on phones */
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.course-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
/* currentColor so the mark tracks the tab's own state — muted when inactive,
   white on the filled active pill — in both colour schemes, for free. */
.course-tab .ic, .dm-item .ic { width: 1.15em; height: 1.15em; }
.tab-caret { margin-left: 1px; font-size: 0.8em; opacity: 0.75; }
.course-tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Doctrinal Mastery dropdown group (see renderCourseTabs) */
.course-group { position: relative; }
.dm-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  padding: 6px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.dm-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.dm-item:hover { background: rgba(30, 58, 95, 0.06); }
.dm-item.active {
  background: var(--blue);
  color: #fff;
}

.cfm-banner {
  display: block;
  width: 100%;
  border: 2px solid var(--gold);
  background: var(--gold-tint);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.cfm-banner b { color: var(--blue-ink); }
.cfm-banner .cfm-go {
  display: block;
  margin-top: 4px;
  font-weight: 800;
  color: var(--gold-ink);
}

.unit-header { position: relative; }
.unit-header.this-week { outline: 3px solid var(--gold); outline-offset: 2px; }
.week-badge {
  display: inline-block;
  margin-top: 8px;
  background: var(--gold);
  color: var(--blue-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 900;
}
.lock-badge {
  display: inline-block;
  margin-top: 8px;
  background: var(--badge-bg);
  color: var(--locked-ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 900;
}
.manual-link, .manual-link:visited {
  display: inline-block;
  margin-top: 8px;
  margin-left: 6px;
  background: var(--gold);
  color: var(--blue-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 900;
  text-decoration: none;
}
.manual-link:hover, .manual-link:active { background: var(--gold-dark); color: var(--blue-dark); }

.ghost-btn {
  width: 100%;
  padding: 13px;
  margin-bottom: 12px;
  border: 2px solid var(--blue-ink);
  border-radius: var(--radius);
  background: none;
  color: var(--blue-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.ghost-btn:hover { background: var(--blue-tint); }
.ghost-btn.copied { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------- Path ---------- */
.unit {
  margin-bottom: 28px;
  scroll-margin-top: 70px; /* keep unit titles clear of the sticky topbar on banner jumps */
}
.unit-header {
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
.unit-header h2 { font-size: 1.05rem; font-weight: 800; }
.unit-header p { font-size: 0.85rem; opacity: 0.85; margin-top: 2px; }
.unit.locked .unit-header { background: var(--locked); color: var(--locked-ink); box-shadow: none; }

.lessons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 26px;
  padding: 18px 0 0;
}
.lesson-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.lesson-node {
  position: relative; /* anchors the .done ✓ badge */
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-dark);
  transition: transform 0.08s;
}
.lesson-node:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-dark); }
.lesson-node.done { background: var(--green); box-shadow: 0 4px 0 var(--green-shadow); }
/* Completion reads as a mark *added* to the day rather than one that erases
   which kind of day it was. The cream ring keeps it legible against both the
   green node and the page behind it. */
.lesson-node.done::after {
  content: "✓";
  position: absolute;
  right: -3px;
  bottom: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 2px solid var(--cream);
  color: var(--green-ink);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
}
.lesson-node.locked {
  background: var(--locked);
  box-shadow: 0 4px 0 var(--locked-shadow);
  cursor: default;
}
/* Blue rather than gold: a gold ring around a gold circle barely registers,
   and blue ties the marker to the "Today" label beneath it. */
.lesson-node.current {
  outline: 3px solid var(--blue-ink);
  outline-offset: 3px;
}
.lesson-node-wrap .label {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.lesson-node-wrap .label.today {
  color: var(--blue-ink);
  font-weight: 900;
}

/* ---------- Lesson ---------- */
/* The lesson screen drops .screen's bottom padding so the sticky action bar can
   sit flush against the bottom of the viewport rather than floating 60px above it. */
#screen-lesson { padding-bottom: 0; }

/* Progress and hearts stay pinned under the topbar for the whole question, so
   you never lose sight of how far along you are or how many hearts are left.
   The negative side margins let the cream background cover .screen's gutters,
   otherwise content scrolls visibly through the 16px either side. */
.lesson-top {
  position: sticky;
  top: var(--topbar-h);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 calc(-1 * var(--gutter)) 14px;
  padding: 10px var(--gutter);
  background: var(--cream);
}
/* Question text passing beneath the bar dissolves instead of hard-cutting mid-line. */
.lesson-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--cream), var(--cream-fade));
}
.lesson-header {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--track);
}
/* Applied from question 2 onward — see renderQuestion(). */
.lesson-header.compact {
  margin-bottom: 14px;
  padding-bottom: 10px;
}
.lesson-header.compact .lh-title {
  font-size: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lh-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--gold-ink);
  margin-bottom: 4px;
}
.lh-title {
  font-family: "Lora", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-ink);
}
.quit {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}
.progress-track {
  flex: 1;
  height: 14px;
  background: var(--track);
  border-radius: 7px;
  overflow: hidden;
}
#progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 7px;
  transition: width 0.3s;
}
.hearts { font-size: 1rem; letter-spacing: 2px; min-width: 66px; text-align: right; }
/* A heart going grey is otherwise a silent change in the corner of the screen.
   flashHeartLoss() in game.js adds .lost to replay this on every miss. */
.hearts.lost { animation: heart-shake 0.4s ease-in-out; }
@keyframes heart-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.q-prompt {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 22px;
  min-height: 60px;
}
.q-prompt .blank {
  display: inline-block;
  min-width: 90px;
  border-bottom: 2px solid var(--blue-ink);
  text-align: center;
  font-style: italic;
  color: var(--blue-ink);
}
.q-prompt .quote {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
}

/* Gap is 12px rather than 10 because the 3px drop shadow below each choice
   eats into the visual spacing. */
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--choice-shadow);
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* Explicit, because a <button> otherwise takes the UA's own colour — including
     the UA's disabled grey once answered, which is dark-on-dark and effectively
     invisible in dark mode. */
  color: var(--ink);
  transition: border-color 0.1s, background 0.1s, transform 0.08s, box-shadow 0.08s;
}
.choice:hover:not(:disabled) { border-color: var(--gold); }
/* Same physical press as .big-btn and .lesson-node, which the choices lacked. */
.choice:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--choice-shadow); }
.choice.selected { border-color: var(--blue-ink); background: var(--blue-tint); box-shadow: 0 3px 0 var(--choice-shadow-sel); }
.choice.correct { border-color: var(--green); background: var(--green-bg); box-shadow: 0 3px 0 var(--choice-shadow-ok); }
.choice.wrong { border-color: var(--red); background: var(--red-bg); box-shadow: 0 3px 0 var(--choice-shadow-bad); }
/* Once answered, the also-rans recede but the two that matter — the right answer
   and what you picked — stay at full strength. */
.choice:disabled { cursor: default; color: var(--muted); }
.choice.correct, .choice.wrong { color: var(--ink); }

/* Number badges for the 1–4 keyboard shortcuts, on precise-pointer screens
   only — on a phone they would be clutter with nothing to press. */
@media (min-width: 700px) and (pointer: fine) {
  .choices { counter-reset: choice; }
  .choice { display: flex; align-items: center; gap: 12px; }
  .choice::before {
    counter-increment: choice;
    content: counter(choice);
    flex: 0 0 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
  }
  .choice:disabled::before { opacity: 0.45; }
}

.feedback {
  margin-top: 18px;
  border-radius: var(--radius);
  padding: 14px 16px;
  /* checkAnswer() scrolls this into view; keep its last line clear of the
     sticky Continue bar, which scrollIntoView knows nothing about. */
  scroll-margin-bottom: 100px;
  animation: fb-in 0.18s ease-out;
}
@keyframes fb-in {
  from { opacity: 0; transform: translateY(8px); }
}
.feedback.good { background: var(--green-bg); border: 2px solid var(--green); }
.feedback.bad { background: var(--red-bg); border: 2px solid var(--red); }
.feedback-title { font-weight: 900; margin-bottom: 4px; }
.feedback.good .feedback-title { color: var(--green-ink); }
.feedback.bad .feedback-title { color: var(--red-ink); }
.feedback-text { font-size: 0.95rem; line-height: 1.45; }
.feedback-ref {
  margin-top: 6px;
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Check / Continue is always reachable without scrolling. The gradient is
   spelled out in cream rather than `transparent`, which resolves to
   transparent *black* and fades through grey in Safari. */
.lesson-bottom {
  position: sticky;
  bottom: 0;
  z-index: 9;
  margin: 24px calc(-1 * var(--gutter)) 0;
  padding: 26px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--cream) 78%, var(--cream-fade));
}
.big-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--radius);
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-dark);
  color: var(--blue-dark);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-dark); }
.big-btn:disabled {
  background: var(--disabled-bg);
  box-shadow: 0 4px 0 var(--disabled-shadow);
  color: var(--disabled-ink);
  cursor: default;
}

/* ---------- Done ---------- */
.done-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 24px;
  text-align: center;
  margin-top: 30px;
}
.done-emoji { font-size: 3rem; }
.done-card h2 { color: var(--blue-ink); margin: 10px 0 22px; }
.done-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 22px;
}
.done-stat {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 90px;
}
.done-stat span { display: block; font-size: 1.3rem; font-weight: 900; color: var(--blue-ink); }
.done-stat label { font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.done-verse {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 24px;
  padding: 0 8px;
}
.done-milestone {
  background: var(--gold-tint);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  color: var(--gold-ink);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 14px;
  margin-bottom: 20px;
}

@media (max-width: 420px) {
  /* Keep the safe-area top inset — a plain padding here would drop it. */
  #topbar { padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 12px; }
  .brand { font-size: 0.9rem; }
  .stats { gap: 6px; font-size: 0.8rem; }
  .lessons { gap: 16px 18px; }
  .lesson-node { width: 52px; height: 52px; font-size: 1.2rem; }
}

/* On wide (desktop) screens, tighten the gap so all 7 day-circles fit on one row
   instead of wrapping to a second line within the app's fixed-width column. */
@media (min-width: 600px) {
  .lessons { flex-wrap: nowrap; gap: 22px 12px; }
}

/* ---------- Share card ---------- */
/* The score image drawn by drawShareCard(). Shown at card width on the finish
   screen so the player sees exactly what a friend will receive. */
.share-card {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.share-save {
  display: inline-block;
  margin: -6px 0 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue-ink);
}

/* Links inside intro copy (week pages, index) share the brand blue. */
.site-intro a, .site-intro a:visited { color: var(--blue-ink); font-weight: 700; text-decoration: none; }
.site-intro a:hover { text-decoration: underline; }

/* ---------- Site footer ---------- */
.site-footer {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.7;
}
.site-footer a, .site-footer a:visited { color: var(--blue-ink); font-weight: 700; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .sep { margin: 0 6px; opacity: 0.5; }
.in-lesson .site-footer { display: none; }

/* ---------- Week page ---------- */
.crumbs {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 12px;
}
.crumbs a, .crumbs a:visited { color: var(--blue-ink); text-decoration: none; font-weight: 700; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 5px; opacity: 0.6; }

.week-hero {
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.week-eyebrow {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.week-hero h1 {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 8px;
}
.week-ref { font-weight: 800; font-size: 1rem; margin: 0 0 4px; }
.week-dates { font-size: 0.85rem; opacity: 0.85; margin: 0; }
.week-progress {
  display: inline-block;
  margin-top: 10px;
  background: var(--badge-bg);
  color: var(--blue-dark);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 800;
}
.week-hero .manual-link { margin-top: 12px; }

#week-play { margin-bottom: 18px; }

.week-days {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.week-day {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--choice-shadow);
  transition: transform 0.08s;
}
.week-day:hover { border-color: var(--gold); }
.week-day:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--choice-shadow); }
.week-day.today { border-color: var(--blue-ink); background: var(--blue-tint); }
.week-day.done { border-color: var(--green); }
.week-day.locked {
  color: var(--locked-ink);
  background: var(--cream);
  box-shadow: none;
  cursor: default;
}
.week-day.locked:hover { border-color: var(--line); }
.wd-icon {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  font-size: 1.1rem;
}
.week-day.done .wd-icon { background: var(--green); }
.week-day.locked .wd-icon { background: var(--locked); }
.wd-main { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.wd-main b { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 800; }
.week-day.today .wd-main b { color: var(--blue-ink); }
.wd-main span { display: block; font-size: 0.95rem; font-weight: 700; }
.wd-main small { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.wd-status {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--blue-ink);
  white-space: nowrap;
}
.week-day.done .wd-status { color: var(--green-ink); }
.week-day.locked .wd-status { color: var(--locked-ink); }

.week-verse {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  margin: 0 auto 20px;
  max-width: 480px;
}

.week-preview {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 20px;
}
.week-preview summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--blue-ink);
  font-size: 0.9rem;
}
.week-preview h3 { font-size: 0.85rem; color: var(--muted); margin: 14px 0 4px; }
.week-preview ol { margin: 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.45; }
.week-preview li { margin-bottom: 4px; }

.week-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.week-nav a, .week-nav a:visited { color: var(--blue-ink); font-weight: 700; text-decoration: none; max-width: 48%; }
.week-nav a:hover { text-decoration: underline; }
.week-nav .next { text-align: right; margin-left: auto; }

/* ---------- Static pages (About, Teachers, Weeks) ---------- */
.page { max-width: 560px; margin: 0 auto; padding: 20px var(--gutter) 40px; }
.page h1 {
  color: var(--blue-ink);
  font-size: 1.5rem;
  font-weight: 900;
  margin: 6px 0 4px;
}
.page .lead {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  color: var(--blue-ink);
  font-size: 1.05rem;
  margin: 0 0 18px;
}
.page h2 { color: var(--blue-ink); font-size: 1.1rem; margin: 26px 0 8px; }
.page p, .page li { font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.page p { margin: 0 0 12px; }
.page ul, .page ol { margin: 0 0 14px; padding-left: 22px; }
.page li { margin-bottom: 6px; }
.page a, .page a:visited { color: var(--blue-ink); font-weight: 700; }
.page .big-btn { display: block; text-align: center; text-decoration: none; margin: 18px 0; box-sizing: border-box; }
.page .ghost-btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.callout {
  background: var(--gold-tint);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 16px 0;
}
.callout p:last-child { margin-bottom: 0; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  position: relative;
  padding-left: 44px;
  margin-bottom: 14px;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--blue-dark);
  font-weight: 900;
  display: grid;
  place-items: center;
}
.steps li b { color: var(--blue-ink); }

.week-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.week-list a {
  display: block;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--choice-shadow);
}
.week-list a:hover { border-color: var(--gold); }
.week-list a.this-week { border-color: var(--blue-ink); background: var(--blue-tint); }
.week-list a.upcoming { color: var(--locked-ink); background: var(--cream); box-shadow: none; }
.week-list b { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 800; }
.week-list a.this-week b { color: var(--blue-ink); }
.week-list span { display: block; font-family: "Lora", Georgia, serif; font-style: italic; font-size: 1rem; }
.week-list small { display: block; font-size: 0.8rem; color: var(--muted); }
.week-list .tag {
  float: right;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--blue-ink);
  background: var(--badge-bg);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: "Nunito", sans-serif;
  font-style: normal;
}
.contact-box {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 14px 0;
}
.contact-box p { margin: 0; }