/* ==========================================================================
   Kaartspellen-Online — modern, mobiel-eerst design system
   Doelgroep 50+: grote tekst, rustige kleuren, ruime klik-targets, hoog contrast.
   Zie HERBOUWPLAN.md §3.4 / §3.2.
   ========================================================================== */

:root {
  /* Kleuren */
  --c-bg:        #f1ede0;   /* warm crème (tikkeltje donkerder; was #f7f4ec) */
  --c-surface:   #ffffff;
  --c-surface-2: #fbf9f3;
  --c-felt:      #2e6b4f;   /* speelvilt-groen */
  --c-felt-dark: #204d39;
  --c-primary:   #1f5fa8;   /* toegankelijk blauw (CTA) */
  --c-primary-d: #17497f;
  --c-action:    #2e8b57;   /* speel/gratis groen */
  --c-action-d:  #23694180;
  --c-vip:       #c8a24b;   /* goud, spaarzaam */
  --c-vip-d:     #a8842f;
  --c-ink:       #1e2430;   /* bijna-zwart, contrast >7:1 op crème */
  --c-ink-soft:  #4a5361;
  --c-line:      #e4ddcb;
  --c-danger:    #b3261e;

  /* Typografie */
  --font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-body:  18px;
  --fs-small: 16px;
  --fs-lead:  22px;
  --fs-h2:    28px;
  --fs-h1:    clamp(30px, 5vw, 46px);
  --lh:       1.55;

  /* Vorm & ruimte */
  --radius:   14px;
  --radius-s: 10px;
  --shadow:   0 2px 6px rgba(30,36,48,.08), 0 8px 24px rgba(30,36,48,.06);
  --shadow-h: 0 4px 10px rgba(30,36,48,.12), 0 14px 34px rgba(30,36,48,.10);
  --tap:      48px;         /* minimale klik/tik-hoogte */
  --maxw:     1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--c-ink);
  background: var(--c-bg);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-primary); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---- Knoppen (ruime tap-targets) ------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--tap); padding: 12px 22px;
  font-size: 20px; font-weight: 700; line-height: 1;
  border: 0; border-radius: 999px; cursor: pointer;
  text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Knoppen die een link zijn (a.btn) kregen 9pt Trebuchet uit de oude
   `a, a:link, ...`-regel in global.css: even specifiek, maar later geladen, dus
   die won — een 22px-knop werd zo 12px. Geldt sitebreed (VIP-, betaal-, nieuws-
   en spelpagina). De maten hieronder zijn dezelfde als voor <button>. */
a.btn, a.btn:link, a.btn:visited, a.btn:active, a.btn:hover {
  font-family: Arial, Helvetica, sans-serif; font-size: 20px;
}
a.btn--lg, a.btn--lg:link, a.btn--lg:visited, a.btn--lg:active, a.btn--lg:hover { font-size: 22px; }
.btn--action  { background: var(--c-action); color: #fff; box-shadow: 0 3px 0 var(--c-action-d); }
.btn--action:hover  { background: #2b7d4f; }
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: 0 3px 0 var(--c-primary-d); }
.btn--primary:hover { background: var(--c-primary-d); }
.btn--vip     { background: var(--c-vip); color: #3a2c07; box-shadow: 0 3px 0 var(--c-vip-d); }
.btn--vip:hover { background: #d3b25a; }
.btn--ghost   { background: transparent; color: var(--c-primary); border: 2px solid var(--c-primary); }
.btn--lg { font-size: 22px; padding: 16px 30px; }
.btn--block { display: flex; width: 100%; }

/* ---- Header / navigatie --------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.site-header__row {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 8px 0;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--c-felt-dark); text-decoration: none; }
.brand__suit { color: var(--c-danger); }
/* Klaveren links (zelfde donkere tint als de favicon), harten rechts. */
.brand__suit--klaver { color: #1e2430; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* :not(.btn) zodat knoppen (btn--primary/vip/ghost) in de nav hun eigen
   tekstkleur houden — anders krijgt bijv. "Gratis account" donkere tekst op blauw. */
.site-nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; text-decoration: none; color: var(--c-ink); font-weight: 600;
}
.site-nav a:not(.btn):hover { background: var(--c-surface-2); }
.site-nav .btn { margin-left: 6px; }

.nav-toggle { display: none; }

/* ---- Hero ------------------------------------------------------------ */
.hero { background: linear-gradient(180deg, #fffdf7 0%, var(--c-bg) 100%); padding: 40px 0 28px; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
.hero h1 { color: var(--c-felt-dark); }
.hero p.lead { font-size: var(--fs-lead); color: var(--c-ink-soft); margin: 0 0 22px; max-width: 32ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* kaart-waaier (lichtgewicht, puur CSS — geen 3D/GSAP) */
.fan { position: relative; height: 220px; display: flex; justify-content: center; align-items: center; }
.fan .card {
  position: absolute; width: 118px; height: 168px; border-radius: 12px;
  background: #fff; border: 1px solid #e7e2d4;
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
  font-size: 52px; font-weight: 800; transform-origin: bottom center;
  transition: transform .3s ease;
}
.fan .card.red { color: var(--c-danger); }
.fan .card.black { color: var(--c-ink); }
.fan .card:nth-child(1) { transform: rotate(-18deg) translateX(-92px); }
.fan .card:nth-child(2) { transform: rotate(-9deg)  translateX(-46px); }
.fan .card:nth-child(3) { transform: rotate(0deg); z-index: 2; }
.fan .card:nth-child(4) { transform: rotate(9deg)   translateX(46px); }
.fan .card:nth-child(5) { transform: rotate(18deg)  translateX(92px); }
.fan:hover .card:nth-child(1) { transform: rotate(-22deg) translateX(-104px) translateY(-6px); }
.fan:hover .card:nth-child(5) { transform: rotate(22deg)  translateX(104px)  translateY(-6px); }

/* ---- Vertrouwensbalk ------------------------------------------------- */
.trustbar { background: var(--c-felt); color: #fff; }
.trustbar__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; padding: 14px 0; }
.trust { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-small); }
.trust svg { flex: 0 0 auto; }

/* ---- Sectie ---------------------------------------------------------- */
.section { padding: 40px 0; }
.section__head { text-align: center; margin-bottom: 24px; }
.section__head h2 { color: var(--c-felt-dark); }
.section__head p { color: var(--c-ink-soft); margin: 0; }

/* ---- Spel-grid ------------------------------------------------------- */
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.game-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.game-card__media { background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 168px; }
.game-card__media img { width: 180px; }
.game-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.game-card__title { font-size: 21px; font-weight: 800; color: var(--c-felt-dark); margin: 0; }
.game-card__desc { color: var(--c-ink-soft); font-size: var(--fs-small); margin: 0; flex: 1; }
.game-card__foot { margin-top: 6px; }

/* Bank-betaalinstructies in de popup — leesbaar (was 10pt). */
.ko-modal__body .bankinfo { font-size: 17px; line-height: 1.7; }
.ko-modal__body .bankinfo b { color: var(--c-felt-dark); }

/* ---- VIP-statuskaart (bovenaan vip.php voor VIP-leden) --------------- */
.vip-status { text-align: center; padding: 30px 16px 10px; }
.vip-status__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 999px; font-size: 38px;
  background: linear-gradient(135deg, #fbf3dd, #e9cf8f); border: 1px solid var(--c-vip);
  box-shadow: var(--shadow); margin-bottom: 12px;
}
.vip-status h1 { color: var(--c-felt-dark); margin: 0 0 6px; }
.vip-status__until { font-size: 19px; color: var(--c-ink); margin: 0 0 4px; }
.vip-status__until b { color: var(--c-felt-dark); }
.vip-status__note { color: var(--c-ink-soft); font-size: 16px; margin: 0; }

/* ---- VIP: compacte strook voor bestaande VIPs (verlengen) ----------- */
.vip-strip { background: linear-gradient(135deg, #fbf3dd, #f3e6c2); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.vip-strip__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; }
.vip-strip__txt { font-size: 17px; color: #6b5212; }
.vip-strip__txt b { color: #6b5212; }

/* ---- VIP-strook ------------------------------------------------------ */
.vip-band { background: linear-gradient(135deg, #fbf3dd, #f3e6c2); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.vip-band__grid { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; padding: 34px 0; }
.vip-band h2 { color: #6b5212; }
.vip-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.vip-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.vip-list .check { color: var(--c-action); flex: 0 0 auto; }
.vip-price { text-align: center; background: #fff; border: 1px solid var(--c-vip); border-radius: var(--radius); padding: 20px 26px; box-shadow: var(--shadow); }
.vip-price .amount { font-size: 40px; font-weight: 800; color: var(--c-felt-dark); line-height: 1; }
.vip-price .per { color: var(--c-ink-soft); font-size: var(--fs-small); margin-bottom: 14px; }

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background: var(--c-felt-dark); color: #dfe9e2; margin-top: 10px; }
.site-footer a { color: #fff; }
.site-footer__grid { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding: 26px 0; }
.site-footer small { color: #b6c7bd; }
/* Cross-promotie: bewust ingetogen — gedempt groen op de donkergroene footer
   (#204d39), zodat het aanwezig is zonder de aandacht te trekken.
   LET OP bij verder dempen: de doelgroep is 50+, dus leesbaarheid weegt zwaar.
   Deze tint haalt 3,6:1. Nog rustiger kan (#5c8a72 = 2,4:1) maar wordt dan
   slecht leesbaar; volledige WCAG-AA voor 12px vraagt juist #94bfa8 (4,7:1).
   Op hover springt de link naar vol wit. */
.site-footer__promo { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 0 18px; }
.site-footer__promo a { color: #7da692; font-size: 12px; text-decoration: none; }
.site-footer__promo a:hover, .site-footer__promo a:focus { color: #fff; text-decoration: underline; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .fan { order: -1; height: 180px; }
  .fan .card { width: 92px; height: 132px; font-size: 40px; }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .vip-band__grid { grid-template-columns: 1fr; }
  .vip-list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --fs-body: 17px; }
  .site-nav { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: 10px 16px; gap: 4px;
    transform: translateY(-130%); transition: transform .25s ease; box-shadow: var(--shadow); }
  .site-nav.open { transform: translateY(0); }
  .site-nav a { min-height: var(--tap); }
  /* Menuknop: het kale ☰-teken op 18px was voor onze doelgroep nauwelijks te
     zien (melding eigenaar). Nu een groter, donkerder teken mét het woord
     "Menu" erbij — tekst leest nu eenmaal makkelijker dan een symbool — in een
     knop met echte omranding, zodat hij als knop herkenbaar is. */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-left: auto; min-height: 48px; padding: 0 14px; border: 2px solid var(--c-felt);
    border-radius: 12px; background: #fff; color: var(--c-felt-dark); cursor: pointer;
    font-family: var(--font); font-size: 17px; font-weight: 700; line-height: 1; }
  .nav-toggle::before { content: "\2630"; font-size: 26px; line-height: 1; }
  .nav-toggle[aria-expanded="true"] { background: var(--c-felt); color: #fff; border-color: var(--c-felt); }
}
/* Smalle toestellen (t/m 380px): het woord "Menu" duwt de merknaam naar twee
   regels. Daar tonen we alleen het teken — maar wél groot en in de donkergroene
   omranding, dus nog altijd veel beter zichtbaar dan het oude dunne symbool. */
@media (max-width: 380px) {
  .nav-toggle { font-size: 0; gap: 0; padding: 0; width: 52px; }
  .nav-toggle::before { font-size: 28px; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { flex-direction: row; }
  .game-card__media { min-height: 0; width: 140px; flex: 0 0 140px; }
  .game-card__media img { width: 116px; }
  .hero { padding: 26px 0 18px; }
}

/* ---- Legacy-pagina's binnen de moderne schil ------------------------- */
/* Oude pagina's (faq, halloffame, online, profile, ...) renderen hun
   tabellen in .legacy-wrap; dit maakt ze leesbaar zonder ze te herbouwen. */
.legacy-wrap { padding-top: 26px; padding-bottom: 40px; font-size: 16px; overflow-x: auto; }
/* global.css (legacy) zet td/th op 9pt Trebuchet; binnen de spelregels erven
   cellen gewoon de moderne bodytekst, anders is tabeltekst ineens piepklein. */
.legacy-wrap td, .legacy-wrap th { font-size: inherit; font-family: inherit; }
.legacy-wrap table { border-collapse: collapse; max-width: 100%; }
.legacy-wrap table.shadow { background: var(--c-surface); border-radius: 10px; box-shadow: var(--shadow); }
/* Puntentelling-tabellen in de spelregels (klaverjassen/kraken/contree): op inhoud
   laten krimpen i.p.v. 35% van de volle paginabreedte — labels en getallen stonden
   metersver uit elkaar. */
.legacy-wrap table[width="35%"] { width: auto; margin-left: auto; margin-right: auto; }
/* play.php zet inline `.pregame .panel table { width:100% }` (zelfde specificiteit,
   later geladen) — deze specifiekere variant houdt de puntentabel toch smal. */
.pregame .panel .rules-body table[width="35%"] { width: auto; }
.legacy-wrap table[width="35%"] td { padding: 2px 0 2px 28px; }
.legacy-wrap table[width="35%"] td:first-child { padding-left: 0; }
.legacy-wrap table[width="35%"] td:nth-child(even) { text-align: right; }
.legacy-wrap table[width="35%"] td:nth-child(3) { padding-left: 64px; }
.legacy-wrap table[width="35%"] th { padding: 0 0 8px 0; text-align: left; }
.legacy-wrap img { display: inline-block; }
.legacy-wrap h1 { font-size: 28px; color: var(--c-felt-dark); }
.legacy-wrap h2 { font-size: 22px; color: var(--c-felt-dark); }
/* Links meelopen met de tekst eromheen: de legacy-stylesheet (css/global.css:69)
   zet ALLE links op 9pt/Trebuchet, waardoor ze in de spelregels 12px werden naast
   16px tekst — te klein voor de doelgroep. (Gemeld 28-7-2026.) */
.legacy-wrap a:not(.btn) { color: var(--c-primary); font-size: inherit; font-family: inherit; }
.legacy-wrap .rounded-white-border,
.legacy-wrap .rounded-blue-border { background: var(--c-surface); border: 1px solid var(--c-line) !important; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---- Chips (mijn berichten / vrienden op de home voor ingelogden) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 4px 0 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 18px; border-radius: 999px;
  background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow);
  font-weight: 700; color: var(--c-felt-dark); cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-h); }
.chip .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--c-primary); color: #fff; font-size: 15px;
}

/* Spel-van-de-dag / mededelingen-kaart */
.notice-card {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 18px; margin: 0 auto 18px; max-width: 640px;
}
.notice-card img.thumb { width: 84px; border-radius: 10px; }
.notice-card .body { flex: 1; min-width: 200px; }
.notice-card .body b { color: var(--c-felt-dark); font-size: 19px; }
.notice-card .body p { margin: 4px 0 0; color: var(--c-ink-soft); font-size: var(--fs-small); }

/* ---- Pagina-kop (losse pagina's) ------------------------------------ */
.page-head { padding: 26px 0 6px; }
.page-head h1 { color: var(--c-felt-dark); margin: 0; }
.page-head p { color: var(--c-ink-soft); margin: 6px 0 0; font-size: var(--fs-lead); }

.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.stack { display: grid; gap: 18px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px){ .cols-2 { grid-template-columns: 1fr; } }

/* ---- Profielpagina --------------------------------------------------- */
.profile-top { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; }
/* 6-9-2026: de avatar is een kolom geworden zodat het VIP-labeltje eronder past, gecentreerd
   onder de foto. De `:not(.vip-tag)` hieronder is niet optioneel: zonder die uitzondering krijgt
   het labeltje 120×120 px mee en wordt het een vierkant blok. Zelfde val en zelfde oplossing als
   bij de ranglijst (zie de opmerking bij .rank-row .who verderop). */
.profile-top .avatar { display: grid; justify-items: center; gap: 6px; }
.profile-top .avatar img, .profile-top .avatar > *:not(.vip-tag) { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow); }
.profile-top .avatar .vip-tag { margin-right: 0; }
.profile-name { font-size: 30px; font-weight: 800; color: var(--c-felt-dark); margin: 0 0 4px; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--c-ink-soft); font-weight: 600; }
.profile-meta b { color: var(--c-ink); }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.stat-badges { display: flex; flex-wrap: wrap; gap: 14px; }
/* 6-9-2026 (verzoek Edwin): de drie blokjes even hoog, en hun inhoud naar onderen uitgelijnd,
   zodat de labels ("punten totaal", "in de Hall of Fame", "hoogste rang ooit") op dezelfde hoogte
   staan. Even hoog gebeurt vanzelf — .stat-badges is een flexrij en die strekt zijn items — maar
   de INHOUD stond bovenaan, en het rangblokje is hoger dan de andere twee (op een telefoon staat
   het plaatje bóven het getal, op desktop is het plaatje 30 px tegen een regel tekst van 26).
   Daardoor zakte zijn label als enige omlaag. `justify-content: flex-end` duwt de inhoud in elk
   blokje naar de onderrand; het verschil in hoogte komt dan bovenin te staan, waar niets staat. */
.stat-badge { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 18px; text-align: center; min-width: 120px; display: flex; flex-direction: column; justify-content: flex-end; }
.stat-badge .num { font-size: 26px; font-weight: 800; color: var(--c-felt-dark); }
.stat-badge .lbl { font-size: 14px; color: var(--c-ink-soft); font-weight: 600; }
/* Het blokje "hoogste rang ooit" heeft een plaatje naast het getal. Stond als inline style op
   het element; 6-9-2026 hierheen verplaatst zodat de media-query hieronder hem kan omzetten
   zonder !important. */
.stat-badge .num--rang { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* 6-9-2026: op een telefoon pasten de drie blokjes niet naast elkaar en viel het derde eronder.
   Gemeten op live bij 375 px (devtools): de rij is 301 px breed, de blokjes waren 120 + 145 + 176
   plus 2× 14 px tussenruimte = 469 px. Ze delen de rij nu gelijk (flex: 1 1 0 en min-width 0 —
   zonder die min-width weigert een flex-item onder zijn inhoud te krimpen), met kleinere letters
   en een kleiner rangplaatje. Het rangblokje zet het plaatje bovenop in plaats van ernaast,
   anders past "rang 149" er niet naast. */
@media (max-width: 560px) {
  .stat-badges { gap: 8px; }
  .stat-badge { flex: 1 1 0; min-width: 0; padding: 10px 4px; }
  .stat-badge .num { font-size: 19px; }
  .stat-badge .lbl { font-size: 11px; line-height: 1.25; }
  .stat-badge .num--rang { flex-direction: column; gap: 2px; }
  .stat-badge .num--rang img { width: 20px !important; }
}

.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.friend { text-align: center; text-decoration: none; color: var(--c-ink); font-weight: 600; }
.friend img, .friend > a > * { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow); }
.friend span { display: block; margin-top: 4px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.game-stat { display: flex; gap: 14px; align-items: center; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 12px; padding: 12px; }
.game-stat img.cover { width: 84px; border-radius: 8px; }
.game-stat .meta { flex: 1; }
.game-stat .meta .title { font-weight: 800; color: var(--c-felt-dark); }
.game-stat .awards { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; margin-top: 4px; }
/* Awards-rij (spelpagina-hero + profiel-spellenlijst): per award het icoon met
   de telling ERONDER, strak gecentreerd. Vervangt de oude twee-rijen-tabellen
   waarvan de tellerregels tussen medailles en bekers nooit uitlijnden. */
.awards-mini { display: inline-flex; align-items: flex-end; gap: 10px; vertical-align: middle; }
.awards-mini .am { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.awards-mini .am img { display: block; }
.awards-mini .am b { font-size: 13px; font-weight: 600; color: var(--c-ink-soft); line-height: 1; }
.awards-geen { color: var(--c-ink-soft); }

/* ---- Hall of Fame / ranglijst --------------------------------------- */
.rank-list { display: grid; gap: 10px; }
/* Vaste kolommen zodat élke rij identiek uitlijnt:
   positie · avatar · naam+punten · top-3 spellen · awards-raster. */
.rank-row {
  display: grid; grid-template-columns: 44px 72px minmax(150px, 1fr) 300px 440px;
  gap: 18px; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px;
  padding: 14px 18px; box-shadow: var(--shadow);
}
.rank-row.me { background: #eafaef; border-color: var(--c-action); }
.rank-row .pos { font-size: 24px; font-weight: 800; color: var(--c-felt-dark); text-align: right; }
.rank-row .pos.top1 { color: #c8a24b; } .rank-row .pos.top2 { color: #9aa2af; } .rank-row .pos.top3 { color: #b07a3c; }
.rank-row .who img, .rank-row .who > *:not(.vip-tag) { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.rank-row .who-meta { min-width: 0; }
/* VIP-label ONDER de avatar (verzoek Edwin 4-9-2026). Let op: de regel hierboven zet élk
   direct kind van .who op een vaste maat: 64x64, 84x84 voor de top-3, 48x48 in de sz2-variant
   en 56x56 voor de sz2-top-3 (r.427-429, 443, 458-460). Zonder uitzondering wordt het labeltje
   daar een vierkant blokje van. Opgelost met :not(.vip-tag) op die vier regels in plaats van
   met een tegenregel: die verliest van r.458-460 (even zwaar, maar later in het bestand) en
   dan gaat het alleen bij de top-3 mis — precies de rij die je het eerst ziet. */
.rank-row .who { display: grid; justify-items: center; gap: 4px; }
.rank-row .who .vip-tag { margin-right: 0; }
.rank-row .name { font-weight: 800; color: var(--c-ink); text-decoration: none; font-size: 18px; }
.rank-row .name:hover { color: var(--c-primary); }
.rank-row .pts { color: var(--c-ink-soft); font-size: 15px; font-weight: 400; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Beste spellen: [rangplaatje] getal – speltitel. Regulier gewicht (alleen de
   spelernaam is vet, voor rust en hiërarchie). */
.rank-row .topgames { display: grid; gap: 4px; min-width: 0; }
.topgame { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.4; color: var(--c-ink); min-width: 0; }
.topgame img { height: 24px !important; width: auto !important; max-width: none !important; margin: 0 !important; flex: 0 0 auto; }
.topgame .tg-rank { font-weight: 400; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.topgame .tg-sep { color: var(--c-line); }
.topgame .tg-name { font-weight: 400; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Awards: stil raster zonder randen. Beide rijen gecentreerd, zodat de 4 bekers
   precies in het midden boven de 5 medailles staan. */
.rank-row .awards { display: grid; gap: 6px; justify-self: end; width: 440px; }
.award-row { display: flex; justify-content: center; gap: 0; }
.award {
  width: 72px; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.award b { font-weight: 600; font-size: 13px; line-height: 1; color: var(--c-ink-soft); }
.award--zero { opacity: .3; }
.award img { height: 24px !important; width: auto !important; max-width: none !important; margin: 0 !important; }
.award-row + .award-row { margin-top: 8px; }
/* Top 3: awards een tikkeltje groter, net als naam/positie/avatar. */
.rank-row.top1 .award img, .rank-row.top2 .award img, .rank-row.top3 .award img { height: 30px !important; }
.rank-row.top1 .award b,  .rank-row.top2 .award b,  .rank-row.top3 .award b  { font-size: 15px; }

/* Top 3: groter, met podium-accent links. */
.rank-row.top1, .rank-row.top2, .rank-row.top3 { padding: 20px 18px; border-left-width: 7px; border-left-style: solid; }
.rank-row.top1 { border-left-color: #c8a24b; }
.rank-row.top2 { border-left-color: #9aa2af; }
.rank-row.top3 { border-left-color: #b07a3c; }
.rank-row.top1 .pos, .rank-row.top2 .pos, .rank-row.top3 .pos { font-size: 34px; }
.rank-row.top1 .who img, .rank-row.top1 .who > *:not(.vip-tag),
.rank-row.top2 .who img, .rank-row.top2 .who > *:not(.vip-tag),
.rank-row.top3 .who img, .rank-row.top3 .who > *:not(.vip-tag) { width: 84px; height: 84px; }
.rank-row.top1 .name, .rank-row.top2 .name, .rank-row.top3 .name { font-size: 22px; }

/* Seizoensmodus (SEIZOENSPLAN S5): twee lijsten naast elkaar — links de stand
   van dit seizoen met het positieverschil, rechts de eindstand van vorig
   seizoen (een andere lijst, met de spelers en punten van toen). */
.hof-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-top: 18px; }
.hof-kop { font-size: 20px; font-weight: 800; color: var(--c-felt-dark); margin: 0 0 10px; }
.rank-row.rank-row--sz2 {
  grid-template-columns: 30px 52px minmax(0, 1fr) 54px;
  gap: 12px; padding: 10px 12px; align-items: center;
}
.rank-row.rank-row--geendelta { grid-template-columns: 30px 52px minmax(0, 1fr); }
.rank-row.rank-row--sz2 .pos { font-size: 20px; }
.rank-row.rank-row--sz2 .who img, .rank-row.rank-row--sz2 .who > *:not(.vip-tag) { width: 48px; height: 48px; border-radius: 10px; }
.rank-row.rank-row--sz2 .name { font-size: 16px; }
.rank-row.rank-row--sz2 .pts { font-size: 15px; margin-top: 2px; }
.rank-row.rank-row--sz2 .award-row { justify-content: flex-start; margin-top: 4px; min-height: 38px; }
/* 6-9-2026: die min-height is de uitlijning van de twee kolommen, geen opmaakdetail.
   Gemeten op live (1400px, devtools): een rij met awards is 114px hoog, een rij zonder
   ("nog geen awards" toont een streepje) 96px — het verschil zit volledig in .award-row,
   38px tegen 20px. 21 van de 200 rijen waren zo'n korte, ongelijk verdeeld over links en
   rechts, en over honderd regels liep dat op tot 339px verschil: links stond 100 ruim drie
   rijen hoger dan rechts. Door de awardregel altijd 38px te geven is elke niet-top-3-rij
   114px en staat links N naast rechts N. De top-3-rijen zijn 121px, maar dat zijn er in
   beide kolommen precies drie, dus die lopen gelijk op. */
.rank-row.rank-row--sz2 .award { width: auto; min-width: 32px; padding: 0 5px; }
.rank-row.rank-row--sz2 .award b { font-size: 12px; }
.rank-row.rank-row--sz2 .award img { height: 24px !important; }
.sz-delta-cel { text-align: right; }
/* Alleen hier groter; op de spelpagina staat dezelfde .pos-delta in een smalle
   tabelkolom en moet hij op 14px blijven. */
.sz-delta-cel .pos-delta { font-size: 18px; }
.award-geen { color: var(--c-ink-soft); font-size: 13px; opacity: .6; }
/* Top 3 blijft groter, maar niet zó veel dat de twee kolommen scheef lopen. */
.rank-row.rank-row--sz2.top1, .rank-row.rank-row--sz2.top2, .rank-row.rank-row--sz2.top3 { padding: 12px; }
.rank-row.rank-row--sz2.top1 .pos, .rank-row.rank-row--sz2.top2 .pos, .rank-row.rank-row--sz2.top3 .pos { font-size: 24px; }
.rank-row.rank-row--sz2.top1 .who img, .rank-row.rank-row--sz2.top1 .who > *:not(.vip-tag),
.rank-row.rank-row--sz2.top2 .who img, .rank-row.rank-row--sz2.top2 .who > *:not(.vip-tag),
.rank-row.rank-row--sz2.top3 .who img, .rank-row.rank-row--sz2.top3 .who > *:not(.vip-tag) { width: 56px; height: 56px; }
.rank-row.rank-row--sz2.top1 .name, .rank-row.rank-row--sz2.top2 .name, .rank-row.rank-row--sz2.top3 .name { font-size: 18px; }
.rank-row.rank-row--sz2.top1 .award img, .rank-row.rank-row--sz2.top2 .award img,
.rank-row.rank-row--sz2.top3 .award img { height: 24px !important; }
.rank-row.rank-row--sz2.top1 .award b, .rank-row.rank-row--sz2.top2 .award b,
.rank-row.rank-row--sz2.top3 .award b { font-size: 12px; }
@media (max-width: 900px){ .hof-kolommen { grid-template-columns: 1fr; } }

@media (max-width: 1120px){
  .rank-row { grid-template-columns: 44px 72px minmax(150px, 1fr) 300px; }
  .rank-row .awards { display: none; }
}
@media (max-width: 760px){
  .rank-row { grid-template-columns: 40px 60px 1fr; }
  .rank-row .topgames { display: none; }
}

/* ---- Online-spelers -------------------------------------------------- */
.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
.player { text-align: center; text-decoration: none; color: var(--c-ink); font-weight: 700; }
.player .pic { position: relative; }
/* contain i.p.v. cover: niet-vierkante avatars (bv. een staande speelkaart)
   worden volledig getoond binnen het kader i.p.v. afgesneden (verzoek 20-7). */
.player .pic img, .player .pic > a > * { width: 84px; height: 84px; border-radius: 14px; object-fit: contain; background: #fff; box-shadow: var(--shadow); }
.player span { display: block; margin-top: 6px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Net VIP-labeltje vóór de naam (i.p.v. een ster over de avatar).
   .player .vip-tag (2 classes) overrulet de bredere .player span-regel. */
.vip-tag, .player .vip-tag {
  display: inline-block; vertical-align: middle;
  background: var(--c-vip); color: #3a2c07;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  line-height: 1; padding: 3px 6px; border-radius: 6px; margin-right: 3px;
  white-space: nowrap; overflow: visible;
}

/* ---- Onboarding / welkom voor nieuwe spelers ------------------------- */
.onboarding {
  position: relative; background: linear-gradient(135deg, #fffdf7, #f3f8f4);
  border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 24px; margin: 0 auto 6px;
}
.onboarding h2 { color: var(--c-felt-dark); margin: 0 0 4px; font-size: 24px; }
.onboarding > p { color: var(--c-ink-soft); margin: 0 0 16px; font-size: var(--fs-lead); }
.onboarding__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.onboarding__step { display: flex; gap: 12px; align-items: flex-start; }
.onboarding__num {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px;
  background: var(--c-action); color: #fff; font-weight: 800; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.onboarding__step b { display: block; color: var(--c-ink); font-size: 17px; }
.onboarding__step span { color: var(--c-ink-soft); font-size: 15px; }
.onboarding__close {
  position: absolute; top: 10px; right: 12px; width: 40px; height: 40px;
  border: 0; background: transparent; font-size: 24px; color: var(--c-ink-soft);
  cursor: pointer; border-radius: 8px; line-height: 1;
}
.onboarding__close:hover { background: rgba(0,0,0,.05); }
@media (max-width: 760px){ .onboarding__steps { grid-template-columns: 1fr; } }

/* ---- FAQ-accordeon --------------------------------------------------- */
.faq-list { display: grid; gap: 12px; max-width: 760px; }
.faq-item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.faq-item summary { cursor: pointer; font-size: 19px; font-weight: 700; color: var(--c-felt-dark); padding: 16px 20px; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "＋"; color: var(--c-primary); font-weight: 800; }
.faq-item[open] summary::before { content: "－"; }
.faq-item .answer { padding: 0 20px 18px; line-height: 1.6; color: var(--c-ink); }

/* ==========================================================================
   Moderne popup (één stijl voor alle legacy cw_showPopup-aanroepen)
   ========================================================================== */
/* z-index 5000: boven het game-canvas (1000) en de mobiele
   fullscreen-speloverlay (2000) in play.php. */
.ko-modal-layer { position: fixed; inset: 0; z-index: 5000; overflow: auto; }
body.ko-modal-open { overflow: hidden; }
.ko-modal__backdrop {
  position: fixed; inset: 0; background: rgba(20, 30, 24, .55);
  backdrop-filter: blur(2px); animation: koFade .15s ease;
}
.ko-modal {
  position: relative; z-index: 1; margin: 6vh auto;
  width: fit-content; min-width: min(340px, calc(100vw - 32px));
  /* 900px zodat de bredere popups (profiel bewerken: velden + avatar naast
     elkaar) passen; smalle popups blijven smal door width: fit-content. */
  max-width: min(900px, calc(100vw - 32px));
  background: var(--c-surface); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.35); border: 1px solid var(--c-line);
  animation: koPop .16s ease; max-height: 88vh; overflow: auto;
}
.ko-modal__body { padding: 26px 28px 28px; text-align: left; color: var(--c-ink); font-size: 17px; }
.ko-modal__body h1 { font-size: 24px; color: var(--c-felt-dark); }
.ko-modal__body h2 { font-size: 22px; color: var(--c-felt-dark); margin-top: 0; }
.ko-modal__body h3 { font-size: 18px; color: var(--c-ink); }
.ko-modal__body a { color: var(--c-primary); font-weight: 600; }
.ko-modal__body table { width: 100%; }
.ko-modal__body td { padding: 4px 6px; vertical-align: middle; }
.ko-modal__close {
  position: absolute; top: 10px; right: 12px; width: 44px; height: 44px;
  border: 0; background: transparent; font-size: 30px; line-height: 1;
  color: var(--c-ink-soft); cursor: pointer; border-radius: 10px; z-index: 2;
}
.ko-modal__close:hover { background: rgba(0,0,0,.06); color: var(--c-ink); }
@keyframes koFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes koPop  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Legacy form-elementen binnen de moderne popup leesbaar & consistent maken. */
.ko-modal__body input[type="text"],
.ko-modal__body input[type="password"],
.ko-modal__body input[type="email"],
.ko-modal__body textarea,
.ko-modal__body select {
  font: inherit; font-size: 17px; width: 100%; max-width: 320px;
  padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius-s);
  background: var(--c-surface-2); color: var(--c-ink);
}
.ko-modal__body input[type="text"]:focus,
.ko-modal__body input[type="password"]:focus,
.ko-modal__body textarea:focus { outline: 3px solid var(--c-primary); outline-offset: 1px; }
.ko-modal__body textarea { min-height: 120px; max-width: 100%; }
.ko-modal__body input[maxlength="2"], .ko-modal__body input[maxlength="4"] { width: auto; display: inline-block; }
/* Geboortedatum-vakjes: breed genoeg voor de cijfers + padding, gecentreerd.
   !important overrulet de inline width:30px/60px uit de popup-HTML. */
.ko-modal__body #dateofbirth_day,
.ko-modal__body #dateofbirth_month { width: 3.6em !important; }
.ko-modal__body #dateofbirth_year { width: 4.8em !important; }
.ko-modal__body #dateofbirth_day,
.ko-modal__body #dateofbirth_month,
.ko-modal__body #dateofbirth_year { text-align: center; padding-left: 8px; padding-right: 8px; }
.ko-modal__body input[type="checkbox"], .ko-modal__body input[type="radio"] { width: 20px; height: 20px; vertical-align: middle; }

/* Legacy 'a.button' → moderne pil-knop (goed contrast, ruime tap-target).
   Geldt in de popup én elders waar de oude knop nog voorkomt. */
a.button, a.button:active {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-action) !important; color: #fff !important;
  min-height: var(--tap); padding: 12px 24px !important; margin: 8px 0 0;
  border: 0; border-radius: 999px; font: 700 18px/1 var(--font) !important;
  text-decoration: none; box-shadow: 0 3px 0 var(--c-action-d); float: none; height: auto;
}
a.button:hover { background: #2b7d4f !important; transform: translateY(-1px); }
a.button span, a.button:active span {
  background: none !important; padding: 0 !important; display: inline !important;
  line-height: 1 !important; color: #fff !important; font-weight: 700 !important;
}

/* ---------------------------------------------------------------------------
   Inhoud van de sociale popups (Berichten / Vrienden / Recente activiteit).
   De .ko-modal-schil is al modern; dit stylet de legacy-tabelinhoud netjes. */
.ko-modal__body .header {
  display: block; font-size: 18px; font-weight: 800; color: var(--c-felt-dark);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--c-line);
}
.ko-modal__body .header--offline { color: #b3261e; }
.ko-modal__body .header--online  { color: #2e8b57; }
.ko-friend-chip--online { background: #e7f5ec; border-color: #b7e0c6; }
.ko-friend-chip--online:hover { background: #d8eede; }
.ko-modal__body a { color: var(--c-primary); text-decoration: none; font-weight: 600; }
.ko-modal__body a:hover { text-decoration: underline; }

/* Vrienden als nette chips in twee kolommen. */
.ko-friend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ko-friend-chip {
  display: block; padding: 8px 12px; border-radius: 999px;
  background: #eef3f0; border: 1px solid var(--c-line);
  color: var(--c-felt-dark) !important; font-weight: 700 !important; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ko-friend-chip:hover { background: #e2ede7; text-decoration: none !important; }
@media (max-width: 480px) { .ko-friend-grid { grid-template-columns: 1fr; } }

/* Berichten als kaartjes met zachte scheiding i.p.v. harde tabelranden. */
.ko-modal__body #messages table {
  width: 100% !important; border: 1px solid var(--c-line) !important;
  border-radius: 12px; background: #fbfcfb; margin: 10px 0 !important;
  border-collapse: separate !important; overflow: hidden;
}
.ko-modal__body #messages table td { padding: 4px 12px; }

/* Antwoorden/Verwijderen als kleine knopjes met icoon (geen oude GTK-plaatjes). */
.ko-msg-btn {
  display: inline-block; padding: 5px 12px 5px 30px; border-radius: 999px;
  font-size: 14px; font-weight: 700 !important; position: relative; margin-right: 6px;
}
.ko-msg-reply { background: #eaf3ee; color: var(--c-felt-dark) !important; }
.ko-msg-reply:hover { background: #dcebe3; text-decoration: none !important; }
.ko-msg-del { background: #fbeceb; color: #b3261e !important; }
.ko-msg-del:hover { background: #f6dcda; text-decoration: none !important; }
.ko-msg-btn::before { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); }
.ko-msg-reply::before { content: "\21A9"; }   /* ↩ */
.ko-msg-del::before   { content: "\1F5D1"; }  /* 🗑 */

/* Activiteitenlijst: award-icoontjes op één lijn, luchtige regels. */
.ko-modal__body img.icon { vertical-align: middle; }

/* Succes-/foutmeldingen (modern, gebruikt in popups & AJAX-antwoorden). */
.successmessage, .errormessage {
  display: inline-block; font-style: normal; font-weight: 700; font-size: 17px;
  padding: 12px 16px; border-radius: var(--radius-s); background: none;
}
.successmessage { color: #1c6b3f; background: #e5f6ec; }
.errormessage  { color: var(--c-danger); background: #fbe7e6; }

/* ==========================================================================
   Moderne scoretabellen (vervangt de oude blauwe #333388-tabellen)
   ========================================================================== */
.score-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--c-surface); border: 1px solid var(--c-line);
  /* caption valt buiten de table-box: bovenhoeken rondt de caption zelf af */
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow); overflow: hidden; margin: 0 0 20px;
}
.score-table caption {
  background: var(--c-felt); color: #fff; font-weight: 800; font-size: 17px;
  padding: 12px 14px; text-align: center; caption-side: top;
  border-radius: var(--radius) var(--radius) 0 0;
}
/* Kop in dezelfde kleur als de bijbehorende speelknop:
   dagscores = groen (btn--action), toernooiscores = blauw (btn--primary). */
.score-table--medal  caption { background: var(--c-action); }
.score-table--trophy caption { background: var(--c-primary); }
.score-table td { padding: 8px 10px; border-bottom: 1px solid var(--c-line); font-size: 16px; }
.score-table tr:last-child td { border-bottom: 0; }
.score-table .st-pos  { text-align: center; font-weight: 700; color: var(--c-ink-soft); width: 44px; white-space: nowrap; }
/* Punten rechts uitlijnen en smal houden; de naamkolom slikt de resterende
   breedte op (anders rekt de puntenkolom in een breed paneel enorm uit). */
.score-table .st-pts  { font-weight: 800; color: var(--c-felt-dark); text-align: right; width: 90px; white-space: nowrap; }
.score-table .st-rank { text-align: center; width: 44px; }
.score-table .st-name { width: 100%; }
/* Positieverschil t.o.v. vorig seizoen: eigen kolom rechts, rechts uitgelijnd. */
.score-table .st-delta { text-align: right; width: 62px; white-space: nowrap; }
.pos-delta { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pos-delta--op     { color: #2e8b57; }
.pos-delta--af     { color: #c0392b; }
.pos-delta--gelijk { color: #b6bac2; }
.pos-delta--nieuw  { color: #8a8f98; font-weight: 600; font-size: 13px; }
/* font-size: het legacy global.css zet a/a:link op 9pt; zonder deze regel is
   een spelersnaam-mét-link ineens kleiner dan een naam zonder link. */
.score-table .st-name a { color: var(--c-ink); text-decoration: none; font-weight: 600; font-size: inherit; }
.score-table .st-name a:hover { color: var(--c-primary); }
/* Je eigen rij moet minstens zo goed opvallen als die van een vriend. #eafaef was zo bleek
   dat hij tegen wit wegviel, terwijl tr.friend het duidelijk zichtbare #fbe7bd heeft — de
   eigen score las daardoor zwakker dan die van een ander (melding eigenaar 31-8-2026).
   #c8efdb is even sterk als dat zandkleur, maar dan in het speelvilt-groen van de site.
   Contrast met de tekst erop (--c-felt-dark #204d39) is 7,7:1, ruim boven de AAA-grens —
   telt bij deze doelgroep zwaarder dan bij de gemiddelde site. */
.score-table tr.me td { background: #c8efdb; }
.score-table tr.me .st-name a { color: var(--c-felt-dark); font-weight: 800; }
/* De moderne popup (login/aanmelden) wordt óók op de spelpagina getoond, en
   die laadt als enige het legacy global.css met `a, a:link { font-size: 9pt }`.
   Zonder deze regel zijn de links in de popup daar 12px en op de rest van de
   site 17px. `inherit` helpt niet: de <td> eromheen is via diezelfde legacy
   regel ook 12px — vandaar de vaste 17px. Datzelfde legacy-bestand zet ook
   Trebuchet MS op body/td/input; die heeft een kleinere x-hoogte, dus bij
   gelijke px oogt de popup daar alsnog kleiner. Vandaar ook de font-family. */
.ko-modal, .ko-modal td, .ko-modal th,
.ko-modal input, .ko-modal select, .ko-modal textarea,
.ko-modal a, .ko-modal a:link, .ko-modal a:visited,
.ko-modal a:hover, .ko-modal a:active { font-family: var(--font); }
.ko-modal a, .ko-modal a:link, .ko-modal a:visited,
.ko-modal a:hover, .ko-modal a:active { font-size: 17px; }
/* Labels (Gebruikersnaam/Wachtwoord) in de login/aanmeld-popup: op de spelpagina 12px door
   diezelfde legacy-regel; vaste maat zoals de links (Edwin 9-9-2026, .be-test). */
.ko-modal td, .ko-modal th, .ko-modal label { font-size: 17px; }

/* Vriendenrij: duidelijk gemarkeerd. LET OP: er bestaat elders een generieke
   .friend-class (vriendenlijst op het profiel) met text-align:center en een
   eigen font — die moet hier niet doorwerken. */
/* De reset moet op de RIJ staan: `inherit` op de td erft juist de center van
   die generieke .friend-regel. De cellen met een eigen uitlijning
   (st-pos/st-rank) blijven gewoon gecentreerd. */
.score-table tr.friend { text-align: left; font-weight: 400; }
.score-table tr.friend td { background: #fbe7bd; }
.score-table tr.friend .st-name a { color: #7a5200; font-weight: 800; }
.score-table tr.friend .st-pts { color: #7a5200; }
/* Rangen-overzicht in de FAQ (embleem + bereik + benodigde punten). */
.rangen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.rangen-tegel { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 10px; padding: 10px; text-align: center; }
.rangen-tegel img { display: block; margin: 0 auto 6px; }
.rangen-tegel b { display: block; color: var(--c-felt-dark); }
.rangen-tegel span { display: block; font-size: 14px; color: var(--c-ink-soft); }
.score-table .st-empty { text-align: center; color: var(--c-ink-soft); padding: 16px; }
/* Medailles, bekers én rangicoon even groot in de scoretabel (override op de
   basis-img-regel height:auto). */
.score-table img { display: inline-block; vertical-align: middle; }
/* 26px i.p.v. 34px: de medaille-/beker-bronnen zijn maar ~30px, dus 34px was
   een upscale (blurry). 26px is een downscale (scherp); de rangplaatjes (75px
   bron) delen deze regel en krijgen zo dezelfde, kleinere maat. */
.score-table .st-pos img,
.score-table .st-rank img { height: 26px !important; width: auto !important; max-width: none !important; margin: 0 !important; }

/* ==========================================================================
   Ingelogd: 'Jouw standen per spel' op de voorpagina
   ========================================================================== */
.standings { margin: 8px 0 26px; }
.standings__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.standings__head h2 { color: var(--c-felt-dark); margin: 0; font-size: 24px; }
.standings__head .sub { color: var(--c-ink-soft); font-size: var(--fs-small); }
.standings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.standing-card {
  display: grid; grid-template-columns: 116px 1fr; gap: 10px 16px; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 11px 16px; text-decoration: none; color: var(--c-ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.standing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
/* Eigenaar-preview van offline spellen: lichtrood blok i.p.v. wit. */
.standing-card--offline { background: #fdeaea; border-color: #f0bcbc; }
.standing-card__offline { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: #a33; }
/* Spel-icoon op de oorspronkelijke verhouding (222x162), duidelijk zichtbaar, niet bijgesneden. */
.standing-card__cover { width: 116px; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.standing-card__body { min-width: 0; }
.standing-card__name { grid-column: 1 / -1; font-weight: 800; color: var(--c-felt-dark); font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nette uitlijning: labels in kolom 1, waarden in kolom 2. */
.stand-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; align-items: center; }
.stand-stats dt { color: var(--c-ink-soft); font-weight: 600; font-size: 15px; }
.stand-stats dd { margin: 0; font-weight: 800; color: var(--c-ink); display: flex; align-items: center; gap: 8px; font-size: 16px; }
.stand-stats dd img { height: 26px !important; width: auto !important; max-width: none !important; margin: 0 !important; }
.stand-stats dd sup { font-size: 11px; }
.stand-none { color: var(--c-ink-soft); font-weight: 700; }
@media (max-width: 480px){ .standing-card { grid-template-columns: 104px 1fr; gap: 12px; } .standing-card__cover { width: 104px; } }

/* ==========================================================================
   Homepage variant A (gast): compacte intro, spellen direct
   ========================================================================== */
.home-intro { padding: 34px 0 6px; text-align: center; background: linear-gradient(180deg, #fffdf7 0%, var(--c-bg) 100%); }
.home-intro h1 { color: var(--c-felt-dark); margin-bottom: 6px; }
.home-intro .lead { color: var(--c-ink-soft); font-size: var(--fs-lead); margin: 0 auto; max-width: 58ch; }

/* SEO-ondersteunende tekst onderaan de gast-home: rustig, leesbaar. */
.seo-intro { max-width: 760px; }
.seo-intro h2 { color: var(--c-felt-dark); font-size: 22px; }
.seo-intro p { color: var(--c-ink-soft); font-size: 16px; line-height: 1.7; }

/* ==========================================================================
   Homepage variant B (ingelogd): "Mijn speeltafel"-dashboard
   ========================================================================== */
/* Sociale rij (berichten/vrienden/updates/online/HoF) — horizontaal boven de spellen. */
.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 26px; justify-content: space-between; }
.social-row .chip { font-family: var(--font); font-size: 16px; flex: 1 1 auto; justify-content: center; }
/* Nieuwsknop (7-9-2026). Hij is een <a> en geen <button>, dus de chip-opmaak moet hier ook voor
   een link gelden: geen onderstreping en dezelfde tekstkleur als de andere knoppen. */
.social-row a.chip { text-decoration: none; color: inherit; }
/* De pulse loopt zolang de nieuwsbrief ongelezen is. `prefers-reduced-motion` respecteren is hier
   geen formaliteit: de doelgroep is 50+ en een blijvend bewegend element is voor sommige mensen
   letterlijk misselijkmakend. Zonder animatie blijft de rand zichtbaar, dus de knop valt nog
   steeds op. */
.chip--pulse { box-shadow: 0 0 0 0 rgba(46,139,87,.55); animation: ko-pulse 1.8s ease-out infinite; }
@keyframes ko-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(46,139,87,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(46,139,87,0); }
  100% { box-shadow: 0 0 0 0   rgba(46,139,87,0); }
}
@media (prefers-reduced-motion: reduce) {
  .chip--pulse { animation: none; box-shadow: 0 0 0 3px rgba(46,139,87,.45); }
}

/* ==========================================================================
   Spel-hub: tabs (Standen / Spelregels) + markering eigen variant
   ========================================================================== */
.tabs { display: flex; gap: 6px; margin-top: 28px; border-bottom: 2px solid var(--c-line); flex-wrap: wrap; }
.tabs .tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 700 19px var(--font); color: var(--c-ink-soft);
  padding: 12px 18px; min-height: var(--tap);
  border-radius: 12px 12px 0 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabs .tab:hover { background: var(--c-surface-2); color: var(--c-ink); }
.tabs .tab.active { color: var(--c-felt-dark); background: var(--c-surface); border-bottom-color: var(--c-action); }
.tab-panel {
  display: none; background: var(--c-surface); border: 1px solid var(--c-line); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.tab-panel.active { display: block; }

/* Ingelogd: actieve variant met de twee speelacties */
.variant-hero {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.variant-hero img.cover { width: 110px; border-radius: 12px; box-shadow: var(--shadow); }
.variant-hero .body { flex: 1; min-width: 240px; }
.variant-hero h3 { margin: 0 0 4px; font-size: 24px; color: var(--c-felt-dark); }
.variant-hero p { margin: 0; color: var(--c-ink-soft); }
.variant-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.variant-switch { margin-top: 12px; display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; color: var(--c-ink-soft); font-weight: 600; }
.variant-switch a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px;
  box-shadow: var(--shadow); text-decoration: none; font-weight: 700; color: var(--c-felt-dark);
}
.variant-switch a:hover { transform: translateY(-1px); box-shadow: var(--shadow-h); }

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

/* Inline formulier-validatie (o.a. Lid worden-popup): fout in rood onder het veld. */
.field-error { color: #c0392b; font-size: 14px; font-weight: 700; margin-top: 5px; line-height: 1.3; }

/* Activatie: sluitknop op notice-cards + social-proof-regel (gast-home). */
.notice-card { position: relative; }
.notice-card__sluit { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--c-ink-soft); cursor: pointer; padding: 4px 8px; }
.notice-card__sluit:hover { color: var(--c-ink); }
.social-proof { margin: 10px 0 0; font-size: 17px; color: var(--c-felt-dark); }

/* Lancerings-banner (na de cutover, ingelogde spelers). */
.launch-banner { background: var(--c-felt); color: #fff; }
.launch-banner__row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.launch-banner__txt { font-size: 16px; line-height: 1.4; }
.launch-banner__txt a { color: #ffe95e; font-weight: 700; white-space: nowrap; }
.launch-banner__x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 8px; opacity: .85; }
.launch-banner__x:hover { opacity: 1; }

/* ---- Zijrail-advertenties voor VIP's (niet-spelpagina's) --------------------
   VIP's zien op deze pagina's uitsluitend advertenties aan de zijkanten; Auto
   Ads staan voor hen uit (zie templates/modern/header.php). Verborgen tot er
   echt ruimte is: de content is max. 1200px, dus pas vanaf 1560px past er
   160px aan weerszijden zonder iets te overlappen. */
.ko-siderail { display: none; position: fixed; top: 50%; transform: translateY(-50%); width: 160px; z-index: 5; }
.ko-siderail--links  { left: 8px; }
.ko-siderail--rechts { right: 8px; }
@media (min-width: 1560px) { .ko-siderail { display: block; } }

/* ---- Botmarkering (alleen zichtbaar voor Edjepedje) ------------------------
   De markering komt alleen in de HTML terecht als Edjepedje is ingelogd (zie
   bot_markering() in functions.php); voor iedereen anders bestaat dit element
   simpelweg niet. Deze stijl is dus louter cosmetisch. */
.botmerk { font-size: .95em; opacity: .8; margin-right: 2px; }

/* ── VIP-pakketkeuze, ontwerp B (9-9-2026) ─────────────────────────────── */
.vip-voordelen { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--c-felt-dark); margin: 0 0 16px; }
.vip-voordelen span::before { content: "\2713"; color: #2e8b57; font-weight: 900; margin-right: 5px; }
.vip-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; text-decoration: none; color: var(--c-felt-dark);
  border: 2px solid #dfe7e1; border-radius: 14px; padding: 16px 16px; margin: 0 0 12px; background: #fbfaf6; }
.vip-plan:hover { border-color: #2e8b57; }
.vip-plan--beste { border-color: #2e8b57; background: #eef7f1; margin-top: 10px; }
.vip-plan__badge { position: absolute; top: -12px; left: 16px; background: #2e8b57; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: .3px; }
.vip-plan__links { display: flex; flex-direction: column; text-align: left; }
.vip-plan__links b { font-size: 19px; }
.vip-plan__links small { font-size: 14px; color: var(--c-ink-soft); }
.vip-plan__prijs { font-size: 28px; font-weight: 900; white-space: nowrap; }
.vip-plan__knop { padding: 12px 20px !important; font-size: 17px !important; }
.vip-methoden { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; font-size: 15px; color: var(--c-ink-soft); }
.vip-methoden__of a { color: #1f5fb3; font-weight: 700; }
.vip-logo { display: inline-flex; align-items: center; background: #fff; border: 1px solid #dfe7e1; border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: 14px; }
.vip-logo--ideal { color: #cc0066; } .vip-logo--bc { color: #1e5aa8; }
.vip-trust { text-align: center; color: var(--c-ink-soft); font-size: 14px; margin: 8px 0 0; }
@media (max-width: 480px) { .vip-plan { flex-wrap: wrap; } .vip-plan__knop { width: 100%; text-align: center; } }
.vip-methoden__kop { font-weight: 700; color: var(--c-felt-dark); }
.vip-logo { cursor: pointer; }
.vip-logo input { margin: 0 6px 0 0; accent-color: #2e8b57; }
.vip-logo.is-gekozen { border-color: #2e8b57; box-shadow: 0 0 0 2px #cfe8d8; }
.vip-logo--bank { color: var(--c-felt-dark); }
.vip-stap { font-weight: 800; color: var(--c-felt-dark); font-size: 17px; margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.vip-stap__nr { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: #2e8b57; color: #fff; align-items: center; justify-content: center; font-size: 15px; }
label.vip-plan { cursor: pointer; }
label.vip-plan input { position: absolute; opacity: 0; width: 0; height: 0; }
label.vip-plan.is-gekozen { border-color: #2e8b57; box-shadow: 0 0 0 3px #cfe8d8; background: #eef7f1; }
label.vip-plan:not(.is-gekozen) { opacity: .85; }
/* VIP-status: ster links van de tekst (9-9-2026) */
.vip-status--rij { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; }
.vip-status--rij .vip-status__badge { margin: 0; flex: 0 0 auto; }
.vip-status--rij .vip-status__tekst h1 { margin-top: 0; }
@media (max-width: 480px) { .vip-status--rij { flex-direction: column; text-align: center; } }
/* Betaalopties als vierkante blokken (9-9-2026) */
.vip-methoden { gap: 14px; }
.vip-methoden .vip-logo { flex-direction: column; justify-content: center; width: 112px; height: 96px; font-size: 16px; border-radius: 12px; border-width: 2px; padding: 8px; }
.vip-methoden .vip-logo img { height: 44px; width: auto; max-width: 90px; margin-bottom: 8px; border-radius: 6px; }
.vip-methoden .vip-logo--bc img { height: 34px; }
.vip-methoden .vip-logo--bc, .vip-methoden .vip-logo--ideal { color: var(--c-felt-dark); }
.vip-methoden .vip-logo input { position: absolute; opacity: 0; width: 0; height: 0; }
.vip-methoden .vip-logo { position: relative; }
.vip-methoden span.vip-logo { cursor: default; }
/* Uitgelogd, ontwerp A compact (9-9-2026) */
.vip-plannen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 4px; }
.vip-plan--kolom { flex-direction: column; text-align: center; gap: 2px; padding: 22px 12px 14px; margin: 10px 0 0; }
.vip-plan--kolom b { font-size: 18px; }
.vip-plan--kolom .vip-plan__prijs { font-size: 34px; line-height: 1.1; }
.vip-plan--kolom small { font-size: 14px; color: var(--c-ink-soft); }
.vip-plan--kolom .vip-plan__badge { left: 50%; transform: translateX(-50%); }
.vip-methoden--klein { gap: 8px; margin: 12px 0 0; }
.vip-methoden.vip-methoden--klein .vip-logo { flex-direction: row; width: auto; height: auto; padding: 4px 10px; font-size: 14px; border-radius: 8px; border-width: 1px; }
.vip-methoden.vip-methoden--klein .vip-logo img { height: 22px; margin: 0 6px 0 0; }
.vip-methoden__of { color: var(--c-ink-soft); }
@media (max-width: 420px) { .vip-plannen { grid-template-columns: 1fr; } }
.vip-methoden .vip-logo.is-gekozen { background: #eef7f1; box-shadow: 0 0 0 3px #cfe8d8; }