/* ═══════════════════════════════════════════════════════════════
   Kippi Fotballprofilen — egen CSS.
   Tokens (--bg, --primary, --text-1 …) kommer fra /shared/kippi.css.

   Layouten er mobil først i én spalte. Fra 900 px deles spillflaten
   i to: hintstigen til venstre, gjetting og logg til høyre. Grunnen er
   at det er nettopp DE to som må ses samtidig — å måtte rulle mellom
   hintet og svarfeltet er det som gjør et gjettespill slitsomt på en
   stor skjerm.
   ═══════════════════════════════════════════════════════════════ */

/* hidden-attributtet setter display:none, men enhver display-regel i en
   klasse slår det. Modalene her er display:flex, og ville vært synlige
   fra første sekund uten dette. */
[hidden] { display: none !important; }

/* ── Hvor lyset kommer fra ────────────────────────────────────────
   Kippi er bevisst mørkt, men spillet lå på de to mørkeste trinnene
   ALENE: --surface-1 (#0c1525) og --surface-2 (#111e30), begge nesten
   umulige å skille fra --bg (#070e1b). Kjøperadene — spillets viktigste
   knapper — var i tillegg gjennomsiktige med stiplet kant, og leste som
   deaktiverte felt.

   Designsystemet har allerede trinnene over: design-tokens.css definerer
   --surface-raised (navy-750) og --surface-overlay (navy-700) nettopp for
   hevede flater. Å ta dem i bruk er å bruke systemet, ikke å bryte det.
   Reglene under holder seg innenfor den trappa:

     bakgrunn        --bg               #070e1b
     rolig flate     --surface-1        #0c1525   avdekket, ferdig lest
     hevet flate     --surface-raised   #16223b   noe du kan trykke på
     løftet flate    --surface-overlay  #1b2942   det du trykker på nå

   Regelen er: er det interaktivt, skal det ligge høyere enn det som ikke
   er det. */
:root {
  --flate-trykk:  var(--surface-raised, #16223b);
  --flate-aktiv:  var(--surface-overlay, #1b2942);
}

/* Headeren ligger UTENFOR #app og går kant til kant, slik den gjør i de
   tolv andre spillene. Ligger den inni, blir den klippet til
   innholdsbredden og ser ut som en annen header enn resten av Kippi. */
body { min-height: 100dvh; display: flex; flex-direction: column; }

#app {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────
   Hentet fra de tolv Kippi-spillene som allerede deler den. Tokenene
   (--control-h-sm, --brand, --space-*) kommer fra shared/design-tokens.css,
   som lastes etter kippi.css. Startmalens egen header var en annen — en
   ramme rundt en pil og en emoji — og gjorde spillet til et fremmedelement
   i menyen. */
.game-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 60px;
  padding: 0 var(--space-4);
  padding-top: env(safe-area-inset-top, 0);
  background: rgba(10, 17, 32, .82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle, var(--border));
  flex-shrink: 0;
}
.header-back {
  display: flex; align-items: center; justify-content: center;
  width: var(--control-h-sm); height: var(--control-h-sm); flex-shrink: 0;
  border: none; background: transparent; border-radius: var(--radius-pill, 9999px);
  color: var(--text-muted, var(--text-2)); cursor: pointer; text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.header-back svg { width: 20px; height: 20px; }
.header-back:hover { color: var(--text-primary, var(--text-1)); background: var(--surface-inset, var(--surface-2)); }

.brand {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0;
  font-family: var(--font-display); font-weight: var(--fw-bold, 700);
  font-size: 17px; letter-spacing: var(--ls-tight, -.01em);
  color: var(--text-primary, var(--text-1)); text-decoration: none;
  transition: opacity var(--t-fast) var(--ease);
}
.brand:hover { opacity: .85; }
.brand__mark { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
.brand__word { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__word span { color: var(--brand); }

.header-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: var(--control-h-sm); height: var(--control-h-sm);
  border: none; background: transparent; border-radius: var(--radius-pill, 9999px);
  color: var(--text-muted, var(--text-2)); font-size: 15px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--text-primary, var(--text-1)); background: var(--surface-inset, var(--surface-2)); }

.felt-tittel {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px; padding: 0;
}

/* ── Startskjerm ──────────────────────────────────────────── */
.ingress {
  color: var(--text-2); line-height: 1.55;
  margin: 4px 0 26px; font-size: .97rem;
}

.kategorivalg { border: 0; padding: 0; margin: 0 0 20px; }
.kategori { display: block; margin-bottom: 10px; cursor: pointer; }
.kategori input { position: absolute; opacity: 0; pointer-events: none; }

.kategori__kort {
  display: block;
  padding: 15px 17px;
  background: var(--surface-1);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.kategori:hover .kategori__kort { background: var(--surface-2); }
.kategori input:checked + .kategori__kort {
  border-color: var(--primary);
  background: var(--primary-dim);
}
/* Tastaturfokus må være synlig når selve radioknappen er skjult. */
.kategori input:focus-visible + .kategori__kort {
  outline: 2px solid var(--primary-light); outline-offset: 2px;
}
.kategori__navn { display: block; font-weight: 700; color: var(--text-1); margin-bottom: 3px; }
.kategori__sub  { display: block; font-size: .84rem; color: var(--text-2); line-height: 1.4; }

.kode-boks { margin-top: 22px; }
.kode-boks summary {
  cursor: pointer; color: var(--text-2); font-size: .89rem;
  padding: 8px 0; list-style: none; user-select: none;
}
.kode-boks summary::-webkit-details-marker { display: none; }
.kode-boks summary::before { content: '+ '; color: var(--primary-light); font-weight: 700; }
.kode-boks[open] summary::before { content: '− '; }
.kode-hjelp { font-size: .84rem; color: var(--text-2); line-height: 1.5; margin: 4px 0 12px; }

.kode-rad { display: flex; gap: 8px; }
.kode-felt {
  flex: 1; text-transform: uppercase; letter-spacing: .22em;
  font-family: var(--font-display); font-weight: 600; text-align: center;
}
.feil { color: var(--red); font-size: .85rem; margin: 10px 0 0; }
.laster { color: var(--text-3); font-size: .87rem; text-align: center; margin-top: 20px; }

/* ── Statuslinje ──────────────────────────────────────────── */
.statuslinje {
  display: flex; align-items: center; gap: 10px;
  font-size: .84rem; color: var(--text-2);
  padding: 2px 2px 12px;
}
.statuslinje b { color: var(--text-1); font-weight: 700; }
.runde-tall { flex: 1; }
.faktor {
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  color: var(--gold); background: var(--gold-dim);
  padding: 3px 9px; border-radius: var(--r-full);
}

/* ── Pottemåleren ─────────────────────────────────────────── */
.potte { margin-bottom: 22px; }
.potte__spor {
  height: 6px; border-radius: var(--r-full);
  background: var(--surface-2); overflow: hidden;
}
.potte__fyll {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--r-full);
  transition: width var(--t-slow) var(--ease), background var(--t-base) var(--ease);
}
/* Fargen forteller hvor mye som står igjen, uten å måtte leses. */
.potte__fyll.er-lav  { background: linear-gradient(90deg, #d99a1e, var(--gold)); }
.potte__fyll.er-kritisk { background: linear-gradient(90deg, #c94f4f, var(--red)); }
.potte__tall { margin-top: 8px; font-size: .84rem; color: var(--text-2); }
.potte__tall b { color: var(--text-1); font-weight: 700; font-size: 1.05rem; }

/* ── Spillflaten ──────────────────────────────────────────── */
.spillflate { display: flex; flex-direction: column; gap: 26px; }

/* ── Profiltavla ──────────────────────────────────────────────
   Faste rader, alltid synlige. Låste rader viser etiketten sin, aldri
   bare et tomrom — det er rammen som gjør gåten løsbar. */
.profil { margin: 0 0 14px; padding: 0; }

.rad {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
  margin-bottom: 7px;
}
.rad__navn {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
.rad__verdi { color: var(--text-1); font-size: .97rem; font-weight: 600; line-height: 1.4; }

/* Gratisraden. Den fjerner «aktiv eller pensjonert»-tvilen med en gang. */
.rad--gratis { border-left: 3px solid var(--gold); }
.rad--gratis .rad__navn { color: var(--gold); }

.rad--avdekket {
  border-left: 3px solid var(--primary);
  animation: rad-inn var(--t-base) var(--ease);
}
@keyframes rad-inn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.rad--laast { border-style: dashed; background: transparent; }
.rad--laast .rad__navn { color: var(--text-faint); }
.rad--laast .rad__verdi { color: var(--text-faint); letter-spacing: .18em; }

/* En ukjøpt rad er en knapp. Prisen står i den, så valget tas med åpne
   øyne: billig pekepinn eller dyr avsløring. */
.rad--kjopbar {
  width: 100%;
  min-height: 54px;
  text-align: left;
  font-family: inherit;
  border-color: var(--border-2);
  background: var(--flate-trykk);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.rad--kjopbar .rad__navn { color: var(--text-2); }

/* Hover finnes ikke på telefon, og uten en :active-tilstand hadde radene
   null tilbakemelding ved trykk — på nettopp de enhetene spillet mest
   brukes på. Hover-reglene gjelder derfor bare ekte pekere, så de ikke
   henger igjen etter et trykk på berøringsskjerm. */
@media (hover: hover) and (pointer: fine) {
  .rad--kjopbar:hover {
    border-color: var(--primary);
    background: var(--flate-aktiv);
  }
  .rad--kjopbar:hover .rad__navn { color: var(--text-1); }
  .rad--kjopbar:hover .rad__pris { filter: brightness(1.15); }
}
.rad--kjopbar:active {
  background: var(--flate-aktiv);
  border-color: var(--primary);
  transform: scale(0.985);
}
.rad--kjopbar:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}
.rad--kjopbar .rad__verdi {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--text-2); font-weight: 600;
}
.rad__kjop { font-size: .82rem; }
.rad__pris {
  font-family: var(--font-display);
  font-size: .88rem; font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.kost { color: var(--text-3); font-weight: 600; font-size: .84em; }

/* Bildemodusen har færre elementer enn profilmodusen og tåler tettere
   rytme. Uten dette havnet «Gi opp»-lenken noen piksler under folden på
   en 812 px høy telefon. */
#bildespalte + .gjettspalte .sok-hjelp { margin-top: 7px; }
#bildespalte .felt-tittel { margin-bottom: 8px; }

/* ── Bildemodus ───────────────────────────────────────────────
   Bildene hentes fra Wikimedia Commons og er fritt lisensiert, men CC BY
   og CC BY-SA krever at fotograf og lisens står der bildet vises. Derfor
   er krediteringen en del av rammen, ikke noe som kan skrus av. */
.bilderamme {
  position: relative;
  margin: 0 0 14px;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border);
}
.bilderamme img {
  display: block;
  width: 100%;
  /* Taket på høyden er ikke pynt: uten det fyller et portrettbilde hele
     skjermen på mobil, og svarfeltet havner under folden. Da må du rulle
     bort fra bildet for å svare på det. */
  /* Høyden følger skjermen, ikke et fast tall. På en lav mobil i
     landskap ville 42vh vært et frimerke; på en høy telefon ville
     4/5-forholdet dyttet svarfeltet under folden. Derfor begge deler:
     forholdet gir formen, taket hindrer at bildet spiser skjermen. */
  aspect-ratio: 4 / 5;
  /* 38vh, ikke 42: ved 42 lå «Gi opp»-lenken seks piksler fra kanten på en
     812 px høy telefon, og seks piksler er ingen margin — den forsvinner
     med den første nettleseren som har en litt høyere adresselinje. */
  max-height: min(38vh, 350px);
  object-fit: cover;
  /* Beskjæringen må favorisere ansiktet. Med standard sentrering ble
     hodet kuttet bort på portretter, og et gjenkjenningsspill uten ansikt
     er ikke et spill. */
  object-position: 50% 22%;
  /* Sløret settes i JS. Litt skalering skjuler de myke kantene sløringen
     ellers lager langs bilderammen. */
  transform: scale(1.06);
  transition: filter var(--t-slow) var(--ease);
  background: var(--surface-2);
}
/* Krediteringen ligger OPPÅ bildet, ikke under det. Som egen rad spiste
   den 30 piksler av høyden på en telefon der hver piksel var omkjempet —
   som overlegg koster den ingenting, og lisensen er like oppfylt.
   Gradienten er der for at teksten skal være lesbar uansett hva som er
   under den. */
.bilde-kreditt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; gap: 4px;
  padding: 18px 10px 6px;
  font-size: .64rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .62);
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  pointer-events: none;
}
.bilde-kreditt a {
  color: rgba(255, 255, 255, .8);
  text-decoration: underline;
  text-underline-offset: 2px;
  pointer-events: auto;
}
/* Lange fotografnavn skal ikke bryte linja — hele navnet ligger i title. */
.kreditt__navn {
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .bilderamme img { transition: none; }
}

/* Lave skjermer. På en 360×640-telefon havnet svarfeltet under folden —
   du måtte rulle bort fra bildet for å svare på det. Her strammes rytmen
   og bildet får mindre plass, slik at hele sløyfen — bilde, kjøpsknapp,
   svarfelt — er synlig samtidig. */
@media (max-height: 720px) {
  .bilderamme img { max-height: 30vh; }
  .bilderamme { margin-bottom: 8px; }
  .potte { margin-bottom: 12px; }
  /* Headeren skal se lik ut i alle spill og alle moduser. Den forrige
     regelen her strøk sidepolstringen og dyttet chevronen ut i kanten —
     den var skrevet for startmalens header og overlevde byttet. Trenger
     vi høyde på en lav skjerm, tas den i minstehøyden, ikke i formen. */
  .game-header { min-height: 52px; }
  .statuslinje { padding-bottom: 8px; }
  .sok-hjelp { margin-top: 6px; }
  .gi-opp-rad { margin-top: 8px; }
  #bildespalte .felt-tittel { margin-bottom: 6px; }
}

/* ── Søkefeltet ───────────────────────────────────────────── */
.sok { position: relative; }
/* 16 px er ikke en smaksdom: alt under gjør at iOS zoomer inn på fokus. */
#gjett-felt { font-size: 16px; }

/* type="search" holder iOS fra å lese feltet som et kontaktfelt, men drar
   med seg nettleserens eget kryss og innrykk. Vi vil ha søkeoppførselen,
   ikke pynten — vår egen liste er avbryteren. */
/* Når nettleseren ruller feltet i posisjon, skal den la det stå ryddig
   klar av tastaturet. Safari på iPhone tegner en verktøylinje (piler og
   «ferdig») oppå tastaturet som visualViewport ikke alltid melder fra om,
   og uten denne marginen havner nedre halvdel av feltet bak den. */
#gjett-felt { scroll-margin-bottom: 64px; scroll-margin-top: 12px; }

/* Siden er bygget på 100dvh og kan derfor ikke rulles i det hele tatt.
   Da klarer ikke iOS å løfte søkefeltet klar av tastaturet — det har
   ingenting å rulle mot — og panorerer i stedet visningsområdet fram og
   tilbake ved hvert tastetrykk. Det er hoppingen.

   Rulleplassen legges på ved FOKUS, ikke ved at lista åpner seg, slik at
   dokumenthøyden står stille mens man skriver. Vi ruller ikke selv: da
   drar vi i samme retning som iOS, og det ga flimmer. */
body.sok-fokus #app { padding-bottom: 60vh; }
#gjett-felt { -webkit-appearance: none; appearance: none; }
#gjett-felt::-webkit-search-cancel-button,
#gjett-felt::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.treffliste {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  /* Makshøyden settes av JS etter hvor mye plass som faktisk er synlig.
     Verdien her er bare utgangspunktet. */
  max-height: 260px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* På telefon er det ingen brukbar plass under feltet: tastaturet og
   Safaris egen verktøylinje ligger der. Da snus lista opp. Feltet er
   garantert synlig — det er iOS som ruller det i posisjon — så alt som
   tegnes oppover derfra er også synlig. JS setter klassen. */
.treffliste--opp { top: auto; bottom: calc(100% + 6px); }
.treff {
  padding: 11px 12px; border-radius: var(--r-sm);
  color: var(--text-1); font-size: .95rem; cursor: pointer;
}
.treff--aktiv, .treff:hover { background: var(--primary-dim); color: #fff; }
.treff__ingen { padding: 11px 12px; color: var(--text-3); font-size: .9rem; }

.sok-hjelp { font-size: .8rem; color: var(--text-3); margin: 9px 0 0; line-height: 1.45; }
/* Når siste hint er ute er dette ikke lenger en instruksjon, men en
   advarsel — den skal leses. */
.sok-hjelp.er-siste { color: var(--gold); }

/* Å gi opp er en gyldig handling, men aldri den man skal lokkes til.
   Derfor tekstlenke og ikke knapp — og et bekreftelsessteg, fordi et
   feiltrykk her kan koste 3 000 poeng i siste runde. */
.gi-opp-rad {
  margin: 14px 0 0; min-height: 22px;
  font-size: .8rem; color: var(--text-3);
}
.gi-opp {
  background: none; border: 0; padding: 10px 4px;
  min-height: 44px;
  font-family: inherit; font-size: .8rem; font-weight: 600;
  color: var(--text-3); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.gi-opp:hover { color: var(--text-1); }
.gi-opp--ja { color: var(--red); margin-left: 8px; }
.gi-opp--ja:hover { color: var(--red); filter: brightness(1.2); }
.gi-opp-bekreft { display: inline; }
.gi-opp-bekreft button { margin-left: 10px; }

/* «Skarpere bilde» og «Kjøp hint» er de eneste handlingene i bildemodus,
   men arvet .btn--ghost sin gjennomsiktige bakgrunn og forsvant i mørket.
   De får samme hevede flate som kjøperadene, og et minstemål på 52 px —
   Apples og Googles anbefaling for et trykkmål er 44 px. */
.spillflate .btn--ghost {
  background: var(--flate-trykk);
  color: var(--text-1);
  min-height: 52px;
}
@media (hover: hover) and (pointer: fine) {
  .spillflate .btn--ghost:hover { background: var(--flate-aktiv); border-color: var(--primary); }
}
.spillflate .btn--ghost:active { background: var(--flate-aktiv); border-color: var(--primary); }

/* Utbrukt hintknapp blir veien videre i stedet for en død knapp. */
#btn-hint.er-gi-opp { color: var(--text-2); border-color: var(--border-2); }
#btn-hint.er-gi-opp:hover { color: var(--red); border-color: var(--red); background: var(--red-dim); }

/* ── Gjettloggen ──────────────────────────────────────────── */
.gjettlogg { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.bom {
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  animation: hint-inn var(--t-base) var(--ease);
}
.bom__navn {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--text-1); font-size: .93rem; margin-bottom: 9px;
}
.bom__kryss { color: var(--red); font-weight: 700; }

.merker { display: flex; flex-wrap: wrap; gap: 6px; }
.merke {
  font-size: .77rem; font-weight: 600;
  padding: 4px 9px; border-radius: var(--r-full);
  border: 1px solid transparent; white-space: nowrap;
}
.merke--treff { background: var(--green-dim); color: var(--green); border-color: rgba(52,211,153,.28); }
.merke--bom   { background: var(--red-dim);   color: var(--red);   border-color: rgba(248,113,113,.24); }
.merke--pil   { background: var(--cyan-dim);  color: var(--cyan);  border-color: rgba(56,189,248,.26); }
.merke--tom   { background: var(--surface-2); color: var(--text-3); }

/* ── Rundeoppgjør ─────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(3, 8, 16, .76);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade var(--t-base) var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 26px 22px;
  max-width: 400px; width: 100%;
  box-shadow: var(--shadow-lg);
}
.modal-card h2 { margin: 0 0 18px; font-size: 1.25rem; text-align: center; }

.rundekort { text-align: center; }
.rundekort__merke {
  font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 10px;
}
.rundekort__merke.er-riktig { color: var(--green); }
.rundekort__merke.er-tapt   { color: var(--red); }
.rundekort__fasit { font-size: 1.45rem; font-weight: 800; color: var(--text-1); margin: 0 0 6px; line-height: 1.25; }
.rundekort__poeng { color: var(--text-2); margin: 0 0 20px; font-size: .93rem; }
.rundekort__poeng b { color: var(--gold); font-size: 1.1rem; }

.rules-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.rules-item { display: flex; gap: 12px; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.rules-item b { color: var(--text-1); }
.rules-icon { flex-shrink: 0; font-size: 1.1rem; }

/* ── Sluttskjerm ──────────────────────────────────────────── */
.sluttkort { text-align: center; margin-top: 8px; }
.slutt-hode { color: var(--text-3); font-size: .84rem; margin: 0 0 14px; }
.kode-merke {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .16em;
  color: var(--primary-light); background: var(--primary-dim);
  padding: 3px 10px; border-radius: var(--r-full);
}
.sluttsum { margin: 0 0 4px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.sluttsum b {
  font-family: var(--font-display); font-size: 3rem; font-weight: 800;
  color: var(--gold); line-height: 1;
}
.sluttsum span { color: var(--text-3); font-size: .9rem; }
.slutt-sub { color: var(--text-2); font-size: .9rem; margin: 0 0 20px; }

.fasitliste { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; }
.fasit-rad {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  font-size: .89rem;
}
.fasit-rad:last-child { border-bottom: 0; }
.fasit-rad__nr { color: var(--text-3); font-family: var(--font-display); font-weight: 700; font-size: .78rem; min-width: 1.2em; }
.fasit-rad__navn { flex: 1; color: var(--text-1); font-weight: 600; }
.fasit-rad__poeng { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.fasit-rad--tapt .fasit-rad__navn { color: var(--text-2); }
.fasit-rad--tapt .fasit-rad__poeng { color: var(--text-faint); }

.rekord { color: var(--green); font-size: .87rem; font-weight: 600; margin: 14px 0 0; }

/* ── Desktop ──────────────────────────────────────────────── */
@media (min-width: 900px) {
  #app { max-width: 940px; }
  .bilderamme img { max-height: min(60vh, 560px); }
  .spillflate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: start;
  }
  .ingress { font-size: 1.05rem; max-width: 60ch; }
  .kategorivalg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .kategori { margin-bottom: 0; }
  /* .btn er inline-flex fra designsystemet, og da biter ikke auto-marg.
     display:flex må settes her for at knappen skal sentreres. */
  #btn-start { display: flex; max-width: 320px; margin-inline: auto; }

  /* Startskjermen har lite innhold. Uten dette klistrer den seg til
     toppen av en 1440-skjerm og ser forlatt ut. */
  #skjerm-start { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8vh; }
  .statuslinje { font-size: .9rem; }
  /* Loggen har egen rulling så hintstigen aldri forsvinner ut av bildet. */
  .gjettlogg { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
}

/* ── Redusert bevegelse ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hint, .bom, .modal-backdrop { animation: none; }
  .potte__fyll { transition: none; }
}

/* ── Å forlate en økt ─────────────────────────────────────────────
   Bekreftelsen er ikke en advarsel, men et valg med to like tydelige
   veier. «Fortsett økta» ligger først og er primærknappen, fordi det er
   det man vil ni ganger av ti når man har truffet pila ved et uhell. */
.forlat-tekst { color: var(--text-2); font-size: .92rem; line-height: 1.6; margin: 0 0 20px; }
.forlat-valg { display: flex; flex-direction: column; gap: 10px; }
.forlat-valg .btn { min-height: 52px; }

/* ── Trykkflate i headeren ────────────────────────────────────────
   Ikonknappene er 34×34. Apple og Google anbefaler 44 — særlig her, der
   tilbakepila nå har en ekte funksjon inne i spillet og treffes med
   tommelen.

   Headeren kommer fra shared/kippi.css og er lik i alle Kippi-spillene;
   å endre den der ville truffet ~30 spill og krevd versjonsbump på 46
   referanser. Så: utvid FLATEN, ikke ikonet. Utsnittet er usynlig og
   headeren ser nøyaktig lik ut som før. */
.game-header .icon-btn,
.game-header .header-back { position: relative; }
.game-header .icon-btn::after,
.game-header .header-back::after {
  content: ''; position: absolute; inset: -5px;   /* 34 + 2×5 = 44 */
}

/* ── Lagkameratene ────────────────────────────────────────────────
   Fem knapper er hele oppgaven, så de skal se ut som knapper og ligge
   der tommelen er. Samme hevede flate som kjøperadene i profilmodus —
   se «Hvor lyset kommer fra» øverst. */
.lag-anker {
  margin: 2px 0 16px;
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 700; line-height: 1.2;
  color: var(--text-1);
}
.lag-tittel em { color: var(--gold); font-style: normal; }
#lag-tittel em { color: var(--gold); font-style: normal; }

.lag-valg { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.lag-alt {
  width: 100%; min-height: 56px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  padding: 10px 14px; text-align: left;
  font-family: inherit;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--flate-trykk);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.lag-alt__navn { font-size: 1rem; font-weight: 600; color: var(--text-1); }
.lag-alt__hvor { font-size: .8rem; color: var(--text-3); }

@media (hover: hover) and (pointer: fine) {
  .lag-alt:not(:disabled):hover { background: var(--flate-aktiv); border-color: var(--primary); }
}
.lag-alt:not(:disabled):active { background: var(--flate-aktiv); border-color: var(--primary); transform: scale(0.985); }
.lag-alt:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* Strøket av et hint: fortsatt lesbart, for teksten under er selve
   opplysningen du betalte for. Den skal ikke gjemmes bort. */
.lag-alt.er-strokket {
  background: transparent; border-style: dashed; opacity: .72; cursor: default;
}
.lag-alt.er-strokket .lag-alt__navn { color: var(--text-3); text-decoration: line-through; }

.lag-alt.er-fasit { border-color: var(--green); background: var(--green-dim); }
.lag-alt.er-fasit .lag-alt__navn { color: var(--green); }
.lag-alt.er-bom { border-color: var(--red); background: var(--red-dim); }
.lag-alt.er-bom .lag-alt__navn { color: var(--red); text-decoration: line-through; }
.lag-alt:disabled { cursor: default; }