/* ══ Tokens. Ett tema med vilje: dette er en natthimmel. ═══════════════════ */
:root{
  --rom:#04060D;
  --glass:rgba(14,18,40,.66);
  --glass-2:rgba(24,30,64,.74);
  --kant:rgba(170,185,255,.12);
  --kant-2:rgba(170,185,255,.22);
  --kant-3:rgba(190,205,255,.42);
  --tekst:#EEF1FF; --tekst-2:#AAB3D8; --tekst-3:#707AA6;
  /* Stjernesekvensen: blåhvit er varmest, rød er kaldest. Som ekte stjerner. */
  --s0:#9DBBFF; --s1:#F4F6FF; --s2:#FFD98A; --s3:#FF9A52; --s4:#D2553F;
  --aksent:#C9D9FF; --aksent-mork:#0A1330;
  --bane:#A493FF;     /* koblinger — en annen slags ting enn stjerner */
  --komet:#FFCF7A;    /* tanker uten plass */
  --varm:#FFB27A;
  --fare:#FF8A6B;
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --brod:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fjaer:cubic-bezier(.22,1,.36,1);
  --fangst-h:72px;
  --ark-h:260px;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--rom);color:var(--tekst);font:400 15px/1.5 var(--brod);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;margin:0}
button{cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--s0);outline-offset:2px;border-radius:10px}
::selection{background:rgba(157,187,255,.35)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#lerret{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:manipulation}
.skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skjult:focus-within{position:fixed;left:16px;top:70px;width:auto;height:auto;clip-path:none;z-index:95;
  display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 32px);background:var(--glass-2);padding:10px;border-radius:14px}
.skjult button{padding:6px 10px;border-radius:9px;border:1px solid var(--kant-2)}

/* ══ Små byggeklosser ═════════════════════════════════════════════════════ */
.etikett{font:600 11px/1 var(--brod);letter-spacing:.09em;text-transform:uppercase;color:var(--tekst-3)}
.tall{font:500 12px/1 var(--mono);font-variant-numeric:tabular-nums}
.prikk{width:8px;height:8px;border-radius:50%;background:var(--c,#fff);box-shadow:0 0 10px var(--c,#fff);flex:none;display:inline-block}
.prikk.stor{width:11px;height:11px;box-shadow:0 0 14px var(--c,#fff),0 0 3px var(--c,#fff)}

.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 18px;border-radius:21px;white-space:nowrap;
  font:600 14.5px/1 var(--brod);letter-spacing:-.005em;
  transition:transform .14s var(--fjaer),background .2s,border-color .2s,color .2s,opacity .2s,box-shadow .2s
}
.knapp:active{transform:scale(.955)}
.knapp:disabled{opacity:.35;cursor:default;transform:none}
.knapp.primar{
  color:var(--aksent-mork);
  background:linear-gradient(180deg,#E3EBFF 0%,#B2C8FF 100%);
  box-shadow:0 8px 24px -10px rgba(157,187,255,.85),inset 0 1px 0 rgba(255,255,255,.7)
}
.knapp.primar:hover{box-shadow:0 10px 30px -10px rgba(157,187,255,1),inset 0 1px 0 rgba(255,255,255,.7)}
.knapp.sekundar{background:rgba(170,185,255,.08);border:1px solid var(--kant-2);color:var(--tekst)}
.knapp.sekundar:hover{background:rgba(170,185,255,.13);border-color:var(--kant-3)}
.knapp.stille{color:var(--tekst-2);padding:0 12px;height:36px}
.knapp.stille:hover{color:var(--tekst);background:rgba(170,185,255,.07)}
.knapp.liten{height:34px;padding:0 13px;font-size:13.5px;border-radius:17px}
.knapp.fare{color:var(--fare)}
.knapp.fare:hover{background:rgba(255,138,107,.1)}
.knapp.varm{background:rgba(255,178,122,.1);border:1px solid rgba(255,178,122,.32);color:#FFD3B0}
.knapp.varm:hover{background:rgba(255,178,122,.16)}

.rund{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none;
  background:var(--glass);border:1px solid var(--kant);color:var(--tekst-2);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:color .2s,border-color .2s,transform .14s var(--fjaer)
}
.rund:hover{color:var(--tekst);border-color:var(--kant-2)}
.rund:active{transform:scale(.92)}
.rund.liten{width:34px;height:34px}
.merketall{
  position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--komet);color:#1C1305;font:600 10.5px/19px var(--mono);text-align:center;
  box-shadow:0 0 14px rgba(255,207,122,.55)
}

.chip{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 10px;border-radius:15px;
  background:rgba(170,185,255,.07);border:1px solid var(--kant);font:500 13.5px/1 var(--brod);color:var(--tekst);
  transition:background .2s,border-color .2s,transform .14s var(--fjaer);white-space:nowrap
}
button.chip:hover{background:rgba(170,185,255,.12);border-color:var(--kant-2)}
button.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:rgba(201,217,255,.16);border-color:rgba(201,217,255,.6);box-shadow:0 0 0 3px rgba(157,187,255,.1)}

.baneikon{flex:none;color:var(--tekst-2)}