/* =====================================================================
   SKRIFTER – ligger på egen server (src/fonts, hentes ved Docker-bygg).
   Ingen kall til Google: elevenes IP-adresser deles ikke med tredjepart.
   Mangler filene, brukes reserveskriftene i --font automatisk.
   ===================================================================== */
@font-face{font-family:"Lexend";src:url("../fonts/lexend-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend";src:url("../fonts/lexend-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend";src:url("../fonts/lexend-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend";src:url("../fonts/lexend-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Special Elite";src:url("../fonts/special-elite-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* =====================================================================
   DESIGN-TOKENS
   Alle farger defineres som CSS-variabler. Mørk modus redefinerer dem.
   Kontrastpar er valgt for WCAG AA (hvit tekst på primary/secondary/
   success/danger/warning, mørk blekk-tekst på accent).
   ===================================================================== */
:root{
  --primary:#3D3AB8;      /* detektiv-indigo */
  --primary-ink:#2A2785;
  --secondary:#0B7F74;    /* sjøgrønn */
  --accent:#FFB020;       /* lyktegul */
  --success:#1B7F45;
  --warning:#A85400;
  --danger:#B8324A;

  --bg:#DCEAF7;
  --bg-dot:#C4D8EE;
  --card:#FFFFFF;
  --card-2:#F2F6FC;
  --ink:#1B1D3A;
  --ink-soft:#4A4F72;
  --line:#1B1D3A;
  --shadow-ink:#1B1D3A;
  --paper:#FFF6DC;        /* saksmappe-papir */
  --paper-edge:#E8C77A;

  --r-common:#5B6272;
  --r-rare:#1E63C4;
  --r-epic:#7C35C4;
  --r-legendary:#8A5700;

  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;
  --tap:56px;             /* minste klikkflate for barn */
  --font:"Lexend","Atkinson Hyperlegible","Verdana","Segoe UI",system-ui,sans-serif;
  --font-stamp:"Special Elite","Courier New",ui-monospace,monospace;
  --text-scale:1;
  /* Tilgjengelighet: fokusring med kontrast mot både lys og mørk bakgrunn, tekstfarger med nok kontrast */
  --focus-ring:#1B1D3A; --focus-halo:#FFB020;
  --primary-text:#3D3AB8; --success-text:#166B3A; --rarity-text:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#161A3A; --bg-dot:#20264F; --card:#232957; --card-2:#2B3266;
    --ink:#F2F4FF; --ink-soft:#C3C8EC; --line:#0A0C22; --shadow-ink:#07081A;
    --paper:#3A3560; --paper-edge:#6B5FA8;
    --primary:#5B58D6; --r-common:#A3A9BC; --r-rare:#6FA8FF; --r-epic:#C08BFF; --r-legendary:#FFC34D;
    --focus-ring:#FFFFFF; --focus-halo:#5B58D6; --primary-text:#B9B7FF; --success-text:#6EE7A0; --rarity-text:#12162B;
  }
}
:root[data-theme="dark"]{
  --bg:#161A3A; --bg-dot:#20264F; --card:#232957; --card-2:#2B3266;
  --ink:#F2F4FF; --ink-soft:#C3C8EC; --line:#0A0C22; --shadow-ink:#07081A;
  --paper:#3A3560; --paper-edge:#6B5FA8;
  --primary:#5B58D6; --r-common:#A3A9BC; --r-rare:#6FA8FF; --r-epic:#C08BFF; --r-legendary:#FFC34D;
  --focus-ring:#FFFFFF; --focus-halo:#5B58D6; --primary-text:#B9B7FF; --success-text:#6EE7A0; --rarity-text:#12162B;
}

/* ============================ GRUNNLAG ============================ */
*{box-sizing:border-box}
html{font-size:calc(100% * var(--text-scale));-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);line-height:1.6;
  background-color:var(--bg);
  background-image:radial-gradient(var(--bg-dot) 1.6px, transparent 1.6px);
  background-size:22px 22px;
  min-height:100vh;padding-bottom:calc(88px + env(safe-area-inset-bottom));
}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,6vw,2.8rem)}
h2{font-size:1.5rem}
h3{font-size:1.15rem}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;box-shadow:0 0 0 6px var(--focus-halo);border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#1B1D3A;padding:10px 14px;border-radius:8px;z-index:999}
.skip:focus{left:8px}
.wrap{max-width:880px;margin:0 auto;padding:16px}
.muted{color:var(--ink-soft)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stack>*+*{margin-top:14px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* Klistremerke-stilen: tykk strek + forskjøvet skygge. Brukes sparsomt
   på det barnet kan trykke på eller samle, ikke på alt. */
.sticker{background:var(--card);border:3px solid var(--line);border-radius:var(--radius-m);box-shadow:4px 4px 0 var(--shadow-ink)}
.panel{background:var(--card);border-radius:var(--radius-m);padding:18px;border:2px solid color-mix(in srgb,var(--line) 20%,transparent)}

/* ============================ KNAPPER ============================ */
.btn{
  min-height:var(--tap);padding:12px 22px;border-radius:14px;border:3px solid var(--line);
  background:var(--card);font-weight:700;font-size:1.05rem;cursor:pointer;
  box-shadow:0 4px 0 var(--shadow-ink);transition:transform .08s ease, box-shadow .08s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;touch-action:manipulation;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow-ink)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent);color:#1B1D3A}
.btn-success{background:var(--success);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.btn-small{min-height:44px;padding:8px 14px;font-size:.95rem}
.btn-block{width:100%}
.icon-btn{min-width:48px;min-height:48px;border-radius:50%;border:3px solid var(--line);background:var(--card);cursor:pointer;font-size:1.3rem;box-shadow:0 3px 0 var(--shadow-ink)}

/* ============================ TOPPLINJE ============================ */
#topbar{position:sticky;top:0;z-index:40;background:var(--primary);color:#fff;border-bottom:3px solid var(--line)}
#topbar .wrap{padding:10px 16px;display:flex;align-items:center;gap:12px}
.tb-avatar{background:none;border:0;padding:0;cursor:pointer}
.tb-name{font-weight:700;line-height:1.1}
.tb-level{font-size:.8rem;opacity:.9}
.tb-xp{flex:1;min-width:90px}
.xpbar{height:14px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;border:2px solid var(--line)}
.xpbar>span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.tb-xptext{font-size:.72rem;opacity:.95;margin-top:2px}
.tb-namebox{min-width:0}
@media(max-width:520px){.tb-namebox{display:none}.tb-chip{padding:6px 8px;font-size:.85rem}}
.tb-chip{background:rgba(0,0,0,.22);border-radius:99px;padding:6px 10px;font-weight:700;white-space:nowrap;font-size:.95rem}

/* ============================ AVATAR / RAMMER ============================ */
.avatar{--size:46px;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;
  font-size:calc(var(--size)*.58);background:var(--card);border:3px solid var(--line);overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.big{--size:110px}
.frame-fr_gull{border-color:#D9A400;box-shadow:0 0 0 3px #FFE38A}
.frame-fr_regnbue{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(#ff5d5d,#ffb020,#3fd07a,#3aa0ff,#9b5cff,#ff5d5d) border-box}
.frame-fr_stjerne{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent),0 0 14px var(--accent)}

/* ============================ BUNNMENY ============================ */
#bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--card);border-top:3px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
#bottomnav ul{list-style:none;margin:0 auto;padding:6px;display:grid;grid-template-columns:repeat(5,1fr);max-width:880px}
#bottomnav button{width:100%;min-height:64px;background:none;border:0;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
#bottomnav button span{font-size:1.5rem;line-height:1}
#bottomnav button[aria-current="page"]{background:var(--accent);color:#1B1D3A}
.nav-dot{position:relative}
.nav-dot::after{content:"";position:absolute;top:6px;right:22%;width:12px;height:12px;border-radius:50%;background:var(--danger);border:2px solid var(--card)}

/* ============================ STARTSKJERM ============================ */
.start{min-height:100vh;display:grid;place-items:center;padding:24px 16px 40px}
.start-card{max-width:520px;width:100%;padding:28px 24px;text-align:left}
.logo-badge{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:default;color:inherit}
.logo-lens{width:64px;height:64px;border-radius:50%;background:var(--accent);border:4px solid var(--line);display:grid;place-items:center;font-size:2rem;position:relative}
.logo-lens::after{content:"";position:absolute;width:30px;height:10px;background:var(--line);border-radius:6px;right:-20px;bottom:-4px;transform:rotate(45deg)}
.start h1{margin-top:18px}
.start .subtitle{font-size:1.15rem;color:var(--ink-soft)}
.field label{display:block;font-weight:700;margin-bottom:6px}
.input{width:100%;min-height:var(--tap);padding:10px 14px;border-radius:12px;border:3px solid var(--line);background:var(--card);font-size:1.1rem}
textarea.input{min-height:120px;resize:vertical;line-height:1.5}
.avatar-pick{display:flex;gap:10px;flex-wrap:wrap}
.avatar-pick button{width:64px;height:64px;font-size:2rem;border-radius:50%;border:3px solid var(--line);background:var(--card);cursor:pointer}
.avatar-pick button[aria-pressed="true"]{background:var(--accent);box-shadow:0 0 0 4px var(--primary)}

/* ============================ SAKSROMMET (HUB) ============================ */
.npc{display:flex;gap:12px;align-items:flex-start}
.npc-face{width:60px;height:60px;border-radius:50%;background:var(--card);border:3px solid var(--line);display:grid;place-items:center;font-size:2rem;flex:none}
.bubble{position:relative;background:var(--card);border:3px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:3px 3px 0 var(--shadow-ink)}
.bubble::before{content:"";position:absolute;left:-12px;top:18px;border:9px solid transparent;border-right-color:var(--line)}
.bubble strong{display:block;font-size:.85rem;color:var(--ink-soft)}
.case-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* Saksmappen: en fane øverst + papirfarge. Mappens form ER statusen. */
.case{position:relative;text-align:left;cursor:pointer;background:var(--paper);border:3px solid var(--line);border-radius:4px 14px 14px 14px;
  padding:26px 14px 14px;min-height:150px;box-shadow:4px 4px 0 var(--shadow-ink);display:flex;flex-direction:column;gap:6px;transition:transform .12s ease}
.case::before{content:"";position:absolute;top:-14px;left:-3px;width:46%;height:14px;background:var(--paper);border:3px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0}
.case:hover{transform:rotate(-1deg) translateY(-2px)}
.case-no{font-family:var(--font-stamp);font-size:.95rem;color:var(--ink-soft)}
.case-title{font-weight:800;font-size:1.05rem;line-height:1.25}
.case-state{margin-top:auto;font-weight:700;font-size:.85rem}
.case.locked{background:var(--card-2);cursor:not-allowed;filter:grayscale(.6)}
.case.locked::before{background:var(--card-2)}
.case .stamp-mini{position:absolute;right:10px;top:18px;font-family:var(--font-stamp);color:var(--success);border:3px solid var(--success);padding:2px 8px;transform:rotate(12deg);border-radius:6px;font-size:.9rem;background:color-mix(in srgb,var(--paper) 70%,transparent)}
.case.current{outline:4px dashed var(--primary);outline-offset:4px}

.next-reward{display:flex;align-items:center;gap:12px}
.next-reward .token{font-size:2rem}

/* ============================ KAPITTEL / LESING ============================ */
.reader{background:var(--paper);border:3px solid var(--line);border-radius:6px 18px 18px 18px;padding:24px 20px;box-shadow:5px 5px 0 var(--shadow-ink);position:relative}
.reader-head{margin-bottom:14px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.case-label{font-family:var(--font-stamp);font-size:1rem;color:var(--ink-soft)}
.story{font-size:1.2rem;line-height:1.85;letter-spacing:.012em;word-spacing:.08em;max-width:62ch;text-align:left}
.story p{margin:0 0 1.1em}
.clue{font:inherit;background:none;border:0;padding:0 2px;cursor:pointer;color:inherit;border-bottom:3px dotted var(--primary);border-radius:3px}
.clue:hover{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.clue.found{background:var(--accent);color:#1B1D3A;border-bottom-color:transparent;font-weight:700}
.hard-word{font-weight:700;white-space:nowrap}
.speak-btn{font-size:1rem;min-width:40px;min-height:40px;margin-left:4px;border-radius:50%;border:2px solid var(--line);background:var(--card);cursor:pointer;vertical-align:middle}
.clue-meter{display:flex;gap:8px;align-items:center;font-weight:700}
.clue-meter .pip{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);display:grid;place-items:center;background:var(--card);font-size:.9rem}
.clue-meter .pip.on{background:var(--accent)}
.question{margin-top:22px}
.answers{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.answers{grid-template-columns:1fr 1fr}}
.answer{text-align:left;min-height:64px;padding:12px 16px;border-radius:14px;border:3px solid var(--line);background:var(--card);font-size:1.1rem;font-weight:600;cursor:pointer;display:flex;gap:12px;align-items:center;box-shadow:0 4px 0 var(--shadow-ink)}
.answer .letter{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.answer.tried{opacity:.5;box-shadow:none;cursor:default}
.answer.tried .letter{background:var(--ink-soft)}
.answer.right{background:var(--success);color:#fff}
.answer.right .letter{background:#fff;color:var(--success)}
.encourage{margin-top:16px}
.solved{margin-top:22px;position:relative;padding:22px 18px;background:var(--card);border:3px solid var(--line);border-radius:18px}
.stamp{font-family:var(--font-stamp);font-size:2.6rem;color:var(--success);border:5px solid var(--success);display:inline-block;padding:2px 18px;border-radius:10px;transform:rotate(-8deg);letter-spacing:.08em}
.stamp.animate{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{0%{transform:scale(3) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.gain-list{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.gain{background:var(--card-2);border:2px solid var(--line);border-radius:99px;padding:6px 14px;font-weight:700}

/* ============================ SAMLEKORT / BELØNNINGER ============================ */
.rarity-common{--rc:var(--r-common)}
.rarity-rare{--rc:var(--r-rare)}
.rarity-epic{--rc:var(--r-epic)}
.rarity-legendary{--rc:var(--r-legendary)}
.item-tile{background:var(--card);border:3px solid var(--line);border-radius:16px;padding:14px;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.item-tile .art{width:84px;height:84px;display:grid;place-items:center;font-size:3rem;border-radius:14px}
.item-tile .art img{width:100%;height:100%;object-fit:contain}
.item-tile .rarity{font-size:.75rem;font-weight:800;color:var(--rarity-text);background:var(--rc);border-radius:99px;padding:2px 10px}
.item-tile.locked .art{filter:grayscale(1) brightness(.2);opacity:.35}
.item-tile.locked{background:var(--card-2)}
.item-tile .title{font-weight:800;line-height:1.2}
.item-tile .desc{font-size:.85rem;color:var(--ink-soft);line-height:1.35}
/* Samlekort: stående kort med rarity-ramme */
.card{aspect-ratio:5/7;border-radius:16px;border:4px solid var(--rc);background:linear-gradient(160deg,var(--card),var(--card-2));padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;box-shadow:4px 4px 0 var(--shadow-ink);position:relative;overflow:hidden}
.card .art{font-size:3.6rem;flex:1;display:grid;place-items:center;width:100%}
.card .art img{max-height:120px;object-fit:contain}
.card .name{font-weight:800;line-height:1.2}
.card .rarity{font-size:.72rem;font-weight:800;color:var(--rarity-text);background:var(--rc);border-radius:99px;padding:2px 10px;margin-top:4px}
.card.back{background:repeating-linear-gradient(45deg,var(--primary) 0 12px,var(--primary-ink) 12px 24px);border-color:var(--line)}
.card.back .art{color:#fff;font-size:2.6rem}
/* Legendarisk: holografisk glans som glir over kortet */
.card.rarity-legendary::after,.item-tile.rarity-legendary:not(.locked)::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 45%,rgba(255,215,90,.5) 50%,transparent 65%);
  background-size:250% 100%;animation:holo 3.2s linear infinite;mix-blend-mode:overlay}
.card.rarity-legendary{box-shadow:4px 4px 0 var(--shadow-ink),0 0 18px color-mix(in srgb,var(--r-legendary) 70%,transparent)}
@keyframes holo{0%{background-position:150% 0}100%{background-position:-100% 0}}
.dup{position:absolute;top:6px;right:8px;background:var(--accent);color:#1B1D3A;border-radius:99px;font-size:.75rem;font-weight:800;padding:2px 8px;border:2px solid var(--line)}

/* Klistremerkebok: sider med plasser */
.stickerbook{background:var(--paper);border:3px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.slot{aspect-ratio:1;border-radius:50%;border:3px dashed color-mix(in srgb,var(--ink) 35%,transparent);display:grid;place-items:center;font-size:2.4rem;position:relative}
.slot.filled{border:3px solid var(--line);background:var(--card);box-shadow:3px 3px 0 var(--shadow-ink)}
.slot.filled:nth-child(odd){transform:rotate(-6deg)}
.slot.filled:nth-child(even){transform:rotate(5deg)}
.slot img{width:78%;height:78%;object-fit:contain}
.slot .q{font-size:1.4rem;color:var(--ink-soft)}

/* Trofeskap: hyller */
.shelf{background:linear-gradient(var(--card),var(--card)) padding-box;border:3px solid var(--line);border-radius:18px;padding:16px 16px 0;display:grid;gap:10px 14px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.shelf .trophy{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:16px;border-bottom:8px solid #9C6B3A;gap:4px}
.shelf .trophy .art{font-size:3rem;width:72px;height:72px;display:grid;place-items:center}
.shelf .trophy.locked .art{filter:grayscale(1) brightness(.2);opacity:.3}

/* Fremdriftslinjer */
.progress{height:14px;border-radius:99px;background:var(--card-2);border:2px solid var(--line);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--secondary);transition:width .5s ease}
.quest{display:flex;gap:14px;align-items:center}
.quest .qicon{font-size:2rem;width:56px;height:56px;border-radius:14px;background:var(--card-2);display:grid;place-items:center;flex:none;border:2px solid var(--line)}
.quest .qbody{flex:1;min-width:0}
.quest.done{background:color-mix(in srgb,var(--success) 12%,var(--card))}

.streak-row{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px}
.streak-step{flex:none;width:76px;text-align:center;border:3px solid var(--line);border-radius:14px;padding:8px 4px;background:var(--card-2);font-weight:700;font-size:.85rem}
.streak-step.reached{background:var(--accent);color:#1B1D3A}
.streak-step .big{font-size:1.5rem;display:block}
.streak-flame{font-size:2.6rem}

.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:4px 2px 12px}   /* brytes over flere linjer i stedet for å rulle sidelengs */
.tabs button{flex:none;min-height:48px;padding:8px 16px;border-radius:99px;border:3px solid var(--line);background:var(--card);font-weight:700;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--primary);color:#fff}

.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.stat{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px}
.stat b{display:block;font-size:1.6rem;line-height:1.1}
.stat span{font-size:.85rem;color:var(--ink-soft)}

.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap)}
.switch input{width:52px;height:30px;flex:none;accent-color:var(--primary)}

/* ============================ MODALER / OVERLEGG ============================ */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,12,34,.62);z-index:100;display:grid;place-items:center;padding:16px;animation:fade .2s ease both}
.modal{background:var(--card);border:3px solid var(--line);border-radius:22px;box-shadow:6px 6px 0 var(--shadow-ink);width:100%;max-width:520px;max-height:90vh;overflow:auto;padding:22px;animation:pop .28s cubic-bezier(.2,1.4,.4,1) both}
.modal.wide{max-width:980px;padding:0}
.modal .modal-close{float:right}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.celebrate{text-align:center}
.celebrate .burst{font-size:4.5rem;display:inline-block;animation:burst .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes burst{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
.levelup-num{font-size:5rem;font-weight:800;color:var(--primary);line-height:1;animation:burst .7s cubic-bezier(.2,1.6,.4,1) both}
/* Kortåpning: kortet snur seg */
.flip{perspective:900px;width:190px;margin:10px auto 16px}
.flip-inner{position:relative;transition:transform .8s cubic-bezier(.3,1.3,.4,1);transform-style:preserve-3d}
.flip.open .flip-inner{transform:rotateY(180deg)}
.flip .face{backface-visibility:hidden}
.flip .face.front{transform:rotateY(180deg);position:absolute;inset:0}

#toast-root{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,440px);pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:pop .25s ease both;pointer-events:auto}
#toast-root .toast{background:#1B1D3A;color:#fff}

/* Konfetti-partikler */
#fx-root{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
.confetti{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall var(--dur) cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}

#cheat-btn{position:fixed;right:14px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:45;background:var(--warning);color:#fff;border:3px solid var(--line);border-radius:99px;min-height:52px;padding:8px 16px;font-weight:800;box-shadow:0 4px 0 var(--shadow-ink);cursor:pointer}

/* ============================ ADMIN ============================ */
.admin{display:grid;grid-template-columns:1fr;min-height:70vh}
@media(min-width:760px){.admin{grid-template-columns:minmax(210px,auto) minmax(0,1fr)}}
.admin-side{background:var(--primary);color:#fff;padding:16px;display:flex;flex-direction:column;gap:6px}
@media(max-width:759px){.admin-side{flex-direction:row;overflow-x:auto}}
.admin-side button{background:transparent;color:#fff;border:2px solid transparent;border-radius:12px;min-height:46px;padding:8px 12px;text-align:left;font-weight:700;white-space:nowrap;cursor:pointer;white-space:nowrap}
.admin-side button[aria-selected="true"]{background:rgba(255,255,255,.18);border-color:#fff}
.admin-main{padding:18px;overflow:auto;max-height:85vh}
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent);text-align:left;vertical-align:top}
.table-wrap{overflow-x:auto}
.form-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.form-grid.two{grid-template-columns:1fr 1fr}}
.pill{display:inline-block;border-radius:99px;padding:2px 10px;font-size:.78rem;font-weight:700;background:var(--card-2);border:1px solid var(--line)}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================ MELDINGER (status / viktig) ============================ */
.announce-slot:empty{display:none}
.announce-slot{display:grid;gap:12px;margin-bottom:14px}
.announce{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 48px 14px 14px;border:3px solid var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--shadow-ink);background:var(--card);text-align:left}
.announce-info{background:color-mix(in srgb,var(--primary) 12%,var(--card))}
.announce-warning{background:color-mix(in srgb,var(--accent) 30%,var(--card))}
.announce-success{background:color-mix(in srgb,var(--success) 14%,var(--card))}
.announce-icon{font-size:2rem;line-height:1;flex:none}
.announce-body b{display:block;font-size:1.1rem;line-height:1.25}
.announce-body p{margin:4px 0 0}
.announce-date{display:inline-block;margin-top:6px;font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.announce-close{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--card);cursor:pointer;font-weight:800}
.tb-bell{border:0;color:#fff;cursor:pointer;font:inherit;font-weight:700}

/* ============================ GAVER ============================ */
.announce-gift{background:color-mix(in srgb,#FF7AB6 20%,var(--card))}
.gift-btn{animation:wiggle 2.4s ease-in-out infinite}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
.gift-box{font-size:5.5rem;display:inline-block;animation:shake .9s ease-in-out both}
@keyframes shake{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-12deg) scale(1.05)}40%{transform:rotate(12deg) scale(1.1)}60%{transform:rotate(-8deg) scale(1.15)}80%{transform:rotate(6deg) scale(1.2)}}
.gift-content{display:none}
.gift-reveal.opened .gift-box{display:none}
.gift-reveal.opened .gift-content{display:block;animation:pop .35s cubic-bezier(.2,1.4,.4,1) both}

/* ============================ SERVERSTATUS I ADMIN ============================ */
.sync-status{margin:0 56px 14px 0;padding:8px 12px;border-radius:12px;background:var(--card-2);font-size:.9rem;font-weight:600}
.sync-status.on{border-left:6px solid var(--success)}

/* ============================ KLASSETRINN ============================ */
.grade-pick{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.grade-pick button{min-height:64px;border-radius:14px;border:3px solid var(--line);background:var(--card);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;padding:4px}
.grade-pick button b{font-size:1.5rem}
.grade-pick button span{font-size:.62rem;font-weight:700;color:var(--ink-soft)}
.grade-pick button[aria-pressed="true"]{background:var(--accent);box-shadow:0 0 0 3px var(--primary)}
.grade-pick button[aria-pressed="true"] span{color:#1B1D3A}
.grade-pill{cursor:pointer;font-size:.9rem;padding:6px 12px;min-height:40px}
.big-read{margin-bottom:14px;font-size:1.2rem;min-height:64px}
/* 1.–2. klasse: ekstra luft mellom linjer og ord */
.reader.grade-1 .story,.reader.grade-2 .story{line-height:2.05;word-spacing:.16em}

/* ============================ EVENTS ============================ */
.event-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;padding:16px;border:3px solid var(--line);border-radius:18px;box-shadow:4px 4px 0 var(--shadow-ink);background:var(--card);color:var(--ink)}
.event-card .event-icon{font-size:2.8rem;line-height:1;flex:none}
.event-card .event-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.event-card .event-text b{font-size:1.15rem}
.event-card .event-meta,.event-hero .event-meta{font-weight:700;font-size:.88rem;color:var(--ink-soft)}
.event-card .event-go{font-size:1.4rem;font-weight:800}
.event-hero{display:flex;gap:16px;align-items:center;padding:20px;border:3px solid var(--line);border-radius:20px;box-shadow:5px 5px 0 var(--shadow-ink);background:var(--card)}
.event-hero-icon{font-size:4rem;line-height:1;flex:none}
.event-hero h1{margin:0 0 4px;font-size:clamp(1.5rem,5vw,2.2rem)}
.event-hero p{margin:0}
.event-quests{margin:0;padding-left:1.2em;line-height:1.9}
.theme-halloween{background:color-mix(in srgb,#FF8A1F 22%,var(--card))}
.theme-jul{background:color-mix(in srgb,#C8263E 14%,var(--card))}
.theme-paske{background:color-mix(in srgb,#FFD83D 30%,var(--card))}
.theme-sommer{background:color-mix(in srgb,#27B5D6 20%,var(--card))}
.quest-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 12px;padding:6px;border:2px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:10px}
.quest-pick label{display:flex;gap:6px;align-items:center;font-size:.9rem;min-height:32px}

/* Fargetema per event (bare lys modus endrer bakgrunnen, så kontrasten holder i mørk modus) */
@media (prefers-color-scheme: light){
  :root[data-event="halloween"]:not([data-theme="dark"]){--bg:#F7E4CF;--bg-dot:#EBC6A0;--primary:#6A2C91;--primary-ink:#4B1E68}
  :root[data-event="jul"]:not([data-theme="dark"]){--bg:#E4F1E8;--bg-dot:#C4E0CD;--primary:#B3263A;--primary-ink:#861B2B}
  :root[data-event="paske"]:not([data-theme="dark"]){--bg:#FFF6CF;--bg-dot:#F2E29C;--primary:#6B45B8;--primary-ink:#4E3289}
  :root[data-event="sommer"]:not([data-theme="dark"]){--bg:#D9F2F6;--bg-dot:#B3E1EA;--primary:#0A6A87;--primary-ink:#074D62}
}
:root[data-event="halloween"]{--accent:#FF9F1C}
/* Svevende dekor bak innholdet */
#event-decor{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#event-decor span{position:absolute;top:-10vh;opacity:.32;animation:drift linear infinite}
@keyframes drift{0%{transform:translate(0,-10vh) rotate(0)}50%{transform:translate(4vw,55vh) rotate(160deg)}100%{transform:translate(-2vw,120vh) rotate(320deg)}}
@media (prefers-reduced-motion: reduce){#event-decor span{animation:none;top:auto;bottom:4vh}}

/* ============================ ELEVINNLOGGING / STARTSKJERM ============================ */
.start-choice{min-height:72px;font-size:1.25rem;justify-content:flex-start;padding-left:22px}
.start-choice span{font-size:1.8rem}
.code-input{text-transform:uppercase;letter-spacing:.18em;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;text-align:center}
.number-input{letter-spacing:.5em;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:2rem;text-align:center;min-height:72px}
.form-error{color:var(--danger);font-weight:700;margin:0;min-height:1.4em}
.start-footer{margin:16px 0 0;text-align:center}
.btn-ghost-link{background:none;border:0;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.9rem;min-height:40px}

/* ============================ LÆRERPORTAL ============================
   Rolig, profesjonell stil: ingen klistremerke-skygger, nøytrale flater,
   tydelig typografi og tabeller. Egne tokens (--tp-*) med mørk variant. */
body.teacher-mode{background:var(--tp-bg);background-image:none;padding-bottom:0}
body.teacher-mode #event-decor{display:none}
:root{--tp-bg:#F4F6FA;--tp-surface:#FFFFFF;--tp-border:#DDE3EC;--tp-text:#1A2233;--tp-muted:#5B6576;--tp-accent:#3D3AB8;--tp-accent-soft:#ECEBFB;
  --tp-ok:#1B7F45;--tp-ok-soft:#E3F4EA;--tp-warn:#9A5A00;--tp-warn-soft:#FFF1D6;--tp-danger:#B8324A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tp-bg:#12162B;--tp-surface:#1C2140;--tp-border:#2E3560;--tp-text:#EEF1FF;--tp-muted:#A9B0D0;--tp-accent:#8D8BFF;--tp-accent-soft:#282D5A;
  --tp-ok:#4CC486;--tp-ok-soft:#173A2A;--tp-warn:#F0B55A;--tp-warn-soft:#3A2E17;--tp-danger:#FF7F95}}
.tp{color:var(--tp-text);font-size:1rem;line-height:1.5;min-height:100vh}
.tp h1{font-size:1.6rem;margin:0 0 4px;letter-spacing:-.02em}
.tp h2{font-size:1.1rem;margin:0 0 10px}
.tp-top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;background:var(--tp-surface);border-bottom:1px solid var(--tp-border)}
.tp-brand{font-weight:800;font-size:1.05rem;display:flex;gap:8px;align-items:center}
.tp-brand span{font-weight:600;color:var(--tp-muted);padding-left:8px;border-left:1px solid var(--tp-border)}
.tp-user{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.92rem}
.tp-main{max-width:1180px;margin:0 auto;padding:20px}
.tp-crumbs{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--tp-muted);margin-bottom:12px}
.tp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tp-card{background:var(--tp-surface);border:1px solid var(--tp-border);border-radius:12px;padding:18px;margin-bottom:16px;color:var(--tp-text)}
.tp-narrow{max-width:460px}
.tp-stack>*+*{margin-top:12px}
.tp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tp-cols{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:860px){.tp-cols{grid-template-columns:minmax(280px,360px) 1fr}}
.tp-muted{color:var(--tp-muted)}
.tp-small-text{font-size:.86rem}
.tp-mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.tp-btn{min-height:40px;padding:8px 16px;border-radius:8px;border:1px solid var(--tp-border);background:var(--tp-surface);color:var(--tp-text);font-weight:600;cursor:pointer;font-size:.95rem}
.tp-btn:hover{border-color:var(--tp-accent)}
.tp-primary{background:var(--tp-accent);border-color:var(--tp-accent);color:#fff}
.tp-small{min-height:34px;padding:4px 12px;font-size:.88rem}
.tp-danger-btn{color:var(--tp-danger);border-color:var(--tp-danger)}
.tp-link{background:none;border:0;padding:4px 2px;color:var(--tp-accent);font-weight:600;cursor:pointer;font-size:inherit;min-height:32px}
.tp-link.tp-danger{color:var(--tp-danger)}
.tp-field{display:flex;flex-direction:column;gap:4px;font-size:.9rem;font-weight:600}
.tp-field.tp-inline{flex-direction:row;align-items:center;gap:8px}
.tp-input{min-height:42px;padding:8px 12px;border:1px solid var(--tp-border);border-radius:8px;background:var(--tp-surface);color:var(--tp-text);font-size:1rem;font-weight:400;width:100%}
textarea.tp-input{min-height:140px;resize:vertical}
.tp-compact{min-height:34px;padding:4px 8px;width:auto}
.tp-error{color:var(--tp-danger);font-weight:600;margin:0;min-height:1.2em;font-size:.9rem}
.tp-alert{background:var(--tp-warn-soft);color:var(--tp-warn);padding:10px 14px;border-radius:8px;font-weight:600}
.tp-flash{background:var(--tp-ok-soft);border:1px solid var(--tp-ok);border-radius:10px;padding:12px 14px;margin-bottom:16px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tp-auth{display:grid;place-items:center;padding:24px}
.tp-auth-card{width:100%;max-width:420px}
.tp-auth-card .tp-brand{margin-bottom:18px}
.tp-class{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;font:inherit}
.tp-class:hover{border-color:var(--tp-accent);box-shadow:0 4px 14px rgba(20,30,60,.08)}
.tp-class-name{font-size:1.4rem;font-weight:800}
.tp-code{font-size:.88rem;color:var(--tp-muted);margin-top:6px}
.tp-meter{height:8px;background:var(--tp-accent-soft);border-radius:99px;overflow:hidden}
.tp-meter span{display:block;height:100%;background:var(--tp-ok)}
.tp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--tp-border);margin-bottom:16px;overflow-x:auto}
.tp-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font-weight:600;color:var(--tp-muted);cursor:pointer;white-space:nowrap;font-size:.95rem}
.tp-tabs button[aria-selected="true"]{color:var(--tp-text);border-bottom-color:var(--tp-accent)}
.tp-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:16px}
.tp-kpi{background:var(--tp-surface);border:1px solid var(--tp-border);border-radius:10px;padding:12px 14px}
.tp-kpi b{display:block;font-size:1.35rem}
.tp-kpi span{font-size:.82rem;color:var(--tp-muted)}
.tp-toolbar{justify-content:space-between;margin-bottom:10px}
.tp-check{display:flex;gap:8px;align-items:center;font-size:.92rem}
.tp-table-wrap{overflow-x:auto;background:var(--tp-surface);border:1px solid var(--tp-border);border-radius:10px}
.tp-card .tp-table-wrap{border:0}
.tp-table{width:100%;border-collapse:collapse;font-size:.92rem}
.tp-table th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tp-muted);padding:10px 12px;border-bottom:1px solid var(--tp-border);white-space:nowrap}
.tp-table td{padding:10px 12px;border-bottom:1px solid var(--tp-border);vertical-align:middle}
.tp-table tbody tr:last-child td{border-bottom:0}
.tp-table tr[data-action]{cursor:pointer}
.tp-table tr[data-action]:hover,.tp-table tr[data-action]:focus-visible{background:var(--tp-accent-soft)}
.tp-dim td{color:var(--tp-muted)}
.tp-sort{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.tp-actions{white-space:nowrap}
.tp-tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--tp-accent-soft);color:var(--tp-text);margin-right:4px}
.tp-tag.tp-warn{background:var(--tp-warn-soft);color:var(--tp-warn)}
.tp-tag.tp-ok{background:var(--tp-ok-soft);color:var(--tp-ok)}
.tp-insights{margin:0;padding-left:1.2em;line-height:1.8}
.tp-activity{list-style:none;margin:0;padding:0;font-size:.92rem;line-height:1.9}
.tp-danger-zone{border-color:var(--tp-danger)}
/* Innloggingskort */
.tp-login-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tp-login-card{border:2px dashed var(--tp-border);border-radius:12px;padding:14px;background:var(--tp-surface);break-inside:avoid;page-break-inside:avoid}
.tp-lc-brand{font-size:.8rem;font-weight:700;color:var(--tp-muted)}
.tp-lc-name{font-size:1.6rem;font-weight:800;margin:4px 0 8px}
.tp-lc-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--tp-border);padding:6px 0}
.tp-lc-row b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.2rem;letter-spacing:.08em}
.tp-lc-num{font-size:1.7rem!important}
.tp-lc-url{font-size:.72rem;color:var(--tp-muted);word-break:break-all;margin-top:6px}
@media print{
  body{background:#fff!important;padding:0!important}
  .tp-top,.tp-crumbs,.tp-head,.tp-tabs,.no-print,#topbar,#bottomnav,#toast-root,#cheat-btn,.tp-flash{display:none!important}
  .tp-main{padding:0;max-width:none}
  .tp-login-cards{grid-template-columns:repeat(3,1fr);gap:8px}
  .tp-login-card{border:1.5px dashed #999;color:#000;background:#fff}
}

/* ============================ BILDE I SAKEN ============================ */
.case-figure{margin:0 0 16px}
.case-figure img{width:100%;max-height:360px;object-fit:cover;border-radius:14px;border:3px solid var(--line)}

/* ============================ TILLEGGSOPPGAVER ============================ */
.task-count{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:0 0 4px}
.task{margin-top:22px;padding-top:18px;border-top:3px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
.task-done{margin:0 0 6px;font-weight:700;color:var(--success)}
.order-placed{margin:0 0 12px;padding-left:1.6em;display:grid;gap:8px}
.order-placed li{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600}
.order-placed li::marker{font-weight:800}
.order-placed .order-empty{border-style:dashed;background:transparent;font-weight:400}
.order-pool{display:grid;gap:10px;margin-bottom:12px}
.tf-list{display:grid;gap:10px;margin-bottom:12px}
.tf-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.tf-row.tf-wrong{border-color:var(--warning);box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 35%,transparent)}
.tf-text{flex:1 1 220px;font-weight:600}
.tf-btns{display:flex;gap:8px}
.story.word-mode .word{font:inherit;color:inherit;background:none;border:0;padding:0 1px;margin:0;cursor:pointer;border-radius:4px;border-bottom:2px solid color-mix(in srgb,var(--primary) 45%,transparent)}
.story.word-mode .word:hover{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.story.word-mode .word.word-right{background:var(--success);color:#fff}
.skip-to-story{color:var(--primary);font-weight:700}

/* ============================ TILDELINGER OG KLASSEMÅL (ELEV) ============================ */
.assign-card{background:var(--card);border:3px solid var(--primary);border-radius:18px;padding:16px;box-shadow:4px 4px 0 var(--shadow-ink)}
.assign-card.assign-done{border-color:var(--success)}
.assign-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.assign-head h2{margin:0;font-size:1.2rem}
.assign-icon{font-size:2rem;line-height:1}
.assign-from{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}
.assign-note{background:var(--card-2);border-radius:10px;padding:8px 12px;margin:0 0 10px;font-style:italic}
.assign-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.goal-card{display:flex;gap:14px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px}
.goal-card.goal-reached{background:color-mix(in srgb,var(--success) 12%,var(--card))}
.goal-icon{font-size:2.2rem}

/* ============================ LÆRERPORTAL: GRAFER, VALG ============================ */
.tp-chart{margin:0}
.tp-chart figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tp-chart svg{width:100%;height:auto;max-height:260px;display:block}
.tp-legend{font-size:.82rem;color:var(--tp-muted);display:flex;align-items:center;gap:6px}
.tp-key{display:inline-block;width:14px;height:10px;border-radius:2px}
.tp-key-bar{background:var(--tp-accent)}
.tp-key-line{height:3px;background:var(--tp-ok);margin-left:8px}
.tp-bar{fill:var(--tp-accent);opacity:.85}
.tp-line{fill:none;stroke:var(--tp-ok);stroke-width:2.5}
.tp-dot{fill:var(--tp-surface);stroke:var(--tp-ok);stroke-width:2.5}
.tp-grid{stroke:var(--tp-border);stroke-width:1}
.tp-axis{fill:var(--tp-muted);font-size:11px}
.tp-chart details{margin-top:8px;font-size:.9rem}
.tp-pick{border:1px solid var(--tp-border);border-radius:8px;padding:8px 10px;display:grid;gap:4px;font-weight:400}
.tp-pick-head{margin:8px 0 2px;font-weight:700;font-size:.85rem;color:var(--tp-muted)}
.tp-pick-head:first-child{margin-top:0}
.tp-goal b{font-size:1.05rem}
.tp-rowlink{padding:0;min-height:0;color:var(--tp-text);text-align:left}
.tp-rowlink:hover{text-decoration:underline}
fieldset.tp-field{border:0;padding:0;margin:0}
fieldset.tp-field legend{font-weight:600;font-size:.9rem;margin-bottom:4px;padding:0}


/* ============================ UNIVERSELL UTFORMING (rettelser etter gjennomgang) ============================ */
.assign-from,.skip-to-story{color:var(--primary-text)}
.task-done{color:var(--success-text)}
.grade-pick button[aria-pressed="true"],.grade-pick button[aria-pressed="true"] b{color:#1B1D3A}
/* Smale skjermer (320 px, WCAG 1.4.10 reflow) */
@media (max-width:420px){
  .start{padding:16px 10px 32px}
  .start-card{padding:22px 16px}
  .start h1,.start-card h1{font-size:1.75rem;overflow-wrap:anywhere}
  .grade-pick{grid-template-columns:repeat(4,1fr)}
  .avatar-pick button{width:56px;height:56px}
}
.tp-brand{flex-wrap:wrap}
.tp-cols>*,.tp-card,.tp-grid>*{min-width:0}
/* Lærerportal: klikkflater minst 24×24 (WCAG 2.5.8) og kontrast */
.tp input[type=checkbox],.tp input[type=radio]{width:24px;height:24px;flex:none;accent-color:var(--tp-accent)}
.tp-sort{min-height:28px;padding:4px 0}
.tp-rowlink{min-height:28px}
:root{--tp-ok:#166B3A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tp-primary{color:#12162B}}
:root[data-theme="dark"] .tp-primary{color:#12162B}
/* «Mindre bevegelse» – samme effekt som systeminnstillingen, men kan slås på i spillet (WCAG 2.2.2) */
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
:root[data-motion="reduce"] #event-decor{display:none}

/* ---------- Historier (eventyr) og utgivelse ---------- */
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.story-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;padding:16px;border:3px solid var(--line);border-radius:18px;box-shadow:4px 4px 0 var(--shadow-ink);background:var(--card);color:var(--ink);font:inherit}
.story-card:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow-ink)}
.story-card:focus-visible{outline:4px solid var(--focus, #1d4ed8);outline-offset:3px}
.story-card.story-current{border-color:var(--accent, #d97706)}
.story-card.story-done{background:var(--card-2)}
.story-card .story-icon{font-size:2.8rem;line-height:1;flex:none}
.story-card .story-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.story-card .story-text b{font-size:1.15rem}
.story-card .story-meta{font-weight:700;font-size:.88rem;color:var(--ink-soft)}
.story-card .event-go{font-size:1.4rem;font-weight:800}
.story-order{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
.story-order li{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.stage-pill{letter-spacing:.04em;margin-right:4px}
.stage-pill.stage-alfa{background:#fde7f3;border-color:#9d174d;color:#831843}
.stage-pill.stage-beta{background:#fff4d6;border-color:#92400e;color:#78350f}
.case .stage-pill{align-self:flex-start;margin-top:4px}
@media (prefers-reduced-motion: reduce){.story-card:hover{transform:none}}

/* ---------- Fagvelger (lesing / matte) og regneoppgaver ---------- */
.subject-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.subject-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border:3px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:3px 3px 0 var(--shadow-ink);cursor:pointer;font:inherit;text-align:left;min-height:44px}
.subject-btn .subject-icon{font-size:1.8rem;line-height:1}
.subject-btn .muted{font-size:.85rem}
.subject-btn[aria-pressed="true"],.subject-btn.subject-on{border-color:var(--accent,#d97706);background:var(--card-2)}
.subject-btn:focus-visible{outline:4px solid var(--focus,#1d4ed8);outline-offset:3px}
.math-list{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.math-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.math-q{font-weight:800;font-size:1.15rem;min-width:120px}
.math-input{max-width:130px;font-size:1.15rem;font-weight:700;text-align:center}
.math-row.math-wrong .math-input{border-color:#b91c1c}
.math-flag{font-weight:700;color:#b91c1c;font-size:.9rem}
.warn-line{font-weight:800;color:#b45309}

/* ---------- Lærerportalen: tildeling per historie ---------- */
.tp-pick-groups{padding:6px}
.tp-group{border:1px solid var(--tp-border);border-radius:8px;margin:0 0 6px;background:var(--tp-bg,#fff)}
.tp-group>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 10px;cursor:pointer;list-style-position:inside}
.tp-group-head{font-size:.95rem}
.tp-group-head input{width:20px;height:20px}
.tp-group-body{padding:0 10px 10px 30px}
.tp-group-body .tp-check{align-items:flex-start;padding:3px 0}
.tp-group-body .tp-check input{margin-top:3px}

/* ---------- Fokus-merkelapper ---------- */
.focus-line{font-size:.9rem}
.focus-pick{display:flex;flex-wrap:wrap;gap:6px 14px}
.focus-opt{display:flex;align-items:center;gap:6px;font-size:.95rem;min-height:32px}
.focus-opt input{width:20px;height:20px}
.tp-focus{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.tp-chip{display:inline-block;font-size:.72rem;font-weight:600;padding:1px 7px;border-radius:99px;background:var(--tp-soft,#eef2ff);border:1px solid var(--tp-border)}
.tp-about{display:block;font-size:.8rem;color:var(--tp-muted);margin-top:2px;line-height:1.35}
.tp-check[hidden],.tp-group[hidden]{display:none}
.tp-chip{font-size:.95rem;padding:0 3px;border:0;background:none}
.tp-legend-focus{display:flex;flex-wrap:wrap;gap:2px 10px}
.tp-cols{grid-template-columns:minmax(380px,1.15fr) 1fr}
@media (max-width:900px){.tp-cols{grid-template-columns:1fr}}

/* ---------- Aktivitetsdiagram i admin ---------- */
.bar-chart{display:flex;align-items:flex-end;gap:4px;padding:6px 4px 0;border-bottom:2px solid var(--line);overflow-x:auto}
.bar{flex:1 1 0;min-width:22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink);height:100%}
.bar[tabindex="-1"]{cursor:default}
.bar-fill{display:block;width:100%;max-width:38px;min-height:2px;border-radius:6px 6px 0 0;background:var(--accent,#4338ca);opacity:.85}
.bar:hover .bar-fill,.bar:focus-visible .bar-fill{opacity:1}
.bar-on .bar-fill{background:#d97706;opacity:1}
.bar:focus-visible{outline:3px solid var(--focus,#1d4ed8);outline-offset:2px;border-radius:6px}
.bar-val{font-size:.75rem;font-weight:700;min-height:1em}
.bar-lbl{font-size:.7rem;color:var(--ink-soft);white-space:nowrap;padding-bottom:2px}

/* ---------- Samlekort: hele kortet synlig, trykk for å forstørre ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
button.card{font:inherit;color:var(--ink);cursor:pointer;width:100%}
button.card:focus-visible{outline:4px solid var(--focus,#1d4ed8);outline-offset:3px}
button.card:hover{transform:translateY(-2px)}
.card{gap:4px}
.card .art{font-size:clamp(2.4rem,9vw,3.2rem);flex:1 1 auto;min-height:0}
.card .art img{max-height:100%;max-width:100%}
.card .name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.95rem}
.card .desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.76rem;line-height:1.3;color:var(--ink-soft)}
.card.back .desc{color:#fff;font-weight:600}
.card .rarity{flex:none}
.card-big{width:min(340px,80vw);margin:0 auto;padding:18px;gap:8px}
.card-big .art{font-size:7rem}
.card-big .art img{max-height:220px}
.card-big .name{font-size:1.5rem;-webkit-line-clamp:unset}
.card-big .desc{font-size:1rem;-webkit-line-clamp:unset}
.card-big .rarity{font-size:.9rem;padding:4px 14px}
@media (prefers-reduced-motion: reduce){button.card:hover{transform:none}}
.grade-pick .grade-inn{grid-column:span 2}


/* ---------- Adminpanelet som fullskjerm-arbeidsflate ----------
   Én rulling (hovedfeltet), ingen «rulling i rullingen». Menyen står fast til venstre. */
html.has-full-modal,html.has-full-modal body{overflow:hidden}
.modal-backdrop.modal-full-backdrop{padding:0;place-items:stretch;background:var(--bg)}
.modal.modal-full{max-width:none;width:100%;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow:hidden;animation:none}
.modal-full #admin-root{height:100%}
.modal-full .admin{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr)}
@media(min-width:760px){.modal-full .admin{grid-template-columns:minmax(230px,auto) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}}
.modal-full .admin-side{overflow-y:auto}
.modal-full .admin-main{max-height:none;height:100%;overflow:auto;padding:22px clamp(16px,3vw,40px) 60px;overscroll-behavior:contain}
.modal-full .admin-main > *{max-width:1400px}
/* Liten skjerm: hele menyen synlig med linjeskift, ingen sideveis rulling */
@media(max-width:759px){
  .modal-full .admin-side{flex-direction:row;flex-wrap:wrap;overflow:visible;gap:4px;padding:8px}
  .modal-full .admin-side button{min-height:40px;padding:6px 10px;font-size:.88rem;flex:1 1 auto}
}
/* Tabeller i admin: tette rader, knappene på én linje */
.admin-main .table td,.admin-main .table th{padding:8px 8px;vertical-align:top}
.admin-main .table td .btn{min-height:36px;padding:4px 10px;font-size:.88rem;box-shadow:2px 2px 0 var(--shadow-ink);margin:0 4px 4px 0}
.admin-main .table td:last-child{white-space:nowrap}
@media(max-width:900px){.admin-main .table td:last-child{white-space:normal}}
/* <td class="row"> skal oppføre seg som en vanlig tabellcelle (flex ødelegger tabellen) */
.table td.row{display:table-cell;white-space:nowrap}
.table td.row > *{vertical-align:middle}
@media(max-width:900px){.table td.row{white-space:normal}}

/* ---------- Lærerportalen: tildeling i full bredde ---------- */
.tp-cols.tp-cols-assign{grid-template-columns:1fr}
.tp-cols-assign form[data-form="t-assign"]{max-width:none}
.tp-group-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:4px 18px}
.tp-group-body > .tp-row{grid-column:1/-1}
/* «Tildel» følger med nederst på skjermen mens læreren velger saker */
.tp-assign-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:8px -16px -16px;padding:12px 16px;background:var(--tp-card,#fff);border-top:1px solid var(--tp-border);box-shadow:0 -6px 14px rgba(0,0,0,.06);border-radius:0 0 10px 10px}
.tp-assign-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px 16px}

/* ---------- Innspilling ---------- */
.rec-widget{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.rec-line{margin-top:6px}
.rec-widget .btn{min-height:34px;padding:3px 10px;font-size:.85rem}
.rec-on{animation:recpulse 1.2s ease-in-out infinite}
.rec-dot{color:#b91c1c;font-weight:800;font-size:.85rem}
.rec-ok{color:#15803d;font-weight:800}
@keyframes recpulse{50%{box-shadow:0 0 0 6px rgba(185,28,28,.25)}}
@media (prefers-reduced-motion: reduce){.rec-on{animation:none}}

/* ---------- Låste historier ---------- */
.story-card.story-locked{opacity:.72;background:var(--card-2,#f1f1f8);border-style:dashed;cursor:not-allowed}
.story-card.story-locked .story-icon{filter:grayscale(1)}
.story-card.story-locked b{color:var(--ink-soft)}

/* ---------- Innboks og meldinger ---------- */
.msg-unread{border-left:6px solid var(--primary)}
.msg-reply{background:var(--card-2,#f4f4ff);border-radius:10px;padding:8px 12px}
.tp-msg{border-top:1px solid var(--tp-border);padding-top:8px}
.tp-msg:first-of-type{border-top:0;padding-top:0}
.start-school{margin:6px 0 0;font-weight:800;color:var(--ink-soft)}

/* ---------- Tildeling: tilpass for enkeltelever ---------- */
.tp-indiv .tp-group-body{display:block}
.tp-indiv .tp-table-wrap{width:100%}
.tp-indiv-table{width:100%}
.tp-indiv-table td{vertical-align:middle}
.tp-indiv-table td:first-child{white-space:nowrap}
.tp-indiv-table select.tp-input{min-width:220px;width:100%}
.tp-indiv-table input[type=number]:disabled{opacity:.45}
.tp-indiv-table input.tp-invalid{border-color:#b91c1c;box-shadow:0 0 0 2px rgba(185,28,28,.2)}
.tp-indiv-table input:disabled{opacity:.45}
.assign-list .assign-locked{background:transparent;border-style:dashed;color:var(--ink-soft);box-shadow:none;cursor:not-allowed;letter-spacing:.1em}

/* ---------- Tildeling: advarsel om tidligere saker ---------- */
.tp-prereq{border:2px solid #d97706;background:#fffbeb;border-radius:12px;padding:12px 14px;margin:6px 0}
.tp-prereq h3{margin:0 0 4px;font-size:1rem;color:#92400e}
.tp-prereq-row{display:grid;grid-template-columns:1fr minmax(260px,340px);gap:10px;align-items:center;padding:8px 0;border-top:1px solid #fde68a}
.tp-prereq-row:first-of-type{border-top:0}
@media (max-width:700px){.tp-prereq-row{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){.tp-prereq{background:#3a2a05;border-color:#b45309}.tp-prereq h3{color:#fcd34d}.tp-prereq-row{border-color:#78350f}}
.assign-blocker{margin:8px 0;padding:8px 12px;border-radius:10px;background:var(--card-2,#f1f1f8);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tp-badge{display:inline-block;min-width:1.3em;padding:0 .35em;margin-left:4px;border-radius:999px;background:#dc2626;color:#fff;font-size:.78rem;font-weight:800;text-align:center;line-height:1.35}

/* ---------- Personvern / Om siden ---------- */
.info-text p{line-height:1.6;margin:0 0 .9em}
.contact-line{margin-top:1em}
.contact-mail{font-weight:700;word-break:break-all}
.tp-footer{margin:32px 0 8px;text-align:center;font-size:.9rem;color:var(--tp-muted,#64748b)}
.tp-footer .btn-ghost-link{font-size:.9rem}

/* ---------- Elevliste i lærerportalen (uten sideveis rulling) ---------- */
.tp-slist{list-style:none;margin:0;padding:0}
.tp-srow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--tp-border,#e2e8f0)}
.tp-srow:first-child{border-top:0}
.tp-sname{min-width:0;overflow-wrap:anywhere}
.tp-sgrade select{max-width:150px}
.tp-smenu{position:relative}
.tp-smenu>summary{list-style:none;cursor:pointer;font-weight:800;font-size:1.2rem;line-height:1;padding:6px 10px;border-radius:8px;border:1px solid var(--tp-border,#e2e8f0);background:var(--tp-surface,#fff)}
.tp-smenu>summary::-webkit-details-marker{display:none}
.tp-smenu>summary:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.tp-smenu[open]>summary{background:var(--tp-bg,#f1f5f9)}
.tp-smenu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;align-items:stretch;min-width:210px;padding:6px;border-radius:10px;border:1px solid var(--tp-border,#e2e8f0);background:var(--tp-surface,#fff);box-shadow:0 8px 24px rgba(15,23,42,.14)}
.tp-smenu-list .tp-link{text-align:left;padding:8px 10px;border-radius:6px;text-decoration:none}
.tp-smenu-list .tp-link:hover,.tp-smenu-list .tp-link:focus-visible{background:var(--tp-bg,#f1f5f9)}
@media (max-width:420px){.tp-srow{grid-template-columns:minmax(0,1fr) auto}.tp-sgrade{grid-column:1/2}}
.tp-libswitch{display:flex;gap:12px;align-items:flex-start;margin:4px 0 14px;padding:12px 14px;border:1px solid var(--tp-border,#e2e8f0);border-radius:12px;background:var(--tp-surface,#fff);cursor:pointer}
.tp-libswitch input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:#3730a3}
.tp-invite-count{font-size:1.05rem;margin:0}
details.access>summary{cursor:pointer;white-space:nowrap}

/* ---------- Lærere i admin: ett kort per lærer (ingen bred tabell) ---------- */
.tcards{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.tcard{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:12px 14px}
.tcard-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.tcard-pill{font-size:.75rem;white-space:nowrap;margin-left:4px}
.tcard-meta{font-size:.85rem;margin-top:2px}
.tcard-actions{gap:6px;flex:none}
.tcard-fields{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(170px,1fr);gap:10px;margin-top:10px;align-items:start}
@media(max-width:560px){.tcard-fields{grid-template-columns:1fr}}
.tcard-fields select{width:100%;max-width:100%}
.tcard-fields .field{margin:0}
.tcard-fields .field>span{display:block;font-weight:700;font-size:.9rem;margin-bottom:4px}
.tcard-fields details.access{grid-column:1/-1}
.tcard-fields details.access>summary{white-space:normal}
.access-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px;padding:8px 0}
.access-grid label{display:flex;gap:6px;align-items:center}
.disclaimer{display:inline-block;margin-top:6px;font-size:.78rem;opacity:.75}

/* ---------- Påskeegg: konfetti, Ordtyven på flukt og hemmelighetslisten ---------- */
.egg-rain,.egg-thief{position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden}
.egg-rain span{position:absolute;top:-8%;animation:egg-fall linear forwards}
@keyframes egg-fall{to{transform:translateY(115vh) rotate(260deg)}}
.egg-thief{display:flex;align-items:center}
.egg-thief-fig{position:absolute;bottom:14%;font-size:64px;animation:egg-run 3.6s cubic-bezier(.4,0,.6,1) forwards}
.egg-letter{position:absolute;bottom:14%;left:-8%;font-size:34px;font-weight:800;color:var(--primary);animation:egg-drop 3.2s ease-in forwards}
@keyframes egg-run{from{transform:translateX(-15vw) scaleX(1)}to{transform:translateX(112vw) scaleX(1)}}
@keyframes egg-drop{0%{transform:translate(-10vw,0);opacity:0}15%{opacity:1}100%{transform:translate(100vw,90px) rotate(40deg);opacity:0}}
.egg-list{margin:0;padding-left:20px;line-height:1.7}
.egg-locked b{letter-spacing:.15em}
@media (prefers-reduced-motion:reduce){.egg-rain,.egg-thief{display:none}}

/* ---------- Testinstans (MILJO=beta): tydelig stripe nederst ---------- */
#miljo-banner{position:fixed;left:0;right:0;bottom:0;z-index:9500;padding:6px 12px;text-align:center;font-weight:800;font-size:.85rem;
  color:#3a2a05;background:repeating-linear-gradient(45deg,#fde68a,#fde68a 12px,#fcd34d 12px,#fcd34d 24px);border-top:3px solid #b45309;pointer-events:none}
body:has(#miljo-banner) .bottomnav,body:has(#miljo-banner) .tp-footer{margin-bottom:34px}

/* ---------- Personlig velkomsthilsen ---------- */
.velkomst{text-align:center}
.velkomst-figur{font-size:64px;line-height:1;margin-bottom:6px}
.velkomst h2{margin:0 0 16px;line-height:1.35}
/* Lærerportal: «Hva betyr tallene?» under fremdriftstabellen */
.tp-help{margin:4px 0 0;font-size:.9rem;color:var(--tp-muted)}
.tp-help>summary{cursor:pointer;font-weight:600;color:var(--tp-accent);padding:4px 0}
.tp-help dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:8px 0 0;align-items:baseline}
.tp-help dt{font-weight:700;color:var(--tp-text,inherit)}
.tp-help dd{margin:0}
@media (max-width:600px){.tp-help dl{grid-template-columns:1fr}.tp-help dd{margin-bottom:6px}}
.tp-due-soon{color:var(--tp-warn);font-weight:700;font-size:.85rem;white-space:nowrap}