/* Klopjacht — house style (batch 3). Skill webapp-house-style: kleurtokens, radius/
   shadow/motion-schaal, staggered fade-up, hover-lift/press-scale, frosted tab bar,
   automatisch licht/donker, reduced-motion. Accenten: --accent #E8590C (signaaloranje),
   --accent-alt #2F9E44 (veldgroen), siblings ±8% lichtheid.

   Het gejaagde-scherm (body[data-motion="sober"]) blijft bewust functioneel-sober: geen
   fade-up/hover-animaties, hoog contrast, leesbaar in fel zonlicht — zie onderaan.

   Batch 5: zelfgehost display-lettertype "Bricolage Grotesque" (public/fonts/, SIL OFL —
   zie public/fonts/OFL.txt) voor koppen op de landing en de drie contentpagina's. Alleen
   voor display-tekst (h1/sectiekoppen/CTA-koppen); de body blijft de systeemstack
   hierboven. Twee gewichten (500/800, latin-subset) — geen fonts.googleapis-link (CSP
   blijft script/style 'self'; de font-bestanden komen van eigen origin). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-500.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-800.woff2") format("woff2");
}

/* Derde variant (versie 1.11.0): zelfgehoste displayfonts voor Smokkeljacht — "Pirata One"
   (koppen, alleen gewicht 400 — zie --font-display-weight hieronder) en "IM Fell English SC"
   (labels/tags, kleinkapitaal-stijl). Beide SIL OFL, zie public/fonts/OFL-pirata.txt. Alleen
   geladen/toegepast binnen het :root[data-brand="smokkeljacht"]-blok — de andere twee merken
   zien deze bestanden nooit. */
@font-face {
  font-family: "Pirata One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/pirata-one-400.woff2") format("woff2");
}
@font-face {
  font-family: "IM Fell English SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/im-fell-english-sc-400.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* ---- accenten (BRAND) ---- */
  --accent: #e8590c;
  --accent-2: #f47029;
  --accent-strong: #c14a0a;
  --accent-alt: #2f9e44;
  --accent-alt-2: #38bd52;

  /* ---- neutralen ---- */
  --bg: #f7f5f2;
  --bg-2: #efece6;
  --surface: #ffffff;
  --surface-2: #f1efe9;
  --ink: #1c1917;
  --muted: #6b645d;
  --line: rgba(28, 25, 23, 0.1);
  --line-strong: rgba(28, 25, 23, 0.18);
  --link: var(--accent);

  /* ---- status ---- */
  --ok-bg: #e8f4ec;
  --ok-bd: #bbdfc6;
  --ok-tx: #21663d;
  --warn-bg: #fbf1de;
  --warn-bd: #ecd3a0;
  --warn-tx: #8a5b16;
  --danger: #c92a2a;
  --danger-bg: #fbe7e7;
  --danger-bd: #eebcbc;
  --danger-tx: #8f2323;

  /* ---- velden ---- */
  --field: #ffffff;
  --field-bd: rgba(28, 25, 23, 0.18);
  --nav: rgba(255, 255, 255, 0.84);

  /* ---- radius / schaduw / motion (het huisstijl-signatuur) ---- */
  --radius: 18px;
  --radius-sm: 13px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(28, 20, 10, 0.06), 0 10px 28px rgba(28, 20, 10, 0.07);
  --shadow-lg: 0 2px 6px rgba(28, 20, 10, 0.07), 0 18px 42px rgba(28, 20, 10, 0.13);
  --spring: cubic-bezier(0.2, 0.7, 0.3, 1);
  --nav-h: 72px;

  /* ---- batch 5: landing/contentpagina's — chip "DE JAGERS" (amber, los van --warn:
     dezelfde kleurfamilie als --accent maar zachter, specifiek voor deze badge) ---- */
  --chip-hunter-bg: #fdeadd;
  --chip-hunter-tx: #8a4408;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #f68a50;
    --accent-2: #f8a477;
    --accent-strong: #f47029;
    --accent-alt: #53cc6a;
    --accent-alt-2: #72d585;

    --bg: #15130f;
    --bg-2: #1b1812;
    --surface: #211e19;
    --surface-2: #28241d;
    --ink: #f3efe9;
    --muted: #a89e92;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);

    --ok-bg: rgba(46, 150, 88, 0.16);
    --ok-bd: rgba(110, 200, 150, 0.3);
    --ok-tx: #a3e0b6;
    --warn-bg: rgba(190, 140, 40, 0.16);
    --warn-bd: rgba(225, 185, 90, 0.28);
    --warn-tx: #eecd8c;
    --danger: #e05a5a;
    --danger-bg: rgba(201, 42, 42, 0.2);
    --danger-bd: rgba(224, 90, 90, 0.35);
    --danger-tx: #f3b4b4;

    --field: #28241d;
    --field-bd: rgba(255, 255, 255, 0.16);
    --nav: rgba(21, 19, 15, 0.8);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.48);

    --chip-hunter-bg: rgba(244, 112, 41, 0.18);
    --chip-hunter-tx: #f8b98c;
  }
}

/* ---- Tweede variant (versie 1.10.0): Nachtjacht — nachtjacht.com ----
   Het merk zit als data-brand op <html> (src/views/layout.tsx). Nachtjacht is ALTIJD donker
   (het spel speelt na zonsondergang; de huisstijl hoort dat te dragen), met lantaarn-amber
   als accent op een koeler nachtblauw i.p.v. de warme bruintinten van de gewone dark mode.
   Specificiteit (0,2,0) wint van de :root-blokken hierboven (0,1,0), in beide kleurschema's —
   licht/donker van het toestel maakt op nachtjacht.com dus bewust niets meer uit. De
   componenten verderop lezen allemaal tokens, dus dit blok is de hele huisstijl-omslag. */
:root[data-brand="nachtjacht"] {
  color-scheme: dark;

  --accent: #f2a33c;
  --accent-2: #f6b95e;
  --accent-strong: #d98a1f;
  --accent-alt: #53cc6a;
  --accent-alt-2: #72d585;

  --bg: #14121a;
  --bg-2: #191724;
  --surface: #1e1c2b;
  --surface-2: #262334;
  --ink: #eeedf5;
  --muted: #a29db4;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --link: var(--accent);

  --ok-bg: rgba(46, 150, 88, 0.16);
  --ok-bd: rgba(110, 200, 150, 0.3);
  --ok-tx: #a3e0b6;
  --warn-bg: rgba(190, 140, 40, 0.16);
  --warn-bd: rgba(225, 185, 90, 0.28);
  --warn-tx: #eecd8c;
  --danger: #e05a5a;
  --danger-bg: rgba(201, 42, 42, 0.2);
  --danger-bd: rgba(224, 90, 90, 0.35);
  --danger-tx: #f3b4b4;

  --field: #262334;
  --field-bd: rgba(255, 255, 255, 0.16);
  --nav: rgba(20, 18, 26, 0.8);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.45), 0 22px 50px rgba(0, 0, 0, 0.48);

  --chip-hunter-bg: rgba(242, 163, 60, 0.18);
  --chip-hunter-tx: #f6c88a;
}

/* ---- Derde variant (versie 1.11.0): Smokkeljacht — smokkeljacht.com ----
   Havenlogboek/piraat/marine-huisstijl, ALTIJD donker — net als Nachtjacht maakt licht/donker
   van het toestel hier bewust niets uit (specificiteit (0,2,0), wint van de :root-blokken
   hierboven in beide kleurschema's). Messing-goud (--link/koppenaccent) op nachtelijk marine­
   blauw, verweerd stempel-rood als CTA-accent, lantaarn-amber voor de wacht/waarschuwing —
   zie het eindrapport van v1.11.0 voor de volledige paletbron (de goedgekeurde mockups). De
   displayfont wordt hieronder ook omgezet: Pirata One heeft alleen gewicht 400, dus
   --font-display-weight valt hier terug naar 400 op alle plekken die anders 800 vroegen (zie
   de font-weight: var(--font-display-weight, 800)-regels verderop in dit bestand) — met
   Pirata One zou 800 toch genegeerd worden (font-synthesis), dit is dus geen verlies. */
:root[data-brand="smokkeljacht"] {
  color-scheme: dark;

  --accent: #a83226;
  --accent-2: #c2422f;
  --accent-strong: #8c2a1f;
  --accent-alt: #7fbf8e;
  --accent-alt-2: #9ad1a6;

  --bg: #0e1a26;
  --bg-2: #0b141d;
  --surface: #13212f;
  --surface-2: #182a3b;
  --ink: #e6dbc0;
  --muted: #8fa0a8;
  --line: rgba(201, 162, 39, 0.35);
  --line-strong: rgba(201, 162, 39, 0.55);
  --link: #e3b93e;

  --ok-bg: rgba(127, 191, 142, 0.16);
  --ok-bd: rgba(127, 191, 142, 0.35);
  --ok-tx: #a8d9b2;
  --warn-bg: rgba(232, 160, 76, 0.16);
  --warn-bd: rgba(232, 160, 76, 0.35);
  --warn-tx: #f0c48f;
  --danger: #c2422f;
  --danger-bg: rgba(168, 50, 38, 0.2);
  --danger-bd: rgba(194, 66, 47, 0.4);
  --danger-tx: #f0a99a;

  --field: #182a3b;
  --field-bd: rgba(201, 162, 39, 0.35);
  --nav: rgba(11, 20, 29, 0.88);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 22px 50px rgba(0, 0, 0, 0.52);

  --chip-hunter-bg: rgba(232, 160, 76, 0.18);
  --chip-hunter-tx: #f0c48f;

  /* Strakkere, rechtere hoeken dan de gewone huisstijl (18/13/24px) — past beter bij een
     stempel-/kaart-esthetiek dan bij de zachte, ronde kaarten elders. */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  --font-display: "Pirata One", Georgia, serif;
  --font-display-weight: 400;
  --font-display-tracking: 0.02em;
  --font-label: "IM Fell English SC", Georgia, serif;
}

/* Labels/tags/navigatie krijgen op smokkeljacht.com het "IM Fell English SC"-kleinkapitaal-
   gevoel uit de mockups (Main.dc.html/Mobiel.dc.html's .fell-klasse) — puur cosmetisch, geen
   structuurwijziging, dus als los, scoped blokje in plaats van elke klasse hierboven aan te
   passen. */
[data-brand="smokkeljacht"] .nav-links a,
[data-brand="smokkeljacht"] .nav-menu-panel a,
[data-brand="smokkeljacht"] .footer-links a,
[data-brand="smokkeljacht"] .hero-badge,
[data-brand="smokkeljacht"] .kant-tag,
[data-brand="smokkeljacht"] .cheat-chip,
[data-brand="smokkeljacht"] .btn {
  font-family: var(--font-label);
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Bugfix C3 (versie 1.4.0, ontdekt via het nieuwe #version-banner): een `hidden`-attribuut
 * verliest van élke class die zelf `display` zet (bv. .banner-paused/.banner-zone-info met
 * `display:flex`) — de UA-regel `[hidden] { display:none }` en zo'n class-regel hebben
 * DEZELFDE specificiteit, en de auteursstijl wint dan altijd van de UA-stijl, ongeacht welke
 * van de twee in de HTML/CSS het eerst komt. Zonder deze regel bleven .banner-paused/
 * .banner-zone-info-elementen met `hidden` dus gewoon zichtbaar (en innamen ze layoutruimte) —
 * dat trof niet alleen het nieuwe version-banner, maar ook het al langer bestaande
 * #paused-banner. `!important` hier is bedoeld: dit MOET boven elke class-`display` staan. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
}

/* Vloeiend scrollen naar het joinformulier (#meedoen, "Ik heb een PIN") — alleen als de
   bezoeker geen reduced-motion heeft gevraagd; de algemene animatie/transitie-uitzondering
   hierboven raakt scroll-behavior niet, dus dit is een losse, expliciete opt-in. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ---- layout ---- */

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* Signature entrance: staggered fade-up op de directe kinderen van .page (zowel op de
   gewone SSR-pagina's als binnen de feed-tab van het jager-scherm, die dezelfde klasse
   hergebruikt). Uitgezet op het gejaagde-scherm (data-motion="sober", zie onderaan). */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.page > * {
  animation: fadeUp 0.42s both;
}
.page > *:nth-child(2) {
  animation-delay: 0.04s;
}
.page > *:nth-child(3) {
  animation-delay: 0.08s;
}
.page > *:nth-child(4) {
  animation-delay: 0.12s;
}
.page > *:nth-child(5) {
  animation-delay: 0.16s;
}
.page > *:nth-child(6) {
  animation-delay: 0.2s;
}

h1 {
  font-size: 1.6rem;
  font-weight: 780;
  margin: 6px 0 16px;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}
h2::before {
  content: "";
  width: 4px;
  height: 1.02em;
  border-radius: 3px;
  background: linear-gradient(var(--accent-2), var(--accent));
  flex: 0 0 auto;
}

p.lead {
  color: var(--muted);
  margin-top: 0;
}

a {
  color: var(--link);
}

/* ---- kaarten ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  transition: transform 0.16s var(--spring), box-shadow 0.16s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ---- formulieren ---- */

label {
  display: block;
  font-weight: 640;
  font-size: 0.9rem;
  margin: 14px 0 6px;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-bd);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 4px;
}

/* ---- checkbox/range (spelgebied-kaartkiezer, versie 0.7.0) ---- */
/* De algemene input/select/textarea-regel hierboven (display:block, width:100%, veldrand)
   past niet bij een checkbox of slider — hier expliciet overschreven. */
input[type="checkbox"] {
  display: inline-block;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  accent-color: var(--accent);
}
input[type="range"] {
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--accent);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Honeypot voor /bug-melden (versie 0.6.0, src/views/bugreport.tsx): van het canvas geschoven
   i.p.v. display:none — sommige spam-bots negeren display:none/visibility:hidden-velden juist
   omdat die de meestgebruikte anti-spamtruc zijn. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 19px;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: white;
  margin-top: 16px;
  box-shadow: 0 3px 11px color-mix(in srgb, var(--accent) 34%, transparent);
  transition: transform 0.08s, box-shadow 0.16s, filter 0.16s;
  text-decoration: none;
}
button:hover,
.btn:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
  filter: brightness(1.03);
}
button:active,
.btn:active {
  transform: translateY(1px) scale(0.99);
}

button.secondary,
.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}
button.secondary:hover,
.btn.secondary:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: none;
}

button.danger {
  background: linear-gradient(180deg, #e05a5a, var(--danger));
  box-shadow: 0 3px 11px color-mix(in srgb, var(--danger) 34%, transparent);
}

button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.pin {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-align: center;
  padding: 14px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  margin: 12px 0;
  font-variant-numeric: tabular-nums;
}

.status-msg {
  font-size: 0.9rem;
  min-height: 1.2em;
  margin-top: 8px;
}
.status-msg.error {
  color: var(--danger-tx);
}
.status-msg.ok {
  color: var(--ok-tx);
}

.big-clock {
  font-size: 3.1rem;
  font-weight: 800;
  text-align: center;
  margin: 8px 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.clock-label {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Derde variant (versie 1.11.0, smokkel-modus): vrachtbrief-voortgang op het gejaagde-scherm
   (src/views/runner.tsx) — een rij genummerde ruiten, "gelost" ingekleurd door
   public/js/runner.js zodra ownCheckpoints.gelost meegroeit. */
.vrachtbrief-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 14px 0 4px;
}
.vrachtbrief-seq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transform: rotate(45deg);
  border: 2px dashed var(--field-bd);
  border-radius: 4px;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.85rem;
  flex: none;
}
.vrachtbrief-seq > * {
  transform: rotate(-45deg);
}
.vrachtbrief-seq.gelost {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

ul.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
ul.list li:last-child {
  border-bottom: none;
}
/* Het label (links, met stip+icoon) blijft op één regel; alleen de waarde rechts mag
   afbreken — anders knipt "Scherm aan" lelijk af op smalle schermen (runner-status-lijst). */
ul.list li > span:first-child {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
ul.list li > span:last-child {
  text-align: right;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  background: var(--surface-2);
  color: var(--ink);
}
.badge.active {
  background: var(--accent-alt);
  color: white;
}
.badge.caught {
  background: var(--danger);
  color: white;
}
.badge.escaped {
  background: var(--muted);
  color: white;
}
.badge.warn {
  background: var(--warn-bg);
  color: var(--warn-tx);
  border: 1px solid var(--warn-bd);
}

.dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 6px;
  flex: none;
}
.dot.ok {
  background: var(--accent-alt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-alt) 22%, transparent);
}
.dot.bad {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.dot.warn {
  background: #d8940a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d8940a 22%, transparent);
}

.warning-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  color: var(--warn-tx);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.warning-box .icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Kaartkiezer voor het spelgebied op /new (versie 0.7.0) — een gewoon (niet-fullscreen)
   kaartje in de flow van het formulier, in tegenstelling tot de fullscreen jagerskaart. */
.zone-map {
  height: 320px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 10px 0;
  background: var(--bg-2);
}
.zone-radius-value {
  text-align: right;
  font-weight: 650;
  margin-top: -2px;
}

.muted {
  color: var(--muted);
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.settings-grid dt {
  color: var(--muted);
  font-size: 0.82rem;
  grid-column: 1;
}
.settings-grid dd {
  margin: 0;
  grid-column: 2;
  text-align: right;
  font-weight: 650;
}

.banner-ended {
  border: 2px solid var(--accent-alt);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Strafminuten-melding op het gejaagde-scherm (batch 3, PLAN.md punt 2). Hergebruikt voor de
   "rand haalt je in"-waarschuwing en de "buiten het spelgebied"-banner (versie 0.7.0) —
   bewust dezelfde stijl, het zijn allemaal urgente, actie-vragende meldingen. */
.banner-penalty {
  border: 2px solid var(--warn-bd);
  background: var(--warn-bg);
  color: var(--warn-tx);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Neutrale, niet-urgente spelgebied-mededeling (krimp begonnen/mijlpaal, versie 0.7.0) —
   geen straf, dus bewust GEEN waarschuwingskleur; het merk-accent past beter. */
.banner-zone-info {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--ink);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---- versie 0.9.0: pauzeren/hervatten (onderdeel B2) ---- */

/* Onmiskenbare pauze-banner op het gejaagde-scherm — bewust een ANDERE, sterkere stijl dan
   .banner-penalty/.banner-zone-info hierboven: dit is geen individuele waarschuwing maar een
   spelbrede status die je nooit mag missen. --ink/--bg zijn al theme-aware (zie :root/media
   hierboven), dus dit inverteert vanzelf mee in licht/donker zonder een aparte dark-regel. */
.banner-paused {
  border: none;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Zelfde banner op het jager-scherm (.hunter-app is geen .page/.card-layout) — vast onder de
   header, altijd zichtbaar ongeacht welke tab (Kaart/Feed) actief is. */
.paused-banner {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 800;
  letter-spacing: 0.02em;
  z-index: 20;
}

/* ---- versie 1.4.0: versie-handshake (bugfix C3) ----
   Subtiele, NIET-blokkerende hint zodra de server een nieuwere APP_VERSION meldt dan waarmee
   deze pagina ooit geladen is — bewust geen waarschuwingskleur (.banner-penalty) en bewust
   geen auto-reload: alleen een zachte aansporing om zelf te verversen, nooit midden in een
   spel afgedwongen. Alleen op het jager-scherm (.hunter-app, geen .page/.card-layout): vast
   onder de header, net als .paused-banner hierboven. Het gejaagde-scherm hergebruikt
   hiervoor gewoon .card.banner-zone-info (al precies dezelfde neutrale bedoeling). */
.version-banner {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

/* ---- versie 0.9.0: geluid/tril-toggle (onderdeel A) ---- */

.screen-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.screen-title-row h1 {
  margin-bottom: 6px; /* iets krapper dan de standaard h1-marge, past beter naast de knop */
}

.icon-toggle-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  box-shadow: none;
}
.icon-toggle-btn:hover {
  box-shadow: none;
  filter: none;
  color: var(--ink);
}
.icon-toggle-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.hunter-header .icon-toggle-btn {
  width: 36px;
  height: 36px;
}

/* ---- Ronde 5 (v1.1.0): automatische schermdimming (onderdeel B) ----
   Bijna-zwarte overlay bovenop de HELE pagina (dus ook boven de fullscreen jagerskaart en de
   frosted tabbar) na inactiviteit — een web-overlay kan de hardware-helderheid niet écht
   verlagen, maar scheelt wél stroom op OLED. Standaard onzichtbaar (opacity 0, geen
   pointer-events) i.p.v. een `hidden`-toggle: zo blijft in-/uitfaden één simpele
   class-toggle, zonder een setTimeout die moet wachten op het einde van de transitie. */
#dim-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.92);
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#dim-overlay.no-motion {
  transition: none;
}
#dim-overlay.visible {
  opacity: 1;
}
.dim-overlay-hint {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 640;
  letter-spacing: 0.01em;
}
.dim-overlay-clock {
  margin: 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* ---- versie 0.9.0: spelleider-gereedschap — speler verwijderen (onderdeel B1) ---- */

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.member-row button {
  margin: 0;
  padding: 5px 10px;
  font-size: 0.78rem;
  box-shadow: none;
}

/* ---- meldingen-/installatiekaart (jager-scherm, batch 3) ---- */

.push-status-row,
.install-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
}
.install-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ---- Jager-scherm: fullscreen kaart + frosted bottom-tabbar ---- */

.hunter-app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.hunter-header {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 6px 20px rgba(28, 20, 10, 0.05);
  z-index: 20;
}

/* Versie 1.8.0: één held-cijfer (de drop-aftelling) + twee bijzaken + de knoppen. De spelnaam
   stond hier met een ellipsis meestal tot niets gereduceerd en is naar de Meer-tab verhuisd. */
.hunter-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hunter-drop {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.hunter-drop-label {
  font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hunter-drop-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Bevinding 7 (reisreview 2026-08-31, ronde 3, B2/B6): public/js/hunter.js's renderHeader() zet
   deze klasse zodra de aftelling geen door de server bevestigd moment meer toont, maar op hele
   intervallen doortelt vanaf het laatst bekende next_drop_at (estimateNextDropAtLocal). Gedempte
   kleur i.p.v. de gewone (opvallende) accentkleur — nooit verwarren met een servergegarandeerde
   aftelling (B2), zonder terug te vallen op de dode "--:--" die er zonder deze fix stond. */
.hunter-drop-value.estimate {
  color: var(--muted);
}

.hunter-header-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hunter-mini {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hunter-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
/* Bugfix S8, versie 1.8.0: het verbindingslampje is hier een kale stip — geen pil meer bovenop
   de kaart (en dus ook geen botsing meer met de Leaflet-zoomknoppen linksboven). */
.hunter-header-actions .dot {
  margin-right: 0;
}

/* Loopt het drop-interval af: "bijna" aflezen zonder cijfers te ontcijferen terwijl je rent. */
.hunter-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.hunter-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.9s linear;
}

/* Alleen zichtbaar als de verbinding ECHT weg is (setConnectionDot('bad', …)). */
.connection-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--danger-tx);
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.connection-warning[hidden] {
  display: none;
}
.connection-warning .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Frosted bottom tab bar (skill webapp-house-style § "non-negotiables" nr. 8). */
nav.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--nav);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
  display: flex;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 8px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 640;
  box-shadow: none;
  transition: color 0.15s, transform 0.12s;
}
.tab-btn .icon {
  width: 24px;
  height: 24px;
  transition: transform 0.16s;
}
.tab-btn:hover {
  box-shadow: none;
  filter: none;
}
.tab-btn[aria-selected="true"] {
  color: var(--accent);
}
.tab-btn[aria-selected="true"] .icon {
  transform: translateY(-1px) scale(1.06);
}
.tab-btn:active {
  transform: scale(0.94);
}

.tab-panel {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.tab-panel[hidden] {
  display: none;
}

#tab-feed.tab-panel,
#tab-meer.tab-panel {
  overflow-y: auto;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}

/* ---- versie 1.8.0: de Kaart-tab is een GRID van drie rijen ----
   Was: #map absoluut op inset:0 met vier overlays erbovenop, elk met een eigen
   bottom/z-index-rekensom. Gevolg 1: de onderste ~106 px kaart (tabbar + safe-area) was
   permanent onzichtbaar, inclusief de verplichte OSM-attributie. Gevolg 2: elk nieuw element
   moest weer in die rekensom passen — de gebeurtenisbalk van 1.7.0 kreeg geen `position` mee en
   werd daardoor door de (gepositioneerde) kaart overschilderd, dus was hij nooit zichtbaar.
   Nu zijn de gebeurtenisbalk en het duo-dek echte rijen; alleen kleine chips liggen nog over de
   kaart. */
#tab-map.tab-panel {
  display: grid;
  grid-template-rows: 1fr auto auto;
  /* Bugfix B1 (visuele controle, versie 1.8.0): zonder een expliciete kolom kreeg de enige
     (impliciete) kolom een `auto`-breedte — en die wordt bepaald door het MAX-CONTENT van de
     breedste rij, gemeten VOORDAT enige flex-shrink toeslaat. Eén duo-regel met een lange naam
     én twee badges (bv. NOOD + "+5 min") kon zo, ongekrompen gemeten, breder zijn dan het
     scherm — waardoor #tab-map (en daarmee de hele kaarttab) 100px buiten beeld liep en
     `.tab-panel`'s `overflow:hidden` dat gewoon onbereikbaar afsneed. `minmax(0,1fr)` zet een
     harde bovengrens (de beschikbare breedte) op de kolom, ongeacht content. */
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
/* Bugfix B1 (vervolg): de grid-track-limiet hierboven is niet genoeg — een grid-ITEM heeft
   zelf ook een default `min-width:auto`, wat neerkomt op zijn eigen content-based minimum
   (net als bij flex-items). Zonder deze reset zou #map/.last-event-bar/.duo-deck alsnog buiten
   hun (nu wél beperkte) kolom willen groeien. Met min-width:0 mogen ze net zo smal worden als
   de kolom, en doen hun EIGEN kinderen (zoals .duo-row-name's ellipsis) het krimpwerk. */
#map,
.last-event-bar,
.duo-deck {
  min-width: 0;
}
/* Nodig omdat de regel hierboven een id-selector heeft: `.tab-panel[hidden] { display:none }`
   zou anders verliezen van `#tab-map.tab-panel { display:grid }` en de Kaart-tab zou zichtbaar
   blijven op de Feed-/Meer-tab. */
#tab-map.tab-panel[hidden] {
  display: none;
}

#map {
  position: relative;
  min-height: 0;
  background: var(--bg-2);
  /* Sluit Leaflets eigen z-index-schaal (panes 200-700, controls 800-1000) op in dit element,
     zodat hij niet meer meedoet met de z-index van de kopbalk/tabbar/het duoblad daarbuiten.
     Zonder deze isolatie hangt de schilderorde af van welk voorouderelement toevallig een
     stacking context maakt — precies het soort onzichtbare afhankelijkheid waardoor de
     gebeurtenisbalk van 1.7.0 nooit in beeld kwam. */
  isolation: isolate;
}

/* Verschijnt UITSLUITEND tijdens een krimp (renderZoneChip in public/js/hunter.js) — een
   stilstaande cirkel is zelfverklarend en verdient geen permanent element.
   Bugfix B2 (visuele controle, versie 1.8.0): stond linksonder, waar Leaflets eigen
   attributievermelding (rechtsonder-anchor, maar breed genoeg om de hele onderrand te raken)
   'm overlapte. Rechtsboven staat sinds 1.8.0 vrij — de kaartlegenda die daar stond is met de
   herindeling van dit scherm verdwenen (zie de kop van hunter.tsx), en de Leaflet-zoomknoppen
   zitten linksBOVEN, dus rechtsboven botst de chip nergens mee. */
.zone-chip {
  position: absolute;
  right: 8px;
  top: 8px;
  /* Binnen #map: boven Leaflets kaart-/markerlagen (400-700), onder zijn bedieningselementen. */
  z-index: 900;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  box-shadow: var(--shadow);
}
.zone-chip[hidden] {
  display: none;
}

/* Bevinding 1 (reisreview 2026-08-31, ronde 3, B6): verschijnt UITSLUITEND zodra de jager zelf
   gepand/gezoomd heeft (public/js/hunter.js's breakFollow/updateFollowUI) — zolang de kaart
   vanzelf meebeweegt met nieuwe drops is er niets te doen en dus geen knop nodig. Onderin,
   gecentreerd: boven Leaflets duim-bereikbare zoomknoppen (linksboven) en niet in de weg van de
   attributievermelding (rechtsonder, smal genoeg om dit te missen). Ingevulde accentkleur i.p.v.
   de neutrale .zone-chip-stijl — dit IS een knop om op te tikken, geen informatieregel. */
.map-follow-btn {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.map-follow-btn .icon {
  width: 16px;
  height: 16px;
}
.map-follow-btn[hidden] {
  display: none;
}

/* ---- het duo-dek (versie 1.8.0) ----
   Was een horizontaal scrollende rij pillen: bij 260-320 px per pil zag je op een 390 px-scherm
   één duo tegelijk, terwijl een spel tot 20 duo's toestaat. Nu één regel per duo, gesorteerd op
   urgentie (nood bovenaan, daarna oplopend op afstand) — "welk duo is het dichtstbij" is dan
   gewoon de bovenste regel. */
.duo-deck {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.duo-deck-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 6px 0 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.duo-deck-grip:hover {
  box-shadow: none;
  filter: none;
}
.duo-deck-grip-bar {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
}

.duo-deck-rows {
  display: flex;
  flex-direction: column;
  /* ~3 regels; de rest is bereikbaar door te scrollen, of door de grijper naar "full" te tikken
     hieronder. Wie puur wil navigeren klapt het dek in met de grijper (stand bewaard in
     localStorage). */
  max-height: 108px;
  overflow-y: auto;
}
.duo-deck.collapsed .duo-deck-rows {
  max-height: 36px;
}
/* Bevinding 4 (reisreview 2026-08-31, ronde 3, B6): derde grijperstand — "normaal" (108px, ~3
   regels) had geen weg naar méér dan scrollen binnen dat strookje, en niets op het scherm zei
   dat dat kon. `dvh` (met `vh`-fallback voor oudere WebKit) i.p.v. een vaste pixelwaarde: het
   dek moet met de ECHTE, dynamische viewporthoogte meeschalen (adresbalk in/uit) net als
   `.hunter-app` hierboven al met `100dvh` doet — anders zou "60%" op een telefoon met een
   ingeklapte adresbalk ineens een ander deel van het scherm betekenen dan waarop getest is. */
.duo-deck.full .duo-deck-rows {
  max-height: 60vh;
  max-height: 60dvh;
}

/* Bugfix B3 (visuele controle, versie 1.8.0): drie regels zonder enige aanwijzing dat er meer
   waren — spellen mogen tot 20 duo's hebben. public/js/hunter.js's updateDuoDeckMoreHint() telt
   na elke render hoeveel rijen buiten het zichtbare deel van .duo-deck-rows vallen (via
   offsetTop, dus ongeacht DOM-volgorde — de duo's worden gesorteerd met CSS `order`) en vult dit
   regeltje. Bewust een rustig, klein bijschrift i.p.v. een schaduw/gradient-overlay over de
   kaart: minder afleiding op een scherm waar je toch al op moet letten. */
.duo-deck-more {
  margin: 0;
  padding: 4px 14px 7px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--muted);
  /* Bijvangst (visuele hercontrole, versie 1.8.0), vangnet voor de regel hieronder: op de
     allereerste render (vóór hunter.js' eerste updateDuoDeckMoreHint() draait) staat hier nog
     geen tekst in — min-height reserveert dan dezelfde hoogte als mét tekst (line-height +
     padding + border-top), zodat er nooit een moment is zonder gereserveerde ruimte. */
  min-height: calc(1.08rem + 12px);
}
/* Bijvangst (visuele hercontrole, versie 1.8.0): dit regeltje verscheen/verdween met het
   `hidden`-attribuut (updateDuoDeckMoreHint() in hunter.js), dus het duo-dek kromp ~29px in
   zodra alle duo's zichtbaar waren (bv. na scrollen naar beneden in het dek) — precies genoeg om
   de kaart/inhoud eronder te laten verspringen, midden in het scrollgebaar. De ruimte blijft nu
   ALTIJD gereserveerd: verborgen betekent hier onzichtbaar (visibility), niet weg (display).
   Overschrijft de globale `[hidden] { display: none !important }` (bugfix C3 hierboven) met
   gelijke !important maar een hogere specificiteit (klasse + attribuut), dus dit wint ongeacht
   bronvolgorde. */
.duo-deck-more[hidden] {
  display: block !important;
  visibility: hidden;
}

.duo-deck-empty {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 0.85rem;
}

.duo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 7px 14px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  flex: none;
}
.duo-row + .duo-row {
  border-top: 1px solid var(--line);
}
.duo-row:hover {
  box-shadow: none;
  filter: none;
}
.duo-row:active {
  background: var(--surface-2);
}
.duo-row.nood {
  background: var(--danger-bg);
}

.duo-row-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Bugfix B4 (visuele hercontrole, versie 1.8.0): de naam is de IDENTITEIT van het duo en mag
   nooit tot 0px krimpen. Vóór deze fix stonden .duo-row-drop/.duo-row-dist op `flex: none` en
   mocht .duo-row-badges wrappen — daarmee was de naam het ENIGE element dat nog kon krimpen, en
   bij twee badges (de NOOD-regel, de "+5 min"-regel, de "gepakt"-regel) kromp hij tot precies
   0,0px. Nu krijgt de naam de krimpvolgorde die bij zijn belang past: hij krimpt als LAATSTE (en
   dan met een leesbaar minimum + beletselteken), de afstand (die ook op het duoblad staat) wijkt
   als EERSTE. */
.duo-row-name {
  font-weight: 650;
  flex: 1 1 auto;
  min-width: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bevinding 6 (reisreview 2026-08-31, ronde 3, B6): kreeg er een positie-leeftijd-staartje bij
   ("drop 6s geleden — positie ±47s oud", public/js/hunter.js's positionAgeSuffix) — die tekst
   kan een stuk langer worden dan het oude "drop 23s geleden". `flex: none` (nooit krimpen) was
   met de kortere tekst van vóór deze fix onschuldig; nu kan dit element zelf ook de reden worden
   dat de rij te breed wordt. `flex: 0 1 auto` (mag krimpen, groeit niet vanzelf) + ellipsis geeft
   hem dezelfde soort nette afkap als .duo-row-dist hieronder — de naam (die WEL een harde
   min-width-vloer heeft) blijft zo als laatste over voordat er iets echt onleesbaar wordt. */
.duo-row-drop {
  flex: 0 1 auto;
  min-width: 3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.78rem;
}

/* B4: eerste kandidaat om te krimpen (was `flex: none`) — de afstand staat ook op het duoblad
   (één tik verderop), dus die mag hier het veld ruimen vóór de naam ook maar een pixel inlevert.
   Bevinding 3 (reisreview 2026-08-31, ronde 3, B6): met twee badges ernaast (bv. "+10 min" +
   "stil 2m geleden") kromp dit element tot breedte 0 — de tekst ("5,3 km ↗") bleef dan zonder
   `white-space: nowrap` gewoon dóórstaan, alleen AFGEBROKEN over drie regels binnen die 0px
   (hoogte 56px, zichtbare breedte 0px: onleesbaar, niet weg). `min-width: 0` liet dus precies
   het VERKEERDE gebeuren: de bedoelde "wijkt als eerste"-fix (B4 hierboven) werkte wél voor de
   BREEDTE, maar zonder nowrap week de tekst in hoogte i.p.v. te verdwijnen achter een ellipsis.
   nowrap + ellipsis maakt "krimpt" weer letterlijk "kapt af", nooit "wordt onzichtbaar op drie
   regels". */
.duo-row-dist {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

/* Bugfix B1 (vervolg) + B4: stond op `flex-wrap: wrap` zodat twee badges niet breder werden dan
   hun kolom — maar een wrappende regel maakte de RIJ hoger, en gaf de naam zo nog minder ruimte.
   B4: terug naar `flex: none` (niet meer krimpen/wrappen); .duo-row-dist hierboven is nu het
   element dat wijkt, dus de badges hoeven zelf niet meer in te schikken. */
.duo-row-badges {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
  flex: none;
}
.duo-row-badges .badge {
  font-size: 0.68rem;
  padding: 1px 7px;
}

/* ---- het duoblad (versie 1.8.0) ----
   "Gepakt" is voor een gewone jager onomkeerbaar en stond permanent op duimhoogte, pal boven de
   kaart waar je tijdens het rennen op pant en zoomt. Alle duo-acties zitten daarom achter één
   tik op de duoregel. */
.duo-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.duo-sheet[hidden] {
  display: none;
}

.duo-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.duo-sheet-panel {
  position: relative;
  background: var(--surface);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 72vh;
  overflow-y: auto;
}

.duo-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.duo-sheet-head strong {
  font-size: 1.1rem;
}
.duo-sheet-close {
  margin: 0;
  padding: 6px 12px;
  font-size: 0.8rem;
  box-shadow: none;
}

.duo-sheet-line {
  margin: 0 0 4px;
  font-size: 0.86rem;
}

.duo-sheet-subtitle {
  margin: 14px 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.duo-sheet-drops {
  max-height: 30vh;
  overflow-y: auto;
}

.duo-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.duo-sheet-actions button {
  margin: 0;
  flex: 1 1 46%;
}

/* .duo-pill-dot is het overblijfsel van de oude duo-strip: de gekleurde stip wordt GEDEELD met
   het nabespeelscherm (.replay-team-card-head / .replay-share-card-head in src/views/end.tsx),
   dus die blijft — de pil eromheen is met de strip verdwenen. Het duo-dek heeft zijn eigen
   .duo-row-dot. */
.duo-pill-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Versie 1.8.0: de kaartlegenda rechtsboven op het jagersscherm is WEG — het duo-dek toont
   dezelfde kleurstip + duonaam, en bij 5+ duo's dekte de legenda precies dat deel van de kaart
   af waar die duo's stonden. Deze twee klassen BLIJVEN: ze worden gedeeld met de statische
   legenda van het nabespeelscherm (.map-legend-static / #replay-map-legend in end.tsx). */
.map-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  white-space: nowrap;
}

.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
/* Legenda-stip voor het spelgebied: gestippelde rand, subtiele vulling — zelfde taal als de
   cirkel op de kaart zelf (buildZoneCircleOptions in public/js/hunter.js). */
.map-legend-dot.zone {
  border-radius: 3px;
  border: 2px dashed #e8590c;
  background: rgba(232, 89, 12, 0.12);
}

/* Genummerde drop-marker (L.divIcon-html) */
.drop-marker {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  color: white;
  font-weight: 700;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.drop-marker.flagged {
  border-style: dashed;
  border-color: #fff3;
  opacity: 0.65;
}

.drop-marker-wrap.latest .drop-marker {
  animation: drop-pulse 1.6s ease-in-out infinite;
}

@keyframes drop-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0), 0 1px 4px rgba(0, 0, 0, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drop-marker-wrap.latest .drop-marker {
    animation: none;
    outline: 3px solid currentColor;
  }
}

/* Bevinding 5 (reisreview 2026-08-31, ronde 3, B6): wrapt .drop-marker zodat .drop-marker-name
   (alleen op de nieuwste marker per duo, zie buildDropIcon in public/js/hunter.js) er absoluut
   onder gepositioneerd kan worden zonder de 26×26 iconSize/iconAnchor van de marker zelf te
   verstoren — .drop-marker-name draagt zelf niet bij aan de doosgrootte (position:absolute), dus
   dit element blijft voor Leaflet nog steeds precies 26×26. */
.drop-marker-icon {
  position: relative;
  width: 26px;
  height: 26px;
}
.drop-marker-name {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 3px;
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Derde variant (versie 1.11.0, smokkel-modus): loswal-marker (L.divIcon-html) — een 45°-
   gedraaid vierkant (een "ruit") in de teamkleur, zodat een wal nooit met een ronde drop-marker
   verward wordt. Gelost = gedempt/gevuld met een vinkje (.reached); nog niet gelost = een
   opening in de teamkleur met het volgnummer. */
.checkpoint-marker {
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  border: 3px solid;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkpoint-marker > span {
  transform: rotate(-45deg);
  font-weight: 700;
  font-size: 0.68rem;
}
.checkpoint-marker.reached {
  opacity: 0.55;
}

.hunter-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #333;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: opacity 0.6s ease;
}

.hunter-marker.stale {
  opacity: 0.3;
}

/* Eigen positie op de jagerskaart (v0.5.1, veldtest-fix 1): wit gevuld met donkere rand +
   middenstip — bewust het OMGEKEERDE kleurenschema van .hunter-marker hierboven (donker
   gevuld), zodat de eigen marker nooit met een mede-jager te verwarren is. Vaste kleuren
   (geen thema-variabelen), net als de andere kaartmarkers: dit staat op de Leaflet-kaart,
   niet in de gewone UI. */
.own-position-marker {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1c1917;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.own-position-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #1c1917;
}

.leaflet-popup-content {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Bugfix B2 (visuele controle, versie 1.8.0): Leaflets eigen attributievermelding en
   zoomknoppen komen met een hardgecodeerde WITTE achtergrond (public/vendor/leaflet/leaflet.css)
   — in het donkere thema was dat het felste vlak van het hele scherm, in een app die juist een
   eigen schermdimmer heeft. Themaseert mee met de rest van de huisstijl (prefers-color-scheme,
   geen los data-theme-attribuut in dit project — zie :root hierboven). */
@media (prefers-color-scheme: dark) {
  .leaflet-container .leaflet-control-attribution {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--muted);
  }
  .leaflet-container .leaflet-control-attribution a {
    color: var(--ink);
  }
  .leaflet-bar a {
    background-color: var(--surface);
    color: var(--ink);
    border-bottom-color: var(--line);
  }
  .leaflet-bar a:hover,
  .leaflet-bar a:focus {
    background-color: var(--surface-2);
  }
  .leaflet-bar a.leaflet-disabled {
    background-color: var(--surface-2);
    color: var(--muted);
  }
}

/* ---------- Nabespeel-scherm / replaykaart (versie 0.8.0) ---------- */
/* Gewoon (niet-fullscreen) kaartje in de flow van het eindscherm — zelfde opzet als
   .zone-map op /new, maar hoger (per-duo routes + vangkruisen willen meer ruimte dan een
   los middelpunt+straal-kaartje). */
.replay-map {
  height: 420px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 10px 0;
  background: var(--bg-2);
}

/* Warme merk-tint op de kaarttegels — alleen in het donkere thema (volgt prefers-color-
   scheme, net als de rest van de huisstijl); in het lichte thema blijven de tegels gewoon
   OpenStreetMap-neutraal. Puur cosmetisch (CSS filter op de tile-<img>'s), geen impact op
   Leaflet's eigen laagstructuur. */
@media (prefers-color-scheme: dark) {
  .replay-map .replay-tiles {
    filter: grayscale(0.35) sepia(0.35) saturate(1.3) brightness(0.55) hue-rotate(-8deg);
  }
}

.map-legend-static {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.map-legend-static .map-legend-row {
  padding: 0;
}

/* Vangkruis (afgeleid van de laatste drop van een gepakt duo, src/lib/replay.ts's
   deriveCaughtPoint) — bewust duidelijk anders dan een genummerde .drop-marker: rood, groter,
   een kruis in plaats van een cijfer. */
.catch-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Statistieken per duo (nabespeel-scherm, src/lib/replay.ts's TeamReplayStats). */
.replay-team-card {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.replay-team-card:first-child {
  border-top: none;
  padding-top: 4px;
}
.replay-team-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.replay-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.replay-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.replay-stat-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--font-display-weight, 800);
}
.replay-stat-label {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
}

/* "Deel als video"-kaarten per duo — runners zien hun eigen duo vooraan + gemarkeerd
   (src/routes/pages.tsx zet het eigen team vooraan in replay.teams). */
.replay-share-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}
.replay-share-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.replay-share-card.own {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.replay-share-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Gejaagde-scherm: functioneel-sober (PLAN.md § "House style") ---------- */

.status-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: -8px;
  margin-bottom: 16px;
}

/* Geen speelse animaties tijdens het spel: geen fade-up, geen hover-lift. Hoog contrast
   voor de klok blijft van de gewone .big-clock/.card-regels hierboven komen — die zijn al
   fors genoeg (font-weight 800, grote maat) om ook in fel zonlicht leesbaar te zijn. */
body[data-motion="sober"] .page > * {
  animation: none;
}
body[data-motion="sober"] .card {
  transition: none;
}
body[data-motion="sober"] .card:hover {
  transform: none;
  box-shadow: var(--shadow);
}

/* ---------- Beheerstatistieken (versie 0.9.0, onderdeel C): eenvoudige CSS-staafdiagrammen,
   géén charting-library ---------- */

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.stat-tile {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: center;
}
.stat-tile-value {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stat-tile-label {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 130px;
  overflow-x: auto;
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.bar-col {
  flex: none;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.bar-col-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
.bar-col-label {
  margin-top: 6px;
  font-size: 0.6rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Contentpagina's: strafmodus-/instellingentabellen (batch 4, hergebruikt
   in batch 5 op /spelregels en /organiseren) ---------- */

/* Genummerde stappenlijst met leestekst (batch 5) — visueel in lijn met ul.list hieronder,
   maar met echte <ol>-nummering i.p.v. losse kop/waarde-kolommen. */
.ordered-list {
  margin: 0;
  padding-left: 22px;
}
.ordered-list li {
  padding: 9px 0 9px 4px;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.ordered-list li:last-child {
  border-bottom: none;
}

.table-scroll {
  overflow-x: auto;
}
.mode-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.mode-table th,
.mode-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.mode-table th {
  color: var(--muted);
  font-weight: 650;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.mode-table tr:last-child td {
  border-bottom: none;
}

/* Gereserveerde advertentieruimte (batch 4, punt 4) — leeg totdat Auto ads daadwerkelijk
   iets plaatst; alleen aanwezig in de HTML als ADSENSE_CLIENT geldig is (src/views/adslot.tsx). */
.ad-slot {
  min-height: 100px;
  border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  margin-bottom: 16px;
}

/* ======================================================================================
   Batch 5 — landing (herontwerp) + de drie contentpagina's (/spelregels, /organiseren,
   /faq). Ontwerpbron: de door de gebruiker goedgekeurde mockups (Main.dc.html op 1440px,
   Mobiel.dc.html op 390px) — kleuren/radius/schaduw komen daar 1-op-1 uit de bestaande
   huisstijl-tokens hierboven (--accent, --bg, --ink, --shadow(-lg), --radius(-lg) matchen
   exact de mockup-waarden), dus geen nieuwe kleurenset nodig. Eén breakpoint (860px) zet
   de grids/nav om van desktop- naar mobiel-gedrag; ertussenin schalen vloeiende clamp()-
   maten mee zodat tussenliggende breedtes (bv. tablet) niet breken. De secties "Kies je
   kant", de tijdlijn en de FAQ-teaser stonden niet op het mobiele artboard (dat toont een
   ingekorte selectie secties) — hun mobiele opmaak hieronder is geïnterpoleerd in dezelfde
   kaartstijl/maatvoering als de secties die wél op het mobiele artboard staan. ---------- */

.marketing {
  color: var(--ink);
}

.container-wide {
  max-width: 72rem; /* 1152px, exact de mockup-containerbreedte */
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (max-width: 860px) {
  .container-wide {
    padding: 0 18px; /* mockup-mobiel: 18px zijkant i.p.v. 24px */
  }
}

/* Let op voor alle regels hieronder die vaak SAMEN met .container-wide op hetzelfde element
   staan (bv. class="section-marketing container-wide"): gebruik nooit de `padding`-shorthand
   met 0 voor links/rechts — dat zou (zelfde specificiteit, latere regel wint) de
   zijmarge van .container-wide hierboven ongedaan maken. Alleen padding-top/-bottom hier. */

/* .only-desktop/.only-mobile zelf staan bewust HELEMAAL ONDERAAN dit bestand, niet hier —
   zie de toelichting daar: als utility-klasse moeten ze na alles staan zodat ze bij gelijke
   specificiteit altijd winnen van een component-regel als "nav-links { display: flex }". */

.display-font {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 800);
  letter-spacing: var(--font-display-tracking, -0.02em);
}

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

.site-nav {
  padding-top: 24px;
}
.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand-mark .icon {
  width: 24px;
  height: 24px;
  color: white;
}
.brand-word {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--font-display-weight, 800);
  letter-spacing: var(--font-display-tracking, -0.02em);
}
/* .nav-links/.nav-cta hieronder verbergen zichzelf bewust via hun EIGEN regel in de
   media-query verderop, in plaats van de gedeelde .only-desktop-utility te dragen: die
   utility zet ook `display` (inline/none), en zou bij gelijke specificiteit met déze
   `display: flex`-regel een bronvolgorde-wedstrijd worden — welke van de twee wint hangt dan
   af van waar de utility toevallig in dit bestand staat, en repareert het ene breekpunt
   alleen door het andere kapot te maken (precies dit gebeurde eerder — zie de toelichting
   bij .only-desktop onderaan dit bestand). Een eigen, specifieke regel voorkomt de race. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}
.nav-cta {
  margin-top: 0 !important;
}
.nav-menu-toggle {
  display: none;
}

@media (max-width: 860px) {
  .brand-mark {
    width: 34px;
    height: 34px;
  }
  .brand-mark .icon {
    width: 19px;
    height: 19px;
  }
  .brand-word {
    font-size: 1.19rem;
  }
  .nav-links,
  .nav-cta {
    display: none;
  }
  .nav-menu-toggle {
    display: block;
    position: relative;
  }
  .nav-menu-toggle > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--ink);
  }
  .nav-menu-toggle > summary::-webkit-details-marker {
    display: none;
  }
  .nav-menu-toggle > summary .icon {
    width: 24px;
    height: 24px;
  }
  .nav-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 10px;
  }
  .nav-menu-panel a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }
  .nav-menu-panel a:hover {
    background: var(--bg-2);
  }
  .nav-menu-panel .btn {
    margin: 6px 4px 2px;
  }
}

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

.hero-marketing {
  padding-top: clamp(40px, 3vw + 24px, 72px);
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero-badge {
  display: inline-flex;
  align-self: flex-start;
  background: var(--ok-bg);
  color: var(--ok-tx);
  border: 1px solid var(--ok-bd);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.875rem, 2.1rem + 2.6vw, 4.625rem);
  font-weight: var(--font-display-weight, 800);
  line-height: 1.03;
  letter-spacing: var(--font-display-tracking, -0.03em);
  margin: 0;
}
.hero-lead {
  font-size: clamp(1.03rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
  margin: 0;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-ctas .btn {
  margin-top: 0;
  font-size: 1.05rem;
  padding: 16px 30px;
}
.btn.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn.btn-outline:hover {
  box-shadow: none;
  filter: none;
  background: var(--bg-2);
}
.hero-checks {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 600;
}
.hero-checks span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-checks .icon {
  width: 17px;
  height: 17px;
  color: var(--accent-alt);
  stroke-width: 2.75;
}

.hero-art {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
}
.hero-art svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.hero-art-mobile {
  display: none;
}

@media (max-width: 860px) {
  .hero-marketing {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 8px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn {
    text-align: center;
  }
  .hero-checks {
    justify-content: center;
    gap: 14px;
    font-size: 0.85rem;
  }
  .hero-art-desktop {
    display: none;
  }
  .hero-art-mobile {
    display: block;
  }
}

/* ---- sectiekop ---- */

.section-marketing {
  padding-top: 40px;
  padding-bottom: 40px;
}
/* h2 krijgt elders (in .card, zie de basisregels bovenaan dit bestand) een decoratief
   accentstreepje via h2::before — bedoeld voor de kaart-koppen van de bestaande schermen.
   De grote display-koppen hier (sectiekoppen + de twee banden) horen dat NIET te hebben —
   in de mockups staat gewoon platte, vette Bricolage Grotesque-tekst zonder streepje. */
.section-heading,
.cheat-copy h2,
.cta-band-copy h2 {
  display: block;
}
.section-heading::before,
.cheat-copy h2::before,
.cta-band-copy h2::before {
  content: none;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  font-weight: var(--font-display-weight, 800);
  letter-spacing: var(--font-display-tracking, -0.02em);
  margin: 0 0 26px;
}

/* ---- Zo werkt het ---- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.feature-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.16s var(--spring), box-shadow 0.16s;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon.tint-warm {
  background: var(--chip-hunter-bg);
  color: var(--accent-strong);
}
.feature-icon.tint-green {
  background: var(--ok-bg);
  color: var(--ok-tx);
}
.feature-icon .icon {
  width: 24px;
  height: 24px;
}
.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}
.feature-card p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 860px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .feature-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius);
  }
  .feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
  }
  .feature-icon .icon {
    width: 16px;
    height: 16px;
  }
  .feature-card h3 {
    font-size: 1.06rem;
  }
  .feature-card p {
    font-size: 0.94rem;
  }
}

/* ---- Kies je kant ---- */

.kant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.kant-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  display: flex;
  gap: 22px;
  align-items: center;
}
.kant-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.kant-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 999px;
}
.kant-tag.runners {
  background: var(--ok-bg);
  color: var(--ok-tx);
}
.kant-tag.hunters {
  background: var(--chip-hunter-bg);
  color: var(--chip-hunter-tx);
}
.kant-card h3 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: var(--font-display-weight, 800);
  letter-spacing: var(--font-display-tracking, -0.01em);
  margin: 0;
}
.kant-card p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Derde variant (versie 1.11.0, alleen Smokkeljacht): het verhaal van de smokkelnacht als
   perkament-kaart tussen de hero en "Zo werkt het" (zie Main.dc.html). Vaste perkamentkleuren
   i.p.v. tokens — dit vlak hoort ook in het donkere thema licht en "oud papier" te blijven
   ogen, dat is precies het contrast-effect uit het ontwerp. */
.verhaal-kaart {
  background: #e8d9b0;
  border: 1.5px solid #c9a227;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 34px 38px;
  color: #3b3222;
}
.verhaal-label {
  font-family: var(--font-label, inherit);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: #8a6f2e;
  margin-bottom: 8px;
}
.verhaal-titel {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 800);
  letter-spacing: var(--font-display-tracking, -0.02em);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  color: #2a2418;
  margin: 0 0 14px;
}
.verhaal-kaart p {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.6;
}
.verhaal-kaart p:last-child {
  margin-bottom: 0;
}
.verhaal-kaart em {
  font-style: italic;
}

.kant-visual {
  width: 150px;
  flex: none;
}
.kant-visual svg {
  display: block;
  width: 100%;
  height: auto;
}
.phone-visual {
  background: #1c1917;
  border-radius: 22px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.phone-visual-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #a8a29b;
}
.phone-visual-clock {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: var(--font-display-weight, 800);
  color: #ffffff;
  letter-spacing: var(--font-display-tracking, -0.02em);
  font-variant-numeric: tabular-nums;
}
.phone-visual-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.phone-visual-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: #d6d2cb;
  font-weight: 600;
}
.phone-visual-row .dot {
  margin-right: 0;
  width: 7px;
  height: 7px;
}
.map-visual {
  background: var(--bg-2);
  border-radius: 22px;
  padding: 10px;
  overflow: hidden;
}

@media (max-width: 860px) {
  .kant-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .kant-card {
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    border-radius: var(--radius);
  }
  .kant-visual {
    width: 130px;
    align-self: center;
  }
}

/* ---- Een spel in vijf bedrijven (Ronde 5, v1.1.0: Krimp toegevoegd tussen Drops/Finale) ---- */

.timeline {
  position: relative;
}
.timeline-line {
  position: absolute;
  left: 70px;
  right: 70px;
  top: 20px;
  height: 2px;
  background: var(--line-strong);
}
.timeline-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.timeline-dot {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--bg);
  flex: none;
}
.timeline-dot .icon {
  width: 19px;
  height: 19px;
  color: white;
}
.timeline-dot.tone-green {
  background: var(--accent-alt);
}
.timeline-dot.tone-dark {
  background: var(--ink);
}
.timeline-dot.tone-accent {
  background: var(--accent);
}
.timeline-step h3 {
  font-size: 1.125rem;
  font-weight: 800;
  margin: 0;
}
.timeline-step p {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 860px) {
  .timeline-line {
    display: none;
  }
  .timeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }
}

/* ---- Anti-valsspeel (donker) — bewust een vaste donkere kaart, ongeacht licht/donker
   thema van de site zelf: precies zoals in beide mockups, geen theme-afhankelijke tokens. */

.cheat-band {
  background: #1c1917;
  border-radius: var(--radius-lg);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.cheat-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cheat-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.5rem);
  font-weight: var(--font-display-weight, 800);
  letter-spacing: var(--font-display-tracking, -0.02em);
  color: #ffffff;
  line-height: 1.12;
  margin: 0;
}
.cheat-copy h2 span {
  color: var(--accent-2);
}
.cheat-copy p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #d6d2cb;
  margin: 0;
}
.cheat-copy p strong {
  color: #ffffff;
}
.cheat-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cheat-chip {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 700;
}
.cheat-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cheat-notice {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cheat-notice .icon {
  width: 24px;
  height: 24px;
  flex: none;
}
.cheat-notice .icon.tone-warn {
  color: var(--accent-2);
}
.cheat-notice .icon.tone-ok {
  color: var(--accent-alt-2);
}
.cheat-notice p {
  font-size: 0.9375rem;
  color: #ffffff;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 860px) {
  .cheat-band {
    grid-template-columns: 1fr;
    padding: 24px 22px;
    gap: 20px;
    border-radius: var(--radius);
  }
  .cheat-copy p {
    font-size: 0.9375rem;
  }
  .cheat-feed {
    gap: 10px;
  }
}

/* ---- FAQ-teaser ---- */

.faq-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.faq-teaser-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.16s var(--spring), box-shadow 0.16s;
}
.faq-teaser-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.faq-teaser-card h3 {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}
.faq-teaser-card p {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.faq-teaser-more {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 860px) {
  .faq-teaser-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ---- Na afloop deel je de jacht (versie 1.0.0) ---- */

.replay-band {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.replay-band-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.replay-band-points {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.replay-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.replay-point h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 0 0 2px;
}
.replay-point p {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 860px) {
  .replay-band {
    grid-template-columns: 1fr;
    padding: 22px 20px;
    gap: 20px;
    border-radius: var(--radius);
  }
}

/* ---- Het net sluit zich — letterlijk (Ronde 5, v1.1.0, onderdeel C: spelgebied/krimp als
   spanningselement) — hergebruikt de .replay-band-grid hierboven, alleen deze ene visual
   erbij. ---- */
.zone-visual {
  width: 132px;
  margin: 0 auto 18px;
  color: var(--accent);
}
.zone-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- slot-CTA ---- */

.cta-band {
  background: var(--accent);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta-band-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cta-band-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  font-weight: var(--font-display-weight, 800);
  letter-spacing: var(--font-display-tracking, -0.02em);
  color: #ffffff;
  margin: 0;
}
.cta-band-copy p {
  font-size: 1.125rem;
  color: #ffe3d1;
  margin: 0;
}
.cta-band .btn {
  margin-top: 0;
  flex: none;
  white-space: nowrap;
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow: 0 2px 6px rgba(28, 20, 10, 0.15);
  font-size: 1.1875rem;
  padding: 18px 34px;
}
.cta-band .btn:hover {
  filter: none;
  box-shadow: 0 4px 12px rgba(28, 20, 10, 0.22);
}

@media (max-width: 860px) {
  .cta-band {
    flex-direction: column;
    text-align: center;
    padding: 26px 22px;
    border-radius: var(--radius);
    gap: 14px;
  }
  .cta-band-copy h2 {
    font-size: 1.75rem;
  }
  .cta-band .btn {
    width: 100%;
    text-align: center;
  }
}

/* ---- "Heb je al een PIN?"-sectie (batch 5, punt 1): draagt het bestaande joinformulier
   (zelfde ids als voorheen, public/js/home.js blijft ongewijzigd werken) in de nieuwe
   landingsopmaak — niet in de mockups getekend maar functioneel verplicht. */

.join-section {
  max-width: 30rem;
  margin: 0 auto;
  scroll-margin-top: 24px;
}
.join-section .card {
  text-align: left;
}
.join-section-lede {
  text-align: center;
  color: var(--muted);
  margin: -8px 0 20px;
}

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

.site-footer-full {
  padding-top: 40px;
  padding-bottom: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.footer-brand .brand-mark {
  width: 30px;
  height: 30px;
}
.footer-brand .brand-mark .icon {
  width: 17px;
  height: 17px;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  font-weight: 600;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--ink);
}

@media (max-width: 860px) {
  .site-footer-full {
    flex-direction: column-reverse;
    text-align: center;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 36px;
  }
  .footer-links {
    justify-content: center;
    gap: 14px;
    font-size: 0.84rem;
  }
  .footer-brand {
    font-size: 0.78rem;
  }
}

/* ---- contentpagina's (/spelregels, /organiseren, /faq): zelfde nav/footer, verder de
   bestaande .page/.card-taal voor de leestekst — hier alleen kleine aanvullingen. ---- */

.content-lede {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 20px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--muted);
  font-weight: 400;
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-item p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.faq-item + .faq-item {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ---- utility-klassen: bewust helemaal onderaan (batch 5) ----
   .only-desktop/.only-mobile zijn puur voor kale <span>-tekstwissels zonder eigen
   `display`-regel (zie de footer-links in src/views/sitefooter.tsx) — daar is de plek in
   het bestand onschadelijk. Zet deze utility NOOIT samen met een klasse die zelf ook
   `display` zet (zoals .nav-links, die `display: flex` nodig heeft): bij gelijke
   specificiteit wint dan simpelweg wie het laatst in dit bestand staat, en dat repareert
   het ene breekpunt alleen door het andere kapot te maken — precies wat er hier eerder
   gebeurde (zie het commentaar bij .nav-links hierboven). Zo'n element krijgt in plaats
   daarvan zijn eigen, specifieke show/hide-regel in zijn media-query. */
.only-desktop {
  display: inline;
}
.only-mobile {
  display: none;
}
@media (max-width: 860px) {
  .only-desktop {
    display: none;
  }
  .only-mobile {
    display: inline;
  }
}

/* ---- versie 1.7.0 (veldtest), afgemaakt in 1.8.0: jagerscherm overzichtelijker ----
   Terugkoppeling uit het veld: "het is vooral kaart". De gebeurtenisbalk hieronder is een rij
   van het #tab-map-grid geworden; in 1.7.0 had hij geen `position` en geen `z-index` en
   schilderde de (absolute) kaart er domweg overheen, waardoor er op de Kaart-tab niets van te
   zien was. Twee tokens klopten toen ook niet: `--border` en `--text` bestaan niet in dit
   project (het zijn `--line` en `--ink`), en een onopgeloste var() maakt de hele declaratie
   ongeldig — de scheidingslijn viel dus stil weg en de tekstkleur erfde. */
.last-event-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
.last-event-bar:hover {
  box-shadow: none;
  filter: none;
}
.last-event-bar:active {
  background: var(--surface-2);
}
/* Nood mag je nooit missen doordat je net op de kaart keek. */
.last-event-bar.nood {
  background: var(--danger-bg);
  color: var(--danger-tx);
}
.last-event-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.last-event-more {
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 650;
}

/* Ongelezen-teller op de Feed-tabknop (versie 1.8.0): niets op de Kaart-tab vertelde dat er
   nieuwe gebeurtenissen waren, dus opende je de Feed op goed geluk — of nooit. */
.tab-icon-wrap {
  position: relative;
  display: inline-flex;
}
.tab-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.tab-badge[hidden] {
  display: none;
}
.tab-badge.nood {
  background: var(--danger);
}

/* Eerlijke uitleg onder de geluid/tril-knop (iPhone kan niet trillen) — compact, niet
   alarmerend, en alleen zichtbaar als public/js/signalen.js 'm invult. Bugfix B6 (versie
   1.8.0): wegklikbaar (public/js/signalen.js's #signalen-hint-close), dus nu een rijtje van
   tekst + kruisje in plaats van kale tekst. */
.signalen-hint {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.85;
}
.signalen-hint-close {
  flex: none;
  margin: -2px -4px 0 0;
  padding: 0 4px;
  background: none;
  border: none;
  box-shadow: none;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.3;
}
.signalen-hint-close:hover {
  box-shadow: none;
  filter: none;
  color: var(--ink);
}

/* ---- versie 1.7.0: uitklapbare locatie-uitleg (Safari/Chrome) ---- */
.locatie-hulp {
  margin-top: 10px;
  font-size: 0.85rem;
}
.locatie-hulp summary {
  cursor: pointer;
  font-weight: 650;
}
.locatie-hulp ol {
  margin: 8px 0 0;
  padding-left: 20px;
  line-height: 1.5;
}
.locatie-hulp li + li {
  margin-top: 4px;
}
.locatie-hulp .locatie-hulp-kop {
  margin: 10px 0 2px;
  font-weight: 650;
}

/* Stijlkiezer op het eindscherm (versie 1.9.0) — twee keuzes voor het deelfilmpje.
   Bewust GEEN <select> of instellingenscherm: de keuze gaat over wat je nú gaat versturen, dus
   hij staat vlak boven de knop en toont van allebei meteen waar je voor kiest. aria-pressed
   draagt de staat (end.js zet 'm), zodat het ook zonder de kleuren te zien duidelijk is. */
.stijlkiezer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}
.stijlkiezer button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  padding: 12px 14px;
  min-height: 44px; /* raakdoel */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
}
.stijlkiezer button strong {
  font-family: var(--font-display);
  font-size: 1rem;
}
.stijlkiezer button span {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}
.stijlkiezer button[aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.stijlkiezer button[aria-pressed='true'] strong::after {
  content: ' ✓';
  color: var(--accent);
}