/* GENERERT FIL. Ikke rediger for hånd.
   Palett og fonter: design/lexiguesser-design/assets/tokens.css
   Komponentregler:  scripts/data/info-pages/styles.css
   Kjør: npm run build:info */

@font-face{
  font-family:'Young Serif';
  src:url('/assets/fonter/young-serif.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Literata';
  src:url('/assets/fonter/literata.woff2') format('woff2-variations');
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Literata';
  src:url('/assets/fonter/literata-kursiv.woff2') format('woff2-variations');
  font-weight:200 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Atkinson';
  src:url('/assets/fonter/atkinson.woff2') format('woff2-variations');
  font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
  /* ---- Flatestigen: dypere toner av basens kulør (H 172°, S 33%) --------- */
  --bg-deep:#0F1E1B;/* inputfelt, dypeste nivå                               */
  --bg-0:#162A27;   /* nedsenkede felt, stripete rader                       */
  --bg:#1C3632;     /* base                                                  */
  --bg-2:#264843;   /* kort og paneler — LYSERE enn basen                    */
  --bg-3:#305D56;   /* hover, hevet flate                                    */
  --bg-glow:#3E776E;/* radial glød øverst. Kun med lav alfa.                 */
  --shadow-col:#08100F; /* KUN skygge. Aldri som linje.                      */

  /* ---- Kantlinjer. Alltid lysere enn flaten, med tydelig kulør. --------- */
  --line-1:#315F57;   /* 1,77 mot basen · spenn 45  skillelinje i et kort    */
  --line-2:#427B72;   /* 2,65 mot basen · spenn 57  STANDARD KANT overalt    */
  --line-3:#55998E;   /* 3,90 mot basen · spenn 68  fremhevet, valgt         */

  /* ---- Tekst på teal. Tallet er kontrast mot --bg. ---------------------- */
  --on-bg:#F6F3EA;        /* 11,66  all brødtekst og UI-tekst                */
  --silver:#E0E0E0;       /*  9,80  stemmen                                  */
  --on-bg-mute:#7BA29C;   /*  4,52  metadata, hjelpetekst. Ikke lavere.      */

  /* ---- Gullet: én flate, to teksttoner ---------------------------------- */
  /* Metningen er senket fra 80 % til 66 %. Den gamle gulen var nærmere en
     varsellampe enn et beslag, og med så mye gull i grensesnittet ble den
     slitsom. Kontrasten gikk opp, ikke ned: 5,65 mot basen mot tidligere 5,49. */
  --gold:#C3AB28;         /* 5,65 mot basen — lovlig både som flate og tekst  */
  --gold-hover:#D8C141;   /* blekk oppå: 9,70                                */
  --gold-active:#98861F;  /* blekk oppå: 4,81                                */
  --gold-ink:#776818;     /* 5,01  gull som tekst på PAPIR                   */

  /* ---- Papiret ---------------------------------------------------------- */
  --paper:#F6F3EA;
  --paper-edge:var(--line-2); /* 4,39 mot papiret — samme kant som alt annet */
  --ink:#1C1913;              /* 15,80                                       */
  --ink-soft:#5A544A;         /*  6,76                                       */

  /* ---- Status. Gullet har overtatt interaktiv-rollen, så feil trenger sin
          egen rød. Par, fordi ingen enkeltverdi dekker begge flatene.  ----- */
  --ok-on-bg:#29AE60;      /* 5,53 mot teal                                  */
  /* Bonusmerket er en FLATE, ikke tekst, og trenger derfor en lysere grønn enn
     --ok-on-bg: ikonet inni tegnes i en mørk grønntone, og den trenger noe å
     stå imot. --ok-ink er den tonen. */
  --ok-surface:#3FC878;    /* 8,13 for blekk, 5,86 for --ok-ink              */
  --ok-ink:#0C3B21;        /* tekst og ikon oppå --ok-surface                */
  --ok-on-paper:#1D7C45;   /* 4,51 mot papir                                 */
  --err-on-bg:#FF6857;     /* 4,51 mot teal — TEKST                          */
  --err-mark:#F51800;      /* 3,50 mot teal — IKKE-TEKST                     */
  --err-on-paper:#D52815;  /* 4,84 mot papir                                 */

  /* ---- Medaljenivåene ---------------------------------------------------
     Et eget betydningssystem, ikke en del av paletten. Fire nivåer som skal
     kunne skilles på avstand — låner de gull og sølv fra paletten, kollapser
     bronse/gull og sølv/perle til to par som ser like ut. Verdiene brukes kun
     som svake flater og kanter på medaljekortene, aldri som tekst.

     Merk at --tier-gold IKKE er --gold. Paletten sin gull er interaktiv-fargen;
     denne er en materialbeskrivelse. At de ligner er greit — at de er samme
     token ville betydd at et gullnivå og en knapp er i slekt, og det er de ikke. */
  --tier-bronze:#C8834F;  --tier-bronze-glow:#D9955A;
  --tier-silver:#C9D3D7;  --tier-silver-glow:#DFE9EC;
  --tier-gold:#E4C766;    --tier-gold-glow:#F0D783;
  --tier-pearl:#E7E1FF;   --tier-pearl-glow:#EFEAFF;
  --tier-pearl-face:#D8D1E6;   /* flaten er dusere enn kanten, ellers lyser den */
  --tier-locked:#7C8A82;

  /* Tall og bokstaver som står OPPÅ nivåflatene. Nivåfargene er lyse, så
     teksten må være mørk — og hver av dem tonet mot sitt eget nivå, ellers
     ser samlekortene ut som de har lånt tekst fra hverandre. */
  --tier-silver-ink:#2C3A44;   /* 9,6 mot sølvkortet  */
  --tier-pearl-ink:#4D4568;    /* 8,1 mot papir       */
  --tier-pearl-halo:#F0C8FF;   /* kun uskarp glød, aldri en flate */

  /* ---- Fontstakker: tre roller, ingen overlapp -------------------------- */
  --font-voice:'Young Serif',Georgia,serif;   /* logo, titler, klosser. Vekt 400. */
  --font-read:'Literata',Georgia,serif;       /* alt som leses + alle tall       */
  --font-ui:'Atkinson',system-ui,sans-serif;  /* knapper, etiketter, felt        */

  /* ---- Typeskala -------------------------------------------------------- */
  /* Nedre ende løftet for lesbarhet på store skjermer: de tre minste går i en
     jevn rekke på .06rem (0,96 px) opp til md, som er urørt. */
  --text-2xs:.68rem; --text-xs:.74rem; --text-sm:.80rem; --text-md:.86rem;
  --text-lg:1rem;    --text-xl:1.2rem; --text-2xl:1.5rem; --text-3xl:2rem;
  --text-4xl:2.5rem;  --text-5xl:3.4rem; /* kun display-glyfer, ikke tekst */

  --leading-ui:1.35; --leading-read:1.6; --measure:60ch;

  --track-display:-.015em; --track-title:-.005em; --track-label:.16em;

  /* Literatas optiske akse følger graden teksten vises i.                   */
  --li-sm:'opsz' 11; --li-md:'opsz' 14; --li-lg:'opsz' 19; --li-xl:'opsz' 24;

  /* ---- Form: 2 px på det man trykker, 3 px på det som holder innhold ---- */
  --r-sm:2px; --r-lg:3px; --r-circle:50%;
  --radius:var(--r-sm);

  /* Unntaket fra skarpe hjørner. Varselprikker og nivåbrikka er ikke flater som
     holder innhold — de er merker, og et merke leses som et merke når det er
     rundt. Skarpe hjørner gjorde dem til små firkantede etiketter i stedet.
     Gjelder KUN de to: alt annet følger 2/3 px. */
  --r-pill:999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px;

  /* Skygger tonet mot basens kulør — nøytralt svart ser grått ut på en
     mettet flate.                                                           */
  --shadow-pop:0 12px 24px #08100F99;
  --shadow-paper:0 16px 30px -12px #08100Fb3;
  --shadow-inset:inset 0 -2px 0 #0F1E1Bcc;   /* basefargen, ikke svart      */
  --ring:0 0 0 2px var(--on-bg);   /* papirfarget fokusring: 5,41 mot teal   */

  --dur-state:150ms; --dur-enter:260ms;
  --ease-enter:cubic-bezier(.32,0,.36,1);

  /* ---- Effektfarger. Perlemorbåndet og glanssveipet. Egne tokens fordi de
          ellers ville vært eneste rå hex-verdier utenfor :root. ----------- */
  --pearl-white:#FFFFFF;
  --pearl-warm:#FFF9D8;
  --pearl-rose:#FFD8ED;
  --pearl-mint:#BFF5D9;
  --pearl-lilac:#F3D6FF;
  --sheen-1:#EDEDED;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* Komponentreglene for informasjonssidene.
   ---------------------------------------------------------------------------
   Denne fila er KILDEN. Paletten, fontene og @font-face limes på toppen av
   build-info-pages.mjs, hentet rett fra designsystemets tokens.css – så sidene
   kan ikke drifte fra spillet slik de gjorde da fargene sto skrevet to steder.
   Rediger her, kjør `npm run build:info`.

   Sidene er lesestoff. Derfor er Literata hovedfonten her, mens Young Serif
   bærer overskriftene og Atkinson kun det som er kontroller. */

*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100dvh;
  background:
    radial-gradient(1200px 620px at 50% -12%,color-mix(in srgb,var(--bg-glow) 18%,transparent) 0%,transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--on-bg);
  font-family:var(--font-ui);
  font-size:var(--text-md);
  line-height:var(--leading-ui);
  font-synthesis:none;
  font-optical-sizing:auto;
  /* Bunnen er 8 px, ikke 80: foten skal ligge like tett på sidekanten her som i
     spillet, der body har nøyaktig 8 px under seg. Luften mellom artikkelen og
     foten er fotens egen toppmarg, ikke en sokkel under hele dokumentet. */
  padding:clamp(26px,5vw,54px) clamp(16px,4vw,30px) 8px;
  -webkit-font-smoothing:antialiased;
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;
  box-shadow:var(--ring);
}
.infoshell{
  width:min(1140px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:250px minmax(0,760px);
  gap:clamp(28px,5vw,64px);
  align-items:start;
  justify-content:center;
}

/* ---------- Topplinje ----------
   Samme linje som i spillet: klokka først, ordmerket ved siden av, lyden til
   høyre, og en skillelinje under som binder det sammen til én meny. Den ligger
   utenfor .infoshell fordi den skal spenne over hele sida, ikke bare
   innholdsspalta. */
.infotopbar{
  width:min(1140px,100%);
  margin:0 auto clamp(24px,4vw,40px);
  padding:0 6px 10px 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  border-bottom:1px solid var(--line-1);
}
.infotopmain{display:flex;align-items:center;gap:clamp(18px,5vw,64px);min-width:0}
/* Klokka: Literata med tabularsiffer, gullkolon. Fast bredde på tallparene, så
   ordmerket ikke flytter seg når timen skifter. */
.infoclock{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  flex:none;
  font-family:var(--font-read);
  font-size:clamp(1rem,2vw,1.25rem);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  line-height:1;
  color:var(--paper);
  text-decoration:none;
}
.infoclock:hover{color:var(--paper)}
.infoclockcolon{color:var(--gold);padding-inline:.06em}
#infoClockHours,#infoClockMinutes{display:inline-block;width:2.1ch;text-align:center}
/* Blinket for klokkeslettene som har sin egen lenke. Absolutt plassert: i
   flyten ville stjerna dyttet sifrene sidelengs hvert minutt den kom. */
.infoclockspark{
  position:absolute;
  right:calc(100% + 7px);
  top:50%;
  width:.86em;
  height:.86em;
  transform:translateY(-50%) scale(.4);
  opacity:0;
  pointer-events:none;
  color:inherit;
}
.infoclockspark svg{width:100%;height:100%;display:block;fill:currentColor}
.infoclockspark.flash{animation:infoclocksparkflash 1s ease-in-out}
@keyframes infoclocksparkflash{
  0%{opacity:0;transform:translateY(-50%) scale(.4) rotate(-25deg)}
  40%{opacity:1;transform:translateY(-50%) scale(1) rotate(0deg)}
  70%{opacity:.85;transform:translateY(-50%) scale(.96) rotate(4deg)}
  100%{opacity:0;transform:translateY(-50%) scale(.5) rotate(14deg)}
}

/* Lydkontrollene er fjernet fra disse sidene: lyden bor i spillet, se
   kommentaren i behaviour.js. */

/* ---------- Sidemeny ---------- */
.infonav{
  position:sticky;
  top:clamp(26px,5vw,44px);
  display:grid;
  gap:var(--sp-4);
}
/* Ordmerket i sølv, uten perlemor – samme som i spillet. Perlemoreffekten
   tilhører vennenavn og hører ikke hjemme her. */
.infobrand{
  display:inline-block;
  padding:0 2px;
  font-family:var(--font-voice);
  font-weight:400;
  font-size:var(--text-2xl);
  letter-spacing:var(--track-display);
  color:var(--silver);
  text-decoration:none;
}
.infobrand:hover{color:var(--gold)}
.infobrand .dot{color:var(--gold)}
/* Versjonsmerket står til høyre for ordmerket, i punktumets gull. */
.infobrand .infoversion{
  margin-left:6px;
  font-family:var(--font-read);
  font-size:.5em;
  font-weight:600;
  letter-spacing:0;
  color:var(--gold);
  vertical-align:.35em;
}
.infonavlist{
  display:grid;
  gap:var(--sp-1);
  padding:var(--sp-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--bg-2);
}
.infonavlink{
  display:block;
  padding:11px 13px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  color:var(--on-bg);
  font-family:var(--font-ui);
  font-weight:700;
  font-size:var(--text-sm);
  text-decoration:none;
  transition:background var(--dur-state) ease,color var(--dur-state) ease;
}
.infonavlink:hover{background:var(--bg-3)}
/* Gullflate tar mørk tekst. Sølv på gull er 1,79:1 og usynlig. */
.infonavlink[aria-current="page"]{
  color:var(--ink);
  background:var(--gold);
  border-color:var(--line-2);
}
.backgame{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:44px;
  padding:13px 16px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  background:var(--gold);
  color:var(--ink);
  font-family:var(--font-ui);
  font-weight:700;
  font-size:var(--text-md);
  text-decoration:none;
  transition:background var(--dur-state) ease;
}
.backgame:hover{background:var(--gold-hover)}
.backgame svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- Innhold ---------- */
main{min-width:0}
h1{
  font-family:var(--font-voice);
  font-weight:400;
  font-size:var(--text-3xl);
  letter-spacing:var(--track-display);
  line-height:1.12;
  color:var(--silver);
  margin-bottom:var(--sp-3);
  text-wrap:balance;
}
h2{
  margin:var(--sp-12) 0 var(--sp-1);
  padding-top:var(--sp-6);
  border-top:1px solid var(--line-1);
  font-family:var(--font-voice);
  font-weight:400;
  font-size:var(--text-xl);
  letter-spacing:var(--track-title);
  line-height:1.3;
  color:var(--gold);
  text-wrap:balance;
}
h3{
  margin:var(--sp-6) 0 var(--sp-1);
  font-family:var(--font-voice);
  font-weight:400;
  font-size:var(--text-lg);
  letter-spacing:var(--track-title);
  color:var(--silver);
}
/* Brødteksten er det sidene faktisk er til for: Literata, 60ch, luftig. */
p,ul{
  margin:9px 0;
  max-width:var(--measure);
  font-family:var(--font-read);
  font-variation-settings:var(--li-md);
  font-size:var(--text-lg);
  line-height:var(--leading-read);
  color:var(--on-bg);
  text-wrap:pretty;
}
ul{padding-left:22px}
li{margin:5px 0}
em,i{font-family:var(--font-read);font-style:italic}
strong,b{font-weight:600}
a{
  color:var(--gold);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--gold) 55%,transparent);
}
a:hover{color:var(--on-bg);text-decoration-color:var(--gold)}
.lead{
  margin:0 0 var(--sp-2);
  font-family:var(--font-read);
  font-variation-settings:var(--li-lg);
  font-size:var(--text-xl);
  line-height:var(--leading-read);
  color:var(--on-bg);
}
/* Etikettstilen fra ordboka: liten grad, kraftig sperring, gull. */
.updated{
  display:inline-block;
  margin:var(--sp-2) 0 var(--sp-5);
  padding:5px 12px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  font-family:var(--font-ui);
  color:var(--gold);
  font-size:var(--text-2xs);
  font-weight:700;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
.creditlist{
  display:grid;
  gap:7px;
  margin:var(--sp-3) 0;
  padding-left:0;
  max-width:var(--measure);
  list-style:none;
}
.creditlist li{
  margin:0;
  padding:10px 13px;
  border:1px solid var(--line-1);
  border-radius:var(--r-lg);
  background:var(--bg-2);
  font-family:var(--font-read);
  font-size:var(--text-md);
  line-height:1.55;
}
/* ---------- Bunnlinje ----------
   Spillets egen fot: leverandørmerkene, årstallet, lenka tilbake til «Om» og
   rettighetslinja. Den står utenfor .infoshell og spenner over hele sida, som
   topplinja – en fot som bare dekket tekstspalta ville sett ut som en del av
   artikkelen i stedet for som sidens avslutning. */
.infofoot{
  width:min(1140px,100%);
  margin:72px auto 0;
  font-family:var(--font-ui);
  color:var(--on-bg-mute);
  font-size:var(--text-2xs);
  line-height:1.5;
  text-align:center;
}
.infofoot .footlogos{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-bottom:var(--sp-2)}
/* Merkene er PNG-er i hver sin egen farge. PNG-en brukes som maske over
   footer-tekstens egen farge – filterkjeder treffer aldri en bestemt kulør
   presist, masken gjør at logoen ER tekstfargen. Samme grep som i spillet. */
.infofoot .footlogo{display:inline-block;height:17px;background:var(--on-bg-mute);
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.infofoot .footlogo.supabase{aspect-ratio:1580/305;-webkit-mask-image:url('/assets/ikoner/diverse/supabase-logo.png');mask-image:url('/assets/ikoner/diverse/supabase-logo.png')}
.infofoot .footlogo.netlify{aspect-ratio:2356/660;-webkit-mask-image:url('/assets/ikoner/diverse/netlify-logo.png');mask-image:url('/assets/ikoner/diverse/netlify-logo.png')}
.infofoot .footbrand{font-size:var(--text-sm);color:var(--on-bg-mute)}
.infofoot .footlinks{margin:5px 0}
.infofoot .footlinks a{
  color:inherit;
  font-size:var(--text-2xs);
  text-decoration:underline;
  text-decoration-color:var(--bg-glow);
}
.infofoot .footlinks a:hover{color:var(--gold);text-decoration-color:var(--gold)}
/* Rettighetslinja er finstilt, ikke lesestoff: den skal kunne stå der uten å
   konkurrere med artikkelen over. Derfor overstyres p-regelen fra brødteksten. */
.infofoot .footlegal{
  max-width:64ch;
  margin:var(--sp-2) auto 0;
  font-family:var(--font-ui);
  font-size:var(--text-2xs);
  line-height:1.5;
  color:var(--on-bg-mute);
}

/* ---------- Mobil ----------
   Sidemenyen legger seg over innholdet som en rad med knapper, og
   lenkeknappen tilbake til spillet blir like bred som innholdet. */
@media (max-width:860px){
  body{padding:22px 16px 8px}
  .infoshell{grid-template-columns:1fr;gap:var(--sp-6)}
  .infonav{position:static;gap:var(--sp-3)}
  .infobrand{font-size:var(--text-xl)}
  .infonavlist{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
  .infonavlink{flex:1 1 auto;padding:10px 12px;text-align:center;font-size:var(--text-sm)}
  /* Mobil (eierens valg 2026-08-20): den hvite sidetittelen gjentar bare
     menyvalget som alt står markert i gull rett over – den ut, og
     innledningen ned i brødtekststørrelse så sida åpner i lesetempo. */
  h1{display:none}
  /* Samme grad som brødteksten (p,ul står i text-lg) – md gjorde
     innledningen MINDRE enn resten, ikke lik. */
  .lead{font-size:var(--text-lg)}
  h2{margin-top:var(--sp-8);padding-top:18px}
  .infotopmain{gap:var(--sp-4)}
}
@media (max-width:520px){
  .infotopbar{padding-bottom:8px}
  .infoversion{display:none}
}
@media (max-width:430px){
  .infonavlink{flex:1 1 100%}
  .creditlist li{padding:9px 11px;font-size:var(--text-sm)}
}

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