:root{--ash:#cfc9bc;--bone:#8b8678;--void:#040507;--steel:#3a444a;--ember:#a8352a;--line:#222730}
*{box-sizing:border-box;margin:0;padding:0}

/* ===== themed scrollbars — GLOBAL, applies to every scrollable element ===== */
*{scrollbar-width:thin;scrollbar-color:var(--ember) rgba(255,255,255,.05)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--ember),#7a221b);
  border-radius:6px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ember)}
*::-webkit-scrollbar-corner{background:transparent}

html,body{height:100%}
body{background:#000;color:var(--ash);font-family:"Space Mono",ui-monospace,monospace;
  height:100dvh;overflow:hidden;overflow-x:hidden}

/* ---------- living scene ---------- */
.scene{position:fixed;inset:0;overflow:hidden;z-index:0}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.12);will-change:transform;transition:background-image .6s ease}
/* fog/glow: soft radial gradients, NO blur filter (gradients are already soft;
   blur() forced an expensive offscreen pass every animated frame) */
.fog,.fog2{position:absolute;inset:-20%;
  background:
    radial-gradient(closest-side at 22% 50%, rgba(180,200,210,.10), transparent),
    radial-gradient(closest-side at 70% 40%, rgba(180,200,210,.07), transparent),
    radial-gradient(closest-side at 42% 82%, rgba(180,200,210,.05), transparent);}
.fog{animation:fogMove 42s linear infinite}
.fog2{animation:fogMove2 64s linear infinite;opacity:.7}
#ash{position:absolute;inset:0;pointer-events:none}
.city-glow{position:absolute;inset:0;
  background:
    radial-gradient(closest-side at 70% 62%,rgba(200,90,40,.14),transparent),
    radial-gradient(closest-side at 30% 60%,rgba(180,70,30,.09),transparent);}
.lightning{position:absolute;inset:0;background:#cfe0ff;opacity:0;animation:lightning 13s infinite}
/* color grade: plain alpha overlay (was mix-blend-mode:multiply — blend forced a
   full-stack recomposite every frame the scene moved) */
.color-grade{position:absolute;inset:0;
  background:linear-gradient(rgba(6,18,32,.34),rgba(0,0,0,.48))}
.vignette{position:absolute;inset:0;animation:flicker 6s steps(1) infinite;
  background:radial-gradient(circle,transparent 38%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.9) 100%)}

/* ---------- view system (opacity crossfade) ----------
   Inactive views get .hidden (display:none) AFTER the fade so they leave the
   compositor entirely — only one view is ever painted/blurred at a time.
   Opacity-only (no transform) so backdrop-filter layers aren't re-blurred per frame. */
.view{position:fixed;inset:0;z-index:10;display:flex;
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.view.active{opacity:1;pointer-events:auto}
.view.hidden{display:none}
@media (prefers-reduced-motion: reduce){
  .view{transition:none}}

/* ---------- shared chrome ---------- */
.kicker{font-weight:700;letter-spacing:.42em;font-size:11px;color:var(--ember);
  text-transform:uppercase;padding-left:.42em;text-shadow:0 2px 10px #000}
button.cta{appearance:none;cursor:pointer;font-family:inherit;font-weight:700;
  letter-spacing:.4em;font-size:11px;color:#efe9dc;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25);padding:14px 22px;padding-left:calc(22px + .4em);
  background:linear-gradient(180deg,rgba(28,34,40,.5),rgba(6,9,12,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,0,0,.2);
  transition:border-color .15s,color .15s,background .15s,transform .05s}
button.cta:hover{border-color:var(--ember);color:#fff;background:rgba(168,53,42,.14)}
button.cta:active{transform:translateY(1px)}
button.cta:focus-visible{outline:1px solid var(--ember);outline-offset:3px}

/* ---------- landing ---------- */
/* safe-center = centered when it fits, but falls back to top (no clipping) when the
   "Story so far" panel makes it taller than the screen; scrolls, clears toolbar + Enter */
#landing{flex-direction:column;align-items:center;justify-content:safe center;text-align:center;
  gap:clamp(14px,3vh,26px);overflow-y:auto;overflow-x:hidden;
  padding:calc(env(safe-area-inset-top) + 62px) 22px calc(env(safe-area-inset-bottom) + 34px)}
#landing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 46%,rgba(4,6,8,.55),rgba(4,6,8,.2) 55%,transparent 78%),
    linear-gradient(180deg,rgba(4,6,8,.4),transparent 30%,transparent 60%,rgba(4,6,8,.75))}
#landing>*{position:relative;z-index:1}
#landing .tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:9px;letter-spacing:.34em;color:var(--ash);text-transform:uppercase}
#landing .tags span{border:1px solid rgba(255,255,255,.18);padding:5px 9px;
  background:linear-gradient(180deg,rgba(22,28,34,.5),rgba(5,8,11,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#landing .title{font-family:"Anton",sans-serif;line-height:.92;text-transform:uppercase;
  color:#efe9dc;font-size:clamp(40px,12vw,92px);letter-spacing:.1em;padding-left:.1em;
  text-shadow:0 3px 0 #000,0 0 40px rgba(0,0,0,.9),0 0 90px rgba(0,0,0,.7)}
#landing .title .ln{display:block}
#landing .title .red{color:var(--ember);letter-spacing:.14em;
  text-shadow:0 3px 0 #150403,0 0 36px rgba(168,53,42,.5)}
#landing .tagline{font-size:12px;color:var(--ember);letter-spacing:.36em;text-transform:uppercase;
  text-shadow:0 2px 10px #000}
#landing .rule{width:46px;height:1px;background:rgba(255,255,255,.4)}
#landing .bio{font-size:13px;color:#cfc9bc;max-width:46ch;line-height:1.9;letter-spacing:.03em;
  text-shadow:0 2px 12px #000}
.title.glitch{animation:gJit 4s steps(1) infinite}
@keyframes gJit{0%,92%,100%{transform:none}
  93%{transform:translate(-2px,1px)}95%{transform:translate(2px,-1px)}97%{transform:translate(-1px,0)}}

/* staged rise-in (shared by landing + cover) */
.intro .stagger{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.intro .stagger.r{animation-name:grow}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes grow{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}

/* ---------- library ---------- */
#library{flex-direction:column;align-items:center;justify-content:flex-start;
  padding:calc(env(safe-area-inset-top) + 62px) 18px calc(env(safe-area-inset-bottom) + 24px);
  overflow-y:auto;overflow-x:hidden}
#library .libhead{text-align:center;margin-bottom:clamp(20px,5vh,40px)}
#library .libhead .title{font-family:"Anton",sans-serif;text-transform:uppercase;color:#efe9dc;
  font-size:clamp(24px,6vw,46px);letter-spacing:.1em;padding-left:.1em;text-shadow:0 3px 0 #000,0 0 60px rgba(0,0,0,.8)}
#library .libhead .sub{margin-top:10px;font-size:10px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--bone);padding-left:.5em}
.shelf{display:grid;gap:14px;width:min(92vw,1040px);max-width:100%;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}    /* mobile: 2-up, smaller */
.bookcard{position:relative;cursor:pointer;border:1px solid var(--line);overflow:hidden;
  background:#070809;aspect-ratio:3/4;text-align:left;color:inherit;font-family:inherit;
  appearance:none;padding:0;transition:border-color .18s,transform .18s}
.bookcard:hover{border-color:var(--ember);transform:translateY(-3px)}
.bookcard:focus-visible{outline:1px solid var(--ember);outline-offset:3px}
.bookcard .cover-img{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;
  background-position:center;filter:saturate(.9) contrast(1.05) brightness(.96);transition:filter .3s}
.bookcard:hover .cover-img{filter:saturate(1) contrast(1.05) brightness(1.06)}
.bookcard .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,6,8,.15),rgba(4,6,8,.35) 45%,rgba(4,6,8,.9))}
.bookcard .meta{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 16px;z-index:1}
.bookcard .chap{font-weight:700;letter-spacing:.34em;font-size:9px;color:var(--ember);
  text-transform:uppercase;padding-left:.34em}
.bookcard .bt{font-family:"Anton",sans-serif;text-transform:uppercase;color:#efe9dc;
  font-size:clamp(17px,1.5vw,21px);line-height:1;letter-spacing:.06em;margin-top:7px}
.bookcard .bsub{margin-top:7px;font-size:10px;color:#b7b2a6;letter-spacing:.04em;line-height:1.5}
.bookcard.soon{cursor:default;opacity:.55}
.bookcard.soon:hover{border-color:var(--line);transform:none}
.bookcard.soon .badge{position:absolute;top:10px;left:10px;z-index:1;font-size:8px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ash);border:1px solid rgba(255,255,255,.2);
  padding:4px 7px;background:rgba(4,6,8,.5)}

/* ---------- reader (foreground UI) ---------- */
#reader{flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.2vh,11px);
  padding:env(safe-area-inset-top) 14px env(safe-area-inset-bottom)}
#reader header{display:none}        /* freed for a bigger page; title lives on landing/library + back btn */
#reader header .mark{font-weight:700;letter-spacing:.34em;font-size:clamp(12px,2.6vw,16px);
  text-transform:uppercase;color:var(--ash);padding-left:.34em;text-shadow:0 2px 12px #000}
#reader header .mark::before{content:"[ ";color:var(--steel)}
#reader header .mark::after{content:" ]";color:var(--steel)}
#reader header .mark b{color:var(--ember)}
#reader header .sub{margin-top:9px;font-size:10px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--bone);padding-left:.5em;text-shadow:0 1px 8px #000}

/* Page sized by available HEIGHT: book is 3:4, so width = (viewport - chrome)*0.75.
   This makes the book as tall as fits above the controls (~95px chrome) and never
   clips them — and is ~10% larger than the old 62vh cap. Width-bound on phones. */
.stage{perspective:2600px;width:min(96vw, calc((100dvh - 108px) * 0.75));position:relative}

.book{position:relative;width:100%;aspect-ratio:3/4;transform-style:preserve-3d}

.page{position:absolute;inset:0;background:transparent;overflow:hidden;
  backface-visibility:hidden;transform-origin:left center;will-change:transform;
  display:flex;flex-direction:column}
.page-inner{flex:1;min-height:0;overflow:hidden;display:flex;
  align-items:center;justify-content:center;padding:9px}
.sheet{display:flex;flex-direction:column;gap:9px;width:100%}
.prow{display:flex;gap:9px;min-height:0}
.prow img{min-width:0;height:100%;object-fit:contain;display:block;
  box-shadow:0 6px 16px rgba(0,0,0,.7)}
.page-foot{flex:0 0 auto;text-align:center;font-weight:400;letter-spacing:.3em;
  font-size:10px;color:#cfcabd;padding:0 0 9px;text-transform:uppercase;text-shadow:0 1px 6px #000,0 0 3px #000}
.page .glare{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 18%),
    linear-gradient(100deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.78) 100%)}
.pg-base{z-index:1}
.pg-flip{z-index:3}
.turning{transition:transform .66s cubic-bezier(.42,.04,.26,1)}
.turning.curl .glare{animation:sweep .66s ease forwards}
.turning.hard{transition:transform .58s cubic-bezier(.7,0,.3,1)}
@keyframes sweep{0%{opacity:0}35%{opacity:.85}100%{opacity:.15}}

/* per-book cover plate = transparent, the city shows through */
.cover{background:transparent;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:30px 24px;gap:15px;position:relative}
.cover::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 46%,rgba(4,6,8,.5),rgba(4,6,8,.18) 55%,transparent 75%),
    linear-gradient(180deg,rgba(4,6,8,.4),transparent 30%,transparent 62%,rgba(4,6,8,.72))}
.cover>*{position:relative;z-index:1}
.cover .glare{z-index:0}
.cover .tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:9px;letter-spacing:.34em;color:var(--ash);text-transform:uppercase}
.cover .tags span{border:1px solid rgba(255,255,255,.18);padding:5px 9px;
  background:linear-gradient(180deg,rgba(22,28,34,.5),rgba(5,8,11,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cover .title{font-family:"Anton",sans-serif;line-height:.94;text-transform:uppercase;
  color:#efe9dc;font-size:clamp(30px,10vw,68px);letter-spacing:.12em;padding-left:.12em;
  text-shadow:0 3px 0 #000,0 0 40px rgba(0,0,0,.9),0 0 90px rgba(0,0,0,.7)}
.cover .title .ln{display:block}
.cover .title .red{color:var(--ember);letter-spacing:.16em;
  text-shadow:0 3px 0 #150403,0 0 36px rgba(168,53,42,.5)}
.cover .rule{width:46px;height:1px;background:rgba(255,255,255,.4)}
.cover .chapline{font-weight:700;letter-spacing:.42em;font-size:11px;color:var(--ember);
  text-transform:uppercase;padding-left:.42em;text-shadow:0 2px 10px #000}
.cover .tagline{font-size:11px;color:#cfc9bc;max-width:34ch;line-height:1.85;letter-spacing:.04em;
  text-shadow:0 2px 12px #000}
.cover .enter{margin-top:6px;font-weight:700;letter-spacing:.4em;font-size:10px;color:#efe9dc;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.25);padding:11px 18px;
  padding-left:calc(18px + .4em);background:linear-gradient(180deg,rgba(28,34,40,.5),rgba(6,9,12,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.6;border-color:rgba(255,255,255,.18)}50%{opacity:1;border-color:rgba(255,255,255,.4)}}

.zones{position:absolute;inset:0;z-index:5;display:flex}
.zones span{flex:1;cursor:pointer}
.flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 0% 50%,rgba(168,53,42,.25),transparent 60%);mix-blend-mode:screen}
.flash.go{animation:flashGo .5s ease}
@keyframes flashGo{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

.controls{display:flex;align-items:center;gap:18px;user-select:none}
button.nav{position:relative;appearance:none;cursor:pointer;color:var(--ash);overflow:hidden;
  background:linear-gradient(180deg,rgba(26,32,38,.55),rgba(6,9,12,.72));border:1px solid var(--line);border-radius:50%;
  width:50px;height:50px;font-size:20px;line-height:1;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);isolation:isolate;
  transition:border-color .3s ease,color .3s ease,box-shadow .35s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
button.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at center,rgba(168,53,42,.45),rgba(168,53,42,0) 70%);
  transform:scale(0);opacity:0;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
button.nav>span{display:block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
button.nav:hover:not(:disabled){border-color:var(--ember);color:#fff;transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 4px rgba(168,53,42,.08)}
button.nav:hover:not(:disabled)::before{transform:scale(1);opacity:1}
#next:hover:not(:disabled)>span{transform:translateX(3px)}
#prev:hover:not(:disabled)>span{transform:translateX(-3px)}
button.nav:active:not(:disabled){transform:translateY(0) scale(.94)}
button.nav:disabled{opacity:.2;cursor:default}
button.nav:focus-visible{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(168,53,42,.3)}
.counter{font-weight:700;letter-spacing:.22em;font-size:12px;color:#fff;
  min-width:128px;text-align:center;text-shadow:0 2px 8px #000,0 0 3px #000;transition:color .3s}
.counter::before{content:"[ ";color:var(--ember)}
.counter::after{content:" ]";color:var(--ember)}
.counter b{color:#fff}
.hint{display:none}        /* controls are in the ? help overlay; reclaim the space for a bigger page */
.status{font-size:9px;letter-spacing:.4em;color:#f1ede4;text-transform:uppercase;
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
  text-shadow:0 1px 6px #000,0 0 3px #000}
.status .dot{width:5px;height:5px;background:var(--ember);border-radius:50%;
  box-shadow:0 0 8px rgba(168,53,42,.8);animation:blink 3.2s steps(1) infinite}
@keyframes blink{0%,70%{opacity:.9}71%,100%{opacity:.25}}
.progress{display:flex;gap:7px;align-items:center}
.progress i{width:20px;height:3px;background:rgba(255,255,255,.45);border-radius:2px;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.7);
  transition:background .35s ease,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.progress i:hover{background:#fff}
.progress i.on{background:var(--ember);transform:scaleY(2);box-shadow:0 0 8px rgba(168,53,42,.8)}

/* back-to-library button */
.backbar{position:fixed;top:env(safe-area-inset-top);left:0;z-index:12;padding:14px}
button.back{appearance:none;cursor:pointer;font-family:inherit;font-weight:700;letter-spacing:.3em;
  font-size:9px;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,rgba(26,32,38,.5),rgba(6,9,12,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid var(--line);padding:10px 14px;padding-left:calc(14px + .3em);
  transition:border-color .3s ease,color .3s ease,background .3s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
button.back:hover{border-color:var(--ember);color:#efe9dc;background:rgba(168,53,42,.12);transform:translateX(-2px)}
button.back:focus-visible{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(168,53,42,.3)}

/* top-right utility bar */
.toolbar{position:fixed;top:env(safe-area-inset-top);right:0;z-index:12;padding:14px;
  display:flex;gap:8px}
button.tool{appearance:none;cursor:pointer;font-family:inherit;font-weight:700;letter-spacing:.2em;
  font-size:10px;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,rgba(26,32,38,.5),rgba(6,9,12,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid var(--line);min-width:36px;height:36px;padding:0 12px;
  transition:border-color .3s ease,color .3s ease,background .3s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
button.tool:hover{border-color:var(--ember);color:#efe9dc;background:rgba(168,53,42,.12);transform:translateY(-2px)}
button.tool:focus-visible{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(168,53,42,.3)}

/* keyboard help overlay */
.help{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 45%,rgba(4,6,8,.82),rgba(2,3,4,.92))}
.help[hidden]{display:none}
.help-card{background:rgba(7,9,11,.92);border:1px solid var(--line);padding:30px 34px;
  max-width:min(92vw,420px);text-align:left;box-shadow:0 20px 80px rgba(0,0,0,.7)}
.help-title{font-family:"Anton",sans-serif;text-transform:uppercase;color:#efe9dc;
  font-size:24px;letter-spacing:.12em;margin-bottom:18px}
.help dl{display:grid;grid-template-columns:auto 1fr;gap:11px 18px;align-items:baseline;margin-bottom:24px}
.help dt{font-weight:700;letter-spacing:.1em;font-size:11px;color:var(--ember);text-transform:uppercase;white-space:nowrap}
.help dd{font-size:12px;color:#cfc9bc;letter-spacing:.03em;line-height:1.5}
.help .cta{width:100%;text-align:center;padding-left:0;letter-spacing:.4em}

/* toast */
.toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);z-index:45;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#efe9dc;
  background:linear-gradient(180deg,rgba(24,14,12,.82),rgba(6,9,12,.86));border:1px solid var(--ember);
  padding:11px 18px;padding-left:calc(18px + .34em);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;transition:opacity .25s}
.toast[hidden]{display:none}
.toast.show{opacity:1}

/* tool active states (magnify / sound) */
button.tool.on{background:linear-gradient(180deg,rgba(168,53,42,.55),rgba(120,30,22,.75));
  border-color:var(--ember);color:#fff}

/* music player popover (anchored under the toolbar, top-right) */
.player{position:fixed;top:calc(env(safe-area-inset-top) + 60px);right:14px;z-index:46;width:230px;
  background:linear-gradient(180deg,rgba(18,23,28,.96),rgba(8,11,14,.97));border:1px solid var(--line);
  border-radius:8px;padding:11px;box-shadow:0 14px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.player[hidden]{display:none}
.player .np{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em;color:#efe9dc;
  margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--steel)}
.player.playing .np-dot{background:var(--ember);box-shadow:0 0 8px rgba(168,53,42,.8);animation:blink 2.4s steps(1) infinite}
.player #npTitle{overflow:hidden;text-overflow:ellipsis}
.pctrls{display:flex;gap:6px}
.pctrls button{flex:1;appearance:none;cursor:pointer;font-family:inherit;font-size:14px;color:var(--ash);
  background:rgba(7,10,13,.6);border:1px solid var(--line);border-radius:5px;padding:7px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .2s,color .2s,background .2s}
.pctrls button:hover{border-color:var(--ember);color:#fff}
.pctrls .play{flex:1.4;color:#efe9dc}
.seekrow{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.seekrow .t{font-size:9px;letter-spacing:.06em;color:var(--bone);min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.vol{display:flex;align-items:center;gap:9px;margin-top:10px}
.vol-ico{font-size:13px;color:var(--bone)}
.player input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:2px;cursor:pointer;
  background:linear-gradient(90deg,var(--ember) var(--vp,0%),var(--line) var(--vp,0%))}
.player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#efe9dc;border:1px solid var(--ember);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.player input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#efe9dc;
  border:1px solid var(--ember);cursor:pointer}
.playlist{list-style:none;margin:10px 0 0;padding:8px 0 0;border-top:1px solid var(--line);max-height:200px;overflow:auto}
.playlist[hidden]{display:none}
.playlist li{font-size:11px;letter-spacing:.04em;color:#b7b2a6;padding:7px 8px;border-radius:4px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.playlist li:hover{background:rgba(168,53,42,.12);color:#efe9dc}
.playlist li.on{color:var(--ember);background:rgba(168,53,42,.1)}
.playlist li.on::before{content:"\25B8 ";color:var(--ember)}
.playlist .empty{color:var(--bone);cursor:default;white-space:normal;line-height:1.6}
.playlist .empty:hover{background:none;color:var(--bone)}

/* magnify mode in the reader — tap panels instead of turning the page */
.book.zoom .zones{display:none}
.book.zoom .prow img{cursor:zoom-in}

/* magnifier lightbox */
.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow:hidden;cursor:zoom-out;
  background:radial-gradient(120% 90% at 50% 45%,rgba(4,6,8,.93),rgba(0,0,0,.97))}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:92vh;transform-origin:50% 50%;touch-action:none;cursor:zoom-in;
  filter:drop-shadow(0 12px 44px rgba(0,0,0,.85))}
.lightbox img.grabbing{cursor:grabbing}
.lb-close{position:absolute;top:12px;right:14px;width:42px;height:42px;font-size:24px;line-height:1;
  display:grid;place-items:center;cursor:pointer;color:#efe9dc;background:rgba(7,10,13,.6);
  border:1px solid var(--line);border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.lb-close:hover{border-color:var(--ember);color:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:30px;line-height:1;
  display:grid;place-items:center;cursor:pointer;color:#efe9dc;background:rgba(7,10,13,.55);
  border:1px solid var(--line);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);z-index:1}
.lb-nav:hover{border-color:var(--ember);color:#fff;background:rgba(168,53,42,.18)}
.lb-prev{left:12px} .lb-next{right:12px}
.lb-nav[disabled]{opacity:.25;cursor:default;border-color:var(--line);background:rgba(7,10,13,.4)}
@media (max-width:600px){ .lb-nav{width:40px;height:54px;font-size:24px} }
.lb-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:9.5px;letter-spacing:.32em;
  text-transform:uppercase;color:#cfcabd;text-shadow:0 1px 6px #000;pointer-events:none}

/* landing: story-so-far preface */
#landing .story-btn{margin-top:2px}
#landing .preface{width:min(62ch,88vw);max-height:42vh;overflow-y:auto;text-align:left;
  font-size:12.5px;line-height:1.95;color:#d8d3c8;letter-spacing:.02em;text-shadow:0 2px 12px #000;
  border-left:2px solid var(--ember);padding:4px 0 4px 16px;margin-top:4px;white-space:pre-line}
#landing .preface[hidden]{display:none}

/* Ko-fi support button (persistent, bottom-left) */
.kofi{position:fixed;left:calc(env(safe-area-inset-left) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);
  z-index:47;display:flex;align-items:center;gap:7px;text-decoration:none;cursor:pointer;
  font-family:inherit;font-weight:700;letter-spacing:.18em;font-size:10px;text-transform:uppercase;color:var(--ash);
  background:linear-gradient(180deg,rgba(26,32,38,.6),rgba(6,9,12,.78));border:1px solid var(--line);border-radius:20px;
  padding:8px 13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 16px rgba(0,0,0,.5);
  transition:border-color .2s,color .2s,transform .2s}
.kofi:hover{border-color:var(--ember);color:#fff;transform:translateY(-2px)}
.kofi .kofi-ico{font-size:13px}
@media (max-width:600px){ .kofi .kofi-txt{display:none} .kofi{padding:9px;border-radius:50%} }

/* top overlays */
.fx{position:fixed;inset:0;pointer-events:none;z-index:30}
/* overlays use plain alpha now (no mix-blend-mode) — blend modes forced the whole
   stack beneath them to recomposite every frame the scene animated = the PC stutter */
.fx.grain{opacity:.05;width:140%;height:140%;left:-20%;top:-20%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain .6s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-6%,4%)}66%{transform:translate(5%,-5%)}100%{transform:translate(-3%,2%)}}
.fx.scan{opacity:.35;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.28) 2px 3px)}
/* travelling scan line — the rolling CRT refresh bar (plain alpha sheen) */
.fx.sweep{height:36%;animation:sweepMove 7s linear infinite;will-change:transform;
  background:linear-gradient(180deg,transparent 0%,rgba(150,170,190,.04) 46%,rgba(200,215,230,.10) 50%,rgba(150,170,190,.04) 54%,transparent 100%)}
@keyframes sweepMove{0%{transform:translateY(-40vh)}100%{transform:translateY(140vh)}}

@keyframes fogMove{from{transform:translateX(-10%)}to{transform:translateX(10%)}}
@keyframes fogMove2{from{transform:translateX(10%)}to{transform:translateX(-10%)}}
@keyframes lightning{0%,92%,100%{opacity:0}93%{opacity:.22}93.5%{opacity:0}94%{opacity:.13}95%{opacity:0}}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.82}98%{opacity:1}99%{opacity:.9}}

/* =====================================================================
   MOBILE-FIRST: everything above targets phones (the default / base).
   Below, progressive enhancement for larger viewports, plus a perf trim
   that lightens the most expensive GPU effects on small/phone screens.
   ===================================================================== */

/* phone perf trim — drop the animated film grain on small screens */
@media (max-width: 600px){
  .fx.grain{animation:none}
  #reader{gap:clamp(8px,1.8vh,16px)}
  .backbar,.toolbar{padding:10px}
  button.nav{width:46px;height:46px;font-size:18px}
  .controls{gap:14px}
  .counter{min-width:108px;letter-spacing:.18em}
  .hint{letter-spacing:.3em}
  .status{letter-spacing:.28em;gap:8px}
}

/* very narrow phones — keep the status strip from crowding */
@media (max-width: 380px){
  .status span:nth-child(2){display:none}    /* drop "Survivor Settlements", keep clock + Year Zero */
}

/* tablet and up — roomier shelf + larger stage */
@media (min-width: 600px){
  .shelf{gap:clamp(16px,2vw,22px);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

@media (prefers-reduced-motion: reduce){
  .turning,.turning .glare{transition:none}
  .fog,.fog2,.lightning,.vignette,.fx.grain,.fx.sweep,.title.glitch,.cover .enter,.status .dot{animation:none}
  .fx.sweep{display:none}
  .intro .stagger{animation:none;opacity:1}}