/* ==========================================================================
   Jeopardy - designtokens og skærme
   Farver, typografi, radier og spacing følger design-handoff'et 1:1.
   ========================================================================== */

:root {
  /* Baggrunde */
  --bg-deep: #070B24;
  --bg-grad-top: #0A1038;

  /* Flader */
  --surface-raised: #111A4B;
  --surface-base: #0E1540;
  --surface-card: #131D57;
  --surface-flat: #0F1741;

  /* Felter */
  --tile: #16205C;
  --tile-used: rgba(255,255,255,.03);
  --tile-used-txt: rgba(255,255,255,.16);

  /* Accent */
  --gold: #F2C14E;
  --gold-deep: #E0A72E;
  --gold-deeper: #D89A20;
  --gold-hair: rgba(242,193,78,.20);
  --gold-hair-stk: rgba(242,193,78,.35);
  --gold-tint: rgba(242,193,78,.13);

  /* Hold */
  --hold1: #F2C14E;
  --hold2: #5AC8FA;

  /* Semantik */
  --ok: #33B87A;
  --ok-ink: #04220F;
  --bad: #E4573D;

  /* Tekst */
  --txt: #fff;
  --txt2: rgba(255,255,255,.5);
  --txt3: rgba(255,255,255,.35);
  --txt4: rgba(255,255,255,.3);
  --hair: rgba(255,255,255,.07);

  /* Skrift */
  --display: 'Anton', Impact, 'Haettenschweiler', sans-serif;
  --ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Mål */
  --pad-x: 20px;
  --pad-top: calc(18px + env(safe-area-inset-top));
  --pad-bund: calc(24px + env(safe-area-inset-bottom));
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--bg-deep);
}

body {
  font-family: var(--ui);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

button {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

#app {
  position: relative;
  height: var(--app-height, 100dvh);
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- Skærme ---------- */

.skaerm {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: 22px;
  padding: var(--pad-top) var(--pad-x) var(--pad-bund);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(var(--bg-grad-top), var(--bg-deep) 40%);
}

.skaerm.aktiv {
  display: flex;
  animation: ind .22s var(--ease);
}

@keyframes ind {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skaerm.aktiv { animation: none; }
}

.fyld { flex: 1; min-height: 4px; }

/* ---------- Fælles typografi ---------- */

.eyebrow {
  font: 600 11px/1 var(--ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow--dim {
  letter-spacing: .24em;
  color: rgba(255,255,255,.45);
}

.h1 {
  font: 400 40px/0.95 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h1--sm { font-size: 34px; line-height: 1; }

.titelblok {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.version {
  margin-top: 10px;
  text-align: center;
  font: 500 10.5px var(--ui);
  letter-spacing: .1em;
  color: rgba(255,255,255,.22);
}

/* ---------- Knapper ---------- */

.cta {
  padding: 18px;
  background: var(--gold);
  border-radius: 18px;
  font: 400 20px var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0A1038;
  transition: transform .12s var(--ease), filter .12s var(--ease);
}

.cta--bred { flex: 1.3; padding: 17px; font-size: 17px; letter-spacing: .05em; }

.knap-outline {
  flex: 1;
  padding: 17px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  font: 400 17px var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

.knap-sekundaer {
  padding: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  font: 600 13px var(--ui);
  color: rgba(255,255,255,.55);
}

.knap-tilbage {
  padding: 4px;
  font: 600 13px var(--ui);
  color: rgba(255,255,255,.4);
  text-align: center;
}

.linkknap {
  font: 600 13px var(--ui);
  color: var(--gold);
}

.linkknap--sm { font-size: 11.5px; }
.linkknap--dim { color: rgba(255,255,255,.4); font-weight: 500; }

.knaprow { display: flex; gap: 10px; }

.bundblok {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tryk-feedback: 0.96 scale + 8 % lysning */
.cta:active, .knap-outline:active, .knap-sekundaer:active,
.felt:not(.felt--brugt):active, .afg:active, .pakkekort:active,
.holdpille:active, .pille:active, .scorestrip:active {
  transform: scale(.96);
  filter: brightness(1.08);
}

.cta, .knap-outline, .knap-sekundaer, .felt, .afg, .pakkekort,
.holdpille, .pille, .scorestrip {
  transition: transform .12s var(--ease), filter .12s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
}

/* ==========================================================================
   1a · Holdopsætning
   ========================================================================== */

.holdliste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.holdrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--hair);
  border-radius: 16px;
}

.holdrow--aktiv { border-color: var(--gold-hair-stk); }

.holdnr {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 16px var(--display);
  color: #0A1038;
}

.holdnavn {
  flex: 1;
  min-width: 0;
  font: 600 17px var(--ui);
  color: #fff;
}

.holdnavn::placeholder { color: rgba(255,255,255,.3); }

/* Tomt navnefelt blinker, indtil holdet har fået et navn. */
.holdnavn--tom { animation: blink 1.5s var(--ease) infinite; }
.holdnavn--tom::placeholder { color: rgba(242,193,78,.8); }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .holdnavn--tom { animation: none; }
}


.knap-fortsaet {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 13px 16px;
  background: rgba(242,193,78,.08);
  border: 1px dashed var(--gold-hair-stk);
  border-radius: 14px;
  text-align: left;
}

.knap-fortsaet__tekst { font: 600 14px var(--ui); color: var(--gold); }
.knap-fortsaet__meta { font: 500 12px var(--ui); color: var(--txt3); }

.bundrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  font: 500 13px var(--ui);
  color: rgba(255,255,255,.4);
}

/* ==========================================================================
   1b · Vælg spilpakke
   ========================================================================== */

.piller { display: flex; flex-wrap: wrap; gap: 8px; }

.pille {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--hair);
  color: rgba(255,255,255,.65);
  font: 600 12px var(--ui);
}

.pille--valgt { background: var(--gold); color: #0A1038; }
.pille--lille { padding: 6px 12px; font-size: 11.5px; }

.pakkeliste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* "Start spillet" bliver liggende nederst, så man ikke skal scrolle hele
   pakkelisten igennem for at nå den. Sticky klæber til selve skærmkanten og
   ikke til skærmens polstring - derfor bærer blokken selv bundpolstringen,
   og skærmens egen er sat til 0, så afstanden ikke bliver dobbelt nederst. */
.skaerm[data-skaerm="pakker"] { padding-bottom: 0; }

.skaerm[data-skaerm="pakker"] .bundblok {
  position: sticky;
  bottom: 0;
  margin: 0 calc(-1 * var(--pad-x));
  padding: 16px var(--pad-x) var(--pad-bund);
  background: linear-gradient(to bottom, transparent, var(--bg-deep) 24px);
}

.pakkekort {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px;
  border-radius: 20px;
  background: var(--surface-flat);
  border: 1px solid var(--hair);
  text-align: left;
}

.pakkekort--valgt {
  background: var(--surface-card);
  border: 1.5px solid var(--gold);
  gap: 12px;
}

.pakkekort__hoved {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pakkekort__navn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.pakkekort__titel {
  font: 400 24px/1 var(--display);
  text-transform: uppercase;
}

.pakkekort--valgt .pakkekort__titel { color: var(--gold); }

.pakkekort__meta {
  font: 500 13px var(--ui);
  color: rgba(255,255,255,.45);
}

.pakkekort--valgt .pakkekort__meta { color: var(--txt2); }

.flueben {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  color: #0A1038;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px var(--ui);
}

.kattags { display: flex; flex-wrap: wrap; gap: 6px; }

.kattag {
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--gold-tint);
  font: 600 10.5px var(--ui);
  letter-spacing: .09em;
  color: var(--gold);
}

.tom-besked {
  padding: 18px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.16);
  font: 500 13px/1.6 var(--ui);
  color: var(--txt2);
}

/* ==========================================================================
   1c · Spilleplade
   ========================================================================== */

.skaerm--plade {
  gap: 0;
  padding: var(--pad-top) 0 var(--pad-bund);
  background: var(--bg-deep);
}

/* Pakkens navn sat som på pakkekortene: Anton i guld. */
.pladepakke {
  flex: none;
  padding: 0 17px 10px;
  font: 400 24px/1 var(--display);
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scorestrip {
  display: flex;
  gap: 6px;
  padding: 6px 16px 12px;
  width: 100%;
  flex: none;
}

.scorekort {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--surface-base);
  border: 1.5px solid transparent;
  border-top: 2px solid var(--f);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  opacity: .45;
}

/* Spilleren i tur står skarpt op mod den anden, der er dæmpet ned. */
.scorekort--aktiv {
  background: var(--surface-raised);
  border-color: var(--f);
  opacity: 1;
}

.scorekort--aktiv .scorekort__navn { color: var(--f); }

.scorekort__navn {
  font: 600 11px var(--ui);
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scorekort__tal { font: 400 26px/1 var(--display); }

.pladehoved {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px 10px;
  flex: none;
}

.pladehoved__hoejre {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}

.pladetal {
  font: 500 12px var(--ui);
  color: rgba(255,255,255,.4);
}

.pladelinks { display: flex; gap: 12px; }

.plade {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px;
}

.katblok {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.katlabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.katlabel__navn {
  font: 600 11px var(--ui);
  letter-spacing: .15em;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.katlabel__tal {
  font: 500 10px var(--ui);
  color: var(--txt4);
  flex: none;
}

.katgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.felt {
  aspect-ratio: 1/1;
  border-radius: 11px;
  background: var(--tile);
  border: 1px solid var(--gold-hair);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 17px var(--display);
  color: var(--gold);
}

.felt--lang { font-size: 15px; }

.felt--brugt {
  background: var(--tile-used);
  border-color: transparent;
  color: var(--tile-used-txt);
  font-size: 15px;
  cursor: default;
}



/* ==========================================================================
   1d · Spørgsmål + afgørelse
   ========================================================================== */

.skaerm--spm {
  gap: 20px;
  background: linear-gradient(var(--surface-card), var(--bg-grad-top) 55%);
}

.spm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
}

.spm-top__venstre { display: flex; align-items: center; gap: 8px; min-width: 0; }

.kategoritag {
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(242,193,78,.15);
  font: 600 11px var(--ui);
  letter-spacing: .12em;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spm-vaerdi { font: 400 22px var(--display); color: var(--gold); flex: none; }

.timerrow { display: flex; align-items: center; gap: 14px; flex: none; }

.timer {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--gold) 0 100%, rgba(255,255,255,.1) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer--slut { --ringfarve: var(--bad); }

.timer__inder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0D1442;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 19px var(--display);
  color: var(--gold);
}

.timer--slut .timer__inder { color: var(--bad); }
.timer--pause .timer__inder { color: var(--txt3); }

.timerrow__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.timerrow__hold { font: 600 13px var(--ui); }
.timerrow__hjaelp { font: 500 12px var(--ui); color: rgba(255,255,255,.4); }

.spm-midte {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 4px 0;
  min-height: 90px;
}

.spm-tekst {
  font: 400 34px/1.15 var(--display);
  text-transform: uppercase;
  text-wrap: pretty;
}

.spm-tekst--lang { font-size: 27px; }

.facit {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(242,193,78,.09);
  border: 1px solid rgba(242,193,78,.28);
  text-align: left;
  flex: none;
}

.facit__label {
  font: 600 10.5px var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242,193,78,.75);
}

.facit__svar { font: 600 20px var(--ui); color: var(--gold); }

/* Skjult facit: svaret findes slet ikke i DOM'en - der står "Vis svaret". */
.facit--skjult {
  background: rgba(242,193,78,.05);
  border-style: dashed;
}

.facit--skjult .facit__svar {
  font: 400 20px var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(242,193,78,.85);
}

.facit--skjult .facit__svar::after { content: ' ›'; }

.holdpiller { display: flex; gap: 8px; flex: none; }

.holdpille {
  flex: 1;
  min-width: 0;
  padding: 12px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  font: 600 14px var(--ui);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.holdpille--valgt { color: #0A1038; }

.afgoerelse { display: flex; gap: 12px; flex: none; }

.afg {
  flex: 1;
  padding: 20px 10px;
  border-radius: 20px;
  font: 400 20px var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.afg--forkert { background: var(--bad); color: #fff; }
.afg--rigtigt { background: var(--ok); color: var(--ok-ink); }

/* ==========================================================================
   1e · Løbende stilling
   ========================================================================== */

.skaerm[data-skaerm="stilling"] { gap: 20px; background: var(--bg-deep); }

.stilling-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.stilling-meta { font: 500 13px var(--ui); color: rgba(255,255,255,.4); }

.stillingkort { display: flex; flex-direction: column; gap: 12px; }

.holdstat {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface-base);
  border-left: 4px solid;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.holdstat--foerer { background: var(--surface-raised); }

.holdstat__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.holdstat__navn { font: 600 16px var(--ui); }
.holdstat__point { font: 400 26px/1 var(--display); flex: none; }

.bar {
  height: 7px;
  border-radius: 99px;
  background: var(--hair);
  overflow: hidden;
}

.bar__fyld { height: 100%; border-radius: 99px; transition: width .3s var(--ease); }

.holdstat__tal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font: 500 12px var(--ui);
  color: var(--txt2);
}

.tal-ok { color: var(--ok); }
.tal-bad { color: var(--bad); }

.forspring {
  padding: 16px;
  border-radius: 18px;
  background: rgba(242,193,78,.08);
  border: 1px solid rgba(242,193,78,.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.forspring__tekst { display: flex; flex-direction: column; gap: 2px; }

.minilabel {
  font: 600 10.5px var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242,193,78,.75);
}

.minilabel--dim { color: rgba(255,255,255,.4); }

.forspring__hjaelp { font: 500 12.5px var(--ui); color: var(--txt2); }
.forspring__tal { font: 400 30px/1 var(--display); color: var(--gold); flex: none; }

.svaerest {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svaerest__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.svaerest__navn {
  font: 400 22px var(--display);
  text-transform: uppercase;
  color: var(--gold);
}

.svaerest__meta { font: 500 13px var(--ui); color: var(--txt2); flex: none; }

/* ==========================================================================
   1f · Vinderskærm
   ========================================================================== */

.skaerm--vinder {
  gap: 18px;
  text-align: center;
  background: radial-gradient(120% 60% at 50% 8%, #2A2461 0%, #0A1038 55%, var(--bg-deep) 100%);
}

.vinderblok { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.medalje {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(var(--gold), var(--gold-deeper));
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 40px var(--display);
  color: #0A1038;
  animation: medaljeInd .5s var(--ease) both;
}

@keyframes medaljeInd {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.vindernavn {
  font: 400 46px/0.92 var(--display);
  text-transform: uppercase;
  color: var(--gold);
  text-wrap: balance;
  hyphens: auto;
}

.vindernavn--lang { font-size: 36px; }
.vinderpoint { font: 400 30px var(--display); letter-spacing: .02em; }

.statkort { display: flex; gap: 8px; }

.stat {
  flex: 1;
  min-width: 0;
  padding: 14px 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stat--ok { background: rgba(51,184,122,.13); border-color: rgba(51,184,122,.3); }
.stat--bad { background: rgba(228,87,61,.13); border-color: rgba(228,87,61,.3); }

.stat__tal { font: 400 28px/1 var(--display); }
.stat--ok .stat__tal { color: var(--ok); }
.stat--bad .stat__tal { color: var(--bad); }

.stat__label {
  font: 600 10.5px var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt2);
}

.podie { display: flex; flex-direction: column; gap: 8px; text-align: left; }

.podierow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 15px;
  background: var(--surface-base);
}

.podierow__rang {
  font: 400 18px var(--display);
  color: var(--txt3);
  width: 18px;
  flex: none;
}

.podierow__midt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.podierow__navn { font: 600 15px var(--ui); }
.podierow__meta { font: 500 11.5px var(--ui); color: rgba(255,255,255,.45); }
.podierow__point { font: 400 22px var(--display); flex: none; }

.hurtigst {
  padding: 13px 16px;
  border-radius: 15px;
  background: rgba(242,193,78,.08);
  border: 1px dashed rgba(242,193,78,.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  font: 600 12px var(--ui);
  color: rgba(255,255,255,.55);
}

.hurtigst__vaerdi { color: var(--gold); flex: none; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(17,26,75,.96);
  border: 1px solid var(--gold-hair-stk);
  font: 600 13px var(--ui);
  color: var(--gold);
  z-index: 20;
  animation: ind .2s var(--ease);
  max-width: calc(100% - 40px);
  text-align: center;
}

/* ==========================================================================
   Webview-udbrud + installationsprompt
   ========================================================================== */

.linkrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--txt4);
  font: 600 13px var(--ui);
}

.linkrow__adskil { display: flex; align-items: center; gap: 8px; }

/* Fylder skærmen: man skal ikke kunne overse at man sidder i en webview. */
.webview-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
  background: rgba(7,11,36,.94);
}

.wo-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  padding: 26px 22px 20px;
  border-radius: 22px;
  background: var(--surface-raised);
  border: 1px solid var(--gold-hair-stk);
  text-align: center;
}

.wo-titel {
  font: 400 28px/1 var(--display);
  text-transform: uppercase;
  color: var(--gold);
}

.wo-tekst { font: 400 14px/1.5 var(--ui); color: var(--txt2); }
.wo-cta { display: block; text-decoration: none; }
.wo-alt { font: 400 12.5px/1.5 var(--ui); color: var(--txt3); }
.wo-alt b { color: var(--txt2); }

/* Banneret ligger over bundknappen, men lavere end toasten. */
.install-banner {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 15;
  width: calc(100% - 24px);
  max-width: 406px;
  animation: ind .3s var(--ease);
}

/* Banneret hører hjemme på forsiden. Midt i et spil ville det ligge og skygge
   for pladen, så det trækker sig så snart der er gang i en runde. */
#app:not(:has(.skaerm[data-skaerm="opsaetning"].aktiv)) ~ .install-banner {
  display: none;
}

.ib-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 15px;
  border-radius: 18px;
  background: rgba(17,26,75,.97);
  border: 1px solid var(--gold-hair-stk);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.ib-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ib-text b { font: 600 13.5px var(--ui); color: #fff; }
.ib-text span { font: 400 11.5px var(--ui); color: var(--txt3); }

.ib-how {
  flex: none;
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--gold);
  font: 600 12.5px var(--ui);
  color: #0A1038;
}

.ib-dismiss {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hair);
  font: 500 13px var(--ui);
  color: var(--txt3);
}

.ig-dialog {
  width: calc(100% - 40px);
  max-width: 380px;
  padding: 26px 22px 20px;
  border: 1px solid var(--gold-hair-stk);
  border-radius: 22px;
  background: var(--surface-raised);
  color: #fff;
}

.ig-dialog::backdrop { background: rgba(7,11,36,.8); }

.ig-titel {
  margin-bottom: 8px;
  font: 400 26px/1 var(--display);
  text-transform: uppercase;
  color: var(--gold);
}

.ig-note { font: 400 13.5px/1.5 var(--ui); color: var(--txt2); }
.ig-install { width: 100%; margin-top: 16px; }

.ig-steps {
  margin: 16px 0 18px;
  padding-left: 20px;
  font: 400 13.5px/1.55 var(--ui);
  color: var(--txt2);
}

.ig-steps li { margin-bottom: 8px; }
.ig-steps li::marker { color: var(--gold); font-weight: 600; }
.ig-steps b { color: #fff; }
.ig-dialog .knap-sekundaer { width: 100%; }

/* ---------- Små skærme ---------- */

@media (max-height: 700px) {
  .h1 { font-size: 34px; }
  .spm-tekst { font-size: 28px; }
  .vindernavn { font-size: 38px; }
  .medalje { width: 68px; height: 68px; font-size: 32px; }
}