/* ============================================================
   悬锋城阅读室 · Castrum Kremnos Reading Room
   ------------------------------------------------------------
   Curated reading room above the version-grouped readables list.
   Three themes (light · sepia · dark), desktop + mobile layouts.

   All theme-varying values flow through CSS custom properties
   defined at .kremnos-room scope. Default values = light theme;
   sepia and dark blocks just re-assign the tokens (no rule
   duplication). Same pattern applies to mobile chrome via the
   @media block.
   ============================================================ */

/* ─── Token defaults (light theme) ──────────────────────────────── */
.kremnos-room {
  /* Geometry — read by JS to compute the manual mbar transform. */
  --kr-header-h: 56px;
  --kr-mbar-h: 57px;

  /* Booklist (desktop left rail + mobile picker overlay surface). */
  --kr-booklist-bg: linear-gradient(180deg, rgba(245, 241, 232, 0.70), rgba(232, 226, 213, 0.70));
  --kr-booklist-border: var(--border-subtle);
  --kr-booklist-mobile-bg: var(--bg-base, #ece8e0);
  --kr-booklist-mobile-blur: none;

  /* Book entry list rows. */
  --kr-entry-divider: rgba(50, 38, 30, 0.06);
  --kr-entry-hover-bg: var(--gold-glow);
  --kr-entry-active-bg: linear-gradient(90deg, rgba(176, 80, 64, 0.13), rgba(176, 80, 64, 0.02) 70%, transparent);
  --kr-entry-active-rule: var(--gold);
  --kr-entry-active-zh: var(--gold-dim);
  --kr-entry-active-ver: var(--gold);
  --kr-entry-ver-color: var(--text-muted);

  /* Reader (desk surround around the parchment). */
  --kr-reader-bg:
    radial-gradient(120% 80% at 50% 0%, rgba(60, 42, 28, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  --kr-reader-border: var(--border-subtle);
  --kr-reader-inset-highlight: rgba(255, 255, 255, 0.45);
  --kr-reader-bar-border: var(--border-subtle);

  /* Aa font-size button. */
  --kr-aa-border: var(--border-medium);
  --kr-aa-color: var(--text-secondary);
  --kr-aa-hover-bg: var(--gold-glow);
  --kr-aa-hover-color: var(--gold);
  --kr-aa-hover-border: var(--border-accent);

  /* Parchment surface — outer drop-shadow + aged-ring background. */
  --kr-parchment-shadow:
    0 18px 32px -18px rgba(60, 40, 20, 0.30),
    0 6px 14px -10px rgba(60, 40, 20, 0.22);
  --kr-paper-base-top: #f1e8d0;
  --kr-paper-base-bot: #ece3c4;
  --kr-paper-corner-strong: rgba(120, 80, 36, 0.22);
  --kr-paper-corner-soft:   rgba(120, 80, 36, 0.20);
  --kr-paper-edge-top: rgba(120, 80, 36, 0.14);
  --kr-paper-edge-bot: rgba(120, 80, 36, 0.08);
  /* `none` here = no central warm halo (light + sepia). Dark sets it
     to a radial-gradient(...) so the tobacco paper feels candlelit. */
  --kr-paper-glow: none;
  --kr-paper-inset-broad: rgba(120, 80, 36, 0.14);
  --kr-paper-inset-edge:  rgba(90, 60, 22, 0.16);
  --kr-paper-inset-top:   rgba(255, 250, 230, 0.55);
  --kr-paper-grain-strong: rgba(120, 80, 30, 0.035);
  --kr-paper-grain-weak:   rgba(120, 80, 30, 0.02);
  --kr-paper-grain-blend: multiply;

  /* Parchment typography. */
  --kr-paper-text:        #2a1e12;
  --kr-paper-title:       #2a1e12;
  --kr-paper-en:          rgba(74, 50, 24, 0.62);
  --kr-paper-soft:        rgba(74, 50, 24, 0.78); /* blurb */
  --kr-paper-muted:       rgba(74, 50, 24, 0.55); /* stagedir, empty, picker close */
  --kr-paper-italic:      rgba(74, 50, 24, 0.72);
  --kr-paper-accent:      var(--gold-dim);        /* headings, bold, drop cap, chapter name */
  --kr-paper-ornament:    rgba(74, 50, 24, 0.45);
  --kr-paper-rule:        rgba(74, 50, 24, 0.38);
  --kr-paper-tab-divider: rgba(74, 50, 24, 0.18);
  --kr-paper-tab:         rgba(74, 50, 24, 0.55);
  --kr-paper-tab-hover:   var(--gold);
  --kr-paper-tab-active:  var(--gold-dim);

  /* Mobile-only chrome (mbar at top of room, picker-head + booklist
     fullscreen overlay when picker open). Defaults are the light
     parchment-cream frosted bar. */
  --kr-mbar-bg: rgba(245, 241, 232, 0.94);
  --kr-mbar-blur: blur(10px);
  --kr-mbar-border: var(--border-subtle);
  --kr-mbar-kicker: var(--gold);
  --kr-mbar-title: var(--text-primary);
  --kr-mbar-chev: var(--text-muted);
  --kr-mbar-chev-active: var(--gold);
  --kr-picker-head-bg: rgba(245, 241, 232, 0.96);
  --kr-picker-close: var(--text-secondary);
  --kr-picker-close-active: var(--gold);
  --kr-tap-bg: var(--gold-glow);

  display: block;
  margin: 0 0 56px;
  padding: 0 0 40px;
  border-bottom: 1px solid var(--border-subtle);
}

/* Mobile-only chrome stays hidden on desktop. */
.kremnos-room .kr-mbar,
.kremnos-room .kr-picker-head { display: none; }

/* ─── Grid ──────────────────────────────────────────────────────── */
.kr-grid {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* ─── Book list ─────────────────────────────────────────────────── */
.kr-booklist {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  background: var(--kr-booklist-bg);
  border: 1px solid var(--kr-booklist-border);
}
.kr-booklist-items {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.kr-booklist-items::-webkit-scrollbar { width: 8px; }
.kr-booklist-items::-webkit-scrollbar-track { background: transparent; }
.kr-booklist-items::-webkit-scrollbar-thumb {
  background: rgba(50, 38, 30, 0.16);
  border-radius: 4px;
}
.kr-booklist-items::-webkit-scrollbar-thumb:hover {
  background: rgba(50, 38, 30, 0.26);
}

.kr-book-entry {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 18px 13px 16px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--kr-entry-divider);
  cursor: pointer;
  transition: background 0.18s ease, border-left-color 0.18s ease;
  font: inherit;
  color: inherit;
}
.kr-book-entry:last-child { border-bottom: 0; }
.kr-book-entry:hover { background: var(--kr-entry-hover-bg); }
.kr-book-entry.is-active {
  background: var(--kr-entry-active-bg);
  border-left-color: var(--kr-entry-active-rule);
}
.kr-book-entry-zh {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}
.kr-book-entry.is-active .kr-book-entry-zh { color: var(--kr-entry-active-zh); }
.kr-book-entry-en {
  margin: 4px 0 0;
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kr-book-entry-blurb {
  margin: 6px 0 0;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  opacity: 0.78;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kr-book-entry-ver {
  position: absolute;
  top: 13px;
  right: 14px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--kr-entry-ver-color);
  opacity: 0.55;
}
.kr-book-entry.is-active .kr-book-entry-ver { color: var(--kr-entry-active-ver); opacity: 1; }

/* ─── Reader (desk + parchment frame) ───────────────────────────── */
.kr-reader {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 720px;
  background: var(--kr-reader-bg);
  border: 1px solid var(--kr-reader-border);
  box-shadow: 0 1px 0 var(--kr-reader-inset-highlight) inset;
}
.kr-reader-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 16px;
  border-bottom: 1px solid var(--kr-reader-bar-border);
  flex-shrink: 0;
}
.kr-aa-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 11px;
  background: transparent;
  border: 1px solid var(--kr-aa-border);
  color: var(--kr-aa-color);
  font-family: 'Cinzel', serif;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.kr-aa-btn:hover {
  background: var(--kr-aa-hover-bg);
  color: var(--kr-aa-hover-color);
  border-color: var(--kr-aa-hover-border);
}
.kr-aa-sm { font-size: 11px; font-weight: 500; line-height: 1; }
.kr-aa-lg { font-size: 15px; font-weight: 600; line-height: 1; }

.kr-reader-stage {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 36px 30px 44px;
  overflow-y: auto;
  min-height: 0;
}

/* ─── Parchment ─────────────────────────────────────────────────── */
.kr-parchment {
  position: relative;
  width: min(680px, 100%);
  box-shadow: var(--kr-parchment-shadow);
}
.kr-parchment-inner {
  position: relative;
  padding: 56px 64px 52px;
  /* Aged-ring approach: nearly-flat base + pixel-anchored edge
     browning so tall parchments don't accumulate a dark lower half.
     The corners + top/bottom bands stay the same depth regardless of
     parchment height. */
  background-image:
    radial-gradient(120px 120px at 0% 0%,     var(--kr-paper-corner-strong), transparent 70%),
    radial-gradient(120px 120px at 100% 0%,   var(--kr-paper-corner-soft),   transparent 70%),
    radial-gradient(140px 140px at 0% 100%,   var(--kr-paper-corner-strong), transparent 70%),
    radial-gradient(140px 140px at 100% 100%, var(--kr-paper-corner-strong), transparent 70%),
    linear-gradient(to top,    var(--kr-paper-edge-top) 0px, transparent 140px),
    linear-gradient(to bottom, var(--kr-paper-edge-bot) 0px, transparent 90px),
    var(--kr-paper-glow),
    linear-gradient(180deg, var(--kr-paper-base-top) 0%, var(--kr-paper-base-bot) 100%);
  box-shadow:
    inset 0 0 60px 0 var(--kr-paper-inset-broad),
    inset 0 0 18px 0 var(--kr-paper-inset-edge),
    inset 0 1px 0 var(--kr-paper-inset-top);
}
.kr-parchment-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  var(--kr-paper-grain-strong) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--kr-paper-grain-weak)   0 1px, transparent 1px 4px);
  pointer-events: none;
  mix-blend-mode: var(--kr-paper-grain-blend);
}
.kr-parchment-inner > * { position: relative; z-index: 1; }

/* ─── Title block + ornament + blurb + chapter switcher ─────────── */
.kr-title-block { text-align: center; padding: 2px 0 4px; }
.kr-title {
  margin: 0;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0.10em;
  color: var(--kr-paper-title);
}
.kr-title-en {
  margin-top: 8px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kr-paper-en);
}

.kr-ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px auto 18px;
  max-width: 360px;
  color: var(--kr-paper-ornament);
}
.kr-ornament-rule {
  flex: 1;
  height: 1px;
  background: var(--kr-paper-rule);
}

.kr-blurb {
  margin: 0 auto 18px;
  max-width: 480px;
  text-align: center;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--kr-paper-soft);
}

.kr-chapter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin: 14px auto 6px;
  padding: 0 0 12px;
  max-width: 540px;
  border-bottom: 1px solid var(--kr-paper-tab-divider);
}
.kr-chapter-tab {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--kr-paper-tab);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.kr-chapter-tab:hover { color: var(--kr-paper-tab-hover); }
.kr-chapter-tab.is-active {
  color: var(--kr-paper-tab-active);
  border-bottom-color: var(--gold);
}
.kr-chapter-name {
  margin: 14px 0 4px;
  text-align: center;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--kr-paper-accent);
}

/* ─── Body text (parchment prose, headings, stage directions) ───── */
.kr-body {
  position: relative;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--kr-paper-text);
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  line-height: 1.95;
}
.kr-parchment-p {
  margin: 0;
  text-indent: 2em;
  text-align: justify;
  hyphens: auto;
  word-break: normal;
  /* Some readables (e.g. 看不懂文字的古语石板) are long unbroken runs of
     full-block chars with no whitespace; `anywhere` only kicks in as a
     last resort. */
  overflow-wrap: anywhere;
}
.kr-parchment-heading {
  margin: 14px 0 -2px;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.22em;
  color: var(--kr-paper-accent);
  text-align: center;
}
.kr-parchment-heading > strong,
.kr-parchment-heading > b { font-weight: 600; }
.kr-parchment-heading > em,
.kr-parchment-heading > i { font-style: normal; }
.kr-parchment-stagedir {
  margin: 0;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-style: italic;
  font-size: 0.88em;
  color: var(--kr-paper-muted);
  text-align: center;
  letter-spacing: 0.04em;
}
/* gameTextToHTML maps game <i>/<b> → <em>/<strong>; target both. */
.kr-parchment-p i, .kr-parchment-p em { color: var(--kr-paper-italic); }
.kr-parchment-p b, .kr-parchment-p strong { color: var(--kr-paper-accent); font-weight: 600; }
.kr-parchment-p-drop { text-indent: 0; }
.kr-parchment-p-empty {
  text-align: center;
  font-style: italic;
  color: var(--kr-paper-muted);
  text-indent: 0;
}
.kr-dropcap {
  float: left;
  font-family: 'Cinzel', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 0.95;
  color: var(--kr-paper-accent);
  padding: 4px 12px 0 0;
  shape-outside: margin-box;
}

/* ─── Narrow-desktop safety net ─────────────────────────────────── */
@media (max-width: 1100px) {
  .kr-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
  .kr-parchment-inner { padding: 44px 42px 40px; }
  .kr-title { font-size: 26px; }
  .kr-reader-stage { padding: 26px 18px 36px; }
}

/* ════════════════════════════════════════════════════════════════
   THEME OVERRIDES — re-assign tokens only, no rule duplication.
   ════════════════════════════════════════════════════════════════ */

:root[data-theme="sepia"] .kremnos-room {
  --kr-booklist-bg: linear-gradient(180deg, rgba(228, 212, 180, 0.55), rgba(206, 186, 148, 0.55));

  --kr-entry-divider: rgba(60, 44, 28, 0.08);
  --kr-entry-hover-bg: rgba(138, 74, 44, 0.08);
  --kr-entry-active-bg: linear-gradient(90deg, rgba(138, 74, 44, 0.18), rgba(138, 74, 44, 0.02) 70%, transparent);

  --kr-reader-bg:
    radial-gradient(120% 80% at 50% 0%, rgba(60, 42, 28, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(228, 218, 192, 0.55), rgba(214, 202, 172, 0.55));
  --kr-reader-bar-border: rgba(60, 44, 28, 0.16);
  --kr-aa-hover-bg: rgba(138, 74, 44, 0.10);

  --kr-paper-base-top: #d9c399;
  --kr-paper-base-bot: #cfb88b;
  --kr-paper-corner-strong: rgba(80, 44, 14, 0.26);
  --kr-paper-corner-soft:   rgba(80, 44, 14, 0.22);
  --kr-paper-edge-top: rgba(80, 44, 14, 0.18);
  --kr-paper-edge-bot: rgba(80, 44, 14, 0.10);
  --kr-paper-inset-broad: rgba(80, 44, 14, 0.18);
  --kr-paper-inset-edge:  rgba(60, 32, 6, 0.22);
  --kr-paper-inset-top:   rgba(255, 232, 200, 0.34);
  --kr-paper-grain-strong: rgba(80, 44, 14, 0.045);
  --kr-paper-grain-weak:   rgba(80, 44, 14, 0.028);

  --kr-paper-text:     #2c1f0f;
  --kr-paper-title:    #2c1f0f;
  --kr-paper-en:       rgba(60, 38, 14, 0.62);
  --kr-paper-soft:     rgba(60, 38, 14, 0.78);
  --kr-paper-muted:    rgba(60, 38, 14, 0.55);
  --kr-paper-italic:   rgba(60, 38, 14, 0.72);
  --kr-paper-ornament: rgba(60, 38, 14, 0.48);
  --kr-paper-rule:     rgba(60, 38, 14, 0.40);
  --kr-paper-tab-divider: rgba(60, 38, 14, 0.20);
  --kr-paper-tab:      rgba(60, 38, 14, 0.55);
}

:root[data-theme="dark"] .kremnos-room {
  --kr-booklist-bg: linear-gradient(180deg, #1a130c, #0e0a06);
  --kr-booklist-border: rgba(168, 132, 90, 0.13);
  --kr-booklist-mobile-bg: #0d0a06;

  --kr-entry-divider: rgba(168, 132, 90, 0.06);
  --kr-entry-hover-bg: rgba(168, 132, 90, 0.07);
  --kr-entry-active-bg: linear-gradient(90deg, rgba(168, 132, 90, 0.18), rgba(168, 132, 90, 0.02) 70%, transparent);
  --kr-entry-active-zh: var(--gold-bright);
  --kr-entry-active-ver: var(--gold-bright);
  --kr-entry-ver-color: rgba(232, 220, 196, 0.35);

  --kr-reader-bg:
    radial-gradient(120% 80% at 50% 0%, rgba(168, 132, 90, 0.06), transparent 60%),
    linear-gradient(180deg, #100b07, #0a0704);
  --kr-reader-border: rgba(168, 132, 90, 0.13);
  --kr-reader-inset-highlight: rgba(168, 132, 90, 0.04);
  --kr-reader-bar-border: rgba(168, 132, 90, 0.12);

  --kr-aa-border: rgba(168, 132, 90, 0.24);
  --kr-aa-hover-bg: rgba(168, 132, 90, 0.10);
  --kr-aa-hover-color: var(--gold-bright);
  --kr-aa-hover-border: rgba(168, 132, 90, 0.50);

  --kr-parchment-shadow:
    0 18px 32px -18px rgba(0, 0, 0, 0.80),
    0 6px 14px -10px rgba(0, 0, 0, 0.60);
  --kr-paper-base-top: #332518;
  --kr-paper-base-bot: #1f160e;
  --kr-paper-corner-strong: rgba(0, 0, 0, 0.45);
  --kr-paper-corner-soft:   rgba(0, 0, 0, 0.40);
  --kr-paper-edge-top: rgba(0, 0, 0, 0.22);
  --kr-paper-edge-bot: rgba(0, 0, 0, 0.16);
  /* Candle-glow halo so tobacco parchment doesn't read as dead-flat. */
  --kr-paper-glow: radial-gradient(60% 40% at 50% 35%, rgba(80, 58, 30, 0.30), transparent 80%);
  --kr-paper-inset-broad: rgba(0, 0, 0, 0.32);
  --kr-paper-inset-edge:  rgba(0, 0, 0, 0.40);
  --kr-paper-inset-top:   rgba(220, 180, 120, 0.10);
  --kr-paper-grain-strong: rgba(220, 180, 120, 0.04);
  --kr-paper-grain-weak:   rgba(220, 180, 120, 0.025);
  --kr-paper-grain-blend: normal;

  --kr-paper-text:     var(--text-primary);
  --kr-paper-title:    var(--text-primary);
  --kr-paper-en:       var(--text-muted);
  --kr-paper-soft:     var(--text-secondary);
  --kr-paper-muted:    rgba(220, 180, 120, 0.50);
  --kr-paper-italic:   rgba(220, 180, 120, 0.72);
  --kr-paper-accent:   var(--gold-bright);
  --kr-paper-ornament: rgba(220, 180, 120, 0.42);
  --kr-paper-rule:     rgba(220, 180, 120, 0.30);
  --kr-paper-tab-divider: rgba(220, 180, 120, 0.16);
  --kr-paper-tab:      rgba(220, 180, 120, 0.50);
  --kr-paper-tab-hover:  var(--gold-bright);
  --kr-paper-tab-active: var(--gold-bright);
}

/* ════════════════════════════════════════════════════════════════
   MOBILE (≤768px) — master-detail layout: sticky title bar at top
   that opens a fullscreen picker overlay. Desktop two-pane grid
   collapses to a single-column reader.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kremnos-room {
    margin: 0 -18px 28px;
    padding: 0 0 24px;
  }

  /* Mbar — `position: relative` (in flow, occupies 57px at the top of
     the room). JS scroll listener applies translateY() to keep it
     visually pinned at viewport-top:HEADER_H. We can't use sticky or
     fixed because sepia + dark apply backdrop-filter to body, which
     creates a containing block for fixed-positioned descendants and
     hijacks both. */
  .kremnos-room .kr-mbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    position: relative;
    z-index: 5;
    background: var(--kr-mbar-bg);
    backdrop-filter: var(--kr-mbar-blur);
    -webkit-backdrop-filter: var(--kr-mbar-blur);
    border-bottom: 1px solid var(--kr-mbar-border);
    will-change: transform;
    transition: visibility 0.18s;
  }
  .kremnos-room .kr-mbar.kr-mbar-hidden { visibility: hidden; }

  .kr-mbar-picker {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 8px;
    margin: -6px 0 -6px -8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    min-height: 44px;
    position: relative;
  }
  .kr-mbar-picker:active { background: var(--kr-tap-bg); }
  .kr-mbar-kicker {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kr-mbar-kicker);
    line-height: 1.2;
  }
  .kr-mbar-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, Georgia, serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    color: var(--kr-mbar-title);
    letter-spacing: 0.03em;
    width: 100%;
    padding-right: 18px;
  }
  .kr-mbar-chev {
    position: absolute;
    right: 8px;
    bottom: 10px;
    color: var(--kr-mbar-chev);
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .kremnos-room.is-picker-open .kr-mbar-chev {
    transform: rotate(180deg);
    color: var(--kr-mbar-chev-active);
  }

  .kr-aa-btn--mobile {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 36px;
    padding: 4px 10px;
  }

  /* Grid: collapse to single-column reader. */
  .kremnos-room .kr-grid {
    display: block;
    padding: 0;
  }

  /* Booklist: fullscreen overlay when picker is open. */
  .kremnos-room .kr-booklist {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px) + 46px); /* site header + picker head */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    max-height: none;
    height: auto;
    background: var(--kr-booklist-mobile-bg);
    backdrop-filter: var(--kr-booklist-mobile-blur);
    -webkit-backdrop-filter: var(--kr-booklist-mobile-blur);
    border: 0;
    border-top: 1px solid var(--kr-mbar-border);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
    visibility: hidden;
  }
  .kremnos-room.is-picker-open .kr-booklist {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }
  .kremnos-room .kr-booklist-items {
    padding: 4px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .kr-book-entry {
    padding: 16px 18px 16px 18px;
    min-height: 56px;
    border-left-width: 3px;
  }
  .kr-book-entry-zh { font-size: 15.5px; }
  .kr-book-entry-en { font-size: 9px; }
  .kr-book-entry-blurb { font-size: 12px; -webkit-line-clamp: 3; }
  .kr-book-entry-ver { top: 16px; right: 18px; }

  /* Picker head — slim bar with the close X, above the booklist overlay. */
  .kremnos-room .kr-picker-head {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 51;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 46px;
    padding: 0 14px;
    background: var(--kr-picker-head-bg);
    backdrop-filter: var(--kr-mbar-blur);
    -webkit-backdrop-filter: var(--kr-mbar-blur);
    border-bottom: 1px solid var(--kr-mbar-border);
    transform: translateY(-110%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
    visibility: hidden;
  }
  .kremnos-room.is-picker-open .kr-picker-head {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }
  .kr-picker-close {
    width: 44px;
    height: 44px;
    margin-right: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--kr-picker-close);
  }
  .kr-picker-close:active { color: var(--kr-picker-close-active); }

  /* Reader on mobile — full-width minus 12px gutters. */
  .kremnos-room .kr-reader {
    margin: 14px 12px 0;
    min-height: 0;
  }
  .kr-reader-bar { display: none; } /* desktop reader bar; Aa moves to mbar */
  .kr-reader-stage { padding: 18px 10px 28px; overflow: visible; }

  .kr-parchment { width: 100%; }
  .kr-parchment-inner {
    padding: 36px 26px 32px;
    box-shadow:
      inset 0 0 38px 0 var(--kr-paper-inset-broad),
      inset 0 0 14px 0 var(--kr-paper-inset-edge),
      inset 0 1px 0 var(--kr-paper-inset-top);
  }
  .kr-title { font-size: 22px; letter-spacing: 0.08em; }
  .kr-title-en { font-size: 10.5px; letter-spacing: 0.22em; margin-top: 6px; }

  .kr-ornament { margin: 16px auto 14px; gap: 10px; max-width: 260px; }
  .kr-ornament svg { width: 60px; height: 14px; }

  .kr-blurb { font-size: 13px; line-height: 1.8; max-width: none; padding: 0 4px; }
  .kr-chapter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    max-width: none;
    padding: 0 0 10px;
    margin: 10px -4px 4px;
    scrollbar-width: none;
  }
  .kr-chapter-tabs::-webkit-scrollbar { display: none; }
  .kr-chapter-tab {
    flex-shrink: 0;
    padding: 6px 10px;
    min-height: 36px;
    font-size: 12.5px;
  }
  .kr-chapter-name { font-size: 12.5px; margin: 10px 0 2px; }

  .kr-body { margin-top: 18px; line-height: 1.92; gap: 12px; }
  .kr-parchment-p { text-indent: 2em; }
  .kr-dropcap { font-size: 38px; padding: 3px 9px 0 0; }

  /* Mobile theme overrides — re-assign mobile-chrome tokens only. */
  :root[data-theme="sepia"] .kremnos-room {
    /* Very light tint + strong blur — preserves the painting feel
       but blurs scrolled content behind so text doesn't ghost through. */
    --kr-mbar-bg: rgba(214, 194, 158, 0.35);
    --kr-mbar-blur: blur(14px) saturate(120%);
    --kr-mbar-border: rgba(60, 44, 28, 0.22);
    --kr-mbar-chev: rgba(60, 44, 28, 0.55);
    --kr-picker-head-bg: rgba(214, 194, 158, 0.94);
    --kr-booklist-mobile-bg: rgba(225, 210, 180, 0.96);
    --kr-booklist-mobile-blur: blur(16px);
    --kr-tap-bg: rgba(138, 74, 44, 0.10);
  }
  :root[data-theme="dark"] .kremnos-room {
    --kr-mbar-bg: rgba(13, 10, 6, 0.88);
    --kr-mbar-border: rgba(168, 132, 90, 0.22);
    --kr-mbar-kicker: var(--gold-bright);
    --kr-mbar-chev: rgba(220, 180, 120, 0.55);
    --kr-mbar-chev-active: var(--gold-bright);
    --kr-picker-head-bg: rgba(13, 10, 6, 0.94);
    --kr-picker-close: rgba(220, 180, 120, 0.70);
    --kr-picker-close-active: var(--gold-bright);
    --kr-tap-bg: rgba(168, 132, 90, 0.10);
  }
}