/* ---------------------------------------------------------------------------
   kingscasino — mobile first, 390px width is the design target.
   Two rules that have cost time before:
     * [hidden] must come BEFORE any display:flex rule, or hidden stops hiding.
     * html gets overflow-x: clip, never hidden — `hidden` kills position:sticky.
   No external fonts, no CDN. Hotel WiFi is not our friend.
--------------------------------------------------------------------------- */

[hidden] { display: none !important; }

:root {
  --bg: #09060f;
  --bg-kort: #140d20;
  --bg-kort-2: #1b1230;
  --kant: #2e2145;
  --tekst: #f1ecff;
  --tekst-dim: #a79cc4;
  --guld: #ffcc33;
  --neon: #ff2bd6;
  --cyan: #00e5ff;
  --groen: #39ff14;
  --roed: #ff5c6e;
  --radius: 14px;
}

* { box-sizing: border-box; }

html {
  overflow-x: clip; /* NOT hidden — hidden breaks sticky */
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a1140 0%, transparent 70%),
    var(--bg);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--cyan); }
a:hover { color: var(--guld); }

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: clamp(2.1rem, 11vw, 3.6rem);
  letter-spacing: 0.04em;
  background: linear-gradient(100deg, var(--guld), var(--neon) 55%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--guld);
}

h3 { font-size: 1.1rem; }

/* --- sticky nav ---------------------------------------------------------- */

.mobil-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.5rem 0.75rem;
  background: rgba(9, 6, 15, 0.94);
  border-bottom: 1px solid var(--kant);
  backdrop-filter: blur(8px);
  scrollbar-width: none;
}
.mobil-nav::-webkit-scrollbar { display: none; }

.mobil-nav a {
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--kant);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--tekst-dim);
  white-space: nowrap;
}
.mobil-nav a.er-aktiv {
  color: var(--bg);
  background: var(--guld);
  border-color: var(--guld);
  font-weight: 700;
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  padding: 2rem 1rem 2.5rem;
  text-align: center;
  border-bottom: 1px solid var(--kant);
}

.hero__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon);
}

.hero__sub {
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
  color: var(--tekst);
}

.hero__maal {
  margin: 0.15rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--tekst-dim);
}

.nedtaelling-blok {
  padding: 1rem 0.75rem;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--bg-kort);
}

.nedtaelling__label {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--guld);
}

.nedtaelling {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.nedtaelling__enhed {
  flex: 1 1 4rem;
  min-width: 4rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--kant);
  border-radius: 10px;
  background: var(--bg-kort-2);
  display: flex;
  flex-direction: column;
}

.nedtaelling__tal {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

.nedtaelling__navn {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-dim);
}

.nedtaelling__stor {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--guld);
}

.nedtaelling__disclaimer {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--tekst-dim);
}

.hero__mission {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--tekst-dim);
}

/* --- sections ------------------------------------------------------------ */

.sektion {
  padding: 2rem 1rem;
  border-bottom: 1px solid var(--kant);
}

.sektion__intro {
  margin: 0 0 1.25rem;
  color: var(--tekst-dim);
  font-size: 0.95rem;
}

/* --- cards --------------------------------------------------------------- */

.kort-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.kort {
  padding: 1rem;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--bg-kort);
}

.kort.er-valgt {
  border-color: var(--guld);
  box-shadow: 0 0 0 1px var(--guld) inset;
}

.kort__hoved { margin-bottom: 0.75rem; }
.kort__sub { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--tekst-dim); }
.kort__fod { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--tekst-dim); }

.status-chip,
.rute-chip,
.stjerne-chip {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.status-chip { background: var(--neon); color: #1b0014; }
.rute-chip { background: var(--cyan); color: #00222a; }
.stjerne-chip { background: transparent; color: var(--guld); letter-spacing: 0.1em; font-size: 0.9rem; padding-left: 0; }

.procon {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.procon__col h4 {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.procon__col--for h4 { color: var(--groen); }
.procon__col--imod h4 { color: var(--roed); }

.procon ul,
.noter,
.etikette,
.trin,
.poker-liste {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.procon li,
.noter li,
.etikette li,
.trin li { margin-bottom: 0.35rem; }

.noter {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--tekst-dim);
}

.pris { margin: 0.5rem 0 0; }
.pris strong { font-size: 1.45rem; color: var(--guld); font-variant-numeric: tabular-nums; }
.pris__sub { font-size: 0.8rem; color: var(--tekst-dim); }

.vaerelser {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--tekst);
}

.vaelg-knap {
  margin-top: 0.9rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--cyan);
  border-radius: 10px;
  background: transparent;
  color: var(--cyan);
  font-size: 1rem; /* 16px minimum — iOS zooms below that */
  font-weight: 700;
  cursor: pointer;
}
.er-valgt .vaelg-knap {
  border-color: var(--guld);
  background: var(--guld);
  color: #1d1400;
}

/* --- fact markers -------------------------------------------------------- */

.maerkat {
  display: inline;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.maerkat--kilde { color: var(--tekst-dim); }
.maerkat--estimat { color: var(--guld); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.maerkat--uverificeret { color: var(--roed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.maerkat__note { display: inline; color: var(--tekst-dim); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* --- budget -------------------------------------------------------------- */

.presets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.preset {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--bg-kort);
  color: var(--tekst);
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
}
.preset.er-valgt { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon) inset; }
.preset__navn { font-weight: 800; letter-spacing: 0.14em; color: var(--guld); }
.preset__sub { font-size: 0.82rem; color: var(--tekst-dim); }

.kontroller {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--bg-kort);
}

.slider-raekke { display: flex; flex-direction: column; gap: 0.35rem; }

.slider__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.slider__navn { color: var(--tekst-dim); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; }
.slider__vaerdi { font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; }

input[type="range"] {
  width: 100%;
  height: 2rem;
  accent-color: var(--neon);
  font-size: 1rem;
}

select.valg {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--kant);
  border-radius: 10px;
  background: var(--bg-kort-2);
  color: var(--tekst);
  font-size: 1rem; /* 16px — iOS zooms below that */
}

.resultat { margin-top: 1.25rem; }

.budget-tabel,
.limit-tabel {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* html har overflow-x: clip, så et vandret overløb ville blive klippet væk i
   stedet for at kunne scrolles. Lad lange ord brække i stedet. */
.budget-tabel td,
.limit-tabel td,
.limit-tabel th,
.praktisk-punkt p,
.noter li,
.maerkat__note {
  overflow-wrap: anywhere;
}

.budget-tabel td,
.limit-tabel td,
.limit-tabel th {
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--kant);
  vertical-align: top;
  text-align: left;
}

.limit-tabel th {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--guld);
}

.budget-tabel__navn { display: flex; flex-direction: column; }
.budget-tabel__detalje { font-size: 0.74rem; color: var(--tekst-dim); }
.budget-tabel__belob { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.budget-tabel__total td {
  padding-top: 0.8rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--guld);
  border-bottom: none;
}
.budget-tabel__crew td {
  font-size: 0.85rem;
  color: var(--tekst-dim);
  border-bottom: none;
}

.omregning { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--tekst-dim); }
.budget-note { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--tekst-dim); }

.limit__spil { display: block; font-weight: 700; }
.limit__note { display: block; font-size: 0.74rem; color: var(--tekst-dim); }

/* --- warning box --------------------------------------------------------- */

.advarsel {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--roed);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: rgba(255, 92, 110, 0.08);
}
.advarsel h3 { color: var(--roed); }
.advarsel p { margin: 0 0 0.5rem; font-size: 0.9rem; }

/* --- crew ---------------------------------------------------------------- */

.crew-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.crew-kort {
  padding: 0.9rem 0.6rem;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--bg-kort);
  text-align: center;
}

.crew__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.5rem;
  border: 2px solid var(--kant);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 800;
}

.crew-kort h3 { margin: 0; font-size: 1rem; }
.crew__rolle { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--tekst-dim); }

/* --- praktisk ------------------------------------------------------------ */

.praktisk-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.praktisk-punkt {
  padding: 0.9rem 1rem;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--bg-kort);
}
.praktisk-punkt h3 { font-size: 0.95rem; color: var(--guld); }
.praktisk-punkt p { margin: 0.25rem 0 0; font-size: 0.88rem; }

/* --- footer -------------------------------------------------------------- */

.fod {
  padding: 1.5rem 1rem 2.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--tekst-dim);
}
.fod__note { margin: 0.5rem 0 0; font-size: 0.75rem; }

/* --- wider screens ------------------------------------------------------- */

@media (min-width: 620px) {
  .kort-grid { grid-template-columns: repeat(2, 1fr); }
  .procon { grid-template-columns: 1fr 1fr; }
  .presets { grid-template-columns: repeat(3, 1fr); }
  .crew-grid { grid-template-columns: repeat(3, 1fr); }
  .praktisk-liste { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .hero, .sektion, .fod { padding-left: 2rem; padding-right: 2rem; }
  .sektion { max-width: 1100px; margin: 0 auto; }
  .hero { max-width: 1100px; margin: 0 auto; }
  .kort-grid { grid-template-columns: repeat(3, 1fr); }
  .kontroller { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}