/* Dungen — spelets egna skal. Bruten ur public/dungen/index.html ordagrant. */
/* ============ TOKENS ============ */
:root{
  --ink:#e9ede8;
  --ink-dim:#aab5ad;
  --ink-faint:#7d887f;
  --paper:rgba(14,20,18,.72);
  --line:rgba(233,237,232,.14);
  --accent:#d9b26a;          /* warm lantern gold */
  --accent-soft:#e8cf9a;
  --moss:#8fae8b;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  /* HETTE tidigare samma sak som sajtens kurva i vibely.css, fast med ett annat värde.
     Att den är trögare ska den vara: Dungen är en skog där ljuset ändrar sig över
     2,4 sekunder, inte ett gränssnitt som svarar på klick. Men ett namn som betyder
     olika saker i olika filer är en fälla — den som känner igen namnet härifrån tror
     sig veta vilken kurva den ser, och har fel. Kurvan är oförändrad, bara döpt. */
  --ease-grove:cubic-bezier(.4,.1,.2,1);

  /* Samma sex typgrader som vibely.css. Dungen laddar sin egen stilmall och kan inte
     ärva dem, så de står här ordagrant — ändras en, ändras alla fyra filerna. Hela
     stegen skrivs ut även om sidan inte använder alla: en skala man bara ser tre steg
     av är ingen skala, och nästa grad som behövs ska hämtas här och inte hittas på. */
  --fs-2xs:11px;
  --fs-xs:13px;
  --fs-sm:15px;
  --fs-md:17px;
  --fs-lg:19px;
  --fs-xl:22px;
  --radius-xs:4px;
  --radius-sm:12px;
  --radius-pill:999px;
}

/* Climate palettes — everything in the scene reads from these */
.climate-low{
  --sky-top:#141a20; --sky-mid:#1c242b; --sky-low:#232c31;
  --ground:#1a2124; --ground-2:#151b1e;
  --trunk:#3a4448; --trunk-lit:#48545a;
  --canopy:#26313297; --canopy-2:#2c393aa0;
  --mist:rgba(178,192,201,.16);
  --glow:rgba(217,178,106,0);
  --root:rgba(217,178,106,0);
  --root-base:rgba(140,155,150,.10);
  --path:rgba(232,207,154,0);
  --firefly:0;
  --air:rgba(120,138,148,.05);
  --leaves:0; --rays:0;
}
.climate-medium{
  --sky-top:#17222a; --sky-mid:#233741; --sky-low:#33484a;
  --ground:#24312e; --ground-2:#1b2624;
  --trunk:#4a544c; --trunk-lit:#63705f;
  --canopy:#33473b9c; --canopy-2:#3e5443a6;
  --mist:rgba(196,206,199,.10);
  --glow:rgba(217,178,106,.16);
  --root:rgba(217,178,106,.20);
  --root-base:rgba(150,168,150,.14);
  --path:rgba(232,207,154,.12);
  --firefly:.35;
  --air:rgba(178,190,160,.05);
  --leaves:.35; --rays:.18;
}
.climate-high{
  --sky-top:#1b2a2c; --sky-mid:#34503e; --sky-low:#67744c;
  --ground:#33422f; --ground-2:#243126;
  --trunk:#5b6350; --trunk-lit:#8a8f6e;
  --canopy:#48633f9e; --canopy-2:#5d7a47a8;
  --mist:rgba(226,224,196,.07);
  --glow:rgba(226,187,110,.34);
  --root:rgba(226,187,110,.55);
  --root-base:rgba(170,185,150,.18);
  --path:rgba(238,214,160,.30);
  --firefly:1;
  --air:rgba(220,205,150,.06);
  --leaves:1; --rays:.55;
}

/* ============ BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#10161a;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-xs)}

#stage{position:fixed;inset:0}

/* Sidan utan JavaScript. Blocket ligger i ett <noscript> inuti #stage och ritas
   alltså bara när motorn aldrig kommer att köra — då finns ingen scen, och
   body:s egen bakgrund är den enda. Klasserna är motorns (.ui, .frame), så
   texten ärver spelets typografi och blir scrollbar trots overflow:hidden på
   body.

   Allt som står här är sådant motorn löser på annat sätt och som ett <noscript>
   inte kan låna: luften mellan styckena sätter startScreen() i dungen.js med
   inline-style, och `*{margin:0}` högst upp i filen har redan tagit bort
   webbläsarens egen — utan raderna nedan står intron som ett enda block.
   Understrykningen bort av samma skäl: motorn ritar sina knappar som <button>,
   det här skalet måste rita dem som <a>. Toppluften på .frame finns för att
   bakåtlänken (position:fixed, top 1.15rem) inte ska lägga sig över ögonbrynet
   på en kort skärm. */
.no-js .frame{padding-top:6rem}
.no-js h1{margin-bottom:1.4rem}
.no-js .lede{margin-bottom:1rem}
.no-js .footnote{margin-top:1.4rem}
.no-js .actions{margin-top:2rem}
.no-js .btn{text-decoration:none}

.back-link{
  position:fixed;
  top:1.15rem;
  left:1.15rem;
  z-index:20;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  min-height:38px;
  padding:.55rem .8rem;
  border:1px solid rgba(217,178,106,.34);
  border-radius:var(--radius-xs);
  background:rgba(14,20,18,.44);
  color:var(--accent-soft);
  text-decoration:none;
  font-size:var(--fs-2xs);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color .22s var(--ease-grove),background .22s var(--ease-grove),transform .22s var(--ease-grove);
}
.back-link:hover{border-color:rgba(217,178,106,.74);background:rgba(217,178,106,.08);transform:translateY(-1px)}
.back-link span{font-size:var(--fs-md);line-height:1;transform:translateY(-1px)}

/* ============ SCENE ============ */
.scene{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-mid) 46%,var(--sky-low) 72%,var(--ground) 86%,var(--ground-2) 100%);
  transition:background 2.4s var(--ease-grove);
}
.scene svg{position:absolute;inset:0;width:100%;height:100%}
.scene .airglow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 55% at 50% 30%,var(--air),transparent 70%);
  transition:background 2.4s var(--ease-grove);
}

.trunk{fill:var(--trunk);transition:fill 2.4s var(--ease-grove)}
.trunk-lit{fill:var(--trunk-lit);transition:fill 2.4s var(--ease-grove)}
.canopy{fill:var(--canopy);transition:fill 2.4s var(--ease-grove)}
.canopy-2{fill:var(--canopy-2);transition:fill 2.4s var(--ease-grove)}
.roots-base{stroke:var(--root-base);transition:stroke 2.4s var(--ease-grove)}
.roots-lit{stroke:var(--root);opacity:0;transition:stroke 2.4s var(--ease-grove),opacity 2.4s var(--ease-grove)}
.roots-lit.on{opacity:1}
.glade-path{stroke:var(--path);transition:stroke 2.4s var(--ease-grove)}
.tree{transform-box:fill-box;transform-origin:50% 100%;transition:transform 2.4s var(--ease-grove)}
.tree.grown{transform:scale(1.05)}
.tree-glow{fill:var(--glow);opacity:.35;transition:fill 2.4s var(--ease-grove),opacity 2.4s var(--ease-grove)}
.tree.grown .tree-glow{opacity:.9}
.ring{stroke:var(--accent);opacity:0;transition:opacity 1.6s var(--ease-grove)}
.tree.grown .ring{opacity:.75}
.tree-lantern{fill:var(--accent-soft);opacity:0;transition:opacity 1.8s var(--ease-grove);filter:blur(1px)}
.tree.lit .tree-lantern{opacity:.85}
.lantern-halo{fill:var(--accent);opacity:0;transition:opacity 1.8s var(--ease-grove);filter:blur(14px)}
.tree.lit .lantern-halo{opacity:.30}
.dim{position:absolute;inset:0;background:rgba(8,12,12,.45);opacity:0;pointer-events:none;transition:opacity .9s var(--ease-grove)}
.dim.on{opacity:1}

/* Levande skog */
.sway{transform-box:fill-box;transform-origin:50% 92%;animation:sway 8s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
.rays{position:absolute;inset:0;pointer-events:none;opacity:var(--rays);transition:opacity 2.4s var(--ease-grove);mix-blend-mode:screen}
.ray{position:absolute;top:-12%;height:85%;background:linear-gradient(to bottom,rgba(238,214,150,.28),transparent 75%);filter:blur(10px);transform:skewX(-14deg);animation:raypulse 9s ease-in-out infinite alternate}
.ray.r1{left:22%;width:13%}.ray.r2{left:47%;width:8%;animation-delay:3s}.ray.r3{left:69%;width:11%;animation-delay:6s}
@keyframes raypulse{from{opacity:.45}to{opacity:1}}
.leaves{position:absolute;inset:0;pointer-events:none;opacity:var(--leaves);transition:opacity 2.4s var(--ease-grove)}
.leaf{position:absolute;top:-5%;width:10px;height:7px;border-radius:65% 35% 60% 40%;
  background:linear-gradient(120deg,#b0b478,#77875a);opacity:.75;
  left:var(--fl,50%);animation:fall var(--fd,15s) linear infinite;animation-delay:var(--fdel,0s)}
@keyframes fall{0%{transform:translate(0,-6vh) rotate(0deg)}100%{transform:translate(var(--fx,50px),110vh) rotate(640deg)}}

/* ============ SITUATIONSVINJETTER ============ */
.vignette{margin:1.1rem 0 1.4rem;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  background:linear-gradient(to bottom,rgba(233,237,232,.02),rgba(233,237,232,.05))}
.vignette svg{display:block;width:100%;height:auto}
.vignette{--fig:#8d9a92;--vline:rgba(233,237,232,.22);--vground:rgba(233,237,232,.14)}
.fig{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 5.5s ease-in-out infinite}
.fig circle,.fig path{fill:var(--fig);transition:fill 1.2s var(--ease-grove)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}
.fig.b2{animation-delay:1.3s}.fig.b3{animation-delay:2.7s}.fig.b4{animation-delay:.7s}.fig.b5{animation-delay:2s}
.fig.dimmed{opacity:.55}
.fig.sag{animation:sagbreathe 5.5s ease-in-out infinite}
@keyframes sagbreathe{0%,100%{transform:translateY(6px) scale(1)}50%{transform:translateY(6px) scale(1.012)}}
.v-line{stroke:var(--vline);fill:none}
.v-ground{stroke:var(--vground)}
.v-bubble{fill:none;stroke:var(--vline);animation:bubble 4.5s ease-in-out infinite;opacity:0}
.v-bubble.d2{animation-delay:1.4s}.v-bubble.d3{animation-delay:2.8s}.v-bubble.d4{animation-delay:.8s}.v-bubble.d5{animation-delay:2.1s}
@keyframes bubble{0%,100%{opacity:0;transform:translateY(0)}45%{opacity:.7;transform:translateY(-7px)}70%{opacity:0;transform:translateY(-13px)}}
.v-shard{stroke:#a8b7c4;fill:none;stroke-width:2.5;stroke-linejoin:miter;animation:shard 3.6s ease-in-out infinite}
@keyframes shard{0%,100%{opacity:.9}50%{opacity:.4}}
.v-knot{fill:none;stroke:#b09a86;stroke-width:2;animation:knot 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes knot{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.28);opacity:1}}
.v-halo{fill:none;stroke:var(--accent);opacity:.5;animation:halo 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes halo{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.15);opacity:.8}}
.v-load{fill:var(--fig);opacity:.8}
.v-dash{stroke:var(--vline);stroke-dasharray:3 6;fill:none;stroke-width:1.5}
.v-crack{stroke:#7b8a90;fill:none;stroke-width:2}
.v-tangle{stroke:#6f6156;fill:none;stroke-width:1.8;opacity:.8}

/* Reflektionslägen: samma vinjett, förändrad av valet */
.v-gold{stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;opacity:0}
.v-mode-vibely{--fig:#c8b586;--vline:rgba(217,178,106,.35)}
.v-mode-vibely .v-gold{opacity:1;animation:golddraw 2.2s .4s var(--ease-grove) forwards}
@keyframes golddraw{to{stroke-dashoffset:0}}
.v-mode-vibely .v-shard,.v-mode-vibely .v-knot{opacity:.25;animation:none}
.v-mode-harsh{--fig:#6d7e8a;--vline:rgba(150,170,185,.25)}
.v-mode-harsh .fig.away-l{animation:apartL 1.6s var(--ease-grove) both}
.v-mode-harsh .fig.away-r{animation:apartR 1.6s var(--ease-grove) both}
@keyframes apartL{to{transform:translateX(-13px)}}
@keyframes apartR{to{transform:translateX(13px)}}
.v-mist-layer{fill:#9fabb2;opacity:0}
.v-mode-avoid{--fig:#79837d}
.v-mode-avoid .v-mist-layer{animation:mistin 3.5s var(--ease-grove) forwards}
@keyframes mistin{to{opacity:.28}}
.v-mode-avoid .fig{animation:none}

.sound-toggle{position:absolute;top:4.25rem;left:1.3rem;font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);padding:.45rem .7rem;border-radius:var(--radius-xs);transition:color .2s;display:flex;gap:.45rem;align-items:center}
.sound-toggle:hover{color:var(--ink)}
.sound-toggle .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);transition:background .3s,box-shadow .3s}
.sound-toggle.on .dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}

.mist{position:absolute;left:-15%;width:130%;height:34%;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 50%,var(--mist),transparent 70%);
  transition:background 2.4s var(--ease-grove);
}
.mist.m1{bottom:8%;animation:drift 46s ease-in-out infinite alternate}
.mist.m2{bottom:20%;animation:drift 61s ease-in-out infinite alternate-reverse}
.mist.m3{bottom:34%;height:26%;animation:drift 74s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-3.5%)}to{transform:translateX(3.5%)}}

.fireflies{position:absolute;inset:0;pointer-events:none;opacity:var(--firefly);transition:opacity 2.4s var(--ease-grove)}
.fly{position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#f3e0ac 0%,rgba(243,224,172,.35) 45%,transparent 70%);
  animation:hover var(--d,9s) ease-in-out infinite alternate,blink var(--b,3.4s) ease-in-out infinite;
}
@keyframes hover{from{transform:translate(0,0)}to{transform:translate(var(--dx,20px),var(--dy,-26px))}}
@keyframes blink{0%,100%{opacity:.15}50%{opacity:.95}}

.scene-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 42%,transparent 55%,rgba(6,10,10,.55) 100%)}

/* ============ LAYOUT / UI ============ */
.ui{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto}
.frame{width:min(680px,100% - 2.5rem);margin:auto;padding:3.2rem 0}

.eyebrow{font-family:var(--sans);font-size:var(--fs-2xs);letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(3rem,9vw,4.6rem);letter-spacing:.01em;line-height:1.05}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,4.5vw,2.2rem);line-height:1.2}
.lede{font-family:var(--serif);font-size:clamp(var(--fs-md),2.6vw,1.25rem);line-height:1.65;color:var(--ink-dim);max-width:34em}
.lede em{color:var(--ink);font-style:italic}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:clamp(1.5rem,4vw,2.4rem);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.35)}

.btn{display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--fs-sm);letter-spacing:.02em;padding:.85rem 1.7rem;border-radius:var(--radius-pill);
  border:1px solid rgba(217,178,106,.55);color:var(--accent-soft);
  transition:background .25s,border-color .25s,transform .25s}
.btn:hover{background:rgba(217,178,106,.12);border-color:var(--accent)}
.btn:active{transform:scale(.98)}
.btn.quiet{border-color:var(--line);color:var(--ink-dim);font-size:var(--fs-xs);padding:.55rem 1.1rem}
.btn.quiet:hover{background:rgba(233,237,232,.06);color:var(--ink)}

.choices{display:flex;flex-direction:column;gap:.8rem;margin-top:1.8rem}
.choice{text-align:left;font-size:var(--fs-md);line-height:1.55;padding:1.05rem 1.25rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:rgba(233,237,232,.03);color:var(--ink);
  transition:border-color .25s,background .25s,transform .25s}
.choice:hover{border-color:rgba(217,178,106,.5);background:rgba(217,178,106,.06)}
.choice:active{transform:scale(.995)}

.triangle{display:flex;flex-direction:column;gap:1.4rem;margin:1.9rem 0 2.1rem}
.tri-row{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;align-items:baseline}
.tri-label{font-size:var(--fs-2xs);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);padding-top:.2rem}
.tri-text{font-family:var(--serif);font-size:var(--fs-md);line-height:1.6;color:var(--ink)}
@media (max-width:540px){.tri-row{grid-template-columns:1fr;gap:.35rem}}

.mission-text{font-family:var(--serif);font-size:clamp(1.2rem,3.4vw,1.5rem);line-height:1.55;margin:1.4rem 0 2rem}

.grove-hud{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;
  gap:1.05rem;padding:0 1.25rem calc(2rem + env(safe-area-inset-bottom));text-align:center}
.grove-voice{font-family:var(--serif);font-style:italic;font-size:clamp(var(--fs-md),2.8vw,1.3rem);
  color:var(--ink);max-width:30em;text-shadow:0 2px 18px rgba(0,0,0,.6);line-height:1.5}
.grove-meta{font-size:var(--fs-2xs);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}
.grove-title{position:absolute;top:1.6rem;left:0;right:0;text-align:center;
  font-size:var(--fs-2xs);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-faint)}

.reset{position:absolute;top:1.3rem;right:1.3rem;font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);padding:.45rem .7rem;border-radius:var(--radius-xs);transition:color .2s}
.reset:hover{color:var(--ink)}

.qualities{display:flex;flex-direction:column;gap:1.3rem;margin:1.9rem 0 2.2rem}
.quality h3{font-family:var(--serif);font-weight:500;font-size:var(--fs-lg);color:var(--accent-soft);margin-bottom:.25rem}
.quality p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-dim)}
.keepsake{border-left:2px solid rgba(217,178,106,.5);padding:.15rem 0 .15rem 1rem;margin-top:.9rem;
  font-family:var(--serif);font-size:var(--fs-md);line-height:1.55;color:var(--ink)}

.fade{animation:fadein .9s var(--ease-grove) both}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade.slow{animation-duration:1.6s}

.divider{height:1px;background:var(--line);margin:1.7rem 0}
.actions{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.footnote{margin-top:1.4rem;font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.6}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.2s !important}
  .mist,.fly,.leaf,.sway,.ray,.fig,.v-bubble,.v-shard,.v-knot,.v-halo{animation:none !important}
}
@media (max-width:640px){
  .back-link{top:.9rem;left:.9rem;padding:.5rem .65rem}
  .sound-toggle{top:3.9rem;left:.9rem}
  .grove-title{top:4.2rem}
  .reset{top:.9rem;right:.9rem}
}