/* ═══════════════════════════════════════════════
   UltraDarts marketing site — design tokens
   Kleuren uit de app (globals.css) + structuur
   uit DESIGN-Discord.md style reference
   ═══════════════════════════════════════════════ */
:root {
  /* App-kleuren */
  --bg: #131316;            /* pagina-omgeving: iets dieper dan app-bg */
  --bg-app: #1a1a1f;        /* app bg, gebruikt in mockups */
  --surface: #1f1f24;
  --card: #252528;
  --card2: #2e2e32;
  --elevated: #363639;
  --accent: #e8000d;        /* HET rood — alleen op CTA's en accenten */
  --accent2: #ff3b4f;
  --accent-soft: rgba(232,0,13,0.12);
  --accent-glow: rgba(232,0,13,0.35);
  --accent-hover: #c4000b;  /* hover-tint van .btn-primary, apart themebaar */
  --on-accent: #fff;        /* tekst BOVENOP een volle accent-achtergrond (LIVE-badge,
                                actieve tab, baannummer, primaire knop) — apart van
                                --accent zelf omdat wit op sky-blauw te weinig contrast
                                geeft; de groene clubs-secties zetten 'm op donker. */
  --green: #48bb78;
  --success: #48bb78;
  --success-soft: rgba(72,187,120,0.12);
  --sky: #38bdf8;
  --sky-soft: rgba(56,189,248,0.12);
  --error: #e8000d;
  --error-soft: rgba(232,0,13,0.15);
  --hi: #e8000d;
  --hi2: #ff6b7a;
  --hover: #3f3f43;
  --text: #f2f2f5;
  --text-2: #ababaf;
  --text-3: #9e9ea1;
  --border: rgba(255,255,255,0.06);

  /* Typografie */
  --font-display: 'Big Shoulders Display', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;

  /* Radii (Discord-systeem) */
  --radius-btn: 12px;
  --radius-btn-lg: 16px;
  --radius-card: 16px;
  --radius-panel: 24px;

  --page-max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
/* Het [hidden]-attribuut verliest van elke class die zelf display zet (zelfde
   specificiteit als de browser-default, later in de cascade wint de class) —
   zonder deze regel blijft zo'n element gewoon zichtbaar. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

h1, h2, h3.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.container { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  border-radius: var(--radius-btn); padding: 16px 28px;
  cursor: pointer; border: none; transition: all .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  padding: 19px 32px;
  box-shadow: 0 0 32px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 40px var(--accent-glow); }
/* Groene variant — bonden-CTA's, zelfde grondvorm zonder het rode CTA-rood te lenen. */
.btn-primary.is-sky { background: var(--sky); color: #06202b; box-shadow: 0 0 32px rgba(56,189,248,0.3); }
.btn-primary.is-sky:hover { background: #5cc9fa; box-shadow: 0 6px 40px rgba(56,189,248,0.35); }
.btn-secondary {
  background: #fff; color: #1a1a1f; padding: 15px 28px;
}
.btn-secondary:hover { background: var(--text); transform: translateY(-2px); }
.btn-secondary.is-sky { border: 1.5px solid rgba(56,189,248,0.4); color: var(--sky); background: transparent; }
.btn-secondary.is-sky:hover { background: rgba(56,189,248,0.12); transform: translateY(-2px); }
.btn-ghost {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 18px; font-size: 15px;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn-nav-cta {
  background: var(--accent); color: #fff; border-radius: var(--radius-btn-lg);
  padding: 11px 22px; font-size: 15px; font-weight: 700;
}
.btn-nav-cta:hover { background: #c4000b; box-shadow: 0 0 24px var(--accent-glow); }

/* ─── Navbar ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(19,19,22,0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* ─── Logo-lockup — icoon (echte app-asset, public/logo-icon.png) + LIVE
   gerenderde wordmark in Big Shoulders Display. Geen platte logo-bitmap meer
   (die had een hard-geknipt alfakanaal + was halverwege "ULTRADARTS"
   afgesneden) — tekst in de eigen pagina-font is op elke grootte scherp en
   houdt de verhouding icoon↔tekst overal identiek. */
.logo-lockup { display: inline-flex; align-items: center; gap: 10px; }
.logo-lockup img { display: block; }
.logo-word {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1; color: #fff; white-space: nowrap;
}
.logo-word .accent { color: var(--accent); }
.nav-logo img { height: 34px; width: auto; }
.nav-logo .logo-word { font-size: 21px; }
.nav-links { display: flex; gap: 6px; list-style: none; }
.nav-links a {
  padding: 9px 16px; border-radius: 10px; font-size: 15px; font-weight: 500;
  color: var(--text); transition: background .15s; white-space: nowrap;
}
.nav-links a:hover { background: rgba(255,255,255,0.07); }

/* ─── Hero ─── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(19,19,22,0.55) 35%, transparent 60%),
    linear-gradient(180deg, rgba(19,19,22,0.35) 0%, transparent 25%, transparent 72%, var(--bg) 100%),
    url('ud-hero-dartboard.jpg') center / cover no-repeat;
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent2);
  border: 1px solid rgba(232,0,13,0.3);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 104px; margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.88;
  max-width: 620px;
  margin-bottom: 24px;
}
.hero h1 .accent { color: var(--accent); }
.hero p.lead {
  font-size: 19px; color: var(--text-2); max-width: 460px; margin-bottom: 36px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
/* 1-op-1 dezelfde 3 kaarten als app/page.tsx (de login/landingpagina van de
   echte app, design-v2) — zelfde iconen/kleuren/teksten. Breedte = dezelfde
   max-width als de H1 erboven (.hero h1), op verzoek van Danny: de rij moet
   optisch onder de kop eindigen, niet breder of smaller uitlopen. Padding/
   lettergrootte iets ruimer dan het Tailwind-origineel (p-4/text-xs) omdat
   deze rij hier 620px breed mag worden i.p.v. de smalle max-w-sm/md kolom
   naast het inlogformulier in de app — anders oogt het bij deze breedte
   sparse, hetzelfde soort "te klein voor de ruimte"-punt als de poule-
   kaarten hierboven. */
.hero-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; max-width: 620px; }
.hero-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card); border-radius: var(--radius-card); padding: 20px 14px;
  text-align: center; transition: transform .15s;
}
.hero-card:hover { transform: translateY(-2px); }
.hero-card-ico { width: 44px; height: 44px; }
.hero-card-label { color: var(--text); font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.hero-card-desc { color: var(--text-2); font-size: 12.5px; line-height: 1.3; }
.hero-card-bar { width: 32px; height: 2px; background: var(--accent); border-radius: 2px; margin-top: 2px; }

/* zwevende dartpijl (Discord '3D character float') — echte alfa-transparantie
   (webp, achtergrond weggekeyed op luminantie i.p.v. mix-blend-mode:screen op
   een ondoorzichtige jpg). Die laatste liet drop-shadow over het VOLLEDIGE
   vierkante canvas vallen (jpg heeft geen alfakanaal) → een vage rechthoekige
   waas. Met echte alfa volgt de schaduw nu de werkelijke vorm van de pijl. */
.float-dart {
  position: absolute; z-index: 3;
  width: clamp(180px, 24vw, 340px); aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 28px rgba(232,0,13,0.4));
  animation: floaty 7s ease-in-out infinite;
}
.float-dart.hero-dart { right: 4%; bottom: -4%; transform: rotate(8deg); }
@keyframes floaty {
  0%,100% { translate: 0 0; } 50% { translate: 0 -18px; }
}
/* Live-stip (o.a. .tourn-card .live-note::before) — bij de CSS-extractie naar
   site.css was het GEBRUIK meegegaan maar deze definitie niet, waardoor de
   stip stilstond zonder enige foutmelding. */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

/* ─── Sectie-basis ─── */
section.block { padding: 110px 0; position: relative; }
.section-label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 14px;
}
h2 {
  font-size: clamp(38px, 5vw, 58px); line-height: 0.92; margin-bottom: 20px;
}
.section-intro { color: var(--text-2); font-size: 18px; max-width: 560px; }

/* ─── Feature panels (Discord feature cards) ─── */
.feature-panel {
  border-radius: var(--radius-panel);
  padding: clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-bottom: 96px;
  position: relative; overflow: visible;
}
.feature-panel:last-child { margin-bottom: 0; }
.feature-panel.red {
  background: linear-gradient(135deg, #3a0a10 0%, #6e0410 55%, #a3000f 100%);
}
.feature-panel.charcoal {
  background: linear-gradient(135deg, #1f1f24 0%, #2a2a30 100%);
  border: 1px solid var(--border);
}
.feature-panel.green {
  background: linear-gradient(135deg, #0c2417 0%, #14502e 60%, #1b6e3e 100%);
}
.feature-panel.sky {
  background: linear-gradient(135deg, #0a1e2a 0%, #0d3f5c 60%, #12628a 100%);
}

/* ─── Rood → sky-blauw op groene achtergrond ───────────────────────────
   Rood-op-groen botst; op de clubs-secties (homepage én clubs.html) nemen
   alle accenten (knoppen, TV-mockup: actieve tab/LIVE-badge/baannummer/
   WR-pill/beurt-ring/legs-cijfer/schrijver-icoon) daarom de sky-kleur over.
   Dit werkt via dezelfde --accent-variabele die de rest van de site al
   gebruikt — geen los kopie-blok per component nodig, alles binnen deze
   scope volgt gewoon mee. --on-accent gaat naar donker (#06202b): wit blijft
   te weinig contrast op het lichtere sky-blauw (zie .btn-primary.is-sky,
   die om dezelfde reden al donker gebruikt). */
.section-bleed.is-green,
.feature-panel.green {
  --accent: var(--sky);
  --accent2: var(--sky);
  --accent-soft: var(--sky-soft);
  --accent-glow: rgba(56,189,248,0.35);
  --accent-hover: #5cc9fa;
  --on-accent: #06202b;
}
.section-bleed.is-green .tv-tab-label:hover,
.feature-panel.green .tv-tab-label:hover { border-color: rgba(56,189,248,0.4); }
.section-bleed.is-green .tv2,
.feature-panel.green .tv2 { box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px rgba(56,189,248,0.08); }

/* ─── Full-bleed kleurbanden — clubs/bonden (en desgewenst andere secties)
   krijgen hun kleur nu op sectieniveau i.p.v. in een begrensde kaart, zodat
   de achtergrond edge-to-edge loopt. Zelfde gradients als .feature-panel
   hierboven, zodat de merkkleur consistent blijft ongeacht waar 'm gebruikt
   wordt. Staat er een .feature-panel ALS content-wrapper binnen zo'n band
   (bv. bonden, dat zijn 2-koloms grid + org-chain-graphic behoudt), dan
   strippen we diens eigen kaart-chrome — de sectie zelf tekent de kleur al. */
.section-bleed { padding: 100px 0; }
.section-bleed.is-green { background: linear-gradient(135deg, #0c2417 0%, #14502e 60%, #1b6e3e 100%); }
.section-bleed.is-red { background: linear-gradient(135deg, #3a0a10 0%, #6e0410 55%, #a3000f 100%); }
.section-bleed .feature-panel { padding: 0; margin-bottom: 0; }

/* Bonden — diagonale band i.p.v. een rechte kleurvlak, zodat 'm optisch
   afsteekt van de rechte donkere "mobiel"-sectie erboven. De kleur zit op
   een ::before-laag (met de schuine clip-path) ACHTER de content, niet op
   de sectie zelf — zo kan de diagonale hoek nooit tekst/knoppen wegsnijden,
   wat wél zou gebeuren als de clip-path direct op de content-doos stond.
   De bovenkant snijdt ~10% van de sectiehoogte weg (puntige hoek, extra
   padding-top houdt de kop daar vandaan). De onderkant is EVEN schuin,
   maar i.p.v. daar de donkere paginabodem te laten doorschemeren (dat gaf
   een zwarte hap), loopt de laag ~80px door TOT IN de eind-cta-sectie
   eronder — met een hogere z-index dan die sectie's eigen content, zodat
   de schuine rand als het ware over de volgende sectie heen hangt en de
   twee secties zonder naad in elkaar overlopen. */
.section-bleed.is-sky {
  position: relative; background: none; overflow: visible;
  padding-top: 130px;
}
.section-bleed.is-sky::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + 80px); z-index: 2;
  background: linear-gradient(135deg, #0a1e2a 0%, #0d3f5c 60%, #12628a 100%);
  clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);
}
.section-bleed.is-sky > .container { position: relative; z-index: 3; }
/* Checklist-variant leesbaar op een gekleurde achtergrond — de standaard
   .checklist gaat uit van tekstkleuren die op de donkere paginabodem
   contrasteren, niet op een groen/rood/blauw vlak. */
.checklist.on-color .ico { background: rgba(255,255,255,0.16); color: #fff; }
.checklist.on-color b { color: #fff; }
.checklist.on-color span { color: rgba(255,255,255,0.72); }

.feature-panel h3 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(32px, 4vw, 46px); line-height: 0.94; margin-bottom: 18px;
}
.feature-panel p { color: rgba(255,255,255,0.78); font-size: 17px; max-width: 420px; }
.feature-panel ul {
  list-style: none; margin-top: 24px; display: grid; gap: 12px;
}
.feature-panel ul li {
  display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: rgba(255,255,255,0.85);
}
.feature-panel ul li::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.85;
}
.feature-media { display: flex; justify-content: center; position: relative; min-width: 0; }

/* ─── Telefoon-mockup frame ─── */
.phone {
  width: 290px; background: #0c0c0f;
  border-radius: 42px; padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  flex-shrink: 0;
}
.phone-screen {
  background: var(--bg-app); border-radius: 32px; overflow: hidden;
  aspect-ratio: 9 / 19; position: relative;
  display: flex; flex-direction: column;
}
.phone-notch {
  width: 88px; height: 22px; background: #0c0c0f;
  border-radius: 0 0 14px 14px; margin: 0 auto; flex-shrink: 0;
}
.phone.tilt-l { transform: rotate(-4deg); }
.phone.tilt-r { transform: rotate(4deg); }
.phone.sm { width: 250px; }

/* ── App-UI in mockups (echte app-tokens) ── */
.app-ui { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; font-size: 12px; }
.app-topbar { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.app-topbar .t { font-weight: 700; font-size: 13px; }
.app-topbar .sub { color: var(--text-3); font-size: 10px; }
.badge-bo { background: var(--accent-soft); color: var(--accent2); font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }

/* speler-kaart — opbouw zoals PlayerCard in de app */
.pcard { background: var(--card); border-radius: 14px; padding: 10px 12px; }
.pcard.active { outline: 2px solid var(--accent); background: var(--card2); }
.pcard-top { display: flex; justify-content: space-between; align-items: center; }
.pcard-id { display: flex; align-items: center; gap: 7px; }
.pcard-av {
  width: 21px; height: 21px; border-radius: 50%; background: var(--elevated);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pcard-av svg { width: 11px; height: 11px; color: var(--text-2); }
.pcard.active .pcard-av { outline: 1.5px solid var(--accent); }
.pcard-nm { font-weight: 600; font-size: 12.5px; }
.pcard-avg { font-size: 9.5px; color: var(--text-3); }
.pcard-mid { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 7px; }
.pcard-pills { display: flex; gap: 5px; }
.pill-sl { background: var(--elevated); border-radius: 8px; padding: 4px 9px; text-align: center; }
.pill-sl .l { font-size: 7.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.pill-sl .n { font-size: 12px; font-weight: 700; }
.pcard-score { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; }
.pcard.active .pcard-score { color: var(--accent2); }
.pcard-turns { display: flex; gap: 4px; margin-top: 7px; }
.pcard-turns i { font-style: normal; background: var(--elevated); color: var(--text-2); border-radius: 6px; padding: 2px 7px; font-size: 9px; font-weight: 600; }
.pcard-turns i.hot { color: var(--accent2); }
.pcard-checkout { margin-top: 7px; font-size: 10.5px; font-weight: 700; color: var(--sky); letter-spacing: 0.04em; }

.finish-hint {
  background: var(--sky-soft); border: 1px solid rgba(56,189,248,0.25); color: var(--sky);
  border-radius: 12px; padding: 8px 12px; font-size: 10.5px; font-weight: 600; text-align: center;
}
/* numpad — zoals NumPad in de app: quick-scores + cijfers + Bevestig */
.quickrow { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: auto; }
.quickrow b {
  background: var(--card); border-radius: 9px; padding: 7px 0; text-align: center;
  font-weight: 700; font-size: 11px; color: var(--text-2);
}
.quickrow b.hi { color: var(--sky); }
.quickrow b.red { color: var(--accent2); }
.keypad { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 6px; }
.keypad b {
  background: var(--card); border-radius: 10px; padding: 9px 0; text-align: center;
  font-weight: 600; font-size: 13px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.keypad b svg { width: 14px; height: 14px; }
.keypad b.go { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.keypad b.bust { background: var(--accent-soft); color: var(--accent2); font-size: 11px; font-weight: 700; }

/* Livescore-mockup (telefoon) — BEWUST GEEN bracket/TV-display op mobiel: die
   weergave is er een voor de wandmontage boven de banen en verdwijnt uit de app
   op mobiel (zie #schermen / .tv-switcher hierboven). Dit is de gewone,
   responsieve publieke toernooipagina (spiegelt toernooien.html) — wedstrijden-
   lijst + tussenstand, die op een telefoon wél bestaat. */
.ph-matches { display: flex; flex-direction: column; gap: 6px; }
.ph-match {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  background: var(--card); border-radius: 10px; padding: 8px 10px;
}
.ph-match.is-live { outline: 1.5px solid var(--accent); }
.ph-names { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--text-2); min-width: 0; }
.ph-names b { color: var(--text); font-weight: 700; }
.ph-score { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); font-weight: 800; font-size: 12px; text-align: right; color: var(--text); }
.ph-score span { color: var(--text-2); font-size: 11px; }
.ph-pill { font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.ph-pill.live { background: var(--accent); color: #fff; }
.ph-pill.next { background: var(--sky-soft); color: var(--sky); }
.ph-pill.done { background: var(--elevated); color: var(--text-3); }
.ph-standings { margin-top: 2px; }
.ph-st-head { font-size: 7.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; margin-bottom: 6px; }
.ph-st-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; padding: 4px 2px; font-size: 11px; }
.ph-st-row .rk { color: var(--text-3); font-weight: 700; }
.ph-st-row .nm { font-weight: 600; color: var(--text-2); }
.ph-st-row:first-child .nm { color: var(--text); font-weight: 700; }
.ph-st-row .pt { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* stats mockup — metric-kaarten zoals StatsPanel in de app */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.stat-cell { background: var(--card); border-radius: 12px; padding: 9px 11px; }
.stat-cell .k { color: var(--text-3); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-cell .v { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin-top: 2px; }
.stat-cell .v.hi { color: var(--sky); }
.stat-cell .v.green { color: var(--green); }
.stat-cell .v.red { color: var(--accent2); }
.stat-row { background: var(--card); border-radius: 14px; padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; }
.stat-row .k { color: var(--text-2); font-size: 11px; }
.stat-row .v { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.stat-row .v.hi { color: var(--sky); }
.stat-row .v.green { color: var(--green); }
.stat-row .v.red { color: var(--accent2); }
.stat-bars { background: var(--card); border-radius: 14px; padding: 12px 13px; }
.stat-bars .lbl { font-size: 10px; color: var(--text-3); margin-bottom: 8px; font-weight: 600; }
.sbar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 9px; color: var(--text-2); }
.sbar i { height: 7px; border-radius: 4px; background: var(--accent); display: block; }
.sbar.hi i { background: var(--sky); }

/* toernooien-lijst mockup — tabs + kaarten zoals TournamentCard in de app */
.seg-tabs { display: flex; background: var(--card); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-tabs span { flex: 1; text-align: center; font-size: 9px; font-weight: 600; color: var(--text-2); padding: 5px 0; border-radius: 8px; }
.seg-tabs span.on { background: var(--elevated); color: var(--text); }
.t-card { background: var(--card); border-radius: 12px; padding: 10px 12px; text-align: left; }
.t-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.t-card .nm { font-weight: 600; font-size: 12px; }
.t-card .meta { color: var(--text-3); font-size: 9.5px; margin-top: 3px; }
.t-badge { font-size: 8.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.t-badge.open { background: rgba(72,187,120,0.12); color: var(--green); }
.t-badge.busy { background: var(--accent-soft); color: var(--accent2); }
.t-badge.done { background: var(--elevated); color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════════════
   SCHERMEN-SHOWCASE — TV / tablet / mobiel
   TV-paneel "Banen" hergebruikt de EXACTE klassen + grid-structuur van de
   echte app (app/display/lanes-cards.css, DisplayClient.tsx LanesView) zodat
   de mockup pixel-voor-pixel overeenkomt met mode=lanes. Poule/Bracket/
   Tussenstand/Eindstand volgen dezelfde klassenamen en cqw/cqh-schaalformules
   als resp. pool-cards.css / bracket.css / standings-cards.css /
   finalstandings-cards.css, ingekort tot wat één demo-kaart nodig heeft.
   ═══════════════════════════════════════════════════════════════════════ */
.screens-tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin: 8px 0 28px;
}
/* Vervangt de TV-mockup op mobiel (zie @media max-width:720px hieronder) —
   standaard verborgen, alleen de mobiele media query zet 'm op display:block. */
.schermen-mobile-note {
  display: none; max-width: 420px; margin: 8px auto 32px; padding: 16px 20px;
  border: 1px dashed var(--border); border-radius: 14px;
  color: var(--text-3); font-size: 13.5px; line-height: 1.5;
}
.schermen-mobile-note b { color: var(--text-2); }
.tv-tab-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.tv-tab-label {
  cursor: pointer; padding: 10px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 700; user-select: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
  transition: all .15s ease;
}
.tv-tab-label:hover { border-color: rgba(232,0,13,0.4); color: var(--text); }
.tv-tab-input:focus-visible + .tv-tab-label { outline: 2px solid var(--accent); outline-offset: 2px; }
.tv-switcher:has(#tv-lanes:checked) label[for="tv-lanes"],
.tv-switcher:has(#tv-pool:checked) label[for="tv-pool"],
.tv-switcher:has(#tv-bracket:checked) label[for="tv-bracket"],
.tv-switcher:has(#tv-standings:checked) label[for="tv-standings"],
.tv-switcher:has(#tv-final:checked) label[for="tv-final"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.tv2-panel { display: none; flex: 1; min-height: 0; }
.tv-switcher:has(#tv-lanes:checked) #panel-lanes,
.tv-switcher:has(#tv-pool:checked) #panel-pool,
.tv-switcher:has(#tv-bracket:checked) #panel-bracket,
.tv-switcher:has(#tv-standings:checked) #panel-standings,
.tv-switcher:has(#tv-final:checked) #panel-final { display: flex; }

/* ─── TV-frame (16:9, zoals de echte wandmontage) ─── */
.tv2 {
  width: 100%; max-width: 900px; min-width: 0; margin: 0 auto;
  background: #0c0c0f; border-radius: 20px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px rgba(232,0,13,0.08);
  position: relative;
}
.tv2::after {
  content: ''; position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  width: 180px; height: 34px;
  background: linear-gradient(180deg, #2a2a30, #131316);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  border-radius: 0 0 8px 8px;
}
.tv2-screen {
  background: var(--bg-app); border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 9; display: flex; flex-direction: column;
}
.tv2-topbar {
  flex-shrink: 0; background: var(--card); padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--border);
}
.tv2-topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tv2-topbar .brand img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.tv2-topbar .brand .club { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); font-weight: 700; }
.tv2-topbar .brand .tname { font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv2-topbar .mode { font-size: 12.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.tv2-mode-label { display: none; }
.tv2-topbar .live { flex-shrink: 0; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 800; padding: 4px 11px; border-radius: 5px; letter-spacing: 0.08em; }
.tv2-topbar .live.tv2-badge-done { display: none; background: var(--sky); color: #06202b; }
/* Modus-label + live/afgerond-badge volgen de actieve tab (zelfde :has()-mechaniek als de panelen). */
.tv-switcher:has(#tv-lanes:checked) .tv2-mode-label[data-mode="lanes"],
.tv-switcher:has(#tv-pool:checked) .tv2-mode-label[data-mode="pool"],
.tv-switcher:has(#tv-bracket:checked) .tv2-mode-label[data-mode="bracket"],
.tv-switcher:has(#tv-standings:checked) .tv2-mode-label[data-mode="standings"],
.tv-switcher:has(#tv-final:checked) .tv2-mode-label[data-mode="final"] { display: inline; }
.tv-switcher:has(#tv-final:checked) .tv2-badge-live { display: none; }
.tv-switcher:has(#tv-final:checked) .tv2-badge-done { display: inline-block; }

/* ─── Panel "Banen" — 1-op-1 app/display/lanes-cards.css ─── */
.lanes-viewport { flex: 1; min-height: 0; padding: 20px; display: flex; flex-direction: column; }
.lanes-grid { flex: 1; min-height: 0; display: grid; gap: 14px; align-content: stretch; align-items: stretch; }
.lane-card {
  background: var(--card); border-radius: 20px; position: relative;
  container-type: size; display: grid; grid-template-rows: auto 1fr auto;
  overflow: hidden; min-height: 0; height: 100%;
}
.lane-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--text-3); opacity: 0.2; }
.lane-card.is-playing::before { background: var(--accent); opacity: 1; }
.lane-card.is-done::before { background: var(--text-3); opacity: 0.4; }
.lane-header { display: grid; grid-template-columns: auto 1fr auto; gap: 2cqw; align-items: center; padding: 3.5cqh 3.5cqw 1.5cqh; }
.lane-block { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.lane-block-label { font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); line-height: 1; font-size: min(2.1cqw, 3cqh); }
.lane-block-number {
  background: var(--accent); color: var(--on-accent); border-radius: 22%; font-family: var(--font-display); font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  width: min(12.5cqw, 19cqh); height: min(12.5cqw, 19cqh); font-size: min(8cqw, 13cqh);
}
.lane-meta { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; min-width: 0; }
.lane-round { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: min(6cqw, 8.5cqh); }
.lane-pills { display: inline-flex; align-items: center; gap: 6px; }
.lane-pill { display: inline-block; padding: .25em .85em; border-radius: 999px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--elevated); color: var(--text); border: 1.5px solid transparent; font-size: min(3cqw, 4.2cqh); }
.lane-pill.is-bracket { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.lane-pill.is-bracket-vr { background: var(--elevated); color: var(--text-2); border-color: var(--border); }
.lane-status { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); text-align: right; font-size: min(3.3cqw, 4.5cqh); }
.lane-card.is-playing .lane-status { color: var(--accent); }
.lane-status-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; justify-self: end; }
.lane-body { display: grid; grid-auto-rows: 1fr; gap: 1.3cqh; padding: 1cqh 2.5cqw 1.3cqh; min-height: 0; }
.player-block { container-type: size; display: grid; grid-template-rows: 1fr auto; min-height: 0; background: var(--card2); border-radius: 14px; border-left: 4px solid transparent; }
.player-block.is-active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.player-block.is-loser { opacity: 0.4; }
.player-row { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 13cqw 22cqw; column-gap: 1.5cqw; align-items: center; }
.player-row.has-sets { grid-template-columns: minmax(0, 1fr) 11cqw 11cqw 22cqw; }
.player-info-block { min-width: 0; display: flex; align-items: center; gap: 2cqw; padding-left: 2.5cqw; padding-right: 8px; }
/* --avatar-d = de daadwerkelijk gebruikte diameter (welke van de twee cqw/cqh-
   grenzen ook bindend is). De ring hangt daaraan vast met calc() i.p.v. vaste
   px, anders oogt hij op een kleiner lane-card-canvas (bv. clubs.html's
   TV-preview) onevenredig dik t.o.v. de avatar zelf. */
.player-avatar {
  position: relative; border-radius: 50%; background: var(--elevated);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  --avatar-d: min(8cqw, 36cqh); width: var(--avatar-d); height: var(--avatar-d);
}
.player-avatar.is-leg-starter::after {
  content: ''; position: absolute; inset: calc(var(--avatar-d) * -0.145);
  border: calc(var(--avatar-d) * 0.09) solid var(--accent); border-radius: 50%; pointer-events: none;
}
.player-avatar svg { width: 60%; height: 60%; color: var(--accent); }
.player-name { font-family: var(--font-display); font-weight: 800; color: var(--text); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: min(6cqw, 30cqh); }
.player-name-stack { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 4px; }
.sets-cell { display: none; padding: 0; }
.player-row.has-sets .sets-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.legs-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.cell-label { font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); line-height: 1; margin-bottom: .25em; font-size: min(2.6cqw, 9cqh); }
.cell-value, .remaining-score { font-family: var(--font-display); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; font-size: min(10cqw, 46cqh); }
.cell-value { color: var(--accent); }
.remaining-score { color: var(--text); line-height: 0.9; }
.score-cell { display: flex; align-items: center; justify-content: flex-end; padding-right: 2cqw; min-width: 0; overflow: hidden; }
.winner-label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: min(4cqw, 20cqh); }
.wl-short { display: none; }
@container (max-width: 600px) { .wl-full { display: none; } .wl-short { display: inline; font-size: min(11cqw, 42cqh); } }
.player-stats { flex-shrink: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 1.6cqw; padding: .12em 3.5cqw .18em; border-top: 1px solid var(--border); font-family: var(--font-body); color: var(--text); font-size: min(4.4cqw, 17cqh); }
.stat-label { letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 800; font-size: .85em; }
.stat-value { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lane-card.is-done .player-block.is-winner { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent), 0 0 24px var(--accent-glow); }
.lane-card.is-done .player-block.is-winner .winner-label { color: var(--text); }
.lane-card.is-done .player-block.is-loser { opacity: 1; }
.lane-writer { display: flex; align-items: center; gap: 1.6cqw; padding: .5cqh 3.5cqw; border-top: 1px solid var(--border); min-width: 0; }
.lane-writer-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--accent); }
.lane-writer-icon svg { width: min(4cqw, 5.2cqh); height: min(4cqw, 5.2cqh); }
.lane-writer-label { flex-shrink: 0; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-size: min(2.7cqw, 3.7cqh); }
.lane-writer-name { font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: min(3.8cqw, 5cqh); }

/* ─── Panel "Poule" — 1-op-1 app/display/pool-cards.css ─── */
/* 4 poules in een 2x2-grid — een CSS-grid stretcht zijn items standaard tot
   de volle celhoogte (anders dan flex+percentage-hoogte, zie principe elders
   in dit bestand); .pool-card heeft dus GEEN losse height:100% meer nodig. */
.pool-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px; width: 100%; height: 100%; }
.pool-card { background: var(--card); border: 2px solid var(--accent); border-radius: 16px; overflow: hidden; min-width: 0; min-height: 0; container-type: size; display: grid; grid-template-rows: auto 1fr; width: 100%; }
.pool-card__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 2.5cqh 4cqw; min-width: 0; }
.pool-card__label { font-family: var(--font-display); font-weight: 900; color: var(--text); line-height: 1; font-size: min(5cqw, 8cqh); }
.pool-card__count { font-size: min(3cqw, 5cqh); color: var(--text-3); flex-shrink: 0; }
.pool-card__body { display: grid; grid-template-rows: 1fr; padding: 1.5cqh 3.5cqw; min-height: 0; }
.pool-table { display: grid; grid-template-rows: auto repeat(var(--rows, 5), minmax(0, 1fr)); min-height: 0; height: 100%; width: 100%; }
.pool-table .row { display: grid; grid-template-columns: 5.5cqw minmax(0, 1fr) 7cqw 6.5cqw 6.5cqw 6.5cqw 9cqw; align-items: center; column-gap: .6cqw; min-height: 0; overflow: hidden; }
.pool-table .row.head { color: var(--text-3); font-size: min(2.4cqw, calc(24cqh / var(--rows, 5))); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); padding-bottom: .5cqh; }
.pool-table .cell { display: flex; align-items: center; justify-content: center; font-size: min(4.6cqw, calc(46cqh / var(--rows, 5))); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.pool-table .cell.rank { font-weight: 700; color: var(--text-3); }
.pool-table .cell.name { justify-content: flex-start; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: min(4.9cqw, calc(48cqh / var(--rows, 5))); }
.pool-table .cell.name.clinched { color: var(--success); font-weight: 800; }
.pool-table .cell.pt { font-weight: 900; color: var(--text-2); }
.pool-table .cell.gspl { color: var(--text-3); }
.pool-table .cell.w { font-weight: 900; color: var(--text); }
.pool-table .cell.legs { color: var(--text-2); }

/* ─── Panel "Bracket" — reflecteert app/display/bracket.css (rb-card).
   Winnaars- en verliezersronde naast elkaar, elk met ECHTE grid-row-pyramide-
   centrering (zelfde techniek als bracket.css: een match in ronde r spant
   2^(r+1) half-rijen, startend op 1 + matchIdx * 2^(r+1) — geeft exacte
   geometrische centrering i.p.v. flexbox space-around, dat alleen binnen de
   eigen kolomhoogte centreert en dus NIET de finale-kaart verticaal midden
   tussen de twee halve-finales zet). */
.rb-compact { display: flex; gap: 22px; width: 100%; height: 100%; }
.rb-compact-half { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rb-compact-half.is-wb { flex: 1.7; }
.rb-compact-half.is-lb { flex: 1; padding-left: 22px; border-left: 1px solid var(--border); }
.rb-side-head {
  align-self: center; margin-bottom: 12px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 16px; border-radius: 999px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(232,0,13,0.3);
}
.rb-side-head.is-lb { color: var(--text-3); background: var(--elevated); border-color: var(--border); }
.rb-bracket-row { display: flex; gap: 14px; flex: 1; min-height: 0; }
.rb-wb-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 8px; }
.rb-demo-label { flex-shrink: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); text-align: center; font-size: 11px; }
.rb-col-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(var(--rows), minmax(0,1fr)); }
.rb-cell { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.rb-card { background: var(--card); border-radius: 10px; overflow: hidden; }
.rb-card.is-final { border: 2px solid var(--accent); box-shadow: 0 0 24px var(--accent-glow); }
.rb-card.is-accent { border: 1.5px solid var(--accent); }
.rb-prow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6em; align-items: center; padding: 9px 12px; }
.rb-prow + .rb-prow { border-top: 1px solid var(--border); }
.rb-pname { font-weight: 600; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.rb-pname.is-ph { color: var(--text-3); font-style: italic; font-weight: 500; }
.rb-pname.is-win { font-weight: 800; color: var(--text); }
.rb-pname.is-lose { color: var(--text-3); }
.rb-pscore { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-3); font-size: 14px; }
.rb-pscore.is-win { color: var(--text); }

/* ─── Panel "Tussenstand" — reflecteert app/display/standings-cards.css ─── */
.st-card { background: var(--card); border-radius: 16px; container-type: size; padding: 1.4cqh 1.6cqw; width: 100%; height: 100%; }
.st-grid { height: 100%; display: grid; grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); grid-template-columns: 6cqw minmax(0,1fr) 6cqw 6cqw 6cqw 9cqw 8cqw 22cqw; }
.st-head-cell { display: flex; align-items: end; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; font-size: min(2.6cqw, calc(38cqh / var(--rows, 6))); padding: 0 .6cqw 1.1cqh; border-bottom: 1px solid var(--border); min-height: 0; overflow: hidden; }
.st-cell { display: flex; align-items: center; min-width: 0; min-height: 0; overflow: hidden; padding: 0 .6cqw; border-bottom: 1px solid var(--border); font-size: min(3.6cqw, calc(52cqh / var(--rows, 6))); color: var(--text); }
.st-cell.c, .st-head-cell.c { justify-content: center; text-align: center; }
.st-cell.dim { color: var(--text-3); }
.st-cell.acc { color: var(--accent); font-weight: 800; }
.st-name { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; }
.st-name .nm { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: min(3.8cqw, calc(54cqh / var(--rows, 6))); }
.st-avatar { width: min(4.4cqw, calc(54cqh / var(--rows, 6))); height: min(4.4cqw, calc(54cqh / var(--rows, 6))); flex-shrink: 0; border-radius: 50%; background: var(--elevated); display: flex; align-items: center; justify-content: center; }
.st-avatar svg { width: 60%; height: 60%; color: var(--accent); }
.st-mpill { font-size: min(2.3cqw, calc(30cqh / var(--rows, 6))); padding: .15em .5em; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; border-radius: 4px; white-space: nowrap; }
.st-mpill.is-wr { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }

/* ─── Panel "Eindstand" — 1-op-1 app/display/finalstandings-cards.css.
   Winnaarbanner (trofee-PNG + naam + punten) boven een podium-rij met de
   échte medaille-PNG's (plek 2/3) — geen cijfer-in-cirkel, dat bestaat in de
   echte app niet meer. Sizing is px i.p.v. vw/vh: dit is een vast-formaat
   mockup-scherm, geen volledige viewport. ─── */
.fs-demo { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.fs-winner { background: var(--card); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; }
.fs-winner .ico { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; }
.fs-winner .wcol { min-width: 0; text-align: left; }
.fs-winner .label { text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); font-size: 10.5px; font-weight: 700; margin-bottom: 3px; }
.fs-winner .wname { font-family: var(--font-display); font-weight: 900; color: var(--text); line-height: 1; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-winner .wpts { font-weight: 900; color: var(--accent); line-height: 1; margin-top: 5px; font-size: 14px; }
.fs-winner .wpts .u { font-size: .8em; color: var(--text-3); font-weight: 400; }
.fs-podium { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fs-podium-card { background: var(--card); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.fs-podium-card .ico { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.fs-podium-card .pn { font-weight: 700; color: var(--text); font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-podium-card .pp { font-weight: 900; color: var(--accent); font-size: 14px; white-space: nowrap; }
.fs-podium-card .pp .u { font-size: .8em; color: var(--text-3); font-weight: 400; }
.fs-list { display: flex; flex-direction: column; }
.fs-list .row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.fs-list .row .rk { color: var(--text-3); font-weight: 700; }
.fs-list .row .nm { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-list .row .pt { color: var(--text-2); font-weight: 700; text-align: right; }

/* ─── Tablet-frame (landscape, aan de baan) ─── */
.tablet-frame {
  width: 100%; max-width: 620px; margin: 0 auto;
  background: #0c0c0f; border-radius: 26px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.tablet-screen {
  background: var(--bg-app); border-radius: 14px; overflow: hidden;
  aspect-ratio: 4 / 3; display: flex; flex-direction: column; padding: 14px 18px 12px;
}

/* ─── Score-scherm — headerbalk + PlayerCards + helpers + numpad ───────
   Reflecteert app/game/[id]/page.tsx + PlayerCard.tsx + ScoringHelpers.tsx.
   `.score-cards` = 2 PlayerCards; `.score-cards.stacked` (mobiel, <1024px in
   de echte app) versus de standaard side-by-side layout (≥1024px, tablet). */
.score-topbar { flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 8px; font-size: 11px; color: var(--text-3); }
.score-topbar .back { justify-self: start; color: var(--text-2); }
.score-topbar .bo { justify-self: center; }
.score-topbar .stop { justify-self: end; color: var(--text-3); }
.score-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score-cards.stacked { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }

.scorecard {
  background: var(--card); border: 1px solid var(--elevated); border-radius: 14px;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 10px 12px;
}
.scorecard.is-active { background: var(--elevated); box-shadow: inset 0 2px 0 0 var(--hi), inset 0 -2px 0 0 var(--hi2); }
.scorecard.is-active::before, .scorecard.is-active::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--hi), var(--hi2)); }
.scorecard.is-active::before { left: 0; }
.scorecard.is-active::after { right: 0; }
/* Tablet-variant (side-by-side, ≥1024px in de app): naam BOVENIN vol-breed,
   score GROOT gecentreerd eronder, pills rechtsboven, turns/checkout onderin. */
.scorecard.big-score { justify-content: space-between; }
.scorecard.big-score .sc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.scorecard.big-score .sc-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scorecard.big-score .sc-avg { font-size: 10px; color: var(--text-2); }
.scorecard.big-score .sc-pills { display: flex; gap: 4px; }
.scorecard.big-score .sc-score { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 54px; line-height: 1; color: var(--text); }
.scorecard.big-score .sc-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
/* Mobiel-variant (gestapeld, <1024px in de app): avg/pillsLabel rij, dan
   naam+score+pills op ÉÉN rij, dan turns+checkout. */
.scorecard.row-score .sc-toprow { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.scorecard.row-score .sc-mainrow { display: flex; align-items: center; gap: 8px; }
.scorecard.row-score .sc-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1.6; }
.scorecard.row-score .sc-score { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--text); flex: 1; text-align: center; }
.scorecard.row-score .sc-pills { flex: 0.9; display: flex; justify-content: flex-end; }
.scorecard.row-score .sc-bottomrow { display: flex; justify-content: space-between; margin-top: 4px; }

.sc-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--elevated); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sc-avatar svg { width: 60%; height: 60%; color: var(--text-2); }
.sc-avatar.is-leg-starter { box-shadow: 0 0 0 2px var(--accent); }
.sc-name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-pill-wrap { text-align: center; }
.sc-pill-label { font-size: 8px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.sc-pill { background: var(--elevated); border-radius: 6px; padding: 2px 7px; text-align: center; font-family: var(--font-display); font-weight: 900; color: var(--text); font-size: 11px; }
.sc-turns { display: flex; gap: 4px; }
.sc-turns span { background: var(--elevated); color: var(--text-2); border-radius: 5px; padding: 1px 6px; font-size: 9px; font-weight: 600; }
.sc-checkout { display: flex; gap: 6px; font-size: 9.5px; font-weight: 700; color: var(--sky); }

/* ScoringHelpers + NumPad — gedeeld door tablet + mobiel */
.mock-helpers { flex-shrink: 0; margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.mock-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.mock-quick button, .mock-util button { border: none; border-radius: 8px; background: var(--elevated); color: var(--text-2); font-family: var(--font-body); font-weight: 700; font-size: 11px; padding: 6px 0; cursor: default; }
.mock-quick button.hi { color: var(--sky); background: rgba(56,189,248,0.08); }
.mock-quick button.red { color: var(--accent); background: rgba(232,0,13,0.08); }
.mock-util { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.mock-util button.bust { color: var(--accent); background: var(--error-soft); }
.mock-numpad { flex-shrink: 0; margin-top: 6px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(4, minmax(0,1fr)); gap: 5px; }
.mock-numpad button { border: none; border-radius: 9px; background: var(--elevated); color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 14px; cursor: default; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
/* GEEN grid-column:span — de echte NumPad (helpersInline=false) heeft in de
   laatste rij drie GELIJKE cellen: ⌫ onder de 7, 0 onder de 8, Bevestig onder
   de 9 (components/game/NumPad.tsx + .numpad-grid in app/globals.css). */
.mock-numpad button.confirm { background: var(--accent); color: #fff; font-family: var(--font-body); font-size: 11px; }
.mock-numpad button svg { width: 14px; height: 14px; }
/* Compacte variant voor de tablet-mockup: de score-cards zijn daar het
   hoofdelement (principe: "groot en van een afstandje leesbaar"), dus het
   cijfergrid krijgt minder ruimte dan op de telefoon-mockup — maar blijft
   WEL zichtbaar, anders lijkt scoren alleen via de snelknoppen te kunnen. */
.mock-numpad--compact { margin-top: 5px; gap: 3px; }
.mock-numpad--compact button { padding: 4px 0; font-size: 11px; border-radius: 7px; }
.mock-numpad--compact button.confirm { font-size: 10px; }

/* ─── Foto-secties (stats & clubs) ─── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.split .photo {
  border-radius: var(--radius-panel); overflow: hidden; position: relative;
  aspect-ratio: 4 / 3;
}
.split .photo img { width: 100%; height: 100%; object-fit: cover; }
.split .photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(19,19,22,0.55) 100%);
}
.checklist { list-style: none; margin-top: 28px; display: grid; gap: 16px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist .ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent2);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.checklist .ico svg { width: 17px; height: 17px; }
.checklist .ico.hi { background: var(--sky-soft); color: var(--sky); }
.checklist .ico.green { background: rgba(72,187,120,0.12); color: var(--green); }
.checklist b { display: block; font-size: 16px; margin-bottom: 2px; }
.checklist span { color: var(--text-2); font-size: 14.5px; }

/* ─── De Reis — kaart (assets/reis-kaart.webp, 2:3 portret) + 6 etappes.
   Sky-400 is HIER de accentkleur (niet rood): de reis is progressie/leren,
   geen actie/CTA — een tweede accent naast rood houdt dat onderscheid ook
   visueel, en voorkomt dat de sectie als "nog een rode CTA-blok" oogt. */
.reis-section { padding-bottom: 0; }
.reis-top { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.reis-map {
  border-radius: var(--radius-panel); overflow: hidden; position: relative;
  aspect-ratio: 2 / 3; box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  border: 1px solid rgba(56,189,248,0.25);
}
.reis-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reis-copy .checklist .ico { background: rgba(56,189,248,0.12); color: var(--sky); }

/* Zes etappe-kaarten. Geen verbindingslijn — de rij van cirkels + de kaart
   erboven maken de route al duidelijk, en een dunne lijn is lastig exact op
   de vertikale kern van de cirkels te centreren over alle breakpoints heen. */
.reis-stops {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin-top: 90px; position: relative;
}
.reis-stop {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px;
}
/* Elke stop reserveert dezelfde kop-hoogte, leeg bij de niet-actieve stops —
   anders duwt de "Jouw niveau nu"-pill ALLEEN bij de huidige stop de foto
   omlaag, en landt .reis-stop-nr (die t.o.v. de foto positioneert) er dan
   middenin i.p.v. op de rand, precies bij de stop waar het oog naartoe gaat. */
.reis-stop-tag {
  height: 22px; display: flex; align-items: center; margin-bottom: 4px;
}
/* Eigen klasse, geen kale `span` — .reis-stop span (verderop, gelijke
   specificiteit) zou 'm anders overschrijven op source-order (zelfde bug als
   de site-brede .filter-panel-les: gelijke specificiteit + latere regel wint). */
.reis-stop-tag-label {
  background: rgba(56,189,248,0.14); color: var(--sky); border: 1px solid rgba(56,189,248,0.35);
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
.reis-stop-img-wrap { position: relative; width: 92px; height: 92px; }
.reis-stop-img-wrap img {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--card); box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: block;
}
.reis-stop-nr {
  position: absolute; bottom: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--elevated); color: var(--text-2);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
.reis-stop b { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 13.5px; letter-spacing: 0.01em; margin-top: 6px; }
.reis-stop span { color: var(--text-3); font-size: 11.5px; line-height: 1.35; max-width: 128px; }
.reis-stop.is-current .reis-stop-img-wrap img { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(56,189,248,0.18), 0 8px 24px rgba(0,0,0,0.4); }
.reis-stop.is-current .reis-stop-nr { background: var(--sky); color: #06202b; }
.reis-stop.is-current b { color: var(--sky); }

/* ─── Bond-structuur — organogram bond → team → speler (GEEN verenigingslaag,
   een team schrijft zich rechtstreeks in bij de bond, zie bonden.html) ─── */
.org-chain { display: flex; flex-direction: column; align-items: stretch; margin-top: 8px; }
.org-node {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px; padding: 14px 20px;
}
.org-node .ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center;
}
.org-node .ico svg { width: 19px; height: 19px; color: #fff; }
.org-node b { display: block; font-size: 15.5px; color: #fff; }
.org-node span { display: block; font-size: 12.5px; color: rgba(255,255,255,0.65); margin-top: 1px; }
.org-connector {
  width: 2px; height: 26px; margin: 0 0 0 33px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.4) 0 4px, transparent 4px 9px);
}

/* ─── Game modes strip ─── */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.mode-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 30px 28px;
  transition: transform .2s, border-color .2s;
}
.mode-card:hover { transform: translateY(-4px); border-color: rgba(232,0,13,0.35); }
.mode-card .ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  background: var(--accent-soft); color: var(--accent2);
  display: flex; align-items: center; justify-content: center;
}
.mode-card .ico svg { width: 24px; height: 24px; }
.mode-card h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 22px; margin-bottom: 8px; }
.mode-card p { color: var(--text-2); font-size: 14.5px; }

/* ─── Toestellen-trio (telefoon + TV + tablet) ───────────────────────────
   Hergebruikt de tv2/tablet-frame/phone-mockups uit #schermen, nu als een
   overlappende "waaier" op logische onderlinge grootte (telefoon kleinst,
   staande tablet middelgroot, TV — het grootste fysieke scherm — ook hier
   het grootst). Telefoon en tablet zijn los uit de flex-flow gehaald
   (position:absolute, geankerd op het midden van de rij) zodat de TV altijd
   precies gecentreerd blijft, ongeacht hun eigen breedte — anders trekt de
   bredere van de twee het zwaartepunt scheef. Telefoon draait tegen de klok
   in en leunt naar links, tablet draait met de klok mee en leunt naar
   rechts, en ze schuiven symmetrisch een stukje over de TV heen. */
.device-trio {
  /* align-items expliciet zetten is hier geen stijlkeuze maar een bugfix:
     de default (stretch) rekte de TV-bezel op tot de volle min-height
     (620px) terwijl de 16:9-inhoud daarbinnen netjes op zijn eigen ~287px
     bleef staan — een enorme lege balk ONDER het scherm, wat oogde als een
     verticaal uitgerekt TV-display. Met align-items:center krijgt .tv2 zijn
     natuurlijke (aspect-ratio-)hoogte terug en centreert 'm op dezelfde
     denkbeeldige middellijn als telefoon/tablet (die via top:50% werken). */
  position: relative; display: flex; justify-content: center; align-items: center;
  margin-top: 72px; min-height: 620px;
}
.device-trio .tv2 { width: 540px; max-width: 540px; position: relative; z-index: 1; }
.device-trio .lanes-grid { gap: 12px; }

/* `right:50%`/`left:50%` ankert de rand van het toestel op het MIDDEN van
   de rij (niet op de rand van de TV) — de translateX moet dus de halve
   TV-breedte (270px, TV is 540px) overbruggen, min de gewenste overlap
   (100px), anders zakken telefoon/tablet gewoon bovenop het TV-midden i.p.v.
   er net overheen te steken. De maten (TV 540 / tablet 400 / telefoon 280)
   zijn met Playwright doorgemeten: kleiner clipt de scorebord-inhoud in de
   staande tablet/telefoon; deze combinatie is de eerste die vanaf ~1190px
   containerbreedte nul overflow geeft, vandaar de brede fallback hieronder
   voor alles daaronder — die breedte is er domweg niet voor déze compositie.
   `min(…, 82vw)` is een vangnet voor smalle telefoons in diezelfde fallback
   (anders is de 400px-tablet breder dan een 375px-scherm). */
.device-trio .phone {
  position: absolute; top: 50%; right: 50%; z-index: 3;
  width: min(280px, 82vw);
  transform: translateY(-50%) translateX(-170px) rotate(-6deg);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.device-trio .tablet-frame {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: min(400px, 82vw); max-width: min(400px, 82vw);
  transform: translateY(-50%) translateX(170px) rotate(5deg);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
/* Staand — zoals een tablet in een kioskhouder aan de baan, i.p.v. het
   liggende 4:3-frame dat #schermen gebruikt. */
.device-trio .tablet-frame .tablet-screen { aspect-ratio: 3 / 4; }

/* De TV-weergave is gemaakt voor het grote scherm boven de banen — net als
   bij #schermen (zie .tv-switcher hieronder) tonen we 'm niet verkleind op
   mobiel, dat suggereert een weergave die daar niet bestaat. De schuine
   overlap+TV-compositie past pas vanaf ~1200px (container-max-width) —
   daaronder (ook op een niet-gemaximaliseerd laptopvenster, dus niet alleen
   telefoons) gewoon gestapeld en recht, zonder TV. */
@media (max-width: 1200px) {
  .device-trio { flex-direction: column; align-items: center; gap: 32px; min-height: 0; }
  .device-trio .phone,
  .device-trio .tablet-frame { position: static; transform: none; z-index: auto; }
  .device-trio .tv2 { display: none; }
}
/* Op een echt telefoonscherm (<450px) wordt de staande tablet-mockup zelf
   ook smaller dan de portret-inhoud nodig heeft (min. ~370px, zie hierboven)
   — de cijferknoppen mogen dan zoals bij de #schermen-tablet compacter,
   anders klopt de tablet-content niet meer (scorecards clippen). */
@media (max-width: 449px) {
  .device-trio .mock-helpers { margin-top: 3px; gap: 3px; }
  .device-trio .mock-quick button,
  .device-trio .mock-util button { padding: 3px 0; font-size: 9px; }
  .device-trio .mock-numpad { margin-top: 3px; gap: 3px; }
  .device-trio .mock-numpad button { padding: 3px 0; font-size: 10.5px; }
  .device-trio .mock-numpad button.confirm { font-size: 9px; }
}

/* ─── Eind-CTA ─── */
.cta-final {
  text-align: center; padding: 140px 0 150px; position: relative; overflow: hidden;
}
.cta-final::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(232,0,13,0.18), transparent 70%),
    url('ud-triple20-macro-v2.jpg') center 30% / cover no-repeat;
  opacity: 0.22; z-index: 0;
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final h2 { font-size: clamp(48px, 7vw, 84px); }
.cta-final p { color: var(--text-2); font-size: 18px; margin: 18px auto 40px; max-width: 480px; }

/* ─── Footer ─── */
footer {
  background: #0e0e11; border-top: 1px solid var(--border);
  padding: 72px 0 40px;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand .logo-lockup { margin-bottom: 18px; }
.foot-brand img { height: 38px; width: auto; }
.foot-brand .logo-word { font-size: 24px; }
.foot-brand p { color: var(--text-3); font-size: 14px; max-width: 260px; }
.foot-col h5 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent2); margin-bottom: 18px;
}
.foot-col ul { list-style: none; display: grid; gap: 11px; }
.foot-col a { color: var(--text-2); font-size: 14.5px; transition: color .15s; }
.foot-col a:hover { color: var(--text); }
.foot-bottom {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  color: var(--text-3); font-size: 13px;
}

/* ─── Responsive ─── */
@media (max-width: 980px) {
  .feature-panel { grid-template-columns: 1fr; }
  .feature-panel .feature-media { order: 2; }
  .split { grid-template-columns: 1fr; }
  .split .photo { order: -1; }
  .modes { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .device-trio { align-items: center; }
  .reis-top { grid-template-columns: 1fr; }
  .reis-map { order: -1; max-width: 360px; margin: 0 auto; }
  .reis-stops { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .hero { padding-top: 110px; }
  .hero-bg {
    background:
      linear-gradient(180deg, rgba(19,19,22,0.55) 0%, rgba(19,19,22,0.88) 55%, var(--bg) 100%),
      url('ud-hero-dartboard.jpg') center 20% / cover no-repeat;
  }
  /* 3 kolommen blijven staan (zelfde als de bron-component in de app, die ook
     op mobiel grid-cols-3 houdt) — alleen krapper zodat het op ~320-375px
     breedte past zonder cijfers/tekst te laten overlopen. */
  .hero-cards { gap: 10px; }
  .hero-card { padding: 14px 8px; gap: 6px; }
  .hero-card-ico { width: 36px; height: 36px; }
  .hero-card-label { font-size: 12.5px; }
  .hero-card-desc { font-size: 11px; }
  .float-dart.hero-dart { display: none; }
  .phone { width: 250px; }
  .foot-grid { grid-template-columns: 1fr; }
  .reis-stops { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }

  /* De TV-displays (Banen/Poule/Bracket/Tussenstand/Eindstand) zijn functionaliteit
     voor een wandmontage boven de banen — die viewmodus verdwijnt uit de app op
     mobiel. Toon 'm dus niet responsief-verkleind op een telefoon: dat suggereert
     een mobiele weergave die niet bestaat. Tablet (schrijver) en telefoon (speler)
     blijven staan — dat is scoring, geen display. */
  .tv-switcher { display: none; }
  .schermen-mobile-note { display: block; }
  /* Zelfde regel op de clubs.html-TV-preview: geen displays op mobiel. */
  .club-tv-preview { display: none; }
}

/* TV-mockup + tablet-mockup — EIGEN, bredere drempel (900px) dan de algemene
   720px-sitebreakpoint hierboven. Reden: bij `aspect-ratio:16/9` krimpt
   `.tv2-screen` op elke breedte onder ~900px tot minder hoogte dan de
   inhoud nodig heeft — het bracket-paneel liep tussen 721-860px al over de
   kaartrand én de topbar heen (geverifieerd opnieuw na de .rb-compact-
   herbouw: 0 overflow op 900/860/760/730px), en de baan-kaart-tekst
   (cqw/cqh-schaal, die MEE krimpt met de aspect-ratio-
   hoogte) was tussen 721-900px nog wel leesbaar maar veel kleiner dan
   bedoeld. Een vaste `height:460px` vanaf 900px lost beide in één keer op. */
@media (max-width: 900px) {
  /* TV-mockup + tablet-mockup zijn zelf al miniaturen — onder deze drempel
     krimpen ze verder dan hun eigen inhoud comfortabel toelaat. Val terug op
     een gestapelde indeling i.p.v. de desktop-grid uit te knijpen. */
  /* Vaste hoogte (niet min-height): een aantal panelen geeft hun kaart
     `height:100%` door — dat percentage resolvet alleen betrouwbaar tegen
     een VASTE hoogte, niet tegen min-height op een anders auto-hoge flexbox. */
  .tv2-screen { aspect-ratio: auto; height: 460px; }
  .lanes-grid { grid-template-columns: 1fr !important; grid-template-rows: repeat(2, minmax(140px, 1fr)) !important; }
  .lane-card:nth-child(3), .lane-card:nth-child(4) { display: none; }
  /* Modus-tekst in de topbar botst met de clubnaam op smalle breedte — de
     actieve tab-pill boven het scherm zegt al welke modus getoond wordt. */
  .tv2-topbar .mode { display: none; }
}
@media (max-width: 720px) {
  /* Aspect-ratio:4/3 is getuned op 2 kaarten NAAST elkaar; gestapeld op een
     telefoonbreedte heeft de kaart zijn eigen (grotere) hoogte nodig, dus
     laat de hoogte meegroeien met de inhoud i.p.v. het frame te knijpen. */
  .tablet-frame .tablet-screen { aspect-ratio: auto; height: auto; }
  .tablet-frame .score-cards { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; }
  .tablet-frame .scorecard.big-score { min-height: 150px; }
  .tablet-frame .scorecard.big-score .sc-score { font-size: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOERNOOIEN-PAGINA — publieke livescore (toernooien.html)
   ═══════════════════════════════════════════════════════════════════════ */
.page-hero { padding: 150px 0 70px; text-align: center; }
.page-hero h1 { font-size: clamp(38px, 5.5vw, 64px); line-height: 0.95; margin: 0 auto 18px; max-width: 920px; }
.page-hero p.lead { margin: 0 auto; max-width: 560px; }

/* Filtertabs — zelfde radio+label :has()-mechaniek als de schermen-tabs.
   .list-switcher heeft zelf geen stijl nodig, alleen de :has()-ankerrol. */
.filter-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 36px 0 8px; }
.list-switcher:has(#f-live:checked) label[for="f-live"],
.list-switcher:has(#f-soon:checked) label[for="f-soon"],
.list-switcher:has(#f-done:checked) label[for="f-done"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.filter-panel { display: none; }
.list-switcher:has(#f-live:checked) #fpanel-live,
.list-switcher:has(#f-soon:checked) #fpanel-soon,
.list-switcher:has(#f-done:checked) #fpanel-done { display: grid; }

/* Toernooikaarten-grid */
/* GEEN `display` hier — .filter-panel bepaalt zichtbaarheid (display:none,
   omgezet naar grid door de :has()-regel hierboven). Zelfde specificiteit +
   latere source-order zou anders .filter-panel's display:none altijd verslaan
   en alle 3 de tabbladen permanent tonen. */
.tourn-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.tourn-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 22px 24px; text-align: left; transition: border-color .15s, transform .15s;
}
.tourn-card:hover { border-color: rgba(232,0,13,0.35); transform: translateY(-3px); }
.tourn-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.tourn-card .club-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.tourn-card .club-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.tourn-card h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 21px; line-height: 1.05; }
.tourn-card .live-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--accent2); }
.tourn-card .live-note::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; flex-shrink: 0; }
.tourn-card .live-note.dim { color: var(--text-3); }
.tourn-card .live-note.dim::before { display: none; }

/* Type-label (competitie/ranking/recreatief) + verrijkte meta-rij op de kaart */
.tc-type {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.tc-type.is-recreatief { background: var(--elevated); color: var(--text-2); }
.tc-type.is-ranking { background: rgba(56,189,248,0.12); color: var(--sky); }
.tc-type.is-competitie { background: rgba(72,187,120,0.12); color: var(--green); }
.tc-meta-row { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.tc-meta-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); }
.tc-meta-item svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Wedstrijden-lijst binnen een geselecteerd toernooi */
.match-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
/* Score- en pill-kolom op VASTE breedte i.p.v. `auto` — elke .match-row is een
   eigen grid, dus bij `auto` schaalde de score-kolom mee met de breedte van de
   pill ERACHTER (een lange pill zoals "Zo aan de beurt" duwde de 1fr-namen-
   kolom smaller, en daarmee de score-kolom een heel eind naar links t.o.v. een
   rij met een korte pill zoals "Afgerond") — de cijfers verspringen daardoor
   per rij. Met 2 vaste tracks staat de score bij elke rij op exact dezelfde
   x-positie, en met ruimte gereserveerd voor de langste pill staat de score
   ook duidelijk los van de rand i.p.v. ertegenaan geplakt. */
.match-row { display: grid; grid-template-columns: 1fr 54px 190px; align-items: center; gap: 18px; padding: 16px 22px; }
.match-row + .match-row { border-top: 1px solid var(--border); }
.match-row.is-live { background: var(--accent-soft); }
.match-row .names { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
/* Eén speler per rij: naam + (indien bekend) diens gemiddelde als korte
   context — anders een streepje. Zonder dit was de rij alleen 2 kale namen. */
.match-row .mp { display: flex; align-items: baseline; gap: 8px; font-weight: 600; min-width: 0; }
.match-row .mp b { font-weight: 700; }
.match-row .mp-avg { font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.match-row .score { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-align: right; white-space: nowrap; }
.match-row .score span { display: block; line-height: 1.3; }
/* justify-self:end i.p.v. de kolom laten stretchen — anders vult een korte
   pill ("Afgerond") de volle 190px-track met achtergrondkleur i.p.v. zich
   naar z'n eigen tekstbreedte te knijpen. */
.match-row .pill { justify-self: end; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.match-row .pill.live { background: var(--accent); color: #fff; }
.match-row .pill.done { background: var(--elevated); color: var(--text-3); }
.match-row .pill.next { background: var(--sky-soft); color: var(--sky); }

/* Wedstrijdpagina — live stand + statistieken */
.match-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: clamp(24px, 4vw, 44px); }
.match-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.match-detail-head .tag { color: var(--text-3); font-size: 13px; }
.md-players { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.md-player { text-align: center; }
.md-player .av { width: 56px; height: 56px; border-radius: 50%; background: var(--elevated); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.md-player .av svg { width: 28px; height: 28px; color: var(--accent); }
.md-player .nm { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.md-player .sc { font-family: var(--font-display); font-weight: 900; font-size: 56px; color: var(--text); margin-top: 10px; line-height: 1; }
.md-player.is-active .sc { color: var(--accent2); }
.md-player .legs { color: var(--text-3); font-size: 13px; margin-top: 6px; }
.md-vs { text-align: center; color: var(--text-3); font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.md-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.md-stats .cell { background: var(--card); border-radius: 12px; padding: 14px 16px; text-align: center; }
.md-stats .cell .k { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.md-stats .cell .v { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin-top: 4px; }
.md-stats .cell .v.hi { color: var(--sky); }
.md-stats .cell .v.red { color: var(--accent2); }

/* ─── Toernooi-detailpagina (toernooi-detail.html) ─── */
.td-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.td-facts {
  display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 28px;
  padding: 22px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.td-fact { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-2); }
.td-fact svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.td-fact b { color: var(--text); font-weight: 700; }
/* Primaire waarde + los label i.p.v. "Waarde, secundair" — een komma ná witte
   bold-tekst met grijze tekst erachter oogt als een afgebroken zin. Het label
   maakt in één oogopslag duidelijk dat het 2 losse velden zijn. */
.td-fact-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* text-2 i.p.v. text-3: op deze kleine bold letters (11.5px) gaf text-3 op
   --elevated een contrastratio van 4,51:1 — net over de AA-grens van 4,5:1,
   te weinig marge voor tekst op deze grootte. */
.td-fact-tag { background: var(--elevated); color: var(--text-2); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }

/* Klikbare wedstrijdrij + live-tussenstand-lijst, zelfde grondvorm als .match-row */
a.match-row { transition: background .15s; }
a.match-row:hover { background: var(--elevated); }
a.match-row.is-live:hover { background: var(--accent-soft); }

/* ─── Poule-overzicht (toernooi-detail.html) ───────────────────────────────
   Publieke, responsieve variant van de TV-poulekaart (.pool-card in de
   Schermen-sectie): zelfde look — accent-rand, kop-rij, cijfer-kolommen
   rechts geclusterd — én dezelfde aanpak als de TV-CSS: tekst/kolommen
   schalen met de kaart via container-query-eenheden i.p.v. een vaste px-
   grootte (die op een brede 2-koloms kaart ~560px breed onnodig klein
   oogde). `container-type: inline-size` i.p.v. `size`: deze sectie heeft
   geen vaste hoogte (geen 16:9 tv2-frame eromheen), dus alleen BREEDTE
   queryen — dat werkt wél zonder dat de kaart een expliciete hoogte nodig
   heeft (in tegenstelling tot cqh, dat een vaste containerhoogte vereist).
   `clamp()` op elk lettertype zet een vloer + plafond zodat het bij een
   smalle mobiele kaart niet te klein wordt en bij een brede kaart niet
   buitensporig groot. Bij N poules: 2 naast elkaar, elke volgende rij
   eronder (2x2 bij 4 poules) — @media hieronder stapelt ze op mobiel/tablet. */
.poule-overzicht { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.poule-kaart { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius-card); overflow: hidden; container-type: inline-size; }
.poule-kaart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: clamp(12px, 3cqw, 18px) clamp(16px, 4.5cqw, 24px); border-bottom: 1px solid var(--border); }
.poule-kaart__label { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(17px, 4.2cqw, 23px); color: var(--text); }
.poule-kaart__count { font-size: clamp(11px, 2.6cqw, 13px); color: var(--text-3); white-space: nowrap; }
.poule-rij {
  display: grid;
  grid-template-columns: minmax(18px,6cqw) minmax(0,1fr) minmax(28px,8cqw) minmax(24px,7cqw) minmax(24px,7cqw) minmax(46px,13cqw);
  align-items: center; column-gap: 1.5cqw;
  padding: clamp(8px, 2.2cqw, 13px) clamp(16px, 4.5cqw, 24px);
}
.poule-rij + .poule-rij { border-top: 1px solid var(--border); }
.poule-rij.head { padding-top: clamp(10px, 2.5cqw, 15px); padding-bottom: clamp(6px, 1.6cqw, 9px); color: var(--text-3); font-size: clamp(10px, 2.2cqw, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.poule-cel { display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-size: clamp(13px, 3.2cqw, 16.5px); white-space: nowrap; overflow: hidden; }
.poule-cel.rank { justify-content: flex-start; font-weight: 700; color: var(--text-3); }
.poule-cel.naam { justify-content: flex-start; font-weight: 600; color: var(--text); text-overflow: ellipsis; font-size: clamp(13.5px, 3.4cqw, 17px); }
.poule-cel.gspl { color: var(--text-3); }
.poule-cel.v { color: var(--text-2); }
.poule-cel.w { font-weight: 900; color: var(--text); }
/* Legsaldo als hoofdcijfer (+/-), de ruwe voor-tegen-verhouding er klein
   onder — communiceert het saldo direct i.p.v. dat de kijker het zelf uit
   2 losse kolommen moet aftrekken. */
.poule-cel.legs { flex-direction: column; gap: 1px; }
.poule-cel.legs b { font-weight: 800; color: var(--text); font-size: clamp(13px, 3.2cqw, 16.5px); }
.poule-cel.legs small { font-weight: 500; color: var(--text-3); font-size: clamp(10px, 2.2cqw, 12px); }
/* Drempel bij 900px i.p.v. de algemene 720px-sitebreakpoint: tussen 721 en
   900px zou een geforceerde 2-koloms indeling elke kaart tot ~340px
   uitknijpen (net zo krap als vóór deze responsive-pass), terwijl 1 kolom
   op die breedte juist ruim past. Zelfde afweging als de TV/tablet-mockup
   verderop in dit bestand (zie de @media(max-width:900px)-comment daar). */
@media (max-width: 900px) {
  .poule-overzicht { grid-template-columns: 1fr; }
}

/* Statistieken-tabel onderaan de toernooipagina */
.leaderboard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.lb-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 15px 22px; }
.lb-row + .lb-row { border-top: 1px solid var(--border); }
.lb-row .k { color: var(--text-2); font-weight: 600; font-size: 14px; }
.lb-row .nm { font-weight: 700; font-size: 14px; text-align: right; }
.lb-row .v { font-family: var(--font-display); font-weight: 800; font-size: 19px; text-align: right; min-width: 56px; }
.lb-row .v.hi { color: var(--sky); }
.lb-row .v.red { color: var(--accent2); }

@media (max-width: 980px) {
  .tourn-grid { grid-template-columns: 1fr 1fr; }
  .md-players { grid-template-columns: 1fr; }
  /* Eén kolom: VS hoort TUSSEN de spelers, niet erna — de DOM-volgorde is
     speler/VS/speler maar zonder expliciete order wint "eerst in de DOM"
     niet automatisch de juiste plek zodra .md-vs alleen zelf order krijgt. */
  .md-vs { order: 1; }
  .md-player:last-child { order: 2; }
}
@media (max-width: 640px) {
  .tourn-grid { grid-template-columns: 1fr; }
  .match-row { grid-template-columns: 1fr; text-align: left; }
  .match-row .score { text-align: left; }
  .md-stats { grid-template-columns: 1fr 1fr; }
}

/* ─── Contactpagina ─── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contact-intro .hero-eyebrow { margin-bottom: 20px; }
.contact-direct {
  margin-top: 36px; padding: 18px 22px; background: var(--card); border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.contact-direct span { color: var(--text-2); font-size: 14.5px; font-weight: 600; }
.contact-direct a { color: var(--accent); font-weight: 800; font-size: 16px; }
.contact-direct a:hover { color: var(--accent-hover); }

.contact-form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 36px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--text); }
.field label .opt { color: var(--text-3); font-weight: 500; }
.field input, .field select, .field textarea {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-btn);
  padding: 13px 16px; color: var(--text); font-family: var(--font-body); font-size: 15px;
  transition: border-color .15s;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9ea1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.field textarea { resize: vertical; min-height: 110px; font-family: var(--font-body); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.contact-form-note { color: var(--text-3); font-size: 12.5px; text-align: center; margin-top: -4px; }
.contact-form-error { color: var(--error); background: var(--error-soft); border-radius: var(--radius-btn); padding: 12px 16px; font-size: 13.5px; font-weight: 600; text-align: center; }
.btn[disabled] { opacity: .7; cursor: not-allowed; }

.contact-success {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel);
  padding: 56px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.contact-success .ico {
  width: 56px; height: 56px; border-radius: 50%; background: var(--success-soft); color: var(--success);
  display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
.contact-success .ico svg { width: 28px; height: 28px; }
.contact-success h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; text-transform: uppercase; }
.contact-success p { color: var(--text-2); font-size: 15px; max-width: 360px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form-wrap { padding: 28px 22px; }
}