/* ==========================================================================
   ממלכת עשתר — Digital Book Styles
   ========================================================================== */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: 'Frank Ruhl Libre', 'David Libre', serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { background: #0a0710; overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- THEME VARIABLES ---------------- */
body[data-theme="parchment"] {
  --page-bg: linear-gradient(160deg, #f6ecd8 0%, #efe2c4 100%);
  --page-bg-solid: #f2e6cd;
  --ink: #2b2115;
  --ink-soft: #5a4a35;
  --accent: #7a1f1f;
  --accent-soft: #9c3b2e;
  --rule: rgba(90, 60, 30, .25);
  --chrome-bg: rgba(20, 12, 10, .55);
}
body[data-theme="sepia"] {
  --page-bg: linear-gradient(160deg, #e9d3ad 0%, #dcc194 100%);
  --page-bg-solid: #e3c99e;
  --ink: #3a2611;
  --ink-soft: #6b4c28;
  --accent: #8a3315;
  --accent-soft: #a8501f;
  --rule: rgba(90, 55, 20, .3);
  --chrome-bg: rgba(30, 16, 8, .55);
}
body[data-theme="dark"] {
  --page-bg: linear-gradient(160deg, #241f2b 0%, #1a1620 100%);
  --page-bg-solid: #201b27;
  --ink: #e9e2d8;
  --ink-soft: #b3a99a;
  --accent: #c05a4a;
  --accent-soft: #d97a5f;
  --rule: rgba(230, 220, 200, .14);
  --chrome-bg: rgba(10, 8, 14, .6);
}
body[data-theme="night"] {
  --page-bg: linear-gradient(160deg, #0f0c14 0%, #08070c 100%);
  --page-bg-solid: #0b0a10;
  --ink: #cfc7d6;
  --ink-soft: #857c92;
  --accent: #8a4a9c;
  --accent-soft: #a566b8;
  --rule: rgba(200, 190, 220, .1);
  --chrome-bg: rgba(5, 4, 8, .7);
}

/* Font size scale */
body[data-fontsize="0"] { --fs-base: 14px; --fs-title: 22px; }
body[data-fontsize="1"] { --fs-base: 16px; --fs-title: 25px; }
body[data-fontsize="2"] { --fs-base: 18px; --fs-title: 28px; }
body[data-fontsize="3"] { --fs-base: 20px; --fs-title: 31px; }
body[data-fontsize="4"] { --fs-base: 23px; --fs-title: 35px; }

body[data-font="sans"] .page-content, body[data-font="sans"] .landing-desc { font-family: 'Rubik', 'Segoe UI', Arial, sans-serif; }

/* ==========================================================================
   LANDING SCREEN
   ========================================================================== */
.landing {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, #2a0f14 0%, #0a0710 55%, #050308 100%);
  overflow-y: auto; overflow-x: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.landing.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.landing-bg {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 15%, rgba(122, 31, 31, .35), transparent 60%),
    radial-gradient(50% 35% at 85% 75%, rgba(70, 30, 90, .3), transparent 60%);
}
.landing-embers { position: absolute; inset: 0; pointer-events: none; }
.landing-embers::before, .landing-embers::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 10% 90%, rgba(220,120,80,.8), transparent),
    radial-gradient(1.5px 1.5px at 30% 80%, rgba(200,90,60,.7), transparent),
    radial-gradient(2px 2px at 60% 95%, rgba(220,120,80,.6), transparent),
    radial-gradient(1.5px 1.5px at 80% 85%, rgba(200,90,60,.7), transparent),
    radial-gradient(1px 1px at 45% 92%, rgba(220,150,100,.6), transparent);
  animation: rise 8s linear infinite;
  opacity: .6;
}
.landing-embers::after { animation-duration: 13s; animation-delay: -4s; opacity: .35; }
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-100vh); opacity: 0; }
}

.landing-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 4vw;
  max-width: 1100px; width: 92%; padding: 6vh 0;
}
.cover-frame {
  position: relative; flex: 0 0 auto;
  width: min(300px, 34vw);
  border-radius: 6px;
  box-shadow: 0 30px 70px -15px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06), 0 0 60px rgba(150, 40, 40, .15);
  transform: perspective(1200px) rotateY(-8deg);
  animation: coverFloat 6s ease-in-out infinite;
}
@keyframes coverFloat {
  0%, 100% { transform: perspective(1200px) rotateY(-8deg) translateY(0); }
  50% { transform: perspective(1200px) rotateY(-8deg) translateY(-10px); }
}
.cover-img { width: 100%; display: block; border-radius: 6px; }
.cover-glow {
  position: absolute; inset: -2px; border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5);
}
.landing-text { flex: 1 1 auto; min-width: 0; color: #ece3d9; text-align: right; }
.landing-eyebrow {
  color: #c26a4d; letter-spacing: .35em; font-size: 13px; margin: 0 0 6px;
  text-transform: uppercase; font-family: 'Frank Ruhl Libre', serif; font-weight: 600;
}
.landing-title {
  font-family: 'Suez One', 'Frank Ruhl Libre', serif;
  font-size: clamp(40px, 6.5vw, 76px);
  margin: 0; line-height: 1.05; color: #f3e9d8;
  text-shadow: 0 4px 30px rgba(140, 40, 40, .45), 0 2px 0 rgba(0,0,0,.5);
}
.landing-title span { display: block; color: #d9503b; }
.landing-subtitle {
  font-size: clamp(16px, 2vw, 22px); color: #b9a98f; margin: 10px 0 0; font-style: italic;
}
.landing-desc {
  margin: 22px 0 0; max-width: 46ch; color: #cabfae; line-height: 1.85; font-size: 16px;
}
.landing-buttons { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: flex-end; }
.btn {
  border: none; border-radius: 999px; padding: 15px 30px; font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px; transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primary {
  background: linear-gradient(135deg, #a8382a, #7a1f1f); color: #fbe9d9;
  box-shadow: 0 10px 30px -8px rgba(150, 40, 30, .6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(150, 40, 30, .75); }
.btn-ghost {
  background: rgba(255,255,255,.06); color: #ece3d9; border: 1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-icon { font-size: 18px; }
.landing-meta { margin-top: 22px; color: #7a6f63; font-size: 13px; letter-spacing: .05em; }

@media (max-width: 760px) {
  .landing-content { flex-direction: column; text-align: center; gap: 26px; padding-top: 5vh; }
  .landing-text { text-align: center; }
  .landing-desc { margin-inline: auto; }
  .landing-buttons { justify-content: center; }
  .cover-frame { width: min(220px, 55vw); transform: none; animation: none; }
}

/* ==========================================================================
   READER
   ========================================================================== */
.reader {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: var(--page-bg);
  transition: opacity .4s ease;
}
.reader.hidden { opacity: 0; pointer-events: none; }

.reader-topbar, .reader-bottombar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  background: var(--chrome-bg); backdrop-filter: blur(10px);
  color: #eee2d2; z-index: 20; transition: transform .3s ease, opacity .3s ease;
}
.reader-topbar { padding: 10px 16px; justify-content: space-between; }
.reader.chrome-hidden .reader-topbar { transform: translateY(-100%); opacity: 0; }
.reader.chrome-hidden .reader-bottombar { transform: translateY(100%); opacity: 0; }
.topbar-title { font-size: 15px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.topbar-actions { display: flex; gap: 6px; }
.icon-btn {
  background: transparent; border: none; color: inherit; width: 38px; height: 38px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.icon-btn:hover { background: rgba(255,255,255,.12); }

.stage {
  flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 0; padding: 10px;
}
.edge-nav {
  position: absolute; top: 0; bottom: 0; width: 12%; min-width: 40px; max-width: 90px;
  background: transparent; border: none; z-index: 15;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); opacity: 0; transition: opacity .2s, background .2s;
}
.edge-nav:hover { opacity: .55; background: linear-gradient(90deg, rgba(0,0,0,.05), transparent); }
.edge-prev { left: 0; }
.edge-next { right: 0; }
.edge-next:hover { background: linear-gradient(-90deg, rgba(0,0,0,.05), transparent); }
.edge-nav svg { width: 30px; height: 30px; }

.book-shell {
  perspective: 2200px; height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.book-wrap {
  position: relative;
  width: min(94vw, 680px);
  height: min(84vh, 940px);
  aspect-ratio: 5 / 7.2;
}
.page-face {
  position: absolute; inset: 0;
  background: var(--page-bg);
  border-radius: 3px;
  box-shadow: 0 25px 60px -12px rgba(0,0,0,.55), 0 0 0 1px var(--rule), inset 0 0 60px rgba(0,0,0,.05);
  transform-style: preserve-3d; backface-visibility: hidden;
  overflow: hidden;
}
.page-inner {
  position: absolute; inset: 0;
  padding: clamp(24px, 6%, 56px) clamp(20px, 7%, 50px);
  display: flex; flex-direction: column;
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(0,0,0,.04), transparent 70%),
    radial-gradient(120% 60% at 50% 100%, rgba(0,0,0,.05), transparent 70%);
}
.page-content {
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.95;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.page-shadow-edge {
  position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.08);
}

/* flip clone overlay */
.page-flip-clone {
  position: absolute; inset: 0; z-index: 30;
  transform-style: preserve-3d; backface-visibility: hidden;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 25px 60px -12px rgba(0,0,0,.55), 0 0 0 1px var(--rule);
}
.page-flip-clone .shade {
  position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .5s ease;
  pointer-events: none;
}
.page-flip-clone.flip-next { transform-origin: 0% 50%; transition: transform .55s cubic-bezier(.4,.1,.3,1); }
.page-flip-clone.flip-next.animate { transform: rotateY(-150deg); }
.page-flip-clone.flip-next.animate .shade { background: rgba(0,0,0,.35); }
.page-flip-clone.flip-prev { transform-origin: 100% 50%; transition: transform .55s cubic-bezier(.4,.1,.3,1); }
.page-flip-clone.flip-prev.animate { transform: rotateY(150deg); }
.page-flip-clone.flip-prev.animate .shade { background: rgba(0,0,0,.35); }

/* ---- content block styles inside pages ---- */
.blk-part {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 18px;
}
.blk-part .part-orn { font-size: 22px; color: var(--accent); opacity: .8; letter-spacing: .3em; }
.blk-part .part-label { font-size: 14px; letter-spacing: .35em; color: var(--ink-soft); text-transform: uppercase; }
.blk-part .part-title { font-family: 'Frank Ruhl Libre', serif; font-weight: 800; font-size: calc(var(--fs-title) * 1.15); color: var(--ink); max-width: 20ch; }
.blk-part .part-rule { width: 90px; height: 2px; background: var(--accent); opacity: .5; }

.blk-chapter-head { text-align: center; margin-bottom: clamp(18px, 4vh, 34px); }
.blk-chapter-head .ch-num { font-family: 'Suez One', serif; font-size: calc(var(--fs-title) * .55); color: var(--accent); letter-spacing: .1em; display:block; margin-bottom: 4px;}
.blk-chapter-head .ch-title { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: var(--fs-title); color: var(--ink); }
.blk-chapter-head .ch-orn { color: var(--accent-soft); font-size: 15px; margin-top: 10px; opacity: .7; letter-spacing: .4em; }

.blk-para { margin: 0 0 1.1em; text-align: justify; text-align-last: right; }
.blk-para.dialogue { }
.blk-scene { text-align: center; margin: 1.3em 0; color: var(--accent-soft); letter-spacing: .6em; font-size: .9em; }

.blk-titlepage { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.blk-titlepage .tp-tagline { letter-spacing: .4em; font-size: 13px; color: var(--ink-soft); text-transform: uppercase; }
.blk-titlepage .tp-title { font-family: 'Suez One', serif; font-size: calc(var(--fs-title) * 1.6); color: var(--accent); }
.blk-titlepage .tp-subtitle { font-size: calc(var(--fs-title) * .65); font-style: italic; color: var(--ink-soft); margin-bottom: 10px;}
.blk-titlepage .tp-about { max-width: 40ch; line-height: 1.9; color: var(--ink); font-size: .92em; margin-top: 14px; }
.blk-titlepage .tp-rule { width: 60px; height: 2px; background: var(--accent); opacity: .6; margin: 6px 0; }

.blk-end { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.blk-end .end-orn { font-size: 34px; color: var(--accent); }
.blk-end .end-title { font-family: 'Frank Ruhl Libre', serif; font-weight: 800; font-size: calc(var(--fs-title) * 1.2); color: var(--ink); }
.blk-end .end-note { color: var(--ink-soft); max-width: 34ch; line-height: 1.8; }

.page-num-mark { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ink-soft); opacity: .55; }

/* ==========================================================================
   BOTTOM BAR
   ========================================================================== */
.reader-bottombar { flex-direction: column; padding: 10px 20px 14px; gap: 8px; align-items: stretch; }
.progress-track { height: 4px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; cursor: pointer; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); width: 0%; transition: width .3s; }
.bottombar-row { display: flex; justify-content: space-between; font-size: 12px; opacity: .8; }

/* ==========================================================================
   PANELS (TOC + SETTINGS)
   ========================================================================== */
.panel-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(5, 3, 8, .55); backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end;
  transition: opacity .3s ease;
}
.panel-overlay.hidden { opacity: 0; pointer-events: none; }
.panel {
  width: min(400px, 88vw); height: 100%; background: #17121d; color: #ece3d9;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 50px rgba(0,0,0,.5);
  transform: translateX(0); transition: transform .35s ease;
  border-inline-start: 1px solid rgba(255,255,255,.08);
}
.panel-overlay.hidden .panel { transform: translateX(-30px); }
.panel-header {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.panel-header h2 { margin: 0; font-size: 19px; font-weight: 700; }
.panel-header .icon-btn { color: #ece3d9; }
.panel-body { flex: 1; overflow-y: auto; padding: 10px 10px 30px; }

.toc-item { display: block; width: 100%; text-align: right; background: transparent; border: none; color: #ece3d9; padding: 12px 14px; border-radius: 10px; font-size: 15px; transition: background .15s; }
.toc-item:hover { background: rgba(255,255,255,.06); }
.toc-item.active { background: rgba(160, 60, 45, .25); color: #f0c9b9; }
.toc-part { margin: 18px 10px 4px; font-size: 12px; letter-spacing: .2em; color: #a8382a; text-transform: uppercase; font-weight: 700; }
.toc-part:first-child { margin-top: 6px; }
.toc-special { font-style: italic; opacity: .85; }
.toc-num { display: inline-block; min-width: 26px; color: #8a746a; font-size: 13px; margin-inline-start: 6px; }

.setting-group { padding: 16px 16px 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.setting-group h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #a8988a; }
.theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  color: #ece3d9; padding: 12px 8px; font-size: 12px; transition: border-color .2s, background .2s;
}
.swatch.active { border-color: #a8382a; background: rgba(168,56,42,.15); }
.swatch-dot { width: 26px; height: 26px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.swatch-parchment { background: #f2e6cd; }
.swatch-sepia { background: #dcc194; }
.swatch-dark { background: #241f2b; }
.swatch-night { background: #0b0a10; }

.fontsize-control { display: flex; align-items: center; gap: 12px; }
.fs-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #ece3d9; border-radius: 8px; width: 42px; height: 38px; font-size: 14px; }
.fs-track { flex: 1; height: 6px; background: rgba(255,255,255,.12); border-radius: 4px; position: relative; }
.fs-fill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; background: #a8382a; border-radius: 4px; width: 40%; transition: width .2s; }

/* ==========================================================================
   LOADING
   ========================================================================== */
.loading-screen {
  position: fixed; inset: 0; z-index: 100; background: #0a0710;
  display: flex; align-items: center; justify-content: center; color: #ece3d9;
  transition: opacity .4s ease, visibility .4s ease;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-inner { text-align: center; }
.loading-spinner {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 16px;
  border: 3px solid rgba(255,255,255,.15); border-top-color: #a8382a;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

@media (max-width: 560px) {
  .book-wrap { width: 96vw; height: 78vh; }
  .page-inner { padding: 26px 18px; }
  .edge-nav { width: 18%; }
}