/* ---------- Fonts ---------- */
/* fonts loaded via <link> in HTML */
/* ---------- Global scrollbar (Chromium/Vivaldi) ---------- */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: rgba(10,5,2,.35); }
::-webkit-scrollbar-thumb        { background: rgba(154,111,42,.5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(154,111,42,.8); }
::-webkit-scrollbar-corner       { background: transparent; }

/* ---------- Theme tokens ---------- */
:root {
  --ink: #2a1a0b;
  --ink-soft: #4a3522;
  --gold: #e9c97a;
  --gold-bright: #ffe9a8;
  --gold-deep: #866027;
  --gold-shadow: #4a330f;
  --emerald-deep: #1f5a34;
  --emerald-bright: #7fd8a4;
  --sapphire: #3969b1;
  --sapphire-bright: #8fc7ff;
  --ruby: #b6322f;
  --ember: #d44010;
  --ember-bright: #ff7030;
  --ember-deep: #8b2010;
  --amethyst: #b96ad9;
  --amethyst-bright: #d4a0f0;
  --amethyst-deep: #7b3fa0;
  --wood: #c49a6c;
  --wood-bright: #e4c688;
  --wood-deep: #6a4020;
  --steel: #8090a8;
  --steel-bright: #b8ccd8;
  --page-w: min(97vw, 1200px);
  --page-h: min(88vh, 960px);
}

* { box-sizing: border-box; }
html { font-size: 20px; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: #060403;
  font-family: 'IM Fell English', Georgia, serif;
  color: var(--ink);
  cursor: default;
}
/* Allow scrolling on the body only on mobile; desktop keeps the fixed-book layout */
@media (max-width: 800px) {
  html, body { overflow-x: hidden; overflow-y: auto; height: auto; }
}

/* =====================================================
   SCENE / FIRE / EMBERS
   ===================================================== */
.scene {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 95% 70% at 50% 115%, rgba(255,120,35,.55) 0%, rgba(180,60,20,.45) 22%, rgba(80,28,10,.35) 48%, transparent 72%),
    radial-gradient(ellipse at 50% 30%, #251b10 0%, #120a05 45%, #050303 100%);
  overflow: hidden;
  z-index: 0;
}
.scene::before {
  content: '';
  position: absolute; inset: -20%;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,220,150,.7), transparent),
    radial-gradient(1px 1px at 80% 40%, rgba(255,200,120,.5), transparent),
    radial-gradient(1px 1px at 30% 85%, rgba(255,220,150,.6), transparent),
    radial-gradient(1px 1px at 15% 55%, rgba(255,230,180,.3), transparent);
  background-size: 600px 600px, 700px 700px, 800px 800px, 900px 900px;
  animation: drift 120s linear infinite;
  opacity: .6;
}
@keyframes drift { to { transform: translate(-80px,-120px); } }

.fire-glow {
  position: fixed;
  left: 50%; bottom: -25vh;
  width: 180vw; height: 120vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 55% 75% at 50% 100%,
    rgba(255,190,80,1) 0%, rgba(255,130,35,.85) 12%,
    rgba(220,80,25,.6) 28%, rgba(140,45,15,.35) 48%, transparent 72%);
  filter: blur(28px);
  mix-blend-mode: screen;
  pointer-events: none; z-index: 0;
  animation: fire-pulse 3.8s ease-in-out infinite;
}
.fire-glow.b {
  left: 22%; bottom: -32vh; width: 95vw; height: 100vh;
  background: radial-gradient(ellipse 60% 80% at 50% 100%,
    rgba(255,215,110,.9) 0%, rgba(245,140,45,.7) 22%,
    rgba(170,65,20,.4) 44%, transparent 72%);
  animation: fire-pulse-b 4.4s ease-in-out infinite -1.2s;
}
.fire-glow.c {
  left: 78%; bottom: -30vh; width: 90vw; height: 100vh;
  background: radial-gradient(ellipse 60% 80% at 50% 100%,
    rgba(255,200,90,.95) 0%, rgba(235,105,30,.72) 22%,
    rgba(155,55,18,.4) 44%, transparent 72%);
  animation: fire-pulse-c 3.6s ease-in-out infinite -2.2s;
}
@keyframes fire-pulse {
  0%,100% { opacity:.9;  transform:translateX(-50%) scaleY(1) scaleX(1); }
  25%      { opacity:1.2; transform:translateX(-50%) scaleY(1.16) scaleX(.93); }
  50%      { opacity:.95; transform:translateX(-50%) scaleY(.9) scaleX(1.08); }
  75%      { opacity:1.15;transform:translateX(-50%) scaleY(1.2) scaleX(.96); }
}
.fire-glow.b { animation-name: fire-pulse-b; }
.fire-glow.c { animation-name: fire-pulse-c; }
@keyframes fire-pulse-b {
  0%,100% { opacity:.8;  transform:scaleY(1); }
  40%     { opacity:1.2; transform:scaleY(1.22) scaleX(.92); }
}
@keyframes fire-pulse-c {
  0%,100% { opacity:.85; transform:scaleY(1); }
  35%     { opacity:1.25; transform:scaleY(1.18) scaleX(.94); }
}
.ember {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd98a, #e9a24a 40%, transparent 70%);
  box-shadow: 0 0 8px #ffc16b;
  animation: float-up linear infinite;
  pointer-events: none;
}
@keyframes float-up {
  0%   { transform: translateY(100vh) translateX(0) scale(.5); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(var(--dx, 30px)) scale(1); opacity: 0; }
}

/* =====================================================
   BOOK SHELL
   ===================================================== */

.icon-wrap img {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
}

.book-shell {
  position: fixed; inset: 0 0 70px 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  /* On small screens, switch to scrollable flow */
}

.book {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  /* Ensure book never exceeds viewport height minus nav */
  max-height: calc(100vh - 80px);
  background:
    repeating-linear-gradient(87deg, transparent 0 38px, rgba(0,0,0,.18) 38px 39px, transparent 39px 78px),
    repeating-linear-gradient(2deg, transparent 0 60px, rgba(255,180,80,.05) 60px 61px),
    radial-gradient(ellipse 28% 14% at 16% 20%, rgba(100,58,18,.6), transparent),
    radial-gradient(ellipse 20% 10% at 80% 75%, rgba(60,32,10,.7), transparent),
    radial-gradient(ellipse 14% 7% at 84% 18%, rgba(28,14,5,.8), transparent),
    radial-gradient(ellipse 12% 6% at 10% 84%, rgba(22,11,4,.75), transparent),
    linear-gradient(158deg, #321f0e 0%, #1c1009 30%, #0e0804 58%, #1a1008 80%, #261508 100%);
  box-shadow:
    0 0 120px rgba(255,140,40,.22),
    0 0 0 1px #000,
    0 28px 80px rgba(0,0,0,.98),
    0 55px 160px rgba(0,0,0,.9),
    inset 0 3px 0 rgba(255,218,130,.32),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 3px 0 0 rgba(255,210,120,.14),
    inset -3px 0 0 rgba(255,210,120,.08),
    inset 0 -3px 0 rgba(0,0,0,.8),
    inset 0 0 80px rgba(0,0,0,.6);
  border-radius: 4px 10px 10px 4px;
}

/* Inset gold frame border — raised embossed look */
.book::before {
  content: '';
  position: absolute;
  inset: 32px 36px 36px 74px;
  border: 0;
  /* raised relief: bright top/left, dark bottom/right */
  box-shadow:
    /* raised outer bevel */
    0 0 0 1px rgba(0,0,0,.95),
    0 0 0 2px rgba(255,218,130,.55),
    0 0 0 3px rgba(154,111,42,.8),
    0 0 0 4px rgba(80,50,15,.9),
    0 0 0 5px rgba(233,201,122,.22),
    /* inner shadow (recessed page) */
    inset 0 2px 8px rgba(0,0,0,.6),
    inset 2px 0 8px rgba(0,0,0,.4),
    /* ambient glow */
    0 0 24px rgba(233,201,122,.14);
  pointer-events: none;
  z-index: 2;
}

/* Fine inset filigree line */
.book::after {
  content: '';
  position: absolute;
  inset: 44px 50px 50px 88px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    0 0 0 1.5px rgba(233,201,122,.4),
    0 0 0 2.5px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 2;
}

/* Studs along top edge */
.book-studs-top, .book-studs-bottom, .book-studs-right {
  position: absolute;
  z-index: 6; pointer-events: none;
  display: flex; align-items: center;
}
.book-studs-top {
  top: 13px; left: 90px; right: 90px;
  height: 12px; justify-content: space-around;
}
.book-studs-bottom {
  bottom: 13px; left: 90px; right: 90px;
  height: 12px; justify-content: space-around;
}
.book-studs-right {
  right: 14px; top: 90px; bottom: 90px;
  width: 12px;
  flex-direction: column; justify-content: space-around;
}
.stud {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 26%,
    #fffae0 0%, #f4d98b 18%, #c99a45 42%, #7a5220 68%, #2a1508 100%);
  box-shadow:
    0 2px 7px rgba(0,0,0,.9),
    0 1px 3px rgba(0,0,0,.7),
    inset 0 2px 3px rgba(255,248,210,.65),
    inset 0 -2px 3px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.6);
}

/* Right-edge clasp */
.book-clasp {
  position: absolute;
  right: -6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 70px;
  z-index: 8;
  background: linear-gradient(90deg,
    #3a2410 0%, #8a6030 30%, #c99a45 50%, #8a6030 70%, #2a1808 100%);
  border: 1px solid var(--gold-shadow);
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 8px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
}
.book-clasp::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #fffae8 0%, #f4d98b 25%, #c99a45 55%, #5a3e18 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.7), inset 0 1px 3px rgba(255,245,200,.6);
}

/* ---- Spine ---- */
.book-spine {
  position: absolute;
  top: 6px; bottom: 6px; left: 6px;
  width: 72px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 8px, rgba(255,200,100,.07) 8px 9px,
      transparent 9px 18px),
    linear-gradient(90deg, #060402 0%, #1a0f07 30%, #2e1c0c 55%, #1a0e06 75%, #060402 100%);
  border-right: 1px solid rgba(233,201,122,.22);
  border-radius: 3px 0 0 3px;
  z-index: 3;
}
/* Spine bands */
.book-spine::before, .book-spine::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 16px;
  background:
    linear-gradient(180deg,
      rgba(255,235,160,.08) 0%,
      #c99a45 18%, #f4d98b 50%, #c99a45 82%,
      rgba(60,38,12,.8) 100%);
  border-top: 1px solid rgba(255,230,140,.35);
  border-bottom: 1px solid rgba(0,0,0,.8);
  box-shadow: inset 0 1px 0 rgba(255,240,190,.2);
}
.book-spine::before { top: 12%; }
.book-spine::after  { bottom: 12%; }

/* Spine title text */
.book-spine-title {
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.71rem; font-weight: 700; letter-spacing: .3em;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 12px rgba(233,201,122,.4);
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
}

/* Spine center medallion */
.book-spine-emblem {
  position: absolute;
  left: 50%; top: 72%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #fffae8 0%, #f4d98b 22%, #c99a45 48%, #7a5a1e 74%, #2a1a08 100%);
  box-shadow:
    0 3px 10px rgba(0,0,0,.85),
    inset 0 2px 4px rgba(255,245,200,.6),
    inset 0 -2px 5px rgba(0,0,0,.6);
  z-index: 4;
  display: grid; place-items: center;
}
.book-spine-emblem::after {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(80,50,10,.5);
  box-shadow: 0 0 0 2px rgba(233,201,122,.2);
}
.book-spine-rune {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem; font-weight: 900;
  color: rgba(30,15,5,.7);
  text-shadow: 0 1px 0 rgba(255,240,190,.4);
  z-index: 5; position: relative;
}

/* Rivet studs on spine */
.spine-rivet {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #f4d98b 0%, #c99a45 45%, #5a3e18 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,.7), inset 0 1px 2px rgba(255,240,190,.4);
  z-index: 4;
}
.spine-rivet:nth-child(1) { top: 28%; }
.spine-rivet:nth-child(2) { top: 36%; }
.spine-rivet:nth-child(3) { bottom: 36%; }
.spine-rivet:nth-child(4) { bottom: 28%; }

/* ---- Corner bosses — ornate L-bracket style ---- */
.boss {
  position: absolute;
  width: 68px; height: 68px;
  z-index: 10;
}
/* Extending arm strips along both edges */
.boss-arm-h, .boss-arm-v {
  position: absolute;
  background: linear-gradient(to right,
    #3a2610 0%, #7a5520 20%, #c99a45 40%, #e9c97a 50%,
    #c99a45 60%, #7a5520 80%, #3a2610 100%);
  z-index: 9;
  pointer-events: none;
  border-radius: 2px;
}
.boss-arm-h { height: 8px; top: 50%; transform: translateY(-50%); }
.boss-arm-v { width: 8px; left: 50%; transform: translateX(-50%); }

/* For each corner, position the arms appropriately */
.boss.tl { top: 6px; left: 12px; }
.boss.tl .boss-arm-h { left: 64px; width: 100px; }
.boss.tl .boss-arm-v { top: 64px; height: 100px; }

.boss.tr { top: 6px; right: 12px; }
.boss.tr .boss-arm-h { right: 64px; width: 100px; }
.boss.tr .boss-arm-v { top: 64px; height: 100px; }

.boss.bl { bottom: 6px; left: 12px; }
.boss.bl .boss-arm-h { left: 64px; width: 100px; }
.boss.bl .boss-arm-v { bottom: 64px; height: 100px; }

.boss.br { bottom: 6px; right: 12px; }
.boss.br .boss-arm-h { right: 64px; width: 100px; }
.boss.br .boss-arm-v { bottom: 64px; height: 100px; }

/* Arm notch marks */
.boss-arm-h::before, .boss-arm-h::after,
.boss-arm-v::before, .boss-arm-v::after {
  content: '';
  position: absolute;
  background: rgba(0,0,0,.45);
}
.boss-arm-h::before { top: 3px; bottom: 3px; left: 28px; width: 1px; }
.boss-arm-h::after  { top: 3px; bottom: 3px; left: 52px; width: 1px; }
.boss-arm-v::before { left: 3px; right: 3px; top: 28px; height: 1px; }
.boss-arm-v::after  { left: 3px; right: 3px; top: 52px; height: 1px; }

/* Central medallion sphere */
.boss::before {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #fffae8 0%, #f4d98b 20%, #c99a45 45%, #7a5a1e 70%, #2a1a08 100%);
  box-shadow:
    0 4px 14px rgba(0,0,0,.9),
    0 1px 4px rgba(0,0,0,.7),
    inset 0 2px 5px rgba(255,245,210,.75),
    inset 0 -3px 8px rgba(0,0,0,.65);
  z-index: 11;
}
/* Inner engraved ring */
.boss::after {
  content: '';
  position: absolute; inset: 19px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, rgba(255,248,210,.55), transparent 55%);
  border: 1px solid rgba(80,50,10,.5);
  box-shadow: 0 0 0 2px rgba(233,201,122,.22);
  z-index: 12;
}

/* ---- Page inner ---- */
.page-inner {
  position: absolute;
  inset: 50px 55px 55px 90px;
  overflow: hidden;
  z-index: 1;
}

/* Allow page-inner to scroll when content overflows (laptop fix) */
.page-inner .page-parchment,
.page-inner .page-leather,
.page-inner .page-stone,
.page-inner .page-wood,
.page-inner .page-amethyst {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-inner .page-parchment::-webkit-scrollbar,
.page-inner .page-leather::-webkit-scrollbar,
.page-inner .page-stone::-webkit-scrollbar,
.page-inner .page-wood::-webkit-scrollbar,
.page-inner .page-amethyst::-webkit-scrollbar { width: 6px; }
.page-inner .page-parchment::-webkit-scrollbar-track { background: transparent; }
.page-inner .page-parchment::-webkit-scrollbar-thumb { background: rgba(154,111,42,.4); border-radius: 3px; }
.page-inner .page-stone::-webkit-scrollbar-thumb { background: rgba(75,130,214,.4); border-radius: 3px; }
.page-inner .page-leather::-webkit-scrollbar-thumb { background: rgba(154,111,42,.3); border-radius: 3px; }
.page-inner .page-amethyst::-webkit-scrollbar-thumb { background: rgba(185,106,217,.4); border-radius: 3px; }
.page-inner .page-wood::-webkit-scrollbar-thumb    { background: rgba(196,154,108,.4); border-radius: 3px; }

/* =====================================================
   PAGE THEMES
   ===================================================== */
/* --- Parchment --- */
.page-parchment {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(70,40,15,.5) 85%, rgba(30,15,5,.8) 100%),
    url('../../assets/images/parchment-dark.jpg') center / cover no-repeat,
    #e0c888;
}
.page-parchment::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../../assets/images/parchment-light.png') center / cover no-repeat;
  mix-blend-mode: lighten;
  opacity: .4;
  pointer-events: none;
}

/* --- Leather (cover) --- */
.page-leather {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 20% 10% at 22% 28%, rgba(110,65,25,.55), transparent),
    radial-gradient(ellipse 15% 8% at 74% 68%, rgba(70,38,14,.6), transparent),
    radial-gradient(ellipse 10% 6% at 80% 18%, rgba(30,14,5,.75), transparent),
    radial-gradient(ellipse at 50% 50%, #4a2916 0%, #281508aa 55%, #0e0804 100%);
}
.page-leather::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../../assets/images/leather.jpg') center / cover no-repeat;
  mix-blend-mode: overlay;
  opacity: .60;
}
/* Gold filigree border on cover */
.page-leather::after {
  content: '';
  position: absolute; inset: 28px;
  border: 2px solid var(--gold-deep);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,.6),
    inset 0 0 0 6px rgba(233,201,122,.2),
    inset 0 0 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.8);
}

/* --- Amethyst (BWB) --- */
.page-amethyst {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.72) 100%),
    radial-gradient(ellipse at 32% 26%, #3a1f52 0%, #1e0f32 55%, #09040f 100%);
}
.page-amethyst::after {
  content: '';
  position: absolute; inset: 0;
  background: url('../../assets/images/amethyst.jpg') center / cover no-repeat;
  mix-blend-mode: overlay;
  opacity: .75;
  pointer-events: none;
  z-index: 0;
}
.page-amethyst::before {
  content: '';
  position: absolute; inset: 0;
  /* Crystal facet caustic highlights */
  background-image:
    radial-gradient(ellipse 35% 25% at 20% 25%, rgba(220,180,255,.22) 0%, transparent 65%),
    radial-gradient(ellipse 25% 20% at 76% 18%, rgba(200,155,255,.18) 0%, transparent 55%),
    radial-gradient(ellipse 30% 22% at 55% 72%, rgba(185,140,255,.16) 0%, transparent 60%),
    radial-gradient(ellipse 18% 14% at 38% 88%, rgba(215,175,255,.14) 0%, transparent 50%),
    radial-gradient(ellipse 14% 10% at 82% 52%, rgba(235,205,255,.20) 0%, transparent 45%),
    radial-gradient(ellipse 20% 15% at 10% 65%, rgba(210,165,255,.15) 0%, transparent 50%),
    radial-gradient(ellipse 12% 9%  at 65% 38%, rgba(245,220,255,.12) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* --- Wood --- */
.page-wood {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 20% 10% at 22% 28%, rgba(80,40,10,.55), transparent),
    radial-gradient(ellipse 15% 8%  at 74% 68%, rgba(55,25,5,.6),  transparent),
    radial-gradient(ellipse at 50% 50%, #2a1508c0 0%, #160a04ab 55%, #0a0503bd 100%);
}
.page-wood::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../../assets/images/wood.jpg') center / cover no-repeat;
  mix-blend-mode: overlay;
  opacity: .85;
}
/* Warm filigree border on wood pages */
.page-wood::after {
  content: '';
  position: absolute; inset: 28px;
  border: 2px solid var(--wood-deep);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,.6),
    inset 0 0 0 6px rgba(196,154,108,.18),
    inset 0 0 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.8);
}

/* --- Stone (BCB) --- */
.page-stone {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 9% 5% at 22% 30%, rgba(40,60,95,.45), transparent),
    radial-gradient(ellipse 7% 4% at 70% 65%, rgba(30,50,85,.5), transparent),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0,0,0,.55) 90%),
    radial-gradient(ellipse at 30% 25%, #2d3748 0%, #1a1f2b 55%, #0a0d14 100%);
}
.page-stone::after {
  content: '';
  position: absolute; inset: 0;
  background: url('../../assets/images/stone.jpg') center / cover no-repeat;
  mix-blend-mode: overlay;
  opacity: .60;
  pointer-events: none;
  z-index: 0;
}
/* --- Forge (BTB) --- */
.page-forge {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 90%, rgba(200,58,10,.55) 0%, transparent 52%),
    radial-gradient(ellipse at 18% 55%, rgba(160,38,8,.22) 0%, transparent 38%),
    radial-gradient(ellipse at 82% 18%, rgba(140,28,8,.18) 0%, transparent 34%),
    radial-gradient(ellipse at 50% 50%, #2c1508 0%, #160a04 55%, #080402 100%);
}
.page-forge::before {
  content: '';
  position: absolute; inset: 0;
  /*  background-image:
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,140,50,.016) 70px 71px),
    repeating-linear-gradient(3deg,  transparent 0 90px, rgba(0,0,0,.09)       90px 91px);
  mix-blend-mode: overlay; opacity: .75; pointer-events: none; z-index: 0; */
  background: url('../../assets/images/forge.jpg') center / cover no-repeat;
  mix-blend-mode: overlay;
  opacity: .60;
}
/* Ember filigree border */
.page-forge::after {
  content: '';
  position: absolute; inset: 28px;
  border: 2px solid var(--ember-deep);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,.6),
    inset 0 0 30px rgba(200,58,10,.14),
    0 0 0 1px rgba(0,0,0,.8);
  pointer-events: none; z-index: 0;
}

.page-stone::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(17deg, transparent 0 40px, rgba(255,255,255,.02) 40px 41px),
    repeating-linear-gradient(-23deg, transparent 0 30px, rgba(0,0,0,.38) 30px 31px),
    radial-gradient(1px 1px at 20% 30%, rgba(180,210,255,.1), transparent),
    radial-gradient(1px 1px at 78% 62%, rgba(180,210,255,.12), transparent);
  pointer-events: none;
}

/* =====================================================
   PAGE CONTENT TYPOGRAPHY
   ===================================================== */
.page-content {
  position: relative;
  inset: auto;
  padding: 36px 50px 42px 50px;
  display: flex; flex-direction: column;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 0.88rem; line-height: 1.55;
  color: var(--ink);
  min-height: 100%;
  height: auto;
}
.page-stone .page-content { color: #d4dff2; }

.eyebrow {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 0.80rem;
  font-weight: 800;
  color: var(--gold-deep);
  
}

.page-stone .eyebrow { color: var(--sapphire-bright); }

h1.title, h2.title {
  font-family: var(--display-face);
  font-weight: 900;
  letter-spacing: .04em;
  margin: 0;
  color: var(--ink);
}
.page-stone h1.title, .page-stone h2.title {
  color: var(--gold-bright);
  text-shadow: 0 0 20px rgba(143,199,255,.35), 0 2px 0 #000;
}

.rule {
  height: 14px; margin: 12px 0;
  background:
    linear-gradient(90deg, transparent, var(--gold-deep) 20%, var(--gold) 50%, var(--gold-deep) 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 4px) center / 100% 100% no-repeat;
}
.page-stone .rule {
  background:
    linear-gradient(90deg, transparent, #6b8bc0 20%, #b8d4ff 50%, #6b8bc0 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, #b8d4ff 0 3px, transparent 4px) center / 100% 100% no-repeat;
}

.drop-cap::first-letter {
  font-family: var(--display-face);
  font-size: 3.6em;
  float: left; line-height: .85;
  padding: 4px 12px 0 0;
  color: #0070dd; font-weight: 900;
}
.page-stone .drop-cap::first-letter { color: var(--sapphire-bright); }
.addon-accent .drop-cap::first-letter { color: var(--emerald-deep); }

/* Two-column layout helper */
.cols { display: flex; gap: 40px; flex: 1; min-height: 0; overflow: hidden; }
.col  { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow: hidden; }
.row  { display: flex; gap: 16px; align-items: flex-start; }
.mt-auto { margin-top: auto; }

/* =====================================================
   GILDED CARD
   ===================================================== */
.gilded-card {
  position: relative;
  padding: 18px 22px;
  background: rgba(80,55,20,.32);
  border: 1px solid rgba(154,111,42,.45);
  box-shadow: inset 0 0 0 1px rgba(233,201,122,.18);
}
.gilded-card::before, .gilded-card::after {
  content: ''; position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--gold-deep);
}
.gilded-card::before { top:-3px; left:-3px; border-right:none; border-bottom:none; }
.gilded-card::after  { bottom:-3px; right:-3px; border-left:none; border-top:none; }
.page-stone .gilded-card {
  background: rgba(15,25,50,.72);
  border: 1px solid rgba(75,130,214,.38);
  box-shadow: inset 0 0 0 1px rgba(143,199,255,.12), inset 0 0 40px rgba(27,58,110,.4);
}
.page-stone .gilded-card::before, .page-stone .gilded-card::after { border-color: #6b8bc0; }

/* =====================================================
   FANCY LIST / SLASH BLOCK / INSTALL BADGES
   ===================================================== */
.fancy-list { list-style:none; padding:0; margin:10px 0; }
.fancy-list li { position:relative; padding-left:22px; margin-bottom:8px; }
.fancy-list li::before {
  content:''; position:absolute; left:4px; top:9px;
  width:8px; height:8px;
  background: var(--gold); transform:rotate(45deg);
  box-shadow: 0 0 4px rgba(154,111,42,.4);
}
.page-stone .fancy-list li::before { background:var(--sapphire-bright); box-shadow:0 0 6px rgba(143,199,255,.6); }

.slash-block {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem; line-height: 1.8;
  padding: 14px 18px;
  background: rgba(42,20,10,.1);
  border-left: 3px solid var(--gold-deep);
}
.page-stone .slash-block { background:rgba(0,0,0,.4); border-left-color:var(--sapphire); color:#c8d8f4; }
.slash-cmd { color: var(--emerald-deep); font-weight:700; }
.page-stone .slash-cmd { color:var(--sapphire-bright); }
.slash-arg { color: var(--ink-soft); font-style:italic; }
.page-stone .slash-arg { color:#8aa0c8; }

.install-row { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
.install-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 8px;
  background: linear-gradient(180deg,#2a1a0b,#15090b);
  border:1px solid var(--gold-deep);
  color:var(--gold); font-family:'Cinzel',serif;
  font-size: 0.59rem; letter-spacing:.25em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:all .2s ease;
}
.install-badge:hover { background:linear-gradient(180deg,#4a2f17,#22110a); color:var(--gold-bright); box-shadow:0 0 14px rgba(233,201,122,.4); }
.install-badge .dot { width:6px; height:6px; background:var(--emerald-bright); border-radius:50%; box-shadow:0 0 8px var(--emerald-bright); }
.page-stone .install-badge { border-color:var(--sapphire); color:var(--sapphire-bright); }
.page-stone .install-badge .dot { background:var(--sapphire-bright); box-shadow:0 0 8px var(--sapphire-bright); }
.page-forge .page-content { color: #e8c8a0; }
.page-forge .eyebrow { color: var(--ember-bright); }
.page-forge h1.title, .page-forge h2.title { color: var(--ember-bright); text-shadow: 0 0 20px rgba(255,100,30,.35), 0 2px 0 #000; }
.page-forge .rule {
  background:
    linear-gradient(90deg, transparent, var(--ember-deep) 20%, var(--ember-bright) 50%, var(--ember-deep) 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, var(--ember) 0 3px, transparent 4px) center / 100% 100% no-repeat;
}
.page-forge .drop-cap::first-letter { color: var(--ember-bright); }
.page-forge .gilded-card { background: rgba(20,8,3,.72); border: 1px solid rgba(212,64,16,.38); box-shadow: inset 0 0 0 1px rgba(255,100,30,.1), inset 0 0 40px rgba(140,30,5,.35); }
.page-forge .gilded-card::before, .page-forge .gilded-card::after { border-color: var(--ember-deep); }
.page-forge .fancy-list li::before { background: var(--ember-bright); box-shadow: 0 0 6px rgba(255,112,48,.6); }
.page-forge .slash-block { background:rgba(0,0,0,.4); border-left-color:var(--ember); color:#f0d0a0; }
.page-forge .slash-cmd { color: var(--ember-bright); }
.page-forge .slash-arg { color: #c8a070; }
.page-forge .install-badge { border-color:var(--ember); color:var(--ember-bright); }
.page-forge .install-badge .dot { background:var(--ember-bright); box-shadow:0 0 8px var(--ember-bright); }
.page-forge .shot { border-color: var(--ember); }
.page-inner .page-forge::-webkit-scrollbar-thumb { background: rgba(212,64,16,.4); border-radius: 3px; }
/* Forge gallery thumbs */
.page-forge .gallery-thumb { border-color: rgba(212,64,16,.35); clip-path: none; }
.page-forge .gallery-thumb:hover { border-color: rgba(255,112,48,.65); box-shadow: 0 0 20px rgba(255,112,48,.18); }

/* =====================================================
   AMETHYST THEME OVERRIDES
   ===================================================== */
.page-amethyst .page-content { color: #e4d4f8; }
.page-amethyst .eyebrow { color: var(--amethyst-bright); }
.page-amethyst h1.title, .page-amethyst h2.title {
  color: var(--amethyst-bright);
  text-shadow: 0 0 20px rgba(185,106,217,.35), 0 2px 0 #000;
}
.page-amethyst .rule {
  background:
    linear-gradient(90deg, transparent, #7b3fa0 20%, #b96ad9 50%, #7b3fa0 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, #b96ad9 0 3px, transparent 4px) center / 100% 100% no-repeat;
}
.page-amethyst .drop-cap::first-letter { color: var(--amethyst-bright); }
.page-amethyst .gilded-card {
  background: rgba(40,15,65,.72);
  border: 1px solid rgba(185,106,217,.38);
  box-shadow: inset 0 0 0 1px rgba(212,160,240,.12), inset 0 0 40px rgba(80,20,120,.4);
}
.page-amethyst .gilded-card::before, .page-amethyst .gilded-card::after { border-color: #7b3fa0; }
.page-amethyst .fancy-list li::before { background: var(--amethyst-bright); box-shadow: 0 0 6px rgba(212,160,240,.6); }
.page-amethyst .slash-block { background: rgba(0,0,0,.4); border-left-color: var(--amethyst); color: #d4b8f4; }
.page-amethyst .slash-cmd { color: var(--amethyst-bright); }
.page-amethyst .slash-arg { color: #b090d0; }
.page-amethyst .install-badge { border-color: var(--amethyst); color: var(--amethyst-bright); }
.page-amethyst .install-badge .dot { background: var(--amethyst-bright); box-shadow: 0 0 8px var(--amethyst-bright); }
.page-amethyst .shot { border-color: var(--amethyst); }
.page-amethyst .gallery-thumb { border-color: rgba(185,106,217,.35); clip-path: none; }
.page-amethyst .gallery-thumb:hover { border-color: rgba(212,160,240,.65); box-shadow: 0 0 20px rgba(212,160,240,.18); }

/* Amethyst btn variant */
.btn.amethyst { border-color: var(--amethyst-deep); color: var(--amethyst-bright); }
.btn.amethyst:hover { box-shadow: 0 0 24px rgba(185,106,217,.5), inset 0 0 0 1px #000; }

/* =====================================================
   WOOD THEME OVERRIDES
   ===================================================== */
.page-wood .page-content { color: #f0dfc0; }
.page-wood .eyebrow { color: var(--wood); }
.page-wood h1.title, .page-wood h2.title {
  color: var(--wood-bright);
  text-shadow: 0 0 20px rgba(196,154,108,.3), 0 2px 0 #000;
}
.page-wood .rule {
  background:
    linear-gradient(90deg, transparent, var(--wood-deep) 20%, var(--wood) 50%, var(--wood-deep) 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, var(--wood) 0 3px, transparent 4px) center / 100% 100% no-repeat;
}
.page-wood .drop-cap::first-letter { color: var(--wood); }
.page-wood .gilded-card {
  background: rgba(60,28,8,.55);
  border: 1px solid rgba(196,154,108,.38);
  box-shadow: inset 0 0 0 1px rgba(228,198,136,.12), inset 0 0 40px rgba(60,28,8,.4);
}
.page-wood .gilded-card::before, .page-wood .gilded-card::after { border-color: var(--wood-deep); }
.page-wood .fancy-list li::before { background: var(--wood); box-shadow: 0 0 4px rgba(196,154,108,.4); }
.page-wood .slash-block { background: rgba(20,8,2,.35); border-left-color: var(--wood-deep); color: #e8cfa0; }
.page-wood .slash-cmd { color: var(--wood); }
.page-wood .slash-arg { color: #b09070; }
.page-wood .install-badge { border-color: var(--wood-deep); color: var(--wood-bright); }
.page-wood .install-badge .dot { background: var(--wood-bright); box-shadow: 0 0 8px var(--wood); }
.page-wood .shot { border-color: var(--wood-deep); }
.page-wood .gallery-thumb { border-color: rgba(196,154,108,.3); clip-path: none; }
.page-wood .gallery-thumb:hover { border-color: rgba(228,198,136,.6); box-shadow: 0 0 20px rgba(228,198,136,.18); }

/* Wood btn variant */
.btn.wood { border-color: var(--wood-deep); color: var(--wood-bright); }
.btn.wood:hover { box-shadow: 0 0 24px rgba(196,154,108,.5), inset 0 0 0 1px #000; }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px;
  background:linear-gradient(180deg,#3b2613,#1c1008);
  border:1px solid var(--gold-deep); color:var(--gold-bright);
  font-family:'Cinzel',serif; font-weight:600;
  font-size: 0.6rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; position:relative; text-decoration:none;
  transition:all .25s ease;
  box-shadow:inset 0 0 0 1px #000, inset 0 1px 0 rgba(255,220,150,.15);
}
.btn::before, .btn::after {
  content:''; position:absolute; width:10px; height:10px; border:1px solid var(--gold); opacity:.6;
}
.btn::before { top:-2px; left:-2px; border-right:none; border-bottom:none; }
.btn::after  { bottom:-2px; right:-2px; border-left:none; border-top:none; }
.btn:hover { background:linear-gradient(180deg,#5a3a1d,#2c1a0b); color:#fff3cf; box-shadow:0 0 24px rgba(233,201,122,.5),inset 0 0 0 1px #000; transform:translateY(-1px); }
.btn.ember   { border-color:var(--ember-deep); color:var(--ember-bright); }
.btn.ember:hover { box-shadow:0 0 24px rgba(212,64,16,.5),inset 0 0 0 1px #000; }
.btn.emerald { border-color:#2d7a48; color:var(--emerald-bright); }
.btn.emerald:hover { box-shadow:0 0 24px rgba(127,216,164,.5),inset 0 0 0 1px #000; }
.btn.sapphire { border-color:#3964a8; color:var(--sapphire-bright); }
.btn.sapphire:hover { box-shadow:0 0 24px rgba(143,199,255,.5),inset 0 0 0 1px #000; }

/* =====================================================
   COVER PAGE SPECIFIC
   ===================================================== */
.cover-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 16px;
  padding: 60px 80px;
}
.cover-title {
  font-family: var(--display-face);
  font-weight: 900;
  font-size: clamp(3.53rem, 9vw, 7.06rem);
  letter-spacing: .1em; line-height: 1;
  color: var(--gold-bright);
  text-shadow: 0 3px 0 rgba(0,0,0,.8), 0 0 40px rgba(233,201,122,.55), 0 6px 20px rgba(0,0,0,.9);
  margin: 0;
}
.cover-sub {
  font-family: 'IM Fell English SC', serif;
  font-size: 1.4rem; letter-spacing: .55em;
  color: var(--gold); opacity: .85; text-transform: uppercase;
}
.cover-sub-2 {
  font-family: 'IM Fell English SC', serif;
  font-size: 0.82rem; letter-spacing: .55em;
  color: var(--gold); opacity: .85; text-transform: uppercase;
}

.cover-mark {
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff8e0 0%, var(--gold-bright) 25%, var(--gold) 55%, var(--gold-deep) 78%, var(--gold-shadow) 100%);
  display: grid; place-items: center;
  box-shadow: 0 0 40px rgba(233,201,122,.45), inset 0 -4px 10px rgba(0,0,0,.45), inset 0 2px 5px rgba(255,240,200,.7);
  position: relative;
}
.cover-mark::before { content:''; position:absolute; inset:9px; border:1.5px solid rgba(42,20,10,.5); border-radius:50%; }
.cover-mark-letter { font-family:var(--display-face); font-weight:900; font-size: 2.47rem; color:#2a1a0b; text-shadow:0 1px 0 rgba(255,240,200,.5); }
.cover-crests { display:flex; gap:70px; margin-top:10px; }
.cover-crests img { width:130px; height:130px; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.85)) drop-shadow(0 0 24px rgba(233,201,122,.3)); transition:all .3s ease; cursor:pointer; }
.cover-crests img:hover { transform:translateY(-5px) scale(1.06); filter:drop-shadow(0 10px 24px rgba(0,0,0,.9)) drop-shadow(0 0 36px rgba(233,201,122,.65)); }

/* =====================================================
   NAVIGATION
   ===================================================== */
.book-nav {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  width: min(80vw, calc(var(--page-w) * 0.8));
  background: linear-gradient(180deg,#2a1a0b,#15090b);
  border: 1px solid var(--gold-deep);
  box-shadow: 0 8px 28px rgba(0,0,0,.7), inset 0 0 0 1px #000, inset 0 1px 0 rgba(233,201,122,.2);
  white-space: nowrap;
  z-index: 10;
  box-sizing: border-box;
}
.nav-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: linear-gradient(180deg,#3a2413,#1a0f08);
  border: 1px solid var(--gold-deep); color: var(--gold);
  cursor: pointer; font-family:'Cinzel',serif; font-size: 1.06rem; font-weight:700;
  transition: all .2s ease;
}
.nav-btn:hover:not(:disabled) { background:linear-gradient(180deg,#5a3a1d,#2c1a0b); color:var(--gold-bright); box-shadow:0 0 16px rgba(233,201,122,.5); }
.nav-btn:disabled { opacity:.3; cursor:not-allowed; }
.nav-label { font-family:'Cinzel',serif; font-size: 0.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); padding:0 14px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.nav-dots { display:flex; gap:9px; }
.nav-dot { width:10px; height:10px; transform:rotate(45deg); background:#1a0f08; border:1px solid var(--gold-deep); cursor:pointer; transition:all .2s ease; }
.nav-dot.active { background:var(--gold); box-shadow:0 0 10px var(--gold); }

/* page number */
.page-parchment .page-num { color: #0070dd; }
.page-num {
  position: absolute; bottom: 18px;
  font-family: 'IM Fell English SC', serif; font-size: 0.71rem; letter-spacing: 2px; opacity: .5;
  left: 50%; transform: translateX(-50%);
}

/* =====================================================
   TOOLTIP
   ===================================================== */
.wow-tooltip {
  position: fixed; pointer-events:none; z-index:9999;
  min-width:200px; max-width:300px; padding:10px 12px;
  background:linear-gradient(180deg,rgba(0,0,20,.96),rgba(0,0,10,.99));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.85);
  font-family:'IM Fell English',serif; color:#fff; font-size: 0.76rem; line-height:1.4;
  opacity:0; transition:opacity .15s ease;
}
.wow-tooltip.show { opacity:1; }
.wow-tooltip .tt-title { font-family:'Cinzel',serif; font-size: 0.76rem; font-weight:700; letter-spacing:.05em; margin-bottom:4px; }
.wow-tooltip .tt-sub  { font-size: 0.65rem; opacity:.7; margin-bottom:6px; font-style:italic; }
.wow-tooltip .tt-body { font-size: 0.71rem; opacity:.9; }
.wow-tooltip.quality-uncommon .tt-title { color:#7fd8a4; }
.wow-tooltip.quality-rare      .tt-title { color:#8fc7ff; }
.wow-tooltip.quality-epic      .tt-title { color:#c88aff; }
.wow-tooltip.quality-legendary .tt-title { color:#ff9d4a; }
.wow-tooltip.quality-artifact  .tt-title { color:#e9c97a; }

/* =====================================================
   CURSOR MOTE
   ===================================================== */
.cursor-mote {
  position:fixed; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,230,160,1),rgba(233,201,122,.5) 40%,transparent 70%);
  box-shadow:0 0 8px rgba(255,220,140,.8);
  pointer-events:none; z-index:9998;
  animation:mote-fade .9s ease-out forwards;
}
@keyframes mote-fade {
  0%   { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.2) translateY(-20px); }
}
.cursor-mote.blue    { background:radial-gradient(circle,rgba(200,230,255,1),rgba(143,199,255,.5) 40%,transparent 70%); box-shadow:0 0 8px rgba(143,199,255,.8); }
.cursor-mote.emerald { background:radial-gradient(circle,rgba(200,255,220,1),rgba(127,216,164,.5) 40%,transparent 70%); box-shadow:0 0 8px rgba(127,216,164,.8); }
.cursor-mote.purple  { background:radial-gradient(circle,rgba(235,210,255,1),rgba(185,106,217,.5) 40%,transparent 70%); box-shadow:0 0 8px rgba(185,106,217,.8); }
.cursor-mote.ember   { background:radial-gradient(circle,rgba(255,210,160,1),rgba(220,100,30,.5)  40%,transparent 70%); box-shadow:0 0 8px rgba(220,100,30,.8); }

/* =====================================================
   SCREENSHOT IMAGE
   ===================================================== */
.shot { border:2px solid var(--gold-deep); box-shadow:0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.7); width:100%; height:auto; display:block; z-index:99; }
.page-stone .shot { border-color:var(--sapphire); }

/* =====================================================
   SEALED TOME
   ===================================================== */
.sealed-tome {
  width:170px; height:210px; margin:0 auto;
  position:relative;
  background:radial-gradient(ellipse at 35% 25%, #3a2010 0%, #1a0c04 80%);
  border:2px solid var(--gold-deep);
  box-shadow:inset 0 0 0 1px #000, inset 0 0 40px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.7);
  display:grid; place-items:center;
}
.sealed-tome::before { content:''; position:absolute; inset:12px; border:1px solid rgba(233,201,122,.3); }
.sealed-wax {
  width:68px; height:68px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #e04a3f 0%, #a82521 60%, #5a0f0e 100%);
  box-shadow:0 0 22px rgba(182,50,47,.55), inset 0 -4px 8px rgba(0,0,0,.5);
  display:grid; place-items:center;
  font-family:var(--display-face); font-size: 1.76rem; color:rgba(0,0,0,.9); font-weight:900;
}

/* =====================================================
   TWEAKS PANEL
   ===================================================== */
.tweaks-panel {
  position:fixed; right:20px; bottom:90px; width:280px;
  background:linear-gradient(180deg,#1a0f08,#0a0604);
  border:1px solid var(--gold-deep);
  box-shadow:0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.85), inset 0 0 0 1px rgba(233,201,122,.18);
  padding:14px; color:var(--gold); font-family:'Cinzel',serif; font-size: 0.65rem;
  z-index:9997; display:none;
}
.tweaks-panel.open { display:block; }
.tweaks-panel h4 { margin:0 0 10px; font-size: 0.71rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold-bright); border-bottom:1px solid rgba(233,201,122,.22); padding-bottom:8px; }
.tweak-row { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.tweak-row label { font-size: 0.59rem; letter-spacing:.2em; text-transform:uppercase; opacity:.8; }
.tweak-row .opts { display:flex; gap:6px; flex-wrap:wrap; }
.tweak-row .opts button { flex:1; min-width:54px; padding:6px 8px; background:#150a05; border:1px solid var(--gold-deep); color:var(--gold); font-family:'Cinzel',serif; font-size: 0.53rem; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; transition:all .15s ease; }
.tweak-row .opts button.sel { background:var(--gold-deep); color:#1a0f08; }
.tweak-row input[type=range] { width:100%; accent-color:var(--gold); }

/* =====================================================
   PAGE TRANSITION (fade only - flip disabled)
   ===================================================== */
.page-fade-enter { opacity:0; }
.page-fade-enter-active { opacity:1; transition:opacity .4s ease; }
.page-fade-exit { opacity:1; }
.page-fade-exit-active { opacity:0; transition:opacity .25s ease; }

/* =====================================================
   GALLERY OVERLAY — Stone Tablet
   ===================================================== */
.gallery-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 201;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: backdrop-in .3s ease forwards;
}
.gallery-backdrop.closing { animation: backdrop-out .3s ease forwards; }

.gallery-tablet {
  position: relative;
  width: min(860px, 96vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(17deg, transparent 0 40px, rgba(255,255,255,.015) 40px 41px),
    repeating-linear-gradient(-23deg, transparent 0 30px, rgba(0,0,0,.3) 30px 31px),
    radial-gradient(ellipse at 30% 20%, #2d3748 0%, #1a1f2b 55%, #0a0d14 100%);
  border: 2px solid rgba(75,130,214,.35);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    0 0 0 4px rgba(75,130,214,.12),
    0 30px 80px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(143,199,255,.1),
    inset 0 0 60px rgba(0,0,0,.5);
  clip-path: polygon(
    0% 8px, 8px 0%, calc(100% - 8px) 0%, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0% calc(100% - 8px)
  );
  animation: tablet-in .4s cubic-bezier(.22,.68,0,1.15) forwards;
  overflow: hidden;
}
.gallery-tablet::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../../assets/images/stone.jpg') center / cover no-repeat;
  mix-blend-mode: overlay;
  opacity: .60;
  pointer-events: none;
  z-index: 0;
}
.gallery-tablet.closing { animation: tablet-out .25s ease forwards; }

@keyframes tablet-in {
  0%   { transform: scale(.88) translateY(24px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes tablet-out {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(.9) translateY(16px); opacity: 0; }
}

/* Tablet header */
.gallery-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(75,130,214,.2);
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.gallery-header-title {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--sapphire-bright); flex: 1;
}
.gallery-close {
  width: 30px; height: 30px;
  background: rgba(75,130,214,.12);
  border: 1px solid rgba(75,130,214,.3);
  color: var(--sapphire-bright);
  font-family: 'Cinzel', serif; font-size: 0.71rem;
  cursor: pointer; display: grid; place-items: center;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  transition: all .2s ease;
}
.gallery-close:hover {
  background: rgba(75,130,214,.28);
  box-shadow: 0 0 14px rgba(143,199,255,.35);
  color: #fff;
}

/* Parchment-themed gallery thumbs */
.page-parchment .gallery-thumb {
  border-color: rgba(154,111,42,.35);
  clip-path: none;
}
.page-parchment .gallery-thumb:hover {
  border-color: rgba(233,201,122,.65);
  box-shadow: 0 0 20px rgba(233,201,122,.2);
}

/* Grid of thumbnails */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  position: relative; z-index: 1;
}
.gallery-grid::-webkit-scrollbar { width: 5px; }
.gallery-grid::-webkit-scrollbar-thumb { background: rgba(75,130,214,.35); border-radius: 3px; }

.gallery-thumb {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(75,130,214,.25);
  background: rgba(0,0,0,.4);
  transition: all .2s ease;
  clip-path: polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0% 100%);
}
.gallery-thumb:hover {
  border-color: rgba(143,199,255,.6);
  box-shadow: 0 0 20px rgba(143,199,255,.25);
  transform: translateY(-2px);
}
.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
  filter: brightness(.85);
}
.gallery-thumb:hover img {
  transform: scale(1.05);
  filter: brightness(1);
}
.gallery-thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  font-family: 'Cinzel', serif; font-size: 0.53rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sapphire-bright); opacity: 0;
  transition: opacity .2s ease;
}
.gallery-thumb:hover .gallery-thumb-label { opacity: 1; }

/* Lightbox */
.gallery-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.93);
  z-index: 202;
  display: flex; align-items: center; justify-content: center;
  animation: backdrop-in .2s ease forwards;
}
.gallery-lightbox.closing { animation: backdrop-out .2s ease forwards; }

.gallery-lightbox-inner {
  position: relative;
  max-width: min(1100px, 94vw);
  max-height: 90vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.gallery-lightbox-img {
  max-width: 100%; max-height: 78vh;
  object-fit: contain;
  border: 1px solid rgba(75,130,214,.35);
  box-shadow: 0 0 60px rgba(0,0,0,.9), 0 0 30px rgba(143,199,255,.1);
  display: block;
}
.gallery-lightbox-caption {
  font-family: 'Cinzel', serif; font-size: 0.59rem;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--sapphire-bright); opacity: .7;
  text-align: center;
}
.gallery-lightbox-controls {
  display: flex; align-items: center; gap: 16px;
}
.gallery-lb-btn {
  width: 38px; height: 38px;
  background: rgba(75,130,214,.12);
  border: 1px solid rgba(75,130,214,.3);
  color: var(--sapphire-bright);
  font-family: 'Cinzel', serif; font-size: 1.06rem; font-weight: 700;
  cursor: pointer; display: grid; place-items: center;
  transition: all .2s ease;
}
.gallery-lb-btn:hover:not(:disabled) {
  background: rgba(75,130,214,.28);
  box-shadow: 0 0 14px rgba(143,199,255,.35);
}
.gallery-lb-btn:disabled { opacity: .25; cursor: not-allowed; }
.gallery-lb-counter {
  font-family: 'Cinzel', serif; font-size: 0.65rem;
  letter-spacing: .25em; color: var(--sapphire-bright); opacity: .6;
  min-width: 60px; text-align: center;
}
.gallery-lb-close {
  position: absolute; top: -14px; right: -14px;
  width: 32px; height: 32px;
  background: rgba(75,130,214,.18);
  border: 1px solid rgba(75,130,214,.4);
  color: var(--sapphire-bright);
  font-size: 0.71rem; cursor: pointer;
  display: grid; place-items: center;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  transition: all .2s ease;
}
.gallery-lb-close:hover {
  background: rgba(75,130,214,.35);
  box-shadow: 0 0 14px rgba(143,199,255,.4);
}

/* Mobile gallery */
@media (max-width: 800px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 14px 16px; }
  .gallery-header { padding: 14px 16px 12px; }
  .gallery-lightbox-img { max-height: 60vh; }
}

/* Mobile chapter header — hidden on desktop, shown on mobile */
.mobile-chapter-header { display: none; }

/* =====================================================
   SCROLL OVERLAY
   ===================================================== */
.scroll-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: backdrop-in .3s ease forwards;
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.scroll-backdrop.closing {
  animation: backdrop-out .35s ease forwards;
}
@keyframes backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.scroll-wrap {
  position: relative;
  width: min(850px, 96vw);
  display: flex; flex-direction: column;
  align-items: stretch;
  filter: drop-shadow(0 24px 64px rgba(0,0,0,.95)) drop-shadow(0 0 40px rgba(180,120,40,.18));
  animation: scroll-unfurl .55s cubic-bezier(.22,.68,0,1.2) forwards;
  transform-origin: center center;
}
.scroll-wrap.closing {
  animation: scroll-furl .3s cubic-bezier(.55,0,1,.45) forwards;
}
@keyframes scroll-unfurl {
  0%   { transform: scaleY(0.04); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes scroll-furl {
  0%   { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.04); opacity: 0; }
}

/* Top rod */
.scroll-rod {
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(180deg,
    #fffae8 0%, #f4d98b 18%, #c99a45 42%, #8a6030 68%, #3a2410 100%);
  box-shadow:
    0 4px 14px rgba(0,0,0,.7),
    inset 0 2px 4px rgba(255,248,200,.6),
    inset 0 -2px 6px rgba(0,0,0,.5);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.scroll-rod::before, .scroll-rod::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #fffae8 0%, #f4d98b 22%, #c99a45 48%, #7a5220 74%, #2a1a08 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.7), inset 0 1px 3px rgba(255,245,200,.6);
}
.scroll-rod::before { left: 10px; }
.scroll-rod::after  { right: 10px; }

/* Parchment body */
.scroll-body {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(70,40,15,.3) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(70,40,15,.3) 0%, transparent 55%),
    url('../../assets/images/parchment-dark.jpg') center / cover,
    #e2c97a;
  padding: 36px 52px 40px;
  overflow-y: auto;
  max-height: 72vh;
  /* Rolled-edge shadow top & bottom */
  box-shadow:
    inset 0  8px 18px rgba(0,0,0,.22),
    inset 0 -8px 18px rgba(0,0,0,.22);
  position: relative; z-index: 1;
}
.scroll-body.stone {
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(20,30,55,.5) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(20,30,55,.5) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 25%, #2d3748 0%, #1a1f2b 55%, #0a0d14 100%);
  color: #d4dff2;
}
.scroll-body.amethyst {
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(80,20,120,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(80,20,120,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 25%, #2d1a3d 0%, #1a0f28 55%, #09040f 100%);
  color: #e4d4f8;
}
.scroll-body::-webkit-scrollbar { width: 5px; }
.scroll-body::-webkit-scrollbar-thumb { background: rgba(154,111,42,.35); border-radius: 3px; }
.scroll-body.stone::-webkit-scrollbar-thumb { background: rgba(75,130,214,.35); }
.scroll-body.amethyst::-webkit-scrollbar-thumb { background: rgba(185,106,217,.35); }

/* Wood scroll */
.scroll-body.wood {
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(60,25,5,.4) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(60,25,5,.4) 0%, transparent 55%),
    url('../../assets/images/wood.jpg') center / cover,
    #2a1508;
  color: #f0dfc0;
}
.scroll-body.wood::-webkit-scrollbar-thumb { background: rgba(196,154,108,.4); }

/* Ragged top & bottom edges on parchment */
.scroll-edge {
  height: 18px; flex-shrink: 0;
  position: relative; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 50%, #c9a84c 0%, #a07828 60%, #6a4e18 100%);
  clip-path: polygon(
    0% 100%, 2% 30%, 5% 80%, 8% 20%, 11% 70%, 14% 15%,
    17% 65%, 20% 10%, 23% 60%, 26% 5%,  29% 55%, 32% 0%,
    35% 50%, 38% 5%,  41% 55%, 44% 0%,  47% 50%, 50% 8%,
    53% 55%, 56% 0%,  59% 50%, 62% 5%,  65% 55%, 68% 0%,
    71% 50%, 74% 10%, 77% 60%, 80% 5%,  83% 55%, 86% 0%,
    89% 50%, 92% 15%, 95% 60%, 98% 20%, 100% 70%, 100% 100%
  );
}
.scroll-edge.bottom {
  clip-path: polygon(
    0% 0%, 2% 70%, 5% 20%, 8% 80%, 11% 30%, 14% 85%,
    17% 35%, 20% 90%, 23% 40%, 26% 95%, 29% 45%, 32% 100%,
    35% 50%, 38% 95%, 41% 45%, 44% 100%, 47% 50%, 50% 92%,
    53% 45%, 56% 100%, 59% 50%, 62% 95%, 65% 45%, 68% 100%,
    71% 50%, 74% 90%, 77% 40%, 80% 95%, 83% 45%, 86% 100%,
    89% 50%, 92% 85%, 95% 40%, 98% 80%, 100% 30%, 100% 0%
  );
}
.scroll-edge.stone {
  background: radial-gradient(ellipse at 50% 50%, #2d3748 0%, #1a1f2b 60%, #0a0d14 100%);
}
.scroll-edge.amethyst {
  background: radial-gradient(ellipse at 50% 50%, #3d1a52 0%, #2a1040 60%, #100620 100%);
}
.scroll-edge.wood {
  background: radial-gradient(ellipse at 50% 50%, #5a2e10 0%, #3a1c08 60%, #1a0c04 100%);
}

/* Close button */
.scroll-close {
  position: absolute;
  top: -10px; right: -10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #fffae8 0%, #f4d98b 25%, #c99a45 55%, #5a3e18 100%);
  border: none; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 900;
  color: rgba(30,15,5,.75);
  box-shadow: 0 3px 10px rgba(0,0,0,.7), inset 0 1px 3px rgba(255,245,200,.5);
  display: grid; place-items: center;
  transition: all .2s ease;
  z-index: 10;
  line-height: 1;
}
.scroll-close:hover {
  transform: scale(1.12) rotate(10deg);
  box-shadow: 0 4px 16px rgba(0,0,0,.8), 0 0 18px rgba(233,201,122,.5);
}

/* Scroll typography */
.scroll-eyebrow {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: .45em;
  font-size: 0.59rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 4px;
}
.stone .scroll-eyebrow { color: var(--sapphire-bright); }

.scroll-title {
  font-family: var(--display-face);
  font-size: 1.94rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.1;
}
.stone .scroll-title { color: var(--gold-bright); }

.scroll-rule {
  height: 12px; margin: 10px 0 18px;
  background:
    linear-gradient(90deg, transparent, var(--gold-deep) 20%, var(--gold) 50%, var(--gold-deep) 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 4px) center / 100% 100% no-repeat;
}
.stone .scroll-rule {
  background:
    linear-gradient(90deg, transparent, #6b8bc0 20%, #b8d4ff 50%, #6b8bc0 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, #b8d4ff 0 3px, transparent 4px) center / 100% 100% no-repeat;
}

.scroll-version {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 10px;
}
.scroll-version-num {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem; font-weight: 700;
  color: var(--emerald-deep);
  letter-spacing: .08em;
}
.stone .scroll-version-num { color: var(--sapphire-bright); }
.scroll-version-date {
  font-size: 0.91rem; font-style: italic; opacity: .6;
}

.scroll-entries { list-style: none; padding: 0; margin: 0 0 22px; }
.scroll-entries li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 0.88rem; line-height: 1.5;
  border-bottom: 1px solid rgba(154,111,42,.15);
}
.stone .scroll-entries li { border-bottom-color: rgba(75,130,214,.15); }
.scroll-entries li:last-child { border-bottom: none; }
.scroll-entries li::before {
  content: '';
  position: absolute; left: 4px; top: 14px;
  width: 7px; height: 7px;
  background: var(--gold-deep); transform: rotate(45deg);
}
.stone .scroll-entries li::before { background: var(--sapphire); }

.scroll-entries li .tag {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.53rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: middle;
  opacity: .75;
}
.tag.new     { color: var(--gold-bright); background-color: var(--emerald-deep);}
.tag.fix     { color: var(--gold-bright); background-color: var(--ruby); }
.tag.change  { color: var(--gold-bright); background-color: var(--gold-deep); }
.stone .tag.new    { color: var(--ink); background-color: var(--emerald-bright); }
.stone .tag.fix    { color: var(--ink); background-color: #f08080; }
.stone .tag.change { color: var(--ink); background-color: var(--gold); }

/* ── Forge scroll (BTB) ── */
.scroll-body.forge {
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(180,50,10,.4) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(180,50,10,.28) 0%, transparent 55%),
    #1c0e05;
}
.scroll-edge.forge { background: radial-gradient(ellipse at 50% 50%, #2c1408 0%, #160604 60%, #060202 100%); }
.forge .scroll-eyebrow { color: var(--ember-bright); }
.forge .scroll-title   { color: var(--ember-bright); }
.forge .scroll-rule {
  background:
    linear-gradient(90deg, transparent, var(--ember-deep) 20%, var(--ember-bright) 50%, var(--ember-deep) 80%, transparent) center / 100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, var(--ember) 0 3px, transparent 4px) center / 100% 100% no-repeat;
}
.forge .scroll-version-num { color: var(--ember-bright); }
.forge .scroll-entries li { border-bottom-color: rgba(212,64,16,.15); }
.forge .scroll-entries li::before { background: var(--ember); }
.forge .tag.new    { color: var(--emerald-bright); }
.forge .tag.fix    { color: #f08080; }
.forge .tag.change { color: var(--ember-bright); }

/* Mobile scroll adjustments */
@media (max-width: 800px) {
  .scroll-body { padding: 24px 22px 28px; max-height: 65vh; }
  .scroll-title { font-size: 1.59rem; }
  .scroll-wrap { width: 100%; }
}

/* loader */
#loader { position:fixed; inset:0; background:#060403; display:grid; place-items:center; z-index:99999; transition:opacity .6s ease; color:var(--gold); font-family:'Cinzel',serif; letter-spacing:.3em; font-size: 2.50rem; font-weight: 500; }
#loader.hidden { opacity:0; pointer-events:none; }

/* =====================================================
   RESPONSIVE — LAPTOP FIX (medium viewports)
   Stop content being cut off on 14" screens
   ===================================================== */
@media (max-height: 820px) and (min-width: 801px) {
  :root {
    --page-h: min(84vh, 900px);
  }
  html { font-size: 17px; }
  .book-shell { inset: 0 0 64px 0; }
  .book-nav { bottom: 12px; }
  .page-content { padding: 28px 40px 34px 40px; }
  .cols { gap: 28px; }
  .gilded-card { padding: 14px 16px; }
  h2.title { font-size: 2.35rem !important; }
  .cover-title { font-size: clamp(2.82rem, 7vw, 5.65rem) !important; }
}

/* =====================================================
   RESPONSIVE — MOBILE (≤ 800px)
   Full redesign: no book shell, scrollable pages
   ===================================================== */
@media (max-width: 800px) {

  /* Hide the fixed scene embers behind a simpler gradient */
  .scene {
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse 120% 60% at 50% 120%, rgba(255,100,25,.45) 0%, rgba(120,45,12,.35) 40%, transparent 72%),
      radial-gradient(ellipse at 50% 30%, #1a1208 0%, #0a0604 60%, #030202 100%);
  }

  /* Root layout: flow, not fixed */
  .book-shell {
    position: relative;
    inset: auto;
    display: block;
    padding: 0 0 80px 0;
    min-height: 100vh;
  }

  /* Book becomes a flat card */
  .book {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
    min-height: auto;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  /* Hide all decorative 3D book chrome */
  .book-spine,
  .book-spine-title,
  .book-spine-emblem,
  .book-studs-top,
  .book-studs-bottom,
  .book-studs-right,
  .book-clasp,
  .book::before,
  .book::after { display: none !important; }

  /* Hide corner ornaments (SVG elements placed absolutely) */
  .book > svg { display: none !important; }

  /* Page inner: flow, full width */
  .page-inner {
    position: relative;
    inset: auto;
    width: 100%;
    overflow: visible;
  }

  /* Page themes: auto height, scrollable */
  .page-parchment,
  .page-leather,
  .page-stone {
    position: relative !important;
    inset: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  /* Parchment gets a warm mobile background */
  .page-parchment {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(70,40,15,.4) 0%, transparent 60%),
      #e8d5a0;
  }
  .page-parchment::before { display: none; }

  /* Leather gets a dark mobile background */
  .page-leather {
    background: radial-gradient(ellipse at 50% 0%, #3a2010 0%, #150a04 100%);
  }
  .page-leather::after { display: none; }

  /* Stone gets a dark blue mobile background */
  .page-stone {
    background: radial-gradient(ellipse at 50% 0%, #1e2535 0%, #0a0d14 100%);
  }

  /* Page content: full flow */
  .page-content {
    padding: 24px 20px 32px;
    font-size: 0.88rem;
    min-height: auto;
  }

  /* Typography scaling */
  h2.title { font-size: 2rem !important; }
  h1.title { font-size: 2.24rem !important; }
  .cover-title { font-size: clamp(3.06rem, 14vw, 5.18rem) !important; }
  .cover-body { padding: 48px 28px; gap: 14px; min-height: 100vh; }
  .cover-crests { gap: 32px; flex-wrap: wrap; justify-content: center; }
  .cover-crests img { width: 100px; height: 100px; }
  .cover-mark { width: 72px; height: 72px; }
  .cover-mark-letter { font-size: 1.88rem; }

  /* Columns stack vertically */
  .cols { flex-direction: column; gap: 16px; overflow: visible; }
  .col  { min-height: auto; overflow: visible; }

  /* Cards */
  .gilded-card { padding: 14px 16px; }

  /* Install badges */
  .install-row { gap: 8px; }
  .install-badge { padding: 8px 12px; font-size: 0.53rem; flex: 1; min-width: 80px; justify-content: center; }

  /* Buttons */
  .row.mt-auto { margin-top: 20px; }
  .btn { padding: 9px 14px; font-size: 0.59rem; }

  /* Slash block */
  .slash-block { font-size: 0.71rem; padding: 12px 14px; }

  /* Drop cap shrink */
  .drop-cap::first-letter { font-size: 3em; }

  /* Page number */
  .page-num { position: relative; left: auto; transform: none; text-align: center; margin-top: 24px; display: block; }

  /* Mobile chapter divider header */
  .mobile-chapter-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(90deg, rgba(30,15,5,.95), rgba(10,6,3,.98));
    border-bottom: 1px solid rgba(154,111,42,.35);
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .mobile-chapter-header .ch-title {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    flex: 1;
  }

  /* Navigation — fixed bottom bar, compact */
  .book-nav {
    position: fixed;
    width: 100% !important;
    bottom: 0; left: 0; right: 0;
    transform: none;
    border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 8px 12px;
    gap: 10px;
    justify-content: space-between;
  }
  .nav-label {
    font-size: 0.59rem;
    letter-spacing: .15em;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-dots { gap: 7px; }
  .nav-dot  { width: 8px; height: 8px; }
  .nav-btn  { width: 34px; height: 34px; font-size: 0.94rem; flex-shrink: 0; }

  /* Tweaks panel: full width on mobile */
  .tweaks-panel {
    right: 0; left: 0; bottom: 64px;
    width: auto;
    border-left: none; border-right: none;
  }

  /* Tooltip: disable on touch */
  .wow-tooltip { display: none !important; }

  /* Sealed tome: smaller */
  .sealed-tome { width: 130px; height: 165px; }
  .sealed-wax  { width: 52px; height: 52px; font-size: 1.41rem; }
}

/* Very small phones */
@media (max-width: 380px) {
  .page-content { padding: 20px 14px 28px; }
  .cover-body { padding: 36px 18px; }
  .cover-title { font-size: 13vw !important; }
  .cover-crests { gap: 20px; }
  .cover-crests img { width: 84px; height: 84px; }
  .cols { gap: 12px; }
  h2.title { font-size: 1.65rem !important; }
  .nav-dots { display: none; }
}