/* ── Base + responsive (#98 CSS-extractie) ────────────────────────────
   Globale reset, body, header en breakpoints. */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  background: #1a2744;
  color: #fff;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  gap: 8px;
}
/* Op Home (#99 Routekaart-refresh): body krijgt de zand-bg en de oude
   dark-blue title-bar (h1 + nog-verborgen hamburger) wordt onderdrukt —
   de nieuwe .home-header is visueel de titel. De title-bar blijft
   functioneel tijdens quiz/end-screens waar de hamburger wél nodig is. */
body.on-home,
body.on-mode-select,
body.on-end {
  background: var(--color-bg);
  color: var(--color-ink);
}
body.on-home #title-bar { display: none; }

/* Title-bar op mode-select + quiz + end: plain Luckiest Guy titel op
   zand-bg, géén eigen kader (shared rule). */
body.on-mode-select #title-bar,
body.on-end #title-bar,
body.in-quiz #title-bar {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 4px;
  gap: 8px;
}
body.on-mode-select #title-bar h1,
body.on-end #title-bar h1,
body.in-quiz #title-bar h1 {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  letter-spacing: var(--letter-display);
  color: var(--color-ink);
  font-weight: 400;
  line-height: 1.0;
  text-align: center;
}
@media (min-width: 768px) {
  body.on-mode-select #title-bar h1,
  body.on-end #title-bar h1,
  body.in-quiz #title-bar h1 { font-size: var(--fs-30); }
}
/* #menu-btn styling staat in start.css (Routekaart-chunky). De body-scope
   rules waren nodig toen de base-stijl nog dark-blue was; na #113 is de
   base-stijl zelf Routekaart, dus geen override meer nodig. */
h1 { font-size: 1rem; color: #f0c040; text-align: center; margin: 0; flex: 1; }
#title-bar { display: flex; align-items: center; width: 100%; max-width: 680px; position: relative; }

/* Container-breedtes: base = mobile (680), desktop-override (900) staat in de 768+ media-query hieronder.
   Moet hier en niet in de scherm-specifieke CSS-files (map.css/start.css/…) staan — anders overrijdt
   een later geladen file de media-query (zelfde specificiteit, source-order wint). */
#title-bar, #map-wrap, #question-box, #score-bar, #hard-panel, #end-screen, #start-screen { max-width: 680px; }
#map-wrap { width: 100%; }
#leaflet-map { height: clamp(300px, 52dvh, 580px); }

/* Quiz-scherm past altijd binnen de viewport — map vult de resterende
   ruimte zodat score-bar/question-box/opties/feedback samen met de kaart
   op één scherm passen. Zonder deze regels scrollt de pagina op laptops
   met ~900px viewport-hoogte. Op mobile was dit al zo; nu globaal. */
body.in-quiz { height: 100dvh; overflow: hidden; }
body.in-quiz #map-wrap { flex: 1; min-height: 200px; }
body.in-quiz #leaflet-map { height: 100%; }

/* ── Responsive ── */
@media (min-width: 768px) {
  body { padding: 14px; gap: 12px; }
  h1 { font-size: 1.3rem; }
  #title-bar, #map-wrap, #question-box, #score-bar, #hard-panel, #end-screen, #start-screen { max-width: 900px; }
  #leaflet-map { height: clamp(500px, 66dvh, 740px); }
  /* Desktop-min iets hoger zodat de kaart comfortabel klikbaar blijft. */
  body.in-quiz #map-wrap { min-height: 280px; }
}
@media (max-width: 480px) {
  body { padding: 6px; gap: 5px; }
  /* h1 / score-bar / question-box / opt / feedback mobiele-grootte wordt nu
     door quiz.css geregeld (Routekaart-schaal in tokens). Enkel layout-
     regels blijven hier. */
  h1 { font-size: 0.82rem; }
  body.in-quiz #map-wrap { min-height: 0; }
  #options { gap: 6px; margin-bottom: 7px; }
}