:root {
  /* Fargeprofil: Frisktid – farger (16 farger: to grunnfarger og sju par) */
  --ink: #192230;
  --cream: #fbf6f0;
  --serenity: #364356;
  --champ: #ecd5bb;
  --sage: #517c61;
  --oat: #d3c6ad;
  --cocoa: #996350;
  --blush: #fadcdc;
  --indigo: #313668;
  --seafoam: #92d2bf;
  --tealgreen: #3d5b59;
  --salmon: #fcb5ac;
  --sienna: #7c2e28;
  --apricot: #f0ae88;
  --tealblue: #01949a;
  --mint: #dbe8d8;

  /* Bruk i appen: mørk bakgrunn og lys tekst */
  --bakgrunn: var(--ink);
  --kort: var(--serenity);
  --flate: color-mix(in srgb, var(--cream) 7%, var(--ink));        /* felt inne i kort */
  --flate-hover: color-mix(in srgb, var(--cream) 12%, var(--serenity));
  --tekst: var(--cream);
  --dempet: color-mix(in srgb, var(--cream) 68%, var(--serenity));
  --linje: color-mix(in srgb, var(--cream) 18%, var(--serenity));
  --aksent: var(--seafoam);                                         /* knapper og aktiv meny */
  --aksent-tekst: var(--indigo);                                    /* tekst på aksent */
  --aksent-mork: color-mix(in srgb, var(--seafoam) 45%, var(--ink));/* skygge under knapper */
  --lenke: var(--seafoam);
  --valgt: var(--tealblue);
  --riktig: var(--sage);
  --feil: var(--sienna);
  --riktig-lys: var(--seafoam);
  --feil-lys: var(--salmon);
  --hav: color-mix(in srgb, var(--tealblue) 22%, var(--ink));
  --hav-linje: color-mix(in srgb, var(--tealblue) 40%, var(--ink));
  --sand: var(--champ);
  --skygge: 0 8px 24px rgba(0, 0, 0, .22);
  color-scheme: dark;
  --radius: 22px;
  --font: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --del-europa: var(--blush);
  --del-asia: var(--champ);
  --del-afrika: var(--apricot);
  --del-nordamerika: var(--oat);
  --del-soramerika: var(--seafoam);
  --del-oseania: var(--salmon);
}

* { box-sizing: border-box; }
/* Siden skal aldri kunne scrolles sidelengs. «clip» (ikke «hidden») så den faste toppen fortsatt virker. */
html, body { overflow-x: clip; max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.45;
  color: var(--tekst);
  background: var(--bakgrunn);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.15; margin: 0 0 .4em; font-weight: 700; overflow-wrap: break-word; hyphens: auto; }
p, li, td, strong, span { overflow-wrap: break-word; }
h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; margin-top: 1.1em; }
p { margin: 0 0 .7em; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
img, svg, video, table, select, input { max-width: 100%; }
main { outline: none; padding: 24px clamp(16px, 3vw, 40px) 60px; max-width: 1400px; margin: 0 auto; }
.dempet { color: var(--dempet); }

/* ---------- Ikoner (Iconify) ---------- */
.ik { display: inline-flex; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.ik svg { width: 100%; height: 100%; display: block; }
/* Duotone på mørk bakgrunn: streken får den lyse partnerfargen, flaten den mørke fargen i paret */
.ik .ik-fyll { fill: var(--ik2, currentColor); opacity: var(--ik2-o, .25); }
.ik-europa, .ik-linjal, .ik-blink, .ik-flagg { color: var(--blush); --ik2: var(--cocoa); --ik2-o: 1; }
.ik-asia, .ik-hovedstad, .ik-boker, .ik-flagg2 { color: var(--champ); --ik2: var(--serenity); --ik2-o: 1; }
.ik-afrika, .ik-lyspare, .ik-pokal, .ik-medalje, .ik-sol, .ik-fest, .ik-gnist, .ik-gnister, .ik-ild,
.ik-hender, .ik-klapp, .ik-muskel, .ik-tommel, .ik-ballong { color: var(--apricot); --ik2: var(--sienna); --ik2-o: 1; }
.ik-nordamerika, .ik-terning, .ik-areal { color: var(--oat); --ik2: var(--sage); --ik2-o: 1; }
.ik-soramerika, .ik-folk, .ik-lupe { color: var(--seafoam); --ik2: var(--indigo); --ik2-o: 1; }
.ik-oseania, .ik-nal { color: var(--salmon); --ik2: var(--tealgreen); --ik2-o: 1; }
.ik-fjell, .ik-hjem, .ik-peker, .ik-skjult { color: var(--mint); --ik2: var(--tealgreen); --ik2-o: 1; }
.ik-elv, .ik-kart, .ik-kompass, .ik-jordklode, .ik-ratt { color: var(--mint); --ik2: var(--tealblue); --ik2-o: 1; }
.ik.stjerne { color: var(--apricot); --ik2: var(--apricot); --ik2-o: 1; }
.ik.tom { color: var(--linje); --ik2: transparent; }
.ik.niva-lett { color: var(--seafoam); }
.ik.niva-middels { color: var(--apricot); }
.ik.niva-vanskelig { color: var(--salmon); }
/* På fargede kort: ikonet i kortets lyse partnerfarge, flaten litt mørkere */
.flis .ik, .quizkort .ik { color: var(--par-lys); --ik2: var(--ink); --ik2-o: .35; }
/* På lyse knapper og aktiv meny blir ikonene mørke */
.meny a.aktiv .ik, .chip.aktiv .ik:not([class*="niva-"]), .knapp:not(.sekundær) .ik, .poeng .ik {
  color: var(--aksent-tekst); --ik2: var(--aksent-tekst); --ik2-o: .2;
}
.meny a .ik { width: 1.4em; height: 1.4em; }
.logo .ik { width: 1.3em; height: 1.3em; }
.flis-ikon .ik, .quiz-ikon .ik { width: 3.2rem; height: 3.2rem; }
.stort-ikon .ik { width: 4rem; height: 4rem; }
.store-stjerner .ik { width: 3.4rem; height: 3.4rem; margin: 0 4px; }
.rute-ikon .ik { width: 2.2rem; height: 2.2rem; }
.boble > .ik { width: 2rem; height: 2rem; }
.lyd .ik { width: 1.4rem; height: 1.4rem; }
.lyd { display: inline-grid; place-items: center; }
.kart-knapper button { display: grid; place-items: center; }
.kart-knapper .ik { width: 1.4rem; height: 1.4rem; }
.landkort .hake .ik { width: 18px; height: 18px; }
.sok { position: relative; }
.sok > .ik { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; color: var(--dempet); pointer-events: none; }
.verktoy .sok input { padding-left: 48px; }
.konfetti span { width: 1em; height: 1em; }
.konfetti svg { width: 100%; height: 100%; }

/* ---------- Topp ---------- */
.topp {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 10px clamp(16px, 3vw, 40px);
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(25, 34, 48, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje);
}
.logo { font-weight: 700; font-size: 1.35rem; text-decoration: none; white-space: nowrap; color: var(--lenke); }
.meny { display: flex; gap: 6px; margin: 0 auto; }
.meny a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; min-height: 48px;
  border-radius: 999px; text-decoration: none; font-weight: 600;
  transition: background .15s;
}
.meny a:hover { background: var(--kort); }
.meny a.aktiv { background: var(--aksent); color: var(--aksent-tekst); }
.lyd { border: 0; background: var(--kort); width: 48px; height: 48px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; }

/* ---------- Felles ---------- */
/* Innhold står rett på bakgrunnen. Deler skilles med en tynn linje, ikke med bokser. */
.kort { min-width: 0; }
.skille, .hoyre-kol > .kort:not(.kart-kort), .tidligere, .tavle, .familiekort, .velkommen, .framdrift, .innstillinger {
  border-top: 1px solid var(--linje); padding-top: 22px;
}
.merkelapp { display: inline-block; font-weight: 600; font-size: .9rem; color: var(--mint); background: var(--tealgreen); padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; text-transform: none; }
.side-topp { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.side-topp p { color: var(--dempet); margin: 0; }
.tilbake { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; font-weight: 600; color: var(--lenke); margin-bottom: 2px; padding: 4px 0; }
.landside .side-topp { flex-direction: column; align-items: flex-start; gap: 0; }

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--aksent); color: var(--aksent-tekst); font-weight: 600; text-decoration: none;
  transition: transform .08s, background .15s;
}
.knapp:active { transform: scale(.97); }
.knapp.sekundær { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1.5px var(--linje); }
.knapp.stor { font-size: 1.15rem; min-height: 58px; padding: 12px 30px; }
.knapperad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--linje); background: transparent; border-radius: 999px;
  padding: 8px 16px; min-height: 46px; font-weight: 600; cursor: pointer;
}
.chip.aktiv { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.chip.aktiv .ik:not([class*="niva-"]) { color: var(--ink); --ik2: var(--ink); --ik2-o: .15; }

.verktoy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.sok input {
  width: min(360px, 100%); min-height: 50px; padding: 10px 18px;
  border: 1.5px solid var(--linje); border-radius: 999px; background: var(--flate); font-weight: 500;
}
.sok input::placeholder { color: var(--dempet); }
.sok input:focus { outline: none; border-color: var(--aksent); }
.sorter { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-left: auto; }
.sorter select { min-height: 46px; border-radius: 999px; border: 1.5px solid var(--linje); padding: 6px 14px; background: var(--flate); font-weight: 500; }

.flagg { display: block; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); background: #eee; aspect-ratio: 4 / 3; object-fit: cover; }
.flagg.liten { width: 36px; border-radius: 4px; }


/* ---------- Hjem ---------- */
.hilsen { margin: 8px 0 20px; }
.hilsen p { font-size: 1.2rem; color: var(--dempet); }
.dagens-kort {
  display: flex; align-items: center; gap: 28px;
  padding: 26px 32px; border-radius: 28px; text-decoration: none;
  background: var(--indigo); color: var(--cream); transition: transform .15s;
}
.dagens-kort:hover { transform: translateY(-2px); }
.dagens-flagg .flagg { width: 200px; border-radius: 12px; }
.dagens-tekst { display: flex; flex-direction: column; gap: 4px; }
.dagens-tekst .merkelapp { align-self: flex-start; background: var(--seafoam); color: var(--indigo); }
.dagens-tekst .merkelapp .ik { color: var(--indigo); --ik2: var(--cream); }
.dagens-tekst strong { color: var(--seafoam); }
.dagens-kort .pil .ik { color: var(--seafoam); }
.dagens-kort .ik.stjerne { --ik2: var(--apricot); color: var(--apricot); }
.dagens-tekst strong { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.05; }
.pil { margin-left: auto; font-size: 2.4rem; font-weight: 700; }
.fliser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 20px 0 28px; }
.flis {
  display: flex; flex-direction: column; gap: 6px; padding: 26px;
  border-radius: 26px; text-decoration: none; transition: transform .15s;
  min-height: 170px;
}
.flis:hover { transform: translateY(-2px); }
.flis-ikon { font-size: 2.8rem; }
.flis strong { font-size: 1.45rem; font-weight: 700; }
.flis > span:last-child { color: var(--dempet); }
.flis { background: var(--flate); }
.flis:hover { background: color-mix(in srgb, var(--cream) 10%, var(--ink)); }
.flis-kart { --par-lys: var(--mint); }
.flis-alle { --par-lys: var(--seafoam); }
.flis-quiz { --par-lys: var(--apricot); }
.framdrift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.framdrift h2 { font-size: 1.25rem; }
.stolpe { height: 16px; background: var(--linje); border-radius: 999px; overflow: hidden; }
.stolpe span { display: block; height: 100%; min-width: 16px; background: linear-gradient(90deg, var(--tealblue), var(--seafoam)); border-radius: 999px; }
.deler-framdrift { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.del-chip { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--linje); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.del-chip > span:last-child { color: var(--dempet); font-variant-numeric: tabular-nums; }

/* ---------- Kart ---------- */
.kart { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.kart svg { display: block; width: 100%; height: 100%; cursor: grab; }
.kart svg:active { cursor: grabbing; }
.hav { fill: var(--hav); stroke: var(--hav-linje); stroke-width: 1; }
.gradnett { fill: none; stroke: var(--cream); stroke-opacity: .12; stroke-width: .5; vector-effect: non-scaling-stroke; }
.land { fill: var(--sand); stroke: var(--ink); stroke-width: .7; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s; }
.land.ukjent { fill: color-mix(in srgb, var(--cream) 30%, var(--serenity)); cursor: default; }
.land.del-europa, .prikk.del-europa { fill: var(--del-europa); }
.land.del-asia, .prikk.del-asia { fill: var(--del-asia); }
.land.del-afrika, .prikk.del-afrika { fill: var(--del-afrika); }
.land.del-nordamerika, .prikk.del-nordamerika { fill: var(--del-nordamerika); }
.land.del-soramerika, .prikk.del-soramerika { fill: var(--del-soramerika); }
.land.del-oseania, .prikk.del-oseania { fill: var(--del-oseania); }
@media (hover: hover) { .land:not(.ukjent):hover, .prikk:hover { filter: brightness(.9); } }
.prikk { fill: var(--sand); stroke: var(--ink); cursor: pointer; }
.kart .valgt { fill: var(--valgt) !important; stroke: var(--cream); stroke-width: 1.5; }
.kart .riktig { fill: var(--riktig) !important; stroke: var(--cream); stroke-width: 1.5; }
.kart .feil { fill: var(--feil) !important; stroke: var(--cream); stroke-width: 1.5; }
.kart .uthevet { fill: var(--tealblue) !important; stroke: var(--cream); stroke-width: 1.5; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { fill-opacity: .55; } }
.ring { fill: none; stroke: var(--cream); pointer-events: none; animation: puls 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ring.riktig { stroke: var(--riktig-lys); fill: none !important; }
.ring.uthevet { stroke: var(--seafoam); fill: none !important; animation: puls 1.6s ease-out infinite; }
@keyframes puls { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.kart-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -140%);
  background: var(--cream); color: var(--ink); font-weight: 600; font-size: .95rem;
  padding: 6px 12px; border-radius: 10px; white-space: nowrap; opacity: 0; transition: opacity .1s;
}
.kart-tip.vis { opacity: 1; }
.kart-knapper { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.kart-knapper button { width: 48px; height: 48px; border-radius: 14px; border: 0; background: var(--kort); font-size: 1.5rem; font-weight: 700; cursor: pointer; }
.kart-kort { padding: 0; overflow: hidden; background: var(--hav); border-radius: var(--radius); }
.kart-flate { width: 100%; aspect-ratio: 1000 / 527; }

.kartside .kart-og-panel { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.kartside .kart-flate { aspect-ratio: auto; height: calc(100vh - 230px); min-height: 420px; }
.panel { position: sticky; top: 92px; }
.panel-tom { text-align: center; padding: 20px 4px; }
.stort-ikon { font-size: 3.5rem; display: block; margin-bottom: 8px; }
.panel-flagg .flagg { width: 100%; border-radius: 12px; margin-bottom: 14px; }
.panel h2 { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.kort-fakta { margin: 0 0 12px; display: grid; }
.kort > h3:first-child, .kort > h2:first-child { margin-top: 0; }
.kort-fakta div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linje); }
.kort-fakta dt { font-weight: 500; color: var(--dempet); }
.kort-fakta dd { margin: 0; font-weight: 600; text-align: right; }
.panel-fakta { padding: 4px 0 0; font-weight: 500; }

/* ---------- Landside og Dagens land ---------- */
.side-topp h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.to-kol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.hoyre-kol { display: grid; gap: 28px; min-width: 0; }
.to-kol > * { min-width: 0; }
.stort-flagg .flagg { width: 100%; max-width: 420px; border-radius: 12px; margin: 0 0 20px; }
.ruter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.rute { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; grid-template-rows: auto auto auto; column-gap: 14px; align-content: start; padding: 14px 0; border-top: 1px solid var(--linje); }
.rute-ikon { grid-row: 1 / span 3; font-size: 1.9rem; align-self: start; padding-top: 2px; }
.rute-etikett { font-size: .8rem; font-weight: 600; color: var(--dempet); text-transform: uppercase; letter-spacing: .05em; }
.rute-verdi { font-weight: 700; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.rute-ekstra { font-size: .9rem; color: var(--dempet); font-weight: 500; }
.sang-rute { grid-column: 1 / -1; }
.samfunn-tittel { margin: 34px 0 6px; }
.leder-rute { grid-column: 1 / -1; }
.leder-rute > .rute-ikon { grid-row: 1 / span 2; }
.ledere { display: grid; gap: 4px; font-weight: 700; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.leder-tittel { font-weight: 500; color: var(--dempet); font-size: .95rem; margin-right: 4px; }
.kilde { font-size: .8rem; color: var(--dempet); margin: 10px 0 0; }
.sang-rute .rute-verdi { color: var(--seafoam); }
.spill-sang { justify-self: start; margin-top: 10px; min-height: 48px; }
.spill-sang.spiller { background: var(--cream); color: var(--ink); }
.spill-sang.spiller .ik { color: var(--ink); --ik2: var(--ink); }
.sang-status { font-weight: 600; color: var(--salmon); font-size: .9rem; margin-top: 6px; }
.sang-status:empty { display: none; }
.sang-kreditt { font-size: .78rem; color: var(--dempet); margin-top: 8px; }
.sang-kreditt a { color: var(--dempet); }
.sang-rute > .rute-ikon { grid-row: 1 / span 5; align-self: start; padding-top: 2px; }
.sang-rute > :not(.rute-ikon) { grid-column: 2; }
.boble { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); font-weight: 500; font-size: 1.1rem; }
.boble > span { font-size: 1.6rem; }
.boble p { margin: 0; flex: 1; }
.sammenlign { margin: 12px 0 0; padding: 12px 16px; background: var(--tealgreen); border-radius: 14px; font-weight: 500; }
.naboer { display: flex; flex-wrap: wrap; gap: 8px; }
.nabo { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; min-height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linje); text-decoration: none; font-weight: 600; }
.nabo .flagg { width: 34px; border-radius: 50%; aspect-ratio: 1; }
.utfordring { min-height: 180px; }
.utfordring .knapp { margin-top: 6px; }
.skjult-innhold > * { visibility: hidden; }
.skjult-innhold { position: relative; }
.skjult-melding { visibility: visible !important; position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 120px 24px 24px; text-align: center; font-weight: 700; font-size: 1.3rem; background: repeating-linear-gradient(45deg, var(--serenity) 0 18px, color-mix(in srgb, var(--cream) 6%, var(--serenity)) 18px 36px); border-radius: var(--radius); }
.skjult-melding .ik { width: 3.5rem; height: 3.5rem; }
.store-stjerner { font-size: 3rem; letter-spacing: 6px; margin: 4px 0 10px; }
.liten-framdrift { font-weight: 600; color: var(--dempet); margin-bottom: 6px; }
.tidligere { margin-top: 34px; }
.tidligere h3 { margin-top: 0; }
.tidligere-rad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tidligere-dag { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 16px; text-decoration: none; text-align: center; font-weight: 600; font-size: .95rem; }
.tidligere-dag .flagg { width: 56px; }
.tidligere-dag .dag { color: var(--dempet); font-size: .8rem; text-transform: capitalize; }
.tidligere-dag .stjerner { font-size: .8rem; min-height: 1.2em; }

/* ---------- Tall og fakta ---------- */
.stat-kort h2 { display: flex; align-items: center; gap: 10px; }
.stat-kort h2 .ik { width: 1.6rem; height: 1.6rem; }
.fordeling { padding: 22px 0; border-top: 1px solid var(--linje); }
.fordeling h3 { margin: 0 0 6px; color: var(--seafoam); }
.fordeling-rad { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
.fordeling-tekst { font-weight: 500; }
.fordeling-stolpe { display: block; height: 14px; border-radius: 999px; background: var(--flate); overflow: hidden; }
.fordeling-stolpe span { display: block; height: 100%; border-radius: 999px; }
.rettferdig .fordeling-stolpe span { background: var(--oat); }
.rettferdig .fordeling-tekst strong { color: var(--oat); font-weight: 700; }
.faktisk .fordeling-stolpe span { background: var(--seafoam); }
.faktisk .fordeling-tekst strong { color: var(--seafoam); font-weight: 700; }

/* Størrelse: to land oppå hverandre */
.storrelse { padding: 4px 0 18px; }
.storrelse h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.storrelse h3 .ik { width: 1.5rem; height: 1.5rem; }
.sammenlign-med { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; margin-bottom: 8px; }
.sammenlign-med select { width: 100%; max-width: 360px; min-width: 0; flex: 1 1 200px; min-height: 46px; border-radius: 999px; border: 1.5px solid var(--linje); padding: 6px 14px; background: var(--flate); font-weight: 500; }
.storrelse-svg svg { display: block; width: 100%; height: auto; max-height: 240px; }
.storrelse-svg circle.del-europa { fill: var(--del-europa); } .storrelse-svg circle.del-asia { fill: var(--del-asia); }
.storrelse-svg circle.del-afrika { fill: var(--del-afrika); } .storrelse-svg circle.del-nordamerika { fill: var(--del-nordamerika); }
.storrelse-svg circle.del-soramerika { fill: var(--del-soramerika); } .storrelse-svg circle.del-oseania { fill: var(--del-oseania); }
.storrelse-svg .sirkel.mot circle:not(.bitteliten-ring) { stroke: var(--cream); stroke-width: 2.5; }
.sirkel-navn { fill: var(--cream); font-family: var(--font); font-weight: 600; font-size: 15px; text-anchor: middle; }
.sirkel-tall { fill: var(--dempet); font-family: var(--font); font-size: 12px; text-anchor: middle; }
.storrelse-svg .bitteliten-ring { fill: none; stroke: var(--salmon); stroke-width: 2.5; animation: puls 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.storrelse-tekst { margin: 6px 0 10px; }
.storrelse .sammenlign-liste { border-top: 0; }
.sammenlign-liste:empty { display: none; }

.statliste { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linje); }
.statliste li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.statliste li + li { border-top: 1px solid var(--linje); }
.statliste li .ik { width: 1.7rem; height: 1.7rem; margin-top: 1px; }
.statliste strong { color: var(--seafoam); font-weight: 600; }

/* ---------- Alle land ---------- */
.landrutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 26px 20px; }
.landkort { position: relative; display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.landkort .flagg { width: 100%; border-radius: 10px; margin-bottom: 8px; transition: transform .12s; }
.landkort:hover .flagg { transform: translateY(-2px); }
.landkort strong { font-weight: 700; line-height: 1.2; }
.landkort > span { color: var(--dempet); font-size: .9rem; font-weight: 500; }
.landkort .hake { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--seafoam); color: var(--indigo); display: grid; place-items: center; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.landkort .plass { position: absolute; top: 6px; left: 6px; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--cream); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: .9rem; z-index: 1; }

/* ---------- Quizmeny ---------- */
.innstillinger { display: grid; gap: 16px; margin-bottom: 6px; }
.innstilling { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.etikett { font-weight: 700; min-width: 100px; }
.quizrutenett { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.quizkort {
  display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px;
  background: var(--flate); text-decoration: none; transition: transform .12s, background .15s; min-height: 180px;
}
.quizkort:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--cream) 10%, var(--ink)); }
/* Bare ikonet har farge, så menyen blir rolig */
.quizkort:nth-child(4n+1) { --par-lys: var(--seafoam); }
.quizkort:nth-child(4n+2) { --par-lys: var(--salmon); }
.quizkort:nth-child(4n+3) { --par-lys: var(--apricot); }
.quizkort:nth-child(4n+4) { --par-lys: var(--blush); }
.quiz-ikon { font-size: 2.6rem; }
.quizkort strong { font-size: 1.25rem; font-weight: 700; }
.quizkort > span { color: var(--dempet); }
.quizkort strong { color: var(--cream); }
.quizkort .rekord { margin-top: auto; font-weight: 600; font-size: .9rem; padding-top: 8px; }

/* ---------- Quiz ---------- */
.quiz { max-width: 1100px; margin: 0 auto; }
.quiz-topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.quiz-tittel { font-weight: 700; font-size: 1.3rem; }
.quiz-status { display: flex; gap: 10px; align-items: center; }
.poeng { background: var(--cream); color: var(--ink); padding: 8px 16px; border-radius: 999px; font-weight: 700; }
.rekke { font-weight: 700; font-size: 1.1rem; }
.prikker { display: flex; gap: 8px; justify-content: center; margin: 4px 0 20px; }
.prikker span { width: 18px; height: 18px; border-radius: 50%; background: var(--linje); transition: transform .2s, background .2s; }
.prikker span.na { transform: scale(1.35); background: var(--cream); }
.prikker span.ok { background: var(--riktig-lys); }
.prikker span.nei { background: var(--feil-lys); }

.sporsmal { text-align: center; }
.sporsmal h2 { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 18px; }
.sporsmal-bilde .quiz-flagg { width: min(400px, 70vw, 38vh * 4 / 3); margin: 0 auto 22px; border-radius: 12px; }
.sporsmal-bilde .liten-quiz { width: 180px; }
.svar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 820px; margin: 0 auto; }
.svar-knapp {
  min-height: 74px; padding: 14px 18px; border-radius: 18px; border: 2px solid transparent;
  background: var(--flate); font-weight: 700; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .08s, background .2s, border-color .2s;
}
.svar-knapp:not(:disabled):hover { border-color: var(--aksent); }
.svar-knapp:not(:disabled):active { transform: scale(.98); }
.svar-knapp:disabled { cursor: default; opacity: .55; }
.svar-knapp.riktig { background: var(--riktig); border-color: var(--riktig-lys); opacity: 1; animation: hopp .4s; }
.svar-knapp.feil { background: var(--feil); border-color: var(--feil-lys); opacity: 1; animation: rist .4s; }
@keyframes hopp { 50% { transform: scale(1.05); } }
@keyframes rist { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.flaggsvar { max-width: min(640px, 70vh); }
.svar.antall-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svar.antall-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flaggsvar.antall-6 { max-width: min(820px, 100vh); }
.hvilket .svar.antall-3, .hvilket .svar.antall-6 { grid-template-columns: minmax(0, 1fr); }
.sporsmal-tekst { text-align: center; font-size: 1.15rem; color: var(--dempet); margin: -6px auto 20px; max-width: 640px; }
.stor-verdi { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: clamp(2.6rem, 9vw, 4.5rem); font-weight: 700; color: var(--seafoam); margin: 0 0 18px; }
.stor-verdi .ik { width: .8em; height: .8em; }
.quiz-sang { display: grid; justify-items: center; gap: 8px; margin: 0 0 22px; }
.quiz-sang .sang-status { color: var(--salmon); font-weight: 600; }
.quiz-sang .sang-status:empty { display: none; }
.quizgruppe { margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--linje); font-size: 1.2rem; }
.quiz-hvor { display: block; font-size: .9rem; font-weight: 600; color: var(--par-lys); }
.quizkort.av { opacity: .5; cursor: default; }
.quizkort.av:hover { transform: none; }
.niva-tekst { flex-basis: 100%; margin: -4px 0 0; color: var(--dempet); font-size: .95rem; }
.quiz-under { display: block; font-size: .85rem; font-weight: 500; color: var(--dempet); }
.utfordring .flaggsvar { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.utfordring .flaggsvar .svar-knapp { padding: 8px; border-radius: 14px; }
.utfordring .sporsmal h2 { font-size: 1.35rem; }
.utfordring .svar-knapp { min-height: 60px; font-size: 1.1rem; }
.flaggsvar .svar-knapp { padding: 12px; min-height: 0; }
.flaggsvar .flagg { width: 100%; border-radius: 10px; }
.parsvar .svar-knapp { flex-direction: column; padding: 18px; }
.parsvar .flagg { width: 100%; max-width: 280px; border-radius: 12px; }
.parsvar strong { font-size: 1.4rem; }
.avslor { display: none; font-size: 1rem; color: var(--dempet); font-weight: 600; }
.besvart .avslor { display: block; }
.tilbakemelding { min-height: 64px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-weight: 700; font-size: 1.2rem; }
.tilbakemelding:empty { visibility: hidden; }
.tilbakemelding.ok { color: var(--riktig-lys); }
.tilbakemelding.nei { color: var(--feil-lys); }
.tilbakemelding .dempet { font-weight: 500; font-size: 1rem; }
.kart-sporsmal h2 strong { color: var(--seafoam); }
.quiz-kart { padding: 0; overflow: hidden; background: var(--hav); border-radius: var(--radius); }
.quiz-kart .kart-flate { aspect-ratio: auto; height: min(62vh, 640px); }
.hvilket { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; }
.hvilket .quiz-kart .kart-flate { height: min(58vh, 560px); }
.hvilket .svar { grid-template-columns: 1fr; }
.resultat { text-align: center; max-width: 760px; margin: 0 auto; padding: 20px 0; }
.resultat .naboer { justify-content: center; }
.resultat .knapperad { justify-content: center; margin-top: 26px; }
.stor-tekst { font-size: 1.3rem; }
.ny-rekord { display: inline-block; background: var(--apricot); color: var(--ink); padding: 6px 18px; border-radius: 999px; font-weight: 700; }

/* ---------- Profiler ---------- */
.avatar { display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--cream); }
.avatar.liten { width: 32px; height: 32px; }
.avatar.stor { width: 104px; height: 104px; }
.profilknapp { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--flate); text-decoration: none; font-weight: 600; max-width: 200px; }
.profilknapp > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilknapp > .ik { width: 1.4rem; height: 1.4rem; margin-left: 8px; }
.hilsen .bytt { color: var(--lenke); font-weight: 600; margin-left: 6px; font-size: 1rem; }
.velkommen { margin-bottom: 24px; }
.velkommen h2 { color: var(--seafoam); }
.profilrutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.profilkort { position: relative; border-radius: 22px; background: var(--flate); }
.profilkort.aktiv { box-shadow: inset 0 0 0 2px var(--seafoam); }
.profil-velg { width: 100%; min-height: 220px; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; border-radius: 24px; text-align: center; }
.profil-velg strong { font-size: 1.35rem; font-weight: 700; }
.profil-velg > span:not(.avatar):not(.merkelapp) { color: var(--dempet); font-weight: 500; }
.profil-velg .merkelapp { margin: 4px 0 0; }
.profil-rediger { position: absolute; top: 10px; right: 10px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.profil-rediger .ik { width: 1.3rem; height: 1.3rem; }
.profilkort.ny { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-decoration: none; background: transparent; border: 2px dashed var(--linje); box-shadow: none; }
.profilkort.ny .ik { width: 3rem; height: 3rem; color: var(--seafoam); }
.profilkort.ny strong { font-size: 1.2rem; }
.tavle h2 { display: flex; align-items: center; gap: 10px; }
.tavle table { width: 100%; border-collapse: collapse; }
.tavle th { text-align: left; font-size: .8rem; color: var(--dempet); font-weight: 600; padding: 8px 12px; text-transform: uppercase; letter-spacing: .05em; }
.tavle td { padding: 12px; border-top: 1px solid var(--linje); }
.tavle tr.meg td { color: var(--seafoam); }
.tavle .plassnr { font-weight: 700; width: 64px; text-align: center; }
.tavle .plassnr .ik, .minitavle .ik-krone, .plass-tekst .ik, .leder .ik { color: var(--apricot); --ik2: var(--sienna); --ik2-o: 1; }
.tavle .plassnr .ik { width: 1.6rem; height: 1.6rem; }
.tavle-navn { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.quizkort .leder { font-weight: 600; font-size: .9rem; color: var(--apricot); }
.quizkort .leder .ik { color: var(--apricot); }
.minitavle { list-style: none; margin: 0 auto 8px; padding: 0; max-width: 420px; display: grid; }
.minitavle li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--linje); text-align: left; }
.minitavle li.meg { color: var(--seafoam); }
.minitavle .plassnr { width: 22px; font-weight: 700; }
.minitavle .navn { flex: 1; font-weight: 600; }
.minitavle .tavle-tid { min-width: 5.5em; text-align: right; color: var(--dempet); font-weight: 600; font-size: .9rem; }
.klokke { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--flate); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ik-stoppeklokke { color: var(--apricot); --ik2: var(--sienna); --ik2-o: 1; }
.plass-tekst { font-weight: 600; }
.profilskjema form { max-width: 760px; }
.forhandsvisning { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.forhandsvisning strong { font-size: 1.4rem; }
.felt { display: grid; gap: 8px; font-weight: 600; }
.felt input { min-height: 56px; padding: 10px 18px; border-radius: 16px; border: 1.5px solid var(--linje); background: var(--flate); font-size: 1.2rem; font-weight: 500; }
.felt input:focus { outline: none; border-color: var(--seafoam); }
.felt input::placeholder { color: var(--dempet); }
.skjema-feil { color: var(--feil-lys); font-weight: 600; min-height: 1.4em; margin: 6px 0; }
.profilskjema fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.profilskjema legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.avatarvalg { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.avatarvalg button { aspect-ratio: 1; min-height: 56px; padding: 6px; border-radius: 50%; border: 4px solid transparent; background: var(--flate); cursor: pointer; display: grid; place-items: center; }
.avatarvalg button img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.avatarvalg button.opptatt img { opacity: .45; }
.avatarvalg button[aria-pressed="true"] { border-color: var(--seafoam); background: var(--seafoam); }
.avatarvalg button[aria-pressed="true"] img { opacity: 1; }
.knapp.fare { background: var(--sienna); color: var(--cream); margin-left: auto; }
.knapp.fare .ik { color: var(--cream); --ik2: var(--cream); }
/* Familiekode */
.familiekort { margin-top: 30px; }
.familiekort h2 { display: flex; align-items: center; gap: 10px; }
.familiekort h3 { margin: 0 0 10px; font-size: 1.05rem; }
.familie-valg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; margin-top: 14px; align-items: start; }
.familie-inn { display: flex; gap: 10px; flex-wrap: wrap; }
.familie-inn input { flex: 1 1 180px; min-width: 0; min-height: 56px; padding: 10px 18px; border-radius: 16px; border: 1.5px solid var(--linje); background: var(--flate); color: var(--tekst); font: inherit; font-size: 1.3rem; font-weight: 600; }
.familie-inn input:focus { outline: none; border-color: var(--seafoam); }
.familie-inn input::placeholder { color: var(--dempet); font-weight: 500; }
.familiekode-rad { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.familiekode { font-size: 2.2rem; font-weight: 700; line-height: 1.2; color: var(--seafoam); min-width: 0; overflow-wrap: anywhere; }
.familiekode::first-letter { text-transform: uppercase; }
.synk-status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.synk-status[data-tilstand="feil"], .synk-status[data-tilstand="borte"] { color: var(--salmon); }
.synk-status .ik { flex: none; }
.ik-sky, .ik-enheter, .ik-synk, .ik-kopier { color: var(--seafoam); --ik2: var(--indigo); --ik2-o: 1; }
.ik-skyAv, .ik-koblefra { color: var(--salmon); --ik2: var(--sienna); --ik2-o: 1; }

/* ---------- Konfetti ---------- */
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.konfetti span { position: absolute; top: -50px; animation: fall 2.6s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

/* ---------- Mindre skjermer (iPad stående og mobil) ---------- */
@media (max-width: 1100px) {
  .quizrutenett { grid-template-columns: repeat(2, 1fr); }
  .kartside .kart-og-panel { grid-template-columns: 1fr; }
  .kartside .kart-flate { height: 60vh; }
  .panel { position: static; }
  .framdrift { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .profilknapp > span:last-child { display: none; }
  .profilknapp { padding: 4px; }
  .tavle th:nth-child(5), .tavle td:nth-child(5), .tavle th:nth-child(6), .tavle td:nth-child(6) { display: none; }
  .to-kol, .hvilket { grid-template-columns: minmax(0, 1fr); }
  .meny a span:last-child { display: none; }
  .meny a { padding: 10px 14px; font-size: 1.3rem; }
  .deler-framdrift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tidligere-rad { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .avatarvalg { grid-template-columns: repeat(4, 1fr); }
  body { font-size: 16px; }
  /* Menyen blir en fast fanelinje nederst, som i en app */
  /* backdrop-filter på toppen ville gjort at den faste menyen plasseres i toppen i stedet for nederst */
  .topp { gap: 10px; background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .logo { font-size: 1.15rem; margin-right: auto; min-height: 44px; display: flex; align-items: center; gap: 6px; }
  .meny {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; gap: 2px;
    justify-content: space-around; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(25, 34, 48, .96); border-top: 1px solid var(--linje);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .meny a { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px; min-height: 56px; font-size: .72rem; border-radius: 14px; justify-content: center; text-align: center; }
  .meny a span:last-child { display: block; white-space: nowrap; }
  .meny a .ik { width: 1.5rem; height: 1.5rem; }
  main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .profilknapp > span:last-child { display: block; max-width: 90px; }
  .profilknapp { padding: 4px 12px 4px 4px; }
  /* Quiz: kompakt topp */
  .quiz-topp { gap: 4px 8px; flex-wrap: wrap; }
  .quiz-tittel { font-size: 1rem; text-align: center; order: 3; flex-basis: 100%; }
  .quiz-tittel .quiz-under { display: inline; margin-left: 6px; }
  .quiz-status { gap: 6px; }
  .quiz-tittel .ik { display: none; }
  .poeng { padding: 6px 12px; font-size: .9rem; white-space: nowrap; }
  .klokke { padding: 6px 10px; font-size: .9rem; gap: 4px; }
  .prikker { gap: 6px; margin-bottom: 14px; }
  .prikker span { width: 14px; height: 14px; }
  .sporsmal h2 { font-size: 1.3rem; margin-bottom: 12px; }
  .svar-knapp { min-height: 60px; font-size: 1.1rem; }
  .quiz-kart .kart-flate { height: 52vh; }
  /* Profiler to i bredden */
  .profilrutenett { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .familie-valg { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .familiekode { font-size: 1.8rem; }
  .profil-velg { min-height: 180px; padding: 18px 10px; }
  .profilkort.ny { min-height: 180px; }
  .avatar.stor { width: 80px; height: 80px; }
  .profil-velg strong { font-size: 1.15rem; }
  .tavle td, .tavle th { padding-left: 6px; padding-right: 6px; }
  .tavle table { font-size: .9rem; }
  .tavle .plassnr { width: 40px; }
  .fliser { grid-template-columns: 1fr; }
  .flis { min-height: 0; }
  .dagens-kort { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .dagens-flagg .flagg { width: 140px; }
  .pil { display: none; }
  .deler-framdrift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruter, .svar { grid-template-columns: minmax(0, 1fr); }
  .svar.antall-3, .svar.antall-6 { grid-template-columns: minmax(0, 1fr); }
  .flaggsvar, .flaggsvar.antall-3, .flaggsvar.antall-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quizrutenett { grid-template-columns: 1fr; }
  .landrutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .sorter { margin-left: 0; }
}
@media (max-width: 380px) {
  /* Veldig smale telefoner: logoen viser bare skipsrattet */
  .logo { font-size: 0; }
  .logo .ik { width: 2rem; height: 2rem; }
  .profilknapp > span:last-child { max-width: 72px; }
  main { padding-left: 12px; padding-right: 12px; }
  .meny { gap: 0; padding-left: 2px; padding-right: 2px; }
  .meny a { font-size: .62rem; padding: 6px 0; min-width: 0; }
  .meny a span:last-child { white-space: normal; line-height: 1.1; }
  .tavle th:nth-child(4), .tavle td:nth-child(4) { display: none; }
  .deler-framdrift { grid-template-columns: minmax(0, 1fr); }
  .profilrutenett { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}