/* ══════════════════════════════════════════════
   LJODSTIGEN — appspesifikke tillegg til fellesstilen

   KONTRAST: UI-tekst står på lyse flater. Der vi treng
   farge bak tekst, brukar vi anten inverteringa
   (background: var(--text); color: var(--surface)) eller ein fast lys
   pastell med var(--text-on-light-accent).
   ══════════════════════════════════════════════ */

/* Andika 7.000, SIL Global, OFL 1.1. Sjølv-hosta i _libs/andika/.
   Sjå _libs/CREDITS.md for versjon, sjekksummar og kvifor heile fonten
   ligg der i staden for eit subsett.

   Verdana står som fallback fordi han er den einaste breitt tilgjengelege
   systemfonten som skil stor I frå liten l omtrent like godt som Andika
   (målt: I/l = 3,1x mot Andika sin 3,0x, medan Segoe UI ligg på 1,0x).
   Rekk ikkje fonten fram, er bokstavane framleis til å skilje. */
@font-face {
  font-family: 'Andika';
  src: url('../../_libs/andika/Andika-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* swap, ikkje block: ein elev skal aldri sjå ei tom bokstavflate.
     Verdana i eit halvsekund er betre enn ingenting i eit halvsekund. */
  font-display: swap;
}

/* Framgang i ti steg. Flater, knappar og typografi kjem frå felles CSS. */
.ljod-journey { display: grid; gap: 12px; min-width: 0; }
.ljod-journey > :is(h3, p) { margin: 0; }
.ljod-journey-summary { font-weight: 700; }
.ljod-journey-progress { width: 100%; height: 24px; accent-color: var(--vp-moss); }
.ljod-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ljod-level { display: grid; align-content: start; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ljod-level > p { margin: 0; }
.ljod-level-state { font-weight: 700; }
.ljod-playing .ljod-reading-option { font-size: clamp(1.15rem, 3vw, 1.7rem); line-height: 1.5; font-weight: 400; overflow-wrap: anywhere; }
.ljod-playing[data-font="lesefont"] .ljod-reading-option { font-family: var(--ljod-font-read); }
.ljod-sound-groups { justify-content: center; margin-block: 12px; }
.ljod-task .ljod-journey { text-align: left; margin-block: 12px; }
.ljod-game-shell { max-width: 960px; padding-block: 24px; }
.ljod-options.ljod-reading-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.ljod-reading-option.is-right { background: var(--ljod-right); }
.ljod-reading-option.is-wrong { background: var(--ljod-wrong); }
.ljod-reading-option.is-answer { background: var(--ljod-answer); }
.ljod-player [data-pane], #laerar { min-width: 0; }
.ljod-table-wrap { max-width: 100%; overflow-x: auto; }

:root {
  --ljod-font-read: 'Andika', Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;

  /* Faste lyse pastellar. Trygge under var(--text-on-light-accent) i
     alle 21 tema, fordi dei ikkje endrar seg med temaet. */
  --ljod-right: #BAFCA2;
  --ljod-wrong: #FFC2C2;
  --ljod-answer: #FFD166;
}

body[data-font="lesefont"] .ljod-glyph,
body[data-font="lesefont"] .ljod-sample,
body[data-font="lesefont"] .ljod-td-letter,
body[data-font="lesefont"] .ljod-bed-letter {
  font-family: var(--ljod-font-read);
}

/* ──────────────── Framside ──────────────── */

.ljod-hero-mark {
  display: block;
  flex: 0 0 auto;
  width: clamp(44px, 12vw, 84px);
  aspect-ratio: 1;
  object-fit: contain;
}

.ljod-alpha { margin-bottom: 20px; }
.ljod-alpha p { max-width: 78ch; margin: 0; }

.ljod-hint {
  color: var(--vp-ink);
  max-width: 78ch;
}

.ljod-sample {
  /* 400 av same grunn som .ljod-glyph: dette er nettopp prøven som skal
     vise at I og l er til å skilje, og då kan han ikkje vere forvrengd. */
  font-weight: 400;
  font-size: 1.15em;
  padding: 0 2px;
  border-bottom: 2px solid var(--border);
}

/* Profilar */
.ljod-profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 12px;
  align-items: stretch;
}

.ljod-profile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.ljod-profile-pick {
  width: 100%;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 12px 10px;
}

.ljod-profile-name { font-weight: 800; font-size: 1.05rem; }
.ljod-profile-sum  { font-size: 0.8rem; color: var(--vp-ink); }

.ljod-newprofile { grid-column: 1 / -1; display: grid; gap: 12px; margin-top: 0; }
.ljod-avatar-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(92px, 100%), 1fr)); gap: 10px; }

.ljod-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
}
.ljod-avatar:hover { transform: none; }
.ljod-avatar-name { font-size: 0.75rem; font-weight: 700; }
.ljod-avatar img,
.ljod-profile-pick img {
  width: 56px;
  height: 56px;
  display: block;
  flex: 0 0 auto;
}

/* Modusar */
.ljod-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
  margin-top: 8px;
}

.ljod-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 100%;
  text-decoration: none;
  position: relative;
}
.ljod-mode:hover { transform: none; }
.ljod-mode.is-locked { opacity: 1; background: var(--vp-stone); border-style: dashed; }
.ljod-mode.is-locked:hover { transform: none; }

.ljod-mode-title { font-weight: 800; font-size: 1.15rem; }
.ljod-mode-blurb { font-size: 0.9rem; color: var(--vp-ink); }
.ljod-mode-flag {
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 8px;
  border: 2px solid var(--vp-frame);
  border-radius: 6px;
  background: var(--vp-honey);
  color: var(--vp-ink);
  font-size: 0.75rem;
  font-weight: 750;
}

/* Merket på ein modus som er open fordi læraren opna alt, ikkje fordi
   eleven kom dit. Det skal ikkje sjå ut som noko han har fortent. */
.ljod-mode-flag.ljod-flag-open {
  background: var(--vp-paper);
  color: var(--vp-ink);
  border: 2px solid var(--vp-frame);
  font-weight: 700;
}

.ljod-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 3px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}
.ljod-check input { width: 22px; height: 22px; cursor: pointer; }
.ljod-check:focus-within { outline: 4px solid var(--accent2); outline-offset: 3px; }

/* ──────────────── Oppgåveflate ──────────────── */

.ljod-play { margin-top: 10px; }

.ljod-playbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ljod-playbar .vyrde { width: 56px; height: 56px; }

.ljod-task { display: flex; flex-direction: column; gap: 16px; }

.ljod-prompt {
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  font-weight: 800;
  text-align: center;
  margin: 0;
}

.ljod-audio-note {
  font-size: 0.85rem;
  color: var(--text-on-light-accent);
  background: var(--ljod-answer);
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  text-align: center;
  max-width: 78ch;
  margin: 8px auto 0;
}

.ljod-task-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Lydknapp — stor med vilje. Han er oppgåva, ikkje ein hjelpefunksjon. */
.ljod-replay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 3px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--border);
}
.ljod-replay:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--border); }
.ljod-replay:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); }
.ljod-replay.is-playing { background: var(--ljod-answer); color: var(--text-on-light-accent); }

/* Bokstavbrikker og svarrutenett */
.ljod-options {
  display: grid;
  gap: clamp(10px, 2.2vw, 18px);
  width: 100%;
  max-width: 760px;
  grid-template-columns: repeat(2, 1fr);
}
.ljod-options-4 { grid-template-columns: repeat(2, 1fr); }
.ljod-options-6 { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 700px) {
  .ljod-options-4 { grid-template-columns: repeat(4, 1fr); }
  .ljod-options-6 { grid-template-columns: repeat(3, 1fr); }
}

.ljod-tile, .ljod-plate, .ljod-slot, .ljod-listen {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--border);
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}

.ljod-tile-lg { aspect-ratio: 1 / 1; min-height: 92px; }
.ljod-tile-md { aspect-ratio: 1 / 1; min-height: 66px; width: clamp(58px, 15vw, 84px); }

.ljod-glyph {
  font-size: clamp(2.4rem, 11vw, 4.4rem);
  /* 400, ikkje 700. Vi lastar berre Andika Regular, så feit skrift ville
     blitt syntetisk fortjukka av nettlesaren — og det er formene eleven
     skal lære, ikkje ei forvrengd utgåve av dei. */
  font-weight: 400;
  line-height: 1;
}
.ljod-tile-md .ljod-glyph { font-size: clamp(1.6rem, 7vw, 2.6rem); }

.ljod-tile:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--border); }
.ljod-tile:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--border); }
.ljod-tile:disabled { cursor: default; }

.ljod-plate {
  cursor: default;
  width: clamp(120px, 40vw, 200px);
  aspect-ratio: 1 / 1;
}

/* Svarstatus. Faste pastellar med mørk tekst — trygge i alle 21 tema. */
.is-right  { background: var(--ljod-right)  !important; color: var(--text-on-light-accent) !important; }
.is-wrong  { background: var(--ljod-wrong)  !important; color: var(--text-on-light-accent) !important; }
.is-answer { background: var(--ljod-answer) !important; color: var(--text-on-light-accent) !important; }

/* Lyttebrikker (Bokstavropet) */
.ljod-listen {
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  padding: 12px;
}
.ljod-listen-num { font-weight: 800; font-size: 1.2rem; }
.ljod-listen.is-heard { border-style: dashed; }

/* Ordbyggjaren */
.ljod-slots, .ljod-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 2vw, 14px);
}
.ljod-slots { margin-top: 4px; }

.ljod-slot {
  width: clamp(58px, 15vw, 84px);
  aspect-ratio: 1 / 1;
  border-style: dashed;
  box-shadow: none;
}
.ljod-slot.is-filled { border-style: solid; box-shadow: 5px 5px 0 var(--border); }
.ljod-tray { margin-top: 6px; }
.ljod-tile.is-used { opacity: 0.25; box-shadow: none; }

/* Framdrift */
.ljod-progress {
  height: 12px;
  border: 3px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.ljod-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);   /* ingen tekst oppå — trygt */
  transition: width 0.3s;
}

.ljod-loading { display: flex; flex-direction: column; gap: 14px; padding: 40px 0; }

/* ──────────────── Skogen ──────────────── */

.ljod-garden {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.ljod-bed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  border: 3px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}
.ljod-bed.is-locked { opacity: 0.3; }
.ljod-bed-letter { font-weight: 800; font-size: 1.1rem; }

.ljod-garden-sum { font-weight: 700; max-width: 78ch; }

/* Stjerner */
.ljod-stars { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.ljod-star {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  opacity: 0.55;
}
.ljod-star.is-earned { opacity: 1; box-shadow: 4px 4px 0 var(--border); }
.ljod-star-label { font-size: 0.85rem; font-weight: 700; }
.ljod-streak { font-weight: 700; }

/* Merke */
.ljod-badges, .ljod-won {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: 12px;
}
.ljod-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--text);
  opacity: 0.5;
}
.ljod-badge-icon { display: block; width: 44px; height: 44px; object-fit: contain; }
.ljod-badge:not(.is-earned) .ljod-badge-icon { filter: grayscale(1); }
.ljod-badge.is-earned { opacity: 1; }
.ljod-badge-title { font-weight: 800; }
.ljod-badge-hint { font-size: 0.78rem; color: var(--muted); }

/* ──────────────── Slutten på økta ──────────────── */

.ljod-done { position: relative; padding: 24px; text-align: center; }
.ljod-done .ljod-garden, .ljod-done .ljod-stars { justify-content: center; }

.ljod-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--accent);
}

.ljod-btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.ljod-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ljod-tabs [aria-selected="true"] { background: var(--vp-honey); color: var(--vp-ink); box-shadow: inset 0 -4px 0 var(--vp-focus); }
.ljod-mode-par { min-width: 0; }

/* ──────────────── Læraroversikt ──────────────── */

.ljod-laerar-head h2 { margin-bottom: 2px; }
.ljod-muted { color: var(--muted); max-width: 78ch; }

.ljod-laerar-sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.ljod-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 3px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.ljod-stat-num { font-size: 1.6rem; font-weight: 800; }
.ljod-stat-label { font-size: 0.75rem; color: var(--muted); }

.ljod-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ljod-table th, .ljod-table td {
  border: 2px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}
.ljod-table th { background: var(--text); color: var(--surface); }
.ljod-table tr.is-weak td { background: var(--ljod-wrong); color: var(--text-on-light-accent); }
.ljod-td-letter { font-weight: 800; font-size: 1.1rem; }

.ljod-trouble { max-width: 78ch; }
.ljod-trouble li { margin-bottom: 4px; }

/* Tabellen må kunne skrollast for seg på mobil, ikkje dra sida sidelengs. */
[data-pane="laerar"] { overflow-x: auto; }

/* ──────────────── Fokus og rørsle ──────────────── */

.ljod-tile:focus-visible,
.ljod-slot:focus-visible,
.ljod-listen:focus-visible,
.ljod-replay:focus-visible,
.ljod-avatar:focus-visible,
.ljod-profile-pick:focus-visible,
.ljod-profile-del:focus-visible,
.ljod-mode:focus-visible,
.ljod-fontbtn:focus-visible {
  outline: 4px solid var(--accent2);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ljod-tile, .ljod-replay, .ljod-mode, .ljod-avatar, .ljod-progress-fill {
    transition: none;
  }
  .ljod-tile:hover, .ljod-replay:hover, .ljod-mode:hover, .ljod-avatar:hover {
    transform: none;
  }
}

/* ──────────────── Utskrift ──────────────── */

@media print {
  .ljod-player > section:first-child { display: none; }
  .ljod-table-wrap { overflow: visible; }
  @page { size: A4 portrait; margin: 12mm; }
  .vp-header, .vp-hero-stage, .vp-notice, .ljod-tabs, #printLaerar,
  .vp-standard-support, #profiles, #modes, #stars, .ljod-playbar { display: none !important; }
  .vp-panel { border: 0; box-shadow: none; }
  .ljod-table th { background: none; color: #000; }
  .ljod-table tr.is-weak td { background: none; font-weight: 700; }
  body { background: #fff; color: #000; }
}

/* ══════════════════════════════════════════════
   BOKSTAVSKOGEN I 3D
   ══════════════════════════════════════════════ */

.ljod-skog3d {
  position: relative;
  border: 3px solid var(--border);
  border-radius: 12px;
  /* Ein himmel bak skogen. Fast farge og ikkje ein temavariabel: skogen
     er ein stad, og han skal sjå lik ut i alle dei 21 temaa. */
  background: linear-gradient(#DCEFF6 0%, #EFF6E4 62%);
  overflow: hidden;
  touch-action: pan-y;
}

.ljod-skog3d-lerret {
  display: block;
  width: 100%;
  cursor: grab;
}
.ljod-skog3d-lerret:active { cursor: grabbing; }

/* Bokstavane er 3D-skilt i skogen no. Denne lista er den same
   informasjonen for skjermlesarar: ein tekstur finst ikkje for dei, og
   det skal ikkje bety at skogen ikkje finst. */
.ljod-skog3d-lesarliste {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  list-style: none;
}

.ljod-skog3d-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.ljod-skog3d-hint { margin: 0; }

/* Prøveknappen står her medan skogen er ny. Han skal sjå ut som det han
   er — eit verktøy under arbeid — og ikkje som noko eleven skal trykkje
   på, difor den stipla ramma. */
.ljod-skog3d-prov {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}
.ljod-skog3d-prov .ljod-hint { margin: 0; max-width: 34ch; font-size: 0.78rem; }

/* Kamerastyringa ligg oppå lerretet, øvst til høgre. */
.ljod-skog3d-styring {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.ljod-skog3d-knapp {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.88);
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  cursor: pointer;
  /* Faste fargar som lappane: skogen er ein stad med sin eigen himmel,
     og knappane står oppå den himmelen, ikkje på temaflata. */
}
.ljod-skog3d-knapp:hover { background: #fff; }
.ljod-skog3d-knapp:active { transform: translateY(1px); }
.ljod-skog3d-knapp:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }

/* Ein modus som finst i to utgåver: kortet, og ei lenkje til den andre
   under. Lenkja er tydeleg mindre enn kortet — utgåvene er ikkje
   likeverdige val, den vanlege er hovudvegen. */
.ljod-mode-par {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ljod-mode-par .ljod-mode { margin: 0; }

.ljod-mode-variant { align-self: flex-start; margin-top: 4px; }

/* Styrespaken i skogen. Same form som på leirplassen, men mindre — han
   ligg oppå eit lerret som deler plass med resten av sida. */
.ljod-skog3d-spak {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 4px solid rgba(26, 26, 26, 0.5);
  touch-action: none;
  display: grid;
  place-items: center;
  z-index: 2;
}

.ljod-skog3d-knott {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 4px solid #1a1a1a;
  pointer-events: none;
}