/* ================================================================
   THE BOOK OF BAO · Sacred Stylesheet
   "And lo, the styles were applied, and the layout was righteous."
   ─────────────────────────────────────────────────────────────────
   Est. Year of Bao 1 · Compiled under the Light of DaisyUI 5
   ================================================================
   PSALM 3:16 — "For the CSS was so loved, that it gave its only
   begotten !important, that whosoever useth it shall not overflow,
   but have everlasting layout."
   ================================================================ */

:root {
  /* ── Sacred Color Palette ──────────────────────────────────────
     "Let there be contrast" — Genesis of Design, Chapter 1
     ──────────────────────────────────────────────────────────── */
  --gold: #d4a843;
  --gold-bright: #ffd700;
  --blood: #8b1a1a;
  --blood-glow: #cc2222;
  --parchment: var(--paper-base);
  --dark-parchment: var(--paper-warm);
  --ink: #0d0906;
  --ink-deep: #1a1206;
  --ink-blood: #1a0808;
  --holy-glow: #ffd700;
  --bun-orange: #f97316;
  --docker-blue: #0db7ed;
  --node-red: #cc1111;
  --k8s-purple: #326ce5;
  --sacred-green: #2d8a4e;
  --prophet-amber: #e8a317;
  --lint-teal: #2dd4bf;
  --git-violet: #7c3aed;
  --yaml-rose: #e11d48;
  --shumai-gold: #b8860b;
  --wonton-brown: #8b4513;
  --xiao-purple: #9b59b6;
  --claude-orange: #e07a2f;
  --steam: rgba(255,255,255,0.6);
  --steam-dim: rgba(255,255,255,0.35);
  --crusade-crimson: #991b1b;
  --void-black: #030712;
  --faded: #c9ad78;
  --muted: #a08a5a;
  --subtle: #888;
  --focus-ring: rgba(212,168,67,0.7);
  --nav-height: 3.5rem;
  --crumbs-height: 2.25rem;
  --nav-offset: calc(var(--nav-height) + var(--crumbs-height));

  /* ── Paper Palette ────────────────────────────────────────────
     Three-tier parchment: cream top → warm mid → aged bottom.
     All WCAG AA compliant on --paper-base background.
     ──────────────────────────────────────────────────────────── */
  --paper-cream: #faf3e6;
  --paper-base: #f1e4c8;
  --paper-warm: #e8d8b0;
  --paper-aged: #dcc998;
  --paper-ink: #3d2e14;
  --paper-gold: #7a5f18;
  --paper-gold-bright: #6b5500;
  --paper-blood: #7a1b1b;
  --paper-blood-glow: #a11b1b;
  --paper-green: #1d6b3a;
  --paper-blue: #0879a1;
  --paper-teal: #1a7a6a;
  --paper-bun-orange: #b85400;
  --paper-text-warm: #c9a84c;
  --paper-text-lore: #c9b99a;
  --paper-text-dark: #6b5a3a;
  --paper-text-steam: #bbb;
  --paper-text-void: #666;
  --paper-holy-green: #228b22;
  --paper-ink-warm: #5c4a1a;
  --paper-ink-lore: #5a4a2e;
  --paper-ink-muted: #6b5a3a;
  --paper-ink-subtle: #5e5040;

  /* ── Alpha Utility Tokens ───────────────────────────────────
     Used for glassmorphism, overlays, and subtle effects across
     both dark-bg and paper-bg contexts.
     ──────────────────────────────────────────────────────────── */
  --paper-base-08: rgba(241,228,200,0.08);
  --paper-white-04: rgba(255,255,255,0.04);
  --paper-white-08: rgba(255,255,255,0.08);
  --paper-white-12: rgba(255,255,255,0.12);
  --paper-white-18: rgba(255,255,255,0.18);

  /* ── Derived Semantic for Scripture ────────────────────────────
     Named tokens for parchment-context text tones.
     "Name thy colors, lest the hex values multiply" — Proverb of Palettes
     ──────────────────────────────────────────────────────────── */
  --text-warm: var(--paper-text-warm);
  --text-lore: var(--paper-text-lore);
  --text-code-light: var(--dark-parchment);
  --text-dark: var(--paper-text-dark);
  --text-psalm: var(--paper-ink);
  --text-steam: var(--paper-text-steam);
  --text-void: var(--paper-text-void);
  --color-holy-green: var(--paper-holy-green);

  /* ── Alpha Variants ────────────────────────────────────────────
     "Blessed are the translucent, for they shall inherit the blur"
     ──────────────────────────────────────────────────────────── */
  --gold-04: rgba(212,168,67,0.04);
  --gold-05: rgba(212,168,67,0.05);
  --gold-06: rgba(212,168,67,0.06);
  --gold-08: rgba(212,168,67,0.08);
  --gold-10: rgba(212,168,67,0.1);
  --gold-12: rgba(212,168,67,0.12);
  --gold-15: rgba(212,168,67,0.15);
  --gold-18: rgba(212,168,67,0.18);
  --gold-20: rgba(212,168,67,0.2);
  --gold-22: rgba(212,168,67,0.22);
  --gold-25: rgba(212,168,67,0.25);
  --gold-30: rgba(212,168,67,0.3);
  --gold-35: rgba(212,168,67,0.35);
  --gold-40: rgba(212,168,67,0.4);
  --gold-50: rgba(212,168,67,0.5);
  --gold-60: rgba(212,168,67,0.6);
  --gold-70: rgba(212,168,67,0.7);
  --blood-06: rgba(139,26,26,0.06);
  --blood-08: rgba(139,26,26,0.08);
  --blood-20: rgba(139,26,26,0.2);
  --blood-glow-15: rgba(204,34,34,0.15);
  --blood-glow-30: rgba(204,34,34,0.30);
  /* ── Accent Color Alpha Variants ─────────────────────────────
     "Name thy colors, lest the rgba values multiply" — Opacity 2:1
     ──────────────────────────────────────────────────────────── */
  --bun-orange-10: rgba(249,115,22,0.1);
  --bun-orange-15: rgba(249,115,22,0.15);
  --bun-orange-20: rgba(249,115,22,0.2);
  --bun-orange-30: rgba(249,115,22,0.3);
  --bun-orange-40: rgba(249,115,22,0.4);
  --git-violet-20: rgba(124,58,237,0.2);
  --git-violet-10: rgba(124,58,237,0.1);
  --git-violet-40: rgba(124,58,237,0.4);
  --lint-teal-10: rgba(45,212,191,0.1);
  --lint-teal-20: rgba(45,212,191,0.2);
  --lint-teal-40: rgba(45,212,191,0.4);
  --sacred-green-light: #3a9f5f;
  --xp-green: #4ade80;
  --xp-green-bright: #22c55e;
  --xp-green-15: rgba(74,222,128,0.15);
  --steam-05: rgba(255,255,255,0.05);
  --steam-10: rgba(255,255,255,0.1);
  --steam-15: rgba(255,255,255,0.15);
  --dungeon-blue: #66aaff;
  --dungeon-blue-15: rgba(102,170,255,0.15);
  --dungeon-blue-30: rgba(102,170,255,0.3);
  /* ── Ink Alpha Variants ──────────────────────────────────────
     "Even darkness has degrees" — Book of Opacity 1:1
     ──────────────────────────────────────────────────────────── */
  --ink-15: rgba(13,9,6,0.15);
  --ink-20: rgba(13,9,6,0.2);
  --ink-25: rgba(13,9,6,0.25);
  --ink-60: rgba(13,9,6,0.6);
  --ink-70: rgba(13,9,6,0.7);
  --ink-75: rgba(13,9,6,0.75);
  --ink-85: rgba(13,9,6,0.85);
  --ink-88: rgba(13,9,6,0.88);
  --ink-90: rgba(13,9,6,0.9);
  --ink-95: rgba(13,9,6,0.95);

  /* ── DaisyUI 5 Semantic Theme Mapping ──────────────────────────
     Defined here as fallback; authoritative overrides live on
     [data-theme] below so they beat DaisyUI's built-in themes.
     ──────────────────────────────────────────────────────────── */
  --color-primary: var(--gold);
  --color-primary-content: var(--ink);
  --color-secondary: var(--lint-teal);
  --color-secondary-content: var(--ink);
  --color-accent: var(--bun-orange);
  --color-accent-content: var(--ink);
  --color-neutral: var(--muted);
  --color-neutral-content: var(--parchment);
  --color-base-100: var(--ink);
  --color-base-200: var(--ink-deep);
  --color-base-300: #231a0e;
  --color-base-content: var(--parchment);
  --color-info: var(--docker-blue);
  --color-info-content: var(--ink);
  --color-success: var(--sacred-green);
  --color-success-content: var(--parchment);
  --color-warning: var(--prophet-amber);
  --color-warning-content: var(--ink);
  --color-error: var(--blood);
  --color-error-content: var(--parchment);

  /* ── Sacred Font Stacks ────────────────────────────────────────
     DRY: define once, use everywhere. No more font-family duplication.
     "Thou shalt not repeat thyself" — Commandment of DRY, Verse 1
     ──────────────────────────────────────────────────────────── */
  --font-scripture: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-heading: 'Cinzel', serif;
  --font-heading-decorative: 'Cinzel Decorative', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing Scale ─────────────────────────────────────────────
     Consistent spacing: the mortar between our bricks of UI
     ──────────────────────────────────────────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ── Z-Index Stacking Context ──────────────────────────────────
     "In the beginning was the stacking context, and the context
     was without void, and z-index was upon the face of the DOM."
     ──────────────────────────────────────────────────────────── */
  --z-content: 1;
  --z-sticky: 50;
  --z-dock: 100;
  --z-navbar: 150;
  --z-drawer: 200;
  --z-dropdown: 250;
  --z-modal: 300;
  --z-toast: 400;
  --z-effect: 500;
  --z-loading: 9999;
  --z-grain: 9998;
  --z-skip: 10000;
  --z-cursor: 99999;
}

/* ── DaisyUI Theme Override ─────────────────────────────────────
   [data-theme] selector beats DaisyUI's built-in themes.css
   because our stylesheet loads AFTER DaisyUI's CDN — same
   specificity, later in cascade = wins.
   ──────────────────────────────────────────────────────────── */
[data-theme] {
  --color-primary: var(--gold);
  --color-primary-content: var(--ink);
  --color-secondary: var(--lint-teal);
  --color-secondary-content: var(--ink);
  --color-accent: var(--bun-orange);
  --color-accent-content: var(--ink);
  --color-neutral: var(--muted);
  --color-neutral-content: var(--parchment);
  --color-base-100: var(--ink);
  --color-base-200: var(--ink-deep);
  --color-base-300: #231a0e;
  --color-base-content: var(--parchment);
  --color-info: var(--docker-blue);
  --color-info-content: var(--ink);
  --color-success: var(--sacred-green);
  --color-success-content: var(--parchment);
  --color-warning: var(--prophet-amber);
  --color-warning-content: var(--ink);
  --color-error: var(--blood);
  --color-error-content: var(--parchment);
  color-scheme: dark;
}

/* Tailwind preflight handles reset. Only smooth scrolling added. */
html { scroll-behavior: smooth; }

/* "The body is a temple of DOM nodes" — First Letter to the Developers */
body {
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-scripture);
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  line-height: 1.85;
  overflow-x: hidden;
  font-weight: 400;
}

/* ============ LOADING RITUAL ============ */
/* "Patience is a virtue; loading is a necessity" — St. Webpack */
#loading-ritual {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease, visibility 1s ease;
}

#loading-ritual.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ritual-text {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: pulse-text 2s ease-in-out infinite;
}

.ritual-tip {
  font-family: var(--font-mono);
  color: var(--gold-70);
  font-size: 0.65rem;
  margin-top: 1.5rem;
  max-width: 300px;
  text-align: center;
  line-height: 1.5;
}

.ritual-dumpling {
  font-size: 4rem;
  animation: ritual-spin 2s linear infinite;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 30px var(--gold-60));
}

@keyframes ritual-spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ============ NAVIGATION — DaisyUI Navbar + Dock ============ */
/* "Navbar, Navbar on the wall, who's the most semantic of them all?" */
body .bao-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-navbar);
  isolation: isolate;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  max-height: 3.5rem;
  overflow: hidden;
  contain: paint; /* Prevent child overflow bleeding when translated off-screen */
  clip-path: inset(0); /* Hard-clip navMenu overflow — prevents ghost chapter text */
  background: linear-gradient(135deg, var(--paper-base-08), var(--ink-70));
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--gold-12);
  padding: 0.4rem 1rem;
  transform: translateY(-100%);
  transition: transform 0.4s ease, background 0.3s;
  min-height: auto;
}

body .bao-navbar::before,
body .bao-navbar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body .bao-navbar::before {
  background: radial-gradient(120% 120% at 15% 0%, var(--paper-white-18), rgba(255,255,255,0) 55%);
  opacity: 0.85;
}

body .bao-navbar::after {
  background: linear-gradient(120deg, var(--paper-white-08), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--paper-white-04), rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity: 0.7;
}

.bao-navbar.visible { transform: translateY(0); }

/* Menu items inside the navbar center */
.bao-navbar .menu li a,
.bao-navbar .menu li button {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  color: var(--faded);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.45rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.bao-navbar .menu li a:hover,
.bao-navbar .menu li button:hover {
  color: var(--gold);
  background: var(--gold-12);
}

.bao-navbar .menu li a.active {
  color: var(--gold);
  background: var(--gold-18);
}

/* Navbar ghost button hover (logo, etc.) */
.bao-navbar .btn-ghost:hover {
  background: var(--gold-15);
  color: var(--gold-bright);
}

/* Volume slider custom track */
#volumeSlider {
  --range-shdw: var(--gold);
}

/* Drawer menu items */
#drawerMenu li a,
#drawerMenu li button {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--faded);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 0.8rem;
  border-radius: 0.25rem;
  transition: color 0.2s, background 0.2s;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

#drawerMenu li a:hover,
#drawerMenu li a.active,
#drawerMenu li button:hover,
#drawerMenu li button.active {
  color: var(--gold);
  background: var(--gold-12);
}

#drawerMenu li a.chapter-locked,
#drawerMenu li button.chapter-locked {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
#drawerMenu li a.chapter-locked .lock-badge,
#drawerMenu li button.chapter-locked .lock-badge {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.6rem;
  vertical-align: middle;
  color: var(--muted);
}
#drawerMenu li a.chapter-completed::before,
#drawerMenu li button.chapter-completed::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sacred-green);
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Terminal drawer item — green accent */
#drawerMenu a.drawer-terminal,
#drawerMenu button.drawer-terminal {
  color: var(--term-green);
}
#drawerMenu a.drawer-terminal:hover,
#drawerMenu button.drawer-terminal:hover {
  color: var(--term-green);
  background: var(--term-green-05);
}
#drawerMenu a.drawer-terminal .lucide-icon,
#drawerMenu button.drawer-terminal .lucide-icon {
  color: var(--term-green);
}

/* ── LEGACY DRAWER CODE REMOVED ────────────────────────────────
   Previously .bao-drawer-overlay and .bao-drawer-side lived here.
   Replaced by DaisyUI 5 drawer pattern (drawer-toggle + drawer-side).
   R.I.P. custom JS toggle. You served well. 🪦
   ──────────────────────────────────────────────────────────────── */

/* ============ GAME HUD DOCK (DaisyUI dock) ============ */
/* "The Dock abideth forever" — Ecclesiastes of UI, 1:4
   Single consolidated dock using DaisyUI dock component.
   Specificity via `body` ancestor beats CDN without !important. */
body .dock.bao-dock {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  place-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-dock);
  isolation: isolate;
  background: linear-gradient(180deg, var(--paper-base-08), var(--ink-75));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--gold-20);
  padding: 0.35rem 0;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  color: var(--parchment);
}

body .dock.bao-dock::before,
body .dock.bao-dock::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body .dock.bao-dock::before {
  background: radial-gradient(120% 120% at 50% 0%, var(--paper-white-12), rgba(255,255,255,0) 65%);
  opacity: 0.9;
}

body .dock.bao-dock::after {
  background: linear-gradient(0deg, var(--paper-white-08), rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
  opacity: 0.6;
}
body .dock.bao-dock.visible { transform: translateY(0); }
/* Ensure dock is visible during page turn mode */
body.page-turn-active .dock.bao-dock { transform: translateY(0); }

.bao-dock button,
.bao-dock summary,
.bao-dock a,
.bao-dock label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.65rem;
  gap: 2px;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  min-width: 0;
}
.bao-dock button:hover,
.bao-dock summary:hover,
.bao-dock a:hover,
.bao-dock label:hover {
  color: var(--gold-bright);
  background: var(--gold-08);
  border-radius: 0.5rem;
}

/* Terminal dock button — green accent instead of gold */
.bao-dock .dock-terminal {
  color: var(--term-green);
}
.bao-dock .dock-terminal:hover {
  color: var(--term-green-bright);
  background: var(--term-green-10);
}

.bao-dock .dock-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Stat items with progress bars */
.bao-dock-stat {
  position: relative;
  cursor: default;
}
.bao-dock-bar {
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
}
.bao-dock-bar.faith-bar {
  background: var(--gold-15);
}
.bao-dock-bar.xp-bar {
  background: var(--xp-green-15);
}

/* Progress fill bars (shared) */
.xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--lint-teal), var(--xp-green), var(--xp-green-bright));
  border-radius: 2px;
  transition: width 0.8s ease;
}

.xp-label {
  color: var(--xp-green);
}

.coin-counter {
  color: var(--gold);
}

/* (details dropdown removed - replaced by Game Menu modal) */

/* ---- Dropdown menu theme ---- */
.bao-dropdown-menu {
  background: var(--ink);
  border: 1px solid var(--gold-35);
  border-radius: 0.5rem;
  min-width: 180px;
  padding: 0.5rem 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  margin-bottom: 8px;
}
.bao-dropdown-menu .menu-title {
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1rem 0.15rem;
  opacity: 0.7;
}
.bao-dropdown-menu li > a {
  color: var(--parchment);
  font-size: 0.8rem;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.bao-dropdown-menu li > a:hover {
  background: var(--gold-12);
  color: var(--gold);
}

/* ============ GAME MENU MODAL ============ */
.game-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px) {
  .game-menu-grid { grid-template-columns: 1fr; }
}
.game-menu-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.game-menu-category {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--gold-15);
  margin-bottom: 0.25rem;
}
.btn.game-menu-item {
  /* Reset DaisyUI btn defaults that conflict with our styling */
  height: auto;
  min-height: unset;
  font-weight: normal;
  /* Custom properties */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: var(--parchment);
  font-family: var(--font-scripture);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
  width: 100%;
}
.btn.game-menu-item:hover {
  background: var(--gold-10);
  border-color: var(--gold-25);
  color: var(--gold);
}
.btn.game-menu-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 0.375rem;
}
.btn.game-menu-item .lucide-icon {
  color: var(--gold);
  flex-shrink: 0;
}

/* ============ BESTIARY ============ */
/* "And Adam gave names to all cattle, and to the bugs of the air" — Genesis 2:20(ish) */
.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 0.5rem;
}

.bestiary-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--gold-15);
  border-radius: 4px;
  font-size: 0.75rem;
}

.bestiary-entry.discovered {
  border-color: var(--gold-30);
  background: var(--gold-05);
}

.bestiary-entry.unknown {
  opacity: 0.4;
}

.bestiary-name {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 0.7rem;
}

.bestiary-detail {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--subtle);
  margin-left: auto;
}

/* ============ STAT GRID ============ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}

.stat-item {
  background: var(--gold-05);
  border: 1px solid var(--gold-15);
  border-radius: 4px;
  padding: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--faded);
  text-align: center;
}

.stat-item strong {
  display: block;
  font-size: 1.1rem;
  color: var(--gold);
  margin-top: 0.3rem;
}

/* ============ ITEM SHOP ============ */
/* "It is easier for a camel to pass through the eye of a CSS grid than for a rich man to enter the shop without coins" */
.shop-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shop-coins {
  text-align: center;
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.shop-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  border: 1px solid var(--gold-15);
  border-radius: 4px;
  background: var(--gold-04);
}

.shop-name {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 0.75rem;
  min-width: 100px;
}

.shop-desc {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--subtle);
  flex: 1;
}

.shop-buy-btn {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  background: var(--gold-10);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.shop-buy-btn:hover:not(:disabled) {
  background: var(--gold-20);
}

.shop-buy-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.faith-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.faith-bar {
  height: 3px;
  background: var(--gold-15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.faith-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blood), var(--gold), var(--bun-orange));
  border-radius: 2px;
  transition: width 0.8s ease;
  position: relative;
}

.faith-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -1px;
  bottom: -1px;
  width: 6px;
  background: var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold-bright);
}

.faith-level {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--bun-orange);
  white-space: nowrap;
}

.smite-counter {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--blood-glow);
  white-space: nowrap;
}

/* ============ COVER ============ */
/* "In the beginning was the Cover, and the Cover was with Bao" */
.cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 20%, var(--gold-12) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, var(--blood-08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 80%, rgba(249,115,22,0.06) 0%, transparent 40%),
    linear-gradient(180deg, #0d0906 0%, var(--ink-deep) 30%, #2a1f10 60%, var(--ink-deep) 100%);
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}

.cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23d4a843' fill-opacity='0.025'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.steam-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--gold-30), transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: steam-rise linear infinite;
}

@keyframes steam-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.2; }
  100% { transform: translateY(-100vh) scale(3); opacity: 0; }
}

.cover-icon {
  font-size: 6rem;
  margin-bottom: 1.5rem;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 40px var(--gold-60));
  position: relative;
  z-index: 2;
  cursor: pointer;
  user-select: none;
}

.cover-icon:active { animation: smite-shake 0.3s ease; }

@keyframes smite-shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-10px) rotate(-5deg); }
  75% { transform: translateY(-5px) rotate(5deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

.cover h1 {
  font-family: var(--font-heading-decorative);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  color: var(--gold);
  text-shadow: 0 0 60px var(--gold-40), 0 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.cover .subtitle {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 2.2vw, 1.4rem);
  color: var(--text-warm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.cover .edition {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--bun-orange);
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
  opacity: 0.7;
}

.bao-divider {
  width: 250px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.5rem auto;
  position: relative;
  z-index: 2;
}

.bao-divider::after {
  content: '\2727';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  color: var(--gold);
}

.cover .tagline {
  font-family: var(--font-scripture);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 650px;
  position: relative;
  z-index: 2;
  line-height: 1.9;
}

.cover .enter-btn {
  margin-top: 2.5rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  background: none;
  border: 1px solid var(--gold);
  padding: 0.8rem 2.5rem;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: all 0.4s;
}

.cover .enter-btn:hover {
  background: var(--gold-15);
  box-shadow: 0 0 30px var(--gold-20);
  transform: translateY(-2px);
}

/* ============ TABLE OF CONTENTS ============ */
/* "Seek and ye shall find... the right chapter, eventually" */
.toc-section {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
  padding: 4rem 2rem;
}

.toc-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.toc-title {
  font-family: var(--font-heading-decorative);
  font-size: clamp(1.3rem, 3vw + 0.5rem, 1.8rem);
  color: var(--gold);
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
}

.toc-subtitle {
  font-family: var(--font-scripture);
  font-style: italic;
  color: var(--muted);
  margin-bottom: 2rem;
}

.toc-list { list-style: none; text-align: left; }

.toc-list li { border-bottom: 1px solid var(--gold-10); }

.toc-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  text-decoration: none;
  color: var(--text-warm);
  transition: all 0.3s;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.toc-list a:hover {
  color: var(--gold-bright);
  padding-left: 0.5rem;
}

.toc-list .toc-emoji {
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toc-list .toc-emoji .lucide-icon {
  width: 18px;
  height: 18px;
}

.toc-list .toc-chapter {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--blood);
  opacity: 0.7;
  margin-left: auto;
}

/* ============ SECTION THEME SYSTEM ============ */
/* Each section gets: gradient tint, unique SVG texture, vignette overlay */
.section-theme {
  position: relative;
  padding: 3rem 0;
  background: var(--st-bg, transparent);
  transition: background 0.6s ease;
  overflow: hidden;
}

/* Margin rule line */
.section-theme::before {
  content: '';
  position: absolute;
  left: 55px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--st-margin, rgba(139,26,26,0.1));
  transition: background 0.6s ease;
  z-index: 2;
}

/* Radial vignette overlay for depth */
.section-theme::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, var(--ink-25) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Texture layer via a child or applied directly */
.section-theme .section-texture {
  position: absolute;
  inset: 0;
  background-image: var(--st-texture, none);
  background-repeat: repeat;
  background-size: var(--st-texture-size, 60px 60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  animation: section-parallax linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

@keyframes section-parallax {
  from { background-position: 0 -30px; }
  to   { background-position: 0 30px; }
}

/* Dramatis Personae: heraldic chevrons */
.section-theme[data-section="dramatis"] {
  --st-bg: linear-gradient(180deg, transparent 0%, var(--gold-06) 30%, var(--gold-10) 50%, var(--gold-06) 70%, transparent 100%);
  --st-margin: rgba(184,134,11,0.18);
  --st-texture: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 10 L50 30 L30 50 L10 30Z' fill='none' stroke='%23d4a843' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M30 20 L40 30 L30 40 L20 30Z' fill='none' stroke='%23d4a843' stroke-opacity='0.025' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* Genesis: concentric creation ripples */
.section-theme[data-section="genesis"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(249,115,22,0.05) 30%, rgba(249,115,22,0.08) 50%, rgba(249,115,22,0.05) 70%, transparent 100%);
  --st-margin: rgba(249,115,22,0.15);
  --st-texture: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='30' fill='none' stroke='%23f97316' stroke-opacity='0.035' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='20' fill='none' stroke='%23f97316' stroke-opacity='0.025' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='10' fill='none' stroke='%23f97316' stroke-opacity='0.015' stroke-width='0.5'/%3E%3C/svg%3E");
  --st-texture-size: 80px 80px;
}

/* Exodus: diagonal desert wind dashes */
.section-theme[data-section="exodus"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(139,90,43,0.05) 30%, rgba(139,90,43,0.08) 50%, rgba(139,90,43,0.05) 70%, transparent 100%);
  --st-margin: rgba(139,90,43,0.18);
  --st-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='40' x2='40' y2='0' stroke='%238b5a2b' stroke-opacity='0.04' stroke-width='0.5' stroke-dasharray='4 6'/%3E%3Cline x1='0' y1='20' x2='20' y2='0' stroke='%238b5a2b' stroke-opacity='0.03' stroke-width='0.5' stroke-dasharray='3 8'/%3E%3C/svg%3E");
  --st-texture-size: 40px 40px;
}

/* Plagues: crosshatch infection pattern */
.section-theme[data-section="plagues"] {
  --st-bg: linear-gradient(180deg, transparent 0%, var(--blood-06) 30%, rgba(139,26,26,0.1) 50%, var(--blood-06) 70%, transparent 100%);
  --st-margin: rgba(139,26,26,0.22);
  --st-texture: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='30' y2='30' stroke='%238b1a1a' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cline x1='30' y1='0' x2='0' y2='30' stroke='%238b1a1a' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E");
  --st-texture-size: 30px 30px;
}

/* Commandments: horizontal ruled tablet lines */
.section-theme[data-section="commandments"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(120,120,100,0.05) 30%, var(--gold-06) 50%, rgba(120,120,100,0.05) 70%, transparent 100%);
  --st-margin: var(--gold-22);
  --st-texture: url("data:image/svg+xml,%3Csvg width='60' height='20' viewBox='0 0 60 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='10' x2='60' y2='10' stroke='%23d4a843' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Cline x1='0' y1='19' x2='60' y2='19' stroke='%23787868' stroke-opacity='0.025' stroke-width='0.3'/%3E%3C/svg%3E");
  --st-texture-size: 60px 20px;
}

/* Gospel: vine meander */
.section-theme[data-section="gospel"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(45,138,78,0.04) 30%, rgba(45,138,78,0.07) 50%, rgba(45,138,78,0.04) 70%, transparent 100%);
  --st-margin: rgba(45,138,78,0.18);
  --st-texture: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 30 Q20 10 30 30 Q40 50 50 30' fill='none' stroke='%232d8a4e' stroke-opacity='0.035' stroke-width='0.8'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%232d8a4e' fill-opacity='0.025'/%3E%3C/svg%3E");
}

/* Proverbs: scrollwork dots */
.section-theme[data-section="proverbs"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(139,69,19,0.05) 30%, rgba(139,69,19,0.08) 50%, rgba(139,69,19,0.05) 70%, transparent 100%);
  --st-margin: rgba(139,69,19,0.18);
  --st-texture: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='1.5' fill='%238b4513' fill-opacity='0.04'/%3E%3Ccircle cx='5' cy='5' r='1' fill='%238b4513' fill-opacity='0.025'/%3E%3Ccircle cx='45' cy='5' r='1' fill='%238b4513' fill-opacity='0.025'/%3E%3Ccircle cx='5' cy='45' r='1' fill='%238b4513' fill-opacity='0.025'/%3E%3Ccircle cx='45' cy='45' r='1' fill='%238b4513' fill-opacity='0.025'/%3E%3C/svg%3E");
  --st-texture-size: 50px 50px;
}

/* Revelations: starburst pattern */
.section-theme[data-section="revelations"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(124,58,237,0.04) 20%, var(--blood-06) 50%, rgba(124,58,237,0.04) 80%, transparent 100%);
  --st-margin: rgba(124,58,237,0.15);
  --st-texture: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='35' y1='10' x2='35' y2='60' stroke='%237c3aed' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Cline x1='10' y1='35' x2='60' y2='35' stroke='%237c3aed' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Cline x1='15' y1='15' x2='55' y2='55' stroke='%237c3aed' stroke-opacity='0.02' stroke-width='0.5'/%3E%3Cline x1='55' y1='15' x2='15' y2='55' stroke='%237c3aed' stroke-opacity='0.02' stroke-width='0.5'/%3E%3C/svg%3E");
  --st-texture-size: 70px 70px;
}

/* Psalms: gentle wave pattern */
.section-theme[data-section="psalms"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(50,108,229,0.03) 30%, rgba(50,108,229,0.05) 50%, rgba(50,108,229,0.03) 70%, transparent 100%);
  --st-margin: rgba(50,108,229,0.15);
  --st-texture: url("data:image/svg+xml,%3Csvg width='80' height='30' viewBox='0 0 80 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 Q20 5 40 15 Q60 25 80 15' fill='none' stroke='%23326ce5' stroke-opacity='0.035' stroke-width='0.6'/%3E%3Cpath d='M0 22 Q20 12 40 22 Q60 32 80 22' fill='none' stroke='%23326ce5' stroke-opacity='0.02' stroke-width='0.4'/%3E%3C/svg%3E");
  --st-texture-size: 80px 30px;
}

/* Solomon: interlocking hearts */
.section-theme[data-section="solomon"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(225,29,72,0.03) 30%, rgba(225,29,72,0.06) 50%, rgba(225,29,72,0.03) 70%, transparent 100%);
  --st-margin: rgba(225,29,72,0.15);
  --st-texture: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 40 L10 25 Q5 15 15 15 Q20 15 25 22 Q30 15 35 15 Q45 15 40 25 Z' fill='none' stroke='%23e11d48' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/svg%3E");
  --st-texture-size: 50px 50px;
}

/* Code Review: judicial deep blue */
.section-theme[data-section="code-review"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(30,60,120,0.04) 30%, rgba(30,60,120,0.07) 50%, rgba(30,60,120,0.04) 70%, transparent 100%);
  --st-margin: rgba(30,60,120,0.15);
  --st-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='30' height='30' rx='2' fill='none' stroke='%231e3c78' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Cline x1='12' y1='15' x2='28' y2='15' stroke='%231e3c78' stroke-opacity='0.025' stroke-width='0.4'/%3E%3Cline x1='12' y1='20' x2='28' y2='20' stroke='%231e3c78' stroke-opacity='0.025' stroke-width='0.4'/%3E%3Cline x1='12' y1='25' x2='22' y2='25' stroke='%231e3c78' stroke-opacity='0.025' stroke-width='0.4'/%3E%3C/svg%3E");
  --st-texture-size: 40px 40px;
}

/* Job: static noise suffering */
.section-theme[data-section="job"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(80,80,80,0.05) 30%, rgba(80,80,80,0.08) 50%, rgba(80,80,80,0.05) 70%, transparent 100%);
  --st-margin: rgba(80,80,80,0.18);
  --st-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  --st-texture-size: 40px 40px;
}

/* Lamentations: dripping vertical lines */
.section-theme[data-section="lamentations"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(60,40,20,0.06) 30%, rgba(60,40,20,0.1) 50%, rgba(60,40,20,0.06) 70%, transparent 100%);
  --st-margin: rgba(60,40,20,0.22);
  --st-texture: url("data:image/svg+xml,%3Csvg width='20' height='60' viewBox='0 0 20 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='10' y1='0' x2='10' y2='45' stroke='%233c2814' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='48' r='1.5' fill='%233c2814' fill-opacity='0.03'/%3E%3C/svg%3E");
  --st-texture-size: 20px 60px;
}

/* Ecclesiastes: spiral cycles */
.section-theme[data-section="ecclesiastes"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(100,100,100,0.04) 30%, rgba(100,100,100,0.06) 50%, rgba(100,100,100,0.04) 70%, transparent 100%);
  --st-margin: rgba(100,100,100,0.15);
  --st-texture: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%23666' stroke-opacity='0.025' stroke-width='0.5' stroke-dasharray='3 5'/%3E%3Ccircle cx='30' cy='30' r='12' fill='none' stroke='%23666' stroke-opacity='0.02' stroke-width='0.5' stroke-dasharray='2 4'/%3E%3C/svg%3E");
}

/* Holy War narrative: sword cross marks */
.section-theme[data-section="battle"] {
  --st-bg: linear-gradient(180deg, transparent 0%, var(--blood-06) 20%, rgba(139,26,26,0.1) 50%, var(--blood-06) 80%, transparent 100%);
  --st-margin: rgba(139,26,26,0.25);
  --st-texture: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='25' y1='5' x2='25' y2='45' stroke='%238b1a1a' stroke-opacity='0.035' stroke-width='0.8'/%3E%3Cline x1='15' y1='18' x2='35' y2='18' stroke='%238b1a1a' stroke-opacity='0.035' stroke-width='0.6'/%3E%3C/svg%3E");
  --st-texture-size: 50px 50px;
}

/* Numbers: mathematical dot grid */
.section-theme[data-section="numbers"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(50,108,229,0.03) 30%, rgba(50,108,229,0.05) 50%, rgba(50,108,229,0.03) 70%, transparent 100%);
  --st-margin: rgba(50,108,229,0.12);
  --st-texture: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='0.8' fill='%23326ce5' fill-opacity='0.04'/%3E%3C/svg%3E");
  --st-texture-size: 24px 24px;
}

/* Apocrypha: mystical sigil circles */
.section-theme[data-section="apocrypha"] {
  --st-bg: linear-gradient(180deg, transparent 0%, rgba(80,40,100,0.05) 30%, rgba(80,40,100,0.08) 50%, rgba(80,40,100,0.05) 70%, transparent 100%);
  --st-margin: rgba(80,40,100,0.18);
  --st-texture: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='35' cy='35' r='25' fill='none' stroke='%23502864' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Ccircle cx='35' cy='35' r='15' fill='none' stroke='%23502864' stroke-opacity='0.025' stroke-width='0.5'/%3E%3Cline x1='35' y1='10' x2='35' y2='60' stroke='%23502864' stroke-opacity='0.02' stroke-width='0.3'/%3E%3Cline x1='10' y1='35' x2='60' y2='35' stroke='%23502864' stroke-opacity='0.02' stroke-width='0.3'/%3E%3C/svg%3E");
  --st-texture-size: 70px 70px;
}

/* ============ SCRIPTURE BODY ============ */
/* "The Word became flesh, and the flesh became well-formatted HTML" */

/* ── Parchment Page ────────────────────────────────────────────
   Redesigned ground-up: 3 layers (base, grain, spotlight) replace
   the old 12-gradient stack. Inset box-shadow creates page edges,
   eliminating the need for per-corner radial gradients.
   ──────────────────────────────────────────────────────────── */
.scripture-wrapper {
  /* Clean warm gradient — cream top fading to aged bottom */
  background:
    linear-gradient(180deg,
      var(--paper-cream)  0%,
      var(--paper-base)  35%,
      var(--paper-warm)  75%,
      var(--paper-aged) 100%
    );
  position: relative;

  /* Page edge shadows — replaces the old 5-layer radial vignette */
  box-shadow:
    inset  0  2px  6px -2px rgba(61,46,20,0.12),
    inset  0 -2px  6px -2px rgba(61,46,20,0.10),
    inset  3px 0  8px -4px rgba(61,46,20,0.06),
    inset -3px 0  8px -4px rgba(61,46,20,0.06),
    0 0 0 1px rgba(61,46,20,0.08),
    0 4px 24px -4px rgba(13,9,6,0.12);

  /* ── WCAG Paper Color Overrides ──────────────────────────────
     Scoped palette so every descendant gets accessible colors
     on the warm parchment background. Game section sits OUTSIDE
     scripture-wrapper so dark-bg colors are unaffected.
     ──────────────────────────────────────────────────────────── */
  --gold: var(--paper-gold);
  --gold-bright: var(--paper-gold-bright);
  --text-warm: var(--paper-ink-warm);
  --text-lore: var(--paper-ink-lore);
  --faded: var(--paper-ink-muted);
  --muted: var(--paper-ink-muted);
  --subtle: var(--paper-ink-subtle);
  --blood: var(--paper-blood);
  --blood-glow: var(--paper-blood-glow);
  --sacred-green: var(--paper-green);
  --bun-orange: var(--paper-bun-orange);
  --docker-blue: var(--paper-blue);
  --lint-teal: var(--paper-teal);
  color: var(--paper-ink);
}

/* Paper fiber grain — organic SVG noise, multiply-blended */
.scripture-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Soft center spotlight — warm highlight for readability focus */
.scripture-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 70% 50% at 50% 40%,
    rgba(255,255,255,0.14) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.scripture {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 2.5rem;
  position: relative;
  z-index: var(--z-content);
}

/* Manuscript margin rule — vertical red-brown line */
.scripture::before {
  content: '';
  position: absolute;
  left: 55px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(139,26,26,0.15) 5%,
    rgba(139,26,26,0.12) 50%,
    rgba(139,26,26,0.15) 95%,
    transparent 100%
  );
}

.section-anchor {
  display: block;
  visibility: hidden;
  scroll-margin-top: 0;
}

body.nav-visible .section-anchor {
  /* scroll-margin clears navbar + breadcrumbs */
  scroll-margin-top: var(--nav-offset);
}

.book-title {
  font-family: var(--font-heading-decorative);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--blood);
  text-align: center;
  margin: 3rem 0 0.5rem;
  letter-spacing: 0.05em;
  position: relative;
}

.book-title::after {
  content: '';
  display: block;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blood), transparent);
  margin: 0.8rem auto 0;
}

.book-title:first-child { margin-top: 0; }

.chapter-num {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 2.5rem 0 0.5rem;
}

.chapter-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--blood);
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: 0.08em;
}

.verse {
  margin-bottom: 1rem;
  position: relative;
}

.verse.interactive {
  cursor: pointer;
  transition: background 0.3s;
  padding: 0.2rem 0.4rem;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
  border-radius: 3px;
}

.verse.interactive:hover { background: var(--gold-08); }
.verse.interactive.revealed { background: var(--gold-06); }

.verse-num {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--blood);
  vertical-align: super;
  margin-right: 4px;
  font-weight: 700;
  opacity: 0.75;
}

.verse em { color: var(--blood); font-style: italic; }

/* Inline code within scripture text */
.scripture code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: rgba(26,18,6,0.08);
  color: var(--blood);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  border: 1px solid rgba(139,26,26,0.1);
  word-break: break-word;
}

.character {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: help;
  position: relative;
}

.character::after {
  content: attr(data-title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  font-weight: 400;
  letter-spacing: 0;
}

.character:hover::after { opacity: 1; }

/* Character Color Classes */
.char-shumaigod { color: var(--shumai-gold); }
.char-holygyoza { color: var(--color-holy-green); }
.char-omnibao { color: var(--blood); }
.char-docker { color: var(--docker-blue); }
.char-kube { color: var(--k8s-purple); }
.char-nodered { color: var(--node-red); }
.char-bun { color: var(--bun-orange); }
.char-wonton { color: var(--wonton-brown); }
.char-xiao { color: var(--xiao-purple); }
.char-claude { color: var(--claude-orange); }
.char-gitgabriel { color: var(--git-violet); }
.char-lintkeeper { color: var(--lint-teal); }
.char-yamliel { color: var(--yaml-rose); }

.commandment {
  background: linear-gradient(135deg, var(--blood-06) 0%, var(--gold-08) 100%);
  border-left: 3px solid var(--gold);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
}

.prophecy {
  text-align: center;
  padding: 2rem;
  margin: 2.5rem 0;
  border-top: 1px solid rgba(139,26,26,0.2);
  border-bottom: 1px solid rgba(139,26,26,0.2);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--blood);
  position: relative;
}

.prophecy::before {
  content: '\201C';
  font-size: 3rem;
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(139,26,26,0.15);
  font-style: normal;
}

.code-sin {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: rgba(26,18,6,0.92);
  color: var(--text-code-light);
  padding: 1.4rem 1.5rem;
  border-radius: 4px;
  margin: 1.5rem 0;
  overflow-x: auto;
  border-left: 3px solid var(--blood);
  position: relative;
  line-height: 1.65;
  tab-size: 2;
  -moz-tab-size: 2;
}

.code-sin::before {
  content: '\26A0 SINFUL CODE';
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--blood);
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  background: var(--parchment);
  padding: 0.05rem 0.5rem;
  border-radius: 2px;
}

.code-holy {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: rgba(26,18,6,0.92);
  color: var(--sacred-green-light, #a8e8a8);
  padding: 1.4rem 1.5rem;
  border-radius: 4px;
  margin: 1.5rem 0;
  overflow-x: auto;
  border-left: 3px solid var(--sacred-green);
  position: relative;
  line-height: 1.65;
  tab-size: 2;
  -moz-tab-size: 2;
}

.code-holy::before {
  content: '\271D HOLY CODE';
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--sacred-green);
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  background: var(--parchment);
  padding: 0.05rem 0.5rem;
  border-radius: 2px;
}

.psalm {
  text-align: center;
  margin: 2.5rem 0;
  padding: 0 2rem;
}

.psalm p {
  font-style: italic;
  margin-bottom: 0.3rem;
  color: var(--text-psalm);
}

/* ============ DRAMATIS PERSONAE ============ */
/* "All the world is a stage, and all the NPCs merely have onClick handlers" */
.dramatis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.dramatis-card {
  background: var(--gold-06);
  border: 1px solid var(--gold-15);
  padding: 1rem;
  text-align: center;
  border-radius: 3px;
  transition: all 0.4s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.dramatis-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-10), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.dramatis-card:hover::before { opacity: 1; }

.dramatis-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  border-color: var(--gold);
}

.dramatis-card .emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: transform 0.3s;
  min-height: 48px;
}

.dramatis-card .emoji .lucide-icon {
  width: 36px;
  height: 36px;
}

.dramatis-card:hover .emoji { transform: scale(1.15); }

.dramatis-card .name {
  font-family: var(--font-heading-decorative);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.3rem;
}

.dramatis-card .title-line {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.dramatis-card .role {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.5;
}

.dramatis-card .alignment {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

.align-holy { background: rgba(34,139,34,0.12); color: var(--color-holy-green); border: 1px solid rgba(34,139,34,0.3); }
.align-fallen { background: rgba(139,26,26,0.12); color: var(--blood); border: 1px solid rgba(139,26,26,0.3); }
.align-chaotic { background: var(--bun-orange-10); color: var(--bun-orange); border: 1px solid var(--bun-orange-30); }
.align-void { background: var(--ink-15); color: var(--text-void); border: 1px solid var(--ink-20); }
.align-angel { background: var(--git-violet-10); color: var(--git-violet); border: 1px solid var(--git-violet-20); }
.align-sentinel { background: rgba(45,212,191,0.12); color: var(--lint-teal); border: 1px solid rgba(45,212,191,0.3); }
.align-demon { background: rgba(225,29,72,0.12); color: var(--yaml-rose); border: 1px solid rgba(225,29,72,0.3); }

/* ============ HOLY WAR GAME ============ */
/* "Blessed are the button-mashers, for they shall inherit the high score" */
.game-section {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-blood) 50%, var(--ink) 100%);
  padding: 3rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.game-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(139,26,26,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.game-title {
  font-family: var(--font-heading-decorative);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--blood-glow);
  text-shadow: 0 0 30px rgba(204,34,34,0.4);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.game-subtitle {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.battle-arena {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.battle-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

/* Mode selector */
.mode-select {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.mode-btn {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--gold);
  background: none;
  color: var(--gold);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.3s;
}

.mode-btn:hover {
  background: var(--gold-15);
  box-shadow: 0 0 20px var(--gold-20);
  transform: translateY(-2px);
}

.mode-btn.crusade {
  border-color: var(--blood-glow);
  color: var(--blood-glow);
}

.mode-btn.crusade:hover {
  background: var(--blood-glow-15);
  box-shadow: 0 0 20px var(--blood-glow-30);
}

/* Character select */
.char-select {
  display: none;
  margin-bottom: 2rem;
}

.char-select.show { display: block; }

.char-select-title {
  font-family: var(--font-heading-decorative);
  font-size: 1.2rem;
  color: var(--gold);
  margin-bottom: 1rem;
}

.char-options {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.char-option {
  background: var(--gold-06);
  border: 2px solid var(--gold-20);
  padding: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 140px;
  color: var(--gold);
}

.char-option:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 5px 20px var(--gold-20);
}

.char-option.selected {
  border-color: var(--gold-bright);
  background: var(--gold-15);
  box-shadow: 0 0 25px var(--gold-30);
}

.char-option .char-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3rem;
  min-height: 36px;
}

.char-option .char-name {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.3rem;
}

.char-option .char-stat {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--faded);
  line-height: 1.4;
  display: block;
}

.char-option .char-stats {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--faded);
  line-height: 1.4;
}

.char-option-locked {
  opacity: 0.45;
  position: relative;
}

.char-option-locked.unlocked {
  opacity: 1;
}

.char-lock-msg {
  display: block;
  font-size: 0.5rem;
  color: var(--blood);
  font-family: var(--font-mono);
  margin-top: 0.3rem;
}

.char-option-locked.unlocked .char-lock-msg {
  display: none;
}

/* Crusade timeline - now using DaisyUI steps, old styles kept for reference */
/* Timeline visibility handled by Tailwind hidden class */

/* Boss intro - now using DaisyUI modal, animations kept */
@keyframes boss-pulse {
  from { transform: scale(1); filter: drop-shadow(0 0 20px rgba(204,34,34,0.5)); }
  to { transform: scale(1.1); filter: drop-shadow(0 0 40px rgba(204,34,34,0.8)); }
}

#bossIntro .boss-icon {
  animation: boss-pulse 1s ease infinite alternate;
}

/* Combatants */
.combatants {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.combatant {
  text-align: center;
  min-width: 100px;
}

.combatant .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3rem;
  transition: transform 0.3s;
  min-height: 48px;
}

.combatant .icon .lucide-icon {
  width: 40px;
  height: 40px;
}

.combatant .hp-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.3rem;
}

.combatant .hp-fill {
  height: 100%;
  background: var(--sacred-green);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.combatant .hp-fill.low { background: var(--blood-glow); }

.combatant .cname {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.combatant .hp-text {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--faded);
}

.vs-text {
  font-family: var(--font-heading-decorative);
  font-size: 1.5rem;
  color: var(--blood-glow);
  text-shadow: 0 0 15px rgba(204,34,34,0.5);
}

.attack-buttons {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.attack-btn {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.2rem;
  border: 2px solid;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer effect on buttons */
.attack-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.attack-btn:hover::before {
  left: 100%;
}

.attack-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
}

.attack-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.attack-btn.smite { color: var(--gold); border-color: var(--gold); }
.attack-btn.smite:hover { background: var(--gold-20); box-shadow: 0 0 25px var(--gold-40), inset 0 0 15px var(--gold-10); }

.attack-btn.steam { color: var(--text-steam); border-color: var(--subtle); }
.attack-btn.steam:hover { background: var(--steam-10); box-shadow: 0 0 20px var(--steam-15), inset 0 0 10px var(--steam-05); }

.attack-btn.bun-run { color: var(--bun-orange); border-color: var(--bun-orange); }
.attack-btn.bun-run:hover { background: var(--bun-orange-20); box-shadow: 0 0 25px var(--bun-orange-40), inset 0 0 15px var(--bun-orange-10); }

.attack-btn.special { color: var(--git-violet); border-color: var(--git-violet); }
.attack-btn.special:hover { background: var(--git-violet-20); box-shadow: 0 0 25px var(--git-violet-40), inset 0 0 15px var(--git-violet-10); }

.attack-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.attack-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Inventory drawer */
.inventory-bar {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
  min-height: 32px;
  flex-wrap: wrap;
}

.inv-item {
  font-size: 1.2rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--gold-20);
  border-radius: 3px;
  cursor: help;
  position: relative;
  transition: all 0.3s;
}

.inv-item:hover {
  border-color: var(--gold);
  transform: scale(1.1);
}

.inv-item::after {
  content: attr(data-name);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.inv-item:hover::after { opacity: 1; }

.battle-log {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--gold-15);
  border-radius: 4px;
  padding: 1rem;
  max-height: 220px;
  overflow-y: auto;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--faded);
}

.battle-log .log-entry {
  margin-bottom: 0.3rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.log-holy { color: var(--gold); }
.log-damage { color: var(--blood-glow); }
.log-heal { color: var(--sacred-green); }
.log-epic { color: var(--bun-orange); font-weight: 700; }
.log-phase { color: var(--git-violet); font-weight: 700; }
.log-loot { color: var(--gold-bright); font-style: italic; }

.victory-banner {
  display: none;
  padding: 2rem;
  animation: victory-pulse 1s ease infinite alternate;
}

.victory-banner.show { display: block; }

@keyframes victory-pulse {
  0% { text-shadow: 0 0 20px var(--gold-30); }
  100% { text-shadow: 0 0 40px var(--gold-60); }
}

.victory-banner h3 {
  font-family: var(--font-heading-decorative);
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.victory-banner p {
  font-family: var(--font-scripture);
  font-style: italic;
  color: var(--muted);
  font-size: 1.1rem;
}

.victory-banner .enter-btn {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.victory-banner .enter-btn:hover {
  background: var(--gold-15);
  box-shadow: 0 0 20px var(--gold-20);
  transform: translateY(-1px);
}

.victory-banner .btn-leaderboard {
  font-size: 0.65rem;
  opacity: 0.7;
  padding: 0.4rem 0.8rem;
}

/* Battle screen shake */
@keyframes screen-shake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-5px, -3px); }
  20% { transform: translate(5px, 3px); }
  30% { transform: translate(-3px, 5px); }
  40% { transform: translate(3px, -5px); }
  50% { transform: translate(-5px, 3px); }
  60% { transform: translate(5px, -3px); }
  70% { transform: translate(-3px, -5px); }
  80% { transform: translate(3px, 5px); }
  90% { transform: translate(-5px, -3px); }
}

.shake { animation: screen-shake 0.4s ease; }

/* Hit flash */
@keyframes hit-flash {
  0%, 100% { filter: none; }
  50% { filter: brightness(3) saturate(0); }
}

.hit { animation: hit-flash 0.2s ease; }

/* ============ STEAM BREAK ============ */
.steam-break {
  text-align: center;
  margin: 2.5rem 0;
  font-size: 1.5rem;
  letter-spacing: 1rem;
  color: var(--subtle);
  user-select: none;
}

/* ============ DROP CAP ============ */
/* "The first letter shall be great, and shall be called Wonderful" — Isaiah 9:6(rem) */
.drop-cap::first-letter {
  font-family: var(--font-heading-decorative);
  float: left;
  font-size: 4.5rem;
  line-height: 0.8;
  padding-right: 0.15em;
  color: var(--blood);
  font-weight: 900;
  text-shadow: 1px 1px 0 var(--gold);
}

/* ============ DAISYUI 5 OVERRIDES ============ */
/* "Render unto DaisyUI the things that are DaisyUI's, and unto custom CSS the things that are custom" */
/* Override DaisyUI defaults to match parchment theme.
   Uses `body` ancestor for specificity instead of !important where possible. */

/* Collapse components - Interactive plagues */
body .collapse {
  border-radius: 0;
  transition: all 0.3s ease;
}

body .collapse:hover {
  background: linear-gradient(135deg, rgba(139,26,26,0.1) 0%, var(--gold-12) 100%);
  transform: translateX(4px);
}

body .collapse:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

body .collapse-title {
  min-height: auto;
  padding: 0.8rem 1.5rem;
  transition: color 0.2s ease;
}

body .collapse:hover .collapse-title {
  color: var(--blood-glow);
}

body .collapse-content {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

body .collapse-arrow > .collapse-title:after {
  color: var(--blood);
  transition: transform 0.3s ease, color 0.2s ease;
}

body .collapse:hover .collapse-arrow > .collapse-title:after {
  color: var(--gold);
}

/* Collapse open state indicator */
body .collapse input:checked ~ .collapse-title {
  color: var(--gold);
  font-weight: 600;
}

/* DaisyUI Steps customization for crusade timeline */
body .steps .step::before {
  background-color: var(--gold-20);
}

body .steps .step-primary::before {
  background-color: var(--gold);
}

body .steps .step::after {
  background-color: var(--gold-30);
  color: var(--gold);
}

body .steps .step-primary::after {
  background-color: var(--gold);
  color: var(--ink);
}

body .steps .step {
  color: var(--text-void);
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

body .steps .step-primary {
  color: var(--gold);
}

/* DaisyUI Progress customization */
body .progress {
  background-color: var(--steam-10);
  border-radius: 3px;
}

/* DaisyUI Modal customization */
body .modal-box {
  border-radius: 4px;
}

/* DaisyUI 5 Button enhancements */
body .btn {
  transition: all 0.2s ease;
}

body .btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--ink-25);
}

body .btn:active:not(:disabled) {
  transform: translateY(0);
}

body .btn-success {
  background: var(--sacred-green);
  border-color: var(--sacred-green);
}

body .btn-success:hover {
  background: var(--sacred-green-light);
  border-color: var(--sacred-green-light);
}

body .btn-error {
  background: var(--blood);
  border-color: var(--blood);
}

body .btn-error:hover {
  background: var(--blood-glow);
  border-color: var(--blood-glow);
}

/* ---- Themed outline button variants ---- */
/* Gold-themed outline button (replaces repeated btn-outline + border/text vars) */
.btn-holy {
  border-color: var(--gold);
  color: var(--gold);
}
.btn-holy:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
/* Blood-themed outline button */
.btn-blood {
  border-color: var(--blood);
  color: var(--blood);
}
.btn-blood:hover {
  background: var(--blood);
  border-color: var(--blood);
  color: var(--parchment);
}

/* ---- Collapse/Accordion title normalization ---- */
/* DaisyUI collapse-title with thematic styling */
.collapse-title.plague-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--blood);
  letter-spacing: 0.05em;
}

/* Plague collapse container */
.plague-collapse {
  background: linear-gradient(to right, var(--blood-06), var(--gold-08));
  border-left: 3px solid var(--gold);
  margin-bottom: 1rem;
}

/* ---- Icon sizing utility classes ---- */
.icon-xs { width: 12px; height: 12px; display: inline; vertical-align: middle; }
.icon-sm { width: 14px; height: 14px; display: inline; vertical-align: middle; }
.icon-md { width: 16px; height: 16px; display: inline; vertical-align: middle; }
.icon-lg { width: 18px; height: 18px; display: inline; vertical-align: middle; }
.icon-xl { width: 20px; height: 20px; display: inline; vertical-align: middle; }
.icon-2xl { width: 28px; height: 28px; display: inline; vertical-align: middle; }
.icon-3xl { width: 32px; height: 32px; display: inline; vertical-align: middle; }
.icon-4xl { width: 40px; height: 40px; display: inline; vertical-align: middle; }
.icon-hero { width: 48px; height: 48px; display: inline; vertical-align: middle; }
.icon-5xl { width: 64px; height: 64px; display: inline; vertical-align: middle; }

/* ============ THEME COLOR UTILITY CLASSES ============ */
/* Replace arbitrary Tailwind values like text-[var(--gold)] */

.text-gold { color: var(--gold); }
.text-blood { color: var(--blood); }
.text-blood-glow { color: var(--blood-glow); }
.text-faded { color: var(--faded); }
.text-muted { color: var(--muted); }
.text-ink { color: var(--ink); }
.text-docker { color: var(--docker-blue); }
.text-k8s { color: var(--k8s-purple); }
.text-nodered { color: var(--node-red); }
.text-sacred { color: var(--sacred-green); }
.text-bun { color: var(--bun-orange); }

.bg-ink { background-color: var(--ink); }
.bg-ink-deep { background-color: var(--ink-deep); }
.bg-parchment { background-color: var(--parchment); }

.border-gold { border-color: var(--gold); }
.border-blood-glow { border-color: var(--blood-glow); }
.border-gold-faint { border-color: var(--gold-30); }

.font-cinzel { font-family: var(--font-heading); }
.font-cinzel-decorative { font-family: var(--font-heading-decorative); }
.font-mono { font-family: var(--font-mono); }
.font-garamond { font-family: var(--font-scripture); }

.tracking-wide-gold { letter-spacing: 0.15em; }
.tracking-subtle { letter-spacing: 0.1em; }

.text-2xs { font-size: 0.6rem; line-height: 0.85rem; }
.text-3xs { font-size: 0.5rem; line-height: 0.7rem; }

.glow-gold { text-shadow: 0 0 8px var(--gold-50); }
.glow-blood { text-shadow: 0 0 40px rgba(204,34,34,0.5); }
.drop-glow-blood { filter: drop-shadow(0 0 30px rgba(204,34,34,0.6)); }

/* Seal badge component */
.seal-badge {
  opacity: 0.3;
  text-align: center;
  padding: 0.5rem;
  border: 1px solid var(--gold-20);
  border-radius: 4px;
  min-width: 80px;
  transition: opacity 0.3s ease;
}
.seal-badge.unlocked { opacity: 1; }
.seal-badge-label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  margin-top: 0.25rem;
}

/* Boss intro styling */
.boss-intro-name {
  font-family: var(--font-heading-decorative);
  text-shadow: 0 0 40px rgba(204,34,34,0.5);
}
.boss-intro-icon {
  filter: drop-shadow(0 0 30px rgba(204,34,34,0.6));
}

/* QTE styling */
.qte-overlay {
  z-index: var(--z-effect);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}
.qte-title {
  text-shadow: 0 0 20px rgba(255,165,0,0.8);
}
.qte-bar {
  max-width: 600px;
  width: 100%;
  box-shadow: 0 0 30px rgba(255,165,0,0.4);
}
.qte-zone {
  width: 15%;
  left: 50%;
  opacity: 0.6;
  box-shadow: 0 0 20px var(--xp-green-bright);
}
.qte-indicator {
  transition: none;
  box-shadow: 0 0 15px var(--parchment);
}
.qte-feedback {
  text-shadow: 0 2px 4px black;
}

/* Character select heading */
.char-select-heading {
  font-family: var(--font-heading);
  color: var(--gold);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

/* Modal backdrop animation */
.modal::backdrop {
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
}

.modal[open] .modal-box {
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============ WCAG 2.1 AA — FOCUS MANAGEMENT ============ */
/* "Judge not a component by its color, but by the outline of its focus ring" */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.bao-navbar a:focus-visible,
.bao-navbar button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 0.25rem;
  box-shadow: 0 0 0 4px var(--gold-20);
}

#drawerMenu a:focus-visible,
#drawerMenu button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  background: var(--gold-12);
}

.bao-dock button:focus-visible,
.bao-dock a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 0.5rem;
}

.faith-bar-container:focus-within,
.xp-bar-container:focus-within {
  outline: 1px solid var(--gold-30);
  outline-offset: 2px;
}

#volumeSlider:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Comprehensive Focus-Visible for All Interactive Elements ──
   Every clickable element gets a visible focus ring for keyboard
   navigation. Parchment-context elements use a darker ring color.
   ──────────────────────────────────────────────────────────── */
.mode-btn:focus-visible,
.char-option:focus-visible,
.dramatis-card:focus-visible,
.inv-item:focus-visible,
.verse.interactive:focus-visible,
.commandment-item:focus-visible,
.oath-btn:focus-visible,
.amen-response:focus-visible,
.proverb-item:focus-visible,
.psalm-line:focus-visible,
.party-member-card:focus-visible,
.skill-node-available:focus-visible,
.equip-slot:focus-visible,
.craft-recipe:focus-visible,
.skin-card:focus-visible,
.ach-tier-card:focus-visible,
.shop-buy-btn:focus-visible,
.yaml-btn:focus-visible,
.sort-element:focus-visible,
.toc-list a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--gold-20);
  border-radius: 0.25rem;
}

/* Parchment-context focus rings use darker gold for contrast */
.scripture-wrapper .verse.interactive:focus-visible,
.scripture-wrapper .commandment-item:focus-visible,
.scripture-wrapper .oath-btn:focus-visible,
.scripture-wrapper .amen-response:focus-visible,
.scripture-wrapper .proverb-item:focus-visible,
.scripture-wrapper .psalm-line:focus-visible,
.scripture-wrapper .toc-list a:focus-visible {
  outline-color: var(--text-psalm);
  box-shadow: 0 0 0 4px rgba(74,56,24,0.25);
}

/* ── Active (Press) States ──────────────────────────────────── */
.mode-btn:active:not(:disabled),
.char-option:active,
.shop-buy-btn:active:not(:disabled),
.oath-btn:active,
.amen-response:active,
.party-member-card:active,
.skill-node-available:active,
.yaml-btn:active,
.sort-element:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* ── Touch Target Minimum Size ─────────────────────────────── */
.oath-btn,
.amen-response,
.yaml-btn,
.sort-element,
.shop-buy-btn {
  min-height: 44px;
  min-width: 44px;
}

/* ============ ANIME.JS BATTLE EFFECTS ============ */

/* Floating damage numbers */
.damage-number {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blood-glow);
  text-shadow: 0 0 10px rgba(204,34,34,0.8), 2px 2px 0 #000;
  pointer-events: none;
  z-index: var(--z-dock);
}

.damage-number.crit {
  font-size: 1.6rem;
  color: var(--gold-bright);
  text-shadow: 0 0 20px rgba(255,215,0,0.8), 2px 2px 0 #000;
}

.damage-number.heal {
  font-size: 1.1rem;
  color: var(--sacred-green);
  text-shadow: 0 0 10px rgba(45,138,78,0.6), 2px 2px 0 #000;
}

/* Critical hit screen flash */
.crit-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, rgba(255,215,0,0) 70%);
  pointer-events: none;
  z-index: var(--z-effect);
}

/* ============ YAML PUZZLE MINI-GAME ============ */

.yaml-line {
  border-radius: 3px;
  transition: background 0.3s;
}

.yaml-line:hover {
  background: var(--gold-10);
}

.yaml-line.yaml-correct {
  background: rgba(45,138,78,0.2);
  border-left: 3px solid var(--sacred-green);
}

.yaml-line.yaml-wrong {
  background: rgba(204,34,34,0.2);
  border-left: 3px solid var(--blood-glow);
}

.yaml-btn {
  width: 24px;
  height: 24px;
  background: var(--gold-20);
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yaml-btn:hover {
  background: var(--gold-40);
  transform: scale(1.1);
}

.yaml-btn:active {
  transform: scale(0.95);
}

.yaml-indent {
  display: inline-block;
  transition: width 0.2s ease;
  background: linear-gradient(90deg, var(--gold-05) 0%, transparent 100%);
}

.yaml-text {
  color: var(--text-code-light);
}

.yaml-key {
  color: var(--gold);
}

#yamlPuzzleContainer {
  max-height: 350px;
  overflow-y: auto;
}

#yamlPuzzleContainer::-webkit-scrollbar {
  width: 6px;
}

#yamlPuzzleContainer::-webkit-scrollbar-track {
  background: var(--gold-10);
}

#yamlPuzzleContainer::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 3px;
}

/* ============ FOOTNOTES ============ */
.footnote-ref {
  color: var(--blood);
  font-size: 0.7rem;
  vertical-align: super;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  transition: color 0.2s;
}

.footnote-ref:hover { color: var(--bun-orange); }

.footnote-popup {
  display: none;
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--gold-30);
  border-radius: 4px;
  max-width: 400px;
  z-index: var(--z-modal);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  line-height: 1.5;
}

.footnote-popup.show { display: block; }

/* ============ COLOPHON ============ */
.colophon {
  background: var(--ink);
  color: var(--muted);
  text-align: center;
  padding: 4rem 2rem;
  font-size: 0.9rem;
}

.colophon .seal {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 1.5rem;
}

.colophon p {
  max-width: 550px;
  margin: 0 auto 0.5rem;
  font-style: italic;
  line-height: 1.7;
}

.colophon .amen-btn {
  margin-top: 2rem;
  font-family: var(--font-heading-decorative);
  font-size: 1rem;
  color: var(--gold);
  background: none;
  border: 2px solid var(--gold);
  padding: 0.8rem 3rem;
  cursor: pointer;
  letter-spacing: 0.2em;
  transition: all 0.4s;
}

.colophon .amen-btn:hover {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 40px var(--gold-40);
}

/* ============ STAGE GATING ============ */
.section-locked {
  display: none !important;
}
.section-locked-placeholder {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--subtle);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px dashed var(--gold-15);
  border-radius: 0.5rem;
  margin: 2rem auto;
  max-width: 500px;
}
.section-locked-placeholder .lock-icon {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--muted);
}

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ TOAST (DaisyUI native) ============ */
/* Toast container + alert children created by enhancements.js showToast().
   Uses native DaisyUI .toast positioning + .alert variants.
   Only animation overrides live here. */
#bao-toast-container {
  z-index: var(--z-toast);
  pointer-events: none;
  gap: 0.5rem;
  padding-top: 4.5rem; /* clear fixed navbar */
}
#bao-toast-container .alert {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  max-width: 320px;
  pointer-events: auto;
}

/* ============ ACHIEVEMENT POPUP ============ */
/* "🏆 Achievement Unlocked: Read the CSS Comments" */
.achievement {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-deep) 100%);
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 2rem 3rem;
  border-radius: 6px;
  z-index: var(--z-toast);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.achievement.show {
  transform: translate(-50%, -50%) scale(1);
}

.achievement .ach-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  min-height: 40px;
}

.achievement .ach-title {
  font-family: var(--font-heading-decorative);
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}

.achievement .ach-desc {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}

/* ============ THEME VARIANTS (Suggestion 59) ============ */
/* "And the Lord said: Let there be variety, and it was themeable" — Genesis of UX 2:4 */

/* ── Holy Light Theme ─────────────────────────────────────────
   Light mode: parchment whites, warm golds, legible dark text.
   ──────────────────────────────────────────────────────────── */
body[data-theme="holy-light"] {
  --ink: #f8f4e8;
  --parchment: #ffffff;
  --dark-parchment: #f0ead6;
  /* DaisyUI semantic overrides */
  --color-primary: #b8860b;
  --color-primary-content: #ffffff;
  --color-secondary: #8b6508;
  --color-secondary-content: #ffffff;
  --color-accent: #d4a843;
  --color-accent-content: #1a1207;
  --color-base-100: #ffffff;
  --color-base-200: #f8f4e8;
  --color-base-300: #f0ead6;
  --color-base-content: #1a1a1a;
  --color-neutral: #4a4a4a;
  --color-neutral-content: #ffffff;
  --color-info: #3b82f6;
  --color-info-content: #ffffff;
  --color-success: #22c55e;
  --color-success-content: #ffffff;
  --color-warning: #f59e0b;
  --color-warning-content: #1a1207;
  --color-error: #8b1a1a;
  --color-error-content: #ffffff;
}
body[data-theme="holy-light"] .scripture-wrapper { background: linear-gradient(180deg, #ffffff 0%, #faf6ee 100%); }
body[data-theme="holy-light"] .scripture { color: #1a1a1a; }
body[data-theme="holy-light"] .cover { background: linear-gradient(180deg, #f8f4e8 0%, #fff8e1 50%, #f8f4e8 100%); }
body[data-theme="holy-light"] .nav-scroll { background: rgba(248,244,232,0.95); }
body[data-theme="holy-light"] .faith-bar-container { background: linear-gradient(0deg, rgba(248,244,232,0.97) 0%, rgba(248,244,232,0.85) 80%, transparent 100%); }
body[data-theme="holy-light"] .xp-bar-container { background: rgba(248,244,232,0.90); }
body[data-theme="holy-light"] .toc-section { background: #fff8e1; }

/* ── Blood Moon Theme ──────────────────────────────────────────
   Crimson night: reds replace golds, deep darkness reigns.
   ──────────────────────────────────────────────────────────── */
body[data-theme="blood-moon"] {
  --gold: #ff4444;
  --gold-bright: #ff6666;
  --parchment: var(--ink-blood);
  --blood: #ff0000;
  --blood-glow: #ff3333;
  /* DaisyUI semantic overrides */
  --color-primary: #ff4444;
  --color-primary-content: #0d0000;
  --color-secondary: #ff6666;
  --color-secondary-content: #0d0000;
  --color-accent: #ff0000;
  --color-accent-content: #ffffff;
  --color-base-100: #1a0505;
  --color-base-200: #120303;
  --color-base-300: #0d0000;
  --color-base-content: #cc8888;
  --color-neutral: #2a0a0a;
  --color-neutral-content: #ff9999;
  --color-info: #ff6b6b;
  --color-info-content: #0d0000;
  --color-success: #ff4444;
  --color-success-content: #0d0000;
  --color-warning: #ff9900;
  --color-warning-content: #0d0000;
  --color-error: #ff0000;
  --color-error-content: #ffffff;
}
body[data-theme="blood-moon"] .scripture-wrapper { background: linear-gradient(180deg, var(--ink-blood) 0%, #0d0000 100%); }
body[data-theme="blood-moon"] .scripture { color: #cc8888; }
body[data-theme="blood-moon"] .cover { background: linear-gradient(180deg, #0d0000 0%, var(--ink-blood) 50%, #0d0000 100%); }
body[data-theme="blood-moon"] .faith-fill { background: linear-gradient(90deg, #ff0000, #ff4444, #ff6666); }

/* ── Terminal Theme ────────────────────────────────────────────
   Matrix green-on-black: monospace everything, CRT vibes.
   "Wake up, Neo..." — The One True Error Message
   ──────────────────────────────────────────────────────────── */
body[data-theme="terminal"] {
  --gold: #00ff00;
  --gold-bright: #33ff33;
  --parchment: #0a0a0a;
  --blood: #ff0000;
  --ink: #0a0a0a;
  --ink-deep: #000000;
  /* DaisyUI semantic overrides */
  --color-primary: #00ff00;
  --color-primary-content: #000000;
  --color-secondary: #33ff33;
  --color-secondary-content: #000000;
  --color-accent: #ffd700;
  --color-accent-content: #000000;
  --color-base-100: #0a0a0a;
  --color-base-200: #050505;
  --color-base-300: #000000;
  --color-base-content: #00ff00;
  --color-neutral: #1a1a1a;
  --color-neutral-content: #00ff00;
  --color-info: #00ccff;
  --color-info-content: #000000;
  --color-success: #33ff33;
  --color-success-content: #000000;
  --color-warning: #ffd700;
  --color-warning-content: #000000;
  --color-error: #ff4444;
  --color-error-content: #000000;
}
body[data-theme="terminal"] .scripture-wrapper { background: #0a0a0a; }
body[data-theme="terminal"] .scripture { color: #00ff00; font-family: var(--font-mono); font-size: 0.85rem; }
body[data-theme="terminal"] .cover { background: #000000; }
body[data-theme="terminal"] .nav-scroll { background: rgba(0,10,0,0.95); }
body[data-theme="terminal"] .faith-fill { background: linear-gradient(90deg, #004400, #00ff00, #33ff33); }
body[data-theme="terminal"] .book-title { font-family: var(--font-mono); }
body[data-theme="terminal"] .chapter-num { font-family: var(--font-mono); }
body[data-theme="terminal"] .toc-section { background: #0a0a0a; }

/* ============ RESPONSIVE ============ */
/* "For wide is the viewport and narrow is the breakpoint that leads to mobile" — Matthew 7:13(px) */
@media (max-width: 600px) {
  .scripture { padding: 2rem 1.2rem; }
  .scripture::before { left: 15px; }
  body { font-size: 17px; }
  .dramatis { grid-template-columns: 1fr 1fr; }
  .combatants { gap: 0.8rem; }
  .combatant { min-width: 80px; }
  .combatant .icon .lucide-icon { width: 28px; height: 28px; }
  .attack-buttons { gap: 0.5rem; }
  .attack-btn { padding: 0.6rem 1rem; font-size: 0.7rem; min-height: 44px; }
  .nav-scroll a { font-size: 0.6rem; padding: 0.3rem 0.5rem; min-height: 44px; display: inline-flex; align-items: center; }
  .char-options { flex-direction: column; align-items: center; }
  .char-option { min-width: unset; width: 100%; }
  .boss-intro .boss-name { font-size: 1.8rem; }
  .mode-select { flex-direction: column; align-items: center; }
  .mode-btn { min-height: 44px; width: 100%; }

  /* Dock: maintain 44px touch targets on mobile */
  .bao-dock .dock-label { font-size: 0.55rem; max-width: 56px; letter-spacing: 0; }
  .bao-dock button,
  .bao-dock summary,
  .bao-dock a { padding: 0.35rem 0.3rem; gap: 2px; min-height: 44px; }
  .book-title { margin-top: 2rem; }
  .section-theme { padding: 2rem 0; }
  .chapter-num { font-size: 0.9rem; margin-top: 2rem; }
}

/* ============ LUCIDE ICON CLASSES ============ */
.lucide-icon {
  display: inline-block;
  vertical-align: middle;
  stroke-width: 2;
}

.icon-holy { color: var(--gold); }
.icon-blood { color: var(--blood-glow); }
.icon-bun { color: var(--bun-orange); }
.icon-steam { color: var(--steam-dim); }
.icon-sacred { color: var(--sacred-green); }



/* ============ HERO DAMAGE FLASH ============ */
.hero-damage-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(204,34,34,0.3) 0%, rgba(204,34,34,0) 70%);
  pointer-events: none;
  z-index: var(--z-effect);
  animation: hero-flash-fade 0.4s ease-out forwards;
}

@keyframes hero-flash-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============ TANGLED BUTTON (Wire Tangle mechanic) ============ */
.attack-btn.tangled {
  opacity: 0.2;
  pointer-events: none;
  position: relative;
}

.attack-btn.tangled::after {
  content: '\1F6AB';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
}

/* ============ UPGRADE BADGES ============ */
.upgrade-badges {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  margin-top: 0.4rem;
  flex-wrap: wrap;
  min-height: 20px;
}

.upgrade-badges .badge {
  font-size: 0.5rem;
  padding: 0.15rem 0.4rem;
}

/* ============ ENDLESS MODE BUTTON ============ */
.mode-btn.endless {
  border-color: var(--bun-orange);
  color: var(--bun-orange);
}

.mode-btn.endless:hover {
  background: var(--bun-orange-15);
  box-shadow: 0 0 20px var(--bun-orange-30);
}

/* ============ DUNGEON CRAWL MODE ============ */
/* "Yea, though I walk through the valley of the shadow of the dungeon..." */
.mode-btn.dungeon {
  border-color: var(--dungeon-blue);
  color: var(--dungeon-blue);
}
.mode-btn.dungeon:hover {
  background: var(--dungeon-blue-15);
  box-shadow: 0 0 20px var(--dungeon-blue-30);
}

/* Crusade Canvas */
.crusade-canvas {
  display: block;
  margin: 0 auto;
  max-width: 640px;
  width: 100%;
  border: 1px solid var(--gold-30);
  border-radius: 0.5rem;
  background: var(--ink);
  image-rendering: pixelated;
  cursor: crosshair;
}
.crusade-canvas:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Crusade HUD Bar */
.crusade-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 640px;
  margin: 0 auto 0.5rem;
  padding: 0.4rem 0.8rem;
  background: var(--ink-90);
  border: 1px solid var(--gold-20);
  border-radius: 0.5rem 0.5rem 0 0;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--gold);
}
.crusade-hud-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Mobile Touch D-Pad */
.crusade-dpad {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0.5rem auto;
  user-select: none;
  -webkit-user-select: none;
}
.dpad-row {
  display: flex;
  gap: 2px;
}
.dpad-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-90);
  border: 1px solid var(--gold-30);
  border-radius: 0.4rem;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  touch-action: manipulation;
}
.dpad-btn:active {
  background: var(--gold-25);
  transform: scale(0.92);
}

@media (max-width: 1023px) {
  .crusade-dpad { display: flex; }
}

/* ============ AMEN RAIN ICON ============ */
.amen-rain-icon {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-loading);
  color: var(--gold);
  animation: steam-rise 3s linear forwards;
}

/* ============ GAME OVER BANNER ============ */
/* "Dust thou art, and unto dust (and a retry button) shalt thou return" */
#gameOverBanner {
  animation: defeat-pulse 1s ease infinite alternate;
}

#gameOverBanner.show { display: block; }

@keyframes defeat-pulse {
  0% { text-shadow: 0 0 20px rgba(204,34,34,0.3); }
  100% { text-shadow: 0 0 40px rgba(204,34,34,0.6); }
}

/* ============ INVENTORY ITEM ICONS ============ */
.inv-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.inv-item .lucide-icon {
  width: 18px;
  height: 18px;
}

/* ============ STEAM BREAK ICON ADJUSTMENT ============ */
.steam-break .lucide-icon {
  width: 20px;
  height: 20px;
  display: inline;
  vertical-align: middle;
}

/* ============ FAITH BAR ICON ALIGNMENT ============ */
.smite-counter .lucide-icon,
.faith-label .lucide-icon {
  display: inline;
  vertical-align: middle;
}

/* ============ TOAST ICON ALIGNMENT ============ */
#bao-toast-container .lucide-icon {
  display: inline;
  vertical-align: middle;
}

/* ============ NAV ICON ALIGNMENT ============ */
.nav-scroll .lucide-icon {
  display: inline;
  vertical-align: middle;
}

.sound-toggle .lucide-icon {
  display: inline;
  vertical-align: middle;
}

/* ============ COLOPHON SEAL ICONS ============ */
.colophon .seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* ============ READING PROGRESS BAR ============ */
#readingProgress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0,0,0,0.15);
  z-index: calc(var(--z-navbar) + 1);
  pointer-events: none;
}

.reading-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blood), var(--gold), var(--bun-orange));
  transition: width 0.1s linear;
}

/* ============ CHAPTER CONTEXT ============ */
.chapter-context {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.chapter-context.visible { opacity: 0.8; }

/* ============ SECTION PROGRESS COUNTERS ============ */
.section-progress {
  text-align: center;
  margin: 1rem 0 2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  opacity: 0.7;
  letter-spacing: 0.1em;
}

.section-progress .progress-count {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--gold-20);
  border-radius: 3px;
  background: var(--gold-04);
  transition: all 0.3s ease;
}

.section-progress .progress-count.complete {
  border-color: var(--sacred-green);
  color: var(--sacred-green);
  background: rgba(45,138,78,0.08);
}

.section-progress .progress-count .lucide-icon {
  display: inline;
  vertical-align: middle;
  width: 12px;
  height: 12px;
}

/* ============ INTERACTIVE VERSE HOVER ============ */
.verse {
  padding-left: 0.5rem;
  border-left: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.verse:hover {
  border-left-color: var(--gold-25);
}

/* ============ GAMIFICATION: CHARACTER COLLECTION ============ */
.dramatis-card.met {
  border-color: var(--gold-40);
}

.dramatis-card.met::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sacred-green);
  box-shadow: 0 0 6px rgba(45,138,78,0.5);
}

/* ============ GAMIFICATION: COMMANDMENT OATHS ============ */
.commandment-item {
  position: relative;
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
  background: var(--gold-04);
  border-left: 3px solid var(--gold-20);
  cursor: pointer;
  transition: all 0.4s ease;
}

.commandment-item:hover {
  background: var(--gold-08);
  border-left-color: var(--gold);
}

.commandment-item.accepted {
  border-left-color: var(--sacred-green);
  background: rgba(45,138,78,0.04);
}

.commandment-item .oath-btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  margin-top: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s;
  cursor: pointer;
}

.commandment-item .oath-btn:hover {
  background: var(--gold-15);
}

.commandment-item.accepted .oath-btn {
  display: none;
}

.commandment-item .oath-check {
  display: none;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  color: var(--sacred-green);
  margin-top: 0.5rem;
  letter-spacing: 0.1em;
}

.commandment-item.accepted .oath-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ============ GAMIFICATION: GOSPEL AMEN BUTTONS ============ */
.beatitude-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  padding: 0.3rem 0;
  transition: all 0.3s;
}

.beatitude-line .amen-response {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  color: var(--gold);
  border: 1px solid var(--gold-30);
  background: none;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: all 0.3s;
  letter-spacing: 0.1em;
}

.beatitude-line .amen-response:hover {
  background: var(--gold-15);
  border-color: var(--gold);
}

.beatitude-line.amened {
  background: var(--gold-06);
  border-radius: 3px;
}

.beatitude-line.amened .amen-response {
  background: rgba(45,138,78,0.15);
  border-color: var(--sacred-green);
  color: var(--sacred-green);
  pointer-events: none;
}

/* ============ GAMIFICATION: PROVERB COLLECTION ============ */
.proverb-item {
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.proverb-item:hover {
  border-color: var(--gold);
}

.proverb-item.collected {
  border-left-color: var(--gold);
  background: linear-gradient(135deg, var(--gold-06) 0%, var(--gold-04) 100%);
}

.proverb-item .collect-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s;
  color: var(--gold);
}

.proverb-item:hover .collect-icon { color: var(--muted); }
.proverb-item.collected .collect-icon { opacity: 1; color: var(--sacred-green); }

/* Hidden proverb: defined once in the HIDDEN PROVERB section below */

/* ============ GAMIFICATION: PSALM RECITATION ============ */
.psalm-line {
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.15rem 0.3rem;
  margin: 0 -0.3rem;
  border-radius: 2px;
}

.psalm-line:hover:not(.recited) {
  background: var(--gold-06);
}

.psalm-line.recited {
  color: var(--blood);
  font-weight: 600;
  background: var(--gold-08);
}

.psalm-line.current {
  animation: psalm-glow 0.6s ease;
}

@keyframes psalm-glow {
  0% { background: var(--gold-20); }
  100% { background: var(--gold-08); }
}

/* ============ GAMIFICATION: SORTING MINI-GAME ============ */
.sort-container {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-end;
  margin: 2rem 0;
  min-height: 120px;
}

.sort-element {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: var(--gold-15);
  border: 2px solid var(--gold-30);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.sort-element:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.sort-element.selected {
  border-color: var(--bun-orange);
  background: rgba(249,115,22,0.2);
  box-shadow: 0 0 15px rgba(249,115,22,0.3);
}

.sort-element.sorted {
  border-color: var(--sacred-green);
  background: rgba(45,138,78,0.15);
  color: var(--sacred-green);
}

.sort-controls {
  text-align: center;
  margin-top: 1rem;
}

.sort-info {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* ============ GAMIFICATION: ON-CALL SIMULATOR ============ */
.oncall-container {
  max-width: 500px;
  margin: 2rem auto;
  background: var(--ink-90);
  border: 1px solid var(--gold-20);
  border-radius: 4px;
  padding: 1.5rem;
  font-family: var(--font-mono);
}

.alert-card {
  background: rgba(204,34,34,0.1);
  border: 1px solid rgba(204,34,34,0.3);
  border-radius: 3px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.alert-card .alert-type {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--blood-glow);
  margin-bottom: 0.5rem;
}

.alert-card .alert-message {
  font-size: 0.8rem;
  color: var(--text-code-light);
  margin-bottom: 0.8rem;
}

.alert-card .alert-timer {
  font-size: 0.65rem;
  color: var(--blood-glow);
}

.alert-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.alert-action-btn {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--gold-30);
  background: none;
  color: var(--gold);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.alert-action-btn:hover {
  background: var(--gold-15);
  border-color: var(--gold);
}

.alert-action-btn.correct {
  border-color: var(--sacred-green);
  color: var(--sacred-green);
  background: rgba(45,138,78,0.15);
}

.alert-action-btn.wrong {
  border-color: var(--blood-glow);
  color: var(--blood-glow);
  background: rgba(204,34,34,0.15);
}

.oncall-score {
  text-align: center;
  font-size: 0.75rem;
  color: var(--gold);
  margin-top: 1rem;
}

/* ============ GAMIFICATION: CODE ARCHAEOLOGY ============ */
.archaeology-container {
  max-width: 500px;
  margin: 2rem auto;
  position: relative;
}

.archaeology-layer {
  background: var(--ink-85);
  border: 1px solid var(--gold-15);
  border-radius: 3px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--subtle);
  transition: all 0.5s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.archaeology-layer:hover:not(.excavated) {
  border-color: var(--gold-30);
  background: var(--ink-95);
}

.archaeology-layer.excavated,
.dig-layer.excavated {
  border-color: var(--gold);
  color: var(--text-code-light);
  background: var(--gold-06);
}

.archaeology-layer.locked,
.dig-layer.locked {
  opacity: 0.4;
  cursor: default;
}

.dig-btn {
  display: block;
  margin: 1rem auto;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--gold);
  border: 1px solid var(--gold);
  background: none;
  padding: 0.5rem 1.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.1em;
}

.dig-btn:hover {
  background: var(--gold-15);
}

.dig-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============ GAMIFICATION: FRAMEWORK TIMELINE ============ */
.fw-timeline {
  margin: 2rem 0;
}

.fw-timeline-event {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease;
}

.fw-timeline-event.visible {
  opacity: 1;
  transform: translateX(0);
}

.fw-timeline-event .event-year {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gold);
}

.fw-timeline-event .event-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
}

.fw-timeline-event .event-status {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
}

.event-status.born { background: rgba(45,138,78,0.15); color: var(--sacred-green); }
.event-status.legacy { background: rgba(139,26,26,0.15); color: var(--blood-glow); }
.event-status.ascends { background: rgba(249,115,22,0.15); color: var(--bun-orange); }

.advance-timeline-btn {
  display: block;
  margin: 1rem auto;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--gold);
  border: 1px solid var(--gold);
  background: none;
  padding: 0.5rem 1.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.1em;
}

.advance-timeline-btn:hover {
  background: var(--gold-15);
}

/* ============ GAMIFICATION: SPRINT ESTIMATION ============ */
.estimation-container {
  max-width: 500px;
  margin: 2rem auto;
}

.estimation-task {
  background: var(--gold-04);
  border: 1px solid var(--gold-15);
  border-radius: 3px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.estimation-task .task-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-code-light);
  margin-bottom: 0.8rem;
}

.estimation-points {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.point-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-30);
  background: none;
  color: var(--gold);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.point-btn:hover {
  background: var(--gold-15);
  border-color: var(--gold);
  transform: scale(1.05);
}

.point-btn.chosen { border-color: var(--bun-orange); color: var(--bun-orange); }
.point-btn.correct { border-color: var(--sacred-green); color: var(--sacred-green); background: rgba(45,138,78,0.1); }
.point-btn.wrong { border-color: var(--blood-glow); color: var(--blood-glow); background: rgba(204,34,34,0.1); }

.estimation-result {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  margin-top: 0.5rem;
  color: var(--gold);
}

/* ============ GAMIFICATION: APOCRYPHA SECRETS ============ */
.apocrypha-secrets {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(88, 28, 135, 0.04);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.secret-verse {
  position: relative;
  filter: blur(4px);
  user-select: none;
  transition: filter 0.8s ease;
  background: rgba(139, 26, 26, 0.04);
  border-left: 3px solid rgba(88, 28, 135, 0.3);
  padding: 1rem;
  border-radius: 0 6px 6px 0;
}

.secret-text {
  font-family: var(--font-scripture);
  font-style: italic;
  color: var(--text-dark);
}

.secret-verse.unlocked {
  filter: none;
  user-select: auto;
}

.secret-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  background: var(--ink-90);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--gold);
  border-radius: 3px;
  white-space: nowrap;
  z-index: 2;
  transition: opacity 0.8s ease;
}

.secret-verse.unlocked .secret-lock {
  opacity: 0;
  pointer-events: none;
}

/* ============ GAMIFICATION: EXODUS JOURNEY ============ */
.exodus-path {
  margin: 2rem 0;
}

.exodus-path .steps .step {
  cursor: pointer;
  transition: all 0.3s;
}

body .exodus-path .steps .step:hover:not(.step-primary) {
  color: var(--gold);
}

/* ============ GAMIFICATION: GENESIS CREATION ============ */
[id^="genesis-verse-"]:not(#genesis-verse-0) {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition: opacity 0.6s ease, max-height 0.6s ease, margin 0.3s ease, padding 0.3s ease;
}
[id^="genesis-verse-"].revealed {
  opacity: 1;
  max-height: 600px;
  overflow: visible;
  margin-bottom: 1em;
}
.creation-prompt {
  text-align: center;
  margin: 1rem 0;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--gold);
  cursor: pointer;
  padding: 0.5rem;
  border: 1px dashed var(--gold-30);
  border-radius: 3px;
  transition: all 0.3s;
  letter-spacing: 0.1em;
}

.creation-prompt:hover {
  background: var(--gold-08);
  border-color: var(--gold);
}

.creation-prompt.complete {
  border-style: solid;
  border-color: var(--sacred-green);
  color: var(--sacred-green);
  cursor: default;
}

/* Genesis verses that start hidden */
.genesis-verse {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.8s ease;
}

.genesis-verse.revealed {
  opacity: 1;
  max-height: 500px;
}

/* ============ COLOPHON COMPLETION SUMMARY ============ */
.completion-summary {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.completion-stat {
  text-align: center;
  padding: 1rem;
  border: 1px solid var(--gold-20);
  border-radius: 3px;
  background: var(--gold-04);
}

.completion-stat .stat-value {
  font-family: var(--font-heading-decorative);
  font-size: 1.5rem;
  color: var(--gold);
  display: block;
}

.completion-stat .stat-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============ NEXT/PREV CHAPTER NAV ============ */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gold-10);
}

.chapter-nav a {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.3s;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.chapter-nav a:hover {
  color: var(--gold);
}

.chapter-nav .lucide-icon {
  width: 14px;
  height: 14px;
  display: inline;
  vertical-align: middle;
}

/* ============ STEAM BREAK SPACING ============ */
.steam-break {
  margin: 3.5rem 0;
}

/* ============ EXODUS JOURNEY ============ */
.exodus-journey {
  justify-content: center;
  margin-bottom: 1rem;
}
.exodus-journey .step {
  cursor: pointer;
  transition: all 0.3s ease;
}
.exodus-journey .step.step-primary {
  color: var(--gold);
}

/* ============ DIG LAYERS ============ */
.dig-layers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dig-layer {
  background: rgba(139, 26, 26, 0.06);
  border-left: 3px solid var(--gold);
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dark);
  transition: all 0.4s ease;
}
.dig-layer code {
  color: var(--blood);
}

/* ============ FRAMEWORK TIMELINE ============ */
.framework-timeline {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}
.fw-event {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  transition: opacity 0.5s ease;
}

body .fw-event.visible {
  opacity: 1;
}

/* ============ ESTIMATION GAME ============ */
.estimation-game {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}
.est-tasks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.est-task {
  background: rgba(139, 26, 26, 0.04);
  border-left: 3px solid var(--gold);
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
}
.est-desc {
  font-family: var(--font-scripture);
  font-style: italic;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}
.est-buttons {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.est-buttons .btn {
  min-width: 2.2rem;
  font-family: var(--font-mono);
}
.est-task.estimated {
  color: var(--muted);
  border-left-color: var(--gold-30);
}
.est-task.correct {
  border-left-color: var(--sacred-green);
  opacity: 1;
}

/* ============ SORT GAME WRAPPER ============ */
.sort-game-container,
.oncall-game-container {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

/* ============ COMPLETION STATS ============ */
.completion-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.completion-stats span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ============ HIDDEN PROVERB ============ */
.hidden-proverb {
  display: none !important;
  border-left-color: var(--gold-50);
  position: relative;
}
.hidden-proverb.revealed {
  display: block !important;
}
.hidden-proverb .badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* ============ LORE CODEX ============ */
.lore-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  margin-bottom: 1rem;
  text-align: center;
  letter-spacing: 0.1em;
}

.lore-category {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--gold);
  margin: 1rem 0 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-20);
  padding-bottom: 0.3rem;
}

.lore-entry {
  padding: 0.7rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--gold-10);
  border-radius: 3px;
  transition: all 0.3s;
}

.lore-entry.unlocked {
  background: var(--gold-04);
  border-color: var(--gold-20);
}

.lore-entry.locked {
  opacity: 0.5;
  background: rgba(139, 26, 26, 0.04);
}

.lore-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--gold);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.lore-text {
  font-family: var(--font-scripture);
  font-size: 0.85rem;
  color: var(--text-lore);
  line-height: 1.6;
  font-style: italic;
}

/* ============ WORLD MAP ============ */
.world-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.map-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 0.5rem;
  border: 1px solid var(--gold-15);
  border-radius: 4px;
  background: var(--ink-60);
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
}

.map-node:hover {
  border-color: var(--gold);
  background: var(--gold-08);
}

.map-node.visited {
  border-color: rgba(249, 115, 22, 0.3);
}

.map-node.completed {
  border-color: rgba(45, 138, 78, 0.4);
  background: rgba(45, 138, 78, 0.06);
}

.map-icon {
  margin-bottom: 0.4rem;
}

.map-name {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--gold);
  text-align: center;
}

.map-subtitle {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--subtle);
  text-align: center;
  margin-top: 0.2rem;
}

.map-badge {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.65rem;
  color: var(--sacred-green);
}

/* ============ CHAPTER EPILOGUES ============ */
.chapter-epilogue {
  text-align: center;
  margin: 1.5rem 0 0;
  padding: 0.7rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--gold);
  border: 1px dashed var(--gold-20);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.4s;
  letter-spacing: 0.08em;
}

.chapter-epilogue:hover {
  background: var(--gold-06);
  border-color: var(--gold);
}

.chapter-epilogue.revealed {
  font-family: var(--font-scripture);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-lore);
  border-style: solid;
  border-color: var(--gold-30);
  cursor: default;
  line-height: 1.7;
  letter-spacing: normal;
}

/* ============ ENDING SCREEN ============ */
.ending-icon {
  margin-bottom: 1rem;
}

.ending-title {
  font-family: var(--font-heading-decorative);
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 0.8rem;
}

.ending-desc {
  font-family: var(--font-scripture);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-lore);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.ending-stats {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gold);
  opacity: 0.7;
  letter-spacing: 0.05em;
}

/* ============ VICTORY STATS GRID (Suggestion 57) ============ */
.victory-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

.victory-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.3rem;
  border: 1px solid var(--gold-20);
  border-radius: 3px;
  background: var(--gold-04);
}

.vs-value {
  font-family: var(--font-heading-decorative);
  font-size: 1rem;
  color: var(--gold);
}

.vs-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}

/* ============ ANIMATED PAGE TRANSITIONS (Suggestion 51) ============ */
/* NOTE: section-theme animation removed — it conflicts with the .reveal
   IntersectionObserver system. Use .reveal for entrance animations. */

/* ============ ENHANCED DAMAGE INDICATORS (Suggestion 55) ============ */
@keyframes dmgFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: 0.9; transform: translateY(-20px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

@keyframes critFloat {
  0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  30% { transform: translateY(-15px) scale(1.5) rotate(-3deg); }
  60% { transform: translateY(-30px) scale(1.3) rotate(3deg); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.7) rotate(0deg); }
}

@keyframes healFloat {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

.dmg-indicator {
  position: absolute;
  font-family: var(--font-heading-decorative);
  font-weight: bold;
  pointer-events: none;
  z-index: var(--z-dock);
  animation: dmgFloat 1s ease-out forwards;
}

.dmg-indicator.crit {
  color: var(--gold-bright);
  font-size: 1.5rem;
  animation: critFloat 1.2s ease-out forwards;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.dmg-indicator.normal {
  color: var(--blood-glow);
  font-size: 1.1rem;
}

.dmg-indicator.heal {
  color: var(--sacred-green);
  font-size: 1.1rem;
  animation: healFloat 1s ease-out forwards;
}

/* ============ SCREEN SHAKE VARIANTS (Suggestion 56) ============ */
@keyframes shakeSmall {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
}

@keyframes shakeMedium {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, 4px); }
  80% { transform: translate(3px, -2px); }
}

@keyframes shakeLarge {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 3px) rotate(-0.5deg); }
  30% { transform: translate(6px, -4px) rotate(0.5deg); }
  50% { transform: translate(-5px, 5px) rotate(-0.3deg); }
  70% { transform: translate(5px, -3px) rotate(0.3deg); }
  90% { transform: translate(-3px, 2px); }
}

.shake-small { animation: shakeSmall 0.3s ease; }
.shake-medium { animation: shakeMedium 0.4s ease; }
.shake-large { animation: shakeLarge 0.5s ease; }

/* ============ GAMIFICATION: CODE REVIEW ============ */
.code-review-game-container {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

.code-review-container {
  max-width: 550px;
  margin: 0 auto;
  text-align: center;
}

.code-review-challenge {
  text-align: left;
}

.code-review-header {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.code-review-code {
  background: var(--ink-90);
  border: 1px solid var(--gold-15);
  border-radius: 4px;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--text-lore);
  overflow-x: auto;
  margin-bottom: 1rem;
}

.code-review-code .code-line {
  display: block;
  padding: 0 0.5rem;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.code-review-code .code-line.bug-highlight {
  background: rgba(204, 34, 34, 0.25);
  border-left: 2px solid var(--blood-glow);
  padding-left: calc(0.5rem - 2px);
}

.code-review-question {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.code-review-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.code-review-opt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--gold-25);
  background: var(--ink-60);
  color: var(--text-lore);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.code-review-opt:hover:not(:disabled) {
  background: var(--gold-10);
  border-color: var(--gold);
  color: var(--gold);
}

.code-review-opt:disabled {
  cursor: default;
  opacity: 0.7;
}

.code-review-opt.correct {
  border-color: var(--sacred-green);
  color: var(--sacred-green);
  background: rgba(45, 138, 78, 0.15);
  opacity: 1;
}

.code-review-opt.wrong {
  border-color: var(--blood-glow);
  color: var(--blood-glow);
  background: rgba(204, 34, 34, 0.15);
  opacity: 1;
}

.code-review-result {
  text-align: center;
  padding: 1.5rem;
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 0.85rem;
}

/* ============ RESPONSIVE: GAMIFICATION ============ */
@media (max-width: 600px) {
  .sort-container { gap: 0.3rem; }
  .sort-element { width: 32px; font-size: 0.75rem; }
  .oncall-container { padding: 1rem; }
  .alert-actions { flex-direction: column; }
  .estimation-points { justify-content: center; }
  .completion-summary { grid-template-columns: 1fr 1fr; }
  .chapter-nav { flex-direction: column; gap: 0.5rem; align-items: center; }
  .section-theme { padding: 2rem 0; }
  .section-theme::before { left: 15px; }
  .code-review-code { font-size: 0.6rem; padding: 0.7rem; }
  .code-review-opt { font-size: 0.6rem; }
}

/* ============ PARTY SYSTEM (Phase 1) ============ */

/* Party roster container below active hero */
.party-roster {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* Individual party member mini-card */
.party-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.5rem;
  background: var(--gold-06);
  border: 1px solid var(--gold-20);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 60px;
  position: relative;
}

.party-member-card:hover:not(:disabled) {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 3px 12px var(--gold-20);
}

.party-member-card:disabled {
  cursor: default;
}

/* Active hero highlight in roster */
.party-member-card.party-active {
  border-color: var(--gold-bright);
  background: var(--gold-15);
  box-shadow: 0 0 15px var(--gold-25);
}

/* Dead hero in roster */
.party-member-card.party-dead {
  opacity: 0.35;
  border-color: rgba(139,26,26,0.3);
  background: var(--blood-08);
}

.party-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.party-name {
  font-family: var(--font-heading);
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  white-space: nowrap;
}

/* Mini HP bar in party roster card */
.party-hp-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.party-hp-fill {
  height: 100%;
  background: var(--sacred-green);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.party-hp-fill.party-hp-low {
  background: var(--blood-glow);
}

/* KO marker overlay */
.party-ko {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--blood-glow);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Party count indicator in char-select */
.party-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

/* Team combo badge row */
.team-combo-badges {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

/* Swap button styling */
.attack-btn.swap {
  color: var(--lint-teal);
  border-color: var(--lint-teal);
}

.attack-btn.swap:hover {
  background: var(--lint-teal-20);
  box-shadow: 0 0 25px var(--lint-teal-40), inset 0 0 15px var(--lint-teal-10);
}

/* Responsive party roster */
@media (max-width: 600px) {
  .party-member-card {
    min-width: 50px;
    padding: 0.2rem 0.3rem;
  }
  .party-name { font-size: 0.45rem; }
}

/* ============ PHASE 2: SKILL TREE ============ */
.skill-branch { border-left: 2px solid var(--gold); padding-left: 0.75rem; }
.skill-node {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0.4rem 0.6rem; border-radius: 0.5rem;
  border: 1px solid var(--gold-20); min-width: 120px;
  transition: all 0.2s;
}
.skill-node-unlocked { background: var(--gold-15); border-color: var(--gold); }
.skill-node-available { background: var(--gold-05); border-color: var(--gold); cursor: pointer; }
.skill-node-available:hover { background: var(--gold-20); transform: scale(1.05); }
.skill-node-locked { opacity: 0.35; }

/* ============ PHASE 2: DAILY CHALLENGES ============ */
.daily-challenge-card {
  padding: 0.6rem; border-radius: 0.5rem; margin-bottom: 0.5rem;
  border: 1px solid var(--gold-15);
}
.daily-ch-done { background: rgba(0,200,100,0.1); border-color: rgba(0,200,100,0.3); }
.daily-ch-active { background: var(--gold-05); }

/* ============ PHASE 2: EQUIPMENT ============ */
.equip-slot { transition: all 0.2s; }
.equip-slot:hover { background: var(--gold-10); }

/* ============ PHASE 2: CRAFTING ============ */
.craft-recipe { transition: all 0.2s; }
.craft-recipe:hover { background: var(--gold-10); }

/* ============ PHASE 2: SKINS ============ */
.skin-card { transition: all 0.2s; }
.skin-card:hover { background: var(--gold-10); }

/* ============ PHASE 2: ASCENSION ============ */
.ascension-perk { transition: all 0.2s; }

/* ============ PHASE 2: ACHIEVEMENT TIERS ============ */
.ach-tier-card { transition: all 0.2s; }
.ach-tier-card:hover { background: var(--gold-10); }

/* Phase 2 .game-toast removed — consolidated into DaisyUI toast system */

/* Minimap removed — superseded by DaisyUI drawer sidebar */

/* ============ BAR GRADIENT UTILITIES ============ */
.faith-fill-gradient {
  background: linear-gradient(to right, var(--blood-glow), var(--gold), var(--gold-bright));
}
.xp-fill-gradient {
  background: linear-gradient(to right, var(--lint-teal), var(--sacred-green));
}
/* Progress bars: width controlled via --width CSS var (no inline styles) */
.progress-fill-dynamic {
  width: var(--width, 0%);
}

/* ============ QTE UTILITIES ============ */
.qte-bar-bg { background: var(--ink-90); }
.qte-zone-bg { background: var(--sacred-green); }
.qte-indicator-bg { background: var(--parchment); }
.qte-hint { color: var(--muted); }

/* Body clearance for fixed bottom dock */
body { padding-bottom: 5rem; padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
.scripture-wrapper { padding-bottom: 5rem; }
.colophon { padding-bottom: 5rem; }

/* Offset main content for fixed navbar + breadcrumbs */
#main-content { padding-top: 0; }
body.nav-visible #main-content { padding-top: var(--nav-offset); }
.on-cover #main-content { padding-top: 0; }

/* Hide breadcrumbs on cover */
.on-cover #baoBreadcrumbs { display: none; }

/* ============ PHASE 7: FLOATING TOOLTIPS ============ */
.floating-tooltip {
  position: absolute; background: var(--ink); border: 1px solid var(--gold);
  color: var(--parchment); padding: 4px 8px; border-radius: 4px;
  font-size: 0.75rem; z-index: var(--z-toast); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: all 0.2s;
  white-space: nowrap; max-width: 250px;
}
.floating-tooltip.tooltip-visible { opacity: 1; transform: translateY(0); }

/* DaisyUI tooltip theme override */
.tooltip {
  --tooltip-color: var(--parchment);
  --tooltip-text-color: var(--ink);
}

/* ============ PHASE 7: CHARACTER PORTRAITS ============ */
.hero-portrait {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gold); box-shadow: 0 0 8px var(--gold-30);
  margin: 0 auto;
}
.portrait-symbol { font-size: 1.5rem; }

/* ============ PHASE 7: STORY CHOICES ============ */
.story-choice {
  margin: 1rem 0; padding: 1rem; border: 1px dashed var(--gold-30);
  border-radius: 0.5rem; text-align: center;
}

/* ============ PHASE 8: COMPACT MODE ============ */
body.compact-mode .verse { margin-bottom: 0.5rem; line-height: 1.4; }
body.compact-mode .book-title { margin-bottom: 0.25rem; font-size: 1.4rem; }
body.compact-mode .chapter-title { margin-bottom: 0.5rem; }
body.compact-mode .steam-break { margin: 1rem 0; }
body.compact-mode .section-theme { padding: 1rem 0; }

/* ============ PHASE 8: QUICKSAVE SLOTS ============ */
.quicksave-slot { transition: all 0.2s; }
.quicksave-slot:hover { background: var(--gold-10); }

/* ============ SCROLL-REVEAL ENTRANCE ANIMATIONS ============ */
.verse,
.book-title,
.chapter-title {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.verse.revealed,
.book-title.revealed,
.chapter-title.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children for multi-verse sections */
.verse.revealed:nth-child(2) { transition-delay: 0.08s; }
.verse.revealed:nth-child(3) { transition-delay: 0.16s; }
.verse.revealed:nth-child(4) { transition-delay: 0.24s; }
.verse.revealed:nth-child(5) { transition-delay: 0.32s; }

/* ============ VERSE HOVER GLOW ============ */
.verse {
  position: relative;
  cursor: default;
}
.verse::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.3s, transform 0.3s;
}
.verse:hover::after {
  opacity: 0.5;
  transform: scaleX(1);
}
.verse:hover {
  transform: translateY(-1px);
  text-shadow: 0 0 20px var(--gold-08);
}

/* ============ SECTION ENTER PULSE ============ */
body .section-theme.in-view::before {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-40);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* ============ DOCK MICRO-BOUNCE ============ */
.bao-dock button:hover,
.bao-dock a:hover {
  transform: scale(1.05);
  transition: transform 0.15s ease;
}
.bao-dock button:active,
.bao-dock a:active {
  transform: scale(0.97);
}

/* ============ COVER DUMPLING FLOAT ============ */
.cover-dumpling {
  animation: cover-float 4s ease-in-out infinite;
}
@keyframes cover-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(2deg); }
  75% { transform: translateY(-4px) rotate(-1deg); }
}

/* ============ STEAM BREAK ANIMATION ============ */
.steam-break {
  animation: steam-breathe 5s ease-in-out infinite;
}
@keyframes steam-breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ============ FAITH BAR GLOW PULSE ============ */
@keyframes faith-glow {
  0%, 100% { box-shadow: 0 0 4px var(--gold-20); }
  50% { box-shadow: 0 0 16px var(--gold-60), 0 0 30px var(--gold-30); }
}
.faith-fill.near-levelup {
  animation: faith-glow 1.5s ease-in-out infinite;
}

/* ============ NAVBAR SHIMMER ============ */
.bao-navbar.visible::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--gold-04) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: navbar-shimmer 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes navbar-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============ TWELVE-FACTOR COMMANDMENTS GRID ============ */
.twelve-factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.factor-card {
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
  border-radius: 0.5rem;
  padding: var(--space-md) 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.factor-card:hover {
  background: var(--gold-15);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.factor-card.factor-active {
  background: var(--gold-20);
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-20);
}
.factor-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.factor-name {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.factor-reveal-text {
  background: var(--gold-06);
  border-left: 3px solid var(--gold);
  padding: 0.75rem 1rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin-top: 0.75rem;
}

/* ============ ALGORITHM CHALLENGE ============ */
.algo-container {
  margin: 1rem 0;
}
.algo-array-display {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.algo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--gold-12);
  border: 1px solid var(--gold-30);
  border-radius: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.2s ease;
}
.algo-cell:hover {
  background: var(--gold-25);
  transform: scale(1.1);
}
.algo-cell.selected {
  background: rgba(100, 200, 100, 0.25);
  border-color: var(--sacred-green-light, #66cc66);
}
.algo-cell.wrong {
  background: rgba(200, 60, 60, 0.25);
  border-color: var(--blood-glow);
}
.algo-cell.correct {
  background: rgba(100, 200, 100, 0.3);
  border-color: var(--sacred-green-light, #66cc66);
  box-shadow: 0 0 8px rgba(100, 200, 100, 0.3);
}

/* ============ ATTACK PARTICLES ============ */
.attack-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-dock);
}

/* ============ DRAG-AND-DROP INVENTORY ============ */
.inventory-slot {
  border: 2px dashed var(--gold-20);
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-height: 50px;
  transition: all 0.2s ease;
}
.inventory-slot.drop-hover {
  border-color: var(--gold);
  background: var(--gold-10);
  box-shadow: 0 0 10px var(--gold-20);
}
.inventory-item {
  cursor: grab;
  padding: 0.35rem 0.5rem;
  background: var(--gold-10);
  border: 1px solid var(--gold-25);
  border-radius: 0.35rem;
  font-size: 0.75rem;
  display: inline-block;
  transition: all 0.2s ease;
}
.inventory-item:active {
  cursor: grabbing;
  opacity: 0.7;
}
.inventory-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

/* ============ ACCESSIBILITY ============ */
/* sr-only: provided by Tailwind’s utility class — no custom duplicate needed */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: var(--z-skip);
  background: var(--gold);
  color: var(--ink);
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: bold;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
}

/* ============ NPC RESPONSE BUTTONS ============ */
.npc-responses {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.npc-response-btn {
  background: var(--gold-10);
  border: 1px solid var(--gold-30);
  color: var(--gold);
  padding: 0.5rem 0.75rem;
  border-radius: 0.35rem;
  cursor: pointer;
  text-align: left;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}
.npc-response-btn:hover {
  background: var(--gold-20);
  border-color: var(--gold);
}

/* ============ WEEKLY BOSS ============ */
.weekly-boss-card {
  background: linear-gradient(135deg, rgba(200, 50, 50, 0.15), var(--gold-10));
  border: 1px solid rgba(200, 50, 50, 0.3);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}
.weekly-boss-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.weekly-boss-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--gold);
}
.weekly-boss-desc {
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0.5rem 0;
}
.weekly-boss-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 0.75rem 0;
  font-size: 0.75rem;
}

/* ============ SHORTCUT OVERLAY ============ */
.shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--gold-10);
}
.shortcut-key {
  background: var(--gold-15);
  border: 1px solid var(--gold-30);
  border-radius: 0.25rem;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
}
.shortcut-desc {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ============ MINI-GAME SKIP BUTTON ============ */
.minigame-skip-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(150, 150, 150, 0.2);
  border: 1px solid rgba(150, 150, 150, 0.3);
  color: rgba(255, 255, 255, 0.5);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}
.minigame-skip-btn:hover {
  background: rgba(150, 150, 150, 0.35);
  color: rgba(255, 255, 255, 0.8);
}

/* ============ MODAL THEME (DaisyUI-aligned) ============ */
.modal-box.bao-modal {
  background: var(--ink);
  border: 1px solid var(--gold-40);
  color: var(--parchment);
}
.modal-box.bao-modal h3 {
  font-family: var(--font-heading);
  color: var(--gold);
  margin-bottom: 1rem;
}
.modal-box.bao-modal h3.bao-decorative {
  font-family: var(--font-heading-decorative);
  font-size: 1.1rem;
}
.modal-box.bao-modal .bao-lore-text {
  font-family: var(--font-scripture);
  font-style: italic;
  color: var(--text-lore);
  font-size: 1rem;
  line-height: 1.7;
  padding: 0.5rem 0;
}
.modal-box.bao-modal .modal-action .btn {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  border-color: var(--gold-40);
}
.modal-box.bao-modal .modal-action .btn:hover {
  background: var(--gold-15);
  border-color: var(--gold);
}
.modal-box.bao-modal-blood {
  background: var(--ink);
  border: 1px solid rgba(204, 34, 34, 0.5);
  color: var(--parchment);
}
.modal-box.bao-modal-blood h3 {
  font-family: var(--font-heading);
  color: var(--blood);
  margin-bottom: 1rem;
}

/* ============ BATTLE TRANSITION OVERLAY ============ */
.battle-transition-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: var(--z-loading);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.battle-transition-text {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--gold);
  text-shadow: 0 0 20px var(--gold-50);
}

/* ============ TERMINAL SIMULATOR ============ */
/* "sudo rm -rf doubt && npm install faith" — The Sacred Sysadmin */

/* ── Terminal Color Tokens ─────────────────────────────────────
   DRY: all terminal greens defined once, referenced everywhere.
   "Thou shalt not hardcode thy hex" — Commandment of DRY, Verse 2
   ──────────────────────────────────────────────────────────── */
#terminalModal,
.mode-btn.terminal {
  --term-green: #00ff00;
  --term-green-bright: #33ff33;
  --term-green-dim: rgba(0,255,0,0.4);
  --term-green-line: rgba(0,255,0,0.5);
  --term-green-70: rgba(0,255,0,0.7);
  --term-green-60: rgba(0,255,0,0.6);
  --term-green-30: rgba(0,255,0,0.3);
  --term-green-25: rgba(0,255,0,0.25);
  --term-green-20: rgba(0,255,0,0.2);
  --term-green-10: rgba(0,255,0,0.1);
  --term-green-05: rgba(0,255,0,0.05);
  --term-green-03: rgba(0,255,0,0.03);
  --term-bg: #000;
  --term-bg-chrome: #0a0a0a;
  --term-bg-input: #050505;
  --term-error: #ff4444;
  --term-holy: var(--gold-bright, #ffd700);
  --dot-close: #ff5f57;
  --dot-minimize: #febc2e;
  --dot-maximize: #28c840;
}

/* Mode select button */
.mode-btn.terminal {
  border-color: var(--term-green);
  color: var(--term-green);
}
.mode-btn.terminal:hover {
  background: var(--term-green-10);
  box-shadow: 0 0 25px var(--term-green-25);
}

/* Modal box */
body .terminal-modal-box {
  background: var(--term-bg);
  border: 1px solid var(--term-green-30);
  max-width: 56rem;
  width: 95vw;
  height: 80vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

/* CRT scanline overlay */
.terminal-modal-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--term-green-03) 2px,
    var(--term-green-03) 4px
  );
  pointer-events: none;
  z-index: 10;
  animation: scanline-drift 8s linear infinite;
}

@keyframes scanline-drift {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* Window chrome bar */
.terminal-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--term-green-20);
  background: var(--term-bg-chrome);
  flex-shrink: 0;
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.2s;
}
.terminal-dots .dot:hover { opacity: 0.8; }
.dot-close { background: var(--dot-close, #ff5f57); }
.dot-minimize { background: var(--dot-minimize, #febc2e); }
.dot-maximize { background: var(--dot-maximize, #28c840); }

.terminal-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--term-green-60);
  letter-spacing: 0.08em;
  margin-left: 0.5rem;
}

.terminal-version {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--term-green-30);
}

/* Output area */
.terminal-output {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--term-green);
  line-height: 1.6;
  scroll-behavior: smooth;
}

.terminal-output::-webkit-scrollbar { width: 6px; }
.terminal-output::-webkit-scrollbar-track { background: var(--term-green-05); }
.terminal-output::-webkit-scrollbar-thumb { background: var(--term-green-30); border-radius: 3px; }
.terminal-output::-webkit-scrollbar-thumb:hover { background: var(--term-green-line); }

/* Output line styles */
.cmd-output { margin: 0; white-space: pre-wrap; word-break: break-word; }
.cmd-line { color: var(--term-green-line); }
.cmd-error { color: var(--term-error); }
.cmd-success { color: var(--term-green-bright); }
.cmd-holy { color: var(--term-holy); text-shadow: 0 0 8px rgba(255,215,0,0.3); }
.cmd-dim { color: var(--term-green-dim); }

/* ASCII art block */
.ascii-art {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--term-green);
  margin: 0.5rem 0;
  white-space: pre;
  overflow-x: auto;
}

/* Input area */
.terminal-input-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--term-green-20);
  background: var(--term-bg-input);
  flex-shrink: 0;
  position: relative;
}

.terminal-prompt {
  color: var(--term-green-70);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  user-select: none;
}

.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--term-green);
  caret-color: var(--term-green);
}

.terminal-input::placeholder {
  color: var(--term-green-25);
}

/* Blinking cursor effect via caret */
@keyframes terminal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* CRT glow on the whole modal */
#terminalModal[open] .terminal-modal-box {
  box-shadow:
    0 0 20px var(--term-green-10),
    inset 0 0 60px var(--term-green-03);
}

/* ── Terminal Tab Bar ─────────────────────────────────────────── */
.terminal-tabs {
  display: flex;
  gap: 0;
  background: var(--term-bg-chrome);
  border-bottom: 1px solid var(--term-green-20);
  flex-shrink: 0;
  overflow-x: auto;
}

.terminal-tab {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--term-green-dim);
  padding: 0.35rem 1rem;
  cursor: pointer;
  border-right: 1px solid var(--term-green-10);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.terminal-tab:hover {
  color: var(--term-green-70);
  background: var(--term-green-05);
}

.terminal-tab.active {
  color: var(--term-green);
  background: var(--term-bg);
  border-bottom: 2px solid var(--term-green);
  margin-bottom: -1px;
}

.terminal-tab .tab-icon {
  font-weight: bold;
  font-size: 0.75rem;
}

/* ── Terminal Status Bar ──────────────────────────────────────── */
.terminal-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 1rem;
  background: var(--term-green-05);
  border-top: 1px solid var(--term-green-10);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--term-green-dim);
  flex-shrink: 0;
}

.terminal-status-left,
.terminal-status-center,
.terminal-status-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator.online {
  background: var(--term-green);
  box-shadow: 0 0 4px var(--term-green);
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Terminal Input Hint ──────────────────────────────────────── */
.terminal-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--term-green-25);
  white-space: nowrap;
  pointer-events: none;
}

/* ── Terminal Fullscreen Mode ─────────────────────────────────── */
.terminal-modal-box.fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  border-radius: 0;
}

/* ── Terminal Highlighted Sections ─────────────────────────────── */
.cmd-warn { color: var(--prophet-amber); }
.cmd-info { color: var(--term-green-70); }
.cmd-highlight { color: var(--term-green-bright); text-shadow: 0 0 6px var(--term-green-30); }
.cmd-link { color: var(--term-green-bright); text-decoration: underline; cursor: pointer; }
.cmd-link:hover { color: var(--term-green); }

/* ================================================================
   SUGGESTIONS #1-40: UI/UX ENHANCEMENT STYLES
   ================================================================ */

/* #2 — Cinematic Grain Overlay */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* #3 — Golden Gradient Borders */
@keyframes gradient-border-spin {
  0% { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.golden-border {
  --border-angle: 0deg;
  border: 2px solid transparent;
  background-image: linear-gradient(var(--ink), var(--ink)),
    conic-gradient(from var(--border-angle), var(--gold), var(--bun-orange), var(--gold-bright), var(--gold));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: gradient-border-spin 4s linear infinite;
}

/* #4 — Fluid Typography: already set in `body {}` declaration above */

/* #6 — Glitch Text for Villains */
@keyframes glitch-text {
  0%, 100% { clip-path: inset(0 0 0 0); transform: none; }
  5% { clip-path: inset(40% 0 20% 0); transform: translateX(-3px); }
  10% { clip-path: inset(10% 0 60% 0); transform: translateX(3px); }
  15% { clip-path: inset(0 0 0 0); transform: none; }
}

.char-docker, .char-kube, .char-nodered {
  position: relative;
}

.char-docker:hover, .char-kube:hover, .char-nodered:hover {
  animation: glitch-text 0.5s ease;
}

/* #9 — Toast Notification Animations */
.bao-toast-enter {
  animation: toastSlideIn 0.3s ease-out;
}

.bao-toast-exit {
  animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* #10 — Rich Tooltip override */
[data-tip] {
  --tooltip-color: var(--gold);
  --tooltip-text-color: var(--ink);
}

/* #11 — Timeline DaisyUI enhancements */
.timeline .timeline-middle svg {
  color: var(--gold);
}

.timeline .timeline-box {
  background: var(--gold-06);
  border-color: var(--gold-20);
  color: var(--faded);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

/* #12 — Mockup Code styling */
.mockup-code {
  background: rgba(26, 18, 6, 0.95);
  border: 1px solid var(--gold-20);
  color: var(--text-code-light);
}

.mockup-code pre {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

body .mockup-code pre::before {
  color: var(--muted);
}

/* #14 — NPC Chat Bubble styling */
body .chat-bubble-npc {
  background: var(--gold-08);
  color: var(--parchment);
  border: 1px solid var(--gold-20);
  font-family: var(--font-scripture);
  font-size: 0.9rem;
}

body .chat-header-npc {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

/* #15 — Kbd component styling */
body .kbd {
  font-family: var(--font-mono);
  background: var(--gold-10);
  border-color: var(--gold-30);
  color: var(--gold);
}

/* #17 — Skeleton Loading theme */
body .skeleton {
  background: var(--gold-10);
}

body .skeleton::after {
  background: linear-gradient(90deg, transparent, var(--gold-08), transparent);
}

/* #18 — Radial Progress theming */
body .radial-progress {
  --value: 70;
  color: var(--gold);
  --thickness: 3px;
}

/* #19 — Custom Cursor */
.bao-cursor {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  font-size: 1.6rem;
  transform: translate(-50%, -50%) rotate(-30deg);
  transition: transform 0.08s ease;
  filter: drop-shadow(0 0 4px var(--gold-40));
}

.bao-cursor.clicking {
  transform: translate(-50%, -50%) rotate(-30deg) scale(0.75);
}

/* Hide default cursor when custom is active */
body:has(.bao-cursor) * {
  cursor: none !important;
}

body:has(.bao-cursor) a,
body:has(.bao-cursor) button,
body:has(.bao-cursor) [role="button"],
body:has(.bao-cursor) input,
body:has(.bao-cursor) select,
body:has(.bao-cursor) textarea {
  cursor: none !important;
}

/* #22 — Particle Explosion */
.bao-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-loading);
  animation: particle-fly 0.6s ease-out forwards;
}

@keyframes particle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

/* #26 — God Mode Visual */
@keyframes god-mode-bg {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(30deg) brightness(1.2); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}

.god-mode {
  animation: god-mode-bg 2s ease infinite;
}

.god-mode::after {
  content: '⚡ GOD MODE ⚡';
  position: fixed;
  top: 4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading-decorative);
  font-size: clamp(1rem, 3vw, 2rem);
  color: var(--gold-bright);
  text-shadow: 0 0 40px var(--gold), 0 0 80px var(--gold-40);
  z-index: var(--z-skip);
  pointer-events: none;
  animation: pulse-text 1s ease infinite;
  letter-spacing: 0.3em;
}

/* #27 — Breadcrumbs container — sits just below navbar */
#baoBreadcrumbs {
  position: fixed;
  top: 3.5rem;
  left: 0;
  right: 0;
  z-index: calc(var(--z-navbar) - 1);
  padding: 0.25rem 1rem;
  background: var(--ink-70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-08);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s, transform 0.3s;
}

#baoBreadcrumbs.visible {
  opacity: 1;
  transform: translateY(0);
}

#baoBreadcrumbs .breadcrumbs ul li a {
  color: var(--gold);
  text-decoration: none;
}

#baoBreadcrumbs .breadcrumbs ul li + li::before {
  color: var(--gold-30);
}

/* #28 — Scroll-to-Top FAB — above dock, below drawer */
#scrollToTopFAB {
  position: fixed;
  bottom: 7rem;
  right: 1.25rem;
  z-index: var(--z-navbar);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--gold-40);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  pointer-events: none;
}

#scrollToTopFAB.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#scrollToTopFAB:hover {
  background: var(--gold-bright);
  transform: translateY(-2px) scale(1.05);
}

/* #29 — Search Palette Modal (Glassmorphic) */
body #searchPaletteModal .modal-box {
  background: var(--ink-90);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--gold-20);
  border-radius: 12px;
  max-width: 600px;
  padding: 0;
}

.search-input {
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gold-15);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  outline: none;
}

.search-input::placeholder {
  color: var(--gold-30);
}

.search-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem;
}

.search-result-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  color: var(--parchment);
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.15s;
}

.search-result-item:hover {
  background: var(--gold-12);
  color: var(--gold);
}

.search-result-type {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--gold);
  opacity: 0.7;
  white-space: nowrap;
  min-width: 80px;
}

.search-result-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-shortcut-hint {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gold-30);
  text-align: center;
  padding: 0.5rem;
  border-top: 1px solid var(--gold-08);
}

/* #32 — Reading Time Badge */
body .reading-time {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  vertical-align: middle;
  color: var(--muted);
}

/* #33 — View Transition morphing */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

/* #34 — PWA Install Button — above dock, below drawer */
#pwaInstallBtn {
  position: fixed;
  bottom: 7rem;
  left: 1.25rem;
  z-index: var(--z-navbar);
}

/* #39 — Copy Code Button */
.copy-code-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--gold-30);
  border-radius: 3px;
  background: var(--gold-10);
  color: var(--gold);
  cursor: pointer;
  transition: all 0.2s;
  z-index: 5;
}

.copy-code-btn:hover {
  background: var(--gold-20);
  border-color: var(--gold);
}

/* #1 — Enhanced Glassmorphism on existing HUD elements */
body .modal-box {
  background: var(--ink-88);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--gold-15);
}

/* ============ PAGE-TURN SYSTEM ============ */

/* When page-turn is active, the main wrappers become a book container */
body.page-turn-active {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.page-turn-active .scripture-wrapper {
  overflow: visible;
}

/* Each page: initially hidden, with 3D transform-ready properties */
.page-turn-active .book-page {
  transform-origin: left center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Active page: fully visible, scrollable for tall content */
.page-turn-active .book-page.page-active {
  transform: rotateY(0deg) translateZ(0);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem); /* Subtract dock height */
  padding-bottom: 2rem; /* Breathing room at bottom of page content */
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/* Exit left: page folds away to the left (next page) */
.page-turn-active .book-page.page-exit-left {
  transform: rotateY(-30deg) scale(0.95);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s ease;
}

/* Enter right: page unfolds from the right (next page, initial state) */
.page-turn-active .book-page.page-enter-right {
  transform: rotateY(15deg) scale(0.98);
  opacity: 0;
}

/* Exit right: page folds away to the right (prev page) */
.page-turn-active .book-page.page-exit-right {
  transform: rotateY(30deg) scale(0.95);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s ease;
}

/* Enter left: page unfolds from the left (prev page, initial state) */
.page-turn-active .book-page.page-enter-left {
  transform: rotateY(-15deg) scale(0.98);
  opacity: 0;
}

/* Page navigation controls bar (Hidden in favor of Dock) */
body .page-nav-controls {
  display: none;
}

.page-nav-btn {
  background: none;
  border: 1px solid var(--gold-30);
  color: var(--gold);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1.4rem;
  line-height: 1;
}

.page-nav-btn:hover {
  background: var(--gold-15);
  border-color: var(--gold);
  transform: scale(1.1);
}

.page-nav-btn.page-nav-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.page-nav-arrow {
  font-family: var(--font-heading);
  font-weight: 700;
}

.page-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--parchment);
  opacity: 0.8;
}

.page-current {
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
}

.page-sep {
  color: var(--muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Adjust dock position when page nav is visible */
.page-turn-active .dock.bao-dock {
  bottom: 0;
  z-index: var(--z-navbar);
}

/* Modal backdrop close button: invisible text */
.modal-backdrop button {
  font-size: 0;
  color: transparent;
}

/* Move the page nav above dock on mobile */
@media (max-width: 1023px) {
  .page-nav-controls {
    bottom: 3.5rem;
    padding: 0.25rem 0.75rem;
    gap: 0.6rem;
  }
  .page-nav-btn {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 1.1rem;
  }
}

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

  /* Ensure all reveal elements are immediately visible */
  .verse,
  .book-title,
  .chapter-title,
  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Disable decorative animations */
  .steam-particle,
  .cover-icon,
  .ritual-dumpling,
  .ritual-text,
  .amen-rain-icon,
  .cover-dumpling { animation: none !important; }

  /* Disable new enhancement animations (#37) */
  .grain-overlay { display: none !important; }
  .bao-cursor { display: none !important; }
  .bao-particle { display: none !important; }
  .golden-border { animation: none !important; }
  .god-mode { animation: none !important; }
  .god-mode::after { animation: none !important; }
  .bao-toast-enter { animation: none !important; }
  .bao-toast-exit { animation: none !important; }
  .char-docker:hover, .char-kube:hover, .char-nodered:hover { animation: none !important; }

  /* Disable battle visual effects */
  .hero-damage-flash,
  .crit-flash,
  .battle-transition-overlay { display: none !important; }
  .damage-number { animation: none !important; }
  .shake { animation: none !important; }

  /* Disable dock bounce */
  .bao-dock button:hover,
  .bao-dock a:hover { transform: none !important; }

  /* Instant page transitions instead of 3D fold */
  .page-turn-active .book-page.page-active,
  .page-turn-active .book-page.page-exit-left,
  .page-turn-active .book-page.page-exit-right,
  .page-turn-active .book-page.page-enter-right,
  .page-turn-active .book-page.page-enter-left {
    transform: none !important;
    transition: none !important;
  }
}

/* ============ DRAWER FIXES ============ */
/* Ensure drawer covers the viewport properly */
.drawer {
  height: 100vh;
  height: 100dvh;
  overflow: clip; /* Prevent paint bleed without blocking internal scroll containers */
}

/* Drawer-content must scroll its own content independently */
.drawer-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* DaisyUI 5 handles drawer-side positioning via its own grid/fixed mechanism.
   We only need to boost z-index so the overlay sits above the dock. */
.drawer-side {
  z-index: var(--z-drawer);
}

/* ============ TABLET BREAKPOINT (601px–1023px) ============ */
/* "Neither mobile nor desktop, but blessed with aspects of both" */
@media (min-width: 601px) and (max-width: 1023px) {
  .scripture { padding: 2.5rem 2rem; }
  .dramatis { grid-template-columns: repeat(3, 1fr); }
  .combatants { gap: 1rem; }
  .mode-select { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .char-options { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .chapter-nav { flex-wrap: wrap; justify-content: center; }
  .completion-summary { grid-template-columns: repeat(3, 1fr); }
}

/* ============ VERY SMALL SCREENS (<360px) ============ */
/* "Blessed are the narrow viewports, for they require extra care" */
@media (max-width: 360px) {
  body .dock.bao-dock {
    grid-auto-columns: minmax(0, 1fr);
    padding: 0.2rem 0;
  }
  .bao-dock button,
  .bao-dock summary,
  .bao-dock a {
    padding: 0.15rem 0.2rem;
    gap: 0;
  }
  .bao-dock .dock-label {
    font-size: 0.45rem;
    max-width: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bao-dock .lucide-icon {
    width: 16px;
    height: 16px;
  }
}

/* ============ WIDE SCREENS (1440px+) ============ */
/* "And the viewport grew wider, and the content cried out for padding" */
@media (min-width: 1440px) {
  .scripture { max-width: 900px; padding: 4rem 3rem; }
  .toc-inner { max-width: 700px; }
  .battle-arena { max-width: 800px; }
}

/* ============ REDUCED MOTION (Accessibility) ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .grain-overlay { animation: none; opacity: 0.3; }
  .reveal { transition: none; }
}