/* ═══════════════════════════════════════════════════════════════════
   wagon-clinic.css  —  Milestone 1.5 Scaffold
   ───────────────────────────────────────────────────────────────────
   Table of contents
     §1  Design tokens  (:root custom properties)
     §2  Reset
     §3  Widget shell
     §4  Fire animations
     §5  Lantern animations
     §6  Character animations  (healer, cat)
     §7  Environment animations  (foliage, steam)
     §8  Particle animations  (smoke, embers, fireflies)
   ───────────────────────────────────────────────────────────────────
   HOW TO TUNE
   • Change mood/palette → edit §1 color tokens
   • Speed up/slow down everything → edit §1 timing tokens
   • Override one module's animation → target its data-module selector
     e.g.  [data-module="healer"] { animation-duration: 6s; }
═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   §1  DESIGN TOKENS
   All colours, timing values, and scene dimensions live here.
   Gradient stop-color values in SVG <defs> cannot use CSS vars;
   those are duplicated intentionally — this is the authoritative
   reference even if SVG can't consume them directly.
═══════════════════════════════════════════════════════════════════ */
:root {

  /* ── Scene canvas ─────────────────────────────────────────────── */
  --scene-max-width:  1080px;
  --scene-aspect:     760 / 236;   /* taller strip to keep both sky and ground weight */

  /* ── Sky palette ──────────────────────────────────────────────── */
  --sky-deep:        #0d0820;
  --sky-purple:      #1c0a38;
  --sky-violet:      #5a1e62;
  --sky-burn:        #c44030;
  --sky-glow:        #e87030;
  --sky-horizon:     #f5a840;
  --moon-fill:       #f5e8be;

  /* ── Ground & path ────────────────────────────────────────────── */
  --ground-top:      #4a3018;
  --ground-bottom:   #221508;
  --ground-horizon:  #5c3e20;
  --path-outer:      #8b6338;
  --path-inner:      #a07a50;
  --path-rut:        #7a5228;

  /* ── Wood (wagon, wheels, log seat) ──────────────────────────── */
  --wood-deepest:    #2a1200;
  --wood-very-dark:  #2c1808;
  --wood-dark:       #3e2010;   /* rails, axle */
  --wood-mid:        #6c4418;   /* plank fill */
  --wood-grain:      #5a3510;   /* plank line */
  --wood-highlight:  #8c5c28;   /* plank edge */

  /* ── Canvas / cloth (wagon roof, curtain) ─────────────────────── */
  --canvas-aged:     #baa06c;
  --canvas-shadow:   #9c8452;
  --canvas-stitch:   #a08848;
  --canvas-dark:     #8a7040;
  --curtain-fill:    #8c7450;
  --curtain-stroke:  #7a6240;

  /* ── Fire ─────────────────────────────────────────────────────── */
  --fire-tip:        #fff8aa;   /* hottest / tip */
  --fire-core:       #ffdd44;   /* bright yellow-white core */
  --fire-mid:        #ff8c30;   /* orange mid-flame */
  --fire-base:       #e84400;   /* deep red-orange at base */
  --fire-glow:       #ff6600;   /* ambient glow colour */
  --ember-hot:       #ffcc33;
  --ember-orange:    #ff8800;
  --ember-red:       #ff6600;

  /* ── Lantern ──────────────────────────────────────────────────── */
  --lantern-glass:   #ffcc44;
  --lantern-body:    #5c4c1a;
  --lantern-frame:   #3c2e0e;
  --lantern-cap:     #4c3c14;
  --lantern-chain:   #5c4c2a;

  /* ── Foliage (tree canopy) ────────────────────────────────────── */
  --foliage-back:    #193a10;
  --foliage-mid:     #1e4514;
  --foliage-deep:    #153210;
  --foliage-tall:    #24501a;
  --foliage-light:   #2a5a1c;

  /* ── Water (pond) ─────────────────────────────────────────────── */
  --pond-deep:       #0d2030;
  --pond-surface:    #1a3a4e;
  --pond-stroke:     #2a485a;
  --pond-violet:     #5a2060;   /* sky reflection tint */
  --reed-green:      #3a5a28;
  --reed-tip:        #5a7a38;

  /* ── Healer character ─────────────────────────────────────────── */
  --skin-tone:       #c8a07c;
  --robe-main:       #2a3a5c;
  --robe-shadow:     #1e2e4c;
  --robe-edge:       #3a4a6e;
  --belt-buckle:     #8c6c3c;
  --hat-dark:        #1c1608;
  --hat-brim-inner:  #0e0c06;
  --hat-cone:        #201a0e;
  --hat-band:        #8c6c3c;
  --hat-charm:       #c8a840;
  --cup-wood:        #6c4c2c;

  /* ── Cat ──────────────────────────────────────────────────────── */
  --cat-fur-main:    #cc8844;
  --cat-fur-dark:    #aa6620;
  --cat-fur-light:   #e8a860;
  --cat-nose:        #cc7a7a;
  --cat-eye:         #5a3a18;

  /* ── Grass / flowers ─────────────────────────────────────────── */
  --grass-dark:      #2e4a20;
  --grass-mid:       #3a5828;
  --grass-deep:      #304820;
  --flower-white:    #eeeecc;
  --flower-warm:     #ffeea0;
  --flower-pink:     #ffaaaa;

  /* ── Widget UI bar ────────────────────────────────────────────── */
  --ui-bg:           rgba(8, 5, 18, 0.95);
  --ui-border:       rgba(180, 130, 50, 0.16);
  --ui-gold:         #d4a858;
  --ui-green:        #6ab858;
  --ui-font-serif:   Georgia, 'Times New Roman', serif;
  --ui-font-mono:    'Courier New', Courier, monospace;

  /* ── Animation timing ─────────────────────────────────────────── */
  /* Flame layers — each slightly different for organic feel */
  --t-flame-base:     0.70s;
  --t-flame-core:     0.58s;   /* hottest, fastest */
  --t-flame-mid-l:    0.76s;
  --t-flame-mid-r:    0.64s;
  --t-flame-outer-l:  0.82s;
  --t-flame-outer-r:  0.72s;
  --t-flame-tip:      0.52s;   /* tip flickers fastest */

  /* Fire ambient */
  --t-fire-pulse:     1.90s;

  /* Lanterns */
  --t-lantern-swing:  7.80s;
  --t-lantern-flick:  2.30s;
  --t-lantern-glow:   2.30s;
  --t-banner-sway:    8.60s;
  --t-water-cycle:    1.65s;
  --t-water-foam:     2.20s;

  /* Characters */
  --t-healer-breathe: 4.60s;
  --t-cat-breathe:    3.90s;

  /* Environment */
  --t-foliage-sway:   6.50s;
  --t-steam-rise:     2.20s;

  /* FX */
  --t-ember-float:    2.80s;
  --t-firefly:        7.50s;
}


/* ═══════════════════════════════════════════════════════════════════
   §2  RESET
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   §3  WIDGET SHELL
   The widget is designed to sit on roughly half a screen beside
   study content. max-width keeps it constrained; height follows
   the SVG viewBox aspect ratio automatically.

   EMBED NOTE: to drop into Mission Control or another host:
     1. Import this file (or copy §3 selectors).
     2. Place <div class="widget-wrapper"> in your layout.
     3. The SVG sizes itself; no fixed height needed.
═══════════════════════════════════════════════════════════════════ */
body {
  background: var(--sky-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  font-family: var(--ui-font-serif);
}

.widget-wrapper {
  width: 100%;
  max-width: var(--scene-max-width);
  display: flex;
  flex-direction: column;
  /* Atmospheric drop shadow + faint ember-glow halo */
  filter:
    drop-shadow(0 12px 40px rgba(0, 0, 0, 0.85))
    drop-shadow(0  0  60px rgba(255, 120, 40, 0.07));
}

.widget-container {
  width: 100%;
  position: relative;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  aspect-ratio: var(--scene-aspect);
  box-shadow:
    inset 0 0 0 1px rgba(200, 150, 70, 0.18),
    0 0 0 1px rgba(30, 15, 5, 0.8);
}

/* SVG fills container width; height follows viewBox ratio */
#wagon-scene {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  shape-rendering: crispEdges;
}

#wagon-scene image {
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  shape-rendering: crispEdges;
}

/* ── Scene module base class ─────────────────────────────────────
   .scene-module: applied to every replaceable element group.
   Used as a hook for future scripting (scene.querySelectorAll,
   intersection observers, etc.) — no visual effect right now. */
.scene-module {
  /* placeholder — enables future selection and inspection */
}

/* ── Asset placeholder marker ────────────────────────────────────
   .asset-placeholder: marks shapes that WILL be replaced.
   No visual effect in production; useful for debug overlays. */
.asset-placeholder {
  /* dev-mode: add outline to see swap boundaries
     outline: 1px dashed rgba(255,0,0,0.3); */
}

/* ── Sprite image rendering ──────────────────────────────────────
   .asset-image: applied to every <image> injected by swapModule().
   pixelated = nearest-neighbour scaling — keeps pixel art crisp
   at any display size. Without this the browser bilinear-blurs it.
   crisp-edges is the SVG/Firefox equivalent. */
.asset-image {
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: crisp-edges;  /* SVG / Firefox fallback */
  shape-rendering: crispEdges;
  backface-visibility: hidden;
}

.tint-walnut-wagon {
  filter: sepia(0.72) saturate(0.9) hue-rotate(-18deg) brightness(0.72) contrast(1.08);
}

.tint-burlap-sack {
  filter: sepia(0.55) saturate(0.82) hue-rotate(-8deg) brightness(0.82) contrast(1.02);
}

.tint-oak-barrel {
  filter: sepia(0.84) saturate(1.02) hue-rotate(-20deg) brightness(0.72) contrast(1.1);
}

.tint-lush-foliage {
  filter: sepia(0.60) saturate(1.34) hue-rotate(22deg) brightness(0.58) contrast(1.12);
}

/* ── Footer status bar ───────────────────────────────────────────── */
.widget-footer {
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.widget-name {
  color: var(--ui-gold);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.6px;
  opacity: 0.90;
}

.widget-status {
  color: var(--ui-green);
  font-size: 11px;
  font-family: var(--ui-font-mono);
  letter-spacing: 0.5px;
  opacity: 0.78;
}


/* ═══════════════════════════════════════════════════════════════════
   §4  FIRE ANIMATIONS
   Six flame variants + fire glow pulse + static ember float.
   All durations pull from §1 timing tokens for easy tuning.

   SWAP NOTE: if campfire becomes a sprite animation, remove
   .flame-* classes from the keyframes below and redirect
   the --t-flame-* tokens to sprite frame-rate controls.
═══════════════════════════════════════════════════════════════════ */

/* ── Flame flicker (applied to mid/outer/core flames) ────────────── */
@keyframes flameFlicker {
  0%   { transform: scaleX(1.00) scaleY(1.00) translateY( 0px); opacity: 0.90; }
  12%  { transform: scaleX(1.14) scaleY(0.94) translateY( 1px); opacity: 1.00; }
  25%  { transform: scaleX(0.88) scaleY(1.09) translateY(-2px); opacity: 0.84; }
  38%  { transform: scaleX(1.10) scaleY(0.92) translateY( 1px); opacity: 0.96; }
  52%  { transform: scaleX(0.94) scaleY(1.08) translateY(-1px); opacity: 1.00; }
  66%  { transform: scaleX(1.06) scaleY(0.97) translateY( 0px); opacity: 0.88; }
  80%  { transform: scaleX(0.91) scaleY(1.06) translateY(-1px); opacity: 0.86; }
  92%  { transform: scaleX(1.04) scaleY(1.01) translateY( 0px); opacity: 0.92; }
  100% { transform: scaleX(1.00) scaleY(1.00) translateY( 0px); opacity: 0.90; }
}

/* ── Flame tip (tallest element, widest swing) ───────────────────── */
@keyframes flameTip {
  0%   { transform: scaleX(1.00) scaleY(1.00) rotate( 0deg); opacity: 0.88; }
  18%  { transform: scaleX(0.70) scaleY(1.20) rotate(-6deg); opacity: 0.96; }
  36%  { transform: scaleX(1.30) scaleY(0.80) rotate( 5deg); opacity: 0.78; }
  54%  { transform: scaleX(0.85) scaleY(1.20) rotate(-4deg); opacity: 0.92; }
  72%  { transform: scaleX(1.15) scaleY(0.88) rotate( 3deg); opacity: 0.82; }
  88%  { transform: scaleX(0.95) scaleY(1.05) rotate(-1deg); opacity: 0.88; }
  100% { transform: scaleX(1.00) scaleY(1.00) rotate( 0deg); opacity: 0.88; }
}

/* Assign to each flame class; durations pulled from tokens */
.flame          { animation: flameFlicker var(--t-flame-base)    ease-in-out infinite; transform-box: fill-box; }
.flame-core     { animation-duration: var(--t-flame-core); }
.flame-mid-l    { animation-duration: var(--t-flame-mid-l);    animation-direction: alternate; }
.flame-mid-r    { animation-duration: var(--t-flame-mid-r); }
.flame-outer-l  { animation-duration: var(--t-flame-outer-l);  animation-direction: alternate; }
.flame-outer-r  { animation-duration: var(--t-flame-outer-r); }
.flame-tip      { animation: flameTip var(--t-flame-tip) ease-in-out infinite; transform-box: fill-box; }

/* ── Ambient fire glow pulse ─────────────────────────────────────── */
@keyframes fireGlowPulse {
  0%,  100% { opacity: 0.18; transform: scaleX(1.00) scaleY(1.00); }
  38%        { opacity: 0.27; transform: scaleX(1.08) scaleY(1.06); }
  68%        { opacity: 0.14; transform: scaleX(0.94) scaleY(0.97); }
}

.fire-glow-pulse {
  animation: fireGlowPulse var(--t-fire-pulse) ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Static ember float (CSS-only; JS spawns additional dynamic ones) */
@keyframes emberFloat {
  0%   { transform: translate( 0px,   0px)  scale(1.0); opacity: 0.65; }
  40%  { transform: translate( 3px, -12px)  scale(1.1); opacity: 0.80; }
  75%  { transform: translate(-2px, -22px)  scale(0.8); opacity: 0.40; }
  100% { transform: translate( 5px, -30px)  scale(0.5); opacity: 0.00; }
}

.ember {
  animation: emberFloat var(--t-ember-float) ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}


/* ═══════════════════════════════════════════════════════════════════
   §5  LANTERN ANIMATIONS
   Three classes work together: swing (group), flicker (glass),
   glow (bloom ellipse). All share --t-lantern-flick timing so
   glass and bloom stay in phase.
═══════════════════════════════════════════════════════════════════ */

/* ── Pendulum swing on group ─────────────────────────────────────── */
@keyframes lanternSwing {
  0%, 100% { transform: rotate(0deg); }
  24%      { transform: rotate(0.9deg); }
  50%      { transform: rotate(0.1deg); }
  76%      { transform: rotate(-0.8deg); }
}

.lantern-swing {
  animation: lanternSwing var(--t-lantern-swing) ease-in-out infinite;
  transform-box: fill-box;
  /* transform-origin set inline per-lantern (the chain hook point) */
}

@keyframes bannerSway {
  0%, 100% { transform: rotate(0deg); }
  28%      { transform: rotate(0.55deg); }
  52%      { transform: rotate(0.12deg); }
  78%      { transform: rotate(-0.5deg); }
}

.banner-sway {
  animation: bannerSway var(--t-banner-sway) ease-in-out infinite;
  transform-box: fill-box;
}

@keyframes creekWaterFrameA {
  0%, 24% { opacity: 0.94; }
  33%, 91% { opacity: 0; }
  100% { opacity: 0.94; }
}

@keyframes creekWaterFrameB {
  0%, 24% { opacity: 0; }
  33%, 57% { opacity: 0.94; }
  66%, 100% { opacity: 0; }
}

@keyframes creekWaterFrameC {
  0%, 57% { opacity: 0; }
  66%, 91% { opacity: 0.94; }
  100% { opacity: 0; }
}

@keyframes creekFoamDrift {
  0%, 100% { transform: translateX(0px); opacity: 0.42; }
  50% { transform: translateX(2px); opacity: 0.62; }
}

.creek-water-frame {
  animation-duration: var(--t-water-cycle);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.creek-water-a { animation-name: creekWaterFrameA; }
.creek-water-b { animation-name: creekWaterFrameB; }
.creek-water-c { animation-name: creekWaterFrameC; }

.creek-water-foam {
  animation: creekFoamDrift var(--t-water-foam) ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Glass panel flicker ─────────────────────────────────────────── */
@keyframes lanternFlicker {
  0%,  100% { opacity: 0.88; }
  18%        { opacity: 0.68; }
  34%        { opacity: 0.92; }
  52%        { opacity: 0.72; }
  70%        { opacity: 0.90; }
  84%        { opacity: 0.76; }
}

.lantern-flicker {
  animation: lanternFlicker var(--t-lantern-flick) ease-in-out infinite;
}

/* ── Bloom glow pulse ────────────────────────────────────────────── */
@keyframes lanternGlow {
  0%,  100% { opacity: 0.52; }
  45%        { opacity: 0.32; }
}

.lantern-glow {
  animation: lanternGlow var(--t-lantern-glow) ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════════════
   §6  CHARACTER ANIMATIONS
   Healer and cat each have a single gentle breathing animation.
   Keep these classes on the wrapper <g> so that when the SVG
   shapes are swapped for sprites, the animation requires zero
   CSS changes — just point the new <image> to the same element.
═══════════════════════════════════════════════════════════════════ */

/* ── Healer breathing (vertical bob) ────────────────────────────── */
@keyframes healerBreathe {
  0%,  100% { transform: translateY(0px);  }
  42%        { transform: translateY(-2px); }
}

.healer-breathe {
  animation: healerBreathe var(--t-healer-breathe) ease-in-out infinite;
  transform-box: fill-box;
  /* transform-origin set inline on the element to foot/seat anchor */
}

/* ── Cat sleeping idle (bottom-anchored settle/breath) ───────────── */
@keyframes catBreathe {
  0%, 100% { transform: translateY(0px) scaleX(1.000) scaleY(1.000); }
  48%      { transform: translateY(0.4px) scaleX(0.992) scaleY(1.018); }
}

.cat-breathe {
  animation: catBreathe var(--t-cat-breathe) ease-in-out infinite;
  transform-box: fill-box;
  /* transform-origin set inline on mod-wagon-cat wrapper at the sill line */
}

.cat-sleep-breathe {
  animation: catSleepBreathe 8.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 28%;
}

@keyframes catSleepBreathe {
  0%, 22%, 50%, 72%, 100% { transform: translateY(0px) scaleX(1) scaleY(1); }
  30%, 42%, 80%, 90%      { transform: translateY(-0.35px) scaleX(0.9995) scaleY(1.0012); }
}

/* ── Cat tail occasional twitch ─────────────────────────────────────
   Long pause followed by a quick 3-beat twitch — sleeping cat behaviour.
   The 68% dead-zone keeps most of the cycle still; the 68–88% window
   fires the motion burst then settles back to 0.
   transform-origin: bottom-center of path bounding box ≈ attachment point.
   KEEP AFTER SPRITE SWAP: just retarget .cat-tail to the sprite's tail layer. */
@keyframes catTailTwitch {
  0%,  68%, 100% { transform: rotate(0deg); }
  72%             { transform: rotate(5deg);  }
  76%             { transform: rotate(-2deg); }
  80%             { transform: rotate(4deg);  }
  84%             { transform: rotate(1deg);  }
  88%             { transform: rotate(0deg);  }
}

.cat-tail {
  animation: catTailTwitch 9.0s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;  /* bottom-centre of bounding box ≈ tail base */
}


/* ═══════════════════════════════════════════════════════════════════
   §7  ENVIRONMENT ANIMATIONS
   Foliage sway + steam wisps from the healer's tea cup.
   Delays are randomised by JS (WagonScene._naturaliseAnimations)
   so they don't all sway in lockstep.
═══════════════════════════════════════════════════════════════════ */

/* ── Tree foliage sway ───────────────────────────────────────────── */
@keyframes foliageSway {
  0%    { transform: rotate( 0.0deg); }
  28%   { transform: rotate( 1.6deg); }
  56%   { transform: rotate(-1.2deg); }
  80%   { transform: rotate( 0.6deg); }
  100%  { transform: rotate( 0.0deg); }
}

.foliage-sway {
  animation: foliageSway var(--t-foliage-sway) ease-in-out infinite;
  /* transform-origin set inline to trunk base anchor */
}

/* ── Tea-cup steam wisps ─────────────────────────────────────────── */
@keyframes steamRise {
  0%   { transform: translateY(  0px) translateX(0px)  scaleX(1.0); opacity: 0.42; }
  40%  { transform: translateY( -9px) translateX(3px)  scaleX(1.3); opacity: 0.24; }
  75%  { transform: translateY(-18px) translateX(-2px) scaleX(1.5); opacity: 0.10; }
  100% { transform: translateY(-28px) translateX(4px)  scaleX(1.0); opacity: 0.00; }
}

.steam {
  animation: steamRise var(--t-steam-rise) ease-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}


/* ═══════════════════════════════════════════════════════════════════
   §8  PARTICLE ANIMATIONS
   Smoke pool and dynamic embers use CSS custom properties
   (--dur, --dly) injected per-element by JS so each particle
   runs at a slightly different speed and phase.
   Fireflies use a single keyframe with staggered delays.
═══════════════════════════════════════════════════════════════════ */

/* ── Smoke pool (JS-spawned, looping) ───────────────────────────── */
@keyframes smokeRise {
  0%   { transform: translate( 0px,   0px)  scale(0.4); opacity: 0.32; }
  30%  { transform: translate( 1px, -18px)  scale(0.9); opacity: 0.20; }
  60%  { transform: translate(-1px, -38px)  scale(1.4); opacity: 0.10; }
  100% { transform: translate( 2px, -65px)  scale(2.0); opacity: 0.00; }
}

.smoke-particle {
  animation: smokeRise var(--dur, 3.2s) ease-out infinite;
  animation-delay: var(--dly, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Dynamic ember sparks (JS-spawned, forwards fill, self-removing) */
@keyframes emberSpark {
  0%   { transform: translate(  0px,  0px)  scale(1.0); opacity: 0.75; }
  50%  { transform: translate(  4px,-15px)  scale(1.2); opacity: 0.80; }
  100% { transform: translate( -3px,-32px)  scale(0.4); opacity: 0.00; }
}

.ember-spark {
  animation: emberSpark var(--dur, 1.8s) ease-out forwards;
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Fireflies (floating + blink, staggered delays in HTML) ───────── */
@keyframes fireflyGlow {
  0%    { opacity: 0.00; transform: translate(  0px,   0px); }
  15%   { opacity: 0.82; transform: translate(  3px,  -6px); }
  35%   { opacity: 0.28; transform: translate(  7px, -10px); }
  55%   { opacity: 0.90; transform: translate(  2px, -15px); }
  72%   { opacity: 0.18; transform: translate( -3px, -18px); }
  88%   { opacity: 0.70; transform: translate(  4px, -22px); }
  100%  { opacity: 0.00; transform: translate(  1px, -25px); }
}

.firefly {
  animation: fireflyGlow var(--t-firefly) ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}


/* ═══════════════════════════════════════════════════════════════════
   §9  FIELD GUIDE
   Field Guide trigger (bottom-right of wagon scene) +
   full-screen two-page book overlay.

   Mastery tier palette
     new       slate-blue   #5a7090
     learning  terracotta   #8c3a2a   ← show first (needs attention)
     reviewing aged-gold    #7a6020
     mastered  forest-green #3a6a38

   Parchment: warm aged paper, lightly toned, min grain via radial
   gradient layering. Avoids explicit noise textures (no asset dep).

   Book frame: dark oiled leather — matches wagon's weathered-wood
   palette. Gold accents from --boh-gold match --ui-gold.
═══════════════════════════════════════════════════════════════════ */

/* ── §9 design tokens ───────────────────────────────────────────── */
:root {
  --boh-parchment:       #f4e8c6;
  --boh-parchment-edge:  #e6d8a8;
  --boh-leather:         #2c1806;
  --boh-leather-mid:     #4a2c10;
  --boh-leather-light:   #7a5228;
  --boh-gold:            #c8a040;
  --boh-gold-dim:        #9a7828;
  --boh-ink:             #2a1808;
  --boh-ink-mid:         #5c3e1e;

  --mastery-new:         #5a7090;
  --mastery-learning:    #8c3a2a;
  --mastery-reviewing:   #7a6020;
  --mastery-mastered:    #3a6a38;
}


/* ── Field Guide trigger ────────────────────────────────────────── */
.tome-trigger {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 9px 5px;
  background: rgba(18, 8, 2, 0.84);
  border: 1px solid rgba(160, 110, 35, 0.36);
  border-radius: 5px;
  cursor: pointer;
  color: var(--boh-gold-dim);
  font-family: var(--ui-font-serif);
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.04em;
  backdrop-filter: blur(2px);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.tome-trigger:hover,
.tome-trigger:focus-visible {
  background: rgba(30, 14, 4, 0.94);
  border-color: rgba(210, 158, 56, 0.72);
  color: var(--boh-gold);
  box-shadow: 0 0 14px rgba(200, 140, 40, 0.22);
  outline: none;
}

.tome-trigger svg { display: block; }

.tome-label {
  display: block;
  font-size: 6.5px;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.75;
}


/* ── Book Overlay — full-screen container ───────────────────────── */
.book-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 56px 18px 28px;
  /* hidden until .is-open */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s ease, visibility 0.26s ease;
}

.book-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ── Backdrop — dims and softens the wagon scene behind the book ── */
.book-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 14, 0.78);
  backdrop-filter: blur(1.5px) saturate(0.65);
  cursor: pointer; /* clicking closes the book */
}


/* ── Book spread — the open two-page tome ───────────────────────── */
.book-spread {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(92vw, 900px);
  max-height: min(68vh, 720px);
  border-radius: 6px 8px 8px 6px;
  overflow: hidden;
  /* Leather cover shadow */
  box-shadow:
    0 0 0 1px rgba(50, 28, 6, 0.92),
    0 0 0 3px rgba(90, 58, 16, 0.52),
    0 28px 80px rgba(0, 0, 0, 0.90),
    0  0  80px rgba(190, 130, 40, 0.05);
  /* Entry animation: scale up from 0.92 */
  transform: scale(0.93);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.book-overlay.is-open .book-spread {
  transform: scale(1);
}


/* ── Close button ───────────────────────────────────────────────── */
.book-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(25, 12, 3, 0.72);
  border: 1px solid rgba(150, 100, 35, 0.30);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(190, 148, 60, 0.65);
  font-size: 15px;
  line-height: 1;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}

.book-close:hover,
.book-close:focus-visible {
  background: rgba(45, 22, 5, 0.92);
  color: var(--boh-gold);
  border-color: rgba(200, 148, 52, 0.60);
  outline: none;
}


/* ── Book pages — shared ────────────────────────────────────────── */
.book-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 14px;
  overflow-y: auto;
  position: relative;
  /* Aged parchment — layered radial gradients for warmth variation */
  background:
    radial-gradient(ellipse at 18% 6%,  rgba(190, 140, 55, 0.10) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 94%, rgba(150, 96, 30, 0.08)  0%, transparent 52%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.015) 0%, transparent 100%),
    linear-gradient(166deg, #f5eaca 0%, #ece0b4 46%, #f1e6c2 100%);
  color: var(--boh-ink);
  font-family: var(--ui-font-serif);
}

/* Thin scrollbar — parchment style */
.book-page::-webkit-scrollbar { width: 4px; }
.book-page::-webkit-scrollbar-track { background: transparent; }
.book-page::-webkit-scrollbar-thumb {
  background: rgba(110, 72, 22, 0.22);
  border-radius: 2px;
}

.book-page-left  { border-radius: 6px 0 0 6px; }
.book-page-right { border-radius: 0 8px 8px 0; }

/* Right-edge shadow on left page (depth cue) */
.book-page-left::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 14px;
  background: linear-gradient(to right, transparent, rgba(70, 42, 10, 0.07));
  pointer-events: none;
}

/* Page decoration row */
.page-section-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(100, 68, 22, 0.60);
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(120, 78, 25, 0.20);
}

.page-ornament { text-align: center; color: rgba(130, 90, 32, 0.30); font-size: 12px; letter-spacing: 0.3em; }
.page-ornament-top  { margin-bottom: 5px; }
.page-ornament-top::before  { content: '· ✦ ·'; }
.page-ornament-bottom { margin-top: auto; padding-top: 8px; }
.page-ornament-bottom::before { content: '· ✦ ·'; }

.book-page-left {
  position: relative;
}

.book-system-tabs {
  position: absolute;
  left: -8px;
  top: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.book-system-tab {
  width: 36px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px 6px 5px 8px;
  border-radius: 7px 0 0 7px;
  border: 1px solid rgba(108, 72, 22, 0.24);
  border-right: none;
  background: linear-gradient(180deg, rgba(88, 54, 18, 0.86) 0%, rgba(58, 32, 10, 0.92) 100%);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  color: rgba(214, 186, 120, 0.72);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition:
    width 0.18s ease,
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}

.book-system-tab-icon {
  width: 12px;
  min-width: 12px;
  height: 12px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: grayscale(1) brightness(0) saturate(0) invert(1) opacity(0.82);
  flex-shrink: 0;
}

.book-system-tab-label {
  font-size: 6.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.book-system-tab:hover,
.book-system-tab:focus-visible {
  width: 110px;
  transform: translateX(2px);
  background: linear-gradient(180deg, rgba(112, 70, 24, 0.94) 0%, rgba(72, 40, 12, 0.98) 100%);
  color: rgba(234, 208, 146, 0.92);
  border-color: rgba(172, 122, 42, 0.42);
  outline: none;
}

.book-system-tab:hover .book-system-tab-icon,
.book-system-tab:focus-visible .book-system-tab-icon {
  filter: grayscale(1) brightness(0) saturate(0) invert(1) opacity(0.92);
}

.book-system-tab:hover .book-system-tab-label,
.book-system-tab:focus-visible .book-system-tab-label {
  opacity: 1;
  transform: translateX(0);
}

.book-system-tab.is-on {
  width: 110px;
  transform: translateX(6px);
  background: linear-gradient(180deg, rgba(146, 96, 34, 0.98) 0%, rgba(96, 54, 16, 1) 100%);
  color: rgba(248, 224, 166, 0.98);
  border-color: rgba(196, 148, 60, 0.58);
  box-shadow:
    0 0 0 1px rgba(212, 164, 72, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.20);
}

.book-system-tab.is-on .book-system-tab-icon {
  filter: grayscale(1) brightness(0) saturate(0) invert(1) opacity(0.98);
}

.book-system-tab.is-on .book-system-tab-label {
  opacity: 1;
  transform: translateX(0);
}

/* ── Book navigator — compact search/sort/filter above the card ── */
.book-navigator {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px 9px;
  border: 1px solid rgba(120, 78, 22, 0.16);
  border-radius: 6px;
  background: rgba(120, 78, 22, 0.035);
}

.book-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.book-nav-search,
.book-nav-select {
  width: 100%;
  background: rgba(248, 240, 214, 0.74);
  border: 1px solid rgba(120, 78, 22, 0.20);
  border-radius: 4px;
  color: rgba(56, 36, 12, 0.86);
  font-family: var(--ui-font-serif);
  font-size: 8px;
  padding: 5px 7px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.book-nav-search::placeholder {
  color: rgba(100, 68, 22, 0.40);
}

.book-nav-search:focus,
.book-nav-select:focus {
  border-color: rgba(164, 116, 34, 0.42);
  box-shadow: 0 0 0 2px rgba(186, 138, 58, 0.10);
  background: rgba(250, 244, 224, 0.92);
}

.book-nav-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.book-nav-label {
  font-size: 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(100, 68, 22, 0.52);
  flex-shrink: 0;
}

.book-nav-results {
  font-size: 7px;
  color: rgba(96, 64, 18, 0.58);
  text-align: right;
  min-width: 76px;
}

.book-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.book-nav-pill {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(120, 78, 22, 0.16);
  background: rgba(248, 240, 214, 0.58);
  color: rgba(90, 58, 16, 0.66);
  font-size: 6px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.book-nav-pill:hover,
.book-nav-pill:focus-visible {
  background: rgba(250, 244, 224, 0.90);
  border-color: rgba(164, 116, 34, 0.30);
  color: rgba(78, 48, 14, 0.84);
  outline: none;
}

.book-nav-pill.is-on {
  background: rgba(186, 138, 58, 0.16);
  border-color: rgba(164, 116, 34, 0.38);
  color: rgba(88, 54, 14, 0.90);
}


/* ── Book spine strip ───────────────────────────────────────────── */
.book-spine-strip {
  width: 26px;
  flex-shrink: 0;
  background: linear-gradient(to right,
    rgba(22, 10, 2, 0.96) 0%,
    rgba(52, 28, 6, 0.98) 35%,
    rgba(42, 22, 4, 0.98) 65%,
    rgba(18,  8, 1, 0.96) 100%
  );
  border-left:  1px solid rgba(110, 72, 20, 0.42);
  border-right: 1px solid rgba(110, 72, 20, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spine-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--ui-font-serif);
  font-size: 6.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(172, 124, 44, 0.50);
  white-space: nowrap;
}


/* ── Condition card ─────────────────────────────────────────────── */
.condition-card {
  --card-accent: var(--mastery-new);
  border: 2px solid var(--card-accent);
  border-radius: 7px;
  overflow: hidden;
  background: #18100a;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(16, 8, 2, 0.60),
    0 4px 20px rgba(0, 0, 0, 0.40);
  transition: border-color 0.30s ease, box-shadow 0.30s ease;
}

/* Mastery-tier state classes — applied by JS via data-mastery attr */
.condition-card[data-mastery="learning"]  { --card-accent: var(--mastery-learning); }
.condition-card[data-mastery="reviewing"] { --card-accent: var(--mastery-reviewing); }
.condition-card[data-mastery="mastered"]  { --card-accent: var(--mastery-mastered); }
.condition-card[data-mastery="new"]       { --card-accent: var(--mastery-new); }

/* Art frame — top portion of card */
.card-art-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.card-art-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.30s ease;
  /* default: dark neutral — JS will set system-specific gradient */
  background: linear-gradient(150deg, #1a1010 0%, #282010 100%);
}

.card-system-icon {
  display: none;
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1) opacity(0.18);
  image-rendering: -webkit-optimize-contrast;
}

.card-system-glyph {
  font-size: 26px;
  line-height: 1;
  opacity: 0.34;
  color: rgba(220, 188, 116, 0.54);
  text-shadow: 0 0 16px rgba(200, 148, 55, 0.18);
  transition: color 0.30s ease;
}

.card-art-system-label {
  font-family: var(--ui-font-serif);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196, 164, 96, 0.48);
}

.card-mastery-banner {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(10, 6, 2, 0.62);
  border: 1px solid rgba(222, 192, 132, 0.10);
  z-index: 2;
}

.card-mastery-banner-label,
.card-mastery-banner-value {
  font-size: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-mastery-banner-label {
  color: rgba(208, 180, 120, 0.54);
}

.card-mastery-banner-value {
  color: rgba(238, 220, 176, 0.92);
}

/* Gradient fade at bottom of art → card body */
.card-art-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(to bottom, transparent, rgba(8, 4, 0, 0.65));
  pointer-events: none;
}

/* Mastery tier pip — small glowing dot, top-right of art frame */
.card-mastery-pip {
  position: absolute;
  top: 8px; right: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow: 0 0 7px var(--card-accent), 0 0 14px var(--card-accent);
  opacity: 0.85;
  transition: background 0.30s ease, box-shadow 0.30s ease;
}

/* Card body — name + tags */
.card-body {
  padding: 8px 10px 6px;
  background: rgba(10, 5, 0, 0.42);
  border-top: 1px solid rgba(60, 36, 10, 0.50);
}

.card-condition-name {
  font-size: 11px;
  font-weight: bold;
  line-height: 1.38;
  color: #e6d6a4;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

.card-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.card-tag {
  font-size: 7.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(174, 134, 52, 0.68);
  background: rgba(170, 114, 26, 0.10);
  border: 1px solid rgba(170, 114, 26, 0.22);
  border-radius: 3px;
  padding: 1px 5px;
}

.card-surface-note {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(110, 78, 28, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-surface-kicker {
  font-size: 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(170, 132, 58, 0.50);
}

.card-surface-text {
  font-size: 7.5px;
  line-height: 1.4;
  color: rgba(220, 206, 170, 0.84);
}

.card-mastery-meter-block {
  padding: 7px 10px 8px;
  background: rgba(22, 12, 2, 0.66);
  border-top: 1px solid rgba(90, 58, 16, 0.22);
}

.card-mastery-meter-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.card-mastery-meter-label,
.card-mastery-meter-target {
  font-size: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-mastery-meter-label {
  color: rgba(162, 126, 58, 0.56);
}

.card-mastery-meter-target {
  color: rgba(226, 210, 168, 0.82);
}

.card-mastery-meter-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 246, 220, 0.08);
  box-shadow: inset 0 0 0 1px rgba(212, 174, 106, 0.08);
}

.card-mastery-meter-fill {
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(214, 180, 116, 0.72), rgba(255, 231, 170, 0.90));
  transition: width 0.24s ease, background 0.24s ease;
}

/* Progress strip — three stat cells */
.card-progress-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(90, 58, 16, 0.28);
  background: rgba(8, 4, 0, 0.38);
}

.progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 4px 4px;
  border-right: 1px solid rgba(90, 58, 16, 0.20);
}
.progress-stat:last-child { border-right: none; }

.stat-label {
  font-size: 6px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(152, 114, 44, 0.52);
}

.stat-value {
  font-size: 8px;
  font-weight: bold;
  color: #ccaa60;
  font-family: var(--ui-font-serif);
}


/* ── Card navigation row ────────────────────────────────────────── */
.card-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.card-nav-btn {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 14, 4, 0.58);
  border: 1px solid rgba(154, 104, 30, 0.28);
  border-radius: 4px;
  cursor: pointer;
  color: rgba(194, 150, 50, 0.70);
  font-size: 20px;
  line-height: 1;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.card-nav-btn:hover,
.card-nav-btn:focus-visible {
  background: rgba(48, 24, 6, 0.88);
  color: var(--boh-gold);
  border-color: rgba(200, 148, 50, 0.58);
  outline: none;
}

.card-nav-btn:disabled {
  cursor: default;
  opacity: 0.35;
  background: rgba(28, 14, 4, 0.42);
  border-color: rgba(154, 104, 30, 0.14);
  color: rgba(194, 150, 50, 0.42);
}

.card-nav-counter {
  font-size: 9.5px;
  color: rgba(132, 96, 30, 0.62);
  min-width: 86px;
  text-align: center;
  letter-spacing: 0.06em;
}


/* ── Concept detail — right page ────────────────────────────────── */
.concept-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

/* Placeholder (loading / error state) */
.detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 8px;
  text-align: center;
}

.detail-placeholder-text {
  font-size: 11px;
  color: rgba(100, 68, 22, 0.55);
  font-style: italic;
}

.detail-placeholder-hint {
  font-size: 9px;
  line-height: 1.7;
  color: rgba(100, 68, 22, 0.42);
}

.detail-placeholder-hint code {
  font-family: var(--ui-font-mono);
  background: rgba(100, 68, 22, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 8.5px;
}

/* Content sections — populated by JS */
.detail-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-header {}

.detail-concept-name {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.32;
  color: #2a1808;
  margin-bottom: 4px;
}

.detail-concept-meta {
  font-size: 8.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(100, 68, 22, 0.60);
}

.detail-source-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(120, 78, 22, 0.20);
  background: rgba(120, 78, 22, 0.06);
  color: rgba(84, 54, 16, 0.72);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--ui-font-mono);
}

.detail-source-badge.is-live {
  border-color: rgba(58, 108, 58, 0.28);
  background: rgba(58, 108, 58, 0.08);
  color: rgba(48, 92, 48, 0.82);
}

.detail-source-badge.is-baked {
  border-color: rgba(138, 108, 28, 0.26);
  background: rgba(138, 108, 28, 0.08);
  color: rgba(110, 80, 22, 0.84);
}

.detail-source-badge.is-manual {
  border-color: rgba(118, 82, 150, 0.24);
  background: rgba(118, 82, 150, 0.08);
  color: rgba(88, 60, 120, 0.82);
}

.detail-source-note {
  font-size: 8px;
  color: rgba(96, 64, 18, 0.52);
  line-height: 1.45;
}

.detail-mastery-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-mastery-badge {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid;
  flex-shrink: 0;
  /* color/bg/border-color set by JS to match mastery tier */
}

.detail-mastery-stats {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 8.5px;
  color: rgba(80, 52, 16, 0.65);
}
.detail-mastery-stats span { white-space: nowrap; }

.detail-anchor-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120, 78, 22, 0.16);
}

.detail-anchor-name {
  font-size: 13px;
  line-height: 1.3;
  color: #2e1c0a;
  font-weight: bold;
}

.detail-anchor-meta {
  font-size: 8px;
  color: rgba(96, 64, 18, 0.58);
}

.detail-node-section {
  padding-top: 12px;
}

.detail-node-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-node-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 78, 22, 0.16);
  background: rgba(120, 78, 22, 0.06);
  color: rgba(78, 50, 16, 0.76);
  font-size: 7px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.detail-node-chip:hover,
.detail-node-chip:focus-visible {
  background: rgba(188, 146, 70, 0.10);
  border-color: rgba(160, 116, 34, 0.34);
  color: rgba(68, 40, 10, 0.92);
  outline: none;
}

.detail-node-chip.is-on {
  background: rgba(196, 152, 72, 0.18);
  border-color: rgba(174, 124, 36, 0.40);
  color: rgba(58, 34, 8, 0.96);
}

.detail-node-chip-node {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-node-chip-meta {
  font-size: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(124, 88, 30, 0.58);
}

/* Section heading (Key Rule / Source Lectures / Recent Misses) */
.detail-section-heading {
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(100, 68, 22, 0.52);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(120, 78, 22, 0.16);
}

.detail-rule-section,
.detail-lectures-section,
.detail-misses-section {
  border-top: 1px solid rgba(120, 78, 22, 0.12);
  padding-top: 12px;
}

.detail-key-rule-text {
  font-size: 11px;
  line-height: 1.58;
  color: #2c1c0a;
  font-style: italic;
}

.detail-lectures-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.lecture-chip {
  font-size: 8px;
  font-family: var(--ui-font-mono);
  color: rgba(76, 50, 14, 0.72);
  background: rgba(120, 80, 22, 0.09);
  border: 1px solid rgba(120, 80, 22, 0.20);
  border-radius: 3px;
  padding: 2px 7px;
  letter-spacing: 0.04em;
}

/* Miss history entries */
.detail-misses-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.miss-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(50, 28, 6, 0.05);
  border-left: 2px solid rgba(120, 80, 22, 0.20);
  font-size: 8.5px;
}

.miss-entry.miss-again { border-left-color: rgba(140, 58, 38, 0.52); }
.miss-entry.miss-hard  { border-left-color: rgba(138, 108, 28, 0.52); }
.miss-entry.miss-good  { border-left-color: rgba(58, 108, 58, 0.52); }

.miss-date {
  font-family: var(--ui-font-mono);
  font-size: 7.5px;
  color: rgba(100, 68, 22, 0.56);
  flex-shrink: 0;
}

.miss-conf {
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid;
  flex-shrink: 0;
}

.miss-conf-again { color: #8c3a28; border-color: rgba(140, 58, 40, 0.35); background: rgba(140, 58, 40, 0.07); }
.miss-conf-hard  { color: #7a5a18; border-color: rgba(138, 108, 28, 0.35); background: rgba(138, 108, 28, 0.07); }
.miss-conf-good  { color: #3a6a38; border-color: rgba(58, 108, 58, 0.35); background: rgba(58, 108, 58, 0.07); }

.miss-type {
  font-size: 7.5px;
  color: rgba(80, 52, 16, 0.55);
  font-style: italic;
}

.miss-correct {
  font-size: 8.5px;
  color: rgba(56, 96, 56, 0.72);
  margin-left: auto;
}


/* ── Sync button ────────────────────────────────────────────────── */
.boh-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: rgba(40, 22, 6, 0.72);
  border: 1px solid rgba(140, 94, 28, 0.40);
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--ui-font-serif);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(180, 136, 44, 0.80);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.boh-sync-btn:hover,
.boh-sync-btn:focus-visible {
  background: rgba(58, 30, 6, 0.92);
  color: var(--boh-gold);
  border-color: rgba(200, 148, 48, 0.62);
  outline: none;
}

/* Smaller variant shown in the footer row */
.boh-sync-btn-small {
  font-size: 8px;
  padding: 3px 10px;
  border-radius: 3px;
  opacity: 0.72;
}

.boh-sync-btn-small:hover { opacity: 1; }

/* Footer row at the bottom of the right page */
.boh-sync-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 78, 22, 0.14);
}

.boh-sync-baked-at {
  font-size: 7.5px;
  color: rgba(100, 68, 22, 0.42);
  font-family: var(--ui-font-mono);
  font-style: italic;
}

/* ── Body lock when book is open ────────────────────────────────── */
body.book-open { overflow: hidden; }