/* Mytiska Värmland – prototyp
   Två lägen: natten (myter, mysterier, spelledare) och papperet (plattform, tidskrift, historia).
   Kartan är en pappersskiss utlagd på ett nattmörkt bord; myterna glöder som lyktor. */
:root{
  --natt:#0c191c;
  --natt-2:#132629;
  --natt-3:#1c3437;
  --dimma:#d6e5de;
  --dimma-2:#9dbdb3;
  --papper:#efe6d2;
  --papper-2:#e3d6b9;
  --blak:#2b2118;
  --blak-2:#5a4632;
  --lykta:#e8b04b;
  --lykta-2:#f6d58e;
  --falu:#a5402c;
  --vatten:#2f4744;
  --f-fraktur:'UnifrakturMaguntia', 'Old Standard TT', serif;
  --f-saga:'IM Fell English', 'Old Standard TT', Georgia, serif;
  --f-sc:'IM Fell English SC', 'Old Standard TT', Georgia, serif;
  --f-tidning:'Old Standard TT', Georgia, serif;
  --f-ui:'Atkinson Hyperlegible', system-ui, sans-serif;
  --f-arkiv:'Courier Prime', 'Courier New', monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --head-h:60px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--natt);color:var(--dimma);font-family:var(--f-ui);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--lykta-2)}
:focus-visible{outline:2px solid var(--lykta);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:400}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.head{position:fixed;inset:0 0 auto 0;height:calc(var(--head-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;display:grid;grid-template-columns:48px 1fr 48px 48px;align-items:center;gap:4px;z-index:50;background:linear-gradient(var(--natt) 30%, rgba(12,25,28,.0));transition:background .4s}
.head.solid{background:rgba(12,25,28,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(214,229,222,.08)}
.head .logo{justify-self:center;height:40px;width:auto;cursor:pointer;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(214,229,222,.18);background:rgba(12,25,28,.55);display:grid;place-items:center;padding:0}
.iconbtn svg{width:20px;height:20px}
.iconbtn[hidden]{visibility:hidden;display:grid}
.iconbtn.on{border-color:var(--lykta);color:var(--lykta)}

/* ---------- Views ---------- */
.view{display:none;min-height:100%;padding-top:calc(var(--head-h) + env(safe-area-inset-top))}
.view.active{display:block;animation:viewIn .7s var(--ease)}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
.wrap{max-width:720px;margin:0 auto;padding:0 18px}

/* ---------- Gate ---------- */
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 40%, rgba(28,52,55,.92), rgba(8,16,18,.98) 70%);transition:opacity 1.2s var(--ease), visibility 1.2s}
.gate.gone{opacity:0;visibility:hidden}
.gate-in{max-width:420px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.gate img{width:min(320px,78vw);animation:gateLogo 2.4s var(--ease) both}
@keyframes gateLogo{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:none}}
.gate p{font-family:var(--f-saga);font-size:20px;line-height:1.45;color:var(--dimma);animation:gateLogo 2.4s .6s var(--ease) both}
.gate .row{animation:gateLogo 2s 1.1s var(--ease) both}
.gate small{color:var(--dimma-2);font-size:14px;animation:gateLogo 2s 1.4s var(--ease) both}

/* ---------- Buttons & chips ---------- */
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;border:1.5px solid rgba(214,229,222,.45);background:transparent;font-weight:700;font-size:16px;text-decoration:none;color:var(--dimma);transition:transform .2s, background .2s, border-color .2s}
.btn:active{transform:scale(.97)}
.btn.gold{background:var(--lykta);border-color:var(--lykta);color:#1c1405;box-shadow:0 0 28px rgba(232,176,75,.35)}
.btn.ink{background:var(--blak);border-color:var(--blak);color:var(--papper)}
.btn.inkline{border-color:var(--blak);color:var(--blak)}
.btn.small{min-height:40px;padding:8px 16px;font-size:15px}
.btn.block{width:100%}
.btn svg{width:18px;height:18px;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:13.5px;border:1px solid rgba(214,229,222,.3);color:var(--dimma-2);white-space:nowrap}
.chip.gold{border-color:rgba(232,176,75,.5);color:var(--lykta-2);background:rgba(232,176,75,.08)}
.chip.warn{border-color:#e39b8d;color:#f0b3a7}
.chip.ink{border-color:var(--blak-2);color:var(--blak)}
.eyebrow{font-family:var(--f-sc);font-size:15px;letter-spacing:.14em;color:var(--lykta)}
.proto{font-family:var(--f-arkiv);font-size:12px;letter-spacing:.06em;color:var(--dimma-2);border:1px dashed rgba(214,229,222,.35);padding:2px 8px;border-radius:3px;display:inline-block}
.paper .proto,.letter .proto{color:var(--blak-2);border-color:var(--blak-2)}

/* ---------- Map hero ---------- */
.hero{position:relative;height:min(78svh,860px);min-height:460px;margin-top:calc(-1 * (var(--head-h) + env(safe-area-inset-top)));overflow:hidden;background:radial-gradient(ellipse at 50% 45%, #1b3134 0%, #0a1517 75%)}
.map-vp{position:absolute;inset:0;touch-action:none;cursor:grab;overflow:hidden}
.map-vp.drag{cursor:grabbing}
.map-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.map-world img.karta{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.map-detail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s}
.markers{position:absolute;inset:0}
.mk{position:absolute;transform:translate(-50%,-50%) scale(var(--k,1));border:0;background:none;padding:0;display:grid;place-items:center;width:44px;height:44px;transition:opacity .45s, filter .3s}
.mk .lbl{position:absolute;left:50%;top:40px;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-saga);font-size:14px;color:var(--blak);background:rgba(239,230,210,.92);padding:1px 8px;border-radius:3px;border:1px solid rgba(43,33,24,.25);pointer-events:none}
.mk.active::before,.mk.active::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid var(--lykta);animation:ring 2.6s ease-out infinite;pointer-events:none}
.mk.active::after{animation-delay:1.3s}
@keyframes lantern{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
@keyframes ring{from{transform:scale(.7);opacity:.9}to{transform:scale(2.3);opacity:0}}
.mk.nolbl .lbl{display:none}
.mk{width:48px;height:48px}
.mk .dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid #f3ead6;box-shadow:0 0 0 1.5px rgba(43,33,24,.75),0 3px 10px rgba(43,33,24,.5)}
.mk .dot svg{width:17px;height:17px;color:#f6efdf}
.mk .lbl{top:44px}
/* myter: lyktguld · mysterier: tjärsvart med guld · alltid störst */
.mk.myt .dot{width:40px;height:40px;background:var(--lykta)}
.mk.myt .dot svg{width:21px;height:21px;color:#2b2118}
.mk.mys .dot{width:40px;height:40px;background:#2b2118}
.mk.mys .dot svg{width:21px;height:21px;color:var(--lykta)}
.mk.myt .lbl,.mk.mys .lbl{top:48px;font-weight:700;background:var(--blak);color:var(--lykta-2);border-color:var(--blak)}
.mk.plats .dot{background:var(--vatten)}
.mk.kar .dot{background:#6b4a6e}
.mk.seed .dot{background:#5f7a52}
.mk.spel .dot{background:var(--falu)}
.mk.spel .dot b{font-family:var(--f-sc);font-size:12.5px;color:#fff;letter-spacing:.02em}
.mk.plats .lbl{color:var(--vatten)}
.mk.kar .lbl{color:#4e3450}
.mk.seed .lbl{font-style:italic;color:#3f5a35}
.mk.spel .lbl{background:var(--falu);color:#fff;border-color:var(--falu)}
.mk.active .dot{box-shadow:0 0 0 1.5px rgba(43,33,24,.75),0 0 26px 8px rgba(246,213,142,.6);animation:lantern 2.6s ease-in-out infinite}
.mk.active::before,.mk.active::after{inset:6px}
.mk.cl .dot{width:40px;height:40px;background:var(--papper);border:2.5px solid #2b2118;box-shadow:0 3px 10px rgba(43,33,24,.5)}
.mk.cl .dot svg{width:20px;height:20px;color:#2b2118}
.mk.cl .count{position:absolute;right:0;bottom:2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#2b2118;color:var(--papper);font-size:12px;font-weight:700;display:grid;place-items:center;border:1.5px solid var(--papper)}
.mk.cl .lbl{top:48px;font-weight:700;background:var(--blak);color:var(--lykta-2);border-color:var(--blak)}
.mk.cl.hot .dot{border-color:#5a3a10;box-shadow:0 0 0 3px var(--lykta),0 0 24px 8px rgba(246,213,142,.6);animation:lantern 2.6s ease-in-out infinite}
.mk.cl.hot .count{background:var(--lykta);color:#2b2118;border-color:#2b2118}
.mk.hide{opacity:0;pointer-events:none}
.mk.dim{opacity:.18;pointer-events:none}
.mist{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.85}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(43,33,24,.28) 100%),linear-gradient(rgba(12,25,28,.7),rgba(12,25,28,0) 20%, transparent 80%, rgba(12,25,28,.85))}
.map-ui{position:absolute;inset:auto 0 0 0;padding:0 12px 14px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.map-ui > *{pointer-events:auto}
.filters{position:absolute;left:0;right:0;top:calc(var(--head-h) + env(safe-area-inset-top) + 4px);display:flex;gap:8px;overflow-x:auto;padding:4px 12px 8px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 13px;border-radius:999px;background:rgba(12,25,28,.72);border:1px solid rgba(214,229,222,.22);font-size:14px;color:var(--dimma);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.filters button[aria-pressed="true"]{background:var(--papper);color:var(--blak);border-color:var(--papper)}
.filters svg{width:14px;height:14px}
.zoomctl{position:absolute;right:12px;bottom:118px;display:flex;flex-direction:column;gap:8px}
.zoomctl button{width:44px;height:44px;border-radius:50%;background:rgba(239,230,210,.94);color:var(--blak);border:1px solid rgba(43,33,24,.35);font-size:22px;line-height:1;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.hint{display:flex;gap:12px;align-items:center;background:rgba(12,25,28,.86);border:1px solid rgba(232,176,75,.35);border-radius:14px;padding:12px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:520px;margin:0 auto;width:100%;transition:opacity .4s, transform .4s}
.hint.gone{opacity:0;transform:translateY(10px);pointer-events:none}
.hint .glow{flex:none;width:12px;height:12px;border-radius:50%;background:var(--lykta);box-shadow:0 0 14px 4px rgba(232,176,75,.6);animation:lantern 2s infinite}
.hint p{font-size:14.5px;line-height:1.4;flex:1}
.hint p b{color:var(--lykta-2);font-weight:700}
.scrollcue{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font-family:var(--f-sc);font-size:13px;letter-spacing:.14em;color:var(--dimma-2);display:none}
.mapnote{position:absolute;left:12px;bottom:84px;font-family:var(--f-arkiv);font-size:11px;color:rgba(214,229,222,.55)}

/* ---------- Sheet ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(105%);transition:transform .5s var(--ease);padding:0 10px calc(10px + env(safe-area-inset-bottom))}
.sheet.open{transform:none}
.sheet-in{max-width:560px;margin:0 auto;background:var(--papper);color:var(--blak);border-radius:16px 16px 12px 12px;padding:18px 18px 16px;box-shadow:0 -10px 50px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:10px;position:relative;background-image:radial-gradient(rgba(90,70,50,.08) 1px, transparent 1px);background-size:3px 3px}
.sheet-in .eyebrow{color:var(--falu);padding-right:46px;line-height:1.35}
.sheet-in h3{font-family:var(--f-saga);font-size:28px;line-height:1.1}
.sheet-in p{font-size:16px;line-height:1.5}
.sheet-in .src{font-family:var(--f-arkiv);font-size:12.5px;color:var(--blak-2)}
.sheet-x{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(43,33,24,.25);background:transparent;color:var(--blak);font-size:20px}

/* ---------- Paper / tidskrift ---------- */
.paper{background:var(--papper);color:var(--blak);position:relative;background-image:radial-gradient(rgba(90,70,50,.07) 1px, transparent 1.2px),radial-gradient(rgba(90,70,50,.05) 1px, transparent 1.2px);background-size:4px 4px,7px 7px;background-position:0 0,2px 3px}
.paper a{color:var(--falu)}
.masthead{text-align:center;padding:44px 18px 10px;display:flex;flex-direction:column;align-items:center;gap:8px}
.masthead .rules{width:100%;max-width:680px;border-top:3px solid var(--blak);border-bottom:1px solid var(--blak);height:6px}
.masthead .meta{width:100%;max-width:680px;display:flex;justify-content:space-between;font-family:var(--f-sc);font-size:13px;letter-spacing:.08em;color:var(--blak-2);padding:6px 0;border-bottom:1px solid var(--blak)}
.masthead img{width:min(300px,76vw)}
.article{padding:34px 0;border-bottom:1px solid rgba(43,33,24,.3)}
.article:last-of-type{border-bottom:0}
.article .kicker{font-family:var(--f-sc);letter-spacing:.12em;font-size:14px;color:var(--falu);display:flex;align-items:center;gap:10px}
.article .kicker::after{content:"";flex:1;height:1px;background:rgba(43,33,24,.35)}
.article h2{font-family:var(--f-tidning);font-weight:700;font-size:clamp(28px,7vw,40px);line-height:1.08;margin:10px 0 14px;letter-spacing:-.01em}
.article .lead{font-family:var(--f-saga);font-size:20px;line-height:1.5;margin-bottom:14px}
.article p+p{margin-top:12px}
.article .body{font-family:var(--f-tidning);font-size:17px;line-height:1.62;columns:2 300px;column-gap:30px;column-rule:1px solid rgba(43,33,24,.18)}
.article .body p{break-inside:avoid-column}
.dropcap::first-letter{font-family:var(--f-fraktur);float:left;font-size:3.6em;line-height:.82;padding:6px 8px 0 0;color:var(--falu)}
.ornament{display:flex;justify-content:center;padding:6px 0;color:var(--blak-2)}
.partners{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--f-sc);font-size:14px;letter-spacing:.04em;margin-top:14px;color:var(--blak-2)}
.foot{background:var(--natt);color:var(--dimma-2);padding:34px 18px calc(40px + env(safe-area-inset-bottom));font-size:14px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.foot img{width:160px;opacity:.85}

/* ---------- Myt-sida ---------- */
.mythero{position:relative;height:min(74svh,720px);min-height:420px;margin-top:calc(-1 * (var(--head-h) + env(safe-area-inset-top)));overflow:hidden;display:flex;align-items:flex-end}
.mythero .bg{position:absolute;inset:-4%;background-size:cover;background-position:center;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
.mythero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,25,28,.55),transparent 22%,transparent 45%,rgba(12,25,28,.85) 80%,var(--natt))}
.mythero .mist{mix-blend-mode:screen;z-index:1}
.mythero .txt{position:relative;z-index:2;padding:0 18px 26px;max-width:760px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:12px}
.crumbs{font-family:var(--f-sc);font-size:13px;letter-spacing:.1em;color:var(--dimma-2)}
.crumbs a{color:var(--dimma-2);text-decoration:none}
.mythero h1{font-family:var(--f-saga);font-size:clamp(42px,12vw,78px);line-height:.98;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.avd{padding:34px 0;position:relative}
.avd-n{font-family:var(--f-fraktur);font-size:44px;color:var(--lykta);line-height:1;display:flex;align-items:center;gap:14px}
.avd-n span{font-family:var(--f-sc);font-size:15px;letter-spacing:.14em;color:var(--dimma-2)}
.avd-n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(232,176,75,.5),transparent)}
.saga{font-family:var(--f-saga);font-size:22px;line-height:1.55;color:#eef4f0}
.saga.big::first-letter{font-family:var(--f-fraktur);float:left;font-size:3.4em;line-height:.8;padding:8px 10px 0 0;color:var(--lykta)}
.listen{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(157,189,179,.08);border:1px solid rgba(157,189,179,.22)}
.listen button{width:48px;height:48px;border-radius:50%;border:0;background:var(--dimma);color:var(--natt);display:grid;place-items:center;flex:none}
.listen button svg{width:18px;height:18px}
.listen b{display:block}
.listen span{font-size:14px;color:var(--dimma-2)}
.puff{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(232,176,75,.4);background:var(--natt-2);display:flex;flex-direction:column}
.puff .pic{aspect-ratio:16/9;background-size:cover;background-position:center 40%;position:relative}
.puff .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,var(--natt-2))}
.puff .in{padding:4px 18px 20px;display:flex;flex-direction:column;gap:12px;position:relative;margin-top:-34px}
.puff h3{font-family:var(--f-fraktur);font-size:clamp(34px,9vw,46px);line-height:1;color:var(--lykta-2);text-shadow:0 2px 20px rgba(0,0,0,.8)}
.archive{background:var(--papper);color:var(--blak);border-radius:4px;padding:20px 18px;box-shadow:0 18px 40px rgba(0,0,0,.45);transform:rotate(-.6deg);display:flex;flex-direction:column;gap:12px;background-image:radial-gradient(rgba(90,70,50,.08) 1px, transparent 1.2px);background-size:4px 4px}
.archive .stamp{align-self:flex-start;font-family:var(--f-arkiv);font-size:12px;letter-spacing:.12em;color:var(--falu);border:1.5px solid var(--falu);padding:2px 8px;transform:rotate(-2deg)}
.archive h3{font-family:var(--f-tidning);font-weight:700;font-size:26px;line-height:1.1}
.archive ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-family:var(--f-tidning);font-size:16.5px}
.archive li{padding-left:20px;position:relative}
.archive li::before{content:"§";position:absolute;left:0;color:var(--falu)}
.archive .sig{font-family:var(--f-arkiv);font-size:12.5px;color:var(--blak-2)}
.note{font-size:14.5px;color:var(--dimma-2);border-left:2px solid rgba(232,176,75,.5);padding:4px 0 4px 12px}

/* ---------- Sägnen (bok) ---------- */
.kap{position:relative;min-height:115svh}
.kap .scene{position:sticky;top:0;height:100svh;overflow:hidden}
.kap .scene .bg{position:absolute;inset:-3%;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 6s ease-out, filter 2s}
.kap.in .scene .bg{transform:scale(1)}
.kap .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,25,28,.4),transparent 30%,transparent 55%,rgba(12,25,28,.9))}
.kap .page{position:relative;margin:-58svh auto 0;max-width:560px;padding:0 16px 22svh;z-index:2}
.leaf{background:linear-gradient(180deg,#f3ead6,#eadfc5);color:var(--blak);border-radius:3px;padding:26px 22px 22px;box-shadow:0 20px 50px rgba(0,0,0,.55);position:relative;transition:transform 1.2s var(--ease), opacity 1.2s;opacity:.35;transform:translateY(24px)}
.kap.in .leaf{opacity:1;transform:none}
.leaf::before{content:"";position:absolute;inset:7px;border:1px solid rgba(43,33,24,.25);pointer-events:none}
.leaf .kn{font-family:var(--f-sc);letter-spacing:.16em;font-size:14px;color:var(--falu);text-align:center;margin-bottom:12px}
.leaf p{font-family:var(--f-saga);font-size:22px;line-height:1.55}
.leaf p+p{margin-top:12px}
.leaf .first::first-letter{font-family:var(--f-fraktur);float:left;font-size:3.3em;line-height:.8;padding:6px 8px 0 0;color:var(--falu)}
.leaf .src{margin-top:14px;font-family:var(--f-arkiv);font-size:12px;color:var(--blak-2);text-align:right}
.sagan-intro{padding:30px 18px 10px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.sagan-intro h1{font-family:var(--f-saga);font-size:clamp(38px,10vw,64px);line-height:1}
.soundbadge{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:flex;gap:10px;align-items:center;background:rgba(12,25,28,.85);border:1px solid rgba(214,229,222,.2);border-radius:999px;padding:8px 16px 8px 12px;font-size:13.5px;color:var(--dimma-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .5s}
.soundbadge.gone{opacity:0;pointer-events:none}
.eq{display:flex;gap:2px;align-items:flex-end;height:14px}
.eq i{width:3px;background:var(--lykta);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
.muted .eq i{animation:none;height:3px;background:var(--dimma-2)}

/* ---------- Vinjett ---------- */
.vinj{position:fixed;inset:0;z-index:70;background:#000;display:none;overflow:hidden}
.vinj.on{display:block}
.shot{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.12);transition:opacity 1.6s ease, transform 7s linear}
.shot.on{opacity:1;transform:scale(1.0)}
.vinj::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.75));pointer-events:none}
.vcap{position:absolute;left:0;right:0;bottom:16svh;text-align:center;padding:0 24px;font-family:var(--f-saga);font-size:clamp(22px,6vw,34px);line-height:1.3;color:#f4efe2;text-shadow:0 2px 20px #000;opacity:0;transition:opacity 1.2s, filter 1.2s;filter:blur(6px);z-index:2}
.vcap.on{opacity:1;filter:none}
.vtitle{position:absolute;inset:0;display:grid;place-items:center;z-index:3;opacity:0;transition:opacity 1.5s}
.vtitle.on{opacity:1}
.vtitle div{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.vtitle h2{font-family:var(--f-fraktur);font-size:clamp(46px,14vw,96px);line-height:.95;color:var(--lykta-2);text-shadow:0 0 40px rgba(232,176,75,.45),0 4px 30px #000;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position 2.6s var(--ease),mask-position 2.6s var(--ease)}
.vtitle.on h2{-webkit-mask-position:0 0;mask-position:0 0}
.vtitle p{font-family:var(--f-sc);letter-spacing:.2em;font-size:15px;color:var(--dimma)}
.vskip{position:absolute;right:14px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:5;background:rgba(0,0,0,.5)}
.vprog{position:absolute;left:0;bottom:0;height:3px;background:var(--lykta);z-index:5;width:0}

/* ---------- Mysteriet ---------- */
.mys-head{position:relative;padding:20px 0 6px;display:flex;flex-direction:column;gap:12px}
.mys-head h1{font-family:var(--f-fraktur);font-size:clamp(46px,13vw,80px);line-height:.95;color:var(--lykta-2)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.fact{padding:10px 12px;border-radius:10px;background:rgba(157,189,179,.07);border:1px solid rgba(157,189,179,.18);display:flex;flex-direction:column}
.fact small{font-size:12.5px;color:var(--dimma-2)}
.fact b{font-size:15.5px}
.paper .fact{background:rgba(43,33,24,.05);border-color:rgba(43,33,24,.18)}
.paper .fact small{color:var(--blak-2)}
.choose{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
@media (min-width:640px){.choose{grid-template-columns:1fr 1fr}}
.choice{position:relative;border-radius:18px;overflow:hidden;min-height:230px;text-decoration:none;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;border:1px solid rgba(232,176,75,.35);transition:transform .3s var(--ease)}
.choice:active{transform:scale(.98)}
.choice .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s var(--ease)}
.choice:hover .bg{transform:scale(1.05)}
.choice::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(8,16,18,.92))}
.choice > *:not(.bg){position:relative;z-index:1}
.choice h3{font-family:var(--f-saga);font-size:30px;line-height:1.05}
.choice p{font-size:15px;color:var(--dimma);margin-top:6px}
.choice .go{margin-top:12px;font-weight:700;color:var(--lykta-2);display:flex;align-items:center;gap:8px}

/* ---------- Spelare onboarding ---------- */
.steps{display:flex;gap:6px;justify-content:center;padding:16px 0}
.steps i{width:28px;height:4px;border-radius:2px;background:rgba(214,229,222,.2);transition:background .4s}
.steps i.on{background:var(--lykta)}
.step{display:none;flex-direction:column;gap:16px;animation:viewIn .6s var(--ease)}
.step.on{display:flex}
.step h2{font-family:var(--f-saga);font-size:clamp(32px,9vw,46px);line-height:1.05}
.step .saga{font-size:20px}
.illu{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background-size:cover;background-position:center;border:1px solid rgba(214,229,222,.15)}
.dicebox{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;background:var(--natt-2);border:1px solid rgba(214,229,222,.15)}
.dice{display:flex;gap:10px;flex-wrap:wrap;min-height:58px}
.die{width:52px;height:52px;border-radius:10px;background:var(--papper);color:var(--blak);display:grid;place-items:center;font-family:var(--f-tidning);font-weight:700;font-size:26px;box-shadow:0 4px 0 #bba987;transition:transform .4s var(--ease)}
.die.rolling{animation:roll .5s ease-out}
.die.six{background:var(--lykta);box-shadow:0 4px 0 #8a6420,0 0 24px rgba(232,176,75,.6)}
@keyframes roll{0%{transform:rotate(-200deg) scale(.4) translateY(-30px)}100%{transform:none}}
.pool{display:flex;align-items:center;gap:12px}
.pool button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(214,229,222,.35);background:none;font-size:20px}
.result{font-family:var(--f-saga);font-size:20px;min-height:30px}
.arche{display:grid;grid-template-columns:1fr;gap:10px}
.arch{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:14px;border-radius:14px;background:var(--natt-2);border:1.5px solid rgba(214,229,222,.15);transition:border-color .2s, background .2s}
.arch[aria-pressed="true"]{border-color:var(--lykta);background:rgba(232,176,75,.09)}
.arch .ico{flex:none;width:52px;height:52px;border-radius:50%;background:var(--papper);color:var(--blak);display:grid;place-items:center}
.arch .ico svg{width:28px;height:28px}
.arch b{font-family:var(--f-saga);font-size:22px;font-weight:400;display:block;line-height:1.1}
.arch span{font-size:15px;color:var(--dimma-2);display:block;margin-top:4px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;color:var(--dimma-2)}
.field input{min-height:48px;border-radius:10px;border:1px solid rgba(214,229,222,.3);background:var(--natt-2);color:var(--dimma);padding:10px 14px;font:inherit;font-size:18px}
.card-member{background:var(--papper);color:var(--blak);border-radius:6px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px;position:relative;transform:rotate(-1deg);background-image:radial-gradient(rgba(90,70,50,.08) 1px, transparent 1.2px);background-size:4px 4px}
.card-member .h{font-family:var(--f-sc);letter-spacing:.14em;font-size:13px;color:var(--falu);border-bottom:1px solid var(--blak);padding-bottom:6px;display:flex;justify-content:space-between}
.card-member .n{font-family:var(--f-fraktur);font-size:38px;line-height:1}
.card-member .t{font-family:var(--f-saga);font-size:20px}
.card-member .seal{position:absolute;right:16px;bottom:14px;width:62px;height:62px;border-radius:50%;border:2px solid var(--falu);color:var(--falu);display:grid;place-items:center;font-family:var(--f-sc);font-size:10px;text-align:center;line-height:1.1;transform:rotate(-12deg);opacity:.85}
.navrow{display:flex;justify-content:space-between;gap:10px;padding:10px 0 30px}

/* ---------- Spelledare ---------- */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none;position:sticky;top:calc(var(--head-h) + env(safe-area-inset-top));z-index:5;background:var(--papper)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid rgba(43,33,24,.3);background:transparent;color:var(--blak);font-size:15px}
.tabs button[aria-selected="true"]{background:var(--blak);color:var(--papper);border-color:var(--blak)}
.panel{display:none;flex-direction:column;gap:16px;padding:10px 0 20px}
.panel.on{display:flex}
.gm h1{font-family:var(--f-tidning);font-weight:700;font-size:clamp(30px,8vw,44px);line-height:1.05}
.gm h3{font-family:var(--f-tidning);font-weight:700;font-size:21px}
.outline{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid rgba(43,33,24,.25)}
.outline li{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(43,33,24,.18);font-family:var(--f-tidning);font-size:16.5px}
.st{flex:none;font-family:var(--f-arkiv);font-size:11.5px;letter-spacing:.06em;padding:2px 7px;border-radius:3px;border:1px solid}
.st.ok{color:#2f5d3e;border-color:#2f5d3e}
.st.part{color:#8a6420;border-color:#8a6420}
.st.miss{color:var(--falu);border-color:var(--falu)}
.person{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(43,33,24,.18)}
.person .pimg{flex:none;width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center;border:2px solid var(--blak)}
.person b{font-family:var(--f-tidning);font-size:18px}
.person p{font-size:15.5px;color:var(--blak-2)}
.dl{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid rgba(43,33,24,.25);border-radius:10px;background:rgba(255,255,255,.25);text-align:left;width:100%;color:var(--blak)}
.dl .pdf{flex:none;width:44px;height:54px;border:1.5px solid var(--blak);border-radius:3px;display:grid;place-items:center;font-family:var(--f-arkiv);font-size:11px;font-weight:700;position:relative;background:var(--papper)}
.dl b{display:block;font-family:var(--f-tidning);font-size:17px}
.dl span{font-size:14px;color:var(--blak-2)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:90;background:var(--blak);color:var(--papper);padding:12px 18px;border-radius:12px;font-size:15px;max-width:min(92vw,460px);opacity:0;transition:opacity .3s, transform .3s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Mysterieläge ---------- */
.ml{background:#070f11;min-height:100%}
.ml-bar{display:flex;align-items:center;gap:10px;padding:10px 0;justify-content:space-between}
.ml-bar .t{font-family:var(--f-sc);letter-spacing:.12em;font-size:13.5px;color:var(--dimma-2)}
.pausebtn{background:#b9523d;border:0;color:#fff;font-weight:700;border-radius:999px;min-height:40px;padding:8px 16px;display:inline-flex;gap:8px;align-items:center}
.rail{display:flex;gap:8px;overflow-x:auto;padding:6px 0 12px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail button{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:12px;border:1px solid rgba(214,229,222,.18);background:var(--natt-2);min-width:136px;text-align:left}
.rail button small{font-family:var(--f-sc);letter-spacing:.1em;color:var(--dimma-2);font-size:12px}
.rail button b{font-weight:700;font-size:15px;line-height:1.2}
.rail button[aria-current="true"]{border-color:var(--lykta);background:rgba(232,176,75,.1)}
.rail button[aria-current="true"] small{color:var(--lykta)}
.stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#000;border:1px solid rgba(214,229,222,.12)}
.stage .bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:kenburns 30s ease-in-out infinite alternate}
.stage .mist{z-index:1}
.stage .ctrls{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:8px}
.stage .ctrls button{min-height:38px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.5);font-size:14px;color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.stage .handout-stage{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(#1c3437,#070f11)}
.read{position:relative;background:linear-gradient(180deg,#f3ead6,#e9ddc2);color:var(--blak);border-radius:4px;padding:18px 18px 14px;font-family:var(--f-saga);font-size:20px;line-height:1.5}
.read .rh{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-sc);letter-spacing:.12em;font-size:12.5px;color:var(--falu);margin-bottom:8px}
.read .rh button{font-family:var(--f-ui);letter-spacing:0;font-size:13.5px;border:1px solid rgba(43,33,24,.35);background:transparent;color:var(--blak);border-radius:999px;padding:4px 12px;min-height:34px}
.pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pad{min-height:58px;border-radius:12px;border:1px solid rgba(214,229,222,.18);background:var(--natt-2);display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left;font-size:14.5px;line-height:1.2;position:relative;overflow:hidden}
.pad svg{width:20px;height:20px;flex:none;color:var(--dimma-2)}
.pad[aria-pressed="true"]{border-color:var(--lykta);background:rgba(232,176,75,.12)}
.pad[aria-pressed="true"] svg{color:var(--lykta)}
.pad.sfx:active{background:rgba(232,176,75,.25)}
.pad.flash::after{content:"";position:absolute;inset:0;background:rgba(232,176,75,.35);animation:flash .6s forwards}
@keyframes flash{to{opacity:0}}
.ml h4{margin:0;font-family:var(--f-sc);letter-spacing:.12em;font-size:13px;color:var(--dimma-2);font-weight:400}
.gmnote{border:1px dashed rgba(232,176,75,.45);border-radius:12px;padding:12px 14px;font-size:15.5px;color:var(--dimma);background:rgba(232,176,75,.05)}
.gmnote b{color:var(--lykta-2)}
.pausescreen{position:fixed;inset:0;z-index:95;background:rgba(5,10,12,.96);display:none;place-items:center;text-align:center;padding:24px}
.pausescreen.on{display:grid}
.pausescreen h2{font-family:var(--f-saga);font-size:40px;margin-bottom:10px}
.projector{position:fixed;inset:0;z-index:96;background:#000;display:none}
.projector.on{display:block}
.projector .bg{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;animation:kenburns 40s ease-in-out infinite alternate}
.projector .mist{z-index:1}
.projector .close{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;background:rgba(0,0,0,.6);border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.projector .phint{position:absolute;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));text-align:center;z-index:3;font-size:13px;color:rgba(255,255,255,.6);pointer-events:none}
.projector .pcap{position:absolute;left:0;right:0;bottom:calc(110px + env(safe-area-inset-bottom));z-index:2;text-align:center;font-family:var(--f-saga);font-size:clamp(20px,4vw,34px);padding:0 30px;text-shadow:0 2px 20px #000}

/* ---------- Handouts ---------- */
.letter{background:linear-gradient(170deg,#efe3c6,#e0cfa8);color:#2b2118;padding:24px 22px;font-family:var(--f-saga);font-size:19px;line-height:1.5;border-radius:2px;box-shadow:0 18px 50px rgba(0,0,0,.6);max-width:460px;width:100%;position:relative;transform:rotate(-1.2deg)}
.letter .sign{margin-top:14px;font-style:italic;font-size:17px}
.letter .lily{position:absolute;right:-10px;top:-14px;width:64px;height:64px}
.letter.locked{filter:blur(5px) grayscale(.4);opacity:.6}
.letter .tr{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(43,33,24,.4);font-family:var(--f-tidning);font-size:16px}

/* ---------- Historia ---------- */
.hist .grid{display:grid;grid-template-columns:1fr;gap:18px}
.entry{border-top:3px double var(--blak);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.entry h3{font-family:var(--f-tidning);font-weight:700;font-size:23px;line-height:1.1}
.entry .tag{font-family:var(--f-sc);font-size:13px;letter-spacing:.1em;color:var(--falu)}
.entry p{font-family:var(--f-tidning);font-size:16.5px;line-height:1.6}
.entry .src{font-family:var(--f-arkiv);font-size:12px;color:var(--blak-2)}
.verify{font-family:var(--f-arkiv);font-size:11.5px;color:var(--falu);border:1px solid var(--falu);padding:1px 6px;border-radius:3px;align-self:flex-start}
.plate{margin:6px 0;border:1px solid var(--blak);padding:6px;background:#e9dcbe}
.plate div{aspect-ratio:16/9;background-size:cover;background-position:center;filter:sepia(.35) contrast(.95)}
.plate small{display:block;font-family:var(--f-saga);font-style:italic;font-size:14px;text-align:center;padding-top:6px}
.sources{font-size:14.5px;font-family:var(--f-tidning)}
.sources li{margin:6px 0}

/* ---------- Paint transition ---------- */
.paint{position:fixed;inset:0;z-index:75;pointer-events:none;opacity:0;transition:opacity .5s}
.paint.on{opacity:1;pointer-events:auto}
.paint canvas{position:absolute;inset:0;width:100%;height:100%}
.paint .pt{position:absolute;left:0;right:0;bottom:18svh;text-align:center;z-index:2;font-family:var(--f-saga);font-size:clamp(36px,10vw,64px);color:#f6efdf;text-shadow:0 4px 30px #000;opacity:0;transition:opacity 1s, transform 1.6s var(--ease);transform:translateY(12px)}
.paint .pt.on{opacity:1;transform:none}
.paint .pt small{display:block;font-family:var(--f-sc);font-size:14px;letter-spacing:.2em;color:var(--lykta-2);margin-bottom:8px}

/* ---------- Menu ---------- */
.menu{position:fixed;right:10px;top:calc(var(--head-h) + env(safe-area-inset-top) + 4px);z-index:55;background:var(--natt-2);border:1px solid rgba(214,229,222,.18);border-radius:14px;padding:8px;display:none;flex-direction:column;min-width:240px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.menu.on{display:flex}
.menu a,.menu button{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-radius:10px;text-decoration:none;color:var(--dimma);background:none;border:0;text-align:left;font-size:16px}
.menu a:hover,.menu button:hover{background:rgba(214,229,222,.06)}
.switch{width:42px;height:24px;border-radius:999px;background:rgba(214,229,222,.2);position:relative;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--dimma);transition:transform .2s}
[aria-checked="true"] .switch{background:var(--lykta)}
[aria-checked="true"] .switch::after{transform:translateX(18px);background:#1c1405}

/* ---------- Anpassat läge ---------- */
.anpassat{--f-saga:'Atkinson Hyperlegible', system-ui, sans-serif;--f-tidning:'Atkinson Hyperlegible', system-ui, sans-serif}
.anpassat body,body.anpassat{font-size:19px}
.anpassat .saga,.anpassat .leaf p{font-size:21px;line-height:1.65}
.anpassat *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.anpassat .mist{display:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (min-aspect-ratio: 21/20){ .hero{height:min(90svh,1100px)} .map-ui .hint{margin:0 auto 0 auto} }
@media (min-width:760px){
  .hist .grid{grid-template-columns:1fr 1fr}
  .arche{grid-template-columns:1fr 1fr}
}