/* ============================================
   Epha: Missel design system
   Reference: docs/design-reference/2026-10-28-epha-missel.html
   Sharp corners (2px on action buttons), 1px rules instead of cards,
   no shadows, no blur, no emoji. Gold is reserved for what the player found.
   Exceptions, kept to motion and guidance: the progress bar (3px) and the tutorial's
   coach notes (8px) are rounded; the coach spotlight dims the page with a spread shadow.
   ============================================ */

:root {
  --bg: #110F1A;
  --surface: #1A1620;
  --surface-up: #221E2C;
  --text: #E8E0D0;
  --text-2: rgba(232, 224, 208, 0.66);
  --text-3: rgba(232, 224, 208, 0.45);
  --line: rgba(232, 224, 208, 0.12);
  --gold: #C8A040;
  --gold-warm: #E8C060;
  --gold-bright: #F0D080;
  --gold-deep: #A07828;
  --terra: #C47A5A;
  --terra-bright: #E89878;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Bebas Neue', 'Outfit', sans-serif;

  --gutter: 24px;
  --column: 600px;
  --btn-radius: 2px;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fine grain over every surface (≤ 2 %, baseFrequency ≥ 1) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.02;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--gold-warm);
  outline-offset: 2px;
}

#app {
  max-width: var(--column);
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.view {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.view.active {
  display: flex;
}

.hidden {
  display: none !important;
}

.label {
  font: 700 10px/1 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- Top bar ---- */

.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px var(--gutter) 0;
  font: 600 11px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-3);
}

.topbar-brand {
  color: var(--gold);
  letter-spacing: 4px;
  text-decoration: none;
}

.topbar-date {
  white-space: nowrap;
}

.topbar-back {
  color: var(--text-2);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-icon {
  display: flex;
  color: var(--text-2);
}

.topbar-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.topbar-lang {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
}

/* ---- Passage head ---- */

.passage-head {
  flex-shrink: 0;
  padding: 26px var(--gutter) 16px;
  border-bottom: 1px solid var(--line);
}

.passage-head:empty {
  display: none;
}

.passage-ref {
  font: 500 30px/1.1 var(--serif);
}

.passage-ref small {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-2);
}

.passage-meta {
  margin-top: 10px;
  font: 400 13px/1.4 var(--sans);
  color: var(--text-2);
}

.passage-meta button {
  font-size: inherit;
  color: inherit;
  border-bottom: 1px solid var(--line);
}

.passage-meta .meta-translation {
  color: var(--terra);
  border-bottom-color: rgba(196, 122, 90, 0.35);
}

.passage-summary {
  margin-top: 10px;
  font: 400 14px/1.55 var(--serif);
  color: var(--text-2);
}

/* ---- Passage ---- */

.passage-container {
  flex: 1;
  overflow-y: auto;
  padding: 18px var(--gutter) 24px;
  font: 400 18.5px/1.85 var(--serif);
  -webkit-overflow-scrolling: touch;
}

.passage-container.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-2);
}

.verse {
  font: 700 10px/1 var(--sans);
  color: var(--terra);
  vertical-align: super;
  margin-right: 3px;
  letter-spacing: 0.5px;
}

.w-given {
  color: var(--text-2);
}

.w-found {
  color: var(--gold-warm);
}

/* A found word keeps the exact room its blank had */
.w-slot {
  display: inline-block;
  margin: 0 1px;
  text-align: center;
}

.w-just-found {
  color: var(--gold-warm);
  animation: foundToGold 600ms ease-out;
}

@keyframes foundToGold {
  from { color: var(--text); }
  to { color: var(--gold-warm); }
}

/* Hidden word: a ruled blank, the same for every word (its nature is in its sheet). */
.gap {
  display: inline-block;
  position: relative;
  height: 1em;
  vertical-align: -2px;
  margin: 0 1px;
  border-bottom: 1px solid var(--text-3);
}

.gap i,
.gap sub {
  position: absolute;
  color: var(--text-3);
  font-style: normal;
  pointer-events: none;
}

.gap i {
  left: 1px;
  bottom: 2px;
  font: 500 12px/1 var(--sans);
}

.gap sub {
  right: 1px;
  bottom: 3px;
  font: 400 9px/1 var(--mono);
}

.gap.is-selected {
  border-bottom-color: var(--gold-warm);
  background: linear-gradient(to top, rgba(200, 160, 64, 0.14), transparent 75%);
}

.gap.is-selected i,
.gap.is-selected sub {
  color: var(--gold-warm);
}

/* ---- Controls ---- */

.controls {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 12px var(--gutter) max(26px, env(safe-area-inset-bottom));
  background: var(--bg);
}

.counters {
  display: flex;
  justify-content: space-between;
  font: 400 11px/1 var(--mono);
  color: var(--text-3);
  margin-bottom: 10px;
}

.counters b {
  color: var(--text);
  font-weight: 500;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.progress {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-up);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(to right, var(--gold-deep), var(--gold-warm));
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* A quarter, half, three quarters: small notches that turn gold once passed */
.progress-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--bg);
}

.progress-tick[data-at="25"] { left: 25%; }
.progress-tick[data-at="50"] { left: 50%; }
.progress-tick[data-at="75"] { left: 75%; }

.progress-tick.is-reached {
  background: rgba(17, 15, 26, 0.45);
}

.progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(240, 208, 128, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}

.progress.is-growing::after {
  animation: progressShine 900ms ease-out;
}

@keyframes progressShine {
  to { transform: translateX(100%); }
}

.progress-pct {
  min-width: 3.2em;
  text-align: right;
  font: 500 12px/1 var(--mono);
  color: var(--gold-warm);
}

.feedback {
  font: 400 14px/1.4 var(--serif);
  color: var(--text-2);
  margin-bottom: 6px;
}

.feedback.is-found { color: var(--gold-warm); }
.feedback.is-near { color: var(--terra-bright); }

.last-guesses {
  display: flex;
  gap: 6px;
  font: 400 13px/1.4 var(--sans);
  color: var(--text-3);
  margin-bottom: 14px;
  min-height: 1.4em;
}

.guess-label {
  flex-shrink: 0;
}

/* All guesses on one line: it scrolls sideways and fades out where more are hidden */
.guess-row {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.guess-row::-webkit-scrollbar {
  display: none;
}

.guess-row.has-more {
  mask-image: linear-gradient(to right, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
}

.last-guesses span { color: var(--text-2); }
.last-guesses .is-found { color: var(--gold-warm); }
.last-guesses .is-near { color: var(--terra-bright); }

.input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--text-2);
  padding-bottom: 10px;
  transition: border-color 150ms;
}

.input-row.is-miss {
  border-bottom-color: var(--terra-bright);
}

.input-row input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font: 400 18px/1.2 var(--serif);
}

.input-row input::placeholder {
  color: var(--text-3);
}

.btn-text {
  font: 700 11px/1 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  padding: 8px 0;
}

.btn-text:disabled {
  color: var(--text-3);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .w-just-found { animation: none; }
  .progress-bar, .input-row { transition: none; }
  .progress.is-growing::after { animation: none; }
}

/* ---- Bottom sheet ---- */

.sheet-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.sheet-root.is-open {
  pointer-events: auto;
}

.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 14, 0.62);
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  /* --keyboard and --viewport come from the visual viewport (sheet.js) */
  bottom: var(--keyboard, 0px);
  max-width: var(--column);
  max-height: calc(var(--viewport, 100dvh) * 0.85);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--surface-up);
  border-top: 1px solid rgba(232, 224, 208, 0.16);
  outline: none;
  animation: sheetIn 220ms ease-out;
  transition: transform 180ms ease-out;
}

.sheet.is-tall {
  height: calc(var(--viewport, 100dvh) * 0.85);
}

@keyframes sheetIn {
  from { transform: translateY(24px); }
  to { transform: none; }
}

.sheet-handle {
  flex-shrink: 0;
  width: 100%;
  padding: 12px 0 16px;
  touch-action: none;
  cursor: grab;
}

.sheet-handle span {
  display: block;
  width: 36px;
  height: 3px;
  margin: 0 auto;
  background: rgba(232, 224, 208, 0.22);
}

.sheet-body {
  overflow-y: auto;
  padding: 0 var(--gutter) max(30px, env(safe-area-inset-bottom));
}

.sheet-body .label + * {
  margin-top: 12px;
}

.sheet-title {
  font: 400 24px/1.25 var(--serif);
}

.sheet-text {
  font: 400 15px/1.6 var(--sans);
  color: var(--text-2);
  margin-top: 12px;
}

.sheet-def {
  font: 400 22px/1.45 var(--serif);
  margin: 18px 0 24px;
}

.sheet-def.is-missing {
  color: var(--text-3);
  font-size: 17px;
}

.sheet-word {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.sheet-word .gap {
  font: 400 26px/1 var(--serif);
  height: 1.1em;
}

.sheet-word .gap i { font-size: 16px; }
.sheet-word .gap sub { font-size: 11px; }

.sheet-starts {
  font: 400 13px/1 var(--sans);
  color: var(--text-3);
}

.sheet-guess {
  margin-bottom: 6px;
}

.sheet-guess-note {
  min-height: 1.4em;
  margin-bottom: 16px;
  font: 400 14px/1.4 var(--serif);
  color: var(--terra-bright);
}

.sheet-note {
  font: 400 12px/1.4 var(--sans);
  color: var(--text-3);
  text-align: center;
  margin-top: 10px;
}

.sheet-details {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

.sheet-details div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font: 400 14px/1.4 var(--sans);
}

.sheet-details dt { color: var(--text-3); }
.sheet-details dd { color: var(--text); text-align: right; }

.sheet-link {
  display: inline-block;
  margin-top: 18px;
  font: 700 11px/1 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}

.btn {
  width: 100%;
  height: 50px;
  border-radius: var(--btn-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--gold);
  color: #17130A;
}

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--text-2);
}

/* Help sheet */

.help-section + .help-section {
  margin-top: 24px;
}

.help-hint {
  font: 400 16px/1.6 var(--serif);
}

.help-rules p {
  font: 400 14px/1.6 var(--sans);
  color: var(--text-2);
  margin-top: 8px;
}

.help-legend {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px 14px;
  align-items: end;
  margin-top: 14px;
  font: 400 14px/1 var(--sans);
  color: var(--text-2);
}

.help-legend b {
  font-weight: 400;
  color: var(--gold-warm);
  letter-spacing: 2px;
}

.help-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 400 11px/1 var(--mono);
  color: var(--text-3);
}

/* ---- End of game ---- */

.topbar-close {
  font: 500 14px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

.end-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 26px var(--gutter) max(32px, env(safe-area-inset-bottom));
}

.end-install {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.end-install-hint {
  font: 400 13px/1.5 var(--sans);
  color: var(--text-2);
}

.end-install-hint svg {
  vertical-align: -3px;
  stroke: var(--gold-warm);
}

.end-title {
  font: 400 32px/1.15 var(--serif);
}

.end-sub {
  font: 400 14px/1.5 var(--sans);
  color: var(--text-2);
  margin-top: 8px;
}

.mosaic {
  background: var(--surface);
  padding: 16px 16px 14px;
  margin: 22px 0 24px;
}

.mosaic-head {
  display: flex;
  justify-content: space-between;
  font: 600 11px/1 var(--sans);
  letter-spacing: 3px;
  color: var(--text-2);
}

.mosaic-head b {
  color: var(--gold);
  font-weight: 600;
}

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  margin-top: 14px;
}

.mosaic-grid i {
  aspect-ratio: 1;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(232, 224, 208, 0.3);
}

.mosaic-grid i.is-exact {
  background: var(--gold-bright);
  box-shadow: none;
}

.mosaic-grid i.is-near {
  background: var(--gold-deep);
  box-shadow: none;
}

.mosaic-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font: 400 11px/1 var(--mono);
  color: var(--text-3);
}

.mosaic-marks {
  color: var(--gold-warm);
  letter-spacing: 3px;
}

.keep-verse {
  font: 400 17px/1.7 var(--serif);
  padding-left: 16px;
  border-left: 1px solid var(--gold);
  margin-top: 12px;
}

.keep-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.link-quiet {
  font: 400 13px/1 var(--sans);
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.end-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.btn-ghost.is-kept {
  color: var(--gold-warm);
  border-color: rgba(200, 160, 64, 0.45);
}

.end-note {
  text-align: center;
  font: 400 13px/1.4 var(--sans);
  color: var(--text-3);
  margin-top: 16px;
}

.end-reread {
  text-align: center;
  margin-top: 8px;
}

.end-email {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.end-email-text {
  font: 400 15px/1.5 var(--serif);
  color: var(--text-2);
}

.end-email-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  border-bottom: 1px solid var(--text-2);
  padding-bottom: 8px;
}

.end-email-form input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font: 400 16px/1.2 var(--sans);
}

.end-email-form input::placeholder {
  color: var(--text-3);
}

.verse-choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font: 400 16px/1.6 var(--serif);
}

.verse-choice.is-current {
  color: var(--gold-warm);
}

/* ---- Archives ---- */

.arch-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px var(--gutter) max(32px, env(safe-area-inset-bottom));
}

.arch-title {
  font: 400 30px/1 var(--serif);
}

.arch-count {
  font: 400 13px/1.5 var(--sans);
  color: var(--text-2);
  margin-top: 8px;
}

.arch-tabs {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  border-bottom: 1px solid var(--line);
}

.arch-tabs button {
  padding-bottom: 10px;
  font: 700 11px/1 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-3);
}

.arch-tabs button[aria-selected="true"] {
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--gold);
}

.arch-month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 12px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-2);
}

.arch-month b {
  color: var(--text);
  font-weight: 600;
}

.arch-month button:disabled {
  opacity: 0.3;
  cursor: default;
}

.arch-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.arch-dow {
  font: 600 9px/1 var(--sans);
  letter-spacing: 1px;
  color: var(--text-3);
  text-align: center;
  padding-bottom: 6px;
}

.day {
  aspect-ratio: 1 / 1.15;
  position: relative;
  padding: 4px 4px 10px;
  text-align: left;
  vertical-align: top;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  font: 400 11px/1 var(--mono);
  color: var(--text-3);
  border: 1px solid transparent;
  overflow: hidden;
}

/* The passage of the day, e.g. « Jn 3 » */
.day small {
  max-width: 100%;
  font: 500 9px/1.1 var(--sans);
  letter-spacing: 0.2px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.day.is-done small { color: var(--gold-warm); }
.day.is-today small { color: var(--gold-warm); }

.day::after {
  content: '';
  position: absolute;
  left: 5px;
  bottom: 5px;
  height: 2px;
}

.day.is-done { background: var(--surface-up); color: var(--text); }
.day.is-done::after { right: 5px; background: var(--gold); }
.day.is-part { background: var(--surface); color: var(--text-2); }
.day.is-part::after { width: 40%; background: var(--gold-deep); }
.day.is-todo { color: var(--text-2); border-color: var(--line); }
.day.is-today { border-color: var(--gold); color: var(--gold-warm); }
.day.is-off { opacity: 0.28; cursor: default; }
.day.is-selected { outline: 1px solid var(--text); outline-offset: 1px; }

.arch-detail {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.arch-detail-date {
  font: 600 10px/1 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-3);
}

.arch-detail-ref {
  font: 500 20px/1.3 var(--serif);
  margin-top: 8px;
}

.arch-detail-meta {
  font: 400 13px/1.4 var(--sans);
  color: var(--text-2);
  margin-top: 4px;
}

.arch-detail .btn-text {
  margin-top: 10px;
}

.toc-part {
  margin: 22px 0 4px;
}

.toc {
  display: flex;
  align-items: baseline;
  width: 100%;
  padding: 9px 0;
  font: 400 16px/1 var(--serif);
  text-align: left;
}

.toc-lead {
  flex: 1;
  margin: 0 8px;
  border-bottom: 1px dotted rgba(232, 224, 208, 0.22);
  transform: translateY(-4px);
}

.toc-count {
  font: 400 12px/1 var(--mono);
  color: var(--text-2);
}

.toc-count b {
  color: var(--gold-warm);
  font-weight: 500;
}

.toc.is-open {
  color: var(--gold-bright);
}

.toc-sub {
  padding: 2px 0 6px 14px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}

.toc-sub button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 0;
  text-align: left;
  font: 400 13px/1.3 var(--sans);
  color: var(--text-2);
}

.toc-sub button span:first-child small {
  display: block;
  margin-top: 3px;
  font: 400 11px/1.3 var(--sans);
  color: var(--text-3);
}

.toc-sub button span:last-child {
  font: 400 11px/1.3 var(--mono);
  color: var(--text-3);
  white-space: nowrap;
}

.toc-sub button.is-done span:last-child {
  color: var(--gold-warm);
}

.kept-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.kept-item p {
  font: 400 16px/1.65 var(--serif);
}

.kept-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font: 400 12px/1.3 var(--sans);
  color: var(--text-3);
}

.kept-meta button {
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}

.arch-empty {
  margin-top: 24px;
  font: 400 15px/1.6 var(--serif);
  color: var(--text-2);
}

/* ---- Introduction ---- */

.onboarding {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  max-width: var(--column);
  margin: 0 auto;
  padding: 18px 28px max(30px, env(safe-area-inset-bottom));
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 110% 50% at 50% 30%, rgba(232, 192, 96, 0.08), transparent 70%);
  overflow-y: auto;
}

.ob-top {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ob-steps {
  flex: 1;
  display: flex;
  gap: 6px;
}

.ob-steps i {
  flex: 1;
  height: 2px;
  background: var(--line);
}

.ob-steps i.is-on {
  background: var(--gold);
}

.ob-skip {
  font: 500 14px/1 var(--sans);
  color: var(--text-3);
}

.ob-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 36px;
}

.ob-spacer {
  flex: 1;
  min-height: 24px;
}

.ob-title {
  font: 400 54px/1 var(--serif);
}

.ob-title-sm {
  font: 400 32px/1.15 var(--serif);
}

.ob-etymology {
  margin-top: 18px;
  font: 400 14px/1.6 var(--sans);
  color: var(--text-2);
}

.ob-etymology code {
  font: 400 13px var(--mono);
  color: var(--text);
}

.ob-etymology b {
  margin-left: 6px;
  font: 600 11px var(--sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
}

.ob-lead {
  margin-top: 34px;
  font: 400 21px/1.5 var(--serif);
}

.ob-demo {
  margin: 30px 0;
  font: 400 24px/1.4 var(--serif);
}

.ob-demo .gap {
  height: 1.1em;
}

.ob-demo .gap i { font-size: 16px; }
.ob-demo .gap sub { font-size: 11px; }

.ob-body {
  margin-top: 16px;
  font: 400 15px/1.65 var(--sans);
  color: var(--text-2);
}

.ob-section + .ob-section {
  margin-top: 22px;
}

.ob-text {
  margin-top: 8px;
  font: 400 14px/1.6 var(--sans);
  color: var(--text-2);
}

.ob-ref {
  margin-top: 8px;
  font: 400 14px/1.5 var(--sans);
  color: var(--text-2);
}

.ob-passage {
  margin-top: 26px;
  font: 400 19px/1.9 var(--serif);
}

.ob-tutorial .feedback {
  margin: 20px 0 10px;
}

/* The field sits right under the short text, so an opening keyboard keeps both in view */
.ob-tutorial .input-row {
  margin-top: 24px;
}

/* ---- Coach marks (tutorial) ----
   Dim around the element in question, draw the arrow, then show the note.
   Purely visual: taps go through to the page. */

.coach {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}

.coach-spot {
  position: fixed;
  border-radius: 8px;
  outline: 1px solid rgba(232, 192, 96, 0.55);
  box-shadow: 0 0 0 200vmax rgba(8, 8, 14, 0.68);
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.coach-arrow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.coach-arrow path {
  fill: none;
  stroke: var(--gold-warm);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 560ms cubic-bezier(0.45, 0, 0.25, 1) 260ms;
}

.coach-note {
  position: fixed;
  max-width: min(300px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--surface-up);
  border: 1px solid rgba(232, 192, 96, 0.4);
  font: 400 15px/1.45 var(--serif);
  color: var(--text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease-out 720ms, transform 320ms ease-out 720ms;
}

.coach.is-in .coach-spot,
.coach.is-in .coach-note {
  opacity: 1;
  transform: none;
}

/* Where to tap to leave the sheet */
.coach-tap {
  position: fixed;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-warm);
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.coach.is-in .coach-tap {
  opacity: 1;
  animation: coachTap 1600ms ease-out 300ms infinite;
}

@keyframes coachTap {
  0% { transform: scale(0.6); opacity: 1; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* « Valider », once the guided word is typed */
.btn-text.is-breathing {
  animation: breathe 1500ms ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); color: var(--gold); }
  50% { transform: scale(1.12); color: var(--gold-bright); }
}

/* ---- Last step: Caravaggio's Saint Jerome, gold stars rising ---- */

.onboarding.is-final {
  background-image: none;
}

.onboarding.is-final .ob-top {
  position: relative;
  z-index: 2;
}

.ob-final {
  position: static;
}

.ob-final > :not(.ob-art) {
  position: relative;
  z-index: 1;
}

.ob-art {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 66%;
  overflow: hidden;
  z-index: 0;
}

.ob-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('img/saint-jerome-caravage.webp') 56% 30% / cover no-repeat;
  animation: artIn 1400ms ease-out both, artDrift 16s ease-out both;
}

.ob-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(17, 15, 26, 0.35), rgba(17, 15, 26, 0) 28%, rgba(17, 15, 26, 0.2) 60%, var(--bg));
}

@keyframes artIn {
  from { opacity: 0; }
}

@keyframes artDrift {
  from { transform: scale(1.14) translateX(2%); }
  to { transform: none; }
}

.ob-final .ob-title {
  font-size: 46px;
  color: var(--gold-bright);
}

.ob-final .ob-lead {
  margin-top: 16px;
  font-size: 19px;
}

.ob-caption {
  margin: 14px 0 26px;
  font: 400 11px/1.4 var(--sans);
  color: var(--text-3);
}

.ob-rise {
  animation: obRise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ob-final .ob-title { animation-delay: 500ms; }
.ob-final .ob-lead { animation-delay: 750ms; }
.ob-final .ob-caption { animation-delay: 950ms; }
.ob-final .btn { animation-delay: 1150ms; }

@keyframes obRise {
  from { opacity: 0; transform: translateY(14px); }
}

.ob-sparks {
  position: absolute !important;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ob-sparks span {
  position: absolute;
  left: var(--x);
  bottom: 18%;
  font-size: var(--size);
  line-height: 1;
  color: var(--gold-warm);
  opacity: 0;
  animation: sparkRise 3200ms ease-out var(--delay) both;
}

@keyframes sparkRise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), -55vh) scale(1) rotate(40deg); }
}

@media (prefers-reduced-motion: reduce) {
  .coach-spot, .coach-note, .coach-tap, .coach-arrow path { transition: none; }
  .coach.is-in .coach-tap, .btn-text.is-breathing, .ob-rise, .ob-art::before { animation: none; }
  .ob-sparks { display: none; }
}