/* ==========================================================================
   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); }
.legacy-wrap a:not(.btn) { color: var(--c-primary); }
.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; }
.profile-top .avatar img, .profile-top .avatar > * { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow); }
.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; }
.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; }
.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; }

.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); }
/* Seizoensmodus (SEIZOENSPLAN S5): 4 kolommen — positie, avatar, naam, delta. */
.rank-row--sz { grid-template-columns: 44px 72px minmax(150px, 1fr) 190px; }
.sz-vorig { text-align: right; }
.sz-vorig-label { display: block; font-size: 12px; color: var(--c-ink-soft); }
.sz-delta { font-weight: 800; font-size: 18px; white-space: nowrap; }
.sz-delta--op { color: #2e8b57; }
.sz-delta--af { color: #c0392b; }
.sz-delta--gelijk, .sz-delta--nieuw { color: #8a8f98; }
.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 > * { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.rank-row .who-meta { min-width: 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 > *,
.rank-row.top2 .who img, .rank-row.top2 .who > *,
.rank-row.top3 .who img, .rank-row.top3 .who > * { width: 84px; height: 84px; }
.rank-row.top1 .name, .rank-row.top2 .name, .rank-row.top3 .name { font-size: 22px; }

@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%; }
/* 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); }
.score-table tr.me td { background: #eafaef; }
.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; }

/* 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; }

/* ==========================================================================
   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; }