/* 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");
}

: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;
  }
}

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

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

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;
}

/* 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;
}

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;
}

.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). */
.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;
}

/* ---- 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;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  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;
}

.hunter-header strong {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hunter-header-stats {
  display: flex;
  gap: 16px;
  flex: none;
}

.hunter-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

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

.hunter-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 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 {
  overflow-y: auto;
  padding-bottom: var(--nav-h);
}

#map {
  position: absolute;
  inset: 0;
  background: var(--bg-2);
}

.duo-strip {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(var(--nav-h) + 8px);
  z-index: 15;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
}

.duo-pill {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 8px 6px 6px;
  box-shadow: var(--shadow);
  font-size: 0.85rem;
}

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

.duo-pill-name {
  font-weight: 650;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duo-pill button {
  margin: 0;
  padding: 5px 10px;
  font-size: 0.78rem;
  box-shadow: none;
}

.map-legend {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 15;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.78rem;
  max-height: 40vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.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;
}

/* 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;
  }
}

.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;
}

/* ---------- 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);
}

/* ---------- 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: 800;
  letter-spacing: -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: 800;
  letter-spacing: -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: 800;
  line-height: 1.03;
  letter-spacing: -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: 800;
  letter-spacing: -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: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
.kant-card p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.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: 800;
  color: #ffffff;
  letter-spacing: -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 vier bedrijven ---- */

.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(4, 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: 800;
  letter-spacing: -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;
  }
}

/* ---- 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: 800;
  letter-spacing: -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;
  }
}