/* ==========================================================================
   Scorivio — gedeelde stijlen (platform-breed)
   Spel-specifieke stijlen horen in de betreffende module in games/.
   ========================================================================== */

/* ==========================================================================
   Thema's
   --------------------------------------------------------------------------
   Alle kleuren in het platform en in de spelmodules lopen via deze variabelen.
   Een thema is dus niets meer dan een andere set waarden; er hoeft nergens
   anders iets aangepast te worden.

   Een thema toevoegen: kopieer een blok hieronder, geef het een eigen
   data-theme-naam, en voeg hem toe aan de THEMES-lijst in platform.js.

   --gold      accentkleur (knoppen, totalen, nadruk)
   --felt-1/2  kaarten en panelen (verloop van licht naar donker)
   --bg-1/2/3  paginaachtergrond (verloop van boven naar onder)
   --line      randjes en scheidingslijnen
   ========================================================================== */

/* Casinogroen — het origineel */
:root,
[data-theme="groen"] {
  --ink: 255,255,255;   /* basis voor alle tekst en doorzichtige vlakken */
  --on-gold: #3A2A00;   /* tekst op de accentkleur */
  --ok: #7ee2a8;        /* geslaagd / online */
  /* info/red-text hier iets lichter dan de "logische" tint: op --felt-1
     (#0F5132) haalden de oorspronkelijke waarden geen WCAG AA-contrast
     (info stond zelfs op 2.04:1) — zie scripts/contrast-check.js. */
  --info: #9EBACC;      /* neutrale nadruk */
  --gold: #F4D35E;
  --gold-dark: #D9A62E;
  --felt-1: #0F5132;
  --felt-2: #0B3D26;
  --bg-1: #0F5132;
  --bg-2: #062E1C;
  --bg-3: #041F13;
  --red: #C1121F;
  --red-text: #FF988F;
  --line: rgba(var(--ink),0.1);
}

/* Middernacht — koel en rustig, prettig bij weinig licht */
[data-theme="middernacht"] {
  --ink: 255,255,255;   /* basis voor alle tekst en doorzichtige vlakken */
  --on-gold: #06283D;   /* tekst op de accentkleur */
  --ok: #6EE7B7;        /* geslaagd / online */
  --info: #60A5FA;      /* neutrale nadruk */
  --gold: #7DD3FC;
  --gold-dark: #38A3D1;
  --felt-1: #1E293B;
  --felt-2: #172033;
  --bg-1: #1E293B;
  --bg-2: #111827;
  --bg-3: #080C14;
  --red: #DC2626;
  --red-text: #FCA5A5;
  --line: rgba(var(--ink),0.1);
}

/* Bordeaux — warm en donker, sfeer van een oude kaartclub */
[data-theme="bordeaux"] {
  --ink: 255,255,255;   /* basis voor alle tekst en doorzichtige vlakken */
  --on-gold: #3B1119;   /* tekst op de accentkleur */
  --ok: #86EFAC;        /* geslaagd / online */
  --info: #F0A6B8;      /* neutrale nadruk */
  --gold: #E8B4A0;
  --gold-dark: #C98B72;
  --felt-1: #4A1E28;
  --felt-2: #35141C;
  --bg-1: #4A1E28;
  --bg-2: #2A0E14;
  --bg-3: #1A070B;
  --red: #E11D48;
  --red-text: #FDA4AF;
  --line: rgba(var(--ink),0.11);
}

/* Perkament — licht thema, fijn bij fel daglicht */
[data-theme="perkament"] {
  --ink: 30,25,14;      /* donkere inkt op licht papier */
  --on-gold: #FFFDF7;   /* tekst op de accentkleur */
  --ok: #15803D;        /* geslaagd / online */
  --info: #1D4ED8;      /* neutrale nadruk */
  --gold: #8A6A1F;
  --gold-dark: #6B5115;
  --felt-1: #FFFDF7;
  --felt-2: #F5EFE0;
  --bg-1: #FAF6EC;
  --bg-2: #F0E9D8;
  --bg-3: #E6DCC5;
  --red: #B91C1C;
  --red-text: #9F1239;
  --line: rgba(var(--ink),0.16);
}

/* Nacht — bijna zwart, maximaal contrast en zuinig met accukleuren */
[data-theme="nacht"] {
  --ink: 255,255,255;   /* basis voor alle tekst en doorzichtige vlakken */
  --on-gold: #2A1C00;   /* tekst op de accentkleur */
  --ok: #6EE7B7;        /* geslaagd / online */
  --info: #60A5FA;      /* neutrale nadruk */
  --gold: #FBBF24;
  --gold-dark: #D19510;
  --felt-1: #1C1C1E;
  --felt-2: #141416;
  --bg-1: #18181A;
  --bg-2: #0C0C0E;
  --bg-3: #000000;
  --red: #DC2626;
  --red-text: #FCA5A5;
  --line: rgba(var(--ink),0.13);
}

/* Bos — gedempt groen-blauw, zachter dan het casinogroen */
[data-theme="bos"] {
  --ink: 255,255,255;   /* basis voor alle tekst en doorzichtige vlakken */
  --on-gold: #12301C;   /* tekst op de accentkleur */
  --ok: #A7F3D0;        /* geslaagd / online */
  --info: #7DD3FC;      /* neutrale nadruk */
  --gold: #A3D9A5;
  --gold-dark: #6FB073;
  --felt-1: #22403C;
  --felt-2: #182E2B;
  --bg-1: #22403C;
  --bg-2: #14211F;
  --bg-3: #0B1413;
  --red: #C1121F;
  --red-text: #FF8A80;
  --line: rgba(var(--ink),0.1);
}

/* Catalogus-weergave — altijd licht/crème, ongeacht het gekozen kleurthema.
   Zodra je een sessie of statistieken opent verdwijnt deze class weer en
   gelden gewoon de kleuren van het gekozen thema (zie enterSession/
   openStats/leaveSession/closeStats in platform.js). Kopie van de al
   beproefde Perkament-kleuren, dus geen nieuw contrast-risico: alles wat nu
   al via --ink/--gold werkt (inclusief de zwevende account-widget, die als
   sibling van #catalogScreen niet via een container-override bereikt kan
   worden, wél via deze html-brede class) wordt hierdoor automatisch leesbaar. */
html.catalog-view {
  --ink: 30,25,14;
  --on-gold: #FFFDF7;
  --ok: #15803D;
  --info: #1D4ED8;
  --gold: #8A6A1F;
  --gold-dark: #6B5115;
  --felt-1: #FFFDF7;
  --felt-2: #F5EFE0;
  --bg-1: #FAF6EC;
  --bg-2: #F0E9D8;
  --bg-3: #E6DCC5;
  --red: #B91C1C;
  --red-text: #9F1239;
  --line: rgba(var(--ink),0.16);
}

/* ---- Aanpassingen voor lichte thema's ----------------------------------
   Dankzij --ink klopt alle tekst en doorzichtigheid nu vanzelf. Hier blijft
   alleen staan wat een licht thema écht anders nodig heeft. */
[data-theme="perkament"] {
  color-scheme: light;
}
/* Avatars houden een verzadigde achtergrondkleur, dus daar blijft de tekst wit */
[data-theme="perkament"] .avatar,
[data-theme="perkament"] .presence-avatar,
[data-theme="perkament"] .identity-avatar { color: #fff; }

/* Op papier oogt een zware slagschaduw vuil; zachter en warmer */
[data-theme="perkament"] .game-card,
[data-theme="perkament"] .stat-card,
[data-theme="perkament"] .f7-card,
[data-theme="perkament"] .bb-player,
[data-theme="perkament"] .kj-team-card,
[data-theme="perkament"] .tc-progress-card { box-shadow: 0 2px 8px rgba(60,45,20,0.13); }
[data-theme="perkament"] .modal-box,
[data-theme="perkament"] .win-box,
[data-theme="perkament"] .db-pad { box-shadow: 0 12px 40px rgba(60,45,20,0.25); }

/* De grote accentcijfers zijn beter leesbaar in de donkere accenttint */
[data-theme="perkament"] .stat-value,
[data-theme="perkament"] .card-total-compact,
[data-theme="perkament"] .bb-total,
[data-theme="perkament"] .kj-total,
[data-theme="perkament"] .tc-progress-big,
[data-theme="perkament"] .dbk-head-total { color: var(--gold-dark); }

* { box-sizing: border-box; }

/* ==========================================================================
   Toegankelijkheid — platformbreed (P2.11)
   ========================================================================== */

/* Tekst die alleen voor schermlezers bedoeld is (bv. een modal-titel die
   visueel overbodig is, maar wel nodig voor aria-labelledby). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Zichtbare focusring voor toetsenbordnavigatie. Bewust via box-shadow i.p.v.
   outline: heel veel spelmodules zetten "outline: none" op hun invoervelden
   (zonder alternatief), en box-shadow is een ander CSS-veld dat daardoor
   nooit overschreven wordt — dus deze regel werkt overal, ook binnen
   spelmodules, zonder dat elk spelbestand aangepast hoeft te worden.
   :focus-visible (niet :focus) zodat een muisklik geen ring toont, alleen
   toetsenbordnavigatie. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--ink), 0.4), 0 0 0 5px var(--gold);
  border-radius: 4px;
}

/* Spelers die animatie liever beperkt houden (bv. confetti, kaart-animaties,
   pulserende koppel-melding) — respecteer dat overal. launchConfetti() in
   platform.js checkt dit ook zelf nog eens vóór het opbouwen van het canvas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  /* Positioneringscontext voor #bgWatermark hieronder — zonder dit zou een
     position:absolute watermerk relatief aan de hele pagina (viewport)
     berekend worden i.p.v. aan body, en dus niet de volle scrollhoogte
     krijgen op een lange pagina. */
  position: relative;
  background: radial-gradient(ellipse at top, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  background-image:
    radial-gradient(ellipse at top, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%),
    repeating-linear-gradient(45deg, rgba(var(--ink),0.015) 0px, rgba(var(--ink),0.015) 1px, transparent 1px, transparent 26px);
  font-family: 'Space Grotesk', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 60px;
}

/* <main id="mainContent"> is bij P2.11 toegevoegd als landmark-omhulsel om de
   vier schermen heen. Daarmee werd het ook de directe flex-child van body —
   en die had, in tegenstelling tot de .wrap-divs die er vóór die wijziging
   zelf stonden, geen enkele breedte-opgave. Een flex-item zonder expliciete
   breedte krijgt in de kruisrichting (hier: horizontaal, want body is een
   kolom-flexbox) fit-content in plaats van de volle containerbreedte. De
   inhoud kon de pagina dus zelf breder maken dan het scherm, en omdat body
   `align-items: center` gebruikt werd die te brede inhoud gecentreerd: de
   overloop viel dan links én rechts buiten beeld, en de linkerkant is niet
   weg te scrollen. Op mobiel zoomde de pagina daardoor uit en viel een deel
   weg (en de `max-width: 480px`-regels verderop sloegen niet meer aan, omdat
   de layout-viewport breder werd dan 480px).
   width:100% + min-width:0 geeft main dezelfde, expliciete breedte die de
   .wrap-divs hiervoor al hadden — inhoud kan hem nooit meer oprekken.

   En let op de flex-regels erbij: vóór P2.11 waren de .wrap-divs zélf de
   flex-children van body, en die centreerde ze met `align-items: center`.
   Zet je main op volle breedte zonder dat over te nemen, dan worden het
   gewone blokken binnen main — en een blok met alleen een max-width plakt
   links tegen de rand in plaats van te centreren. Door main hier dezelfde
   kolom-flexbox te maken, staan de schermen weer precies zoals voorheen. */
main#mainContent {
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
}

.wrap { width: 100%; max-width: 760px; }
/* Catalogus is een blader-raster, geen leeskolom zoals sessie/statistieken —
   die mag breder zijn zodat er meer speltegels naast elkaar passen. */
#catalogScreen { max-width: 1120px; }

/* Op brede desktop-schermen liet 760px veel lege ruimte links en rechts
   staan (zie de kritische opmaakreview) — dat viel vooral op bij lijsten/
   kaarten (toernooien/competities/pubquizzes/sessie/statistieken), die geen
   lopende tekst zijn en dus niet aan een smalle leeskolom-breedte gebonden
   hoeven te blijven zoals echte leestekst dat wel is. 900px is bewust geen
   volle catalogus-breedte: ruim genoeg om de lege randen weg te nemen,
   smal genoeg om nog steeds als één duidelijke kolom te lezen i.p.v. een
   nieuw multi-kolom-ontwerp te forceren op content die daar niet voor
   gebouwd is. */
@media (min-width: 1200px) {
  .wrap { max-width: 900px; }
}

/* De formulier-achtige balkjes bovenin de catalogus (identiteit, mijn
   sessies, sessiecode invoeren, zoeken) gebruiken bewust dezelfde breedte
   als de banner en de speltegel-rijen eronder (.hero-catalog, #gameGrid,
   #gameRows) — anders "knijpt" de pagina in het midden en oogt de layout
   inconsistent. Geen eigen max-width hier, gewoon de volle breedte van
   #catalogScreen (zie hierboven) zoals de rest van de catalogus. */

#confettiCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 51; }

/* Watermerk van speeltekens (dobbelsteen, kaart, pion, puzzelstuk) achter
   alle content — zie de <svg id="bgWatermark"> in index.html. currentColor
   binnen die SVG pikt deze kleur op, dus dit past zich vanzelf aan het
   gekozen thema aan (licht en donker). z-index: -1 houdt 'm achter de
   gewone, niet-gepositioneerde pagina-inhoud. */
#bgWatermark {
  /* Zonder expliciete width/height (niet alleen inset:0) valt een <svg>
     zonder viewBox terug op zijn standaard intrinsieke maat (~300×150px) —
     daardoor stond het watermerk alleen linksboven i.p.v. over de hele
     pagina. absolute (i.p.v. fixed) zodat het meescrollt met de pagina i.p.v.
     aan het scherm vastgeplakt te blijven — zie ook position:relative op
     body hierboven, dat bepaalt dat de volle document-hoogte gebruikt wordt. */
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  /* a11y-decoratief: dit is geen tekstkleur maar currentColor voor de vormen
     in de SVG hierboven. Puur decoratief (aria-hidden), dus de
     tekstcontrast-eis geldt hier niet — scripts/contrast-check.js slaat
     declaraties met deze markering daarom over. */
  color: rgba(var(--ink), 0.045);
}

/* ---- Hero ---- */
.hero { text-align: center; margin-bottom: 24px; position: relative; }
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: rgba(var(--ink),0.8); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 12px; margin-bottom: 4px;
}
.brand-logo {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  margin-bottom: 10px;
}
.brand-mark { flex-shrink: 0; }
.brand-word {
  font-family: 'Fraunces', serif; font-weight: 800; font-size: 42px;
  letter-spacing: -0.01em; color: rgb(var(--ink));
}
h1 {
  font-family: 'Fraunces', serif; font-weight: 900; letter-spacing: -0.02em;
  color: rgb(var(--ink)); font-size: 56px; margin: 0;
}
/* Logo mag prominent zijn; de H1 (hero.title) is ondersteunend eronder,
   dus bewust kleiner dan het merk zelf. */
.hero-catalog h1 { font-size: 24px; }
.sub { color: rgba(var(--ink),0.75); font-size: 14px; margin-top: 6px; line-height: 1.5; }

/* Topsectie als banner i.p.v. los zwevende tekst op de achtergrond — zelfde
   felt-verloop en schaduw als de andere kaarten (.game-card), zodat het bij
   de rest van de site past. */
.hero-catalog {
  background: linear-gradient(160deg, var(--felt-1) 0%, var(--felt-2) 100%);
  border: 1px solid rgba(var(--ink),0.08);
  padding: 36px 24px 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
html.catalog-view .hero-catalog { box-shadow: 0 2px 8px rgba(60,45,20,0.13); }

.round-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: rgba(var(--ink),0.08); border: 1px solid var(--line);
  color: rgba(var(--ink),0.75); font-size: 12px; padding: 5px 14px; border-radius: 999px;
}
.round-badge b { color: var(--gold); }
.badge-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ---- Herbruikbare aftel-timer (fx.mountTimer) — gedeeld door spelmodules met tijdsdruk ---- */
.pf-timer {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: rgba(var(--ink),0.05); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 14px;
}
.pf-timer-display {
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 32px; color: rgb(var(--ink));
  min-width: 62px; text-align: center; font-variant-numeric: tabular-nums;
}
.pf-timer.bijna-op .pf-timer-display { color: var(--red-text); }
.pf-timer.klaar .pf-timer-display { color: var(--red-text); }
.pf-timer.klaar { border-color: rgba(193,18,31,0.4); background: rgba(193,18,31,0.08); }
.pf-timer-btns { display: flex; gap: 8px; }
.pf-timer-btns .mini-btn { padding: 8px 13px; }
@media (max-width: 480px) { .pf-timer-display { font-size: 26px; } }

/* ---- Buttons ---- */
.btn {
  border: none; cursor: pointer; font-family: 'Space Grotesk', sans-serif;
  border-radius: 10px; font-size: 13px; padding: 9px 16px; font-weight: 500;
  transition: filter 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--on-gold); font-weight: 600;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.18);
}
.btn-gold:hover { filter: brightness(1.08); }
.btn-gold:active { box-shadow: 0 0 0 rgba(0,0,0,0.2); transform: translateY(2px) scale(0.98); }
.btn-ghost { background: rgba(var(--ink),0.08); color: rgba(var(--ink),0.8); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(var(--ink),0.14); }
.btn-danger-ghost { background: rgba(193,18,31,0.12); color: var(--red-text); border: 1px solid rgba(193,18,31,0.3); }
.btn-danger-ghost:hover { background: rgba(193,18,31,0.22); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.link-btn {
  background: none; border: none; color: rgba(var(--ink),0.7); font-size: 12px;
  cursor: pointer; text-decoration: underline; font-family: 'Space Grotesk', sans-serif;
}
.link-btn:hover { color: rgba(var(--ink),0.75); }

.like-btn {
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease;
}
.like-btn:hover { transform: scale(1.08); }
.like-btn:active { transform: scale(0.95); }
.like-btn .like-count { font-family: 'Space Grotesk', sans-serif; color: rgba(var(--ink),0.7); }
.like-btn.liked .like-count { color: var(--gold); font-weight: 700; }

.claim-bar {
  align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(244,211,94,0.10); border: 1px solid rgba(244,211,94,0.3); border-radius: 12px;
  padding: 8px 13px; margin-bottom: 14px; font-size: 12.5px;
}
.claim-label { color: rgba(var(--ink),0.65); }
.claim-chip {
  font-size: 11.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(244,211,94,0.5); background: rgba(244,211,94,0.18); color: rgb(var(--ink));
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
}
.claim-chip:hover { background: rgba(244,211,94,0.32); }

/* ---- Koppel-nudge: opvallende variant van de claim-bar, zie renderClaimBar() ---- */
.claim-bar.nudge {
  align-items: flex-start; gap: 13px; padding: 15px 16px 15px 15px; border-radius: 15px;
  background: linear-gradient(160deg, rgba(244,211,94,0.24) 0%, rgba(244,211,94,0.08) 100%);
  border: 1.5px solid rgba(244,211,94,0.55);
  box-shadow: 0 0 0 4px rgba(244,211,94,0.09), 0 6px 18px rgba(0,0,0,0.18);
  animation: claimNudgeIn 0.35s cubic-bezier(0.2,0.8,0.3,1), claimPulseGold 2.6s ease-in-out 0.35s infinite;
}
.claim-bar.nudge.guest-nudge {
  background: linear-gradient(160deg, rgba(69,123,157,0.24) 0%, rgba(69,123,157,0.08) 100%);
  border-color: rgba(69,123,157,0.55);
  box-shadow: 0 0 0 4px rgba(69,123,157,0.09), 0 6px 18px rgba(0,0,0,0.18);
  animation: claimNudgeIn 0.35s cubic-bezier(0.2,0.8,0.3,1), claimPulseBlue 2.6s ease-in-out 0.35s infinite;
}
@keyframes claimNudgeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes claimPulseGold {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244,211,94,0.09), 0 6px 18px rgba(0,0,0,0.18); }
  50% { box-shadow: 0 0 0 8px rgba(244,211,94,0.03), 0 6px 18px rgba(0,0,0,0.18); }
}
@keyframes claimPulseBlue {
  0%, 100% { box-shadow: 0 0 0 4px rgba(69,123,157,0.09), 0 6px 18px rgba(0,0,0,0.18); }
  50% { box-shadow: 0 0 0 8px rgba(69,123,157,0.03), 0 6px 18px rgba(0,0,0,0.18); }
}
.claim-nudge-icon {
  font-size: 22px; line-height: 1; flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; background: rgba(var(--ink),0.08);
}
.claim-nudge-body { flex: 1; min-width: 0; }
.claim-nudge-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 15.5px; color: rgb(var(--ink)); line-height: 1.3; margin-bottom: 4px; }
.claim-nudge-sub { font-size: 12px; color: rgba(var(--ink),0.8); line-height: 1.55; margin-bottom: 11px; max-width: 46em; }
.claim-nudge-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.claim-nudge-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 2px; }
.claim-nudge-dismiss {
  background: none; border: none; color: rgba(var(--ink),0.7); cursor: pointer; font-size: 15px;
  padding: 6px; line-height: 1; border-radius: 8px;
}
.claim-nudge-dismiss:hover { color: rgba(var(--ink),0.75); background: rgba(var(--ink),0.08); }

/* ---- Al gekoppeld: rustige bevestiging ---- */
.claim-bar.claimed { background: rgba(46,125,50,0.1); border-color: rgba(46,125,50,0.3); }
.claim-bar.claimed .claim-label { color: rgba(var(--ink),0.75); }
/* Eigen naam is gekoppeld, maar (nog) niet elke medespeler — dus telt dit
   potje nog niet mee in de statistieken. Op een eigen regel (flex-basis:
   100%) onder de rest van de .claim-bar.claimed-rij, subtiel, want dit is
   geen actie die DEZE speler kan/moet ondernemen. */
.claim-stats-hint { flex-basis: 100%; font-size: 11px; color: rgba(var(--ink),0.65); line-height: 1.4; }

.mini-btn {
  font-size: 11px; padding: 8px 9px; border-radius: 8px; border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
}

/* ---- Catalogus ---- */
.join-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(var(--ink),0.05); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 6px;
}
.join-bar-label { color: rgba(var(--ink),0.7); font-size: 12px; flex-shrink: 0; }
.jbl-short { display: none; }
.join-bar input {
  flex: 1; min-width: 120px; border-radius: 10px; padding: 9px 14px; outline: none; color: rgb(var(--ink));
  background: rgba(var(--ink),0.08); border: 1px solid var(--line); text-align: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
.join-bar input::placeholder { color: rgba(var(--ink),0.7); text-transform: none; letter-spacing: normal; }

.landing-error { color: var(--red-text); font-size: 12px; margin-top: 6px; margin-bottom: 0; min-height: 16px; }

.catalog-toolbar { margin-top: 22px; margin-bottom: 16px; }
.game-search {
  width: 100%; border-radius: 12px; padding: 12px 16px; outline: none; color: rgb(var(--ink));
  background: rgba(var(--ink),0.08); border: 1px solid var(--line);
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; margin-bottom: 10px;
}
.game-search::placeholder { color: rgba(var(--ink),0.7); }

.tag-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--ink),0.06); color: rgba(var(--ink),0.8); font-size: 11px;
  cursor: pointer; font-family: 'Space Grotesk', sans-serif;
}
.tag-chip:hover { background: rgba(var(--ink),0.13); }
.tag-chip.active { background: rgba(244,211,94,0.22); color: var(--gold); border-color: rgba(244,211,94,0.5); font-weight: 700; }

/* Masonry i.p.v. CSS Grid: #gameGrid bevat kolom-divs (zie
   renderMasonryColumns() in platform.js) die elk hun eigen hoogte houden.
   Zo duwt een opengevouwen tegel alleen de tegel eronder in dezélfde kolom
   naar beneden, niet de hele rij ernaast. */
.game-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.game-grid-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Opengevouwen tegel in de zoekresultaten springt uit haar kolom en wordt
   een directe child van #gameGrid (zie wireGameCardEvents in platform.js,
   die het element daarvoor verplaatst en een plaatshouder achterlaat). De
   kolommen ervoor nemen samen al de volledige raster-breedte in, dus elke
   breedte hier duwt hem naar een eigen regel onderaan — 372px (2 tegels +
   tussenruimte) is ruim genoeg voor de inhoud zonder de hele raster-breedte
   te vullen (dat oogde als één kaalgetrokken, bijna lege balk). max-width
   voorkomt overloop op smalle schermen. */
.game-grid > .game-card.expanded { flex: 0 0 372px; width: 372px; max-width: 100%; }
/* 180px is bewust ruim genoeg voor twee regels ondertitel bij de langste
   tagline in de catalogus (getest tot 40 tekens) — zie ook de opgeknipte
   taglines in games/*.js. Vaste breedte, geen flex-stretch, dus elke tegel
   is exact even breed, in de rijen én in de zoekresultaten. */
.game-card {
  position: relative; width: 180px;
  background: linear-gradient(160deg, var(--felt-1) 0%, var(--felt-2) 100%);
  border: 1px solid rgba(var(--ink),0.08);
  border-radius: 16px; padding: 14px 16px 16px;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  animation: cardIn 0.25s ease;
  /* flex-basis/width erbij zodat "volledige breedte" bij het openvouwen
     (zie .game-card.expanded-regels hieronder) zacht meegroeit i.p.v. springt. */
  transition: transform 0.15s ease, border-color 0.15s ease, flex-basis 0.25s ease, width 0.25s ease;
}
.game-card:hover { transform: translateY(-2px); border-color: rgba(var(--ink),0.16); }
/* Op de lichte catalogus-achtergrond oogt de standaard zwarte slagschaduw
   vuil (zelfde reden als bij het Perkament-thema hierboven) — hier dus
   dezelfde warmgetinte, zachtere schaduw. */
html.catalog-view .game-card { box-shadow: 0 2px 8px rgba(60,45,20,0.13); }
@keyframes cardIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Tegel is standaard dicht: alleen icoon, naam en ondertitel. Klikken op de
   (onzichtbaar gestylede) toggle-knop vouwt hem open voor spelers/duur en
   de start-knop — dat houdt het raster rustig zonder info te verbergen. */
.game-card-toggle {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: 100%; min-height: 108px;
  background: none; border: none; padding: 0; margin: 0; text-align: left;
  cursor: pointer; font-family: inherit; color: inherit;
}
/* Icoon boven de tekst i.p.v. ernaast — daardoor wordt de tegel hoger en
   smaller, meer een postertegel dan een brede rij. */
/* padding-right houdt tekst (met name de titel, die na 2 regels afkapt)
   uit de buurt van het los gepositioneerde pijltje rechtsboven. */
.game-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding-right: 18px; }
.game-card-icon { font-size: 32px; line-height: 1; }
.game-card-text { min-width: 0; width: 100%; }
/* Los van de tekst gepositioneerd (niet meer naast de kop) zodat het
   icoon-boven-tekst-blokje niet hoeft in te schikken voor het pijltje. */
.game-card-chevron { position: absolute; top: 14px; right: 14px; }
/* --tile-ink wordt per tegel meegegeven als inline custom property (zie
   TILE_PALETTE in platform.js) zodat de tekst leesbaar blijft ongeacht welke
   postertint de tegel krijgt. Zonder --tile-ink (bv. oude opgeslagen markup)
   valt dit gewoon terug op de normale --ink-tekstkleur.
   Titel en ondertitel kappen allebei na 2 regels af (i.p.v. de titel op 1
   regel, wat bij een naam als "Konijnen Hokken" of "Winst/Verlies-teller"
   midden in het woord afkapte tot "Konijnen Ho..." — dat oogde onaf). De
   tegel is toch al onderdeel van een masonry-kolom (zie .game-grid-col
   hierboven) waar tegels sowieso ongelijke hoogte mogen hebben, dus een iets
   hogere tegel bij een lange naam is geen probleem. */
.game-card-title {
  font-family: 'Fraunces', serif; font-weight: 700; color: var(--tile-ink, rgb(var(--ink))); font-size: 17px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-card-tagline {
  color: var(--tile-ink, rgba(var(--ink),0.75)); opacity: 0.75; font-size: 11px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-card-chevron {
  flex-shrink: 0; color: var(--tile-ink, rgba(var(--ink),0.7)); opacity: 0.6; font-size: 11px;
  transition: transform 0.25s ease;
}
.game-card.expanded .game-card-chevron { transform: rotate(180deg); }

.game-card-extra {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-height 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
}
.game-card.expanded .game-card-extra { max-height: 140px; opacity: 1; pointer-events: auto; margin-top: 12px; }
.game-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
/* Donkere, lichte pil i.p.v. wit-op-donker: de tegels zijn nu zachte
   pastels (zie TILE_PALETTE in platform.js), een witte pil zou daar bijna
   onzichtbaar op worden. */
.game-card-meta span {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.08); color: var(--tile-ink, rgba(var(--ink),0.7));
}
.game-card .btn { width: 100%; }

/* ---- Posterachtige rijen (Netflix/HBO-stijl) --------------------------- */
.game-row { margin-bottom: 22px; }
.game-row-head {
  font-family: 'Fraunces', serif; font-weight: 700; color: rgb(var(--ink));
  font-size: 15px; margin-bottom: 9px;
}
/* align-items: flex-start om dezelfde reden als bij .game-grid hierboven:
   een opengevouwen tegel mag zijn buren in de rij niet optrekken. */
.game-row-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start;
}
.game-row-scroll .game-card { flex: 0 0 180px; }
/* Opengevouwen tegel in een rij wordt breder, zodat er altijd genoeg ruimte
   is voor spelers/duur en de start-knop — ook bij een lange speltitel die
   in gesloten staat wordt afgekapt. Bewust géén 100% van de hele rij: dat
   oogde als één kaalgetrokken, bijna lege balk. */
.game-row-scroll .game-card.expanded { flex: 0 0 372px; width: 372px; max-width: 100%; }
.game-row-scroll::-webkit-scrollbar { height: 6px; }
.game-row-scroll::-webkit-scrollbar-thumb { background: rgba(var(--ink),0.15); border-radius: 999px; }

/* De hero-opmaak (.game-hero*, één groot uitgelicht spel bovenaan de
   catalogus) stond hier. Die tegel is vervallen: met precies één spel nam
   hij de meest prominente plek van de pagina in voor een willekeurige
   keuze. Wat er nu staat zijn gewone banen -- zie renderGameRows() in
   platform.js. De WCAG-vuistregel die uit deze opmaak voortkwam (0.7 als
   ondergrens voor gedempte tekst) staat bewaard bij OPACITY_LEVELS in
   scripts/contrast-check.js. */

/* ---- Favoriete spellen (premium) ---- */
.favorite-games { margin-bottom: 24px; }
.favorite-games-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.favorite-game-card {
  background: linear-gradient(160deg, rgba(244,211,94,0.16) 0%, rgba(244,211,94,0.06) 100%);
  border: 1px solid rgba(244,211,94,0.35); border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; text-align: left; transition: transform 0.12s ease, background 0.12s ease;
}
.favorite-game-card:hover { background: linear-gradient(160deg, rgba(244,211,94,0.26) 0%, rgba(244,211,94,0.1) 100%); transform: translateY(-2px); }
.favorite-game-icon { font-size: 22px; line-height: 1; }
.favorite-game-name { font-family: 'Fraunces', serif; font-weight: 700; color: rgb(var(--ink)); font-size: 14px; line-height: 1.2; }
.favorite-game-count { color: rgba(var(--ink),0.7); font-size: 10.5px; }

.group-suggestion .favorite-game-card {
  background: linear-gradient(160deg, rgba(157,78,221,0.16) 0%, rgba(157,78,221,0.06) 100%);
  border-color: rgba(157,78,221,0.35);
}
.group-suggestion .favorite-game-card:hover {
  background: linear-gradient(160deg, rgba(157,78,221,0.26) 0%, rgba(157,78,221,0.1) 100%);
}

.catalog-footnote { color: rgba(var(--ink),0.7); font-size: 11px; text-align: center; margin-top: 26px; line-height: 1.6; }

.setup-warning {
  background: rgba(193,18,31,0.15); border: 1px solid rgba(193,18,31,0.3); border-radius: 12px;
  padding: 14px 16px; color: var(--red-text); font-size: 13px; line-height: 1.5; margin-bottom: 18px;
}
.setup-warning code { background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ---- Sessiebalk ---- */
.session-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: rgba(var(--ink),0.06); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 18px; font-size: 12px; color: rgba(var(--ink),0.7);
}
.session-bar b { color: var(--gold); letter-spacing: 0.04em; }
.session-game-label { opacity: 0.55; }

/* ---- Sessiebalk: acties als chips ----------------------------------------
   Dit waren onderstreepte tekstlinkjes op een rij ("Deel link  ✉️ E-mail
   Beheer  Verlaten"), wat er meer uitzag als kleine lettertjes dan als iets
   waar je op kunt klikken. Nu afgeronde chips met een icoon: even licht van
   toon, maar herkenbaar aanklikbaar en van elkaar te onderscheiden.

   Het icoon staat bewust in de CSS en niet in de HTML: data-i18n vervangt
   bij een taalwissel de volledige tekstinhoud van het element, dus een
   <span> met een icoon erin zou dan verdwijnen. */
.sb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(var(--ink),0.14); background: rgba(var(--ink),0.04);
  color: rgba(var(--ink),0.75); font-size: 12px; line-height: 1.4;
  font-family: 'Space Grotesk', sans-serif; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.sb-chip:hover { background: rgba(var(--ink),0.09); color: rgb(var(--ink)); border-color: rgba(var(--ink),0.24); }
.sb-chip::before { font-size: 12px; line-height: 1; opacity: 0.8; }

#scoringGuideBtn::before { content: '?'; font-weight: 700; }
#copyLinkBtn::before { content: '\1F517'; }   /* schakel */
#emailInviteBtn::before { content: '\2709'; } /* envelop */
#manageSessionBtn::before { content: '\2699'; } /* tandwiel */
#leaveSessionBtn::before { content: '\2715'; } /* kruisje */

/* De uitlegknop hoort bij de spelnaam links, niet bij de acties rechts. */
.sb-chip-help { margin-left: 8px; }

/* Verlaten is de enige actie die je uit de sessie haalt; die krijgt pas bij
   hover een waarschuwende tint, zodat hij in rust niet de aandacht opeist. */
.sb-chip-leave:hover {
  background: rgba(193,18,31,0.10); border-color: rgba(193,18,31,0.35); color: var(--red-text);
}

/* ---- Spelintroductie bij binnenkomst vanaf een landingspagina ---- */
.gi-tagline { color: rgba(var(--ink),0.75); margin: 0 0 6px; }
.gi-meta { font-size: 12px; color: rgba(var(--ink),0.65); margin: 0 0 10px; }
.gi-guide {
  font-size: 13px; line-height: 1.6; color: rgba(var(--ink),0.8);
  background: rgba(var(--ink),0.04); border-radius: 10px; padding: 12px 14px; margin: 0 0 4px;
}

.session-bar .sb-actions { display: flex; gap: 8px; align-items: center; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 4px; }
.sync-dot.offline { background: rgba(var(--ink),0.25); }

/* ---- Gedeelde bouwstenen voor spelmodules ---- */
.toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.toolbar-label { color: rgba(var(--ink),0.7); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.action-btns { display: flex; gap: 8px; }

.view-toggle { display: flex; background: rgba(var(--ink),0.06); border-radius: 10px; padding: 3px; border: 1px solid var(--line); }
.view-toggle button {
  border: none; background: none; color: rgba(var(--ink),0.75); font-size: 12px;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; font-family: 'Space Grotesk', sans-serif;
}
.view-toggle button.active { background: var(--gold); color: var(--on-gold); font-weight: 600; }

.empty-state {
  text-align: center; color: rgba(var(--ink),0.7); padding: 40px 20px;
  border-radius: 16px; border: 1px dashed var(--line); margin-bottom: 32px; font-size: 14px;
}

/* ---- Uitnodigende lege-staat: statistiekenpagina zonder data ---- */
.stats-empty {
  text-align: center; padding: 46px 24px; border-radius: 20px; margin-bottom: 20px;
  background: linear-gradient(160deg, rgba(244,211,94,0.10) 0%, rgba(244,211,94,0.02) 100%);
  border: 1px solid rgba(244,211,94,0.25);
}
.stats-empty-icon {
  font-size: 40px; line-height: 1; margin-bottom: 14px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
/* Dit kaartpatroon wordt ook (via HOST.emptyIllustrationSvg() in
   platform.js, hergebruikt door tournaments.js/competities.js/pubquiz.js)
   ingezet voor de "nog niets aangemaakt"-lege staten van toernooien/
   competities/pubquizzes — vandaar deze SVG-variant naast de emoji-variant
   hierboven. currentColor laat 'm automatisch meekleuren met alle thema's. */
.stats-empty-icon svg { color: var(--gold-dark); }
.stats-empty-titel {
  font-family: 'Fraunces', serif; font-weight: 800; font-size: 19px; color: rgb(var(--ink)); margin-bottom: 8px;
}
.stats-empty-sub {
  color: rgba(var(--ink),0.8); font-size: 13.5px; line-height: 1.6; max-width: 420px;
  margin: 0 auto 20px;
}
.stats-empty-benefits {
  list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 7px;
  max-width: 340px; margin-left: auto; margin-right: auto; text-align: left;
}
.stats-empty-benefits li {
  color: rgba(var(--ink),0.7); font-size: 12.5px; display: flex; align-items: center; gap: 8px;
}

.add-row { display: flex; gap: 8px; margin-bottom: 18px; }
.add-row input {
  flex: 1; border-radius: 12px; padding: 10px 16px; outline: none; color: rgb(var(--ink));
  background: rgba(var(--ink),0.08); border: 1px solid var(--line);
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;
}
.add-row input::placeholder { color: rgba(var(--ink),0.7); }

.entry-panel {
  border-radius: 16px; padding: 16px; background: rgba(var(--ink),0.05);
  border: 1px solid var(--line); display: none; margin-bottom: 12px;
}
.entry-panel.show { display: block; }
.entry-panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.entry-panel-head h2, .panel h2 {
  color: rgba(var(--ink),0.8); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; margin: 0; font-weight: 500;
}

/* Groepeert lange, platte formulieren (toernooi-/competitie-aanmaken,
   instellingen bij een toernooi/competitie) in duidelijk gescheiden
   kaartjes i.p.v. één ononderbroken kolom .tn-row's — zie de kritische
   opmaakreview ("form-heavy zonder visuele hiërarchie"). Zelfde kaartstijl
   als .entry-panel, maar (in tegenstelling tot .entry-panel) gewoon altijd
   zichtbaar: dit is geen in-/uitklapbaar paneel, alleen een visuele
   groepering rond .tn-row's die zelf al hun eigen show/hide-logica houden
   (dus deze wrapper mag nooit meedoen aan die display:none/block-toggles). */
.tn-form-section {
  border-radius: 16px; padding: 16px 16px 4px; background: rgba(var(--ink),0.04);
  border: 1px solid var(--line); margin-bottom: 14px;
}
.tn-form-section-title {
  color: rgba(var(--ink),0.8); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; margin: 0 0 12px; font-weight: 600;
}

.panel {
  display: none; border-radius: 16px; padding: 16px; background: rgba(var(--ink),0.05);
  border: 1px solid var(--line); margin: 16px 0 24px;
}
.panel.show { display: block; }

.progress-track {
  height: 5px; border-radius: 999px; background: rgba(var(--ink),0.08); overflow: hidden; margin-bottom: 12px;
}
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); transition: width 0.3s; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; color: rgb(var(--ink)); font-size: 13px;
  box-shadow: inset 0 0 0 2px rgba(var(--ink),0.25), 0 3px 6px rgba(0,0,0,0.35);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: rgba(var(--ink),0.06); color: rgb(var(--ink)); font-family: 'Fraunces', serif; font-weight: 600;
  padding: 10px 12px; text-align: left; white-space: nowrap;
}
tbody td { padding: 8px 12px; color: rgba(var(--ink),0.8); border-top: 1px solid rgba(var(--ink),0.06); }
tbody tr:nth-child(even) { background: rgba(var(--ink),0.02); }

.footer-actions { display: flex; justify-content: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ---- Win overlay (gedeeld, aangestuurd via platform.fx) ---- */
.win-overlay {
  position: fixed; inset: 0; background: rgba(2,15,9,0.82);
  display: none; align-items: center; justify-content: center; z-index: 50;
  backdrop-filter: blur(3px); padding: 20px;
}
.win-overlay.show { display: flex; }
.win-box {
  text-align: center; background: linear-gradient(160deg, var(--felt-1), var(--felt-2));
  border: 1px solid rgba(244,211,94,0.5); border-radius: 20px; padding: 36px 40px;
  box-shadow: 0 0 0 6px rgba(244,211,94,0.1), 0 20px 60px rgba(0,0,0,0.5);
  max-width: 360px;
}
.win-box .trophy-big { font-size: 44px; margin-bottom: 8px; }
.win-box h2 { font-family: 'Fraunces', serif; color: rgb(var(--ink)); font-size: 28px; margin: 0 0 4px; }
.win-box p { color: rgba(var(--ink),0.8); font-size: 14px; margin: 0 0 20px; }
.win-box .btn { width: 100%; }
.win-box .win-secondary { margin-top: 10px; }
/* "Iemand gaat naar huis" — bewust onderaan en klein: het is een uitzondering,
   niet de gebruikelijke volgende stap. Zie huidigeVertrekkers() in platform.js. */
.win-box .win-depart { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* 0.65 en niet lichter: dat is de lichtste doorzichtigheid die in alle zeven
   thema's WCAG AA haalt (zie scripts/contrast-check.js). */
.win-box .win-depart-hint { color: rgba(var(--ink),0.65); font-size: 12px; margin: 8px 0 10px; line-height: 1.5; }
.win-box .win-depart-name { margin-bottom: 6px; }
/* position:relative op .win-box zodat het kruisje binnen de box hangt en niet
   in de hoek van het hele scherm belandt. */
.win-box { position: relative; }
.win-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; cursor: pointer;
  color: rgba(var(--ink),0.7); font-size: 16px; line-height: 1;
  padding: 6px; border-radius: 8px;
}
.win-close:hover { background: rgba(var(--ink),0.08); color: rgb(var(--ink)); }

/* ---- Resultaatbalk: blijft staan nadat de winnaars-popup is weggeklikt ----
   Zo kun je de eindstand rustig nalezen én meteen een nieuw potje starten,
   zonder eerst door het spelscherm te scrollen op zoek naar de knop. */
.match-result-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  background: linear-gradient(160deg, rgba(244,211,94,0.16) 0%, rgba(244,211,94,0.05) 100%);
  border: 1px solid rgba(244,211,94,0.4); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 14px;
}
.mrb-text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mrb-trophy { font-size: 22px; flex-shrink: 0; }
.mrb-text b { color: rgb(var(--ink)); font-size: 14px; }
.mrb-sub { color: rgba(var(--ink),0.8); font-size: 13px; }
.mrb-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ---- Accountpaneel: Premium/Hosten-status (Fase 0-introductieperiode) ----
   Zelfde goud-accent als de winnaarspopup/resultaatbalk hierboven (bewust
   hardcoded rgba(244,211,94,...), los van het actieve thema — zie de
   toelichting bij .win-box) zolang het account nog Premium/Hosten-rechten
   heeft; een neutrale kaart zodra dat niet (meer) zo is. */
.account-plan-card { border-radius: 14px; padding: 12px 14px; margin: 2px 0 14px; }
.account-plan-card.is-active {
  background: linear-gradient(160deg, rgba(244,211,94,0.16) 0%, rgba(244,211,94,0.05) 100%);
  border: 1px solid rgba(244,211,94,0.4);
}
.account-plan-card.is-free {
  background: rgba(var(--ink), 0.04);
  border: 1px solid var(--line);
}
.apc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.apc-title { display: flex; align-items: center; gap: 6px; font-family: 'Fraunces', serif; font-size: 14px; color: rgb(var(--ink)); }
.apc-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--gold-dark); background: rgba(244,211,94,0.22); padding: 3px 9px; border-radius: 999px;
}
.apc-note { font-size: 12px; color: rgba(var(--ink),0.65); margin: 0; }
.apc-upgrade-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; flex-wrap: wrap;
}
.apc-upgrade-row .btn { flex-shrink: 0; padding: 8px 16px; font-size: 12.5px; }

/* ---- Conflictpaneel: eigen invoer niet stil laten verdwijnen ------------
   Bewust rood/waarschuwend en breed, niet als terloopse melding: hier staat
   invoer op het spel die anders weg was. */
.conflict-panel {
  background: rgba(193,18,31,0.1);
  border: 1px solid rgba(193,18,31,0.45);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.cf-head { font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px; color: rgb(var(--ink)); }
.cf-intro { color: rgba(var(--ink),0.8); font-size: 12.5px; line-height: 1.5; margin: 6px 0 12px; }
.cf-cols { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cf-col {
  flex: 1 1 180px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(var(--ink),0.05); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px;
}
.cf-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(var(--ink),0.7);
}
.cf-value { color: rgb(var(--ink)); font-size: 12.5px; line-height: 1.4; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cf-warn { color: rgba(var(--ink),0.75); font-size: 11px; line-height: 1.4; margin: 10px 0 0; }
@media (max-width: 480px) {
  .match-result-bar { flex-direction: column; align-items: stretch; }
  .mrb-actions { justify-content: space-between; }
}

/* ---- Sectiekoppen ---- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.section-head h2 {
  color: rgba(var(--ink),0.8); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; margin: 0; font-weight: 500;
}

/* ---- Identiteit — zichtbaar zodra er een naam is: ingelogd (account/
   profiel) of als gast (apparaat-nickname). Eén rustige banner i.p.v. een
   gouden pil-in-een-pil zoals voorheen: avatar + naam links, statistieken-
   link rechts, zelfde felt-verloop als de andere kaarten op de pagina. ---- */
.identity-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(160deg, var(--felt-1) 0%, var(--felt-2) 100%);
  border: 1px solid rgba(var(--ink),0.08); border-radius: 14px;
  padding: 10px 14px 10px 10px; margin-bottom: 18px; font-size: 12.5px; color: rgba(var(--ink),0.7);
}
html.catalog-view .identity-bar { box-shadow: 0 2px 8px rgba(60,45,20,0.13); }
.identity-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: rgb(var(--ink)); font-size: 13px; flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(var(--ink),0.15);
}
.identity-text { flex: 1; min-width: 0; }
.identity-text b { color: rgb(var(--ink)); }
/* Alleen voor gasten (zie renderIdentityBar) — bij een account komt de naam
   mee met het profiel en is er hier niets lokaal te wijzigen. */
.identity-edit-btn {
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 4px; vertical-align: middle;
  background: none; border: none; padding: 0; font-size: 11px;
  color: rgba(var(--ink),0.7); cursor: pointer; border-radius: 50%;
}
.identity-edit-btn:hover { color: rgb(var(--ink)); background: rgba(var(--ink),0.08); }

.stats-entry-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 6px 4px;
  color: rgb(var(--ink)); font-size: 12.5px; font-weight: 700;
  text-decoration: none; font-family: 'Space Grotesk', sans-serif; cursor: pointer;
}
.stats-entry-btn:hover { color: var(--gold-dark); }
.stats-entry-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--ink),0.08);
  font-size: 12px; flex-shrink: 0;
}

/* ---- Modal ---- */
.modal {
  position: fixed; inset: 0; background: rgba(2,15,9,0.85); z-index: 60;
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.modal.show { display: flex; }
.modal-box {
  background: linear-gradient(160deg, var(--felt-1), var(--felt-2));
  border: 1px solid var(--line); border-radius: 18px; padding: 26px;
  max-width: 400px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-box h3 { font-family: 'Fraunces', serif; color: rgb(var(--ink)); margin: 0 0 8px; font-size: 22px; }
.modal-box p { color: rgba(var(--ink),0.8); font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.modal-box input {
  width: 100%; border-radius: 12px; padding: 12px 16px; outline: none; color: rgb(var(--ink));
  background: rgba(var(--ink),0.08); border: 1px solid var(--line);
  font-family: 'Space Grotesk', sans-serif; font-size: 16px;
}
.modal-box input::placeholder { color: rgba(var(--ink),0.7); }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.modal-actions .btn { flex: 1; }
.modal-error { color: var(--red-text) !important; font-size: 12px !important; margin: 8px 0 0 !important; min-height: 14px; }
.modal-note { color: rgba(var(--ink),0.7) !important; font-size: 11px !important; margin: 14px 0 0 !important; }
.modal-box-wide { max-width: 480px; max-height: 82vh; overflow-y: auto; }

.friend-result-row, .friend-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(var(--ink),0.06);
}
.friend-result-row:first-child, .friend-row:first-child { border-top: none; }
.friend-name { flex: 1; min-width: 0; color: rgb(var(--ink)); font-size: 13px; font-weight: 500; }
/* De unieke gebruikersnaam achter de weergavenaam — zie
   sql/migrations/supabase-gebruikersnamen.sql. Bewust gedempt: hij is er om
   twee mensen met dezelfde naam uit elkaar te houden, niet om te schreeuwen. */
.friend-handle { color: rgba(var(--ink),0.65); font-weight: 400; }
.child-add-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.child-add-form > input { flex: 1 1 140px; min-width: 0; border-radius: 10px; padding: 10px 12px;
  color: rgb(var(--ink)); background: rgba(var(--ink),0.06); border: 1px solid var(--line);
  outline: none; font-family: 'Space Grotesk', sans-serif; font-size: 15px; }
.child-add-form .username-field { flex: 1 1 140px; }
.username-row { margin-bottom: 12px; }
.username-label { display: block; color: rgba(var(--ink),0.8); font-size: 13px; margin-bottom: 5px; }
.username-field { display: flex; align-items: center; gap: 4px; border-radius: 10px;
  background: rgba(var(--ink),0.06); border: 1px solid var(--line); padding: 0 10px; }
.username-at { color: rgba(var(--ink),0.65); font-size: 15px; }
.username-field input { flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: rgb(var(--ink)); font-family: 'Space Grotesk', sans-serif; font-size: 15px; padding: 10px 0; }

/* ---- Mijn sessies ---- */
.my-sessions { margin-bottom: 22px; }
.ms-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(var(--ink),0.04); border: 1px solid var(--line); margin-bottom: 6px;
  flex-wrap: wrap;
}
.ms-icon { font-size: 20px; flex-shrink: 0; }
.ms-body { flex: 1; min-width: 140px; }
.ms-title { display: block; color: rgb(var(--ink)); font-size: 13px; font-weight: 500; }
.ms-meta { display: block; color: rgba(var(--ink),0.7); font-size: 11px; }
.ms-meta code { background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.05em; }
.ms-status { font-size: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--ink),0.08); color: rgba(var(--ink),0.75); }
.ms-status.open { background: rgba(46,204,113,0.18); color: var(--ok); }
.ms-status.closed { background: rgba(244,211,94,0.15); color: var(--gold); }
/* Gesloten door 1 uur inactiviteit, maar nog heropenbaar (zie
   supabase-inactiviteit-sluiting.sql) — zelfde gouden familie als .closed,
   nog steeds "goed nieuws mogelijk" i.p.v. definitief. */
.ms-status.inactive { background: rgba(244,211,94,0.15); color: var(--gold); }
/* Definitief gesloten (48 uur inactief): geen weg terug meer, dus dezelfde
   rode toon als .gone (verwijderd) — maar de rij bestaat zelf nog wél. */
.ms-status.permanent { background: rgba(193,18,31,0.18); color: var(--red-text); }
.ms-status.gone { background: rgba(193,18,31,0.18); color: var(--red-text); }
.ms-count { font-size: 10px; color: rgba(var(--ink),0.7); margin-left: 6px; }
.ms-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-small { font-size: 12px; padding: 6px 12px; }

/* ---- Aanwezigheid ---- */
.presence-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: rgba(var(--ink),0.04); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 13px; margin-bottom: 14px;
}
.presence-label {
  color: rgba(var(--ink),0.7); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; flex-shrink: 0;
}
.presence-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.presence-chip {
  display: flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px;
  background: rgba(var(--ink),0.07); color: rgba(var(--ink),0.8); font-size: 12px;
  border: 1px solid transparent;
}
.presence-chip.me { border-color: rgba(244,211,94,0.4); }
.presence-avatar {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: rgb(var(--ink)); font-size: 10px; flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(var(--ink),0.2);
}
.presence-empty { color: rgba(var(--ink),0.7); font-size: 12px; font-style: italic; }

.matchlog-intro { color: rgba(var(--ink),0.7); font-size: 11.5px; line-height: 1.5; margin: -4px 0 12px; }
.matchlog-row {
  display: flex; align-items: flex-start; gap: 11px; padding: 10px 4px;
  border-top: 1px solid rgba(var(--ink),0.06);
}
.matchlog-row:first-child { border-top: none; }
.matchlog-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; font-size: 15px;
  display: flex; align-items: center; justify-content: center; background: rgba(var(--ink),0.06);
}
.matchlog-body { flex: 1; min-width: 0; }
.matchlog-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.matchlog-nr { color: rgba(var(--ink),0.7); font-size: 10.5px; font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; }
.matchlog-title { color: rgb(var(--ink)); font-size: 13px; font-weight: 600; min-width: 0; }
.matchlog-time { color: rgba(var(--ink),0.7); font-size: 11px; margin-left: auto; flex-shrink: 0; }
.matchlog-players { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px 10px; }
.matchlog-player { color: rgba(var(--ink),0.75); font-size: 11.5px; }
.matchlog-player.won { color: var(--gold); font-weight: 700; }

.participant-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-top: 1px solid rgba(var(--ink),0.06); font-size: 13px;
}
.participant-row:first-child { border-top: none; }
.participant-name { flex: 1; color: rgba(var(--ink),0.85); min-width: 0; }
.participant-meta { color: rgba(var(--ink),0.7); font-size: 11px; flex-shrink: 0; }
.online-tag { color: var(--ok); }
.owner-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px;
  border-radius: 999px; background: rgba(69,123,157,0.35); color: #a8d0e6; vertical-align: middle;
}
.me-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px;
  border-radius: 999px; background: rgba(244,211,94,0.2); color: var(--gold); vertical-align: middle;
}
.remote-tag { background: rgba(157,78,221,0.22); color: #c9a3f0; }

/* ---- Sessiebeheer ---- */
.manage-line { color: rgba(var(--ink),0.65); font-size: 13px; margin: 0 0 6px; }
.manage-line b { color: rgb(var(--ink)); }
.manage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.manage-note { color: rgba(var(--ink),0.7); font-size: 11px; margin: 12px 0 0; }

.closed-banner {
  background: rgba(244,211,94,0.12); border: 1px solid rgba(244,211,94,0.35); border-radius: 12px;
  padding: 12px 15px; color: var(--gold); font-size: 13px; margin-bottom: 16px; line-height: 1.5;
}
#gameRoot.is-closed { opacity: 0.65; pointer-events: none; }

/* ---- Avond-recap: live samenvatting in gewone taal, zichtbaar voor iedereen ---- */
.avond-recap {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px;
  padding: 13px 15px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(157,78,221,0.14) 0%, rgba(157,78,221,0.05) 100%);
  border: 1px solid rgba(157,78,221,0.3);
}
.avond-recap-icon { font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.avond-recap-body { flex: 1; min-width: 0; }
.avond-recap-titel { color: rgb(var(--ink)); font-size: 13.5px; line-height: 1.5; }
.avond-recap-titel b { color: #9D4EDD; }
.avond-recap-rang {
  margin-top: 5px; color: rgba(var(--ink),0.7); font-size: 12px; line-height: 1.5;
}
.avond-recap-link {
  display: inline-block; margin-top: 7px; background: none; border: none; padding: 0;
  color: #9D4EDD; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.avond-recap-link:hover { text-decoration: underline; }

/* ---- Synchronisatiestatus ---- */
.sync-dot.error { background: var(--red); box-shadow: 0 0 0 3px rgba(193,18,31,0.25); }
.sync-warning {
  background: rgba(193,18,31,0.15); border: 1px solid rgba(193,18,31,0.35); border-radius: 12px;
  padding: 12px 15px; color: var(--red-text); font-size: 13px; margin-bottom: 16px; line-height: 1.5;
}
.sync-warning-hint { color: rgba(var(--ink),0.75); font-size: 11px; }

/* ---- Themakiezer ---- */
.theme-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.theme-chip {
  display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(var(--ink),0.05); color: rgba(var(--ink),0.7);
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; cursor: pointer;
}
.theme-chip:hover { background: rgba(var(--ink),0.12); }
.theme-chip.active { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.theme-swatch {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--ink),0.25);
}
[data-theme="perkament"] .theme-chip { background: rgba(60,45,20,0.06); color: rgba(43,36,21,0.7); }
[data-theme="perkament"] .theme-chip:hover { background: rgba(60,45,20,0.12); }
[data-theme="perkament"] .theme-chip.active { color: var(--gold-dark); border-color: var(--gold-dark); }

/* ---- Account (optioneel, altijd rechtsboven op de pagina) ---- */
.account-widget { position: fixed; top: 16px; right: 16px; z-index: 55; display: flex; align-items: center; gap: 8px; }
.lang-switch-btn {
  background: rgba(var(--ink),0.08); border: 1px solid var(--line); border-radius: 999px;
  color: rgba(var(--ink),0.75); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 7px 12px; cursor: pointer; font-family: 'Space Grotesk', sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25); backdrop-filter: blur(6px);
}
.lang-switch-btn:hover { background: rgba(var(--ink),0.14); }
/* Dropdown-variant van dezelfde knop, voor de N-talen-taalwisselaar
   (assets/index.html #langSwitchSelect) -- .lang-switch-btn zelf blijft
   bestaan voor privacy.html, dat een eigen, kleinere nl/en-toggle heeft en
   niet via i18n.js loopt. */
.lang-switch-select {
  background: rgba(var(--ink),0.08); border: 1px solid var(--line); border-radius: 999px;
  color: rgba(var(--ink),0.75); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 7px 26px 7px 12px; cursor: pointer; font-family: 'Space Grotesk', sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25); backdrop-filter: blur(6px);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ccc' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
}
.lang-switch-select:hover { background-color: rgba(var(--ink),0.14); }
.account-widget-btn {
  display: flex; align-items: center; gap: 7px;
  background: rgba(var(--ink),0.08); border: 1px solid var(--line); border-radius: 999px;
  color: rgba(var(--ink),0.75); font-size: 12px; padding: 7px 14px 7px 7px; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}
.account-widget-btn:hover { background: rgba(var(--ink),0.14); }
.account-widget-btn.logged-in { border-color: var(--gold); color: var(--gold); }
.account-widget-avatar {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; flex-shrink: 0;
  background: rgba(var(--ink),0.12);
}
.account-widget-btn.logged-in .account-widget-avatar {
  background: rgba(244,211,94,0.22); font-weight: 700; color: var(--gold);
}
.account-widget .panel#accountPanel {
  position: absolute; top: calc(100% + 8px); right: 0; margin: 0;
  width: 320px; max-width: calc(100vw - 32px); max-height: 80vh; overflow-y: auto;
  /* .panel is normally near-transparent (bedoeld om binnen de pagina te
     staan, niet erboven te zweven). Als los, drijvend paneel heeft dit er
     wél een ondoorzichtige achtergrond nodig — anders schemert de pagina
     erachter door en overlappen teksten elkaar (vooral zichtbaar op mobiel). */
  background: var(--bg-2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
@media (max-width: 480px) {
  .account-widget { top: 10px; right: 10px; gap: 6px; }
  .account-widget .panel#accountPanel { width: calc(100vw - 20px); }
  .lang-switch-btn { padding: 7px 10px; font-size: 10px; }
  .lang-switch-select { padding: 7px 22px 7px 10px; font-size: 10px; }
}

.account-block { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.account-intro {
  color: rgba(var(--ink),0.7); font-size: 12px; line-height: 1.5; margin: 0;
}
.account-intro a { color: var(--gold); }

/* Ingelogd-menu (Vrienden/Kinderprofielen/Profiel/Uitloggen): één strak
   omrand blok met rijen op volle breedte i.p.v. losse pil-knoppen — leest
   rustiger en compacter in het smalle accountpaneel. */
.account-menu {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.account-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: none; border: none;
  border-top: 1px solid var(--line);
  padding: 11px 14px; font-size: 13px; color: rgba(var(--ink),0.8);
  font-family: 'Space Grotesk', sans-serif; cursor: pointer;
}
.account-menu-item:first-child { border-top: none; }
.account-menu-item:hover { background: rgba(var(--ink),0.05); }
.account-menu-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }

/* Bewust klein en onopvallend: geen aanmoediging om het account te
   verwijderen, maar wel vindbaar voor wie het echt wil. */
.account-delete-link {
  align-self: center; margin-top: 2px;
  color: rgba(var(--ink),0.7); font-size: 11px; text-decoration: none;
}
.account-delete-link:hover { color: var(--red-text); text-decoration: underline; }
.account-block input[type="email"], .account-block input[type="password"] {
  width: 100%; border-radius: 10px; padding: 10px 12px; outline: none; color: rgb(var(--ink));
  background: rgba(var(--ink),0.08); border: 1px solid var(--line);
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;
}
.account-forgot-link { align-self: flex-end; margin-top: -4px; font-size: 12px; }

/* ---- Wissel tussen inloggen/account aanmaken/wachtwoord vergeten: een
   rustige tekstregel met inline link, zoals bij de meeste sites (bv.
   Linear's "Don't have an account? Sign up") — geen twee gelijkwaardige
   tabs meer, want inloggen is verreweg de meest voorkomende actie. ---- */
.account-switch {
  text-align: center; color: rgba(var(--ink),0.7); font-size: 12px; margin: 2px 0 0;
}
.account-switch .link-btn { font-size: 12px; font-weight: 600; color: var(--gold); text-decoration: none; }
.account-switch .link-btn:hover { text-decoration: underline; }
.account-age-check a { color: var(--gold); }

/* ---- Bevestiging na een belangrijke accountactie (resetlink verstuurd,
   bevestigingsmail nodig) — moet opvallen, geen kleine grijze regel tussen
   de rest van het formulier. ---- */
.account-message {
  text-align: center; padding: 20px 14px; border-radius: 14px; margin-top: 6px;
  background: rgba(46,125,50,0.12); border: 1px solid rgba(46,125,50,0.35);
}
.account-message-icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.account-message-title {
  font-family: 'Fraunces', serif; font-weight: 800; font-size: 15px; color: rgb(var(--ink)); margin-bottom: 6px;
}
.account-message-body { color: rgba(var(--ink),0.75); font-size: 12.5px; line-height: 1.6; margin-bottom: 12px; }
.account-message-body b { color: rgb(var(--ink)); }

.account-age-check {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12px;
  color: rgba(var(--ink),0.8); line-height: 1.4; cursor: pointer;
}
.account-age-check input { margin-top: 2px; flex-shrink: 0; }

.account-turnstile { display: flex; justify-content: center; margin: 4px 0; min-height: 65px; }

/* ---- Footer ---- */
.site-footer {
  width: 100%; max-width: 720px; margin: 40px 0 24px; padding: 16px 20px 0;
  border-top: 1px solid rgba(var(--ink),0.08);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}
.site-footer-note { color: rgba(var(--ink),0.7); font-size: 11px; line-height: 1.5; max-width: 480px; }
.site-footer-links { display: flex; gap: 14px; flex-shrink: 0; }
.site-footer-links a { color: rgba(var(--ink),0.75); font-size: 12px; text-decoration: none; }
.site-footer-links a:hover { color: var(--gold); text-decoration: underline; }

/* ---- Disclaimer per spel ---- */
.game-disclaimer {
  color: rgba(var(--ink),0.7); font-size: 11px; line-height: 1.6;
  margin: 26px 4px 0; padding-top: 14px; border-top: 1px solid rgba(var(--ink),0.07);
}

/* ---- Statistieken ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat-card {
  background: linear-gradient(160deg, var(--felt-1) 0%, var(--felt-2) 100%);
  border: 1px solid rgba(var(--ink),0.08); border-radius: 14px; padding: 16px; text-align: center;
}
.stat-value { font-family: 'Fraunces', serif; font-weight: 900; font-size: 30px; color: var(--gold); line-height: 1; }
.stat-label { color: rgba(var(--ink),0.65); font-size: 12px; margin-top: 6px; }
.stat-extra { color: rgba(var(--ink),0.7); font-size: 10px; margin-top: 4px; line-height: 1.4; }

.stats-block {
  background: rgba(var(--ink),0.04); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px 12px;
}
.stats-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(var(--ink),0.06); }
.stats-row:first-child { border-top: none; }
.stats-row.compact { padding: 9px 0; }
.stats-icon { font-size: 20px; flex-shrink: 0; width: 24px; text-align: center; }
.stats-row-body { flex: 1; min-width: 0; }
.stats-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.stats-row-body b { color: rgb(var(--ink)); font-size: 13px; font-weight: 500; }
.stats-row-meta { color: rgba(var(--ink),0.7); font-size: 11px; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "account verwijderd" achter een rivaal. Gedempt maar leesbaar (0.65 is de
   lichtste doorzichtigheid die in alle zeven thema's WCAG AA haalt, zie
   scripts/contrast-check.js): het is een terzijde, geen waarschuwing. */
.stats-row-note { color: rgba(var(--ink),0.65); font-size: 11px; font-weight: 400; margin-left: 6px; }
.stats-bar { display: block; height: 4px; border-radius: 999px; background: rgba(var(--ink),0.08); margin-top: 6px; overflow: hidden; }
.stats-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }
.stats-note { color: rgba(var(--ink),0.7); font-size: 11px; line-height: 1.6; margin: 14px 2px 0; }

/* Ronde-/beurtverloop van één potje (game_detail), op aanvraag opgehaald --
   zie loadGameDetail()/wireStatsDetailToggles() in platform.js. */
.stats-detail-toggle { flex-shrink: 0; font-size: 11px; margin-left: 8px; }
.stats-detail-panel { padding: 4px 2px 12px 34px; }
.stats-detail-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.stats-detail-table th, .stats-detail-table td {
  padding: 5px 8px; text-align: left; border-bottom: 1px solid rgba(var(--ink),0.06);
  white-space: nowrap;
}
.stats-detail-table th { color: rgba(var(--ink),0.65); font-weight: 600; }
.stats-detail-table td { color: rgb(var(--ink)); }

.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.badge {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  background: rgba(var(--ink),0.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px;
  opacity: 0.4; filter: grayscale(0.6);
}
.badge.earned {
  opacity: 1; filter: none;
  background: linear-gradient(160deg, rgba(244,211,94,0.18) 0%, rgba(244,211,94,0.05) 100%);
  border-color: rgba(244,211,94,0.4);
}
.badge-icon { font-size: 24px; line-height: 1; }
.badge-label { font-family: 'Fraunces', serif; font-weight: 700; font-size: 11.5px; color: rgb(var(--ink)); line-height: 1.2; }
.badge-desc { color: rgba(var(--ink),0.7); font-size: 9.5px; line-height: 1.3; }

/* ---- Medailles met niveaus (brons t/m diamant) -------------------------
   Breder dan de losse badges hierboven: er moet een niveau, een waarde, een
   voortgangsbalk én het volgende doel in passen. Een nog niet behaalde
   medaille wordt gedempt getoond in plaats van verborgen -- juist zien wat
   er nog te halen valt is het punt van niveaus. */
.medals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.medal {
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(var(--ink),0.04); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 13px;
}
/* Nog niet behaald: alleen het ICOON dempen, niet de hele kaart. Een
   opacity op de kaart zou ook de tekst meenemen, en die haalt dan geen
   WCAG AA-contrast meer — terwijl juist die tekst ("nog 12 voor Goud")
   het nut van een niet-behaalde medaille is. */
.medal:not(.earned) .medal-icon { filter: grayscale(1); opacity: 0.45; }
.medal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.medal-icon { font-size: 24px; line-height: 1; }
.medal-tier {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(var(--ink),0.7); white-space: nowrap;
}
.medal-label { font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px; color: rgb(var(--ink)); line-height: 1.2; }
.medal-value { color: rgba(var(--ink),0.75); font-size: 11px; line-height: 1.3; }
.medal-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(var(--ink),0.1); margin-top: 3px;
}
/* 0.55 i.p.v. lichter: de balk moet zich duidelijk van zijn eigen spoor
   (0.1) onderscheiden. De exacte stand staat óók als tekst eronder, dus de
   balk is nooit de enige drager van die informatie. */
.medal-bar-fill { height: 100%; border-radius: 999px; background: rgba(var(--ink),0.55); transition: width 0.4s ease; }
.medal-next { color: rgba(var(--ink),0.7); font-size: 9.5px; line-height: 1.3; }

/* Niveaukleuren. Bewust alleen op de rand, het niveaulabel en de
   voortgangsbalk -- niet als achtergrondvlak: bij zes medailles naast elkaar
   wordt dat een lappendeken, en de tekst erop haalt dan bovendien lastig
   genoeg contrast in het lichte kleurenschema. */
.medal.tier-bronze   { border-color: rgba(205,127,50,0.55); }
.medal.tier-silver   { border-color: rgba(150,158,166,0.6); }
.medal.tier-gold     { border-color: rgba(212,175,55,0.6); }
.medal.tier-platinum { border-color: rgba(90,180,205,0.6); }
.medal.tier-diamond  { border-color: rgba(70,190,220,0.75); box-shadow: 0 0 0 3px rgba(70,190,220,0.12); }
.medal.tier-bronze   .medal-bar-fill { background: #A9662B; }
.medal.tier-silver   .medal-bar-fill { background: #7E868E; }
.medal.tier-gold     .medal-bar-fill { background: #B08D1E; }
.medal.tier-platinum .medal-bar-fill { background: #3C8CA6; }
.medal.tier-diamond  .medal-bar-fill { background: #2E93AD; }

.stats-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.profile-switcher-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
  font-size: 12.5px; color: rgba(var(--ink),0.8);
}
.profile-switcher-bar b { color: rgb(var(--ink)); }

/* ---- Profielkiezer (Netflix/HBO-stijl) ---- */
.profile-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px;
  margin: 18px 0 4px;
}
.profile-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 8px; border-radius: 14px;
  font-family: 'Space Grotesk', sans-serif;
}
.profile-card:hover { background: rgba(var(--ink),0.05); }
.profile-card-avatar {
  width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; color: rgb(var(--ink)); box-shadow: inset 0 0 0 2px rgba(var(--ink),0.15);
}
.profile-card-name {
  font-size: 12.5px; font-weight: 600; color: rgb(var(--ink)); text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.claim-lookup .join-bar { margin-bottom: 10px; }
.charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.chart-box {
  background: rgba(var(--ink),0.04); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; min-height: 200px;
}
.chart-box h3 { font-family: 'Fraunces', serif; font-size: 13px; font-weight: 700; color: rgb(var(--ink)); margin: 0 0 10px; }
.chart-box canvas { max-height: 200px; }
.chart-box-wide { margin-top: 12px; }
.stats-note b { color: rgba(var(--ink),0.7); }

@media (max-width: 480px) {
  h1 { font-size: 42px; }
  .hero-catalog h1 { font-size: 20px; }
  .brand-word { font-size: 34px; }
  .game-grid { grid-template-columns: 1fr; }
  .ms-actions { width: 100%; justify-content: flex-end; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 24px; }

  /* Beide balken moesten op smalle telefoons naar 2 regels omklappen omdat
     de tekst-onderdelen samen breder waren dan het scherm — compacter
     maken (kortere label, icoon-only statistieken-knop) zodat alles weer
     op 1 regel past. */
  .join-bar { padding: 10px 12px; gap: 6px; }
  .join-bar-label { font-size: 11px; }
  .jbl-full { display: none; }
  .jbl-short { display: inline; }
  .join-bar input { min-width: 0; padding: 9px 10px; }

  .identity-bar { flex-wrap: nowrap; gap: 6px; padding: 8px 10px 8px 8px; font-size: 11.5px; }
  .identity-avatar { width: 26px; height: 26px; font-size: 12px; }
  .identity-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .stats-entry-btn { gap: 0; padding: 4px; flex-shrink: 0; }
  .stats-entry-text { display: none; }
}

/* ==========================================================================
   Toernooien — bouwt zoveel mogelijk voort op bestaande, generieke klassen
   (.panel, .ms-row/.ms-status, table/thead/tbody, .add-row, .entry-panel,
   .toolbar-label, .view-toggle, .empty-state) zodat het meteen visueel bij
   de rest van de app past. Alleen de indelingsspecifieke stukjes (schema per
   ronde/tafel, deelnemerschips) krijgen hier eigen, kleine klassen.
   ========================================================================== */
.tn-upsell {
  background: linear-gradient(160deg, rgba(244,211,94,0.14) 0%, rgba(244,211,94,0.04) 100%);
  border: 1px solid rgba(244,211,94,0.35); border-radius: 16px; padding: 20px;
  text-align: center; margin-bottom: 18px;
}
.tn-upsell .tn-upsell-icon { font-size: 30px; margin-bottom: 8px; }
.tn-upsell p { color: rgba(var(--ink),0.8); font-size: 13px; margin: 6px 0 14px; line-height: 1.5; }

.tn-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.tn-row-block { align-items: flex-start; }
.tn-label { color: rgba(var(--ink),0.8); font-size: 12px; width: 130px; flex-shrink: 0; }
.tn-row select, .tn-row input[type="text"], .tn-row input[type="number"] {
  border-radius: 8px; padding: 8px 10px; color: rgb(var(--ink));
  background: rgba(var(--ink),0.08); border: 1px solid var(--line); outline: none;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px;
}
.tn-row input[type="number"] { width: 90px; text-align: center; }
.tn-row select { flex: 1; min-width: 160px; }
.tn-hint { color: rgba(var(--ink),0.7); font-size: 11px; margin: 0 0 14px; line-height: 1.5; }
/* Vast-team-formulier (organisator + zelf-aanmelding): een variabel aantal
   naamvelden (zie addTeamField() in tournaments.js/competities.js) moet op
   smalle schermen kunnen doorlopen naar een volgende regel in plaats van
   oneindig samen te persen zoals de vaste .add-row met precies 2 velden. */
.tn-team-row { flex-wrap: wrap; margin-bottom: 8px; }
.tn-team-row .tn-team-field { flex: 1 1 130px; min-width: 100px; }
.tn-code {
  font-family: 'Space Grotesk', monospace; font-size: 13px; letter-spacing: 0.03em; color: rgb(var(--ink));
  background: rgba(var(--ink),0.08); border-radius: 6px; padding: 3px 8px;
}
.tn-onboarding {
  background: rgba(var(--ink),0.04); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px;
  font-size: 12.5px; color: rgba(var(--ink),0.65); line-height: 1.5;
}

.tn-participants { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tn-chip {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 11px; border-radius: 999px;
  background: rgba(var(--ink),0.07); border: 1px solid var(--line); color: rgba(var(--ink),0.8); font-size: 12px;
}
.tn-chip button { background: none; border: none; color: rgba(var(--ink),0.7); cursor: pointer; font-size: 12px; padding: 0 2px; }
.tn-chip button:hover { color: rgba(var(--ink),0.8); }
.tn-chip-team { border-color: var(--gold); }

.tn-standing-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid rgba(var(--ink),0.06); font-size: 13px;
}
.tn-standing-row:first-child { border-top: none; }
.tn-standing-pos { color: rgba(var(--ink),0.7); width: 18px; flex-shrink: 0; }
.tn-standing-name { flex: 1; color: rgba(var(--ink),0.85); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-standing-pts { font-family: 'Fraunces', serif; font-weight: 900; font-size: 17px; color: var(--gold); flex-shrink: 0; }
.tn-standing-row.leider .tn-standing-name { color: var(--gold); font-weight: 600; }

.tn-round { margin-bottom: 18px; }
.tn-round-head {
  color: rgba(var(--ink),0.75); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.tn-deadline { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: normal; color: rgba(var(--ink),0.7); }
.tn-deadline label { font-size: 11px; }
.tn-deadline.overdue { color: #c0392b; font-weight: 600; }
.tn-deadline-input {
  border-radius: 6px; padding: 3px 6px; font-size: 11px; color: rgb(var(--ink));
  background: rgba(var(--ink),0.06); border: 1px solid var(--line); font-family: 'Space Grotesk', sans-serif;
}
.tn-tables { display: flex; flex-direction: column; gap: 8px; }
.tn-table-group-head {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 12px; color: var(--gold);
  margin: 4px 0 -2px; text-transform: uppercase; letter-spacing: 0.06em;
}
.tn-table-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(160deg, var(--felt-1) 0%, var(--felt-2) 100%); border: 1px solid rgba(var(--ink),0.08);
}
.tn-table-num { font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px; color: rgb(var(--ink)); flex-shrink: 0; }
.tn-table-players { flex: 1; min-width: 140px; color: rgba(var(--ink),0.8); font-size: 12px; }
.tn-table-status { font-size: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--ink),0.08); color: rgba(var(--ink),0.75); flex-shrink: 0; }
.tn-table-status.done { background: rgba(46,204,113,0.18); color: var(--ok); }

@media (max-width: 480px) {
  .tn-label { width: 100%; }
  .tn-table-card { gap: 8px; }
}

/* Knop "wis lokale statistieken" onder aan het statistiekenscherm. Bewust
   ingetogen: het is een opruimactie, geen hoofdhandeling — maar hij moet er
   wél zijn, want de privacyverklaring belooft hem (zie privacy.html). */
.stats-local-clear { margin-top: 22px; text-align: center; }

/* Toernooimelding onder de resultaatbalk: uitslag vastgelegd, potje geteld,
   of uitleg waarom het niet lukte. Ingetogen — het is bevestiging, geen
   waarschuwing. Kleur bewust donker genoeg voor AA op de balkachtergrond;
   zie scripts/contrast-check.js. */
.mrb-tournament-note {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.92rem;
  line-height: 1.45;
  color: #3d3a34;
}

/* Keuze "uitslag per tafel" in het toernooidetail (alleen organisator). */
.tn-result-rules { margin: 14px 0 6px; }
.tn-result-rules label { display: block; margin-bottom: 6px; }
.tn-result-rules select {
  width: 100%;
  max-width: 320px;
  padding: 9px 12px;
  border-radius: 8px;
}
.tn-result-rules select:disabled { opacity: 0.75; cursor: not-allowed; }

/* Melding voor wie via een QR of tafellink binnenkomt. Ingetogen: het is een
   bevestiging, geen waarschuwing. */
.tafelcode-melding {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.94rem;
  line-height: 1.45;
  color: #3d3a34;
}

/* Tafelcodes delen in het toernooidetail (alleen organisator). */
.tablecode-panel { margin: 14px 0; }
.tablecode-panel h4 { margin: 0 0 4px; }
.tablecode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.tablecode-row .tablecode-label { flex: 1 1 140px; min-width: 0; }
.tablecode-status { font-size: 0.86rem; opacity: 0.8; }
.tablecode-secret {
  display: block;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}
.tafelcode-qr { width: 100%; max-width: 260px; height: auto; display: block; }
.tablecode-qrwrap { margin: 12px 0; }

/* Printen is optioneel. Vraagt iemand er wel om, dan hoort er alleen het
   kaartje op papier te komen -- geen navigatie, geen knoppen. */
@media print {
  body > *:not(.tablecode-printsheet) { display: none !important; }
  .tablecode-printsheet { display: block !important; }
  .tablecode-card {
    page-break-inside: avoid;
    border: 1px solid #999;
    border-radius: 8px;
    padding: 14px;
    margin: 0 0 12px;
    max-width: 320px;
  }
  .tablecode-card .tafelcode-qr { max-width: 200px; }
}

/* ==========================================================================
   Pubquiz (assets/pubquiz.js) — vierde pijler naast toernooien/competities.
   Alles algemeens (.tn-row, .tn-upsell, .ms-row, .entry-panel, .panel,
   .empty-state, .footer-actions, .btn*) wordt hierboven al gedeeld; hier
   staat alleen wat echt pubquiz-eigen is.
   ========================================================================== */
.pq-toggle { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; cursor: pointer; color: rgba(var(--ink),0.7); font-size: 13px; }
.pq-toggle input { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; }

.pq-standings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.pq-team { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(160deg, var(--felt-1) 0%, var(--felt-2) 100%); border: 1px solid rgba(var(--ink),0.08); }
.pq-team.leider, .pq-team.eigen { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244,211,94,0.14); }
.pq-pos { color: rgba(var(--ink),0.65); font-size: 11px; width: 16px; flex-shrink: 0; }
.pq-name { flex: 1; color: rgb(var(--ink)); font-family: "Fraunces", serif; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-total { font-family: "Fraunces", serif; font-weight: 900; font-size: 23px; color: var(--gold); flex-shrink: 0; }

.pq-team-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(var(--ink),0.06); }
.pq-team-row:first-child { border-top: none; }
.pq-team-name { flex: 1; color: rgb(var(--ink)); font-family: "Fraunces", serif; font-size: 14px; }
.pq-remove { background: none; border: none; color: rgba(var(--ink),0.65); cursor: pointer; font-size: 13px; padding: 4px; flex-shrink: 0; }
.pq-remove:hover { color: rgba(var(--ink),0.7); }

.pq-team-reveal { padding: 10px 12px; margin: 4px 0 10px; border-radius: 10px; background: rgba(244,211,94,0.1); border: 1px solid rgba(244,211,94,0.35); }
.pq-link-input { flex: 1; min-width: 160px; font-size: 12px; }
.pq-qr-holder { margin-top: 10px; max-width: 200px; }
.pq-qr-holder svg { width: 100%; height: auto; display: block; }

.pq-ronde-card { padding: 12px 14px; border-radius: 12px; background: rgba(var(--ink),0.03); border: 1px solid var(--line); margin-bottom: 12px; }
.pq-ronde-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pq-ronde-naam { flex: 1; font-family: "Fraunces", serif; font-size: 15px; color: rgb(var(--ink)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-vraag-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; border-top: 1px solid rgba(var(--ink),0.05); }
.pq-vraag-item:first-child { border-top: none; }
.pq-vraag-tekst { flex: 1; min-width: 0; color: rgba(var(--ink),0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-vraag-form { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pq-vraag-form input, .pq-vraag-form textarea { margin-bottom: 6px; }
.pq-input { width: 100%; box-sizing: border-box; border-radius: 8px; padding: 9px 11px; color: rgb(var(--ink)); background: rgba(var(--ink),0.06); border: 1px solid var(--line); outline: none; font-family: "Space Grotesk", sans-serif; font-size: 13px; resize: vertical; }
.pq-mini-btn { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(244,211,94,0.15); color: var(--gold); font-size: 12px; font-weight: 700; cursor: pointer; }
.pq-mini-btn:disabled { opacity: 0.6; cursor: default; }
/* Bulk-import (sjabloon downloaden/Excel uploaden) boven het losse
   vraagformulier — zie rondeSetupCardHtml() in pubquiz.js. */
.pq-vraag-import { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.pq-badge { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.pq-badge.gepland { background: rgba(var(--ink),0.08); color: rgba(var(--ink),0.7); }
.pq-badge.open { background: rgba(244,211,94,0.25); color: var(--gold); }
.pq-badge.gesloten { background: rgba(231,111,81,0.2); color: #E76F51; }
.pq-badge.afgerond { background: rgba(42,157,143,0.2); color: #2A9D8F; }

.pq-review { margin-top: 8px; }
.pq-review-vraag { padding: 10px 0; border-top: 1px solid rgba(var(--ink),0.08); }
.pq-review-vraag:first-child { border-top: none; }
.pq-review-vraagtekst { font-family: "Fraunces", serif; font-size: 14px; color: rgb(var(--ink)); }
.pq-review-goed { color: rgba(42,157,143,0.9); font-size: 12px; margin: 2px 0 8px; }
.pq-review-row { padding: 8px 0; border-top: 1px solid rgba(var(--ink),0.05); }
.pq-review-row:first-child { border-top: none; }
.pq-review-name { color: rgb(var(--ink)); font-family: "Fraunces", serif; font-size: 13px; }
.pq-review-text { color: rgba(var(--ink),0.65); font-size: 13px; margin: 3px 0 7px; font-style: italic; }
.pq-review-knoprij { display: flex; gap: 6px; }
.pq-review-knop { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(var(--ink),0.06); color: rgb(var(--ink)); font-size: 12px; font-weight: 700; cursor: pointer; }
.pq-review-knop.fout.active { background: rgba(239,71,111,0.2); border-color: #EF476F; color: #EF476F; }
.pq-review-knop.half.active { background: rgba(244,211,94,0.25); border-color: var(--gold); color: var(--gold); }
.pq-review-knop.goed.active { background: rgba(42,157,143,0.2); border-color: #2A9D8F; color: #2A9D8F; }
.pq-review-auto { color: rgba(42,157,143,0.9); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

.pq-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pq-tab { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--ink),0.05); color: rgba(var(--ink),0.7); font-size: 12px; font-weight: 700; cursor: pointer; }
.pq-tab.active { background: rgba(244,211,94,0.22); border-color: var(--gold); color: var(--gold); }

.pq-team-vraag { padding: 12px 0; border-top: 1px solid rgba(var(--ink),0.06); }
.pq-team-vraag:first-child { border-top: none; }
.pq-vraagtekst { font-family: "Fraunces", serif; font-size: 16px; color: rgb(var(--ink)); margin-bottom: 8px; }
.pq-answer-row { display: flex; align-items: center; gap: 8px; }
.pq-answer-row input { flex: 1; min-width: 0; border-radius: 8px; padding: 9px 11px; color: rgb(var(--ink)); background: rgba(var(--ink),0.06); border: 1px solid var(--line); outline: none; font-family: "Space Grotesk", sans-serif; font-size: 13px; }
.pq-answer-row button { flex-shrink: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(244,211,94,0.18); color: var(--gold); font-weight: 700; font-size: 12px; cursor: pointer; }
.pq-answer-row.ingediend input { border-color: rgba(42,157,143,0.4); }
.tablecode-printsheet { display: none; }