/**
 * outgame_2026 — publieke shell + homepage (OUTGAME-3R)
 * Mockup-driven design system. Namespace: .gm-public-*
 */

/* O2.5 — het palet volgt nu gm2026 ingame (themes/gm2026/css/global.css).
   Warme charcoal-basis, warm gebroken wit, warme lijnen. Goud/oker is een
   klein accent (kickers, cijfers, hairlines) plus de primaire CTA; rood is
   het gecontroleerde merkaccent voor koppen en danger. Alle waarden
   hieronder zijn op contrast gemeten — zie de commit voor de cijfers. */
:root {
  /* Surfaces — gm2026: bg #0a0a0a, surface #111, surface-3 #1d1a17 */
  --gm-p-bg: #0a0a0a;
  --gm-p-bg-elevated: #111111;
  --gm-p-surface: #141312;
  --gm-p-surface-2: #1d1a17;
  --gm-p-surface-glass: rgba(7, 7, 8, 0.92);

  /* Text — warm gebroken wit i.p.v. koel blauwwit */
  --gm-p-text: #f3efe9;
  --gm-p-muted: #918b84;
  --gm-p-muted-2: #c9c2b9;

  /* Accent — gm2026 --gold #d6a247 */
  --gm-p-gold: #d6a247;
  --gm-p-gold-soft: #e0b86a;
  --gm-p-gold-deep: #a37a2e;
  --gm-p-ink: #12100d; /* tekstkleur óp goud (8,3:1) */

  /* Merkrood — gm2026 --red / --red-2. Kopaccenten + danger. */
  --gm-p-red: #c92d2d;
  --gm-p-red-hot: #e04343;
  --gm-p-red-deep: #8f2020;

  /* Status — gm2026 --green / --orange */
  --gm-p-online: #55b246;
  --gm-p-warn: #d98b22;
  --gm-p-danger-text: #ef9a9a; /* leesbare foutkleur op donkere surfaces */

  /* O2.5: voorheen hardcoded in losse regels; gecentraliseerd zodat een
     latere theming-laag hier één plek heeft. */
  --gm-p-bg-deep: #070706; /* footer / diepste vlak */

  /* Borders / effects — warme lijn i.p.v. neutrale witte alpha */
  --gm-p-border: #2c2722;
  --gm-p-border-strong: #3a332c;
  --gm-p-hairline: rgba(214, 162, 71, 0.28);
  --gm-p-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --gm-p-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.35);
  /* O2.5: geen grote gouden gloed meer — alleen diepte. */
  --gm-p-glow-gold: 0 6px 18px rgba(0, 0, 0, 0.45);
  --gm-p-glow-red: 0 6px 18px rgba(0, 0, 0, 0.45);

  /* Radii */
  --gm-p-radius: 12px;
  --gm-p-radius-sm: 8px;
  --gm-p-radius-lg: 18px;

  /* Layout */
  --gm-p-max: 1280px;
  --gm-p-gutter: clamp(1.1rem, 3.2vw, 2rem);
  /* O2: strakker sectieritme — de pagina was op 390px ruim 7600px hoog. */
  --gm-p-section-y: clamp(3rem, 5vw, 5rem);
  --gm-p-header-h: 4.5rem; /* ~72px — compact premium header */
  --gm-p-mnav-h: 4rem;

  /* Type scale */
  --gm-p-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gm-p-font-quote: Georgia, "Times New Roman", serif;
  --gm-p-body: clamp(0.98rem, 0.25vw + 0.92rem, 1.0625rem);
  /* O2: rustiger schaal. H1 was 41,6–70,4px en nam op 320px vier regels;
     nu 34,4–57,6px met duidelijk kleinere sectiekoppen eronder. */
  --gm-p-h1: clamp(2.15rem, 3.4vw + 1.2rem, 3.6rem);
  --gm-p-h2: clamp(1.6rem, 1.6vw + 1.1rem, 2.25rem);
  --gm-p-h3: clamp(1.05rem, 0.3vw + 0.98rem, 1.2rem);
  --gm-p-nav: clamp(0.92rem, 0.2vw + 0.88rem, 1rem);
  --gm-p-kicker: clamp(0.72rem, 0.15vw + 0.68rem, 0.82rem);

  /* Space scale */
  --gm-p-space-1: 0.35rem;
  --gm-p-space-2: 0.65rem;
  --gm-p-space-3: 1rem;
  --gm-p-space-4: 1.5rem;
  --gm-p-space-5: 2.25rem;
  --gm-p-space-6: 3.5rem;
  /* O3 — semantische tokens voor wat eerder hardcoded stond. Nodig omdat
     light mode dezelfde regels moet kunnen hergebruiken. */
  --gm-p-tint: rgba(255, 255, 255, 0.04);      /* nauwelijks zichtbare vlakvulling */
  --gm-p-tint-2: rgba(255, 255, 255, 0.07);    /* idem, iets sterker (hover)       */
  --gm-p-on-accent: #ffffff;                   /* tekst op de rode CTA             */
  --gm-p-red-press: #a52727;
  --gm-p-red-hover: #d63a3a;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Dark is de enige publieke presentatie. Er is geen automatische omschakeling
     op OS-voorkeur meer; zie het slapende tokenblok onderaan. */
  color-scheme: dark;
  scroll-behavior: smooth;
}

.gm-public-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* O1: geen sprong door mobiele browser-chrome */
  font-family: var(--gm-p-font);
  font-size: var(--gm-p-body);
  background: var(--gm-p-bg);
  color: var(--gm-p-text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* O1: echte body scroll-lock zolang de drawer open is.
   public-nav.js zet de scrollpositie in --gm-p-lock-top en compenseert de
   scrollbar-breedte via --gm-p-lock-gutter, zodat er geen layout-shift is. */
.gm-public-body.gm-public-drawer-open {
  position: fixed;
  top: var(--gm-p-lock-top, 0);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  padding-right: var(--gm-p-lock-gutter, 0px);
}

.gm-public-body a:focus-visible,
.gm-public-body button:focus-visible {
  outline: 2px solid var(--gm-p-gold);
  outline-offset: 3px;
}

/* O1: skip-link — visueel verborgen tot hij focus krijgt. */
.gm-public-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gm-public-skip:focus,
.gm-public-skip:focus-visible {
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  left: calc(0.75rem + env(safe-area-inset-left, 0px));
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  padding: 0.7rem 1.1rem;
  border-radius: var(--gm-p-radius-sm);
  background: var(--gm-p-surface-2);
  color: var(--gm-p-text);
  border: 1px solid var(--gm-p-gold);
  outline: 2px solid var(--gm-p-gold);
  outline-offset: 2px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--gm-p-shadow-soft);
}

.gm-public {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.gm-public-wrap {
  width: min(100% - (var(--gm-p-gutter) * 2), var(--gm-p-max));
  margin-inline: auto;
  /* O1: viewport-fit=cover — houd content uit de notch in landscape. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* —— Buttons —— */
.gm-public-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.85rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--gm-p-radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  color: var(--gm-p-text);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.gm-public-btn:hover { transform: translateY(-1px); }

/* O2.6: de primaire CTA is GunMaffia-rood, niet goud. Goud was als
   gevulde knop te dominant en botste met de merkhiërarchie
   (Gun = wit, Maffia = rood). Wit op #c92d2d haalt 5,4:1. */
.gm-public-btn--primary {
  background: linear-gradient(180deg, var(--gm-p-red), var(--gm-p-red-press));
  color: var(--gm-p-on-accent);
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: var(--gm-p-glow-red);
}

.gm-public-btn--primary:hover {
  background: linear-gradient(180deg, var(--gm-p-red-hover), var(--gm-p-red));
}

.gm-public-btn--ghost {
  border-color: var(--gm-p-border-strong);
  background: var(--gm-p-tint);
  color: var(--gm-p-text);
}

.gm-public-btn--ghost:hover {
  border-color: var(--gm-p-muted);
  background: var(--gm-p-tint-2);
}

.gm-public-btn--lg {
  min-height: 3.2rem;
  padding: 0.95rem 1.65rem;
  font-size: 1.05rem;
}

/* O1: modifier werd al gebruikt in login/register maar bestond niet.
   display:flex i.p.v. inline-flex zodat de knop ook als grid-/flex-item
   de volle breedte pakt in plaats van te krimpen naar de labelbreedte. */
.gm-public-btn--block {
  display: flex;
  width: 100%;
  margin-inline: 0;
}

.gm-public-textlink {
  /* O2: raakvlak van 44px zonder de tekst te vergroten. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--gm-p-gold-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.gm-public-textlink:hover { text-decoration: underline; }

/* —— Header ——
 * Full-bleed bar; chrome sits in .gm-public-wrap so logo/CTAs
 * share the exact same horizontal edges as hero/stats/sections/footer.
 */
.gm-public-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--gm-p-surface-glass);
  border-bottom: 1px solid var(--gm-p-border);
  backdrop-filter: blur(16px);
}

.gm-public-topbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.65rem, 1.8vw, 1.5rem);
  min-height: var(--gm-p-header-h);
  padding-block: 0.55rem;
}

.gm-public-brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--gm-p-text);
  flex-shrink: 0;
}

.gm-public-brand__logo {
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: clamp(1.45rem, 1.1vw + 1.15rem, 1.9rem);
  line-height: 1.05;
}

.gm-public-brand__logo span { color: var(--gm-p-red); }

.gm-public-brand__tag {
  font-size: clamp(0.58rem, 0.15vw + 0.52rem, 0.7rem);
  color: var(--gm-p-gold-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.gm-public-dnav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 1;
}

.gm-public-dnav__link {
  color: var(--gm-p-muted);
  text-decoration: none;
  padding: 0.55rem 0.95rem;
  border-radius: 7px;
  font-size: var(--gm-p-nav);
  font-weight: 600;
  position: relative;
}

.gm-public-dnav__link:hover { color: var(--gm-p-text); }
.gm-public-dnav__link.is-active { color: var(--gm-p-text); }

.gm-public-dnav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.18rem;
  height: 2px;
  background: var(--gm-p-red);
  border-radius: 2px;
}

.gm-public-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

/* O1: mobile-first — desktop auth-CTA's staan standaard uit en komen pas
   terug in de 960px-breakpoint, samen met de desktopnav. */
.gm-public-topbar__actions .gm-public-btn--desktop { display: none; }

.gm-public-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--gm-p-border-strong);
  border-radius: var(--gm-p-radius-sm);
  background: transparent;
  color: var(--gm-p-text);
  cursor: pointer;
}

.gm-public-menu-btn__bars {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* —— Publieke taalkeuze ——
 * TAALKEUZE REDESIGN. Hiervoor stond in de footer een label + brede <select>
 * + losse 'Wissel'-knop over bijna de volle breedte. Nu: één compacte pill per
 * taal, rechtsboven in de topbalk (desktop) en in de drawer-header (mobiel).
 *
 * De pills zijn submit-knoppen van hetzelfde formulier — één klik is één
 * taalwissel, zie partials/language-switcher.php. Ze lenen bewust GEEN
 * .gm-public-btn: die is 2,85rem hoog en voor CTA's bedoeld, en zou naast de
 * auth-knoppen een tweede knop van CTA-formaat opleveren.
 */
.gm-public-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}

.gm-public-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--gm-p-border-strong);
  border-radius: var(--gm-p-radius-sm);
  background: transparent;
  color: var(--gm-p-muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none; /* SEO V2 fase 3: de knoppen zijn nu links */
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Zelfde hover-taal als .gm-public-btn--ghost, zonder de translateY: een
   wipbeweging in de sticky topbalk is onrustig. */
.gm-public-lang__btn:hover {
  color: var(--gm-p-text);
  background: var(--gm-p-tint);
  border-color: var(--gm-p-muted);
}

/* Actieve taal: bronzen rand, iets lichtere vulling, goud opschrift. Geen
   volvlak en geen felle kleur — het moet af te lezen zijn, niet schreeuwen. */
.gm-public-lang__btn.is-active {
  border-color: var(--gm-p-gold-deep);
  background: var(--gm-p-tint);
  color: var(--gm-p-gold-soft);
}

.gm-public-lang__btn.is-active:hover {
  border-color: var(--gm-p-gold);
  color: var(--gm-p-gold-soft);
}

/* De vlag is inline-SVG en geen emoji: emoji-vlaggen bestaan niet op Windows,
   waar Chrome en Edge er de twee regioletters van maakten ("NL NL", "GB EN").
   Vaste pixelmaten i.p.v. em: de vlag moet een strak vlakje blijven en niet
   meeschalen met een toevallige tekstgrootte. De code ernaast draagt de
   betekenis; de vlag is aria-hidden. */
.gm-public-lang__flag {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  /* Hairline, anders zweeft het witte vlak van de NL-vlag op de donkere pill. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.gm-public-lang__code { line-height: 1; }

/* Mobile-first: de topbalkvariant staat uit tot de desktopnav verschijnt, net
   als de auth-CTA's hierboven. Daaronder zit de taalkeuze in de drawer. */
.gm-public-lang--header { display: none; }

/* Drawer-header: rechts uitlijnen naast de sluitknop, en een raakvlak van
   44px — dit is de mobiele variant, daar wordt met een duim getikt. */
.gm-public-lang--drawer {
  margin-left: auto;
  gap: 0.3rem;
}

.gm-public-lang--drawer .gm-public-lang__btn {
  min-height: 2.75rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
}

.gm-public-lang--drawer .gm-public-lang__flag {
  width: 21px;
  height: 14px;
}

/* —— Main / footer shell —— */
.gm-public-main {
  flex: 1;
  width: 100%;
  max-width: var(--gm-p-max);
  margin: 0 auto;
  padding: 1.35rem var(--gm-p-gutter) calc(var(--gm-p-mnav-h) + 1.75rem);
}

.gm-public-body--home .gm-public-main {
  max-width: none;
  padding: 0 0 calc(var(--gm-p-mnav-h) + 0.5rem);
}

/* Auth pages: fill viewport; full footer menus, slightly tighter spacing */
.gm-public-body--auth .gm-public-main {
  max-width: none;
  width: 100%;
  padding: 0 0 calc(var(--gm-p-mnav-h) + 0.75rem);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.gm-public-body--auth .gm-public-footer {
  margin-top: auto;
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  padding-bottom: 5.25rem;
}

.gm-public-body--auth .gm-public-footer__brand-row {
  padding-bottom: 1.1rem;
  margin-bottom: 1.35rem;
}

.gm-public-body--auth .gm-public-footer__grid {
  gap: 1.35rem 1.75rem;
  margin-bottom: 1.35rem;
}

.gm-public-body--auth .gm-public-footer__copy {
  margin-top: 0;
}

/* O3 — cinematic footer. Bestaande repo-asset (why-atmosphere.jpg, 52 kB,
   noir-interieur) als achtergrond, met een pseudo-element als sluier zodat
   de tekst zelf nooit transparant wordt. De footer houdt in beide modi zijn
   donkere tokens: een donkere afsluiting onder een lichte pagina is hier het
   ontwerp. */
.gm-public-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #0a0908;
  padding: clamp(2.75rem, 5vw, 4rem) var(--gm-p-gutter) 5.75rem;
  width: 100%;
}

.gm-public-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/why-atmosphere.jpg");
  background-size: cover;
  background-position: 50% 38%;
  background-repeat: no-repeat;
}

.gm-public-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 8, 9, 0.9) 0%, rgba(8, 8, 9, 0.82) 45%, rgba(8, 8, 9, 0.95) 100%),
    radial-gradient(80% 120% at 14% 0%, rgba(201, 45, 45, 0.12), transparent 62%);
}

.gm-public-footer__inner {
  position: relative;
  max-width: var(--gm-p-max);
  margin: 0 auto;
}

.gm-public-footer__brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--gm-p-border);
}

.gm-public-footer__sep { color: var(--gm-p-border-strong); }

/* O1: expliciete kleur — de merknaam staat in een <strong> en mag niet
   afhangen van een generieke strong-regel uit een andere stylesheet.
   (public/css/extra.css zette `strong { color:#4a2500 }`, waardoor dit
   op 1,5:1 contrast uitkwam.) */
.gm-public-footer__name {
  font-weight: 800;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.55rem);
  color: var(--gm-p-text);
}

.gm-public-footer__name span { color: var(--gm-p-red); }

.gm-public-footer__meta,
.gm-public-footer__copy {
  color: var(--gm-p-muted);
  font-size: 0.95rem;
  margin: 0.45rem 0 0;
}

.gm-public-footer__signature {
  margin: 0;
  font-family: var(--gm-p-font-quote);
  font-style: italic;
  color: var(--gm-p-gold-soft);
  font-size: clamp(1.05rem, 1vw + 0.85rem, 1.35rem);
}

.gm-public-footer__grid {
  display: grid;
  gap: 1.75rem;
  margin-top: 2rem;
}

.gm-public-footer__heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gm-p-gold-soft);
  margin: 0 0 0.85rem;
}

.gm-public-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.gm-public-footer__list a {
  color: var(--gm-p-text);
  text-decoration: none;
  font-size: 1.02rem;
}

.gm-public-footer__list a:hover { color: var(--gm-p-gold-soft); }

.gm-public-footer__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  margin-top: 1.1rem;
  font-size: 0.95rem;
}

.gm-public-footer__quick a {
  color: var(--gm-p-muted);
  text-decoration: none;
}

.gm-public-link { color: var(--gm-p-gold-soft); }

/* —— Drawer ——
 * O1: gesloten = écht gesloten. [hidden] werd voorheen overruled door
 * display:flex, waardoor de dichte drawer in de tab-order en de
 * accessibility-tree bleef staan. `hidden` is nu de enige state-bron
 * (public-nav.js); visibility dekt daarnaast het sluit-animatievenster af.
 */
.gm-public-drawer[hidden],
.gm-public-drawer-backdrop[hidden] {
  display: none !important;
}

.gm-public-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 50;
}

.gm-public-drawer {
  position: fixed;
  top: 0;
  right: 0;
  /* Compacte side drawer: nooit meer dan ~312px, en op smalle toestellen
     blijft er altijd een strook pagina + overlay rechts zichtbaar. */
  width: min(86vw, 19.5rem);
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--gm-p-surface-2);
  border-left: 1px solid var(--gm-p-border);
  box-shadow: -18px 0 42px rgba(0, 0, 0, 0.45);
  z-index: 60;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.95rem;
  padding-top: max(0.85rem, env(safe-area-inset-top, 0px));
  padding-right: max(0.95rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
}

.gm-public-drawer.is-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.2s ease, visibility 0s linear 0s;
}

.gm-public-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gm-p-border);
  flex: 0 0 auto;
}

.gm-public-drawer__title {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* O1: drawer moet ook op lage viewporthoogte (landscape) volledig
   bereikbaar zijn — de nav scrollt intern i.p.v. buiten beeld te vallen. */
.gm-public-drawer__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.gm-public-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;   /* 44px raakvlak — bewust niet verkleind */
  height: 2.75rem;
  margin-right: -0.55rem;
  border: 0;
  border-radius: var(--gm-p-radius-sm);
  background: transparent;
  color: var(--gm-p-muted);
  font-size: 1.45rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}

.gm-public-drawer__close:hover {
  color: var(--gm-p-text);
  background: var(--gm-p-tint);
}

.gm-public-drawer__section + .gm-public-drawer__section { margin-top: 0.8rem; }

.gm-public-drawer__section-label {
  margin: 0 0 0.15rem;
  padding-left: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gm-p-gold);
}

/* flex i.p.v. block, zodat de CTA met `order` onderaan zijn groep komt
   zonder de markup of de navigatievolgorde te wijzigen. */
.gm-public-drawer__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gm-public-drawer__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.65rem;   /* ~42px raakvlak */
  padding: 0.35rem 0.6rem;
  color: var(--gm-p-muted-2);
  text-decoration: none;
  border-radius: var(--gm-p-radius-sm);
  font-size: 1rem;
  line-height: 1.3;
}

.gm-public-drawer__link:hover { background: var(--gm-p-tint); color: var(--gm-p-text); }

/* Actief was een vol grijs blok. Nu een rustige tint met een rood merkstreepje
   links en zwaardere tekst — hetzelfde signaal als de desktopnav. */
.gm-public-drawer__link.is-active {
  background: var(--gm-p-tint);
  color: var(--gm-p-text);
  font-weight: 700;
}

.gm-public-drawer__link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--gm-p-red);
}

/* Registreren is de primaire actie: een compacte CTA uit dezelfde
   stylefamilie als .gm-public-btn--primary, geen gouden tekstlink. */
.gm-public-drawer__list li:has(> .gm-public-drawer__link--primary) { order: 1; }

.gm-public-drawer__link--primary,
.gm-public-drawer__link--primary.is-active {
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 0.45rem;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, var(--gm-p-red), var(--gm-p-red-press));
  color: var(--gm-p-on-accent);
  font-weight: 700;
  box-shadow: var(--gm-p-glow-red);
}

.gm-public-drawer__link--primary:hover {
  background: linear-gradient(180deg, var(--gm-p-red-hover), var(--gm-p-red));
  color: var(--gm-p-on-accent);
}

.gm-public-drawer__link--primary.is-active::before { display: none; }

/* —— Mobile bottom nav —— */
.gm-public-mnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: grid;
  /* O1: items worden conditioneel gerenderd (PHP). Auto-columns verdeelt
     exact wat er staat, dus geen lege kolom als een route ontbreekt. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: var(--gm-p-mnav-h);
  background: rgba(8, 9, 11, 0.97);
  border-top: 1px solid var(--gm-p-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  backdrop-filter: blur(12px);
}

.gm-public-mnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 2.75rem; /* O1: tap target */
  color: var(--gm-p-muted);
  text-decoration: none;
  font-size: 0.75rem; /* O1: was 0.68rem (~10,9px) — te klein om te lezen */
  line-height: 1.1;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.4rem 0.15rem;
}

.gm-public-mnav__item.is-active,
.gm-public-mnav__item--primary { color: var(--gm-p-red-hot); }

.gm-public-mnav__icon { width: 1.3rem; height: 1.3rem; display: block; }
.gm-public-mnav__icon svg { width: 100%; height: 100%; display: block; }

/* —— Shared section primitives —— */
.gm-public-home { display: flex; flex-direction: column; }

.gm-public-section {
  padding: var(--gm-p-section-y) 0;
}

/* O2.6: de kicker was fel goud op élke sectie. Nu muted met een klein rood
   streepje — leesbaar, rustig, en goud blijft beschikbaar als detail. */
.gm-public-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  color: var(--gm-p-muted);
  font-size: var(--gm-p-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

.gm-public-kicker::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--gm-p-red);
  flex: 0 0 auto;
}

.gm-public-lead--center + .gm-public-kicker,
.gm-public-final .gm-public-kicker { justify-content: center; }

.gm-public-h2 {
  margin: 0;
  font-size: var(--gm-p-h2);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.gm-public-h2 span {
  color: var(--gm-p-red);
}

.gm-public-lead {
  margin: 0.9rem 0 0;
  color: var(--gm-p-muted);
  max-width: 40rem;
  font-size: clamp(1rem, 0.3vw + 0.92rem, 1.12rem);
}

.gm-public-lead--center {
  margin-inline: auto;
  text-align: center;
}
/* ============================================================
 * O3 — PUBLIEKE HOMEPAGE · MAFIA IDENTITY
 *
 * Ritme (bewust afwisselend, niet vier donkere rechthoeken):
 *   hero+puls  cinematic beeld
 *   ladder     open, geen kaders
 *   paden      gestructureerd, twee echte entiteiten
 *   familie    cinematic beeld
 *   dossier    één vel, genummerd
 *   wereld     cinematic beeld
 *   ronde      compact, typografisch
 *   nieuws     clean
 *   slot       sterk
 *
 * Merkhiërarchie: Gun = wit, Maffia = rood. Rood is het accent en de
 * primaire CTA; oker/brons is secundair detail; nooit goud als hoofdkleur.
 * ============================================================ */

/* Secties die altijd op beeldmateriaal staan houden hun donkere tokens,
   ook in light mode. Een donkere cinematic band onder een lichte pagina is
   hier het ontwerp, geen ongeluk — zie ook de footer. */
/* Tegenhanger van het slapende light-tokenblok onderaan: de auth-pagina's
   zijn één doorlopende donkere stage op beeld en moeten donker blijven, ook
   als data-theme="light" ooit bewust gezet wordt. Zolang dat niet gebeurt
   zijn dit exact dezelfde waarden als :root en verandert er niets. */
.gm-public-body--auth {
  --gm-p-bg: #0a0a0a;
  --gm-p-bg-elevated: #111111;
  --gm-p-bg-deep: #070706;
  --gm-p-surface: #141312;
  --gm-p-surface-2: #1d1a17;
  --gm-p-surface-glass: rgba(7, 7, 8, 0.92);
  --gm-p-text: #f3efe9;
  --gm-p-muted: #918b84;
  --gm-p-muted-2: #c9c2b9;
  --gm-p-gold: #d6a247;
  --gm-p-gold-soft: #e0b86a;
  --gm-p-gold-deep: #a37a2e;
  --gm-p-ink: #12100d;
  --gm-p-red: #c92d2d;
  --gm-p-red-hot: #e04343;
  --gm-p-red-press: #a52727;
  --gm-p-red-hover: #d63a3a;
  --gm-p-online: #55b246;
  --gm-p-warn: #d98b22;
  --gm-p-danger-text: #ef9a9a;
  --gm-p-border: #2c2722;
  --gm-p-border-strong: #3a332c;
  --gm-p-hairline: rgba(214, 162, 71, 0.28);
  --gm-p-tint: rgba(255, 255, 255, 0.04);
  --gm-p-tint-2: rgba(255, 255, 255, 0.07);
  color-scheme: dark;
}

.gm-public-onmedia,
.gm-public-footer {
  --gm-p-bg: #0a0a0a;
  --gm-p-bg-elevated: #111111;
  --gm-p-surface: #141312;
  --gm-p-surface-2: #1d1a17;
  --gm-p-online: #55b246;
  --gm-p-text: #f5f1ea;
  --gm-p-muted: #a9a29a;
  --gm-p-muted-2: #ddd6cc;
  --gm-p-border: rgba(255, 255, 255, 0.16);
  --gm-p-border-strong: rgba(255, 255, 255, 0.3);
  --gm-p-tint: rgba(255, 255, 255, 0.05);
  --gm-p-tint-2: rgba(255, 255, 255, 0.1);
  --gm-p-red: #d13434;
  --gm-p-gold: #d6a247;
  --gm-p-gold-soft: #e0b86a;
  color: var(--gm-p-text);
}

/* —— A · Hero —— */
.gm-public-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(30rem, 72vh, 42rem);
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: 0;
  overflow: hidden;
  background: #070707;
}

.gm-public-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* SEO V2 fase 2: de hero staat in een <picture> (mobiele uitsnede). Die moet
   de volle container vullen, anders is height:100% op de img niet bepaald. */
.gm-public-hero__media picture,
.gm-public-auth__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gm-public-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* De asset is een luchtfoto van de stad; dit kader houdt het verlichte
     centrum en de haven in beeld en snijdt de lege zee weg. */
  object-position: 54% 40%;
}

/* Gelaagd: leesbaarheid linksonder, koele diepte rechtsboven, vignette
   rondom. Bewust geen rood filter over het hele beeld. */
.gm-public-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(94deg, rgba(4, 5, 6, 0.9) 0%, rgba(4, 5, 6, 0.72) 36%, rgba(4, 5, 6, 0.26) 68%, rgba(4, 5, 6, 0.5) 100%),
    linear-gradient(180deg, rgba(4, 5, 6, 0.8) 0%, rgba(4, 5, 6, 0.25) 30%, rgba(4, 5, 6, 0.72) 74%, #070707 100%),
    radial-gradient(120% 78% at 72% 22%, rgba(201, 45, 45, 0.12), transparent 62%);
}

/* Fijne rasterlijnen — verwijzing naar een stadsplattegrond. Puur CSS,
   extreem laag contrast, verdwijnt bij reduced transparency. */
.gm-public-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 88px);
  -webkit-mask-image: radial-gradient(85% 70% at 70% 35%, #000 10%, transparent 72%);
  mask-image: radial-gradient(85% 70% at 70% 35%, #000 10%, transparent 72%);
}

.gm-public-hero__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: 0;
}

.gm-public-hero__inner {
  max-width: 42rem;
}

.gm-public-hero__title {
  margin: 0.6rem 0 0;
  font-size: var(--gm-p-h1);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.gm-public-hero__title span { color: var(--gm-p-red); }

.gm-public-hero__lead {
  margin: 1.1rem 0 0;
  max-width: 33rem;
  color: var(--gm-p-muted-2);
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.14rem);
  line-height: 1.55;
}

.gm-public-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

.gm-public-hero__usps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: clamp(1.1rem, 2.5vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
  color: var(--gm-p-muted);
  font-size: 0.9rem;
}

.gm-public-hero__usps li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.gm-public-hero__usps li::before {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--gm-p-red);
  flex: 0 0 auto;
}

/* —— B · Puls — compacte wereldstatus, onderaan de hero —— */
.gm-public-pulse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  padding: 0.9rem 0 1.05rem;
  border-top: 1px solid var(--gm-p-border);
}

.gm-public-pulse__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--gm-p-muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}

.gm-public-pulse__label::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gm-p-online);
  box-shadow: 0 0 0 3px rgba(85, 178, 70, 0.18);
}

.gm-public-pulse__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0;
}

.gm-public-pulse__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}

.gm-public-pulse__item dt {
  order: 2;
  color: var(--gm-p-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.gm-public-pulse__item dd {
  order: 1;
  margin: 0;
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.gm-public-pulse__item--live dd { color: var(--gm-p-online); }

/* —— Gedeelde sectiekop —— */
.gm-public-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  flex-wrap: wrap;
}

.gm-public-section__head .gm-public-lead { margin-top: 0.7rem; }

/* —— C · Progressie — open ladder, geen kaarten —— */
/* Warme charcoal — de eerste trede omhoog na de hero, open en zonder kaders. */
.gm-public-ladder {
  border-top: 1px solid var(--gm-p-border);
  background:
    radial-gradient(85% 60% at 12% 0%, rgba(201, 45, 45, 0.06), transparent 62%),
    linear-gradient(180deg, var(--gm-p-surface-2) 0%, var(--gm-p-surface) 55%),
    var(--gm-p-surface);
}

.gm-public-ladder__track {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gm-public-ladder__step {
  position: relative;
  padding: 0 0 1.6rem 3.25rem;
}

.gm-public-ladder__step:last-child { padding-bottom: 0; }

/* Verticale lijn door de markers (mobiel/tablet). */
.gm-public-ladder__step::before {
  content: "";
  position: absolute;
  left: 1.09rem;
  top: 2.2rem;
  bottom: -0.2rem;
  width: 1px;
  background: var(--gm-p-border);
}

.gm-public-ladder__step:last-child::before { display: none; }

.gm-public-ladder__marker {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--gm-p-border-strong);
  background: var(--gm-p-bg);  /* verdiept in de warme charcoal-sectie */
  color: var(--gm-p-gold);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Alleen de ring is rood: rode cijfertekst op #0a0a0a haalde 3,67:1 en dat is
   te weinig voor tekst. Het oker cijfer haalt 8,6:1. */
.gm-public-ladder__step:first-child .gm-public-ladder__marker {
  border-color: var(--gm-p-red);
  box-shadow: inset 0 0 0 1px var(--gm-p-red);
}

.gm-public-ladder__title {
  margin: 0;
  font-size: var(--gm-p-h3);
  font-weight: 700;
  line-height: 2.2rem;
}

.gm-public-ladder__desc {
  margin: 0.3rem 0 0;
  max-width: 34rem;
  color: var(--gm-p-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* —— D · Kies je pad —— */
/* Terug naar near-black, zodat de twee padkaarten eruit lichten. */
.gm-public-paths {
  border-top: 1px solid var(--gm-p-border);
  background: var(--gm-p-bg);
}

.gm-public-paths__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.gm-public-path {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.5rem 1.4rem 1.6rem;
  border: 1px solid var(--gm-p-border);
  border-radius: var(--gm-p-radius);
  background: var(--gm-p-surface-2);
}

/* Accentlijn bovenaan onderscheidt de twee paden zonder twee losse skins. */
.gm-public-path::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gm-p-red);
}

.gm-public-path--db::before { background: var(--gm-p-gold-deep); }

/* Nauwelijks zichtbaar verschil in temperatuur: rood voor macht, brons voor
   handel. Geen RPG-styling, alleen een gerichte tint onder de kop. */
.gm-public-path--gf {
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(201, 45, 45, 0.07), transparent 62%),
    var(--gm-p-surface-2);
}

.gm-public-path--db {
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(163, 122, 46, 0.07), transparent 62%),
    var(--gm-p-surface-2);
}

.gm-public-path__meta {
  margin: 0;
  color: var(--gm-p-muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}

.gm-public-path__title {
  margin: 0.55rem 0 0;
  font-size: clamp(1.3rem, 1vw + 1.05rem, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.gm-public-path__title span {
  display: block;
  margin-top: 0.2rem;
  color: var(--gm-p-muted);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
}

.gm-public-path__desc {
  margin: 0.8rem 0 0;
  color: var(--gm-p-muted);
  font-size: 0.97rem;
  line-height: 1.55;
}

.gm-public-paths__note {
  margin: 1.35rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--gm-p-border);
  color: var(--gm-p-muted);
  font-size: 0.92rem;
  max-width: 44rem;
}

/* —— E/G · Cinematic band (familie, wereld) —— */
.gm-public-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(3.25rem, 7vw, 6rem) 0;
  background: #0a0908;
}

.gm-public-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.gm-public-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gm-public-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Standaard: onderwerp links in beeld, tekst rechts. */
.gm-public-band__scrim {
  background:
    linear-gradient(266deg, rgba(6, 6, 7, 0.95) 0%, rgba(6, 6, 7, 0.88) 38%, rgba(6, 6, 7, 0.45) 68%, rgba(6, 6, 7, 0.25) 100%),
    linear-gradient(180deg, rgba(6, 6, 7, 0.55), transparent 28%, transparent 72%, rgba(6, 6, 7, 0.65));
}

/* Variant: tekst links. */
.gm-public-band--start .gm-public-band__scrim {
  background:
    linear-gradient(94deg, rgba(6, 6, 7, 0.95) 0%, rgba(6, 6, 7, 0.88) 38%, rgba(6, 6, 7, 0.45) 68%, rgba(6, 6, 7, 0.25) 100%),
    linear-gradient(180deg, rgba(6, 6, 7, 0.55), transparent 28%, transparent 72%, rgba(6, 6, 7, 0.65));
}

.gm-public-band--start .gm-public-band__media img { object-position: 74% 45%; }
.gm-public-family .gm-public-band__media img { object-position: 22% 45%; }

/* Oversized decoratief woord — puur sfeer, nooit inhoud. */
.gm-public-band__ghost {
  position: absolute;
  z-index: -1;
  margin: 0;
  bottom: -0.2em;
  left: -0.04em;
  font-size: clamp(5rem, 17vw, 14rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.038;
  pointer-events: none;
  user-select: none;
}

.gm-public-band--start .gm-public-band__ghost {
  left: auto;
  right: -0.04em;
}

.gm-public-band__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.gm-public-band__copy { max-width: 36rem; }

.gm-public-band .gm-public-h2 { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); }

/* Specificatielijst — hairlines, geen kaarten in kaarten. */
.gm-public-spec {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.gm-public-spec__row {
  padding: 0.85rem 0;
  border-top: 1px solid var(--gm-p-border);
}

.gm-public-spec__row:last-child { border-bottom: 1px solid var(--gm-p-border); }

.gm-public-spec dt {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
}

.gm-public-spec dd {
  margin: 0.25rem 0 0;
  color: var(--gm-p-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* —— F · Weekcontracten — dossiervel —— */
/* Dossier op near-black; het vel zelf is de enige verhoging. */
.gm-public-dossier {
  border-top: 1px solid var(--gm-p-border);
  background: var(--gm-p-bg);
}

.gm-public-dossier__sheet {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gm-p-border);
  border-top-color: var(--gm-p-hairline);
  border-radius: var(--gm-p-radius);
  background: var(--gm-p-surface);
}

.gm-public-dossier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--gm-p-border);
  background: var(--gm-p-tint);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

.gm-public-dossier__file { color: var(--gm-p-red); }
.gm-public-dossier__term { color: var(--gm-p-muted); letter-spacing: 0.12em; }

.gm-public-dossier__rows {
  margin: 0;
  padding: 0.35rem 1.2rem 1.2rem;
  list-style: none;
}

.gm-public-dossier__row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.65rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gm-p-border);
}

.gm-public-dossier__row:last-child { border-bottom: 0; padding-bottom: 0.25rem; }

.gm-public-dossier__num {
  color: var(--gm-p-gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.gm-public-dossier__row h3 {
  margin: 0;
  font-size: var(--gm-p-h3);
  font-weight: 700;
}

.gm-public-dossier__row p {
  margin: 0.25rem 0 0;
  max-width: 46rem;
  color: var(--gm-p-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* Stempel — puur CSS, geen afbeelding. */
.gm-public-dossier__stamp {
  position: absolute;
  right: 1rem;
  bottom: 0.9rem;
  margin: 0;
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--gm-p-red);
  border-radius: 3px;
  color: var(--gm-p-red);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.4;
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
}

/* —— H · Ronde & competitie —— */
/* Warm brown-black — de warmste trede van de pagina, puur typografisch. */
.gm-public-round {
  border-top: 1px solid var(--gm-p-border);
  background: var(--gm-p-surface-2);
}

.gm-public-round__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.gm-public-round__copy { max-width: 42rem; }

.gm-public-round__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
}

.gm-public-round__badge {
  display: grid;
  justify-items: start;
  margin: 0;
  padding: 1.1rem 0 1.1rem 1.35rem;
  border-left: 2px solid var(--gm-p-red);
}

.gm-public-round__word,
.gm-public-round__state {
  color: var(--gm-p-muted);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}

.gm-public-round__num {
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.gm-public-round__state { margin-top: 0.35rem; }

/* F9.2: actief Beta Season (uit seasons.type) — alleen presentatie */
.gm-public-round__beta {
  margin-top: 0.6rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--gm-p-red-hot);
  border-radius: 999px;
  color: var(--gm-p-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.gm-public-round__beta-note {
  margin-top: 0.35rem;
  max-width: 16rem;
  color: var(--gm-p-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* —— I · Nieuws —— */
.gm-public-news {
  border-top: 1px solid var(--gm-p-border);
  background: var(--gm-p-bg-elevated);
}

.gm-public-news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.gm-public-news-card {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  border: 1px solid var(--gm-p-border);
  border-radius: var(--gm-p-radius);
  background: var(--gm-p-surface);
  overflow: hidden;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.gm-public-news-card:hover {
  border-color: var(--gm-p-border-strong);
  transform: translateY(-2px);
}

.gm-public-news-card__media {
  position: relative;
  background: var(--gm-p-surface-2);
  overflow: hidden;
}

.gm-public-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gm-public-news-card__body {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.95rem;
  min-width: 0;
}

.gm-public-news-card__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gm-p-muted);
  font-size: 0.76rem;
}

.gm-public-news-card__tag {
  color: var(--gm-p-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.gm-public-news-card__title {
  margin: 0.4rem 0 0;
  font-size: 1.02rem;
  line-height: 1.3;
  font-weight: 700;
}

.gm-public-news-card__excerpt {
  margin: 0.35rem 0 0;
  color: var(--gm-p-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Raakvlak op 44px zonder de tekst groter te maken. */
.gm-public-news-card__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 2.75rem;
  margin-top: auto;
  color: var(--gm-p-gold-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
}

.gm-public-news-card__more:hover { text-decoration: underline; }

/* —— Gameplaystrip — pas zichtbaar met echte gm2026-beelden —— */
.gm-public-play { background: var(--gm-p-bg); }

.gm-public-play__shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.gm-public-shot {
  margin: 0;
  border: 1px solid var(--gm-p-border);
  border-radius: var(--gm-p-radius);
  overflow: hidden;
  background: var(--gm-p-surface);
}

.gm-public-shot img { display: block; width: 100%; height: auto; }

.gm-public-shot figcaption {
  padding: 0.7rem 0.9rem;
  color: var(--gm-p-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--gm-p-border);
}

/* —— J · Slot-CTA —— */
.gm-public-final {
  position: relative;
  isolation: isolate;
  padding: clamp(3.25rem, 6vw, 5.5rem) 0;
  border-top: 1px solid var(--gm-p-border);
  background:
    radial-gradient(85% 130% at 50% 0%, rgba(201, 45, 45, 0.13), transparent 62%),
    var(--gm-p-bg-deep);
  text-align: center;
}

.gm-public-final__title {
  margin: 0.55rem 0 0;
  font-size: var(--gm-p-h2);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.gm-public-final__title span { color: var(--gm-p-red); }

.gm-public-final__lead {
  margin: 0.9rem auto 0;
  max-width: 32rem;
  color: var(--gm-p-muted);
}

.gm-public-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* —— Auth / login —— */
.gm-public-auth {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.gm-public-auth__hero {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  min-height: clamp(32rem, 78vh, 46rem);
  overflow: hidden;
  background: var(--gm-p-bg-deep);
  /* Breathing room under header — login + register share this */
  padding: clamp(1.5rem, 4vw, 4.75rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}

.gm-public-auth__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.gm-public-auth__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.gm-public-auth__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(4, 5, 6, 0.94) 0%, rgba(4, 5, 6, 0.78) 42%, rgba(4, 5, 6, 0.42) 72%, rgba(4, 5, 6, 0.7) 100%),
    linear-gradient(180deg, rgba(4, 5, 6, 0.35) 0%, rgba(4, 5, 6, 0.12) 45%, rgba(4, 5, 6, 0.88) 100%);
}

.gm-public-auth__stage {
  display: grid;
  gap: 1.75rem;
  width: min(100% - (var(--gm-p-gutter) * 2), var(--gm-p-max));
  align-items: center;
}

.gm-public-auth__title {
  margin: 0;
  font-size: clamp(2.35rem, 4vw + 1rem, 3.85rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.gm-public-auth__title span {
  color: var(--gm-p-gold-soft);
}

.gm-public-auth__lead {
  margin: 1.1rem 0 0;
  color: var(--gm-p-muted-2);
  font-size: clamp(1.02rem, 0.4vw + 0.92rem, 1.15rem);
  max-width: 32rem;
  line-height: 1.55;
}

.gm-public-auth__features {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.gm-public-auth__features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}

.gm-public-auth__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(214, 162, 71, 0.12);
  color: var(--gm-p-gold);
  font-weight: 800;
  font-size: 0.8rem;
}

.gm-public-auth__features strong {
  display: block;
  color: var(--gm-p-text);
  font-size: 1.02rem;
}

.gm-public-auth__features small {
  display: block;
  margin-top: 0.15rem;
  color: var(--gm-p-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.gm-public-auth__quote {
  margin: 1.75rem 0 0;
  font-family: var(--gm-p-font-quote);
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.25rem);
  max-width: 22rem;
  line-height: 1.45;
}

.gm-public-auth__panel {
  width: 100%;
}

.gm-public-auth-card {
  background: rgba(14, 17, 24, 0.88);
  border: 1px solid var(--gm-p-border-strong);
  border-radius: var(--gm-p-radius-lg);
  box-shadow: var(--gm-p-shadow);
  backdrop-filter: blur(14px);
  padding: clamp(1.35rem, 3vw, 1.85rem);
}

.gm-public-auth-card__title {
  margin: 0;
  font-size: clamp(1.7rem, 1.5vw + 1.2rem, 2.15rem);
  letter-spacing: -0.02em;
}

.gm-public-auth-card__title span {
  color: var(--gm-p-gold-soft);
}

.gm-public-auth-card__lead {
  margin: 0.55rem 0 0;
  color: var(--gm-p-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.gm-public-auth-form {
  margin-top: 1.55rem;
  display: grid;
  gap: 1.15rem;
}

.gm-public-auth-card__head {
  margin-bottom: 0.15rem;
}

.gm-public-field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.gm-public-label {
  display: block;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gm-p-text);
}

.gm-public-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 3.15rem;
  height: 3.15rem;
  padding: 0 0.95rem;
  border-radius: var(--gm-p-radius-sm);
  border: 1px solid var(--gm-p-border-strong);
  background: var(--gm-p-bg);
  background-image: none;
  color: var(--gm-p-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.25;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.gm-public-input::placeholder {
  color: var(--gm-p-muted);
  opacity: 1;
  line-height: normal;
}

.gm-public-input:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.gm-public-input:focus {
  outline: none;
  border-color: rgba(229, 57, 53, 0.75);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.22);
  background: var(--gm-p-bg);
}

.gm-public-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.gm-public-field.is-invalid .gm-public-input {
  border-color: rgba(229, 57, 53, 0.7);
}

.gm-public-field__error {
  margin: 0;
  color: var(--gm-p-danger-text);
  font-size: 0.9rem;
}

.gm-public-password {
  position: relative;
  display: block;
  width: 100%;
}

.gm-public-password .gm-public-input {
  padding-right: 3rem;
}

.gm-public-password__toggle {
  position: absolute;
  top: 0;
  right: 0.35rem;
  bottom: 0;
  margin: auto 0;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--gm-p-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.gm-public-password__toggle:hover {
  color: var(--gm-p-text);
  background: rgba(255, 255, 255, 0.06);
}

/* Hide native Edge/IE password chrome — we ship our own toggle */
.gm-public-body--auth input[type="password"]::-ms-reveal,
.gm-public-body--auth input[type="password"]::-ms-clear,
.gm-public-body--auth input[type="text"]::-ms-clear {
  display: none;
}

.gm-public-auth-form__forgot {
  margin: -0.15rem 0 0;
  text-align: right;
}

/* Fase A1: "Ingelogd blijven op dit apparaat" */
.gm-public-auth-form__remember {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: var(--gm-p-muted);
  font-size: 0.95rem;
  cursor: pointer;
}
.gm-public-auth-form__remember input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--gm-p-gold, #d6a247);
}

.gm-public-auth-form__register {
  margin: 0.55rem 0 0;
  text-align: center;
  color: var(--gm-p-muted);
  font-size: 0.98rem;
}

.gm-public-alert {
  margin-top: 1.1rem;
  padding: 0.9rem 1.05rem;
  border-radius: var(--gm-p-radius-sm);
  border: 1px solid var(--gm-p-border);
  background: rgba(255, 255, 255, 0.04);
}

.gm-public-alert__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.gm-public-alert--error {
  border-color: rgba(229, 57, 53, 0.55);
  background: rgba(198, 40, 40, 0.14);
}

.gm-public-alert--info {
  border-color: rgba(214, 162, 71, 0.4);
  background: rgba(214, 162, 71, 0.1);
}

.gm-public-alert--success {
  border-color: rgba(61, 214, 140, 0.4);
  background: rgba(61, 214, 140, 0.1);
}

.gm-public-auth__stats {
  padding: 0 0 clamp(1.25rem, 3vw, 2rem);
  margin-top: -0.75rem;
  position: relative;
  z-index: 2;
}

.gm-public-auth__stage--register {
  align-items: start;
}

/* Compact register card — denser, closer to login (~560–620px) */
.gm-public-auth-card--register {
  width: 100%;
  max-width: 38.75rem; /* 620px ceiling */
  padding: clamp(1.25rem, 2.4vw, 1.65rem);
}

.gm-public-auth-form--register {
  margin-top: 1.15rem;
  gap: 0.9rem;
}

.gm-public-auth-form--register .gm-public-auth-card__head {
  margin-bottom: 0;
}

.gm-public-auth-form--register .gm-public-auth-card__lead {
  margin-top: 0.4rem;
  font-size: 0.92rem;
}

.gm-public-auth-form--register .gm-public-btn {
  margin-top: 0.25rem;
}

.gm-public-auth-form--register .gm-public-auth-form__register {
  margin-top: 0.45rem;
  font-size: 0.92rem;
}

.gm-public-auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  width: 100%;
}

.gm-public-auth-grid > .gm-public-field {
  width: 100%;
  min-width: 0;
  align-content: start;
}

/* Register: keep labels/inputs aligned; feedback stays under its own field */
.gm-public-auth--register .gm-public-auth-grid {
  gap: 0.9rem 0.75rem;
}

.gm-public-auth--register .gm-public-auth-grid > .gm-public-field {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.35rem;
}

.gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .gm-public-label {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.25;
  white-space: nowrap;
}

.gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .gm-public-password,
.gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .gm-public-input,
.gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .gm-public-input-wrap {
  grid-row: 2;
}

.gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .gm-public-strength,
.gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .gm-public-field__hint,
.gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .reg-form__status {
  grid-row: 3;
  margin-top: 0;
}

/* Compact inputs only on register — login keeps approved height */
.gm-public-auth--register .gm-public-input,
.gm-public-body--auth .gm-public-auth--register .gm-public-input,
.gm-public-body--auth .gm-public-auth--register input[type="text"],
.gm-public-body--auth .gm-public-auth--register input[type="email"],
.gm-public-body--auth .gm-public-auth--register input[type="password"] {
  min-height: 2.85rem;
  height: 2.85rem;
  padding: 0 0.85rem;
  font-size: 0.98rem;
}

.gm-public-body--auth .gm-public-auth--register .gm-public-password .gm-public-input,
.gm-public-body--auth .gm-public-auth--register .gm-public-password input[type="password"],
.gm-public-body--auth .gm-public-auth--register .gm-public-password input[type="text"] {
  padding-right: 2.75rem;
}

.gm-public-input-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.gm-public-input-wrap .gm-public-input {
  padding-right: 2.6rem;
}

.gm-public-input-wrap .gm-reg-input-wrap__state {
  position: absolute;
  top: 0;
  right: 0.75rem;
  bottom: 0;
  margin: auto 0;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

.gm-public-input-wrap.is-ok .gm-reg-input-wrap__state {
  background: var(--gm-p-online);
}

.gm-public-input-wrap.is-error .gm-reg-input-wrap__state {
  background: var(--gm-p-red-hot);
}

.gm-public-input-wrap.is-pending .gm-reg-input-wrap__state {
  background: var(--gm-p-gold);
}

.gm-public-field__hint {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.88rem;
  color: var(--gm-p-muted);
}

.gm-public-field__hint.is-ok,
.reg-form__status.is-ok {
  color: var(--gm-p-online);
}

.gm-public-field__hint.is-error,
.reg-form__status.is-error,
.gm-public-field__hint.is-mismatch {
  color: var(--gm-p-danger-text);
}

.gm-public-field__hint.is-match {
  color: var(--gm-p-online);
}

.gm-public-gender {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
  width: 100%;
}

.gm-public-gender > .gm-public-label,
.gm-public-gender > legend {
  display: block;
  margin: 0 0 0.4rem;
  padding: 0;
  float: none;
  width: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gm-p-text);
}

.gm-public-gender__seg {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
  gap: 0.75rem; /* ~12px */
  width: auto;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.gm-public-gender__option {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  min-width: 0;
  width: 100%;
}

.gm-public-gender__option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
}

.gm-public-gender__seg-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.45rem;
  height: 2.45rem;
  padding: 0 0.7rem;
  border-radius: var(--gm-p-radius-sm);
  border: 1px solid var(--gm-p-border);
  background: transparent;
  color: var(--gm-p-muted-2);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gm-public-gender__icon {
  flex: 0 0 auto;
  display: block;
  color: currentColor;
  opacity: 0.9;
}

.gm-public-gender__text {
  line-height: 1;
}

.gm-public-gender__option:hover .gm-public-gender__seg-item {
  color: var(--gm-p-text);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.gm-public-gender__option input:focus-visible + .gm-public-gender__seg-item {
  outline: 2px solid var(--gm-p-gold);
  outline-offset: 2px;
}

.gm-public-gender__option input:checked + .gm-public-gender__seg-item {
  border-color: rgba(229, 57, 53, 0.85);
  background: rgba(198, 40, 40, 0.28);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(229, 57, 53, 0.35),
    0 8px 18px rgba(198, 40, 40, 0.18);
}

.gm-public-gender__option input:checked + .gm-public-gender__seg-item .gm-public-gender__icon {
  color: var(--gm-p-danger-text);
  opacity: 1;
}

.gm-public-auth--register .gm-public-terms {
  margin-top: 0.05rem;
}

.gm-public-auth--register .gm-public-terms__label {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0 !important;
  width: 100%;
  color: var(--gm-p-muted-2);
  font-size: 0.9rem;
  line-height: 1.3;
  cursor: pointer;
}

.gm-public-auth--register .gm-public-terms__label input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background-color: var(--gm-p-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
  display: inline-grid;
  place-content: center;
  color: #fff;
}

.gm-public-auth--register .gm-public-terms__label input[type="checkbox"]::after {
  content: "";
  width: 0.35rem;
  height: 0.62rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  margin-top: -0.08rem;
  transition: transform 0.12s ease;
}

.gm-public-auth--register .gm-public-terms__label input[type="checkbox"]:checked {
  background-color: var(--gm-p-gold) !important;
  border-color: var(--gm-p-gold-soft);
}

.gm-public-auth--register .gm-public-terms__label input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.gm-public-auth--register .gm-public-terms__label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gm-p-gold);
  outline-offset: 2px;
}

.gm-public-auth--register .gm-public-terms__text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  color: var(--gm-p-muted-2);
  white-space: nowrap;
}

.gm-public-auth--register .gm-public-strength {
  margin-top: 0.25rem;
}

.gm-public-auth--register .gm-public-strength__bars span {
  height: 0.22rem;
}

.gm-public-auth--register .gm-public-strength__label {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  min-height: 0.9em;
}

.gm-public-terms {
  margin-top: 0.25rem;
}

.gm-public-terms__label {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 !important;
  color: var(--gm-p-muted-2);
  font-size: 0.95rem;
  line-height: 1.35;
  cursor: pointer;
}

.gm-public-terms__label input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: 0 0 1.25rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background-color: var(--gm-p-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  color: #fff;
}

.gm-public-terms__label input[type="checkbox"]::after {
  content: "";
  width: 0.42rem;
  height: 0.72rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  margin-top: -0.12rem;
  transition: transform 0.12s ease;
}

.gm-public-terms__label input[type="checkbox"]:checked {
  background-color: var(--gm-p-gold) !important;
  border-color: var(--gm-p-gold-soft);
}

.gm-public-terms__label input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.gm-public-terms__label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gm-p-gold);
  outline-offset: 2px;
}

.gm-public-terms__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--gm-p-muted-2);
  white-space: normal;
}

.gm-public-strength {
  margin-top: 0.35rem;
}

.gm-public-strength__bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}

.gm-public-strength__bars span {
  height: 0.28rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.gm-public-strength[data-level="1"] .gm-public-strength__bars span:nth-child(-n+1) { background: var(--gm-p-danger-text); }
.gm-public-strength[data-level="2"] .gm-public-strength__bars span:nth-child(-n+2) { background: var(--gm-p-warn); }
.gm-public-strength[data-level="3"] .gm-public-strength__bars span:nth-child(-n+3) { background: var(--gm-p-online); }
.gm-public-strength[data-level="4"] .gm-public-strength__bars span:nth-child(-n+4) { background: var(--gm-p-online); }

.gm-public-strength__label {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--gm-p-muted);
  min-height: 1em;
}

.gm-public-auth-flash {
  margin-top: 1rem;
  display: grid;
  gap: 0.55rem;
}

.gm-public-body--auth .gm-public-auth-flash .alert-box {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--gm-p-radius-sm);
  border: 1px solid var(--gm-p-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gm-p-text);
  font-size: 0.95rem;
  line-height: 1.45;
}

.gm-public-body--auth .gm-public-auth-flash .alert-box span {
  display: none;
}

.gm-public-body--auth .gm-public-auth-flash .alert-box.error {
  border-color: rgba(229, 57, 53, 0.55);
  background: rgba(198, 40, 40, 0.14);
}

.gm-public-body--auth .gm-public-auth-flash .alert-box.success {
  border-color: rgba(61, 214, 140, 0.4);
  background: rgba(61, 214, 140, 0.1);
}

.gm-public-body--auth .gm-public-auth-flash .alert-box.notice,
.gm-public-body--auth .gm-public-auth-flash .alert-box.warning {
  border-color: rgba(214, 162, 71, 0.4);
  background: rgba(214, 162, 71, 0.1);
}

.gm-public-auth-success {
  margin-top: 1.15rem;
  display: grid;
  gap: 1rem;
}

.gm-public-auth-success__note {
  margin: 0;
  color: var(--gm-p-muted);
}

/* Autofill — keep dark look inside outgame shell only */
.gm-public-body--auth .gm-public-input:-webkit-autofill,
.gm-public-body--auth .gm-public-input:-webkit-autofill:hover,
.gm-public-body--auth .gm-public-input:-webkit-autofill:focus,
.gm-public-body--auth input[type="text"]:-webkit-autofill,
.gm-public-body--auth input[type="email"]:-webkit-autofill,
.gm-public-body--auth input[type="password"]:-webkit-autofill {
  -webkit-text-fill-color: var(--gm-p-text);
  caret-color: var(--gm-p-text);
  border: 1px solid var(--gm-p-border-strong);
  box-shadow: 0 0 0 1000px var(--gm-p-bg) inset;
  transition: background-color 99999s ease-out 0s;
}

/* Auth form controls — win over legacy guest input rules */
.gm-public-body--auth .gm-public-auth input[type="text"],
.gm-public-body--auth .gm-public-auth input[type="email"],
.gm-public-body--auth .gm-public-auth input[type="password"],
.gm-public-body--auth .gm-public-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 3.15rem;
  height: 3.15rem;
  padding: 0 0.95rem;
  border-radius: var(--gm-p-radius-sm);
  border: 1px solid var(--gm-p-border-strong);
  background: var(--gm-p-bg);
  background-color: var(--gm-p-bg);
  background-image: none;
  color: var(--gm-p-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.25;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.gm-public-body--auth .gm-public-password .gm-public-input,
.gm-public-body--auth .gm-public-password input[type="password"],
.gm-public-body--auth .gm-public-password input[type="text"] {
  padding-right: 3rem;
}

.gm-public-body--auth .gm-public-input-wrap .gm-public-input {
  padding-right: 2.6rem;
}

.gm-public-body--auth .gm-public-auth label.gm-public-label,
.gm-public-body--auth .gm-public-auth label.gm-public-gender__option,
.gm-public-body--auth .gm-public-auth label.gm-public-terms__label {
  margin-bottom: 0;
}

/* Register-only density (after shared auth input rules) */
.gm-public-body--auth .gm-public-auth--register .gm-public-input,
.gm-public-body--auth .gm-public-auth--register input[type="text"],
.gm-public-body--auth .gm-public-auth--register input[type="email"],
.gm-public-body--auth .gm-public-auth--register input[type="password"] {
  min-height: 2.85rem;
  height: 2.85rem;
  padding: 0 0.85rem;
  font-size: 0.98rem;
}

.gm-public-body--auth .gm-public-auth--register .gm-public-password .gm-public-input,
.gm-public-body--auth .gm-public-auth--register .gm-public-password input[type="password"],
.gm-public-body--auth .gm-public-auth--register .gm-public-password input[type="text"] {
  padding-right: 2.75rem;
}

.gm-public-body--auth .gm-public-auth--register .gm-public-input-wrap .gm-public-input {
  padding-right: 2.5rem;
}

/* O2.5 — single-column auth stage (activatie).
   Blijft op élke breedte één gecentreerde kolom, zodat een view zonder
   __copy-kolom niet in een tweekoloms raster wordt geperst. */
/* Specificiteit bewust op 2 klassen: de breakpoint-regels voor
   .gm-public-auth__stage staan verderop en zouden anders winnen. */
.gm-public-auth .gm-public-auth__stage--single {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.gm-public-auth .gm-public-auth__stage--single .gm-public-auth__panel {
  width: 100%;
  max-width: 34rem;
}

/* ============================================================
 * O2.5 — GEDEELDE PUBLIC PAGE FAMILY
 * Eén patroon voor alle publieke subpagina's:
 *   eyebrow · H1 · korte intro · content
 * Geen tweede paneltitel die de H1 herhaalt.
 * ============================================================ */

.gm-public-page {
  width: 100%;
  max-width: 62rem; /* ~992px — standaard contentbreedte */
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Breedtevarianten — geen inline widths per pagina. */
/* O2.6: utility-pagina's krijgen wat meer verticale lucht, zodat de content
   niet als klein eiland bovenaan een lege pagina hangt. Puur padding —
   de flex/dvh footer-shell uit O1 blijft ongewijzigd. */
.gm-public-page--narrow {
  max-width: 40rem; /* ~640px: auth/utility forms */
  padding-block: clamp(2rem, 7vh, 4.5rem);
}
.gm-public-page--wide { max-width: 75rem; }   /* ~1200px: tabellen/data      */

/* O2.6: hairline verbindt de header met de content eronder i.p.v. een
   losse kop boven een zwevende card. */
.gm-public-page__header {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-bottom: clamp(1.1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--gm-p-border);
}

.gm-public-page__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  color: var(--gm-p-muted);
  font-size: 0.85rem;
}

.gm-public-page__crumbs a {
  color: var(--gm-p-muted);
  text-decoration: none;
}

.gm-public-page__crumbs a:hover { color: var(--gm-p-text); }

/* O2.6: muted i.p.v. fel goud; het rode streepje geeft het merkaccent. */
.gm-public-page__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--gm-p-muted);
  font-size: var(--gm-p-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

.gm-public-page__eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--gm-p-red);
  flex: 0 0 auto;
}

.gm-public-page__title {
  margin: 0.5rem 0 0;
  font-size: clamp(1.75rem, 1.9vw + 1.2rem, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.gm-public-page__title span { color: var(--gm-p-red); }

.gm-public-page__lead {
  margin: 0.6rem 0 0;
  max-width: 44rem;
  color: var(--gm-p-muted-2);
  font-size: clamp(0.98rem, 0.3vw + 0.92rem, 1.08rem);
  line-height: 1.55;
}

/* —— Panel —— */
.gm-public-panel {
  border: 1px solid var(--gm-p-border);
  border-radius: var(--gm-p-radius);
  background: var(--gm-p-surface);
  overflow: hidden;
}

.gm-public-panel + .gm-public-panel { margin-top: 1rem; }

.gm-public-panel__head {
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--gm-p-border);
  background: var(--gm-p-surface-2);
}

.gm-public-panel__title {
  margin: 0;
  font-size: var(--gm-p-h3);
  font-weight: 700;
}

.gm-public-panel__body {
  padding: clamp(1rem, 2.2vw, 1.5rem);
}

.gm-public-panel__body > :first-child { margin-top: 0; }
.gm-public-panel__body > :last-child { margin-bottom: 0; }

/* —— Empty state ——
 * O2.6: geen grote gestippelde doos meer. "Er is nog niets" hoort geen
 * beheerkaart te zijn: open typografie, links uitgelijnd, één klein
 * accentstreepje. Rustiger en duidelijk onderdeel van de pagina.
 */
.gm-public-empty {
  max-width: 34rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.gm-public-empty__icon { display: none; }

.gm-public-empty__title {
  margin: 0;
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
  font-weight: 700;
}

.gm-public-empty__title::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 0.85rem;
  background: var(--gm-p-red);
}

.gm-public-empty__text {
  margin: 0.5rem 0 0;
  color: var(--gm-p-muted);
  font-size: 0.97rem;
  line-height: 1.65;
}

.gm-public-empty__action { margin-top: 1.35rem; }

/* —— Form family —— */
.gm-public-form { display: grid; gap: 1rem; }

.gm-public-form__intro {
  margin: 0;
  color: var(--gm-p-muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

.gm-public-form__group { display: grid; gap: 0.4rem; }

.gm-public-form__label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gm-p-muted-2);
}

.gm-public-form__input,
.gm-public-form__select,
.gm-public-form__textarea {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--gm-p-radius-sm);
  border: 1px solid var(--gm-p-border-strong);
  background: var(--gm-p-bg);
  color: var(--gm-p-text);
  font: inherit;
  font-size: 1rem; /* >=16px: geen iOS-zoom bij focus */
}

.gm-public-form__textarea {
  min-height: 8rem;
  padding: 0.75rem 0.85rem;
  resize: vertical;
}

.gm-public-form__input::placeholder,
.gm-public-form__textarea::placeholder { color: var(--gm-p-muted); }

.gm-public-form__input:hover,
.gm-public-form__select:hover,
.gm-public-form__textarea:hover { border-color: var(--gm-p-hairline); }

.gm-public-form__input:focus-visible,
.gm-public-form__select:focus-visible,
.gm-public-form__textarea:focus-visible {
  outline: 2px solid var(--gm-p-gold);
  outline-offset: 2px;
  border-color: var(--gm-p-gold);
}

.gm-public-form__input:disabled,
.gm-public-form__select:disabled,
.gm-public-form__textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.gm-public-form__input[aria-invalid="true"],
.gm-public-form__textarea[aria-invalid="true"] {
  border-color: var(--gm-p-red);
}

.gm-public-form__hint {
  margin: 0;
  color: var(--gm-p-muted);
  font-size: 0.86rem;
}

.gm-public-form__error {
  margin: 0;
  color: var(--gm-p-danger-text);
  font-size: 0.86rem;
}

.gm-public-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.gm-public-form__footer {
  margin: 0.25rem 0 0;
  color: var(--gm-p-muted);
  font-size: 0.92rem;
}

/* —— Prose (regels, langere tekst) —— */
.gm-public-prose {
  color: var(--gm-p-muted-2);
  line-height: 1.65;
}

.gm-public-prose > :first-child { margin-top: 0; }
.gm-public-prose > :last-child { margin-bottom: 0; }
.gm-public-prose a { color: var(--gm-p-gold-soft); }

/* —— Genummerde regellijst —— */
/* —— Spelregels ——
 * O2.6: was een card per categorie mét een bordered rounded card per
 * afzonderlijke regel — card-in-card-in-card. Nu een reglement-opmaak:
 * sectiekop, hairline, en rijen met een vaste nummerkolom en een dunne
 * separator. Geen borders, geen radius, geen surface per regel.
 */
.gm-public-rules-section + .gm-public-rules-section {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.gm-public-rules-section__title {
  margin: 0 0 0.1rem;
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.gm-public-rules-section__rule {
  height: 2px;
  margin: 0.75rem 0 0.35rem;
  border: 0;
  background: linear-gradient(90deg, var(--gm-p-red) 0 2.5rem, var(--gm-p-border) 2.5rem);
}

.gm-public-rules { display: block; }

.gm-public-rule {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 0.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--gm-p-border);
}

.gm-public-rule:last-child { border-bottom: 0; }

.gm-public-rule__num {
  color: var(--gm-p-muted);
  font-weight: 700;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  padding-top: 0.2rem;
}

.gm-public-rule__text {
  color: var(--gm-p-muted-2);
  font-size: 0.97rem;
  line-height: 1.7;
  min-width: 0;
  overflow-wrap: anywhere;
}

.gm-public-rule__text > :first-child { margin-top: 0; }
.gm-public-rule__text > :last-child { margin-bottom: 0; }

@media (max-width: 559px) {
  /* Smalle schermen: nummer boven de tekst, tekst op volle breedte. */
  .gm-public-rule {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .gm-public-rule__num { padding-top: 0; }
}

/* —— Hall of Fame —— */
.gm-public-hof { display: grid; gap: 1rem; }

.gm-public-hof__round {
  margin: 0 0 0.75rem;
  color: var(--gm-p-muted);
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

/* O2.6: geen kaart per prijs in een kaart per categorie. De rijen zijn nu
   lijstregels met een dunne separator, net als de spelregels. */
.gm-public-prizes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gm-public-prize {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--gm-p-border);
}

.gm-public-prize:last-child { border-bottom: 0; }

.gm-public-prize__place {
  grid-row: 1 / span 2;
  color: var(--gm-p-muted);
  font-weight: 700;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  min-width: 2.25rem;
}

.gm-public-prize__name { font-weight: 700; }

.gm-public-prize__meta {
  color: var(--gm-p-muted);
  font-size: 0.88rem;
}

/* —— Hall of Fame (Seasons V2 F6.3) ——
   Season-keuze, tabs (Winnaars/Spelers/Families), categorie-subtabs, eindstandtabel
   en paginering. Alleen bestaande tokens: Light/Dark volgt vanzelf. */
.gm-public-hof__selector { display: grid; gap: 0.35rem; max-width: 30rem; }
.gm-public-hof__selector-row { display: flex; gap: 0.6rem; align-items: stretch; }
.gm-public-hof__selector-row .gm-public-form__select { flex: 1 1 auto; min-width: 0; }

.gm-public-hof__season { display: grid; gap: 0.2rem; }
.gm-public-hof__season-title { margin: 0; color: var(--gm-p-text); font-size: 1.35rem; }

.gm-public-hof__tabs,
.gm-public-hof__subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--gm-p-border);
  padding-bottom: 0.6rem;
}

.gm-public-hof__tab,
.gm-public-hof__subtab {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--gm-p-border);
  border-radius: var(--gm-p-radius-sm);
  background: var(--gm-p-surface);
  color: var(--gm-p-muted);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.gm-public-hof__subtab { min-height: 2.25rem; font-size: 0.8rem; text-transform: none; letter-spacing: 0; }

.gm-public-hof__tab:hover,
.gm-public-hof__subtab:hover { color: var(--gm-p-text); border-color: var(--gm-p-border-strong); }

.gm-public-hof__tab:focus-visible,
.gm-public-hof__subtab:focus-visible { outline: 2px solid var(--gm-p-gold); outline-offset: 2px; }

.gm-public-hof__tab.is-active,
.gm-public-hof__subtab.is-active {
  color: var(--gm-p-text);
  border-color: var(--gm-p-gold);
  background: var(--gm-p-surface-2);
}

.gm-public-hof__blokken { display: grid; gap: 1.25rem; }
.gm-public-hof__sub { margin: 0; color: var(--gm-p-muted); font-size: 0.86rem; }
.gm-public-hof__prize--leeg .gm-public-prize__name { color: var(--gm-p-muted); font-weight: 600; }

.gm-public-hof__badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--gm-p-gold);
  border-radius: var(--gm-p-radius-sm);
  color: var(--gm-p-gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.gm-public-hof__tabelwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gm-public-hof__tabel { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.gm-public-hof__caption { text-align: left; padding: 0 0 0.5rem; color: var(--gm-p-muted); font-weight: 700; }
.gm-public-hof__tabel th,
.gm-public-hof__tabel td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--gm-p-border); text-align: left; vertical-align: middle; }
.gm-public-hof__tabel th { color: var(--gm-p-text); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gm-public-hof__tabel td { color: var(--gm-p-text); }
.gm-public-hof__tabel tr.is-gedeeld td { background: var(--gm-p-tint); }
.gm-public-hof__pos { width: 4.5rem; color: var(--gm-p-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.gm-public-hof__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-public-hof__muted { color: var(--gm-p-muted); font-size: 0.82rem; }
/* Account Groups: prijsstatus onder de naam (klein, wrapt op mobiel; geen brede badges). */
.gm-public-hof__prijstag {
  display: block;
  width: fit-content;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.gm-public-hof__prijstag--prijs { color: var(--gm-p-gold); }
.gm-public-hof__prijstag--niet { color: var(--gm-p-muted); font-weight: 600; font-style: italic; }
.gm-public-hof__prijsuitleg { margin: 0 0 0.6rem; color: var(--gm-p-muted); font-size: 0.82rem; line-height: 1.45; }

.gm-public-hof__paging { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.gm-public-hof__paging .gm-public-hof__round { margin: 0; }

@media (max-width: 559px) {
  .gm-public-hof__selector-row { flex-direction: column; }
  .gm-public-hof__tabs { gap: 0.3rem; }
  .gm-public-hof__tab { flex: 1 1 0; justify-content: center; padding: 0.4rem 0.5rem; }
  .gm-public-hof__tabel { font-size: 0.86rem; }
  .gm-public-hof__tabel th,
  .gm-public-hof__tabel td { padding: 0.5rem 0.4rem; }
  .gm-public-hof__pos { width: 3.25rem; }
}

/* —— Flash-berichten uit MeldingenService/GameError ——
 * Die services renderen .alert-box met een status-class. Hier krijgen ze
 * dezelfde subtiele behandeling als .gm-public-note, zodat niet alles als
 * een grote rode doos verschijnt.
 */
.gm-public-flash { display: grid; gap: 0.6rem; margin-bottom: 1.15rem; }

.gm-public-flash .alert-box {
  margin: 0;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--gm-p-border-strong);
  border-left-width: 3px;
  border-radius: var(--gm-p-radius-sm);
  background: var(--gm-p-surface-2);
  color: var(--gm-p-muted-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.gm-public-flash .alert-box > span:empty { display: none; }

.gm-public-flash .alert-box.success { border-left-color: var(--gm-p-online); }
.gm-public-flash .alert-box.notice,
.gm-public-flash .alert-box.info { border-left-color: var(--gm-p-gold); }
.gm-public-flash .alert-box.warning { border-left-color: var(--gm-p-warn); }
.gm-public-flash .alert-box.error {
  border-left-color: var(--gm-p-red);
  color: var(--gm-p-danger-text);
}

/* —— Alerts (info/success/warning/error) —— */
.gm-public-note {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--gm-p-border-strong);
  border-left-width: 3px;
  border-radius: var(--gm-p-radius-sm);
  background: var(--gm-p-surface-2);
  color: var(--gm-p-muted-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.gm-public-note--info { border-left-color: var(--gm-p-gold); }
.gm-public-note--success { border-left-color: var(--gm-p-online); }
.gm-public-note--warning { border-left-color: var(--gm-p-warn); }
.gm-public-note--error {
  border-left-color: var(--gm-p-red);
  color: var(--gm-p-danger-text);
}

/* —— Screenshotgalerij —— */
.gm-public-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.gm-public-gallery figure {
  margin: 0;
  border: 1px solid var(--gm-p-border);
  border-radius: var(--gm-p-radius);
  overflow: hidden;
  background: var(--gm-p-surface);
}

.gm-public-gallery img { display: block; width: 100%; height: auto; }

.gm-public-gallery figcaption {
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--gm-p-border);
  color: var(--gm-p-muted);
  font-size: 0.86rem;
}

@media (min-width: 640px) {
  .gm-public-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .gm-public-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* —— Legacy public pages (login/register/etc.) —— */
.gm-public-main .watchBox,
.gm-public-main .BoxLinks,
.gm-public-main .m-card {
  background: var(--gm-p-surface);
  border: 1px solid var(--gm-p-border);
  border-radius: var(--gm-p-radius);
  margin: 0 0 1rem;
  overflow: hidden;
}

.gm-public-main .watchBox > h3,
.gm-public-main .BoxLinks > h3,
.gm-public-main .m-card > h3 {
  margin: 0;
  padding: 0.9rem 1.15rem;
  font-size: 1.08rem;
  border-bottom: 1px solid var(--gm-p-border);
  background: var(--gm-p-surface-2);
}

.gm-public-main .watchBox > h3 span,
.gm-public-main .BoxLinks > h3 span,
.gm-public-main .m-card > h3 span { color: var(--gm-p-gold); }

.gm-public-main .watchBox > .content,
.gm-public-main .BoxLinks > .content,
.gm-public-main .m-card > .content { padding: 1.15rem; }

.gm-public-main .box50-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gm-public-main .box50-row .BoxLinks.box50 { flex: 1 1 16rem; }

.gm-public-body .gm-guest-page-hero { margin: 0 0 1.25rem; }
.gm-public-body .gm-guest-page-hero__eyebrow {
  margin: 0;
  color: var(--gm-p-gold);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gm-public-body .gm-guest-page-hero__title {
  margin: 0.45rem 0 0;
  font-size: clamp(1.7rem, 2vw + 1rem, 2.15rem);
}
.gm-public-body .gm-guest-page-hero__lead {
  margin: 0.45rem 0 0;
  color: var(--gm-p-muted);
  font-size: 1.02rem;
}

.gm-public-body .gm-guest-input,
.gm-public-main .watchBox input[type="text"],
.gm-public-main .watchBox input[type="password"],
.gm-public-main .watchBox input[type="email"],
.gm-public-main .BoxLinks input[type="text"],
.gm-public-main .BoxLinks input[type="password"],
.gm-public-main .BoxLinks input[type="email"],
.gm-public-main .m-card input[type="text"],
.gm-public-main .m-card input[type="password"],
.gm-public-main .m-card input[type="email"] {
  width: 100%;
  max-width: 100%;
  padding: 0.8rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--gm-p-border);
  background: var(--gm-p-bg);
  color: var(--gm-p-text);
  font: inherit;
}

.gm-public-body .gm-guest-label,
.gm-public-main .watchBox label,
.gm-public-main .BoxLinks label,
.gm-public-main .m-card label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.98rem;
}

.gm-public-body .gm-guest-field { margin-bottom: 1rem; }

.gm-public-body .gm-guest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}

.gm-public-body .gm-guest-btn--primary {
  background: var(--gm-p-gold);
  color: var(--gm-p-ink);
}

.gm-public-body .gm-guest-btn--ghost {
  border-color: var(--gm-p-border);
  color: var(--gm-p-text);
  background: transparent;
}

.gm-public-body .gm-guest-message {
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: var(--gm-p-surface-2);
  border: 1px solid var(--gm-p-border);
}

.gm-public-body .gm-guest-message--error { border-color: #a44; }

/* Legacy content links only — never bleed into shell chrome */
.gm-public-main .watchBox a,
.gm-public-main .BoxLinks a,
.gm-public-main .m-card a,
.gm-public-main .gm-guest-page-hero a,
.gm-public-body .gm-guest-link {
  color: var(--gm-p-gold-soft);
}

/* O1: <strong> in shell-chrome en legacy content mag zijn kleur nooit uit een
   vreemde stylesheet halen (extra.css zette `strong { color:#4a2500 }`).
   Bewust smal gehouden: geen blanket-regel over het hele theme. */
.gm-public-footer strong,
.gm-public-main .watchBox strong,
.gm-public-main .BoxLinks strong,
.gm-public-main .m-card strong {
  color: inherit;
}

/* O1: screenshots.php leunde op .screenblock/img.IMGrand uit
   public/css/extra.css. Die stylesheet zit niet meer in de publieke keten,
   dus hier een minimale, theme-eigen vervanging. Verdwijnt in O5 samen met
   de legacy screenshots-markup. */
.gm-public-main .screenblock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.gm-public-main .screenblock a {
  display: inline-block;
  line-height: 0;
  border-radius: var(--gm-p-radius-sm);
  overflow: hidden;
}

.gm-public-main img.IMGrand {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  padding: 4px;
  border: 1px solid var(--gm-p-border);
  border-radius: var(--gm-p-radius-sm);
  background: var(--gm-p-surface-2);
}

.gm-public-main .screenblock a:hover img.IMGrand,
.gm-public-main .screenblock a:focus-visible img.IMGrand {
  border-color: var(--gm-p-gold);
}

/* —— Breakpoints —— */
@media (min-width: 640px) {
  .gm-public-play__shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Nieuws wordt hier een echte kaart i.p.v. de compacte mobiele rij. */
  .gm-public-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gm-public-news-card {
    grid-template-columns: 1fr;
  }

  .gm-public-news-card__media {
    aspect-ratio: 16 / 9;
  }

  .gm-public-news-card__body {
    padding: 1rem 1.05rem 1.1rem;
  }
}

@media (min-width: 768px) {
  .gm-public-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .gm-public-auth__stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 26.5rem);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
  }

  .gm-public-auth__stage--register {
    /* Tablet: slightly wider than login, still compact */
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 35rem);
    align-items: start;
  }

  .gm-public-auth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 0.75rem;
    align-items: start;
  }

  .gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .gm-public-label {
    min-height: 1.25em;
    white-space: nowrap;
  }
}

@media (min-width: 960px) {
  /* O1 — NAVIGATIE-BREEKPUNT.
   * Voorheen schakelde de desktopnav al om op 768px, terwijl brand +
   * 4 navlinks + 2 auth-CTA's daar ~803px nodig hebben. Resultaat was
   * horizontale overflow en een topbar die naar 110px wrapte op 768–~870px.
   * Gemeten minimale breedte waarbij alles past: ~880px viewport.
   * 960px is de eerste bestaande breakpoint met veilige marge; daaronder
   * blijft de compacte shell (hamburger + drawer + bottom-nav) actief.
   */
  .gm-public-dnav { display: flex; }
  .gm-public-menu-btn { display: none; }
  .gm-public-mnav { display: none; }
  .gm-public-topbar__actions .gm-public-btn--desktop { display: inline-flex; }

  /* TAALKEUZE REDESIGN: vanaf hier verdwijnt de hamburger en daarmee de
     drawer, dus vanaf hier MOET de taalkeuze in de topbalk staan. */
  .gm-public-lang--header { display: inline-flex; }

  /* Bottom-nav is hier weg, dus de reserveringsruimte onderaan mag weg. */
  .gm-public-main { padding-bottom: 2.5rem; }
  .gm-public-body--home .gm-public-main { padding-bottom: 0; }
  .gm-public-body--auth .gm-public-main { padding-bottom: 0; }
  .gm-public-body--auth .gm-public-footer { padding-bottom: 2.5rem; }
  .gm-public-footer { padding-bottom: 3rem; }

  .gm-public-news__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gm-public-play__shots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* TAALKEUZE REDESIGN — krappe desktopband (960–1199px).
 *
 * De topbalk was op 960px al exact vol: brand 161 + nav 439 + CTA's 248 + twee
 * gaps van 17px vulden de 883px van .gm-public-wrap tot op de pixel. De
 * taalkeuze is 118px breed, dus zonder deze band liep de balk over en brak
 * "Hall of Fame" naar een tweede regel (topbalk 72 -> 86px).
 *
 * Hieronder staan alleen spatiëringswaarden: de navigatie, de CTA's en de
 * taalkeuze houden hun eigen vormgeving, ze staan in deze band strakker op
 * elkaar. Gemeten resultaat op 960px: scrollWidth == clientWidth (883px),
 * topbalk weer 72px, geen enkele link die afbreekt. Vanaf 1200px is er ruim
 * 150px over en gelden de normale waarden weer.
 */
@media (min-width: 960px) and (max-width: 1199px) {
  .gm-public-topbar__inner { gap: 0.8rem; }

  .gm-public-dnav { gap: 0; }

  /* nowrap: liever strak naast elkaar dan een link die over twee regels valt
     en de hele sticky balk hoger maakt. */
  .gm-public-dnav__link {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    white-space: nowrap;
  }

  /* De actieve-onderstreping volgt de smallere padding. */
  .gm-public-dnav__link.is-active::after {
    left: 0.55rem;
    right: 0.55rem;
  }

  .gm-public-topbar__actions { gap: 0.45rem; }

  .gm-public-topbar__actions .gm-public-btn--desktop {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }
}

@media (min-width: 1200px) {
  .gm-public-hero {
    min-height: clamp(33rem, 74vh, 43rem);
  }

  .gm-public-auth__stage--register {
    /* Desktop: ~560–620px register card */
    grid-template-columns: minmax(0, 1fr) minmax(35rem, 38.75rem);
  }
}

@media (max-width: 767px) {
  .gm-public-hero {
    min-height: clamp(25rem, 64vh, 33rem);
  }

  /* Smalle schermen: dichter op het verlichte centrum inzoomen. */
  .gm-public-hero__media img {
    object-position: 50% 36%;
  }

  .gm-public-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gm-public-hero__actions .gm-public-btn { width: 100%; }

  .gm-public-hero__usps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
  }

  .gm-public-final__actions {
    flex-direction: column;
  }

  .gm-public-final__actions .gm-public-btn {
    width: 100%;
  }

  .gm-public-auth__hero {
    min-height: 0;
    align-items: flex-start;
    padding-top: clamp(1.5rem, 5vw, 2.5rem);
    padding-bottom: 1.35rem;
  }

  .gm-public-auth--register .gm-public-gender__seg {
    display: grid;
    width: min(100%, 18rem);
    max-width: 100%;
  }

  .gm-public-terms__label {
    flex-wrap: wrap;
  }

  .gm-public-auth--register .gm-public-terms__label {
    flex-wrap: wrap;
  }

  .gm-public-auth--register .gm-public-terms__text {
    white-space: normal;
  }

  .gm-public-auth--register .gm-public-auth-grid > .gm-public-field > .gm-public-label {
    white-space: normal;
  }

  .gm-public-auth__copy {
    order: 1;
  }

  .gm-public-auth__panel {
    order: 0;
  }

  .gm-public-auth__features {
    display: none;
  }

  .gm-public-auth__quote {
    display: none;
  }

  .gm-public-auth__lead {
    margin-top: 0.75rem;
    font-size: 0.98rem;
  }

  .gm-public-auth-card {
    padding: 1.25rem 1.15rem 1.4rem;
  }

  .gm-public-auth__stats {
    margin-top: 0.25rem;
    padding-bottom: 0.75rem;
  }

  .gm-public-auth-grid {
    grid-template-columns: 1fr;
  }

  .gm-public-auth__hero {
    padding-bottom: 1rem;
  }
}

/* —— O3 · homepage-breakpoints —— */

@media (min-width: 560px) {
  .gm-public-paths__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .gm-public-dossier__head { padding: 1rem 1.6rem; }
  .gm-public-dossier__rows { padding: 0.5rem 1.6rem 1.5rem; }

  .gm-public-dossier__row {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    padding: 1.15rem 0;
  }

  .gm-public-round__layout {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .gm-public-path { padding: 1.75rem 1.75rem 1.9rem; }
}

/* Vanaf hier is er ruimte voor een horizontale progressielijn. */
@media (min-width: 900px) {
  .gm-public-ladder__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 clamp(1.25rem, 2.5vw, 2.25rem);
  }

  .gm-public-ladder__step { padding: 3.4rem 0 0; }
  .gm-public-ladder__step:last-child { padding-bottom: 0; }

  .gm-public-ladder__step::before {
    left: 2.85rem;
    right: calc(clamp(1.25rem, 2.5vw, 2.25rem) * -1);
    top: 1.1rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .gm-public-ladder__title { line-height: 1.3; }
  .gm-public-ladder__desc { font-size: 0.92rem; }

  /* Band: beeld blijft zichtbaar naast de tekstkolom. */
  .gm-public-band__layout { justify-items: end; }
  .gm-public-band--start .gm-public-band__layout { justify-items: start; }
  .gm-public-band__copy { max-width: 34rem; }
}

/* Tablet en mobiel: de tekst staat over het volle beeld, dus daar is een
   dekkende sluier nodig. De bovenrand blijft open zodat het beeld als
   cinematic kop leesbaar is. */
@media (max-width: 899px) {
  .gm-public-band {
    padding-top: clamp(9.5rem, 40vw, 14rem);
    padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  }

  .gm-public-band__media {
    bottom: auto;
    height: clamp(9rem, 38vw, 13.5rem);
    -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
  }

  .gm-public-family .gm-public-band__media img { object-position: 50% 10%; }
  .gm-public-band--start .gm-public-band__media img { object-position: 50% 34%; }

  .gm-public-band__scrim,
  .gm-public-band--start .gm-public-band__scrim {
    background: linear-gradient(
      180deg,
      rgba(6, 6, 7, 0.4) 0%,
      rgba(6, 6, 7, 0.22) 26%,
      rgba(6, 6, 7, 0.55) 52%,
      #0a0908 78%
    );
  }

  .gm-public-band__ghost { font-size: clamp(4rem, 22vw, 9rem); }
}

/* De footer-sitemap stond onder 768px als één kolom van negen links en werd
   daardoor bijna een volledig scherm hoog. Twee kolommen halen daar ~200px af
   zonder dat er iets verdwijnt. */
@media (max-width: 767px) {
  .gm-public-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.25rem;
    margin-top: 1.5rem;
  }
}

@media (max-width: 559px) {
  .gm-public-pulse { gap: 0.55rem 1.1rem; }
  .gm-public-pulse__list { gap: 0.3rem 1.1rem; }
  .gm-public-round__badge { padding-block: 0.85rem; }
}

/* —— O1: reduced motion ——
 * Functionaliteit blijft identiek; alleen de niet-essentiële beweging
 * (smooth scroll, drawer-slide, hover-translate) valt weg.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .gm-public-body *,
  .gm-public-body *::before,
  .gm-public-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* visibility mag niet mee-versnellen: die delay dekt het sluitvenster af. */
  .gm-public-drawer {
    transition: transform 0.01ms linear, visibility 0s linear 0.01ms !important;
  }

  .gm-public-drawer.is-open {
    transition: transform 0.01ms linear, visibility 0s linear 0s !important;
  }

  .gm-public-btn:hover,
  .gm-public-news-card:hover {
    transform: none;
  }
}

/* ============================================================
 * LIGHT TOKENS — NIET ACTIEF
 *
 * Bewust ontworpen, geen omgekeerde dark-CSS. Uitgangspunt is een warm
 * neutraal gebroken wit (géén geel perkament, géén beige), warm bijna-zwarte
 * tekst, en hetzelfde merkaccent: GunMaffia-rood. Oker wordt brons en blijft
 * secundair detail.
 *
 * Gemeten contrast op #f4f2ef:
 *   tekst    #1a1714  15,97:1
 *   muted-2  #443d37   9,55:1
 *   muted    #6b635b   5,28:1
 *   rood     #b02525   5,99:1   (wit op rood: 6,69:1)
 *   brons    #7a5716   5,87:1
 *   groen    #2f7d24   4,61:1
 *
 * SLAPEND — dit blok is op geen enkele publieke pagina bereikbaar.
 *
 * O3 liet de OS-voorkeur (@media prefers-color-scheme: light) hier
 * automatisch op schakelen. Daardoor kreeg iedere bezoeker met een lichte
 * systeeminstelling een witte/crème GunMaffia-site: precies de presentatie
 * die we niet willen. Die media query is verwijderd.
 *
 * Wat overblijft is uitsluitend :root[data-theme="light"], en niets in de
 * codebase zet dat attribuut — header.php zet expliciet data-theme="dark".
 * De tokens en gemeten contrastwaarden blijven zo bewaard voor het geval er
 * ooit bewust een schakelaar komt, zonder dat er vandaag iets kan omslaan.
 * ============================================================ */

/* Expliciete keuze wint altijd van de OS-voorkeur. */
:root[data-theme="light"] {
  color-scheme: light;

  --gm-p-bg: #f4f2ef;
  --gm-p-bg-elevated: #fbfaf8;
  --gm-p-surface: #ffffff;
  --gm-p-surface-2: #eceae6;
  --gm-p-surface-glass: rgba(249, 248, 246, 0.9);
  --gm-p-bg-deep: #e7e4df;

  --gm-p-text: #1a1714;
  --gm-p-muted: #6b635b;
  --gm-p-muted-2: #443d37;

  --gm-p-gold: #7a5716;
  --gm-p-gold-soft: #6d4d12;
  --gm-p-gold-deep: #a87f2c;
  --gm-p-ink: #ffffff;

  --gm-p-red: #b02525;
  --gm-p-red-hot: #c92d2d;
  --gm-p-red-deep: #8f2020;
  --gm-p-red-press: #8f2020;
  --gm-p-red-hover: #c02b2b;

  --gm-p-online: #2f7d24;
  --gm-p-warn: #8a5a0d;
  --gm-p-danger-text: #9b2020;

  --gm-p-border: #dcd8d2;
  --gm-p-border-strong: #c2bbb2;
  --gm-p-hairline: rgba(122, 87, 22, 0.35);
  --gm-p-shadow: 0 20px 48px rgba(38, 30, 22, 0.14);
  --gm-p-shadow-soft: 0 10px 26px rgba(38, 30, 22, 0.1);
  --gm-p-glow-gold: 0 4px 12px rgba(38, 30, 22, 0.16);
  --gm-p-glow-red: 0 4px 12px rgba(120, 22, 22, 0.22);

  --gm-p-tint: rgba(26, 23, 20, 0.035);
  --gm-p-tint-2: rgba(26, 23, 20, 0.07);
}

/* Onderdelen die in light mode bewust een andere behandeling krijgen dan
   alleen andere tokens. Beide selectorvormen, zodat OS-voorkeur en expliciete
   keuze dezelfde regels raken. */
/* Op een licht vlak leest dezelfde rode radial als een roze waas; daar is
   een hairline sterker dan een gloed. */
:root[data-theme="light"] .gm-public-final {
  background:
    radial-gradient(70% 110% at 50% 0%, rgba(176, 37, 37, 0.045), transparent 60%),
    var(--gm-p-bg);
}

:root[data-theme="light"] .gm-public-ladder {
  background:
    radial-gradient(85% 60% at 12% 0%, rgba(176, 37, 37, 0.035), transparent 60%),
    var(--gm-p-bg);
}

:root[data-theme="light"] .gm-public-body--auth .gm-public-input:-webkit-autofill,
:root[data-theme="light"] .gm-public-body--auth input[type="text"]:-webkit-autofill,
:root[data-theme="light"] .gm-public-body--auth input[type="email"]:-webkit-autofill,
:root[data-theme="light"] .gm-public-body--auth input[type="password"]:-webkit-autofill {
  -webkit-text-fill-color: var(--gm-p-text);
  box-shadow: 0 0 0 1000px var(--gm-p-surface) inset;
}

/* ==========================================================================
   SEO V2 fase 5.5 — cookiemelding + privacy/cookiepagina's
   Compact, niet-blokkerend (geen overlay), beide keuzes gelijkwaardig.
   ========================================================================== */
.gm-cookiebar {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + var(--gm-p-mnav-h, 0px));
  z-index: 60;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--gm-p-border-strong);
  border-radius: var(--gm-p-radius);
  background: var(--gm-p-surface);
  color: var(--gm-p-text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 0.92rem;
  line-height: 1.45;
}
.gm-cookiebar__titel { display: block; margin-bottom: 0.2rem; }
.gm-cookiebar__tekst { margin: 0 0 0.7rem; color: var(--gm-p-muted); }
.gm-cookiebar__tekst a { color: var(--gm-p-gold); }
.gm-cookiebar__acties { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gm-cookiebar__acties .gm-public-btn { flex: 1 1 11rem; min-height: 2.5rem; padding: 0.55rem 1rem; }
@media (min-width: 900px) {
  .gm-cookiebar { bottom: 1rem; }
}

.gm-legal p, .gm-legal li { color: var(--gm-p-muted); line-height: 1.6; }
.gm-legal p strong { color: var(--gm-p-text); }
.gm-legal__todo { color: var(--gm-p-warn, var(--gm-p-gold)); font-style: italic; }
.gm-legal__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0 1rem; }
.gm-legal__tabel { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; }
.gm-legal__tabel th, .gm-legal__tabel td { text-align: left; vertical-align: top; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--gm-p-border); }
.gm-legal__tabel th { color: var(--gm-p-text); font-weight: 600; }
.gm-legal__tabel code { color: var(--gm-p-gold); }
.gm-legal__keuzes { display: grid; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.gm-legal__keuze { border: 1px solid var(--gm-p-border); border-radius: var(--gm-p-radius-sm); padding: 0.75rem 0.9rem; background: var(--gm-p-tint); }
.gm-legal__keuze h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.gm-legal__keuze p { margin: 0; }
.gm-legal__schakel { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; color: var(--gm-p-text); font-weight: 600; }
.gm-legal__schakel input { width: 1.15rem; height: 1.15rem; }
.gm-legal__badge { display: inline-block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--gm-p-online, var(--gm-p-gold)); font-weight: 600; }

/* =====================================================================
 * Social Login V1 F2 — "Doorgaan met Google" (login + OAuth-registratie).
 * Google-branding: donkere variant (#131314 / #8E918F / #E3E3E3) op het
 * donkere publieke thema, lichte variant onder data-theme="light".
 * ===================================================================== */
.gm-public-social { margin-top: 1.1rem; }
.gm-public-social__of {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  color: var(--gm-p-muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gm-public-social__of::before,
.gm-public-social__of::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gm-p-border);
}
.gm-public-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 3.2rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--gm-p-radius-sm);
  border: 1px solid #8e918f;
  background: #131314;
  color: #e3e3e3;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gm-public-social__btn:hover { background: #1f1f20; border-color: #b0b3b1; }
.gm-public-social__btn:focus-visible { outline: 2px solid var(--gm-p-gold, #d6a247); outline-offset: 2px; }
.gm-public-social__icon { flex: 0 0 auto; }
:root[data-theme="light"] .gm-public-social__btn { background: #ffffff; color: #1f1f1f; border-color: #747775; }
:root[data-theme="light"] .gm-public-social__btn:hover { background: #f2f2f2; }
.gm-public-social__uitleg { margin: 0 0 1rem; color: var(--gm-p-muted); font-size: 0.95rem; line-height: 1.5; }
.gm-public-social__modal { width: min(46rem, calc(100vw - 2rem)); height: min(80vh, 44rem); padding: 0.75rem; border: 1px solid var(--gm-p-border); border-radius: var(--gm-p-radius-sm); background: var(--gm-p-bg, #15110e); color: var(--gm-p-text); }
.gm-public-social__modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.gm-public-social__modal iframe { width: 100%; height: calc(100% - 3.4rem); border: 0; border-radius: var(--gm-p-radius-sm); }
.gm-public-social__modal-acties { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.gm-public-social__btn + .gm-public-social__btn { margin-top: 0.65rem; }
.gm-public-social__btn--facebook { background: #1877f2; border-color: #1877f2; color: #ffffff; }
.gm-public-social__btn--facebook:hover { background: #166fe5; border-color: #166fe5; }
:root[data-theme="light"] .gm-public-social__btn--facebook { background: #1877f2; border-color: #1877f2; color: #ffffff; }
:root[data-theme="light"] .gm-public-social__btn--facebook:hover { background: #166fe5; }