:root {
  --bakgrunn: #f6f4f0;
  --panel: #ffffff;
  --tekst: #1d1f22;
  --dempet: #6a6d72;
  --linje: #e2ded6;
  --hav: #cfdde6;
  --land: #f3eee4;
  --land-dempet: #e4ded2;
  --kyst: #9aa5ad;
  --kant: #b3aa99;
  --fylkekant: #4a4640;
  --fylkekant-dempet: #c9c1b2;
  --aksent: #23577a;
  --riktig: #3f9d5a;
  --feil: #cf4237;
  --blink: #f0b429;
  --stjerne: #d39b12;
  --ferdig: #b9dcc1;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bakgrunn: #16181b;
    --panel: #202328;
    --tekst: #eceae6;
    --dempet: #9a9ca1;
    --linje: #33363c;
    --hav: #142430;
    --land: #36342f;
    --land-dempet: #1f1e1c;
    --kyst: #4a5a66;
    --kant: #5d5850;
    --fylkekant: #d8d2c6;
    --fylkekant-dempet: #45413b;
    --aksent: #3d7fb3;
    --riktig: #4fb46b;
    --feil: #e2584c;
    --blink: #f0b429;
    --stjerne: #f0b429;
    --ferdig: #2f5a3b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bakgrunn);
  color: var(--tekst);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:disabled { cursor: not-allowed; }

body[data-skjerm="meny"] #spill { display: none; }
body[data-skjerm="spill"] #meny { display: none; }

/* --- Meny --- */

#meny {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

.meny-topp h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.meny-topp p { margin: 4px 0 24px; color: var(--dempet); }

#meny-innhold { display: grid; gap: 12px; }

.niva {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 16px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--linje);
  border-radius: 10px;
}

button.niva:not(:disabled):hover { border-color: var(--aksent); }
button.niva:disabled, .fylkesliste.stengt { opacity: 0.55; }

.niva-topp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.niva-tekst { color: var(--dempet); font-size: 0.95rem; }

.merke {
  flex: none;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.8rem;
  background: var(--linje);
  color: var(--tekst);
  white-space: nowrap;
}

.merke.ok { background: var(--riktig); color: #fff; }
.merke.laast { background: transparent; border: 1px solid var(--linje); color: var(--dempet); }
.merke.feil { background: var(--feil); color: #fff; }

.hardcore { color: var(--feil); }

.fylkesliste ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.fylkesliste li {
  display: grid;
  grid-template-columns: 1fr auto 1.6em;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--linje);
}


.liten-knapp {
  min-width: 6.5em;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--linje);
  background: var(--bakgrunn);
  font-size: 0.9rem;
}

.liten-knapp:not(:disabled):hover { border-color: var(--aksent); }
.liten-knapp:disabled { opacity: 0.45; }
.liten-knapp.ok { border-color: var(--riktig); color: var(--riktig); }

.mestret { text-align: center; }

.bonus li { grid-template-columns: 1fr auto auto; }
.antall { color: var(--dempet); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.stjerne { color: var(--stjerne); font-size: 1.2rem; }
.stjerne.glemt { opacity: 0.6; }

.fritt-valg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--linje);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.9rem;
  cursor: pointer;
}

.fritt-valg input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.fritt-valg.pa { background: var(--blink); border-color: var(--blink); color: #1d1f22; }

.regler {
  margin-top: 24px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--linje);
  border-radius: 10px;
}

.regler summary { cursor: pointer; font-weight: 600; }
.regler ul { margin: 8px 0 0; padding-left: 20px; }
.regler li { margin: 4px 0; }

.meny-bunn {
  margin-top: 24px;
  display: grid;
  gap: 8px;
  justify-items: start;
  color: var(--dempet);
}

.lenke-knapp {
  padding: 0;
  border: 0;
  background: none;
  color: var(--feil);
  text-decoration: underline;
}

/* --- Spill --- */

#spill {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.hud {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--linje);
}

#niva-tittel {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#fremdrift { color: var(--dempet); font-variant-numeric: tabular-nums; white-space: nowrap; }
#liv { color: var(--feil); font-size: 1.25rem; letter-spacing: 2px; white-space: nowrap; }

.hud-knapp {
  padding: 4px 10px;
  border: 1px solid var(--linje);
  border-radius: 6px;
  background: var(--bakgrunn);
}

.kartflate {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--hav);
}

#sporsmal {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 8px 24px 10px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--linje);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  max-width: calc(100% - 32px);
}

#sporsmal .liten { font-size: 0.85rem; color: var(--dempet); }
#sporsmal .under { font-size: 1.1rem; font-weight: 600; }
#sporsmal .under:empty { display: none; }
#sporsmal .stor {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

#zoomknapper {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  gap: 6px;
}

body:not([data-fri="ja"]) #zoomknapper { display: none; }

#zoomknapper button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--linje);
  border-radius: 8px;
  background: var(--panel);
  font-size: 1.3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* --- Kart --- */

.kartlag {
  position: absolute;
  inset: 0;
  /* Under zoom flyttes kart og satellittbilde med en transform (se map.js). */
  transform-origin: 0 0;
  will-change: transform;
}

.kart {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  /* Kartet tegnes også utenfor rammen, så det ikke blir tomme kanter når du zoomer ut eller drar. */
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}

/* Satellittlerretet går 25 % utenfor rammen på hver side (se satellitt.js). */
.satbilde {
  position: absolute;
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  pointer-events: none;
}
.satbilde[hidden] { display: none; }

.kart.fri { cursor: grab; }
.kart.fri:active { cursor: grabbing; }

.kart path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.omriss {
  fill: var(--land);
  stroke: var(--kyst);
  stroke-width: 0.5;
  pointer-events: none;
}

/* Nivå 1–2: fylkene er klikkbare. */
.modus-fylker .kommuner { display: none; }
.modus-fylker .fylker path { fill: var(--land); stroke: var(--kant); stroke-width: 0.6; }

/* Nivå 3–4: kommunene i ett fylke, eller bydelene/postnumrene i Oslo. */
.modus-fylke .omriss, .modus-bydel .omriss, .modus-post .omriss { fill: var(--land-dempet); }
.modus-fylke .kommuner path { display: none; }
.modus-fylke .kommuner path.aktiv { display: inline; fill: var(--land); stroke: var(--kant); stroke-width: 0.5; }
.modus-bydel .kommuner, .modus-post .kommuner { display: none; }
.modus-fylke .fylker path, .modus-bydel .fylker path, .modus-post .fylker path {
  fill: none; stroke: var(--fylkekant-dempet); stroke-width: 0.5; pointer-events: none;
}
.modus-fylke .fylker path.valgt, .modus-bydel .fylker path.valgt, .modus-post .fylker path.valgt {
  stroke: var(--kant); stroke-width: 0.8;
}

/* Oslo: bydeler og postnummer. Det som ikke spørres om (Sentrum, Marka, andre bydeler) er dempet. */
.bydeler, .postnummer { display: none; }
.modus-bydel .bydeler, .modus-post .bydeler, .modus-post .postnummer { display: inline; }
.bydeler path, .postnummer path {
  fill: var(--land-dempet); stroke: var(--kant); stroke-width: 0.5; pointer-events: none;
}
.bydeler path.aktiv, .postnummer path.aktiv { fill: var(--land); pointer-events: auto; }
.postnummer path { stroke-width: 0.4; }
/* I postnummer-bonusen ligger bydelsgrensene over som orientering. */
.modus-post .bydeler path { fill: none; stroke: var(--fylkekant-dempet); stroke-width: 1; }


/* Tilbakemelding */
.kart path.ferdig,
.kart path.aktiv.ferdig,
.modus-fylke .kommuner path.aktiv.ferdig { fill: var(--ferdig); pointer-events: none; }
.kart path.riktig { fill: var(--riktig) !important; }
.kart path.feil { fill: var(--feil) !important; }
.kart path.blink {
  fill: var(--blink) !important;
  stroke: var(--fylkekant) !important;
  stroke-width: 1.2 !important;
  animation: blink 0.25s steps(1) infinite;
}

@keyframes blink {
  50% { fill-opacity: 0.25; }
}

.etiketter text {
  text-anchor: middle;
  dominant-baseline: middle;
  fill: var(--tekst);
  stroke: var(--land);
  paint-order: stroke;
  font-weight: 600;
  pointer-events: none;
}

.etiketter text.midlertidig { fill: var(--feil); }

/* --- Satellittbilde (nivå 3–6 og bonusen) --- */

.kart.sat .omriss { fill: none; stroke: none; }

/* Grensene må synes oppå bildet, og det som kan klikkes, er gjennomsiktig. */
.kart.sat.modus-fylker .fylker path { fill: transparent; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1; }
.kart.sat .kommuner path.aktiv,
.kart.sat .bydeler path.aktiv,
.kart.sat .postnummer path.aktiv { fill: transparent; stroke: rgba(255, 255, 255, 0.85); stroke-width: 0.8; }

/* Det som ikke spørres om, dempes. */
.kart.sat.modus-fylke .fylker path,
.kart.sat.modus-bydel .fylker path,
.kart.sat.modus-post .fylker path { fill: rgba(0, 0, 0, 0.5); stroke: rgba(255, 255, 255, 0.35); }
.kart.sat .fylker path.valgt { fill: none; stroke: #fff; stroke-width: 1.4; }
.kart.sat .bydeler path:not(.aktiv),
.kart.sat .postnummer path:not(.aktiv) { fill: rgba(0, 0, 0, 0.5); stroke: rgba(255, 255, 255, 0.35); }
.kart.sat.modus-post .bydeler path { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.2; }

/* Grønt og markeringer er halvgjennomsiktige, så bildet synes under. */
.kart.sat .kommuner path.ferdig,
.kart.sat .bydeler path.ferdig,
.kart.sat .postnummer path.ferdig { fill: rgba(63, 180, 90, 0.45); }
.kart.sat path.riktig, .kart.sat path.feil, .kart.sat path.blink { fill-opacity: 0.65; }

.kart.sat .etiketter text { fill: #fff; stroke: rgba(0, 0, 0, 0.75); }
.kart.sat .etiketter text.midlertidig { fill: #ffd25e; }

.sat-knapp { display: none; }
body[data-sat="ja"] .sat-knapp { display: block; }
#zoomknapper .sat-knapp.pa { background: var(--aksent); border-color: var(--aksent); }

#satkreditt {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 2;
  max-width: calc(100% - 80px);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1.3;
  pointer-events: none;
}

/* --- Resultat --- */

#resultat {
  width: min(420px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--linje);
  border-radius: 14px;
  background: var(--panel);
  color: var(--tekst);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

#resultat::backdrop { background: rgba(0, 0, 0, 0.35); }
#resultat h2 { margin: 0 0 8px; }
#resultat p { margin: 0 0 20px; color: var(--dempet); }

.knapper { display: grid; gap: 8px; }

.knapper button {
  padding: 10px 16px;
  border: 1px solid var(--linje);
  border-radius: 8px;
  background: var(--bakgrunn);
}

.knapper button.primar {
  background: var(--aksent);
  border-color: var(--aksent);
  color: #fff;
}

@media (max-width: 560px) {
  .hud { gap: 8px; padding: 8px 12px; }
  #niva-tittel { font-size: 0.9rem; }
  #ikke-perfekt { display: none; }
  #sporsmal .stor { font-size: 1.6rem; }
  .fylkesliste li { grid-template-columns: 1fr auto 1.2em; gap: 6px; }
  .liten-knapp { min-width: 0; }
}