:root{
  --bg: #05090a;
  --board-deep: #030607;
  --panel: #0c1a18;
  --panel-2: #0f2220;
  --edge: #1c3733;
  --ink: #eaf7f4;
  --muted: #83a8a1;
  --cyan: #4ff0e4;
  --green: #52e08e;
  color-scheme: dark;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  background: radial-gradient(ellipse 120% 90% at 50% -10%, #0a1a18 0%, var(--bg) 55%, var(--board-deep) 100%);
  color: var(--ink);
  font-family: 'Manrope', 'Segoe UI', sans-serif;
}

body{
  padding-inline: 16px;
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
}

.app{
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 18px 40px;
}

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--edge);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.topbar::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);
  opacity: .6;
}

.brand{ display: flex; align-items: center; gap: 10px; }
.brand-mark{
  font-size: 22px;
  color: var(--cyan);
  filter: drop-shadow(0 0 6px rgba(79,240,228,.7));
}
.brand h1{
  font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
  font-size: 20px;
  letter-spacing: .08em;
  margin: 0;
  font-weight: 700;
}
.brand .sub{
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.version{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cyan);
  background: rgba(79,240,228,.1);
  border: 1px solid rgba(79,240,228,.28);
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: middle;
  margin-left: 4px;
}

.controls{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.chip-group{
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: rgba(0,0,0,.25);
}
.chip{
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.chip:hover{ color: var(--ink); }
.chip.active{
  color: var(--ink);
  background: linear-gradient(135deg, rgba(82,224,142,.24), rgba(79,240,228,.22));
  box-shadow: inset 0 0 0 1px rgba(79,240,228,.4);
}

select#sizeSelect{
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

.btn-ghost, .btn-primary{
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--edge);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-ghost{ background: rgba(0,0,0,.25); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(79,240,228,.25); }
.btn-ghost:active, .btn-primary:active{ transform: scale(.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #04211d;
  border: none;
}
.btn-primary:hover{ box-shadow: 0 0 14px rgba(79,240,228,.4); }
select#sizeSelect:hover{ border-color: var(--cyan); }

.progress-row{ display: flex; align-items: center; gap: 12px; padding-inline: 4px; flex-wrap: wrap; }

.brett-teller{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #04211d;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 700;
  white-space: nowrap;
}
.progress-track{
  flex: 1; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #3ecf7a, var(--green), var(--cyan));
  box-shadow: 0 0 10px rgba(82,224,142,.55);
  width: 0%;
  transition: width .5s ease;
}
.progress-label{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.board-wrap{
  background: radial-gradient(ellipse at 50% 30%, #071614 0%, var(--board-deep) 70%);
  border: 1px solid var(--edge);
  border-radius: 20px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

/* ---------- Sluttsekvensen ---------- */

.finale-canvas{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Rutene har en kjørende pusteanimasjon på opacity, og en animasjon slår
   inline-stiler i kaskaden - derfor må animasjonen skrus av her. */
.finale-skjult{
  animation: none !important;
  transition: none !important;
  opacity: 0 !important;
}
.finale-uttoning{
  animation: none !important;
  transition: opacity .7s ease !important;
  opacity: 0 !important;
}

.fog-field.finale-borte{
  opacity: 0;
  transition: opacity 1.1s ease;
}

.finale-lag{
  cursor: pointer;
  animation: finaleFram .85s cubic-bezier(.16,.9,.3,1.05) both;
}
@keyframes finaleFram{
  0%{ opacity: 0; transform: scale(.55); }
  60%{ opacity: 1; }
  100%{ opacity: 1; transform: scale(1); }
}
.finale-lag{ transform-box: fill-box; transform-origin: center; }

.finale-fyll{
  stroke: rgba(0,0,0,.42);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 18px rgba(82,224,142,.55));
}

.finale-kant{
  fill: none;
  stroke: url(#hexEdgeGrad);
  stroke-width: 2.6;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  animation: hexDashMarch 12s linear infinite;
}

.finale-tekst{
  font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
  font-weight: 700;
  fill: #06231a;
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: .01em;
  pointer-events: none;
}

.finale-undertekst{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  fill: #a6ffc4;
  text-anchor: middle;
  dominant-baseline: central;
  opacity: .85;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(82,224,142,.6));
}
svg#board{ width: 100%; height: auto; display: block; overflow: visible; }

.hex{ cursor: default; transform-box: fill-box; transform-origin: center; transition: transform .15s ease; }
.hex.reachable{ cursor: pointer; }
.hex.reachable:hover{ transform: scale(1.045); }
.hex.reachable:active{ transform: scale(0.98); }
.hex .hex-hit{ fill: transparent; }

/* Låste ruter har ingen strek OVER tåken - de vises bare svakt gjennom
   tåken via rutenettet under (.hex-grid-line). */
.hex .hex-outline{
  fill: none;
  stroke: var(--edge);
  stroke-width: 1.3;
  stroke-opacity: 0;
  transition: stroke-opacity .3s ease;
}

/* stroke-opacity settes fra JS ut fra avstand til utforsket område. */
.hex-grid-line{
  fill: none;
  stroke: #93b8b2;
  stroke-opacity: 0;
  stroke-width: 1.2;
  transition: stroke-opacity .9s ease;
}
/* Klikkbar (mulig å trykke på): stiplet kant som sakte "marsjerer" med
   klokken rundt hexagonen. Ingen kraftig glød - bare en rolig puls i
   styrken, i 1/4 av farten den hadde før. */
.hex.reachable .hex-outline{
  stroke: url(#hexEdgeGrad);
  stroke-width: 2.2;
  stroke-opacity: 1;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(79,240,228,.35));
  animation:
    hexPulseGlow 5.2s ease-in-out infinite,
    hexDashMarch 12s linear infinite;
}
@keyframes hexPulseGlow{
  0%, 100%{ stroke-opacity: .68; stroke-width: 1.9; }
  50%{ stroke-opacity: 1; stroke-width: 2.6; }
}
@keyframes hexDashMarch{
  from{ stroke-dashoffset: 0; }
  to{ stroke-dashoffset: -100; }
}

/* Avdekket (allerede trykket på): kanten tar rutas egen neonfarge, men
   står stille - den skal tydelig IKKE se klikkbar ut. */
.hex.revealed .hex-outline{
  stroke: var(--neon-edge, rgba(234,247,244,.5));
  stroke-width: 1.5;
  stroke-opacity: .85;
  filter: drop-shadow(0 0 5px var(--neon-glow, transparent));
}

/* Selve ruteflaten under tåken. */
.hex-face{ fill: #080b11; }
.hex-face.open{ fill: url(#hexFaceOpen); transition: fill .6s ease; }

/* Neonfyllet på løste ruter. Gradienten (bygget per rute i JS) dreier
   både farge og lyshet gjennom ruta, så flaten får dybde og flere
   nyanser i stedet for en flat tone. */
.hex-neon{
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  /* Mørk innerrand: gjør at flaten leses som en innfelt plate. */
  stroke: rgba(0,0,0,.42);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 7px var(--neon-glow, transparent));
}
.hex-neon.lit{
  opacity: 1;
  animation: hexNeonIgnite 1.15s ease-out;
}
.hex-neon.settled{
  animation: hexNeonBreathe var(--breathe, 12s) ease-in-out infinite;
  animation-delay: var(--breathe-delay, 0s);
}
@keyframes hexNeonIgnite{
  0%{ opacity: 0; filter: brightness(2.4) saturate(1.5); transform: scale(.84); }
  38%{ opacity: 1; filter: brightness(1.75) saturate(1.3); transform: scale(1.07); }
  100%{ opacity: 1; filter: brightness(1) saturate(1); transform: scale(1); }
}
/* Pustingen animerer BARE opacity. Å animere filter her ville tvunget
   ny filterberegning hver frame for hver eneste løste rute. */
@keyframes hexNeonBreathe{
  0%, 100%{ opacity: .93; }
  50%{ opacity: 1; }
}

/* Glansstripa ligger over neonfyllet. */
.hex-sheen{
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.3s ease;
}
.hex-sheen.lit{ opacity: 1; }

/* Regnestykket og ikonene som står i rutene. Ligger over tåken, men tar
   ikke imot klikk - selve ruta under skal fange trykket. */
.merke-lag{ pointer-events: none; }

.hex-merketekst{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  fill: #a6ffc4;
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: -.02em;
  opacity: 0;
  transition: opacity .55s ease;
  filter: drop-shadow(0 0 5px rgba(82,224,142,.95)) drop-shadow(0 0 13px rgba(82,224,142,.5));
}
.hex-merketekst.synlig{ opacity: 1; }

.hex-ikon{
  fill: #a6ffc4;
  opacity: 0;
  transition: opacity .55s ease, fill .6s ease;
  filter: drop-shadow(0 0 6px rgba(82,224,142,.9));
}
.hex-ikon.synlig{ opacity: 1; }
/* Når ikonruta er løst blir ikonet en mørk silhuett på den lyse flata. */
.hex-ikon.lost{
  fill: rgba(3,22,12,.7);
  opacity: .9;
  filter: none;
}

/* Ringbølgen som slår utover når en rute løses. */
.hex-ripple{
  fill: none;
  stroke-width: 2.4;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  animation: hexRipple 1.05s cubic-bezier(.16,.7,.3,1) forwards;
}
@keyframes hexRipple{
  0%{ transform: scale(.94); opacity: .85; stroke-width: 3.2; }
  100%{ transform: scale(2.3); opacity: 0; stroke-width: .6; }
}

/* Tåkefeltet: ett sammenhengende lag over hele brettet, ikke én lapp per
   rute. To skydrev i ulik skala og fart gir dybde, og masken er uskarp,
   slik at tåken får myke kanter og legger seg litt over rutene. */
/* Hele tåkefeltet puster sakte, så bildet aldri står helt stille. */
.fog-field{ animation: hexFogBreathe 27s ease-in-out infinite; }
@keyframes hexFogBreathe{
  0%, 100%{ opacity: .94; }
  50%{ opacity: 1; }
}

/* Sløret er bevisst ikke helt ugjennomtrengelig: rutenettet under skal så
   vidt ane seg der tåken er tynn. Ruteflatene er nesten samme mørke tone
   som sløret, så de forblir skjult uansett. */
.fog-veil{ fill: #05070d; opacity: .84; }

.fog-cloud{
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
}
/* Fire lag i ulik skala og fart. Ulik retning og tempo gir parallakse,
   som er det som får tåken til å oppleves som et rom med dybde. */
.fog-cloud-a{ opacity: .52; animation: hexFogDriftA 64s ease-in-out infinite; }
.fog-cloud-b{ opacity: .34; animation: hexFogDriftB 41s ease-in-out infinite; }
.fog-cloud-c{ opacity: .42; animation: hexFogDriftC 97s ease-in-out infinite; }
.fog-cloud-d{ opacity: .16; animation: hexFogDriftD 150s linear infinite; }

@keyframes hexFogDriftA{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-3.2%, 2.4%) scale(1.08); }
}
@keyframes hexFogDriftB{
  0%, 100%{ transform: translate(0,0) scale(1.05); }
  50%{ transform: translate(4.4%, -2.8%) scale(1); }
}
@keyframes hexFogDriftC{
  0%, 100%{ transform: translate(2.5%, 1.5%) scale(1.12); }
  50%{ transform: translate(-2.5%, -2%) scale(1.02); }
}
@keyframes hexFogDriftD{
  0%{ transform: translate(-1.5%, 0) scale(1.04); }
  50%{ transform: translate(1.5%, -1%) scale(1.04); }
  100%{ transform: translate(-1.5%, 0) scale(1.04); }
}

.fog-sheen{
  fill: url(#hexFogSheen);
  opacity: .8;
}

/* Lyset som fanges i tåken rundt en åpnet rute. */
.hex-halo{
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.hex-halo.lit{ opacity: 1; }

.fog-vignette{
  fill: url(#hexVignette);
  pointer-events: none;
}

/* Masken styrer hvor tåken finnes: hvit over hele flaten, med svarte hull
   der ruter er avdekket. fill-opacity settes fra JS ut fra avstanden til
   nærmeste avdekkede rute, så tåken er lett nær det utforskede og tykk
   lenger ute. Uskarpheten på maskegruppa gjør hullkantene myke. */
.fogmask-tile{
  fill: #000000;
  fill-opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill-opacity 1.1s ease;
}
/* Når en rute avdekkes blåser tåken litt utover før den legger seg. */
.fogmask-tile.revealing{ animation: hexFogRetreat 1.1s ease-out; }
@keyframes hexFogRetreat{
  0%{ transform: scale(.82); }
  45%{ transform: scale(1.20); }
  100%{ transform: scale(1); }
}

.hex.shake{ animation: hexShakeX .4s ease; }
@keyframes hexShakeX{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-4px); }
  40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
}

.hex-star{
  animation: hexTwinkle var(--tw-dur,3s) ease-in-out infinite;
  animation-delay: var(--tw-delay,0s);
}
@keyframes hexTwinkle{
  0%,100%{ opacity: var(--base-op,.7); }
  50%{ opacity: calc(var(--base-op,.7) * .3); }
}

/* ---------- Lett modus ---------- */

/* Skrur av all løpende bevegelse og de dyreste glød-filtrene. Tåkas
   støylag bygges ikke i det hele tatt (se hexgrid.js) - det er det tyngste.
   Merk at bare animasjonen fjernes, ikke opacity: elementene faller da
   tilbake på sluttverdien fra sin egen klasse. */
.lett .fog-field,
.lett .fog-cloud,
.lett .hex-neon,
.lett .hex-neon.lit,
.lett .hex-neon.settled,
.lett .hex-outline,
.lett .finale-kant,
.lett .fogmask-tile{
  animation: none !important;
}

.lett .hex-neon,
.lett .hex-outline,
.lett .hex-merketekst,
.lett .hex-ikon,
.lett .finale-fyll,
.lett .finale-undertekst{
  filter: none !important;
}

.lett .fog-enkel .fog-veil{ opacity: .9; }
.lett .hex-halo{ transition: none !important; }
.lett .hex.reachable:hover{ transform: none; }

.btn-grafikk.aktiv{
  background: linear-gradient(135deg, rgba(82,224,142,.24), rgba(79,240,228,.22));
  border-color: rgba(79,240,228,.45);
}

/* ---------- Statistikk ---------- */

.btn-stat{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
}
.btn-stat svg{
  width: 15px;
  height: 15px;
  fill: var(--green);
  display: block;
}

.stat-bakgrunn{
  position: fixed; inset: 0;
  background: rgba(3,7,10,.74);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 60;
}

.stat-kort{
  width: 100%;
  max-width: 400px;
  max-height: 86vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--edge);
  border-radius: 22px;
  padding: 18px 20px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: oppgaveInn .26s cubic-bezier(.2,.9,.3,1);
}

.stat-topp{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.stat-topp h2{
  font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
  font-size: 18px;
  letter-spacing: .06em;
  margin: 0;
}
.stat-lukk{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--edge);
  color: var(--muted);
  border-radius: 999px;
  width: 30px; height: 30px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.stat-lukk:hover{ color: var(--ink); border-color: var(--cyan); }

.stat-fliser{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.stat-flis{
  background: rgba(255,255,255,.035);
  border: 1px solid var(--edge);
  border-radius: 13px;
  padding: 11px 12px;
}
.stat-tall{
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 23px;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-navn{
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.stat-bolk{ margin-bottom: 16px; }
.stat-bolk h3{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-2, var(--muted));
  margin: 0 0 8px;
  font-weight: 700;
}

.stat-rad{
  display: grid;
  grid-template-columns: 62px 1fr 34px;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.stat-rad-navn{ font-size: 12.5px; color: var(--ink); }
.stat-rad-verdi{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stat-spor{
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.stat-soyle{
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #35c977, var(--green));
}

.stat-bunn{
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--edge);
  line-height: 1.6;
}
.stat-tomt{ font-size: 13px; color: var(--muted); margin: 6px 0 0; }

/* ---------- Oppgavekortet ---------- */

.oppgave-bakgrunn{
  position: fixed; inset: 0;
  background: rgba(3,7,10,.74);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 45;
}

.oppgave-kort{
  --rute-farge: var(--green);
  width: 100%; max-width: 330px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--edge);
  border-radius: 22px;
  padding: 20px 18px 16px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03);
  animation: oppgaveInn .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes oppgaveInn{
  from{ opacity: 0; transform: translateY(14px) scale(.96); }
  to{ opacity: 1; transform: none; }
}
.oppgave-kort.rister{ animation: oppgaveRist .42s ease; }
@keyframes oppgaveRist{
  0%,100%{ transform: translateX(0); }
  22%{ transform: translateX(-7px); }
  44%{ transform: translateX(7px); }
  66%{ transform: translateX(-4px); }
  85%{ transform: translateX(4px); }
}

/* Merket tar fargetonen til ruta oppgaven gjelder. */
.oppgave-merke{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
  font-size: 19px; font-weight: 700;
  color: var(--rute-farge);
  background: color-mix(in srgb, var(--rute-farge) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rute-farge) 35%, transparent);
  margin-bottom: 12px;
}

.oppgave-stykke{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(30px, 9vw, 40px);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px color-mix(in srgb, var(--rute-farge) 40%, transparent);
}

.oppgave-svar{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 27px;
  min-height: 36px;
  color: var(--rute-farge);
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--edge);
  padding-bottom: 6px;
  margin: 8px 4px 10px;
}

.oppgave-melding{
  min-height: 19px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
}
.oppgave-melding.feil{ color: #ff8d7a; }
.oppgave-melding.riktig{ color: var(--green); }

.tastatur{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tast{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 20px;
  padding: 15px 0;
  border-radius: 13px;
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.035);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s ease, transform .1s ease;
}
.tast:hover{ background: rgba(255,255,255,.07); }
.tast:active{ transform: scale(.95); }
.tast-slett{ color: var(--muted); }
.tast-ok{
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #04211d;
  border: none;
  font-size: 22px;
}

.oppgave-avbryt{
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
}
.oppgave-avbryt:hover{ color: var(--ink); }

.win-overlay{
  position: fixed; inset: 0;
  background: rgba(2,6,6,.8);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 50;
}
.win-card{
  text-align: center;
  max-width: 360px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--edge);
  border-radius: 20px;
  padding: 30px 26px;
}
.win-card h2{
  font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
  font-size: 22px;
  margin: 0 0 8px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.win-card p{ color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.win-card .win-niva{ color: var(--green); font-weight: 700; }
.win-card p:last-of-type{ margin-bottom: 18px; }

[hidden]{ display: none !important; }

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