/* ══════════════════════════════════════════════════════════════════
   Typisk! — stilark

   Huset til LRNify: varm fløte, tykk blekkramme, hard skygge rett
   nedover, Chewy til overskrifter og Nunito til alt annet.

   Spillets eget: de tre sentralmålene har hver sin låste farge, og
   den holdes overalt — ikon, kort, markør på brettet, ramme rundt
   svarfeltet. Ser du gull, snakker vi om gjennomsnittet.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --flote: #fff9f0;
  --blekk: #2b2118;
  --kort: #ffffff;
  --dempet: #7a6f63;
  --gul: #facc15;
  --linje: #e8ded0;

  --snitt: #f4b942;   --snitt-mork: #c98a1c;   --snitt-lys: #fdf0d4;
  --median: #2fa8a0;  --median-mork: #1c7570;  --median-lys: #d7efed;
  --type: #8b6ad6;    --type-mork: #5f45a3;    --type-lys: #e8e0fa;

  --rett: #1f9254;    --rett-lys: #e2f5e9;
  --galt: #d1443c;    --galt-lys: #fbe6e4;

  --skygge: 0 5px 0 var(--blekk);
  --skygge-stor: 0 7px 0 var(--blekk);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--flote); color: var(--blekk);
  min-height: 100vh; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .chewy { font-family: 'Chewy', cursive; font-weight: 400; letter-spacing: .01em; }

.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;
}

/* ══ TOPPTEKST ══════════════════════════════════════════════════ */
header.topp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; gap: 12px;
}
.logo {
  font-family: 'Chewy', cursive; font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  transform: rotate(-2deg); color: var(--blekk); text-decoration: none; line-height: 1;
}
.logo b { color: var(--gul); -webkit-text-stroke: 2px var(--blekk); font-weight: 400; }
.tilbake {
  font-weight: 900; font-size: .82rem; color: var(--blekk); text-decoration: none;
  background: var(--kort); border: 3px solid var(--blekk); box-shadow: 0 4px 0 var(--blekk);
  padding: 7px 13px;
}
.tilbake:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blekk); }

/* ══ SKJERMER ═══════════════════════════════════════════════════ */
.skjerm { display: none; }
.skjerm.aktiv { display: block; animation: inn .22s ease; }
@keyframes inn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.midt { max-width: 720px; margin: 0 auto; padding: 0 18px 70px; }
.bred { max-width: 1120px; margin: 0 auto; padding: 0 18px 70px; }

/* ══ KNAPPER ════════════════════════════════════════════════════ */
button { font-family: inherit; cursor: pointer; color: var(--blekk); }
.knapp-primar {
  font-weight: 900; font-size: 1.05rem; background: var(--gul);
  border: 4px solid var(--blekk); box-shadow: var(--skygge-stor);
  padding: 14px 24px; width: 100%; transition: transform .1s, box-shadow .1s;
}
.knapp-primar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 0 var(--blekk); }
.knapp-primar:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 var(--blekk); }
.knapp-primar:disabled { opacity: .4; cursor: not-allowed; }
.knapp-sekundar {
  font-weight: 900; font-size: .95rem; background: var(--kort);
  border: 3px solid var(--blekk); box-shadow: var(--skygge);
  padding: 12px 20px; width: 100%; transition: transform .1s, box-shadow .1s;
}
.knapp-sekundar:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--blekk); }
.knapp-sekundar:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blekk); }
.knapp-liten {
  font-weight: 900; font-size: .8rem; background: var(--kort);
  border: 3px solid var(--blekk); box-shadow: 0 4px 0 var(--blekk); padding: 7px 13px;
}
.knapp-liten:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blekk); }
.knapp-liten[aria-pressed="true"] { background: var(--gul); }
.knapp-tekst {
  background: none; border: 0; font-weight: 800; font-size: .88rem;
  color: var(--dempet); text-decoration: underline; padding: 10px;
}
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--median-mork); outline-offset: 3px;
}

/* ══ KORT ═══════════════════════════════════════════════════════ */
.kort {
  background: var(--kort); border: 4px solid var(--blekk);
  box-shadow: var(--skygge-stor); padding: 18px 20px;
}

/* ══ STARTSKJERM ════════════════════════════════════════════════ */
.helt { margin: 0 auto 6px; max-width: 460px; }
.helt svg { width: 100%; height: auto; display: block; }
.start-tittel { font-size: clamp(2.6rem, 11vw, 4.4rem); text-align: center; line-height: .95; }
.start-tittel em { font-style: normal; color: var(--gul); -webkit-text-stroke: 3px var(--blekk); }
.start-under {
  text-align: center; font-weight: 700; color: var(--dempet);
  font-size: clamp(.95rem, 2.6vw, 1.1rem); max-width: 460px; margin: 8px auto 20px;
}

.maskotrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.maskotkort {
  background: var(--kort); border: 3px solid var(--blekk); box-shadow: var(--skygge);
  padding: 10px 6px 12px; text-align: center;
}
.maskotkort svg { width: 100%; max-width: 84px; height: auto; }
.maskotkort figcaption { font-weight: 900; font-size: .78rem; margin-top: 4px; line-height: 1.2; }
.maskotkort figcaption span { display: block; font-weight: 700; font-size: .68rem; color: var(--dempet); margin-top: 3px; }
.maskotkort-mean { border-bottom: 7px solid var(--snitt); }
.maskotkort-median { border-bottom: 7px solid var(--median); }
.maskotkort-mode { border-bottom: 7px solid var(--type); }

.modusrad { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; }
.modusknapp {
  display: flex; align-items: center; gap: 13px; text-align: left;
  background: var(--kort); border: 4px solid var(--blekk); box-shadow: var(--skygge-stor);
  padding: 14px 18px; width: 100%; transition: transform .1s, box-shadow .1s;
}
.modusknapp:hover { transform: translateY(-2px); box-shadow: 0 9px 0 var(--blekk); }
.modusknapp:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--blekk); }
.modusknapp .ikon { font-size: 1.9rem; line-height: 1; }
.modusknapp strong { display: block; font-family: 'Chewy', cursive; font-size: 1.35rem; }
.modusknapp span { font-weight: 700; font-size: .84rem; color: var(--dempet); }
.modusknapp.uthevet { background: var(--gul); }

.startstatus { text-align: center; font-weight: 800; font-size: .85rem; color: var(--dempet); margin-bottom: 8px; }
.merkerad, .startmerker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.merke {
  width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.25rem;
  background: var(--kort); border: 3px solid var(--linje); border-radius: 50%;
  filter: grayscale(1); opacity: .35;
}
.merke-tatt, .merkerad .merke { filter: none; opacity: 1; border-color: var(--blekk); box-shadow: 0 3px 0 var(--blekk); }

.infoliste { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: .9rem; padding-left: 1.1em; }
.infoliste li::marker { color: var(--median); }

/* ══ KAPITTELSKJERM ═════════════════════════════════════════════ */
.kapittelliste { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.kapittelkort {
  background: var(--kort); border: 4px solid var(--blekk); box-shadow: var(--skygge-stor);
  padding: 14px 16px; text-align: left; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: transform .1s, box-shadow .1s;
}
.kapittelkort:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 0 var(--blekk); }
.kapittelkort:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 var(--blekk); }
.kapittelkort.laast { opacity: .5; box-shadow: none; cursor: not-allowed; }
.kapittelhode { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.kapittelemoji { font-size: 1.8rem; line-height: 1.1; }
.kapitteltekst strong { display: block; font-family: 'Chewy', cursive; font-size: 1.2rem; }
.kapitteltekst span { font-weight: 700; font-size: .8rem; color: var(--dempet); }
.stjernerad { display: flex; gap: 2px; flex: 0 0 auto; }
.stjernerad svg, .art-stjerne { width: 20px; height: 20px; }

/* ══ SPILLSKJERM ════════════════════════════════════════════════ */
.hudlinje { display: flex; gap: 8px; margin-bottom: 8px; }
.hudlapp {
  background: var(--kort); border: 3px solid var(--blekk); box-shadow: 0 4px 0 var(--blekk);
  padding: 5px 12px; text-align: center; min-width: 74px;
}
.hudlapp strong { display: block; font-family: 'Chewy', cursive; font-size: 1.1rem; line-height: 1.1; }
.hudlapp span { font-weight: 800; font-size: .62rem; color: var(--dempet); text-transform: uppercase; letter-spacing: .05em; }
.hudlinje .knapp-liten { margin-left: auto; align-self: center; }

.framdriftsspor { height: 9px; background: var(--linje); border: 2px solid var(--blekk); margin-bottom: 14px; }
.framdriftsfyll { height: 100%; background: var(--median); transition: width .35s ease; }

.tidsspor { height: 12px; background: var(--linje); border: 3px solid var(--blekk); margin-bottom: 14px; }
.tidsfyll { height: 100%; background: var(--median); }
.tidsfyll.knapp-tid { background: var(--galt); }

.spillflate { display: grid; gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .spillflate { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
  .venstre { position: sticky; top: 12px; }
}
.venstre, .hoyre { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ── Brettet ─────────────────────────────────────────────────── */
.brettkort { padding: 8px 10px 4px; }
.brett-svg { width: 100%; height: auto; display: block; touch-action: none; }
.akse-linje { stroke: var(--blekk); stroke-width: 4; stroke-linecap: round; }
.akse-hakk { stroke: var(--blekk); stroke-width: 2.5; }
.akse-tall { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12px; fill: var(--dempet); }
.akse-enhet { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12px; fill: var(--dempet); }

.brikke circle { fill: var(--kort); stroke: var(--blekk); stroke-width: 3.5; }
.brikke { transition: transform .55s cubic-bezier(.34, 1.4, .5, 1); }
.brikke-ny circle { fill: var(--snitt); }
.brikke-type circle { fill: var(--type-lys); }

.lag-planke { transition: transform .8s cubic-bezier(.4, 1.25, .5, 1); }
.modus-vekt .akse-linje { stroke: var(--linje); stroke-width: 3; }
.planke-flate { fill: var(--snitt); stroke: var(--blekk); stroke-width: 3.5; transition: opacity .3s; }
.vekt-kile { fill: var(--snitt-mork); stroke: var(--blekk); stroke-width: 3.5; stroke-linejoin: round; }
.vekt-status { font-family: 'Chewy', cursive; font-size: 17px; fill: var(--dempet); }

.markor-median-strek { stroke: var(--median-mork); stroke-width: 3.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.markor-snitt-pil { fill: var(--snitt); stroke: var(--blekk); stroke-width: 3; stroke-linejoin: round; }
.markor-type { fill: none; stroke: var(--type); stroke-width: 4; }
.markor-krone { fill: var(--type); stroke: var(--blekk); stroke-width: 2.5; stroke-linejoin: round; }
.markor-telling { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13px; fill: var(--dempet); }

.merkelapp rect { stroke: var(--blekk); stroke-width: 3; }
.merkelapp text { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13px; fill: #fff; }
.merkelapp-median rect { fill: var(--median); }
.merkelapp-mean rect { fill: var(--snitt); }
.merkelapp-mean text { fill: var(--blekk); }
.merkelapp-mode rect { fill: var(--type); }

.gjett line { stroke: var(--blekk); stroke-width: 3; stroke-dasharray: 5 5; }
.gjett path { fill: var(--gul); stroke: var(--blekk); stroke-width: 3; stroke-linejoin: round; }
.gjett text { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 12px; fill: var(--blekk); }
.gjett { transition: transform .12s linear; }

.glider { width: 100%; margin: 4px 0 8px; accent-color: var(--median); height: 34px; }

/* ── Saksrammen ──────────────────────────────────────────────── */
.sak-topp { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.klient-medaljong {
  width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center;
  font-size: 1.4rem; background: var(--medaljong, var(--linje));
  border: 3px solid var(--blekk); border-radius: 50%; box-shadow: 0 3px 0 var(--blekk);
}
.sak-navn strong { display: block; font-family: 'Chewy', cursive; font-size: 1.1rem; }
.sak-navn span { font-weight: 700; font-size: .78rem; color: var(--dempet); }
.sak-tekst { font-weight: 700; font-size: .95rem; margin-bottom: 12px; }

.tallrad { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 8px; }
.tallchip {
  background: var(--flote); border: 3px solid var(--blekk);
  font-family: 'Chewy', cursive; font-size: 1.05rem; padding: 6px 11px; min-width: 44px; text-align: center;
}
.tallchip-median { background: var(--median-lys); border-color: var(--median-mork); }
.enhetsnote, .gratisnote { font-weight: 700; font-size: .76rem; color: var(--dempet); text-align: center; }
.gratisnote { margin-top: 7px; }
.verktoyrad { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 9px; }
.sumlinje { text-align: center; font-weight: 800; font-size: .85rem; margin-top: 9px; word-break: break-word; }

/* ── Verdikort ───────────────────────────────────────────────── */
.verdirad { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 9px; margin-bottom: 14px; }
.verdikort {
  border: 3px solid var(--blekk); box-shadow: 0 4px 0 var(--blekk); padding: 8px 10px; text-align: center;
}
.verdikort strong { font-family: 'Chewy', cursive; font-size: 1.35rem; display: block; margin-top: 2px; }
.verdikort-hode { display: flex; align-items: center; justify-content: center; gap: 5px; }
.verdikort-hode span { font-weight: 900; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dempet); }
.art-ikon { width: 17px; height: 17px; flex: 0 0 17px; }
.verdikort-mean { background: var(--snitt-lys); }
.verdikort-median { background: var(--median-lys); }
.verdikort-mode { background: var(--type-lys); }

/* ── Panelet ─────────────────────────────────────────────────── */
#panel h2 { font-size: 1.25rem; margin-bottom: 9px; }
.panel-ledetekst { font-weight: 700; font-size: .92rem; margin-bottom: 13px; }
.panel-sporsmal, .panel-paastand {
  font-weight: 800; font-size: 1rem; background: var(--flote);
  border-left: 6px solid var(--median); padding: 11px 13px; margin-bottom: 14px;
}
.panel-paastand { border-left-color: var(--snitt); }

.regnerad { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.regnekort { border: 3px solid var(--blekk); box-shadow: 0 4px 0 var(--blekk); padding: 9px 10px; text-align: center; }
.regnekort-mean { background: var(--snitt-lys); }
.regnekort-median { background: var(--median-lys); }
.regnekort-mode { background: var(--type-lys); }
.regnekort input {
  width: 100%; text-align: center; font-family: 'Chewy', cursive; font-size: 1.4rem;
  border: 3px solid var(--blekk); padding: 7px; background: #fff; color: var(--blekk); margin-top: 6px;
}
.regnestatus { font-weight: 900; font-size: 1.05rem; min-height: 1.3em; }
.regnekort.rett { border-color: var(--rett); } .regnekort.rett .regnestatus { color: var(--rett); }
.regnekort.galt { border-color: var(--galt); } .regnekort.galt .regnestatus { color: var(--galt); }

.valgliste { display: flex; flex-direction: column; gap: 9px; }
.valgknapp {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  font-weight: 800; font-size: .93rem; background: var(--kort);
  border: 3px solid var(--blekk); box-shadow: 0 4px 0 var(--blekk); padding: 12px 15px;
  transition: transform .1s, box-shadow .1s;
}
.valgknapp:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--blekk); }
.valgknapp:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--blekk); }
.valgknapp:disabled { cursor: default; }
.valgmerke { font-weight: 900; font-size: 1.05rem; min-width: 1.1em; }
.valgknapp.rett { background: var(--rett-lys); border-color: var(--rett); }
.valgknapp.galt { background: var(--galt-lys); border-color: var(--galt); }
.valgknapp.rett .valgmerke::before, .valgknapp.rett-uvalgt .valgmerke::before { content: '✓'; color: var(--rett); }
.valgknapp.galt .valgmerke::before { content: '✗'; color: var(--galt); }
.valgknapp.rett-uvalgt { border-style: dashed; }

.handlingsrad { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 14px; }

.byggrad { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 6px; }
.byggrad input {
  width: 62px; text-align: center; font-family: 'Chewy', cursive; font-size: 1.3rem;
  border: 3px solid var(--blekk); padding: 8px 4px; background: var(--flote); color: var(--blekk);
}
.kravliste { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 13px; }
.kravpunkt {
  display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: .88rem;
  background: var(--flote); border: 3px dashed var(--blekk); padding: 9px 12px;
}
.kravpunkt.oppfylt { background: var(--rett-lys); border-style: solid; border-color: var(--rett); }
.kravmerke { font-weight: 900; font-size: 1.05rem; }

.sabotorrad { display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 4px; }
.sabotorrad input {
  width: 150px; text-align: center; font-family: 'Chewy', cursive; font-size: 1.5rem;
  border: 3px solid var(--blekk); padding: 9px; background: var(--snitt-lys); color: var(--blekk);
}
.sabotorenhet { font-weight: 900; color: var(--dempet); }

.domforklaring { display: grid; gap: 6px; margin-bottom: 13px; }
.domforklaring { border-left: 5px solid var(--linje); padding-left: 11px; }
.domforklaring-punkt { font-size: .76rem; font-weight: 700; color: var(--dempet); }
.domforklaring-punkt strong { color: var(--blekk); }
.domforklaring-punkt strong::after { content: ' — '; color: var(--dempet); font-weight: 700; }
.paastandsliste { display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; }
.paastandskort { border: 3px solid var(--blekk); box-shadow: 0 4px 0 var(--blekk); padding: 11px 13px; background: var(--kort); }
.paastandstekst { font-weight: 800; font-size: .93rem; margin-bottom: 9px; }
.domrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.domknapp {
  font-weight: 800; font-size: .7rem; background: var(--flote);
  border: 2.5px solid var(--blekk); padding: 8px 4px; line-height: 1.15;
}
.domknapp.valgt { background: var(--gul); box-shadow: inset 0 0 0 2px var(--blekk); }
.domknapp:disabled { opacity: .75; cursor: default; }

.gjett-visning {
  font-family: 'Chewy', cursive; font-size: 2rem; text-align: center;
  background: var(--flote); border: 3px dashed var(--blekk); padding: 9px; margin-bottom: 12px;
}

/* ── Fasit ───────────────────────────────────────────────────── */
.fasit { border: 4px solid var(--blekk); box-shadow: var(--skygge-stor); padding: 15px 17px; background: var(--kort); }
.fasit-rett { background: var(--rett-lys); }
.fasit-galt { background: var(--galt-lys); }
.fasit-delvis { background: var(--snitt-lys); }
.fasit-hode { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.fasit-maskot { width: 54px; flex: 0 0 54px; }
.fasit-maskot svg { width: 100%; height: auto; }
.fasit-tittel strong { font-family: 'Chewy', cursive; font-size: 1.4rem; display: block; }
.fasit-poeng { font-weight: 900; font-size: .8rem; color: var(--dempet); }
.fasit-tekst { font-weight: 700; font-size: .93rem; }
.fasit-poeng-laering {
  margin-top: 11px; font-weight: 700; font-size: .85rem;
  background: rgba(255,255,255,.7); border-left: 5px solid var(--blekk); padding: 9px 11px;
}
.fasit-paastander { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.fasit-paastand { border: 3px solid var(--blekk); padding: 9px 11px; background: #fff; }
.fasit-paastand.rett { border-color: var(--rett); }
.fasit-paastand.galt { border-color: var(--galt); }
.fasit-dom { font-weight: 900; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dempet); }
.fasit-paastand p { font-weight: 800; font-size: .87rem; margin-top: 3px; }
.fasit-hvorfor { font-weight: 700 !important; font-size: .8rem !important; color: var(--dempet); margin-top: 4px; }
.merkevarsel {
  margin-top: 11px; background: var(--gul); border: 3px solid var(--blekk);
  padding: 9px; text-align: center; font-weight: 900; box-shadow: 0 4px 0 var(--blekk);
}

/* ── Sluttskjerm ─────────────────────────────────────────────── */
.sluttall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0; }
.sluttboks { background: var(--kort); border: 3px solid var(--blekk); box-shadow: var(--skygge); padding: 11px 6px; text-align: center; }
.sluttboks strong { display: block; font-family: 'Chewy', cursive; font-size: 1.55rem; line-height: 1.1; }
.sluttboks span { font-weight: 800; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dempet); }
.laeringsboks, .bomboks {
  background: var(--kort); border: 3px solid var(--blekk); box-shadow: var(--skygge);
  padding: 13px 15px; margin-bottom: 12px;
}
.laeringsboks strong, .bomboks strong { font-family: 'Chewy', cursive; font-size: 1.1rem; display: block; margin-bottom: 5px; }
.laeringsboks p { font-weight: 700; font-size: .9rem; }
.bomboks ul { padding-left: 1.2em; font-weight: 700; font-size: .86rem; display: flex; flex-direction: column; gap: 7px; }
.bomhint { display: block; font-weight: 700; font-size: .8rem; color: var(--dempet); margin-top: 2px; }
.rekordnote { text-align: center; font-weight: 800; font-size: .8rem; color: var(--dempet); margin-bottom: 6px; }
.delingsruter { font-size: 1.6rem; letter-spacing: 3px; text-align: center; margin: 10px 0; }
.sluttknapper { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sluttinnhold .stjernerad { justify-content: center; margin-bottom: 6px; }
.sluttinnhold .stjernerad svg { width: 40px; height: 40px; }

footer { text-align: center; padding: 22px 16px 40px; color: var(--dempet); font-weight: 700; font-size: .8rem; }

@media (max-width: 420px) {
  .maskotkort figcaption span { display: none; }
  .sluttall { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, .brikke, .lag-planke { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}