/* ---------- reader: full-bleed scene, text panel laid over it ---------- */
body.in-reader{overflow:hidden;background:#1c1610}
.reader{position:relative;height:100vh;height:100dvh;overflow:hidden;color:var(--ink);background:#1c1610;
  --top-h:calc(60px + env(safe-area-inset-top));
  --panel-h:clamp(212px,31dvh,300px);              /* fixed: the panel never jumps between lines */
  --panel-bg:color-mix(in srgb,var(--paper) 90%,transparent);
  --spr-foot:calc(var(--panel-h) * .42 + env(safe-area-inset-bottom))}
.stage{position:absolute;inset:0;overflow:hidden;container-type:size;cursor:pointer}
.stage .bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .6s}
/* soft vignette so the bars and the panel sit on the picture without hard edges */
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 18%,transparent 58%,rgba(0,0,0,.32))}
#sprs{position:absolute;inset:0}
/* busts stand just above the text panel, the lower part tucked behind it */
#sprs{--spr-w:125cqw}#sprs[data-n="2"]{--spr-w:98cqw}#sprs[data-n="3"]{--spr-w:78cqw}
.spr{position:absolute;bottom:var(--spr-foot);height:min(calc(100cqh - var(--spr-foot) - var(--top-h) - 34px),var(--spr-w));width:auto;max-width:none;left:50%;transform:translateX(-50%);transform-origin:50% 100%;opacity:0;transition:opacity var(--t),filter var(--t),left .5s ease;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));pointer-events:none}
.spr.on{opacity:1}
/* wide sprites (fights, spears) must fit the screen: the box is capped by width and the picture is
   contained in it, standing on the same floor, so weapons are not cut off at the edges */
#sprs{--spr-maxw:100cqw}#sprs[data-n="2"]{--spr-maxw:70cqw}#sprs[data-n="3"]{--spr-maxw:52cqw}
/* a wide figure keeps its whole box on screen: centred at half its width from the edge, and it stands
   on the panel's top edge so the short picture is not hidden behind the text */
#sprs[data-n="2"] .spr.wide[data-pos=l]{left:35%}#sprs[data-n="2"] .spr.wide[data-pos=r]{left:65%}
#sprs[data-n="3"] .spr.wide[data-pos=l]{left:26%}#sprs[data-n="3"] .spr.wide[data-pos=r]{left:74%}
.spr.wide{z-index:1;bottom:calc(var(--panel-h) * .8 + env(safe-area-inset-bottom))}
.spr.wide{max-width:var(--spr-maxw);object-fit:contain;object-position:50% 100%}
/* alone on stage: never wider than the screen (a spear or a bow stays whole), and centred if wide */
#sprs:not([data-n="2"]):not([data-n="3"]) .spr{max-width:100cqw;object-fit:contain;object-position:50% 100%}
#sprs:not([data-n="2"]):not([data-n="3"]) .spr.wide[data-pos]{left:50%}
.spr[data-pos=l]{left:27%}.spr[data-pos=c]{left:50%}.spr[data-pos=r]{left:73%}
#sprs[data-n="3"] .spr[data-pos=l]{left:20%}#sprs[data-n="3"] .spr[data-pos=r]{left:80%}
.spr.dim{filter:brightness(.6) saturate(.8) drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.spr.talk{z-index:2}
/* a speaker leans in a little on each line; a new pose or expression cross-fades in */
.spr.say{animation:say .45s ease}
@keyframes say{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.025) translateY(-4px)}100%{transform:translateX(-50%) scale(1)}}
.spr.swap{animation:swap .35s ease}
@keyframes swap{from{opacity:.35}to{opacity:1}}

/* top bar over the picture */
.rtop{position:absolute;z-index:5;top:0;inset-inline:0;display:flex;align-items:center;gap:8px;padding:8px var(--pad);padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--panel-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:3px double var(--ink)}
.rtop .iconbtn{width:44px;height:44px;flex:none;background:transparent}
.rtitle{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.rtitle b{font-family:var(--f-read);font-size:18px}
.rtitle small{color:var(--mut);font-size:14px}           /* wraps instead of truncating */
.pearls{display:inline-flex;align-items:center;gap:5px;height:44px;padding:0 10px;border:1px solid var(--ink);flex:none}
.pearls .ic{width:18px;height:18px;color:var(--acc)}
.pearls b{font-family:var(--f-ui);font-size:17px;font-variant-numeric:tabular-nums}
.rprog{position:absolute;inset-inline:0;bottom:-3px;height:3px}
.rprog i{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--acc);transition:width var(--t)}

/* traits strip, visible on every size */
.rtraits{position:absolute;z-index:4;top:calc(var(--top-h) + 14px);inset-inline:var(--pad);display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;pointer-events:none}
.rtraits li{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink)}
.rtraits .ic{width:14px;height:14px;color:var(--mut)}
.rtraits b{font-variant-numeric:tabular-nums;font-size:14px}
.rtraits li.up{border-color:var(--acc);animation:tup 1.4s ease}
.rtraits li.up b{color:var(--acc)}
@keyframes tup{0%,60%{box-shadow:0 0 0 2px var(--acc)}100%{box-shadow:none}}
@media(max-width:699px){.rtraits li span{display:none}.rtraits li{padding:2px 7px}}

/* trait change chips, just above the panel, ~1.5 s */
.fxpop{position:absolute;z-index:6;left:50%;bottom:calc(var(--panel-h) + env(safe-area-inset-bottom) + 12px);transform:translate(-50%,8px);display:flex;flex-wrap:wrap;justify-content:center;gap:6px;opacity:0;pointer-events:none;width:max-content;max-width:calc(100% - 24px)}
.fxpop.on{animation:fxp 1.6s ease forwards}
@keyframes fxp{0%{opacity:0;transform:translate(-50%,8px)}12%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
.fxc{display:inline-block;background:var(--ink);color:var(--paper);font-weight:700;font-size:16px;padding:4px 12px;line-height:1.6}
.fxc.neg{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}

/* the text panel over the picture */
.panel-r{position:absolute;z-index:5;inset-inline:0;bottom:0;padding:0 10px calc(10px + env(safe-area-inset-bottom));pointer-events:none}
.panel-r>*{pointer-events:auto}
.dlg{position:relative;box-sizing:border-box;height:calc(var(--panel-h) - 10px);overflow-y:auto;max-width:820px;margin:0 auto;display:flex;flex-direction:column;
  background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--ink);padding:16px 20px 10px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.dlg::before{content:"";position:absolute;inset:4px;border:1px solid var(--line);pointer-events:none}
.dlg p{font-family:var(--f-story);font-size:var(--read-size);line-height:var(--read-lh);margin:0}
.dlg.nar p{color:var(--ink)}
.who{align-self:flex-start;font-family:var(--f-story);font-weight:700;color:var(--acc);font-size:20px;border-bottom:1px solid var(--acc);margin-bottom:4px}
.go{display:flex;justify-content:flex-end;align-items:center;gap:6px;color:var(--ink);font-size:16px;font-weight:700;margin-top:auto;padding-top:6px}
.go .ic{width:20px;height:20px;color:var(--acc);animation:nudge 1.4s ease-in-out infinite}
.go.mini{font-size:0}.go.mini .ic{width:18px;height:18px;color:var(--mut)}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(-4px)}}
/* line reveal: words fade in; a tap (or the end of the timer) shows all */
.rv .w{opacity:0;animation:win .28s ease forwards;animation-delay:var(--d)}
.dlg.shown .rv .w{animation:none;opacity:1}
@keyframes win{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.rv .w{animation:none;opacity:1}.spr.say,.go .ic{animation:none}}
/* verse screen keeps its own look, centred between double rules */
.dlg.verse{text-align:center;align-items:center;justify-content:center;gap:4px;border-width:0;border-block:3px double var(--ink);height:auto;min-height:calc(var(--panel-h) - 10px);max-height:calc(100dvh - var(--top-h) - 30px)}
.dlg.verse::before{display:none}
.dlg.verse .h{font-weight:700;font-size:calc(var(--read-size) + 2px)}
.dlg.verse .by{color:var(--acc);font-size:15px}
.dlg.verse.ayah .h{font-family:Amiri,'Noto Naskh Arabic',serif;font-weight:400;line-height:2.1;max-width:36em}
.dlg.verse .gloss{font-size:calc(var(--read-size) - 4px);opacity:.82;margin:2px 0 0;max-width:34em;line-height:1.6}
/* quote card (novels, plays, fables): our translation large, the original line small and italic under it */
.dlg.verse.quote .h{max-width:34em;line-height:1.8}
.dlg.verse.quote .orig{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:15px;opacity:.75;margin:2px 0 4px;max-width:40em;line-height:1.5;unicode-bidi:isolate}
.dlg.verse .go{align-self:stretch;margin-top:4px}
.fade{animation:fin .3s ease}
@keyframes fin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* choices: same panel, may grow taller, scrolls if needed */
.choices{max-width:820px;margin:0 auto;box-sizing:border-box;min-height:calc(var(--panel-h) - 10px);max-height:calc(100dvh - var(--top-h) - 40px);overflow-y:auto;background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--ink);padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.ask{margin:2px 2px 8px;font-size:16px}
.choices ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.choice{display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:10px;row-gap:6px;width:100%;min-height:var(--choice-h);padding:10px 14px;border:1.5px solid var(--ink);background:var(--paper2);text-align:start;transition:border-color var(--t-fast),background var(--t-fast)}
.choice:hover{border-color:var(--acc);background:var(--paper)}
.choice .k{font-family:var(--f-story);font-weight:700;color:var(--acc);font-size:20px;text-align:center;border-inline-end:1px solid var(--line)}
.ctext{font-family:var(--f-story);font-size:calc(var(--read-size) - 2px);line-height:1.6}
.tags{grid-column:2;display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-ui);font-size:14px;font-weight:700;color:var(--ink);border:1px solid var(--ink);padding:1px 8px;line-height:1.6}
.tag .ic{width:15px;height:15px}
.tag.cost{color:var(--acc);border-color:var(--acc)}
.choice.locked{background:transparent;border-style:dashed;border-color:var(--mut)}
.choice.locked .ctext{color:var(--mut)}
.choice.locked .k{color:var(--mut)}
.reader[data-mode=intro] .rtraits{display:none}
/* side panel (desktop) and map sheet */
.rs h4{font-family:var(--f-kicker);font-weight:400;color:var(--acc);font-size:15px;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:8px}
.rs{margin-bottom:18px}
.path{list-style:none;margin:0;padding:0}
.path li{position:relative;display:flex;align-items:baseline;gap:8px;padding:7px 0;padding-inline-start:20px;color:var(--mut);border-bottom:1px dotted var(--line)}
.path li::before{content:"";position:absolute;inset-inline-start:2px;top:16px;width:8px;height:8px;border:1px solid var(--ink);transform:rotate(45deg)}
.path li.d::before{background:var(--ink)}
.path li.c{color:var(--acc);font-weight:700}.path li.c::before{background:var(--acc);border-color:var(--acc)}
.path li span{font-family:Amiri;font-size:18px}.path li small{font-size:13px}
.path li .ic{width:15px;height:15px;margin-inline-start:auto;color:var(--acc)}
.statl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.statl li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:4px 8px;font-size:15px}
.statl li .ic{width:18px;height:18px;color:var(--mut)}
.statl li b{font-family:Amiri;font-size:18px}
.statl li i{grid-column:1/-1;height:4px;background:var(--line);position:relative}
.statl li i u{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--ink)}
.vlist{list-style:none;margin:0;padding:0}.vlist li{padding:6px 0;border-bottom:1px dotted var(--line);text-align:center}.vlist p{font-family:Amiri;font-weight:700;font-size:16px;line-height:1.8}
.keys{color:var(--mut);font-size:14px}
/* sheets used by the reader */
.sheet-box.intro{text-align:center;align-items:center}
.sheet-box.intro h2{font-size:22px;color:var(--acc)}
.chname{font-family:Amiri;font-weight:700;font-size:30px!important;color:var(--ink)!important;line-height:1.3}
.chcover{width:100%;aspect-ratio:16/9;background:center/cover;outline:1px solid var(--ink);outline-offset:4px;margin:8px 0 6px}
.reward{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--acc);font-size:18px;border-block:1px solid var(--line);padding:6px 0}
.reward .ic{width:20px;height:20px}
.sheet-box .btn+.btn{margin-top:-2px}
.pw{display:flex;gap:6px;align-items:flex-start;font-size:15px}.pw .ic{color:var(--acc);margin-top:4px;width:16px;height:16px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dotted var(--line);font-weight:700}
.seg{display:flex;border:1px solid var(--ink)}
.seg button{min-width:64px;min-height:44px;padding:4px 12px;font-weight:700;font-family:Amiri;font-size:17px}
.seg button+button{border-inline-start:1px solid var(--line)}
.seg button.on{background:var(--ink);color:var(--paper)}
.preview{font-family:var(--f-story);font-size:var(--read-size)!important;line-height:var(--read-lh);color:var(--ink)!important}
.sheet-box.ending{text-align:center;align-items:center}
.sheet-box.ending .btn{width:100%}

/* tablet and desktop: a little more room for text, panel centred */
@media(min-width:700px){
  .reader{--top-h:calc(64px + env(safe-area-inset-top));--panel-h:clamp(230px,27dvh,330px)}
  .panel-r{padding-inline:24px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .dlg{padding:20px 26px 12px}
  .fxpop{bottom:calc(var(--panel-h) + env(safe-area-inset-bottom) + 20px)}
}
@media(min-width:1024px){
  .reader{--panel-h:clamp(220px,30dvh,300px)}
}
/* phone landscape: panel on the reading side, figures on the other */
@media(orientation:landscape) and (max-height:520px){
  .reader{--top-h:calc(52px + env(safe-area-inset-top));--panel-h:min(62dvh,250px);--spr-foot:0px}
  .rtop{padding-block:4px}
  .panel-r{inset-inline-end:auto;width:56%;padding-inline:10px}
  .spr[data-pos]{left:24%}
  .rtraits{display:none}
  .fxpop{left:72%}
}
/* chapter-end card and paywall */
.sheet-box.endch{text-align:center;align-items:stretch}
.sheet-box.endch h2{color:var(--ink)}
.endsec{text-align:start}
.endsec h4,.nextup small{font-family:var(--f-ui);font-size:14px;font-weight:700;color:var(--mut);margin:0 0 6px}
.picks{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:4px}
.picks li{font-family:var(--f-story);font-size:17px;line-height:1.55;color:var(--ink)}
.picks li::marker{color:var(--acc)}
.gain{display:flex;flex-wrap:wrap;gap:6px}
.gain .fxc{font-size:15px}
.nextup{display:flex;flex-direction:column;align-items:center;gap:2px;border-block:1px solid var(--line);padding:8px 0}
.nextup b{font-family:var(--f-read);font-size:20px}
.pwbox{display:flex;flex-direction:column;gap:8px}
.price-line{text-align:center;color:var(--ink)!important;font-size:16px;margin:0}
.price-line b{font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.sheet-box.paywall .left{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);font-weight:700;margin:0}
.sheet-box.paywall .left .ic{width:18px;height:18px;color:var(--acc)}
.sheet-box.menu .rs:first-of-type{margin-top:8px}

/* ---------- reading text size (S.prefs.size: s / m / l / xl, set as --read-size on <html>) ---------- */
.who{font-size:max(18px,calc(var(--read-size) - 2px))}
.dlg.verse .h{font-size:min(calc(var(--read-size) + 2px),7.4vw);text-wrap:balance}   /* a hemistich keeps to one line on a phone where it can */
.dlg.verse.ayah .h{font-size:calc(var(--read-size) + 2px)}
.dlg.verse .gloss{text-wrap:pretty}
/* the larger steps get a taller panel (still fixed per step, so it never jumps between lines); long text scrolls inside it */
html[data-rsize=l] .reader{--panel-h:clamp(236px,35dvh,330px)}
html[data-rsize=xl] .reader{--panel-h:clamp(268px,42dvh,390px);--read-lh:1.75}
html[data-rsize=xl] .dlg.verse.ayah .h{line-height:1.9}
html[data-rsize=xl] .dlg{padding-inline:16px}
.dlg{overscroll-behavior:contain;scrollbar-width:thin}
@media(min-width:700px){
  html[data-rsize=l] .reader{--panel-h:clamp(250px,30dvh,360px)}
  html[data-rsize=xl] .reader{--panel-h:clamp(280px,35dvh,410px)}
  html[data-rsize=xl] .dlg{padding-inline:26px}
}
@media(min-width:1024px){
  html[data-rsize=l] .reader{--panel-h:clamp(240px,33dvh,330px)}
  html[data-rsize=xl] .reader{--panel-h:clamp(270px,39dvh,380px)}
}
@media(orientation:landscape) and (max-height:520px){
  html[data-rsize=l] .reader,html[data-rsize=xl] .reader{--panel-h:min(72dvh,290px)}
}
/* the control: A− [صغير | عادي | كبير | كبير جدًا] A+ and a sample line at the chosen size */
.setrow.fsrowset{flex-direction:column;align-items:stretch;gap:8px}
.fsctl{display:flex;flex-direction:column;gap:8px;min-width:0}
.fsrow{display:flex;align-items:stretch;gap:6px}
.fsstep{flex:none;min-width:40px;min-height:44px;padding:0 6px;border:1px solid var(--ink);font-family:var(--f-ui);font-weight:700;font-size:16px;color:var(--ink);background:transparent}
.fsstep:disabled{opacity:.35;cursor:default}
.fsseg{flex:1;min-width:0}
.fsseg button{flex:1 1 auto;min-width:0;padding:4px 3px;font-size:16px;line-height:1.2;white-space:nowrap}
.acc-read .fsseg button{font-size:15px}
.fsprev{margin:0;padding:8px 12px;border:1px solid var(--line);background:var(--paper2);font-weight:400}
.acc-read .fsctl{margin-top:6px}

/* ---------- reading font (S.prefs.font, set as --f-story on <html>); each option drawn in its own face ---------- */
.ffseg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (min-width:600px){.sheet-box .ffseg{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ffseg button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:56px;padding:4px 6px;border:1px solid var(--ink);background:transparent;color:var(--ink);line-height:1.35;font-size:19px;font-weight:400}
.ffseg button small{font-family:var(--f-ui);font-size:12px;color:var(--mut);font-weight:400}
.ffseg button.on{background:var(--ink);color:var(--paper)}.ffseg button.on small{color:var(--paper);opacity:.8}
html[data-rfont=cairo]{--read-lh:1.8}
html[data-rfont=markazi] .dlg p:not(.h):not(.gloss){font-size:calc(var(--read-size) * 1.08)}
html[data-rfont=markazi] .preview{font-size:calc(var(--read-size) * 1.08)!important}
html[data-rfont=markazi] .ctext{font-size:calc((var(--read-size) - 2px) * 1.08)}