:root {
  --bg: #1a1a2e;
  --panel: #16213e;
  --card: #1f2b47;
  --primary: #7B3755;
  --accent: #CA4387;
  --text: #e0d6c8;
  --muted: #a89b8c;
  --dim: #665e54;
  /* Under bokstavstriper (låst/hint): roligere enn --dim, fortsatt lesbar på --panel */
  --easter-egg-puzzle-subtext: #5a5248;
  --link: #CA4387;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Kun for skjermleser (WCAG – tastaturinstruks m.m.) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  height: 100%;
  font-family: Georgia, serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow: hidden;
  touch-action: manipulation;
}

/* === Screens === */

.screen {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.screen.active { display: block; }

/* === Splash === */

#screen-splash {
  display: none;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
#screen-splash.active { display: flex; }
#screen-splash::before,
#screen-splash::after {
  content: '';
  flex: 1;
  min-height: 64px;
}

.splash-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.splash-home {
  position: absolute;
  top: 18px;
  left: 20px;
  display: block;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.splash-home img { width: 160px; display: block; }
.splash-home:hover { opacity: 1; }

#lang-switcher {
  position: absolute;
  top: 18px;
  right: 20px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 2px;
  transition: color 0.2s;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { color: var(--text); font-weight: bold; }

/* English: UK flag (SVG), not text — aria-label stays «English» */
.lang-btn--flag-en {
  letter-spacing: 0;
  text-transform: none;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.lang-btn--flag-en .lang-flag-en {
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.lang-btn--flag-en:hover .lang-flag-en,
.lang-btn--flag-en.active .lang-flag-en {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.lang-btn--flag-en.active .lang-flag-en {
  outline: 1px solid var(--text);
  outline-offset: 1px;
}
.lang-divider { color: var(--muted); opacity: 0.4; font-size: 11px; }

.splash-tag {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.splash-cover {
  height: 280px;
  width: auto;
  display: block;
  margin: 0 auto 8px;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.6));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.splash-cover.loaded {
  opacity: 1;
}

.splash-logo {
  width: 130px;
  opacity: 0.7;
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.splash-about-btn {
  margin-top: 48px;
  padding: 16px 48px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, color 0.2s;
}
.splash-about-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.splash-pre {
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.splash-box h1 {
  font-size: 52px;
  color: var(--accent);
  margin: 0;
  letter-spacing: 1px;
}
.episode-title {
  font-size: 16px;
  color: var(--muted);
  font-style: italic;
  margin-top: -8px;
}
#btn-start {
  background: var(--primary);
  color: var(--text);
  border: none;
  padding: 16px 48px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px;
  margin-top: 48px;
  margin-bottom: 48px;
  transition: background 0.2s;
}
#btn-start:hover { background: var(--accent); }

/* === Game screen === */

#screen-game { position: relative; }

#game-map {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#game-map.map-hidden {
  visibility: hidden;
}

/* Bakgrunn nær satellitt-toner — «grå» hull mellom fliser blir mindre iøynefallende enn kald grå */
#game-map .leaflet-container,
#game-map {
  background: #3d4540 !important;
}

/* Flis-plassholder før bilde er ferdig lastet */
#game-map .leaflet-tile {
  image-rendering: auto;
  background: #3a423d;
}

/* Arkivboks-markører: ikke sett width/height her — Leaflet bruker inline iconSize (oppdateres på zoomend). */
.leaflet-marker-icon.oselia-archive-marker {
  cursor: pointer;
  display: block;
  object-fit: contain;
  opacity: 0.65;
  transition: opacity 0.2s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  -webkit-user-drag: none;
  user-select: none;
}
.leaflet-marker-icon.oselia-archive-marker:hover,
.leaflet-marker-icon.oselia-archive-marker:focus-visible {
  opacity: 1;
}
.leaflet-tooltip.oselia-archive-marker-tooltip {
  background: rgba(22, 33, 62, 0.96);
  color: var(--text);
  border: 1px solid rgba(202, 67, 135, 0.55);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  padding: 6px 10px;
}

/* === Overlays === */

.overlay {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.overlay.hidden { display: none; }

/* Shown: restore pointer events */
.overlay:not(.hidden) { pointer-events: auto; }

/*
 * Bunnstriper: ikke fang museklikk i «luft»/gradient over selve innholdet —
 * kart-markører (arkivboks) skal være klikkbare i synlig kart sone.
 * Barna får pointer-events tilbake (knapper, scroll, lenker).
 */
.overlay.overlay-bottom:not(.hidden) {
  pointer-events: none;
}
.overlay.overlay-bottom:not(.hidden) > * {
  pointer-events: auto;
}

/*
 * Bunnpanel: scroll-beholderen kan fylle rest-høyde (flex) og fange muse-/touchtreff over synlig kart,
 * selv der det ikke er tekst — blokkerer f.eks. arkivboks-markører. Kun faktisk innhold fanger peker.
 */
#overlay-npc-visit #npc-visit-scroll,
#overlay-wrong #wrong-scroll,
#overlay-locations #location-scroll {
  pointer-events: none;
}
#overlay-npc-visit #npc-visit-scroll .locations-header,
#overlay-npc-visit #npc-visit-scroll #npc-visit-speaker,
#overlay-npc-visit #npc-visit-scroll #npc-visit-text,
#overlay-npc-visit #npc-visit-scroll #npc-visit-link,
#overlay-wrong #wrong-scroll .locations-header,
#overlay-wrong #wrong-scroll #wrong-text,
#overlay-wrong #wrong-scroll #wrong-link,
#overlay-locations #location-scroll .locations-header {
  pointer-events: auto;
}

/* Knapperader: bare knappene fanger peker (ikke full bredde over kartet) */
#overlay-npc-visit > #npc-nav-btns,
#overlay-locations #location-scroll #location-btns,
#overlay-wrong > .npc-nav {
  pointer-events: none;
}
#overlay-npc-visit > #npc-nav-btns > *,
#overlay-locations #location-scroll #location-btns > *,
#overlay-wrong > .npc-nav > * {
  pointer-events: auto;
}

/*
 * Smalere treffflate for tekst/lenker i bunnstriper – arkivboks-markører skal kunne klikkes
 * i synlig kart ved siden av dialogfeltet.
 */
#overlay-npc-visit #npc-visit-scroll .locations-header,
#overlay-npc-visit #npc-visit-scroll #npc-visit-speaker,
#overlay-npc-visit #npc-visit-scroll #npc-visit-text,
#overlay-npc-visit #npc-visit-scroll #npc-visit-link.article-link {
  width: fit-content;
  max-width: min(40rem, 100%);
}
#overlay-wrong #wrong-scroll .locations-header,
#overlay-wrong #wrong-scroll #wrong-text,
#overlay-wrong #wrong-scroll #wrong-link.article-link {
  width: fit-content;
  max-width: min(40rem, 100%);
}
#overlay-locations #location-scroll .locations-header {
  width: fit-content;
  max-width: min(40rem, 100%);
}

/* Typewriter: samme prinsipp når #typewriter-text fyller flex-høyde på smal skjerm */
#overlay-typewriter #typewriter-text {
  pointer-events: none;
}
#overlay-typewriter #typewriter-text * {
  pointer-events: auto;
}

/* Bottom strip – typewriter + location buttons */
.overlay-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 40px 40px;
  background: linear-gradient(to top, rgba(8,8,18,0.97) 0%, rgba(8,8,18,0.93) 45%, rgba(8,8,18,0.7) 68%, rgba(8,8,18,0.3) 84%, rgba(8,8,18,0) 100%);
  /*
   * Vertikal rytme: --ov-u skalerer med rot (rem). Øvrige steg er forholdstall (×), ikke faste px.
   * Justér bare --ov-u for å skalere hele stripa; behold multiplikatorene for visuell proporsjon.
   */
  --ov-u: 0.25rem;
  /* ×2.25 ≈ «stack»-luft; ×5 grid på desktop – forholdstall, ikke px */
  --ov-stack: calc(var(--ov-u) * 2.25);
  --ov-grid: var(--ov-stack);
}
@media (min-width: 641px) {
  .overlay-bottom {
    /* Knapperader: videre ~ som før (×5 mot ×2.25 for stack) */
    --ov-grid: calc(var(--ov-u) * 5);
  }
}

/* Centered panel – dialogue + travel */
.overlay-center {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(10, 10, 20, 0.7);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Pseudo-element spacers center the modal when there's room,
   but compress to min-height so top is never cut off when scrolling */
.overlay-center::before,
.overlay-center::after {
  content: '';
  flex: 1;
  min-height: 24px;
}

/*
 * Sentrerte modaler (dialog, reise, mystery): ikke fang klikk i backdrop / flex-luft —
 * kart og arkivboks-markører skal være brukbare mens panelet er åpent.
 * Slutt-skjerm (#overlay-ending) beholder full skjerm-blokkering.
 * Scrolling flyttes inn i selve boksen (overlay hadde overflow-y: auto).
 */
#overlay-dialogue.overlay.overlay-center:not(.hidden),
#overlay-travel.overlay.overlay-center:not(.hidden),
#overlay-mystery.overlay.overlay-center:not(.hidden) {
  pointer-events: none;
  overflow-y: visible;
  overflow-x: hidden;
}
#overlay-dialogue.overlay.overlay-center:not(.hidden) > .dialogue-box,
#overlay-travel.overlay.overlay-center:not(.hidden) > .travel-box,
#overlay-mystery.overlay.overlay-center:not(.hidden) > .dialogue-box {
  /* none på selve boksen: padding / tom flate slipper klikk til kart; barn får auto nedenfor */
  pointer-events: none;
  max-height: min(92vh, calc(100vh - 48px));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-shrink: 1;
  min-height: 0;
}
#overlay-dialogue.overlay.overlay-center:not(.hidden) > .dialogue-box *,
#overlay-travel.overlay.overlay-center:not(.hidden) > .travel-box *,
#overlay-mystery.overlay.overlay-center:not(.hidden) > .dialogue-box * {
  pointer-events: auto;
}

/* Sentrerte paneler: ikke full bredde-treff på tekstblokker (kart synlig rundt modal) */
#overlay-dialogue.overlay.overlay-center:not(.hidden) > .dialogue-box .npc-header,
#overlay-dialogue.overlay.overlay-center:not(.hidden) > .dialogue-box #npc-text,
#overlay-dialogue.overlay.overlay-center:not(.hidden) > .dialogue-box #npc-link {
  width: fit-content;
  max-width: 100%;
}
#overlay-mystery.overlay.overlay-center:not(.hidden) > .dialogue-box #mystery-lines {
  width: fit-content;
  max-width: 100%;
}
#overlay-travel.overlay.overlay-center:not(.hidden) > .travel-box h2,
#overlay-travel.overlay.overlay-center:not(.hidden) > .travel-box .travel-hint {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#overlay-travel.overlay.overlay-center:not(.hidden) > .travel-box #travel-choices {
  pointer-events: none;
}
#overlay-travel.overlay.overlay-center:not(.hidden) > .travel-box #travel-choices .travel-btn {
  pointer-events: auto;
}

/*
 * Sluttskjerm: scroll inne i .end-box (som dialog-reis/mystery) — unngår at vertikal overlay-scroll
 * «kaprer» peker/touch mens du drar bokstavbrikker (særlig mobil / WebKit).
 */
#overlay-ending.overlay.overlay-center:not(.hidden) {
  overflow-y: visible;
  overflow-x: hidden;
}
#overlay-ending.overlay.overlay-center:not(.hidden) > .end-box {
  max-height: min(92vh, calc(100vh - 48px));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-shrink: 1;
  min-height: 0;
  touch-action: pan-y;
}

/* === Typewriter === */

#typewriter-text {
  font-size: 20px;
  color: #f0e8de;
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 3px 14px rgba(0,0,0,0.95);
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 640px;
  user-select: text;
}
.tw-line {
  display: block;
  white-space: pre-wrap;
  user-select: text;
}
.tw-highlight {
  color: var(--accent);
  font-style: italic;
  font-size: 22px;
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  margin: 4px 0;
  background: rgba(123, 55, 85, 0.2);
  text-shadow: 0 2px 12px rgba(0,0,0,1);
}
.tw-title {
  color: var(--accent);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,1);
}
.tw-inline-highlight {
  color: var(--accent);
  font-style: italic;
}

/* === Home + Mute buttons === */

.btn-home {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 20;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.btn-home img { width: 150px; display: block; }
.btn-home:hover { opacity: 1; }

.btn-mute {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  background: rgba(22, 33, 62, 0.65);
  border: 1px solid var(--dim);
  color: var(--muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s, color 0.2s;
}
.btn-mute:hover { border-color: var(--muted); color: var(--text); }
.btn-mute.muted { color: var(--muted); border-color: rgba(168,155,140,0.4); }

.game-top-right-tools {
  position: absolute;
  top: 14px;
  right: 48px;
  z-index: 130;
  display: flex;
  align-items: center;
  gap: 8px;
}

#game-lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 33, 62, 0.65);
  border-radius: 12px;
  padding: 3px 8px;
  backdrop-filter: blur(4px);
}

.btn-dead-end-notes {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--dim);
  border-radius: 50%;
  background: rgba(22, 33, 62, 0.65);
  color: var(--muted);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-dead-end-notes:hover,
.btn-dead-end-notes:focus-visible {
  border-color: var(--muted);
  color: var(--text);
  outline: none;
}
.btn-dead-end-notes[aria-expanded="true"] {
  border-color: rgba(202, 67, 135, 0.55);
  color: var(--accent);
}
.btn-dead-end-notes.hidden {
  display: none !important;
}
.btn-dead-end-notes__icon {
  display: block;
}

/* === Skip button === */

.btn-skip {
  position: fixed;
  bottom: 130px;
  right: 20px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--muted);
  border: 1px solid var(--muted);
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 4px;
  transition: color 0.2s, border-color 0.2s;
  z-index: 100;
}
.btn-skip:hover { color: var(--muted); border-color: var(--muted); }

/* === NPC visit === */

#npc-visit-speaker {
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
#npc-visit-text, #wrong-text {
  font-size: 19px;
  color: #f0e8de;
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 3px 14px rgba(0,0,0,0.95);
  display: flex;
  flex-direction: column;
  gap: 0.28em;
  max-width: 680px;
  margin-bottom: 0;
  padding-bottom: var(--ov-stack, 0.55rem);
  scroll-padding-bottom: var(--ov-stack, 0.55rem);
  user-select: text;
}
#npc-visit-link {
  margin-bottom: var(--ov-stack, 0.55rem);
}

/* Påskeegg: liten layout-boks (lav linje), større visuelt via transform (scale teller ikke i linjehøyde) */
#npc-visit-text .easter-egg-inline-wrap {
  display: inline;
  margin: 0 0.35em 0 0; /* luft før: kun når det mangler, settes som tegn i JS */
  vertical-align: baseline;
  line-height: 0;
  position: relative;
  z-index: 2;
}
#npc-visit-text .easter-egg-inline {
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  vertical-align: baseline;
  line-height: 0;
  overflow: visible;
  opacity: 0.65;
  transition: opacity 0.2s;
}
#npc-visit-text .easter-egg-inline:hover {
  opacity: 1;
}
#npc-visit-text .easter-egg-inline:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#npc-visit-text .easter-egg-inline img {
  display: inline-block;
  /* Layout-høyde holdes lav; scale gjør egget tydeligere uten å øke linjeboksen */
  height: 0.82em;
  width: auto;
  vertical-align: -0.06em;
  transform: scale(1.52);
  transform-origin: 50% 88%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* Konfetti når spilleren finner et påskeegg */
.easter-egg-confetti {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Ikke height:100% på body-kjede (kan kollapse på mobil); inset fyller visningsporten */
  width: auto;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  min-height: -webkit-fill-available;
  /* Over toast (600) og andre overlays – unngår «usynlig» konfetti på mobil */
  z-index: 10060;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.easter-egg-confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 11px;
  border-radius: 2px;
  opacity: 0.95;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fallback: @keyframes med var() i transform feiler ofte på iOS – brukes kun uten WAAPI */
@keyframes easter-confetti-fall {
  0% {
    transform: translate3d(0, -8vh, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--egg-drift, 0px), 120vh, 0) rotate(1180deg);
    opacity: 0.88;
  }
}

@-webkit-keyframes easter-confetti-fall {
  0% {
    -webkit-transform: translate3d(0, -8vh, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(var(--egg-drift, 0px), 120vh, 0) rotate(1180deg);
    opacity: 0.88;
  }
}

/* Nødfallback uten drift (gamle nettlesere / WAAPI-feil) */
@keyframes easter-confetti-fall-core {
  0% {
    transform: translate3d(0, -8vh, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 120vh, 0) rotate(1180deg);
    opacity: 0.88;
  }
}

@-webkit-keyframes easter-confetti-fall-core {
  0% {
    -webkit-transform: translate3d(0, -8vh, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, 120vh, 0) rotate(1180deg);
    opacity: 0.88;
  }
}

/* Mobil/touch: ren @keyframes uten var() – WebKit rAF kan utebli eller ikke tegnes */
@keyframes easter-confetti-fall-touch {
  0% {
    transform: translate3d(0, -14vh, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 138vh, 0) rotate(720deg);
    opacity: 0.92;
  }
}

@-webkit-keyframes easter-confetti-fall-touch {
  0% {
    -webkit-transform: translate3d(0, -14vh, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, 138vh, 0) rotate(720deg);
    opacity: 0.92;
  }
}

.easter-egg-confetti-piece--touch {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

@keyframes easter-confetti-fade {
  0%,
  100% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
}

@-webkit-keyframes easter-confetti-fade {
  0%,
  100% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
}

.easter-egg-toast,
.dead-end-letter-toast,
.archive-box-map-toast {
  position: fixed;
  /* Midt på skjermen (alle visningsbredder) — unngår overlap med notat øverst og knapper i bunn */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 600;
  max-height: min(90vh, 90dvh, 100svh);
  /* Bred som mulig på mobil så fem bokstaver får plass på én rad */
  width: min(560px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 12px 44px 12px 14px;
  background: rgba(22, 33, 62, 0.96);
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  text-align: center;
  line-height: 1.45;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* X i hjørnet – må kunne klikkes (toast har pointer-events: none) */
.easter-egg-toast__close {
  pointer-events: auto;
  top: 2px;
  right: 2px;
}

.easter-egg-toast__found {
  display: block;
  font-size: 1.08em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.easter-egg-toast__progress {
  display: block;
  font-size: 0.95em;
  color: var(--dim);
}

.easter-egg-toast__letters {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  width: 100%;
}

/* Én rad i toast: like brede felt som deler tilgjengelig bredde (maks ~2,6rem hver) */
.easter-egg-toast .easter-egg-letters__slot,
.dead-end-letter-toast .easter-egg-letters__slot,
.archive-box-map-toast .easter-egg-letters__slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 2.6rem;
  min-height: 2.15rem;
  padding: 3px 4px;
  font-size: clamp(0.88rem, 3.6vw, 1.05rem);
}

.easter-egg-letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.easter-egg-letters__slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 4px 6px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 6px;
  box-sizing: border-box;
}

.easter-egg-letters__slot--filled {
  color: var(--accent);
  background: rgba(202, 67, 135, 0.12);
  border: 1px solid rgba(202, 67, 135, 0.45);
}

.easter-egg-letters__slot--empty {
  color: var(--dim);
  opacity: 0.55;
  border: 1px dashed rgba(202, 67, 135, 0.35);
  background: rgba(0, 0, 0, 0.15);
}

/* Påskeegg-bokstavpuslespill (sluttskjerm når alle egg er funnet) */
.easter-egg-puzzle {
  margin-top: 14px;
  text-align: center;
}

/* Hjelpetekst under bokstavstripe: kursiv, mindre og mer tilbaketrukket enn hovedtekst */
.easter-egg-puzzle__locked,
.easter-egg-puzzle__hint {
  font-family: inherit;
  font-style: italic;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--easter-egg-puzzle-subtext);
  letter-spacing: 0.01em;
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}

/* Luft under tekst under bokstavstripe (utfall-modal / puslespill) */
.easter-egg-puzzle__locked--below,
.easter-egg-puzzle__hint {
  margin: 12px auto 1.35rem;
}

.easter-egg-puzzle__strip {
  margin-top: 4px;
}

/* Samme rad som toast / strip (.easter-egg-letters); kun vertikal luft */
.easter-egg-puzzle__row {
  margin: 4px 0 0;
}

/* Dra-og-slipp: samme bokstavfelt som toast; ghost følger pekeren */
.easter-egg-puzzle__slot {
  margin: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  line-height: 1.2;
  min-width: 2.75rem;
  min-height: 2.75rem;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.easter-egg-puzzle__slot:hover {
  transform: translateY(-1px);
}

.easter-egg-puzzle__slot:active {
  cursor: grabbing;
}

.easter-egg-puzzle__slot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.easter-egg-puzzle__slot--dragging {
  opacity: 0.35;
  transform: scale(0.98);
}

.easter-egg-puzzle__slot--drop-target {
  box-shadow: 0 0 0 2px var(--accent);
  outline: 1px dashed rgba(202, 67, 135, 0.6);
  outline-offset: 2px;
}

/* Tastatur «plukket opp» (WCAG – tilsvarer dra før slipp) */
.easter-egg-puzzle__slot--keyboard-grabbed {
  opacity: 0.92;
  box-shadow: 0 0 0 3px rgba(202, 67, 135, 0.85);
  transform: translateY(-2px);
}

.easter-egg-puzzle__drag-ghost {
  position: fixed;
  z-index: 12000;
  left: 0;
  top: 0;
  margin: 0 !important;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transform: scale(1.06);
  box-sizing: border-box;
}

.easter-egg-puzzle__row--solved .easter-egg-letters__slot--filled {
  color: #9ae6b4;
  border-color: rgba(110, 231, 183, 0.55);
  background: rgba(56, 178, 120, 0.22);
  box-shadow: 0 0 0 1px rgba(72, 187, 120, 0.2);
  animation: easter-egg-puzzle-solved-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.easter-egg-puzzle__solved-badge {
  margin: 14px 0 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7dd3a0;
  line-height: 1.35;
}
/* Utfall / smal kolonne: kortere linje for «KUBEN – riktig! … Aust-Agder Museum og Arkiv.» */
.end-box .easter-egg-puzzle__solved-badge {
  font-size: clamp(0.9rem, 0.15vw + 0.86rem, 0.97rem);
  letter-spacing: 0.018em;
  line-height: 1.42;
}
.easter-egg-puzzle__solved-badge .easter-egg-puzzle__solved-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.easter-egg-puzzle__solved-badge .easter-egg-puzzle__solved-link:hover {
  color: var(--text);
}
.easter-egg-puzzle__solved-badge .easter-egg-puzzle__solved-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@keyframes easter-egg-puzzle-solved-pop {
  0% {
    opacity: 0.65;
    transform: scale(0.94);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .easter-egg-puzzle__slot {
    transition: none;
  }
  .easter-egg-puzzle__slot:hover,
  .easter-egg-puzzle__slot--dragging {
    transform: none;
  }
  .easter-egg-puzzle__drag-ghost {
    transform: none;
  }
  .easter-egg-puzzle__row--solved .easter-egg-letters__slot--filled {
    animation: none;
  }
}

/* Dead-end-notatkort (feilsteder med notat etter besøk) */
.dead-end-notes-card {
  position: fixed;
  top: 52px;
  right: 12px;
  /* Under bokstav-toast (600); toast er sentrert så lite overlap med notat øverst til høyre */
  z-index: 130;
  width: min(352px, calc(100vw - 160px));
  /* Desktop: romslig høyde så fem dead-end-rader ofte vises uten scroll; liste scroller ved behov */
  max-height: min(65vh, 580px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 44px 12px 12px;
  background: rgba(22, 33, 62, 0.92);
  border: 1px solid rgba(202, 67, 135, 0.45);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: auto;
}

/* Lukk (×) – samme stil som overlay-close-btn; plass til høyre for tittel */
.dead-end-notes-card__close {
  top: 2px;
  right: 2px;
}

@media (min-width: 641px) {
  .dead-end-notes-card {
    width: min(480px, calc(100vw - 170px));
    padding: 12px 48px 14px 14px;
  }
}

.dead-end-notes-card.hidden { display: none; }

.dead-end-notes-card__title {
  margin: 0 0 4px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dead-end-notes-card__sub {
  margin: 0 0 8px;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--dim);
}

.dead-end-notes-card__list {
  list-style: none;
  margin: 0;
  padding: 0 4px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(202, 67, 135, 0.55) rgba(0, 0, 0, 0.2);
}

.dead-end-notes-card__list::-webkit-scrollbar {
  width: 8px;
}
.dead-end-notes-card__list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.dead-end-notes-card__list::-webkit-scrollbar-thumb {
  background: rgba(202, 67, 135, 0.5);
  border-radius: 4px;
}
.dead-end-notes-card__list::-webkit-scrollbar-thumb:hover {
  background: rgba(202, 67, 135, 0.75);
}

.dead-end-notes-row {
  margin: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.dead-end-notes-row__letter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 2px 6px;
  line-height: 1;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(202, 67, 135, 0.12);
  border: 1px solid rgba(202, 67, 135, 0.45);
  border-radius: 6px;
  box-sizing: border-box;
}
.dead-end-notes-row__body {
  flex: 1 1 auto;
  min-width: 0;
}
.dead-end-notes-row--pending {
  opacity: 0.72;
}
.dead-end-notes-row__place {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
}
.dead-end-notes-row__place--struck {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  color: var(--dim);
}
.dead-end-notes-row__note {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.dead-end-notes-row__note--pending {
  color: var(--muted);
  font-style: italic;
}

.npc-nav {
  display: flex;
  gap: var(--ov-grid, 1.25rem);
  flex-wrap: wrap;
  margin-top: 0;
  align-items: stretch;
}
.loc-btn.active { border-color: var(--accent); }
.travel-loc-btn { border-color: var(--primary); }

/* === Location buttons === */

.locations-header {
  margin-bottom: 20px;
}
#stop-name, #npc-stop-name, #wrong-name {
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,1);
}
#stop-desc, #npc-stop-desc {
  color: #c8bdb0;
  font-size: 16px;
}
.case-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 14px;
  font-family: Georgia, serif;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  margin-top: 4px;
  display: inline-block;
}
.case-link:hover { color: var(--text); }

#mystery-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 17px;
  user-select: text;
}
#location-btns {
  display: flex;
  gap: var(--ov-grid, 1.25rem);
  flex-wrap: wrap;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: stretch;
}
#overlay-locations #location-btns {
  margin-bottom: 0;
  width: 100%;
}
/* «Reis videre» i samme flyt/rutenett som hint (partall hint → egen full bredde-rad) */
#overlay-locations #location-btns > #btn-travel.travel-loc-btn--block {
  flex: 1 1 100%;
  min-width: 100%;
  grid-column: 1 / -1;
}
.loc-btn {
  background: rgba(31, 43, 71, 0.9);
  color: var(--text);
  border: 2px solid transparent;
  padding: 14px 20px;
  font-family: Georgia, serif;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
  text-align: left;
  backdrop-filter: blur(4px);
  flex: 1 1 0;
  min-width: 160px;
}
.loc-btn:hover { border-color: var(--accent); }
.loc-btn.visited { border-color: var(--dim); opacity: 0.65; }
.loc-btn .loc-title { display: block; font-weight: bold; color: var(--accent); }

/* === Dialogue === */

.dialogue-box {
  background: var(--panel);
  border-radius: 10px;
  padding: 32px;
  max-width: 580px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.npc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.npc-icon {
  font-size: 28px;
  width: 50px;
  height: 50px;
  background: var(--card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent);
  flex-shrink: 0;
}
.npc-header h3 { color: var(--accent); font-size: 17px; }
.npc-header p { color: var(--dim); font-size: 13px; }
#npc-text {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 20px;
}
.article-link {
  display: block;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: rgba(202, 67, 135, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  color: var(--accent);
  font-size: 15px;
  text-decoration: none;
}
@media (min-width: 641px) {
  /*
   * Bunn-overlay (desktop): lik ytre avstand før/etter hint-blokka (samme --ov-stack).
   */
  #overlay-npc-visit #npc-visit-scroll #npc-visit-text,
  #overlay-wrong #wrong-scroll #wrong-text {
    padding-bottom: 0;
    scroll-padding-bottom: var(--ov-stack, 0.55rem);
    margin-bottom: var(--ov-stack, 0.55rem);
  }
  #overlay-npc-visit #npc-visit-scroll #npc-visit-link.article-link,
  #overlay-wrong #wrong-scroll #wrong-link.article-link {
    margin-top: 0;
    margin-bottom: var(--ov-stack, 0.55rem);
    padding: var(--ov-stack, 0.55rem) 0.875em;
  }
}
.article-link::before {
  content: 'Hint: ';
  font-style: normal;
  opacity: 0.7;
}
.article-link.no-hint::before {
  content: none;
}
.article-link:hover { text-decoration: underline; }

/* === Travel choice === */

.travel-box {
  position: relative;
  background: var(--panel);
  border-radius: 10px;
  padding: 36px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.travel-box h2 {
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 8px;
}
.travel-hint {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}
#travel-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.travel-btn {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--dim);
  padding: 16px;
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.travel-btn:hover { border-color: var(--accent); }

/* === Character flash === */

#oselia-flash {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 200;
  pointer-events: none;
  transform: translateX(110%);
}
#oselia-flash img {
  height: 260px;
  width: auto;
  display: block;
  filter: drop-shadow(-6px 0 16px rgba(0,0,0,0.6));
}

@keyframes flash-slide {
  0%   { transform: translateX(110%); }
  18%  { transform: translateX(0); }
  80%  { transform: translateX(0); }
  100% { transform: translateX(110%); }
}
@keyframes flash-peek {
  0%   { transform: translateX(110%); }
  25%  { transform: translateX(58%); }
  75%  { transform: translateX(58%); }
  100% { transform: translateX(110%); }
}
@keyframes flash-rise {
  0%   { transform: translateY(110%); }
  25%  { transform: translateY(0); }
  75%  { transform: translateY(0); }
  100% { transform: translateY(110%); }
}
@keyframes flash-snap {
  0%   { transform: translateX(110%); animation-timing-function: cubic-bezier(0.0, 0.9, 0.1, 1.0); }
  12%  { transform: translateX(0); animation-timing-function: linear; }
  75%  { transform: translateX(0); animation-timing-function: ease-in; }
  100% { transform: translateX(110%); }
}
@keyframes flash-sneak {
  0%   { transform: translate(110%, 110%) rotate(6deg); }
  30%  { transform: translate(0, 0) rotate(0deg); }
  70%  { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(110%, 110%) rotate(6deg); }
}

#oselia-flash.anim-slide  { animation: flash-slide  2.8s ease-in-out; }
#oselia-flash.anim-peek   { animation: flash-peek   3.0s ease-in-out; }
#oselia-flash.anim-rise   { animation: flash-rise   2.8s ease-in-out; }
#oselia-flash.anim-snap   { animation: flash-snap   2.8s linear; }
#oselia-flash.anim-sneak  { animation: flash-sneak  3.0s ease-in-out; }

@media (max-width: 640px) {
  #oselia-flash img { height: auto; max-height: 180px; max-width: 90vw; }
}

/* === Full-screen overlay === */

#oselia-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}
#oselia-overlay img {
  height: 340px;
  max-width: 95vw;
  width: auto;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,0.9));
}
#oselia-overlay-text {
  color: #e0d6c8;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 28px;
  opacity: 0;
}

/* 6. Interstitial – dark fade in/out */
@keyframes ov-fade    { 0%,100%{opacity:0} 15%,80%{opacity:1} }
#oselia-overlay.anim-interstitial {
  background: rgba(0,0,0,0.93);
  animation: ov-fade 3.2s ease-in-out forwards;
}

/* 7. Spotlight – radial dark vignette */
#oselia-overlay.anim-spotlight {
  background: radial-gradient(ellipse 280px 340px at center, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.97) 100%);
  animation: ov-fade 3.4s ease-in-out forwards;
}

/* 8. Projector – white flash → dark */
@keyframes ov-projector {
  0%   { opacity: 1; background: #fff; }
  8%   { background: #111; }
  15%  { opacity: 1; background: #111; }
  80%  { opacity: 1; background: #111; }
  100% { opacity: 0; background: #111; }
}
#oselia-overlay.anim-projector {
  animation: ov-projector 3.2s ease-in-out forwards;
}

/* 9. Blits + risting */
@keyframes ov-shake {
  0%   { opacity: 1; background: #fff; }
  6%   { background: rgba(0,0,0,0.92); }
  9%   { transform: translateX(-10px); }
  11%  { transform: translateX(9px); }
  13%  { transform: translateX(-7px); }
  15%  { transform: translateX(6px); }
  17%  { transform: translateX(-3px); }
  19%  { transform: translateX(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
#oselia-overlay.anim-shake {
  background: rgba(0,0,0,0.92);
  animation: ov-shake 3.0s linear forwards;
}

/* 10. Noir tekstkort */
@keyframes ov-noir     { 0%,100%{opacity:0} 12%,82%{opacity:1} }
@keyframes ov-noir-txt { 0%,22%{opacity:0;letter-spacing:6px} 38%,80%{opacity:1;letter-spacing:3px} 100%{opacity:0} }
#oselia-overlay.anim-noir {
  background: rgba(8,6,18,0.97);
  animation: ov-noir var(--oselia-noir-dur, 3.8s) ease-in-out forwards;
}
#oselia-overlay.anim-noir #oselia-overlay-text {
  animation: ov-noir-txt var(--oselia-noir-dur, 3.8s) ease-in-out forwards;
}

@media (max-width: 640px) {
  #oselia-overlay img { height: auto; max-height: 240px; max-width: 90vw; }
}

/* === Prototype end === */

.end-box {
  position: relative;
  background: var(--panel);
  border-radius: 10px;
  padding: 40px;
  /* Utfall-modal: bred nok til lange KUBEN-lenker på desktop (92% begrenser på smal skjerm) */
  max-width: 840px;
  width: 92%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  border-top: 3px solid var(--accent);
}
.end-label {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.end-cover-img {
  display: block;
  width: 100%;
  max-width: 160px;
  margin: 0 auto 20px;
}
.end-title {
  font-size: 28px;
  color: var(--text);
  margin-bottom: 16px;
}
.end-body {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 4px;
}
.end-body strong { color: var(--text); }
.end-stats-section {
  margin: 0;
  padding: 0;
}
.end-stats-hr {
  border: none;
  border-top: 1px solid rgba(202, 67, 135, 0.4);
  margin: 18px 0 10px;
  width: 100%;
}
/* Oppsummering (påskeegg / blindspor / arkivboks) – uthevet callout per kategori */
.end-stats-section .end-body--stats-recap {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  font-style: normal;
}
.end-stats-section .end-stats-recap-callout {
  margin: 0 0 14px;
  padding: 14px 16px 14px 18px;
  border-left: 4px solid var(--accent);
  background: rgba(202, 67, 135, 0.12);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  font-size: clamp(1.02rem, 0.2vw + 1rem, 1.125rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
  font-style: normal;
}
.end-stats-section .end-stats-recap-callout strong {
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.end-body--dead-end-stats-line {
  margin-bottom: 0;
}
.end-body--dead-end-after-easter-puzzle {
  margin-top: 1.85rem;
  padding-top: 0.25rem;
}
.end-body--archive-after-prior-stats {
  margin-top: 1.85rem;
  padding-top: 0.25rem;
}
/* SCOTT-puslespill under dead-end-oppsummering på utfalls-modal */
.dead-end-scott-puzzle--in-ending {
  margin-top: 12px;
}
.oselia-archive-puzzle--in-ending {
  margin-top: 12px;
}
/* Readonly-stripe fjernet når alle bokstaver er inne — unngå dobbel toppluft */
.oselia-archive-ending-block > .oselia-archive-puzzle--in-ending:first-child {
  margin-top: 0;
}
/* Arkivboks-bokstaver under utfalls-oppsummering (samme blokk som egg/SCOTT) */
.oselia-archive-ending-block {
  margin-top: 12px;
}
/* Felles fotnote under alle tre bokstav-rebusene – samme typografi som .end-body--stats-recap */
.end-stats-section .end-stats-section__letter-rebus-footnote {
  margin-top: 1.35rem;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  letter-spacing: normal;
  text-align: inherit;
}
.end-stats-section .end-stats-section__letter-rebus-footnote--complete {
  color: var(--text);
  font-weight: 600;
}
.end-divider {
  border: none;
  border-top: 1px solid rgba(202, 67, 135, 0.5); /* accent – synlig mellom utfall og sannhet */
  margin: 28px 0 22px;
  width: 100%;
  flex-shrink: 0;
}
.end-truth {
  font-size: 17px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 12px;
  font-style: italic;
}
.end-truth:last-of-type { margin-bottom: 0; }

/* === Buttons === */

button { cursor: pointer; font-family: Georgia, serif; }

/* WCAG 2.4.7 / 2.4.11: synlig tastaturfokus (nettleserens default er ofte svak på mørk bakgrunn) */
a:focus-visible,
button:focus-visible,
.btn-home:focus-visible,
.splash-home:focus-visible,
.overlay-close-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--primary);
  color: var(--text);
  border: none;
  padding: 13px 36px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 6px;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--accent); }

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 10px 26px;
  font-size: 14px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--accent); color: var(--text); }

.hidden { display: none !important; }

/* === Responsive – mobile === */

@media (max-width: 640px) {
  /* Splash */
  .splash-cover { height: 220px; width: auto; }
  .splash-logo { width: 110px; }
  .splash-box h1 { font-size: 34px; }
  .episode-title { font-size: 14px; }
  #btn-start { padding: 14px 32px; }
  /* Move splash-tag below logo/lang-switcher row on narrow screens */
  .splash-tag { top: 68px; }
  /* Push splash content below the tag on mobile */
  #screen-splash::before { min-height: 110px; }

  /* Bottom overlays: kolonne – tekst scroller, hint-/handlingsknapper forblir over «fold» i panelet */
  .overlay-bottom {
    padding: 1.25rem 1rem max(var(--ov-stack, 0.55rem), env(safe-area-inset-bottom, 0px));
    max-height: min(68vh, 85dvh);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /*
   * Intro/typewriter: lik luft fra siste dialoglinje ned til knapp som fra knapp til panelbunn.
   * Samme uttrykk + safe area under knappen.
   */
  #overlay-typewriter.overlay-bottom {
    padding-bottom: max(var(--ov-stack, 0.55rem), 1.35em, env(safe-area-inset-bottom, 0px));
  }

  /* Luft under siste linje i scrollfelt (unngår avkuttede descenders / «under streken») */
  #overlay-typewriter #typewriter-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: 0;
    padding-bottom: max(var(--ov-stack, 0.55rem), 1.35em);
    scroll-padding-bottom: max(var(--ov-stack, 0.55rem), 1.35em);
  }
  /* Ikke trim vertikal padding – full .btn-primary-høyde; luft dialog↔knapp styres av typewriter/overlay-padding */
  #overlay-typewriter #btn-enter {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 13px 36px;
    box-sizing: border-box;
  }

  /* Ingen global row-gap: den ga for stor luft mellom dialog ↔ hint og hint ↔ knapper */
  #overlay-npc-visit,
  #overlay-wrong {
    row-gap: 0;
  }

  /*
   * Vertikal dialog-scroll på mobil (touch-action hjelper nettleseren å velge riktig scroll-mål).
   * Ytre scroll-beholder har pointer-events:none + auto på barn (globalt); touch-action beholdes her.
   */
  #overlay-npc-visit #npc-visit-scroll,
  #overlay-wrong #wrong-scroll,
  #overlay-locations #location-scroll,
  #overlay-typewriter #typewriter-text {
    touch-action: pan-y;
  }

  /* Sted + intro (+ taler + dialog) i én scroll – mer plass til lang dialog når man scroller */
  #overlay-npc-visit #npc-visit-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: 0;
  }
  #overlay-npc-visit #npc-visit-scroll .locations-header {
    flex: 0 0 auto;
    margin-bottom: calc(var(--ov-u, 0.25rem) * 3);
  }
  #overlay-npc-visit #npc-visit-scroll #npc-visit-speaker {
    flex: 0 0 auto;
  }
  #overlay-npc-visit #npc-visit-text {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    margin-bottom: 0;
    padding-bottom: var(--ov-stack, 0.55rem);
    scroll-padding-bottom: var(--ov-stack, 0.55rem);
  }
  #overlay-npc-visit #npc-visit-scroll #npc-visit-link {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: var(--ov-stack, 0.55rem);
    padding: 0.5em 0.875em;
  }
  #overlay-npc-visit #npc-nav-btns {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 0;
  }

  #overlay-wrong #wrong-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: 0;
  }
  #overlay-wrong #wrong-scroll .locations-header {
    flex: 0 0 auto;
    margin-bottom: calc(var(--ov-u, 0.25rem) * 3);
  }
  #overlay-wrong #wrong-text {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    margin-bottom: 0;
    padding-bottom: var(--ov-stack, 0.55rem);
    scroll-padding-bottom: var(--ov-stack, 0.55rem);
  }
  #overlay-wrong #wrong-scroll #wrong-link {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: var(--ov-stack, 0.55rem);
    padding: 0.5em 0.875em;
  }
  #overlay-npc-visit #npc-visit-scroll #npc-visit-link.article-link,
  #overlay-wrong #wrong-scroll #wrong-link.article-link {
    margin-bottom: var(--ov-stack, 0.55rem);
  }
  #overlay-wrong .npc-nav {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 0;
  }

  #overlay-locations #location-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #overlay-locations #location-scroll .locations-header {
    flex: 0 0 auto;
    margin-bottom: calc(var(--ov-u, 0.25rem) * 3);
  }
  #overlay-locations #location-btns {
    flex: 0 0 auto;
    margin-top: 0;
    padding-bottom: var(--ov-stack, 0.55rem);
    scroll-padding-bottom: var(--ov-stack, 0.55rem);
  }

  /* Typewriter */
  #typewriter-text { font-size: 16px; }
  .tw-highlight { font-size: 17px; }

  /* Stop / NPC headers */
  #stop-name, #npc-stop-name, #wrong-name { font-size: 20px; }
  #npc-visit-text { font-size: 15px; }

  /* Location + nav buttons (NPC m.m.): CSS grid */
  .npc-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ov-stack, 0.55rem);
    align-items: stretch;
  }
  #overlay-locations #location-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ov-stack, 0.55rem);
    margin-bottom: 0;
    align-items: stretch;
  }
  #overlay-locations #location-btns > #btn-travel {
    margin-top: 0;
  }
  .loc-btn {
    min-width: 0;
    max-width: none;
    flex: none;
    padding: 12px 14px;
    font-size: 15px;
  }

  /* Skip button: just below lang/mute row on mobile so it doesn't cover logo or controls */
  .btn-skip {
    top: 52px;
    right: 12px;
    left: auto;
    bottom: auto;
  }

  /* Center overlays: top spacer clears the header logo on mobile */
  .overlay-center::before { min-height: 64px; }
  .overlay-center::after  { min-height: 24px; }
  .dialogue-box, .travel-box {
    padding: 20px;
    width: 92%;
    margin: auto;
  }
  .travel-box h2 { font-size: 20px; }
  .end-box {
    padding: 24px 20px;
    width: 95%;
    margin: auto;
  }
  .end-title { font-size: 22px; }
  .end-stats-section .end-stats-recap-callout {
    padding: 12px 12px 12px 14px;
    font-size: 1.05rem;
  }

  /* Dead-end-notat: kort panel – fast liste-viewport ≈ 1½ rad (resten scroller) */
  .dead-end-notes-card {
    --dead-end-notes-list-gap: 6px;
    /* ~1,3 kompakte rader synlig (justert fra ~1,8); radhøyde følger innhold */
    --dead-end-notes-list-viewport: clamp(3.5rem, 24.5vw, 4.6rem);
    top: calc(48px + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: auto;
    max-height: none;
  }
  .dead-end-notes-card__list {
    flex: 0 0 auto;
    gap: var(--dead-end-notes-list-gap);
    min-height: var(--dead-end-notes-list-viewport);
    max-height: var(--dead-end-notes-list-viewport);
    overflow-y: auto;
  }

  .btn-home,
  .btn-mute {
    z-index: 131;
  }

  .game-top-right-tools {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(44px + env(safe-area-inset-right, 0px));
  }

  .btn-mute {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
  }

  .btn-home {
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: calc(14px + env(safe-area-inset-left, 0px));
  }

  /* Gjør plass til notat + språk til høyre på smale skjermer */
  #screen-game .btn-home img {
    width: min(120px, 40vw);
    height: auto;
  }
}

/* === About modal === */

.btn-about {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 10px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.btn-about:hover { opacity: 1; }

.btn-about-ending {
  display: block;
  margin: 16px auto 0;
}

.end-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

#screen-splash .btn-about {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

#overlay-about {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  padding: 20px;
  overflow-y: auto;
}
#overlay-about.hidden { display: none !important; }

.about-box {
  background: var(--panel);
  border-radius: 10px;
  padding: 40px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  border-top: 3px solid var(--accent);
  position: relative;
  text-align: center;
}

@media (min-width: 641px) {
  .about-box {
    max-width: 640px;
    padding: 44px 48px;
  }
}

@media (min-width: 900px) {
  .about-box {
    max-width: 720px;
  }
}

/* Lukkekryss (Om-modal, Hvor reiser du?) */
.overlay-close-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: color 0.2s, background 0.2s;
}
.overlay-close-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
.overlay-close-btn:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.about-tag {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.about-title {
  font-size: 22px;
  color: var(--text);
  margin-bottom: 4px;
}

.about-episode {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 28px;
}

.about-credits {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.about-credit-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.about-credit-continuation {
  margin-top: -10px;
}

.about-credit-role {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.8;
}

.about-credit-name {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}

.about-credit-sub {
  font-size: 13px;
  color: var(--muted);
}

.about-credit-sub a {
  color: var(--muted);
  text-decoration: underline;
}