:root{
  --bg:#0a0907; --ink:#f4ede0; --dim:#a89b86; --amber:#e8b563;
  --accbg:#e8b563; --accfg:#0a0907;
  --linje:rgba(244,237,224,.14); --panel:rgba(244,237,224,.055); --panel2:rgba(244,237,224,.09);
  --brod:"Newsreader",Georgia,serif; --disp:"Instrument Serif",Georgia,serif; --ui:"Inter",system-ui,sans-serif;
  --fs:1.2rem; --lh:1.72; --spalt:38rem;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
html[data-theme="dager"]{ --bg:#f6f1e7; --ink:#211c15; --dim:#6b6152; --amber:#9a6b18;
  --accbg:#211c15; --accfg:#f6f1e7;
  --linje:rgba(33,28,21,.16); --panel:rgba(33,28,21,.045); --panel2:rgba(33,28,21,.08); }
html[data-theme="sepia"]{ --bg:#efe3cc; --ink:#3a2f22; --dim:#7c6a4f; --amber:#9a6b18;
  --accbg:#3a2f22; --accfg:#efe3cc;
  --linje:rgba(58,47,34,.16); --panel:rgba(58,47,34,.05); --panel2:rgba(58,47,34,.09); }
html[data-fs="1"]{--fs:1.02rem} html[data-fs="2"]{--fs:1.1rem} html[data-fs="3"]{--fs:1.2rem}
html[data-fs="4"]{--fs:1.32rem} html[data-fs="5"]{--fs:1.46rem} html[data-fs="6"]{--fs:1.62rem}
html[data-lh="kompakt"]{--lh:1.5} html[data-lh="luftig"]{--lh:1.95}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--brod);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow:hidden}
#app{height:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
em{font-style:italic}
.knapp{font-family:var(--ui);font-size:.92rem;background:var(--panel);border:1px solid var(--linje);
  border-radius:.7rem;padding:.7rem 1.15rem;color:var(--ink)}
.las-falt{font:inherit;font-size:1rem;background:var(--panel);color:var(--ink);
  border:1px solid var(--linje);border-radius:.7rem;padding:.7rem 1rem;width:14rem;
  outline:none;margin:.4rem 0 .7rem;display:block}
.las-falt:focus{border-color:#e8b563}
.las-fel{color:#d98a7a;font-size:.9rem;min-height:1.2rem;margin-top:.5rem}
.start .liten a{color:#e8b563;text-decoration:none;border-bottom:1px solid rgba(232,181,99,.45)}
.knapp:hover{border-color:var(--amber);color:var(--amber)}
.knapp-fylld{background:var(--accbg);color:var(--accfg);border-color:var(--accbg);font-weight:600}
.knapp-fylld:hover{color:var(--accfg);border-color:var(--accbg);filter:brightness(1.12)}

/* START */
.start{height:100%;display:flex;flex-direction:column;align-items:center;gap:2.2rem;
  padding:calc(var(--st) + 2.5rem) 1.5rem calc(var(--sb) + 3rem);overflow:auto;-webkit-overflow-scrolling:touch}
.s-hero{display:flex;flex-direction:column;align-items:center;gap:1.6rem;text-align:center;margin-top:auto}
.start>*:last-child{margin-bottom:auto}
.start img{width:min(76vw,360px);height:auto;border-radius:.45rem;cursor:zoom-in;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 55px rgba(232,181,99,.10)}

/* omslag i fullskärm */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(5,4,3,.9);backdrop-filter:blur(6px);
  display:grid;place-items:center;opacity:0;transition:opacity .2s;cursor:zoom-out}
.lightbox.pa{opacity:1}
.lightbox img{max-width:min(94vw,700px);max-height:92vh;width:auto;height:auto;border-radius:.5rem;
  box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lightbox .stang{position:absolute;top:calc(var(--st) + .8rem);right:1rem;font-family:var(--ui);
  font-size:1.4rem;color:#f4ede0;background:rgba(244,237,224,.12);border-radius:50%;
  width:2.6rem;height:2.6rem;display:grid;place-items:center}
.start h1{font-family:var(--brod);font-weight:500;font-size:clamp(2.2rem,8.5vw,3.4rem);margin:.4rem 0 0;letter-spacing:.09em;line-height:1.05}
.start .under{font-family:var(--brod);font-style:italic;color:var(--dim);margin:.5rem 0 0;font-size:1.08rem}
.start .forf{font-family:var(--ui);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:.8rem 0 0}
.ver{opacity:.55;font-size:.85em}
.start .rad{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}
.start .liten{font-family:var(--ui);font-size:.76rem;color:var(--dim);margin-top:1rem}
@media (min-width:820px){
  .start{max-width:60rem;margin:0 auto}
  .s-hero{flex-direction:row;text-align:left;gap:3rem}
  .start img{width:min(34vw,360px)}
  .s-hero .rad{justify-content:flex-start}
}

/* RECENSIONER */
.recens{width:100%;max-width:34rem;font-family:var(--ui)}
.rec-summa{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.9rem}
.rec-summa .stj{color:var(--amber);font-size:1.15rem;letter-spacing:.12em}
.rec-summa .txt{font-size:.85rem;color:var(--dim)}
.rec-knapp{display:flex;justify-content:center;margin:.4rem 0 1.1rem}
.rec-lista{display:flex;flex-direction:column;gap:.7rem}
.rec{background:var(--panel);border:1px solid var(--linje);border-radius:.8rem;padding:.8rem 1rem}
.rec .rrad{display:flex;justify-content:space-between;gap:.6rem;font-size:.8rem;align-items:baseline}
.rec .namn{font-weight:600}
.rec .stj{color:var(--amber);letter-spacing:.08em}
.rec .komm{font-family:var(--brod);font-size:.98rem;margin:.4rem 0 0;line-height:1.5}
.fform{display:flex;flex-direction:column;gap:.7rem}
.fform input[type=text],.fform textarea{width:100%;background:var(--panel);border:1px solid var(--linje);
  border-radius:.6rem;padding:.7rem .85rem;color:var(--ink);font-family:var(--ui);font-size:.95rem}
.fform textarea{min-height:5.5rem;resize:vertical}
.stjarnval{display:flex;gap:.25rem;justify-content:center;font-size:2rem;line-height:1}
.stjarnval button{color:var(--dim);padding:.15rem .2rem}
.stjarnval button.pa{color:var(--amber)}
.hpx{position:absolute;left:-9999px;top:-9999px;opacity:0;height:1px;overflow:hidden}
.rec-status{font-size:.85rem;color:var(--amber);text-align:center;min-height:1.2em}

/* INNEHÅLL */
.inn{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--st) + 1.2rem) 0 calc(var(--sb) + 3rem)}
.inn-inner{max-width:40rem;margin:0 auto;padding:0 1.25rem}
.inn h1{font-family:var(--brod);font-weight:500;font-size:2.4rem;letter-spacing:.07em;margin:.6rem 0 .1rem;line-height:1.05}
.inn .under{font-family:var(--brod);font-style:italic;color:var(--dim);margin:0 0 1.4rem}
.fortsatt a{display:inline-flex;gap:.5rem;font-family:var(--ui);font-size:.9rem;color:var(--amber);
  border:1px solid var(--amber);border-radius:.7rem;padding:.6rem 1rem;margin-bottom:1.4rem;cursor:pointer}
.rad-topp{display:flex;gap:.5rem;margin:.2rem 0 1.4rem}
.innr{display:flex;align-items:baseline;gap:1rem;padding:.9rem .3rem;border-bottom:1px solid var(--linje);width:100%;text-align:left}
.innr:hover{background:var(--panel)}
.innr .nr{font-family:var(--disp);font-size:1.5rem;color:var(--amber);min-width:2.4rem;text-align:right}
.innr .ort{font-family:var(--ui);font-size:.9rem;color:var(--dim);flex:1}
.innr .tid{font-family:var(--ui);font-size:.7rem;color:var(--dim);white-space:nowrap;opacity:.75}
/* Resten av boken i provet. Nedtonad och utan hover, så att det syns på en
   halv sekund att raderna inte går att öppna — färgen ensam räcker inte, det
   är därför siffran också tappar bärnstenen och blir samma dova ton som
   titeln. cursor: default och inte not-allowed: raderna nekar ingenting, de
   berättar. */
.innr--last{opacity:.42;cursor:default}
.innr--last:hover{background:none}
.innr--last .nr{color:var(--dim)}
.innr--last .ort{font-family:var(--disp);font-size:1.05rem;color:var(--ink)}
.inn-last-not{font-family:var(--ui);font-size:.82rem;color:var(--dim);
  margin:2.2rem 0 .6rem;padding:0 .3rem}

/* LÄSARE (rullande) */
.las{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.lbar{display:flex;align-items:center;gap:.5rem;padding:max(var(--st) + .5rem, 1.3rem) .7rem .5rem;font-family:var(--ui);
  border-bottom:1px solid var(--linje);background:var(--bg);z-index:10}
.lbar .ikon{color:var(--dim);padding:.4rem .55rem;border-radius:.5rem;font-size:1rem}
.lbar .ikon:hover{color:var(--amber)}
.lbar .ltitel{flex:1;text-align:center;font-size:.8rem;color:var(--dim);letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vwrap{flex:1;position:relative;display:flex;justify-content:center;overflow:hidden;
  padding:1.4rem 0 .8rem;transition:padding .2s}
body.har-spelare .vwrap{padding-bottom:7.6rem}
body.har-spelare .lprog{display:none}
.visor{position:relative;height:100%;overflow:hidden;touch-action:pinch-zoom}
.hint{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(10,9,7,.45);backdrop-filter:blur(2px);cursor:pointer}
.hint div{font-family:var(--ui);font-size:.95rem;color:#f4ede0;background:rgba(10,9,7,.85);border:1px solid rgba(244,237,224,.25);
  border-radius:.9rem;padding:1rem 1.3rem;max-width:16rem;text-align:center;line-height:1.5}
.flode{height:100%;column-fill:auto;font-size:var(--fs);line-height:var(--lh);
  transition:transform .25s cubic-bezier(.4,0,.2,1)}
.flode.direkt{transition:none}
.zon{position:absolute;top:0;bottom:0;width:22%;z-index:5;cursor:pointer}
.zon.zv{left:0}.zon.zh{right:0}
.pil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:70px;display:none;
  place-items:center;font-size:1.7rem;color:var(--dim);z-index:6}
.pil.pv{left:4px}.pil.ph{right:4px}
.pil:hover{color:var(--amber)}
@media (hover:hover) and (pointer:fine){ .pil{display:grid} }
.flode .kaphuvud{text-align:center;margin:.6rem 0 2rem;break-inside:avoid}
.flode .kaphuvud .nr{font-family:var(--disp);font-size:3.6rem;line-height:1;color:var(--amber)}
.flode .kaphuvud .kaptitel{font-family:var(--brod);font-style:italic;font-size:1.25rem;margin-top:.3rem}
.kaphuvud .ort{font-family:var(--ui);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-top:.6rem}
.flode p{margin:0;text-indent:1.5em;text-align:left;hyphens:none}
.flode p.forsta{text-indent:0}
.flode p.oppning{margin-top:.2rem}
.flode p.oppning::first-line{font-variant:small-caps;letter-spacing:.03em}
.flode .scenbryt{text-align:center;color:var(--amber);letter-spacing:.5em;margin:1.7rem 0;opacity:.7;text-indent:0;break-inside:avoid}
.men.aktiv{background:rgba(232,181,99,.18);border-radius:.2em;box-shadow:0 0 0 2px rgba(232,181,99,.18)}
body.har-spelare .men{cursor:pointer}
.men.har-korr{border-bottom:2px dotted var(--amber)}
.korrmarke{font-size:.62rem;letter-spacing:.14em;color:var(--accfg);background:var(--accbg);
  border-radius:.4rem;padding:.2rem .45rem;margin-left:.3rem}
.korr-citat{font-family:var(--brod);font-style:italic;color:var(--dim);font-size:.95rem;
  border-left:3px solid var(--amber);padding-left:.8rem;margin:.9rem 0}
.korr-bef{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem}
.korr-rad{font-family:var(--ui);font-size:.88rem;background:var(--panel);border:1px solid var(--linje);
  border-radius:.6rem;padding:.55rem .75rem;display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.korr-radera{color:var(--dim);font-size:.9rem;padding:0 .2rem;flex-shrink:0}
.korr-radera:hover{color:var(--amber)}
.men.har-forslag{border-bottom:2px dotted #5b9bd5}
.korr-rad.forslag{border-left:3px solid #5b9bd5}
.korr-av{color:var(--dim);font-size:.78rem;font-style:italic;margin-left:.45rem}
.korr-dom{font-size:.6rem;letter-spacing:.12em;padding:.12rem .45rem;border-radius:4px;
  border:1px solid;flex-shrink:0;white-space:nowrap}
.korr-dom.godkand{color:#69a869;border-color:#69a869}
.korr-dom.avslagen{color:#c66a4f;border-color:#c66a4f}
.korr-rad.godkand{border-left:3px solid #69a869}
.korr-rad.avslagen{border-left:3px solid #c66a4f}
.korr-beslut{font-family:var(--ui);font-size:.8rem;margin:-.4rem 0 0;padding:.45rem .75rem .5rem;
  background:var(--panel);border:1px solid var(--linje);border-top:0;border-radius:0 0 .6rem .6rem;color:var(--dim)}
.korr-beslut.godkand{border-left:3px solid #69a869}
.korr-beslut.avslagen{border-left:3px solid #c66a4f}
.korr-granska{display:flex;gap:.4rem;margin:-.5rem 0 1.1rem;padding:.5rem .5rem .15rem .55rem;
  font-family:var(--ui);border-left:3px solid #5b9bd5}
.korr-granska input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--linje);
  border-radius:6px;padding:.35rem .5rem;color:inherit;font-size:.85rem}
.korr-login{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom));background:var(--panel);
  border-top:1px solid var(--linje);font-family:var(--ui);font-size:.9rem}
.korr-login input{flex:1;min-width:9rem;background:var(--bg);border:1px solid var(--linje);
  border-radius:6px;padding:.4rem .55rem;color:inherit;font-size:16px}
@media (max-width:480px){.korr-login>span:first-child{display:none}}
.korr-intro{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.korr-intro-ruta{max-width:24rem;background:var(--panel);border:1px solid var(--linje);border-radius:14px;
  padding:1.3rem 1.4rem;font-family:var(--ui);font-size:.95rem;line-height:1.5}
.korr-intro-ruta h2{margin:0 0 .6rem;font-size:1.15rem}
.korr-intro-ruta p{margin:.5rem 0;color:var(--dim)}
.korr-intro-ruta button{margin-top:.8rem;width:100%}
.korr-grind{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.korr-grind-ruta{max-width:22rem;width:100%;display:flex;flex-direction:column;gap:.85rem;font-family:var(--ui)}
.korr-grind-ruta h2{margin:0}
.korr-grind-ruta p{margin:0;color:var(--dim);font-size:.92rem;line-height:1.45}
.korr-grind-ruta input{background:var(--panel);border:1px solid var(--linje);border-radius:8px;
  padding:.6rem .7rem;color:inherit;font-size:16px}
.korr-rad.klar{opacity:.5;text-decoration:line-through}
.korr-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 4.5rem);
  background:var(--bg);border:1px solid var(--amber);color:var(--ink);font-family:var(--ui);
  padding:.6rem 1rem;border-radius:.6rem;font-size:.85rem;z-index:60;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.35);max-width:min(90vw,26rem);text-align:center}
.flode.forord-vy .lead{font-style:italic;color:var(--amber);font-size:1.2rem;text-indent:0}
.flode.forord-vy .sig{text-align:right;font-style:italic;color:var(--dim);margin-top:1.8rem;text-indent:0}
.flode.forord-vy p{text-indent:1.5em}
/* Slutet på provet är inte ett kapitel utan ett tilltal, och ska vänsterställas
   som ett sådant. Rubriken tappar centreringen, stycket sitt indrag — det
   indraget är det som får första raden att se centrerad ut — och knapparna får
   en egen rad som börjar vid samma kant som allt annat. */
.flode.provslut-vy .kaphuvud{text-align:left;margin-left:0}
.flode.provslut-vy p{text-indent:0}
.flode.provslut-vy .rad{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-start}
.flode.ordlista-vy p{text-indent:0;margin:0 0 .9em}
.flode.ordlista-vy .lead{margin-bottom:1.4em}
.lprog{position:relative;padding:.5rem .9rem calc(var(--sb) + .5rem);font-family:var(--ui);
  border-top:1px solid var(--linje);background:var(--bg);text-align:center;z-index:10}
.lprog>#lprogbar{position:absolute;top:0;left:0;height:2px;background:var(--amber);width:0;transition:width .15s}
.lprog>em{font-style:normal;font-size:.72rem;color:var(--dim);letter-spacing:.05em}

/* INSTÄLLNINGS-ARK */
.ark-bak{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.ark-bak.pa{opacity:1;pointer-events:auto}
.ark{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--bg);border:1px solid var(--linje);border-bottom:none;
  border-radius:1.1rem 1.1rem 0 0;padding:.3rem 1.5rem calc(var(--sb) + 1.6rem);transform:translateY(102%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);font-family:var(--ui);max-width:34rem;margin:0 auto;
  box-shadow:0 -10px 40px rgba(0,0,0,.25)}
.ark.pa{transform:none}
.ark .grepp{width:38px;height:4px;background:var(--linje);border-radius:2px;margin:.7rem auto .4rem}
.ark h3{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:1.2rem 0 .55rem}
.val{display:flex;gap:.55rem;flex-wrap:wrap}
.val button{border:1px solid var(--linje);border-radius:.65rem;padding:.65rem .9rem;font-size:.9rem;
  background:var(--panel);flex:1;min-width:0;min-height:44px}
.val button.tema-natt{background:#0a0907;color:#f4ede0;border-color:#3a352c}
.val button.tema-dager{background:#f6f1e7;color:#211c15;border-color:#c9beab}
.val button.tema-sepia{background:#efe3cc;color:#3a2f22;border-color:#cdbd9c}
.val button.knapp-fylld{background:var(--accbg);color:var(--accfg);border-color:var(--accbg)}
.val button.pa{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.val button.pa:not([data-tema]){color:var(--amber)}

/* LJUDSPELARE */
.spelare{position:fixed;left:50%;bottom:calc(var(--sb) + .7rem);z-index:38;font-family:var(--ui);
  width:min(94vw,40rem);background:var(--bg);background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(12px);border:1px solid var(--linje);border-radius:1rem;
  box-shadow:0 12px 40px rgba(0,0,0,.35);padding:.65rem .9rem .7rem;
  transform:translate(-50%,140%);transition:transform .28s}
.spelare.pa{transform:translate(-50%,0)}
.sp-scrub{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.sp-scrub input[type=range]{flex:1;accent-color:var(--amber);height:3px}
.sp-tid{font-size:.68rem;color:var(--dim);min-width:2.8rem;text-align:center;font-variant-numeric:tabular-nums}
.sp-rad{display:flex;align-items:center;gap:.6rem}
.sp-titel{flex:1;min-width:0}
.sp-titel b{display:block;font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-titel span{font-size:.72rem;color:var(--dim)}
.sp-knapp{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-size:.82rem;color:var(--ink);border:1px solid var(--linje)}
.sp-knapp.stor{width:2.9rem;height:2.9rem;background:var(--accbg);color:var(--accfg);font-size:1.1rem;border:none}
.sp-verktyg{display:flex;align-items:center;gap:.4rem}
.sp-verktyg button{font-size:.72rem;color:var(--dim);border:1px solid var(--linje);border-radius:.5rem;padding:.3rem .5rem}
.sp-verktyg button.pa{color:var(--amber);border-color:var(--amber)}
.sp-sov{display:none;gap:.4rem;margin-top:.5rem;flex-wrap:wrap}
.sp-sov.pa{display:flex}
.sp-sov button{font-size:.72rem;color:var(--dim);border:1px solid var(--linje);border-radius:.5rem;padding:.4rem .6rem;flex:1;white-space:nowrap}
.sp-sov button.pa{color:var(--amber);border-color:var(--amber)}