/* This layout is opt-in. Ordinary desktop and touch reading retain their styles. */
.reader-immersive-nav,.reader-immersive-help,.reader-guide { display:none; }
body.immersive-reading { position:fixed; top:var(--reader-scroll-top); left:0; width:100%; overflow:hidden; overscroll-behavior:none; }
body.immersive-reading .reading-stage.immersive-stage {
  --reader-charcoal:#292d2b; --reader-paper:#faf4e5; --reader-green:#193d34; --reader-gold:#d9b36d;
  position:fixed; inset:0; z-index:1000; display:block; width:100%; height:100%; height:100dvh;
  padding:0; margin:0; background:var(--reader-charcoal); color:var(--reader-paper); overflow:hidden;
}
.immersive-stage>.page-arrow { display:none; }
body.immersive-reading .immersive-stage .page-frame {
  position:absolute; top:env(safe-area-inset-top,0px); bottom:calc(82px + env(safe-area-inset-bottom,0px));
  left:env(safe-area-inset-left,0px); right:env(safe-area-inset-right,0px);
  width:auto; max-width:none; height:auto; min-height:0; aspect-ratio:auto!important;
  background:var(--reader-charcoal); box-shadow:none; margin:0; touch-action:pinch-zoom;
}
.immersive-stage .page-frame img { width:100%; height:100%; object-fit:contain; }
body.immersive-reading .immersive-stage .page-frame.zoomed { overflow:auto; touch-action:none; }
body.immersive-reading .immersive-stage .page-frame.zoomed img {
  width:calc(var(--reader-fit-width) * 2); height:calc(var(--reader-fit-height) * 2); max-width:none; object-fit:contain; margin:auto;
}
body.immersive-reading .immersive-stage .text-page {
  box-sizing:border-box; min-height:100%; height:auto; padding:24px; border:0; overflow:auto;
}
body.immersive-reading .immersive-stage .page-frame:has(.text-page:not(.hidden)) { overflow:auto; touch-action:pan-y pinch-zoom; }
body.immersive-reading .immersive-stage .text-page #text-page-content { font-size:clamp(20px,3vw,30px); line-height:1.65; white-space:pre-wrap; }
.immersive-stage button { font-family:'DM Sans',sans-serif; cursor:pointer; }
.immersive-stage .reader-immersive-nav {
  display:grid; position:absolute; bottom:0; left:0; right:0; z-index:2;
  grid-template-columns:1fr 1fr 1fr; align-items:center; box-sizing:border-box;
  min-height:82px; padding:6px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  border-top:1px solid #d9b36d80; background:var(--reader-green); color:var(--reader-paper);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.reader-immersive-nav button { min-width:44px; min-height:44px; padding:5px 10px; background:transparent; border:0; border-radius:6px; color:inherit; font-size:13px; }
.reader-immersive-nav>button { display:flex; flex-direction:column; align-items:center; gap:1px; }
.reader-immersive-nav button>span { font:25px/22px Georgia,serif; }
.reader-immersive-nav button:disabled { opacity:.35; cursor:default; }
.reader-immersive-nav>div { display:flex; flex-direction:column; align-items:center; text-align:center; }
.reader-immersive-nav .reader-immersive-exit { color:var(--reader-gold); }
.reader-immersive-label { font:11px/1.3 'DM Sans',sans-serif; }
.immersive-stage.controls-hidden .reader-immersive-nav { opacity:0; transform:translateY(100%); visibility:hidden; }
.immersive-stage .reader-immersive-help {
  display:block; position:absolute; z-index:3; top:calc(12px + env(safe-area-inset-top,0px)); right:calc(12px + env(safe-area-inset-right,0px));
  width:44px; height:44px; padding:0; border:1px solid #d9b36d80; border-radius:50%; color:var(--reader-gold); background:var(--reader-green); font:22px Georgia,serif;
}
.immersive-stage.controls-hidden .reader-immersive-help { visibility:hidden; }
.immersive-stage:has(.reader-guide:not([hidden])) .reader-immersive-help { visibility:hidden; }
.immersive-stage .reader-guide {
  display:flex; position:absolute; z-index:4; top:calc(14px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%);
  width:calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); max-width:350px;
  box-sizing:border-box; align-items:center; gap:13px; padding:17px 39px 10px 16px; border-radius:18px;
  background:var(--reader-green); color:var(--reader-paper); box-shadow:0 7px 30px #0005;
  transition:opacity .3s ease,transform .3s ease;
}
.immersive-stage .reader-guide.guide-fading { opacity:0; transform:translate(-50%,-12px); pointer-events:none; }
.reader-tip-copy { flex:1; min-width:0; }
.reader-tip-heading { color:var(--reader-gold); font:9px/1.5 'DM Sans',sans-serif; letter-spacing:1.4px; }
.reader-guide .reader-tip { font:17px/1.35 Fraunces,Georgia,serif; margin:6px 0; min-height:46px; }
.reader-tip-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.reader-guide button { min-width:44px; min-height:44px; padding:7px; border:0; border-radius:6px; background:transparent; color:var(--reader-gold); font-size:12px; }
.reader-guide .reader-tip-dismiss { position:absolute; right:0; top:0; font-size:22px; }
.reader-tip-demo { display:inline-block; color:var(--reader-gold); font-size:26px; }
.reader-tip-demo.demonstrating { animation:reader-demonstrate 1.5s ease-in-out 3; }
.reader-firefly { position:relative; flex:0 0 33px; width:33px; height:45px; animation:reader-float 2s ease-in-out 3; }
.reader-firefly-face { position:absolute; z-index:2; top:1px; left:5px; width:25px; height:28px; border-radius:50%; background:#f5cb79; color:#193d34; font:bold 17px/20px Arial,sans-serif; letter-spacing:3px; padding-left:2px; text-align:center; box-sizing:border-box; }
.reader-firefly-face:after { content:''; position:absolute; left:9px; top:16px; width:7px; height:4px; border-bottom:2px solid #193d34; border-radius:50%; }
.reader-wing { position:absolute; top:10px; width:17px; height:25px; border-radius:70%; background:#c9e2d8; }
.reader-wing.left { left:-6px; transform:rotate(-35deg); }
.reader-wing.right { right:-6px; transform:rotate(35deg); }
.reader-firefly-glow { position:absolute; top:25px; left:9px; width:18px; height:18px; border-radius:50%; background:#f6d67f; box-shadow:0 0 17px #f6d67f90; }
@keyframes reader-float { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-5px) rotate(5deg); } }
@keyframes reader-demonstrate { 0%,100% { transform:translateX(0); } 30% { transform:translateX(9px); } 70% { transform:translateX(-5px); } }
@media(prefers-reduced-motion:reduce) { .immersive-stage *, .immersive-stage *:after { animation:none!important; transition:none!important; } }