/* ==========================================================================
   The Canal Boat Bookseller - components.css
   Styles for components that previously had none (toasts, oracle, logbook tabs,
   afternoon outcome, letters, dusk workshop) plus the hands-on rituals,
   the ship's cat, the cabin diorama and the compact mobile HUD.
   Loaded after styles.css.
   ========================================================================== */

/* Toasts */
.quiet-honor-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--toast-offset, 0px));
  transform: translate(-50%, 20px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 14px 20px;
  background: rgba(22, 41, 31, 0.96);
  border: 1px solid var(--c-wood-honey);
  border-radius: var(--r-md);
  color: #FBF4E4;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.quiet-honor-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Shared parchment card language */
.oracle-card-pill, .fate-coin-pill, .memory-echo-pill, .return-visit-card, .listen-block,
.dock-letters-bundle, .match-completed-summary, .outcome-card, .tea-first-sip-banner {
  background: #FFFDF8;
  border: 1px solid var(--c-parchment-border);
  border-radius: var(--r-md);
  box-shadow: 0 2px 10px rgba(42, 27, 16, 0.06);
}

.scenery-sensory-desc { font-size: 16px !important; }
.morning-omen-card { gap: 14px; flex-wrap: wrap; }

.oracle-card-pill, .fate-coin-pill {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  margin-top: 4px;
}
.oracle-glyph, .coin-icon { font-size: 30px; line-height: 1; }
.oracle-meta, .coin-meta { font-size: 15px; line-height: 1.5; color: var(--c-ink); }
.oracle-meta em { color: var(--c-wood-warm); }
.oracle-whisper, .coin-meta p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px !important;
  color: var(--c-forest-mid);
  margin-top: 4px;
}
.fate-coin-pill.sun { border-left: 4px solid #E5B33F; }
.fate-coin-pill.moon { border-left: 4px solid #5D6B8C; }
.memory-echo-pill { padding: 12px 16px; font-size: 15px; line-height: 1.5; color: var(--c-wood-warm); }

.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.checkbox-label input { width: 20px; height: 20px; accent-color: var(--c-forest-mid); flex-shrink: 0; }
.checkbox-custom { display: none; }

/* Afternoon */
.matchmaker-wrapper { display: flex; flex-direction: column; gap: 18px; }
.visitor-avatar-fallback-svg { width: 100%; height: 100%; }
.tea-steeping-section, .book-matching-section { display: flex; flex-direction: column; gap: 14px; }
.tea-step-header { display: flex; flex-direction: column; gap: 4px; }
.step-num-pill, .section-badge-pill {
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: var(--c-forest-mid);
  color: #FFFDF8;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.step-title, .workshop-block-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--c-forest-dark);
}
.step-sub, .workshop-block-sub { font-size: 15px; line-height: 1.55; color: var(--c-ink-sub); }
.tea-card-info { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 2px; }
.tea-cup-svg, .tea-cup-vector { width: 100%; height: 100%; }
.tea-ritual-buttons { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hold-btn { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.hold-btn:active { transform: scale(0.97); }
.steam-particle { font-size: 20px; color: #B9B1A3; display: inline-block; }
.tea-first-sip-banner { padding: 14px 18px; font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--c-wood-warm); width: 100%; }
.soul-state-group { display: flex; flex-direction: column; }
.group-label { font-weight: 600; font-size: 15px; color: var(--c-forest-dark); }
.chip-text { font-size: 15px; }
.bookmark-gift-toggle-wrap { padding: 12px 16px; background: #F4EDE0; border-radius: var(--r-sm); }
.match-submit-wrap { display: flex; justify-content: flex-end; }
.match-submit-btn { padding: 14px 28px; font-size: 16px; }

.listen-block { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.listen-questions { display: flex; flex-direction: column; gap: 10px; }
.listen-q-btn {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: #F4EDE0;
  border: 1px solid var(--c-parchment-border);
  border-radius: var(--r-sm);
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--c-forest-dark);
  transition: background 0.2s;
}
.listen-q-btn:hover { background: #EDE2CC; }
.listen-answer {
  display: none;
  margin: 8px 4px 0 18px;
  padding-left: 12px;
  border-left: 3px solid var(--c-wood-honey);
  font-family: var(--font-hand);
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-wood-warm);
}
.listen-item.is-heard .listen-answer { display: block; animation: fadeUp 0.4s ease; }
.listen-item.is-heard .listen-q-btn { background: #E8F0EA; border-color: #B7CDBE; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tome-drop-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 2px dashed var(--c-wood-honey);
  border-radius: var(--r-md);
  background: repeating-linear-gradient(90deg, #8A5F3A 0 22px, #7E5534 22px 44px);
  color: #FBF4E4;
  font-size: 15px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.tome-drop-counter.is-hover { transform: scale(1.02); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.4); }
.tome-drop-counter.has-book { border-style: solid; }
.counter-book { width: 26px; height: 38px; border-radius: 3px; border: 2px solid; box-shadow: 2px 2px 0 rgba(0,0,0,0.3); flex-shrink: 0; }
.tome-drag-ghost {
  position: fixed;
  z-index: 700;
  width: 90px;
  height: 120px;
  pointer-events: none;
  transform: translate(-50%, -60%) rotate(-6deg);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  opacity: 0.92;
}
.tome-shelf-item { touch-action: pan-y; }

.outcome-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; border-width: 2px; }
.outcome-card.harmonic-match { border-color: #7FA88C; background: #F3F8F2; }
.outcome-card.unexpected-serendipity { border-color: #B39BC8; background: #F7F2FA; }
.outcome-card.haven-peace { border-color: #9DB3C6; background: #F2F6FA; }
.outcome-badge {
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: var(--c-wood-warm);
  color: #FFFDF8;
  font-size: 14px;
  font-weight: 600;
}
.outcome-title { font-family: var(--font-serif); font-size: 20px; color: var(--c-forest-dark); }
.outcome-dialogue { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--c-wood-warm); }
.outcome-shy-line, .outcome-wrap-note, .outcome-return-note { font-size: 15px; line-height: 1.5; color: var(--c-ink-sub); }
.outcome-return-note { color: var(--c-forest-mid); font-weight: 500; }
.outcome-rewards-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: #EDE4D0;
  color: var(--c-wood-warm);
  font-size: 14px !important;
  font-weight: 600;
}
.barter-book-reveal, .barter-book-tag { font-size: 15px; line-height: 1.5; color: var(--c-ink); }
.match-completed-summary { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.summary-badge { font-weight: 700; color: var(--c-forest-mid); font-size: 15px; }
.summary-desc { font-size: 15px; line-height: 1.5; }

.haven-letters-preview { margin-top: 12px; }
.dock-letters-bundle { padding: 14px 16px; }
.bundle-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bundle-title { font-family: var(--font-serif); font-size: 17px; color: var(--c-forest-dark); }
.bundle-bonus { background: #C6985C !important; color: #1A0E08 !important; }
.bundle-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.bundle-letter-pill { padding: 10px 12px; background: #F4EDE0; border-radius: var(--r-sm); font-size: 15px; line-height: 1.5; }
.bundle-empty { font-size: 15px; color: var(--c-ink-sub); font-style: italic; }

/* Return visits */
.return-visit-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-left: 4px solid var(--c-wood-honey);
  animation: fadeUp 0.5s ease;
}
.return-visit-card + .return-visit-card { margin-top: 10px; }
.return-visit-icon { font-size: 34px; }
.return-visit-kicker { font-family: var(--font-hand); font-size: 18px; color: var(--c-terracotta); }
.return-visit-text p { font-size: 15px; line-height: 1.5; margin-top: 2px; }
.return-visit-gift { color: var(--c-ink-sub); }
.return-visit-card.is-accepted { background: #F3F8F2; border-left-color: #7FA88C; }

/* Dusk workshop */
.dusk-workshop-wrapper { display: flex; flex-direction: column; gap: 26px; }
.marginalia-vault-block, .herbarium-press-block { display: flex; flex-direction: column; gap: 10px; }
.relic-cataloged-badge { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--c-forest-mid); }
.herbarium-canvas-column { display: flex; justify-content: center; }
.herbarium-controls-column { display: flex; flex-direction: column; gap: 16px; }
.slider-item { display: flex; flex-direction: column; gap: 4px; font-size: 14px; flex: 1; min-width: 130px; }
.slider-item input { width: 100%; accent-color: var(--c-forest-mid); }
.herb-actions-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Logbook tabs */
.empty-hint { padding: 28px 16px; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--c-ink-sub); }
.passport-stamps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.passport-stamp-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px; background: #FFFDF8; border: 1px solid var(--c-parchment-border); border-radius: var(--r-md); text-align: center; }
.passport-stamp-cell.is-empty { opacity: 0.55; }
.stamp-wax-circle {
  width: 120px; height: 120px;
  border: 4px double; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: 'Cinzel', serif;
  transform: rotate(-8deg);
}
.stamp-code { font-size: 18px; font-weight: 700; }
.stamp-motto { font-size: 10px; letter-spacing: 0.5px; }
.stamp-port { font-size: 11px; }
.stamp-meta { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--c-ink-sub); }
.stamp-meta strong { color: var(--c-forest-dark); font-size: 15px; }

.chronicles-flow { display: flex; flex-direction: column; gap: 16px; }
.chronicle-entry-card { padding: 18px 20px; background: #FFFDF8; border: 1px solid var(--c-parchment-border); border-radius: var(--r-md); }
.entry-header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.entry-lock { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--c-forest-dark); }
.entry-time { font-size: 14px; color: var(--c-ink-sub); }
.entry-prompt { font-style: italic; font-size: 15px; color: var(--c-wood-warm); margin-bottom: 10px; }
.entry-body { font-family: var(--font-hand); font-size: 21px; line-height: 1.45; color: var(--c-ink); white-space: pre-wrap; }

.marginalia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.marginalia-card { padding: 16px 18px; background: #FBF3DF; border: 1px solid #E5D3AE; border-radius: var(--r-sm); box-shadow: 2px 3px 0 rgba(139, 101, 52, 0.12); transform: rotate(-0.4deg); }
.marginalia-card:nth-child(even) { transform: rotate(0.5deg); }
.m-date { font-family: var(--font-hand); font-size: 18px; color: var(--c-terracotta); }
.m-title { font-family: var(--font-serif); font-size: 16px; margin: 4px 0 6px; color: var(--c-forest-dark); }
.m-text { font-family: var(--font-hand); font-size: 19px; line-height: 1.4; color: var(--c-ink); }

.herbarium-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.album-bookmark-card { display: flex; gap: 14px; padding: 12px; background: #FFFDF8; border: 1px solid var(--c-parchment-border); border-radius: var(--r-md); }
.album-bm-thumb { width: 80px; height: 200px; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,0.15); flex-shrink: 0; }
.album-bm-info { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; }
.album-bm-info p { font-family: var(--font-hand); font-size: 18px; color: var(--c-wood-warm); }
.album-bm-info p.album-bm-gift { font-family: var(--font-body); font-size: 14px; color: var(--c-forest-mid); }
.album-bm-dl { align-self: flex-start; margin-top: auto; }

.ledger-summary-block { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.ledger-summary-block h4 { font-family: var(--font-serif); font-size: 19px; color: var(--c-forest-dark); }
.ledger-stats-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 8px; }
.ledger-stats-trio > div { padding: 12px 14px; background: #F4EDE0; border-radius: var(--r-sm); }

.honors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.honor-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--c-parchment-border); background: #FFFDF8; }
.honor-card.is-locked { opacity: 0.5; filter: grayscale(0.7); }
.honor-card.is-unlocked { border-color: var(--c-wood-honey); box-shadow: 0 0 0 2px rgba(198, 152, 92, 0.18); }
.honor-icon { font-size: 28px; }
.honor-meta strong { font-family: var(--font-serif); font-size: 16px; color: var(--c-forest-dark); }
.honor-meta p { font-size: 14px; line-height: 1.45; color: var(--c-ink-sub); margin-top: 2px; }

/* Epilogue */
.ending-select-btn { flex-direction: column; align-items: flex-start !important; border-radius: var(--r-md) !important; }
.ending-select-btn strong { font-size: 15px !important; }
.ending-select-btn span { font-size: 14px !important; }
.epilogue-presentation-card { display: flex; flex-direction: column; }
.epilogue-personal {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: #F4EDE0;
  border-radius: var(--r-sm);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-wood-warm);
}
.epilogue-personal p + p { margin-top: 8px; }
.epilogue-own-words { margin: 12px 0 4px; font-family: var(--font-hand); font-size: 23px; line-height: 1.35; color: var(--c-forest-dark); }
.epilogue-own-words cite { display: block; margin-top: 4px; font-family: var(--font-body); font-style: normal; font-size: 14px; color: var(--c-ink-sub); }
.epilogue-actions { flex-wrap: wrap; gap: 10px; }

/* Scenery: painted still underneath, cinemagraph fades in on top */
.scenery-card-frame .scenery-img,
.scenery-card-frame .scenery-video,
.scenery-card-frame .scenery-fallback-svg { position: absolute; inset: 0; }
.scenery-card-frame .scenery-video { opacity: 0; transition: opacity 0.9s ease; }
.scenery-card-frame .scenery-video.is-ready { opacity: 1; }
.scenery-card-frame .fog-scratch-canvas { z-index: 2; }
.scenery-card-frame .fog-controls-bar { z-index: 3; }

/* --------------------------------------------------------------------------
   Rituals overlay (lock, wax, wrapping, Christmas Eve)
   -------------------------------------------------------------------------- */
.ritual-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 18, 14, 0.86);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ritual-overlay.is-open { opacity: 1; }
.ritual-window {
  width: 100%;
  max-width: 820px;
  max-height: 94vh;
  overflow-y: auto;
  background: var(--c-parchment);
  border: 2px solid var(--c-wood-honey);
  border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: modalPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ritual-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 22px; background: #254234; color: #FFFDF8; border-bottom: 2px solid var(--c-wood-honey); }
.ritual-kicker { font-family: var(--font-hand); font-size: 18px; color: #E2BC84; }
.ritual-title { font-family: var(--font-display); font-size: 24px; letter-spacing: 1px; }
.ritual-sub { font-size: 15px; color: #DCE6DD; margin-top: 2px; line-height: 1.45; }
.ritual-close { color: #FFFDF8; font-size: 22px; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.ritual-close:hover { background: rgba(255,255,255,0.12); }
.ritual-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.ritual-step-text { font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--c-forest-dark); text-align: center; }
.ritual-cat-line { font-family: var(--font-hand); font-size: 19px; color: var(--c-terracotta); text-align: center; }
.ritual-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.ritual-actions .btn-secondary.is-holding { background: #EDE2CC; transform: scale(0.97); }
.ritual-actions button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.lock-stage { position: relative; }
.lock-svg, .wax-svg, .wrap-svg, .xmas-svg { width: 100%; height: auto; display: block; border-radius: var(--r-sm); touch-action: none; }
#lkCrankHit { cursor: grab; }
#lkCrankHit:active { cursor: grabbing; }
.lock-meter { height: 10px; margin-top: 10px; background: #E5DCCE; border-radius: 5px; overflow: hidden; }
.lock-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, #3F7468, #6AA392); transition: width 0.1s linear; }

.wax-stage { position: relative; }
.wax-seal-handle {
  position: absolute;
  left: 86%;
  top: 22%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: none;
  transition: transform 0.25s ease, opacity 0.3s;
  opacity: 0.55;
}
.wax-seal-handle.is-ready { opacity: 1; animation: sealNudge 1.6s ease-in-out infinite; cursor: grab; }
.wax-seal-handle.is-dragging { animation: none; cursor: grabbing; transition: none; }
.wax-seal-handle.is-pressing { left: 43.3% !important; top: 67.6% !important; animation: none; transform: translate(-50%, -50%) scale(0.92); }
.wax-seal-handle.is-lifted { opacity: 0; transform: translate(-50%, -110%); }
.wax-seal-knob { width: 34px; height: 54px; border-radius: 16px 16px 6px 6px; background: linear-gradient(90deg, #5A3B22, #8B5E34, #5A3B22); }
.wax-seal-face {
  width: 70px; height: 40px; margin-top: -4px;
  border-radius: 50% / 40%;
  background: radial-gradient(circle at 40% 35%, #F3D27A, #C59B27 60%, #8E6B16);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; color: #5A4210;
}
@keyframes sealNudge { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -58%); } }

.wrap-svg { cursor: pointer; }
.wrap-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.wrap-swatches { display: flex; gap: 10px; margin-top: 6px; }
.wrap-swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #FFFDF8; box-shadow: 0 0 0 1px var(--c-parchment-border); }
.wrap-swatch.is-active { box-shadow: 0 0 0 3px var(--c-forest-mid); }
#wpFoldL.is-folding, #wpFoldR.is-folding, #wpFoldT.is-folding { animation: foldIn 0.35s ease; transform-origin: center; transform-box: fill-box; }
#wpTie.is-tying { animation: tieIn 0.5s ease; transform-origin: center; transform-box: fill-box; }
@keyframes foldIn { from { transform: scaleX(0.2); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes tieIn { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }

.xmas-stage { position: relative; }
.xmas-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 236, 170, 0.18);
  border: 2px dashed rgba(255, 236, 170, 0.8);
  font-size: 20px;
  animation: spotPulse 1.8s ease-in-out infinite;
}
.xmas-spot.is-lit { opacity: 0; pointer-events: none; }
@keyframes spotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 236, 170, 0.5); } 50% { box-shadow: 0 0 0 10px rgba(255, 236, 170, 0); } }
.xmas-bulb { animation: bulbTwinkle 1.6s ease-in-out infinite; }
@keyframes bulbTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.xmas-snow circle { animation: snowFall 7s linear infinite; }
@keyframes snowFall { from { transform: translateY(-40px); } to { transform: translateY(600px); } }
.xmas-letters { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.xmas-envelope { text-align: left; padding: 12px 14px; background: #FBF3DF; border: 1px solid #E5D3AE; border-radius: var(--r-sm); font-size: 15px; }
.env-front { font-family: var(--font-serif); font-weight: 600; color: var(--c-forest-dark); }
.env-note { display: none; margin-top: 6px; font-family: var(--font-hand); font-size: 19px; line-height: 1.35; color: var(--c-wood-warm); }
.xmas-envelope.is-open .env-note { display: block; animation: fadeUp 0.4s ease; }

/* --------------------------------------------------------------------------
   Ship's cat
   -------------------------------------------------------------------------- */
.ship-cat { position: absolute; z-index: 30; left: 14px; bottom: 12px; width: 78px; pointer-events: none; }
.ship-cat[data-pose="sleep"] { width: 96px; }
.ship-cat-btn { pointer-events: auto; width: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25)); }
.cat-svg { width: 100%; height: auto; display: block; }
.cat-tail { transform-origin: 64px 96px; animation: catTail 3.2s ease-in-out infinite; }
@keyframes catTail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }
.cat-eyes { animation: catBlink 5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes catBlink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.ship-cat.is-hop .ship-cat-btn { animation: catHop 0.5s ease; }
@keyframes catHop { 0%, 100% { transform: none; } 40% { transform: translateY(-10px); } }
.ship-cat-bubble {
  position: absolute;
  left: 70px;
  bottom: 54px;
  width: max-content;
  max-width: 260px;
  padding: 10px 14px;
  background: #FFFDF8;
  border: 1px solid var(--c-wood-honey);
  border-radius: 14px 14px 14px 4px;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 1.3;
  color: var(--c-wood-warm);
  box-shadow: var(--shadow-warm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.ship-cat-bubble.is-visible { opacity: 1; transform: none; }
.ship-cat-heart { position: absolute; left: 40%; top: -6px; color: #C0392B; font-size: 22px; pointer-events: none; animation: heartRise 1.2s ease forwards; }
@keyframes heartRise { to { transform: translateY(-34px); opacity: 0; } }
#lockSanctuaryModal .modal-scrollable-body { padding-bottom: 110px; }

/* --------------------------------------------------------------------------
   Cabin diorama
   -------------------------------------------------------------------------- */
.cabin-diorama { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #2A1B10; border: 2px solid var(--c-wood-honey); }
.cabin-diorama-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); }
.cabin-diorama.is-festive::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 4%;
  height: 18px;
  background: radial-gradient(circle, #F5C04A 0 4px, transparent 5px) 0 0 / 34px 18px repeat-x,
              radial-gradient(circle, #E0574F 0 4px, transparent 5px) 17px 6px / 34px 18px repeat-x;
  filter: drop-shadow(0 0 6px #F5C04A);
  animation: bulbTwinkle 2s ease-in-out infinite;
}
.cabin-shelf { position: absolute; left: 4%; top: 8%; width: 40%; height: 18%; display: flex; align-items: flex-end; gap: 3px; padding: 0 8px 6px; background: rgba(42, 27, 16, 0.78); border-bottom: 6px solid #8B6534; border-radius: 4px; }
.cabin-spine { width: 18px; border-radius: 2px 2px 0 0; box-shadow: inset -3px 0 0 rgba(0,0,0,0.25), inset 0 6px 0 rgba(255,255,255,0.12); }
.cabin-shelf-empty { color: #F2E6CC; font-size: 14px; font-style: italic; align-self: center; }
.cabin-gift { position: absolute; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 253, 248, 0.92); border: 2px solid var(--c-wood-honey); font-size: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.35); transition: transform 0.2s; }
.cabin-gift:hover { transform: translate(-50%, -55%) scale(1.08); }
.cabin-bookmarks { position: absolute; right: 4%; top: 8%; display: flex; gap: 6px; }
.cabin-bm { width: 30px; height: 75px; border-radius: 2px; box-shadow: 0 3px 6px rgba(0,0,0,0.4); transform: rotate(-3deg); }
.cabin-bm:nth-child(even) { transform: rotate(4deg); }
.cabin-seals { position: absolute; left: 4%; bottom: 5%; display: flex; gap: 6px; }
.cabin-seal { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFDF8; font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.4); }
.cabin-cat-spot { position: absolute; right: 18%; bottom: 6%; width: 110px; height: 80px; }
.cabin-cat-spot .ship-cat { left: 0; bottom: 0; width: 110px; }
.cabin-cat-spot .ship-cat-bubble { left: auto; right: 90px; border-radius: 14px 14px 4px 14px; }
.cabin-gift-detail { margin-top: 12px; padding: 12px 16px; background: #F4EDE0; border-radius: var(--r-sm); font-size: 16px; line-height: 1.5; color: var(--c-wood-warm); }
.cabin-ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.cabin-ledger > div { padding: 10px 12px; background: #FFFDF8; border: 1px solid var(--c-parchment-border); border-radius: var(--r-sm); font-size: 15px; text-align: center; }
.cabin-ledger strong { display: block; font-family: var(--font-serif); font-size: 22px; color: var(--c-forest-dark); }

/* --------------------------------------------------------------------------
   Mobile HUD: keep the three gauges visible as a compact row
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hud-header { flex-wrap: wrap; row-gap: 8px; padding: 18px 12px 8px; }
  .hud-center-gauges { display: flex; order: 3; width: 100%; justify-content: space-between; gap: 6px; }
  .hud-gauge-pill { padding: 5px 10px; gap: 6px; font-size: 14px; flex: 1; justify-content: center; }
  .gauge-label { display: none; }
  .gauge-bar-track { width: 44px; }
  .hud-right-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 600px) {
  .hud-left-brand { gap: 8px; }
  .boat-app-title { font-size: 16px; }
  .hud-btn .hud-btn-label { display: none; }
  .hud-btn { padding: 8px 10px; font-size: 18px; }
  .hud-gauge-pill .hud-bookshelf-track { display: none; }
  .ritual-body { padding: 14px; }
  .ritual-title { font-size: 20px; }
  .return-visit-card { grid-template-columns: auto 1fr; }
  .return-visit-accept { grid-column: 1 / -1; }
  .ship-cat { width: 62px; left: 8px; bottom: 8px; }
  .ship-cat[data-pose="sleep"] { width: 78px; }
  .ship-cat-bubble { left: 56px; max-width: 200px; font-size: 17px; }
  .cabin-diorama { aspect-ratio: 4 / 3; }
  .stamp-wax-circle { width: 100px; height: 100px; }
}

@media print {
  .print-wax-seal { float: right; width: 58px; height: 58px; border-radius: 50%; color: #FFF; display: flex; align-items: center; justify-content: center; font: 700 10pt 'Cinzel', serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-personal .epilogue-personal { background: #FAF5EB; padding: 12px 16px; font-size: 11pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-personal .epilogue-own-words { font-size: 15pt; }
  .print-gifts { margin-left: 18px; font-size: 11pt; line-height: 1.6; }
  .print-bookmarks { display: flex; flex-wrap: wrap; gap: 10px; }
  .print-bookmarks img { width: 80px; height: 200px; border: 1px solid #DDD; }
  .ship-cat, .quiet-honor-toast, .ritual-overlay { display: none !important; }
}

/* Map art follows the active layout's world size (landscape 2000x1116, portrait 1116x2000) */
.canal-map-img, .canal-map-svg { width: 100%; height: 100%; }
.canal-map-art-wrapper { width: 100%; height: 100%; }

/* Pins: names always readable, subtitles only for the current lock or on hover */
.lock-pin-sub { display: none; }
.lock-marker-btn.is-current .lock-pin-sub,
.lock-marker-btn:hover .lock-pin-sub,
.lock-marker-btn:focus-visible .lock-pin-sub { display: block; }
.lock-pin-title { font-size: 15px; }
.lock-pin-sub { font-size: 14px; }

/* --------------------------------------------------------------------------
   HUD v3: full-width title on top, gauges + buttons on one row beneath.
   The map fills exactly the space left, so the corner controls stay on screen.
   -------------------------------------------------------------------------- */
.app-root-container { height: 100vh; height: 100dvh; }
.hud-header {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 22px 20px 10px;
  flex-wrap: nowrap;
}
.hud-title-row { display: flex; justify-content: center; align-items: center; gap: 12px; text-align: center; }
.hud-title-row .boat-brand-text { align-items: center; }
.hud-title-row .boat-app-title { font-size: 22px; line-height: 1.2; }
.hud-title-row .boat-app-sub { display: block; font-size: 18px; line-height: 1.2; }
.hud-control-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hud-control-row .hud-center-gauges { display: flex; order: 0; width: auto; gap: 10px; flex-wrap: wrap; }
.hud-control-row .hud-right-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.floating-cabin-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#mapContainer { flex: 1 1 auto; min-height: 0; height: auto !important; }
.canal-viewport { height: 100%; }
.map-camera-controls { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }

.settings-quick-links { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
  .hud-header { padding: 20px 12px 8px; gap: 8px; }
  .hud-control-row { justify-content: center; }
  .hud-control-row .hud-center-gauges { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .hud-control-row .hud-right-actions { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .hud-title-row .boat-app-title { font-size: 18px; }
  .hud-title-row .boat-app-sub { display: block; font-size: 16px; }
  .hud-title-row .boat-brand-emblem { font-size: 22px; }
  .hud-control-row .hud-right-actions { justify-content: space-between; }
  .hud-control-row .hud-btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Visitor portrait shown whole (never cropped), and unmistakable selections
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }
.visitor-avatar-wrap { width: 320px; height: auto; aspect-ratio: 1200 / 896; max-height: none; }
.visitor-avatar-wrap.has-art .visitor-avatar-img { object-fit: contain; background: #243F31; }
@media (max-width: 860px) {
  .visitor-intro-card { flex-direction: column; align-items: stretch; }
  .visitor-avatar-wrap { width: 100%; height: auto; aspect-ratio: 1200 / 896; max-height: none; }
}

/* A chosen card gets a forest-green ring and a "Chosen" tag, so the choice is obvious */
.tea-canister-card, .tome-shelf-item, .soul-chip-btn { position: relative; }
.tea-canister-card.is-selected, .tome-shelf-item.is-active {
  border: 2px solid var(--c-forest-mid);
  background: #EEF4EE;
  box-shadow: 0 0 0 3px rgba(37, 66, 52, 0.18);
}
.tea-canister-card.is-selected::after, .tome-shelf-item.is-active::after {
  content: '✓ Chosen';
  position: absolute;
  top: -11px;
  right: 10px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--c-forest-mid);
  color: #FFFDF8;
  font-size: 14px;
  font-weight: 600;
  z-index: 3;
}
.soul-chip-btn.is-active::before { content: '✓'; font-weight: 700; color: var(--c-wood-honey); }
.listen-item.is-heard .listen-q-btn { background: #F4EDE0; border-color: var(--c-wood-honey); }
.listen-item.is-heard .listen-q-btn::after { content: ' ✓'; color: var(--c-forest-mid); font-weight: 700; }
.wrap-book-name { text-align: center; font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--c-forest-dark); }

/* Herbarium press, one step at a time */
.herb-wizard-nav { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: #F4EDE0; border-radius: var(--r-md); border: 1px solid var(--c-parchment-border); }
.herb-wizard-count { font-family: var(--font-hand); font-size: 18px; color: var(--c-terracotta); }
.herb-wizard-title { display: block; font-family: var(--font-serif); font-size: 20px; color: var(--c-forest-dark); }
.herb-wizard-hint { font-size: 15px; line-height: 1.5; color: var(--c-ink-sub); margin-top: 2px; }
.herb-wizard-dots { display: flex; gap: 6px; margin-top: 8px; }
.herb-wizard-dots span { width: 28px; height: 6px; border-radius: 3px; background: #DDD0B8; transition: background 0.3s; }
.herb-wizard-dots span.is-on { background: var(--c-forest-mid); }
.herb-wizard-buttons { display: flex; justify-content: space-between; align-items: center; }
.herbarium-controls-column .herb-control-group, .herbarium-controls-column .herb-actions-row { animation: fadeUp 0.35s ease; }
.canvas-frame.is-placing canvas { cursor: grab; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.55); }
.canvas-frame.is-pressing { animation: pressDown 0.7s ease; }
@keyframes pressDown { 0% { transform: none; } 35% { transform: scaleY(0.92) scaleX(1.03); filter: brightness(0.92); } 100% { transform: none; } }

/* Scene banners: show the painting, not a thin strip */
.cabin-scene-banner, .cabin-scene-banner.is-compact { height: auto; aspect-ratio: 1376 / 768; max-height: 340px; }
.cabin-scene-banner .cabin-banner-media { object-position: center 55%; }

/* Smaller narrowboat so it sits inside the painted canal, moored beside the pin */
.narrowboat-token { width: 128px; height: 64px; }

/* --------------------------------------------------------------------------
   Cinematic intro
   -------------------------------------------------------------------------- */
.intro-cinematic { position: fixed; inset: 0; z-index: 900; background: #0B140F; opacity: 0; transition: opacity 0.7s ease; overflow: hidden; cursor: pointer; }
.intro-cinematic.is-open { opacity: 1; }
.intro-layers { position: absolute; inset: 0; }
.intro-layer { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; }
.intro-layer.is-on { opacity: 1; animation: kenBurns 7s ease-out forwards; }
@keyframes kenBurns { from { transform: scale(1.0) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
.intro-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(5, 10, 8, 0.75) 100%), linear-gradient(180deg, rgba(5,10,8,0.2) 0%, rgba(5,10,8,0) 40%, rgba(5,10,8,0.75) 100%); pointer-events: none; }
.intro-title-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #FBF4E4; transition: opacity 0.8s ease; }
.intro-cinematic.is-playing .intro-title-card { opacity: 0; pointer-events: none; }
.intro-kicker { font-family: var(--font-hand); font-size: 24px; color: #E2BC84; }
.intro-title { font-family: var(--font-display); font-size: clamp(32px, 6vw, 64px); letter-spacing: 2px; text-shadow: 0 4px 18px rgba(0,0,0,0.6); }
.intro-sub { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: #E8E0CC; }
.intro-begin { margin-top: 12px; padding: 16px 34px; font-size: 18px; }
.intro-sound-note { font-size: 15px; color: #CFC6B2; }
.intro-caption { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); width: min(760px, calc(100vw - 40px)); text-align: center; font-family: var(--font-serif); font-size: clamp(20px, 3vw, 30px); line-height: 1.45; color: #FFFDF8; text-shadow: 0 2px 14px rgba(0,0,0,0.85); opacity: 0; }
.intro-caption.is-shown { animation: captionIn 5.6s ease forwards; }
@keyframes captionIn { 0% { opacity: 0; transform: translate(-50%, 12px); } 15%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.intro-dots { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; gap: 8px; opacity: 0; transition: opacity 0.5s; }
.intro-cinematic.is-playing .intro-dots { opacity: 1; }
.intro-dots span { width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); }
.intro-dots span.is-on { background: #E2BC84; }
.intro-skip { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; padding: 8px 16px; border-radius: var(--r-pill); background: rgba(10, 18, 14, 0.6); border: 1px solid rgba(226, 188, 132, 0.5); color: #FBF4E4; font-size: 15px; }

/* --------------------------------------------------------------------------
   Guided tour
   -------------------------------------------------------------------------- */
.tour-layer { position: fixed; inset: 0; z-index: 850; pointer-events: auto; }
.tour-spotlight { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(8, 15, 11, 0.72), 0 0 0 3px #E2BC84, 0 0 24px 6px rgba(245, 158, 11, 0.45); transition: all 0.45s ease; pointer-events: none; }
.tour-card { position: fixed; padding: 16px 18px; background: var(--c-parchment); border: 2px solid var(--c-wood-honey); border-radius: var(--r-md); box-shadow: 0 16px 40px rgba(0,0,0,0.45); transition: top 0.45s ease, left 0.45s ease; }
.tour-card.is-in { animation: fadeUp 0.35s ease; }
.tour-card.is-centered { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-count { font-family: var(--font-hand); font-size: 18px; color: var(--c-terracotta); }
.tour-title { font-family: var(--font-serif); font-size: 20px; color: var(--c-forest-dark); margin: 2px 0 6px; }
.tour-text { font-size: 16px; line-height: 1.55; color: var(--c-wood-warm); }
.tour-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }

/* --------------------------------------------------------------------------
   Stage flow: Next button and finished-stage ticks
   -------------------------------------------------------------------------- */
.stage-next-bar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--c-parchment-border); }
.stage-next-hint { font-size: 15px; color: var(--c-ink-sub); font-style: italic; }
.stage-next-btn { padding: 13px 26px; font-size: 16px; }
.step-tab-btn { position: relative; }
.step-tab-btn.is-done::after { content: '✓'; position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-forest-mid); color: #FFFDF8; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fog-scratch-canvas.is-clearing { transition: opacity 0.6s ease; opacity: 0; }