/* ==========================================================================
   KAARTAVONDMODULE — gedeelde stijl (vlakke versie)

   Uitgangspunten:
   • Vlak. Geen matglas, geen zware schaduwen. Kleurvlakken en haarlijnen doen
     het werk; diepte komt van de rangschikking, niet van effecten. De enige
     uitzondering is de achtergrond van het scherm zelf: die draagt in het
     donkere thema dezelfde groene gloed als de lobby in de app. Wat erop
     staat blijft vlak.
   • Panelen zijn doorzichtig zwart in plaats van een eigen grijstint, zodat de
     gloed er doorheen blijft leven — precies zoals de tegels in de lobby.
   • Twee rollen, twee kleuren: groen voor waar je op klikt, geel voor wat de
     aandacht vraagt (titels, iconen, randen). De rest is gedempt.
   • Alles hangt aan de tokens hieronder. Wie deze stijl later naar een andere
     pagina wil doortrekken, neemt dat blok mee en de rest volgt vanzelf.

   Klassenamen zijn dezelfde gebleven als in de vorige versie, zodat de
   opmaak van de pagina's niet hoefde te wijzigen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root,
:root[data-thema="donker"] {
    /* Vlakken, van diep naar dichtbij.

       Ze werken zoals in de app: een paneel is géén eigen grijsgroene tint,
       maar doorzichtig zwart (in de lobby `Colors.black45`), zodat de gloed
       van de achtergrond er doorheen blijft leven. Wat bovenop een paneel komt
       wordt daarom lichter — wit met een lage dekking — en niet donkerder.
       Nog altijd vlakke kleurvlakken: geen verloop, geen matglas. */
    --bg:           #070A08;
    --surface:      rgba(0, 0, 0, 0.42);
    --surface-2:    rgba(255, 255, 255, 0.05);
    --surface-3:    rgba(255, 255, 255, 0.10);

    /* Dekkende vlakken. Alles wat over de pagina heen zweeft of iets moet
       afdekken — menu's, dialogen, keuzelijsten — mag niet doorzichtig zijn,
       anders lees je de inhoud eronder mee. Dit is de surfacekleur van de app
       (AppColors.surface van het thema Nachtgroen). */
    --surface-vast: #121612;
    /* De balk bovenaan blijft plakken bij het scrollen en moet dus dekken. Ze
       ligt bewust dicht bij --bg: zo leest ze als een verlengstuk van de
       achtergrond en niet als een aparte plaat over de gloed. */
    --nav-bg:       #0A0F0C;

    /* Lijnen — haarlijnen in wit, zoals de white12/white24 van de app. Op
       doorzichtige vlakken houdt dat de randen zichtbaar zonder een tweede
       kleur in het spel te brengen. */
    --line:         rgba(255, 255, 255, 0.11);
    --line-sterk:   rgba(255, 255, 255, 0.22);

    /* Tekst */
    --text:         #E8EEEB;
    --text-muted:   #94A49C;
    --text-zacht:   #6E7E76;

    /* De kleur die de aandacht trekt: titels, iconen, randen, actieve staat.
       Ze vult geen knoppen — dat doet --knop. Dezelfde rolverdeling als in de
       app, waar het oranjegeel de accenten draagt en groen de knoppen. */
    --accent:       #FFC93C;
    --accent-ink:   #14180E;
    --accent-hover: #FFD666;
    --accent-zacht: rgba(255, 201, 60, 0.13);
    --accent-rand:  rgba(255, 201, 60, 0.34);

    /* Waarop je klikt: het groen van de app (AppColors.primary /
       primaryBright van het thema Nachtgroen), met donkere letters erop. */
    --knop:         #1FA84B;
    --knop-hover:   #2FCB63;
    --knop-ink:     #06140B;

    /* Goud blijft goud, ook waar de accentkleur iets anders wordt */
    --goud:         #FFC93C;

    /* Let op, dit vraagt aandacht. Los van de accentkleur, want een
       waarschuwing hoort nooit als "gelukt" te lezen. */
    --waarschuwing:       #FFC93C;
    --waarschuwing-zacht: rgba(255, 201, 60, 0.12);
    --waarschuwing-rand:  rgba(255, 201, 60, 0.32);

    /* Betekeniskleuren */
    --groen:        #3ECF8E;
    --groen-zacht:  rgba(62, 207, 142, 0.12);
    --groen-rand:   rgba(62, 207, 142, 0.30);
    --rood:         #FF6B6B;
    --rood-zacht:   rgba(255, 107, 107, 0.12);
    --rood-rand:    rgba(255, 107, 107, 0.30);
    --blauw:        #5EA8FF;
    --blauw-zacht:  rgba(94, 168, 255, 0.12);
    --blauw-rand:   rgba(94, 168, 255, 0.30);

    /* De achtergrond van de pagina: dezelfde groene gloed rechtsboven als de
       lobby in de app (kLobbyGreenGradient in lib/theme/app_palette.dart).
       Daar staat het middelpunt op Alignment(0.75, -0.9) met straal 1.3 —
       omgerekend naar CSS is dat 87,5% / 5% en een cirkel van 130vmin. De
       kleuren en de stops zijn letterlijk die van de app, zodat de module en
       het spel dezelfde achtergrond tonen.

       Dit is de enige plek waar de vlakke huisstijl een kleurverloop gebruikt:
       het is de bodem van het scherm, geen element erop. Panelen, knoppen en
       kaarten blijven vlak. */
    --bg-gloed-kern: #155C2E;
    --bg-gloed:      #0E3B1D;
    --bg-verloop: radial-gradient(
        circle min(130vmin, 900px) at 87.5% 5%,
        var(--bg-gloed-kern) 0%,
        var(--bg-gloed) 35%,
        var(--bg) 85%
    );

    /* Maten */
    --r-kaart:      14px;
    --r:            10px;
    --r-klein:      8px;
    --ring:         0 0 0 3px var(--accent-zacht);
    --schaduw-zwevend: 0 12px 32px rgba(0, 0, 0, 0.45);

    /* Ook de eigen kleuren van de browser (scrollbars, keuzelijsten) */
    color-scheme: dark;
}

/* Het lichte thema blijft wat het was: dekkende vlakken op een vlakke
   achtergrond. Doorzichtig zwart heeft hier geen gloed om te tonen, en op wit
   leest een grijze waas alleen maar vuil. */
:root[data-thema="licht"] {
    --bg:           #F4F6F5;
    --surface:      #FFFFFF;
    --surface-2:    #F1F4F2;
    --surface-3:    #E8EDEA;

    --surface-vast: #FFFFFF;
    --nav-bg:       #FFFFFF;

    --line:         #E0E6E3;
    --line-sterk:   #C7D1CC;

    --text:         #131A17;
    --text-muted:   #5E6D65;
    --text-zacht:   #86948C;

    /* Goud leest niet op wit; in het lichte thema neemt het groen van
       Troeven de rol van accentkleur over. */
    --accent:       #16744B;
    --accent-ink:   #FFFFFF;
    --accent-hover: #10603D;
    --accent-zacht: rgba(22, 116, 75, 0.10);
    --accent-rand:  rgba(22, 116, 75, 0.28);

    /* Hier waren knop en accent altijd al dezelfde groene kleur. */
    --knop:         #16744B;
    --knop-hover:   #10603D;
    --knop-ink:     #FFFFFF;

    --goud:         #9A6B05;

    --waarschuwing:       #B57C0A;
    --waarschuwing-zacht: rgba(181, 124, 10, 0.10);
    --waarschuwing-rand:  rgba(181, 124, 10, 0.28);

    --groen:        #14814F;
    --groen-zacht:  rgba(20, 129, 79, 0.10);
    --groen-rand:   rgba(20, 129, 79, 0.26);
    --rood:         #C43535;
    --rood-zacht:   rgba(196, 53, 53, 0.09);
    --rood-rand:    rgba(196, 53, 53, 0.25);
    --blauw:        #1F6FD0;
    --blauw-zacht:  rgba(31, 111, 208, 0.09);
    --blauw-rand:   rgba(31, 111, 208, 0.25);

    /* Het lichte thema blijft vlak: geen gloed, gewoon --bg. */
    --bg-verloop:   none;

    --schaduw-zwevend: 0 12px 32px rgba(16, 30, 24, 0.14);

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. BASIS
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-sterk); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-zacht); background-clip: content-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv05" 1, "ss03" 1;
}

/* De gloed hangt in een eigen vaste laag en niet op de body zelf. Zo blijft ze
   op haar plaats terwijl de pagina scrollt — net als in de app — zonder
   background-attachment: fixed, dat op iOS niet betrouwbaar werkt.
   z-index: -1 zet de laag boven de vlakke achtergrondkleur van de body, maar
   onder alle inhoud. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-verloop);
    pointer-events: none;
}

h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
b, strong { font-weight: 650; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* --------------------------------------------------------------------------
   3. ICONEN
   Getekend door ui.js. Ze nemen de kleur en de grootte van hun omgeving over,
   zodat een icoon in een knop nooit uit de toon valt.
   -------------------------------------------------------------------------- */
.ico {
    width: 1.15em; height: 1.15em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
}
.ico-groot { width: 1.5em; height: 1.5em; }
/* Titels: het icoon draagt de accentkleur, de tekst blijft gewoon leesbaar. */
h2 > .ico, h4 > .ico { color: var(--accent); }

/* --------------------------------------------------------------------------
   4. BALK BOVENAAN
   -------------------------------------------------------------------------- */
nav {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 0 max(4vw, 20px);
    height: 60px;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 100;
}
.nav-logo {
    display: flex; align-items: center; gap: 11px;
    font-weight: 700; font-size: 0.95rem; color: var(--text);
    letter-spacing: 0.02em; text-decoration: none;
}
.nav-logo img { width: 30px; height: 30px; border-radius: 8px; }
.nav-logo small {
    display: block; font-size: 0.62rem; font-weight: 500;
    letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase;
}
.nav-right { display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------------------------
   5. BOUWSTENEN
   -------------------------------------------------------------------------- */
.container { padding: 28px max(4vw, 20px) 64px; max-width: 1400px; margin: 0 auto; width: 100%; flex: 1; }
.container-smal { max-width: 720px; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-kaart);
    padding: 24px;
    margin-bottom: 16px;
    width: 100%;
}
.card > h2 {
    font-size: 1.05rem;
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 6px;
}
.card > h2 + .hint { margin-top: 0; margin-bottom: 18px; }
.hint { color: var(--text-muted); font-size: 0.875rem; line-height: 1.55; margin-bottom: 16px; }

/* Uitklapbare kaart: de titel is zelf de knop. */
.card > h2.uitklap-kop {
    cursor: pointer; justify-content: space-between; margin-bottom: 0;
    user-select: none; border-radius: var(--r-klein);
}
.card > h2.uitklap-kop:hover { color: var(--accent); }
.card > h2.uitklap-kop:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.uitklap-pijl { color: var(--text-muted); transition: transform 0.18s ease; }
.uitklap-kop[aria-expanded="true"] .uitklap-pijl { transform: rotate(180deg); }
.uitklap-inhoud { margin-top: 18px; }

/* --------------------------------------------------------------------------
   6. KNOPPEN
   Vlak: één kleurvlak of één lijn. Geen verloop, geen schaduw, en ze
   verspringen niet als je erover gaat.
   -------------------------------------------------------------------------- */
button,
.btn-primary, .btn-secondary, .btn-danger, .btn-succes, .btn-menu {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 0.9rem; font-weight: 600;
    line-height: 1.2;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--r);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--knop); color: var(--knop-ink); }
.btn-primary:hover:not(:disabled) { background: var(--knop-hover); }

.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--line-sterk); }

.btn-danger { background: transparent; color: var(--rood); border-color: var(--rood-rand); }
.btn-danger:hover:not(:disabled) { background: var(--rood-zacht); }

.btn-succes { background: transparent; color: var(--groen); border-color: var(--groen-rand); }
.btn-succes:hover:not(:disabled) { background: var(--groen-zacht); }

.btn-klein { padding: 7px 12px; font-size: 0.82rem; border-radius: var(--r-klein); }
.btn-groot { padding: 13px 24px; font-size: 0.95rem; width: 100%; }

/* Knop met alleen een icoon: even hoog als breed. */
.btn-ico { padding: 8px; width: 34px; height: 34px; }
.btn-ico .ico { width: 18px; height: 18px; }

/* Menuknop: draagt een pijltje, want er klapt iets onder open. */
.btn-menu { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-menu:hover { background: var(--surface-3); }
.btn-menu::after {
    content: ""; width: 8px; height: 8px; margin-left: 2px;
    border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: 0.65;
    transition: transform 0.18s ease;
}
.btn-menu[aria-expanded="true"] { border-color: var(--accent-rand); color: var(--accent); background: var(--accent-zacht); }
.btn-menu[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); opacity: 1; }

/* Het paneel staat vast ten opzichte van het venster: de pagina knipt met
   overflow-x alles weg wat onder de vensterrand uitkomt. De code plaatst het
   zelf en klapt naar boven open als er onderaan te weinig plaats is. */
.menu-paneel {
    position: fixed; z-index: 9500;
    width: min(380px, 92vw); padding: 14px;
    max-height: 80vh; overflow-y: auto;
    background: var(--surface-vast);
    border: 1px solid var(--line-sterk);
    border-radius: var(--r-kaart);
    box-shadow: var(--schaduw-zwevend);
}
.menu-titel {
    font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 650; margin-bottom: 9px;
}
.menu-scheiding { height: 1px; background: var(--line); margin: 14px 0; }

.keuzerij { display: flex; gap: 8px; flex-wrap: wrap; }
.keuzerij button {
    flex: 1 1 130px; padding: 9px 12px; font-size: 0.85rem;
    background: var(--surface-2); color: var(--text); border-color: var(--line);
}
.keuzerij button:hover { background: var(--surface-3); }
/* Wat je gekozen hebt, is een keuze en geen accent: hetzelfde groen als de
   knoppen, net zoals een geselecteerde tegel in de app. */
.keuzerij button.actief { background: var(--knop); color: var(--knop-ink); border-color: var(--knop); }

/* --------------------------------------------------------------------------
   7. FORMULIEREN
   -------------------------------------------------------------------------- */
input, textarea, select {
    width: 100%; padding: 11px 13px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-zacht); }
input:hover, textarea:hover, select:hover { border-color: var(--line-sterk); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: var(--ring); }
input[type="checkbox"] { width: auto; }
select {
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 17px center, right 12px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}
select option { background: var(--surface-vast); color: var(--text); }
textarea { min-height: 88px; resize: vertical; }

label.veld { display: block; margin-bottom: 14px; }
label.veld > span { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
.rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
.groep {
    border: 1px solid var(--line); border-radius: var(--r-kaart);
    padding: 18px; margin-bottom: 16px; background: var(--surface-2);
}
.groep h4 { font-size: 0.92rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.aanvink { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 0.89rem; cursor: pointer; }
.aanvink input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--knop); cursor: pointer; }
.aanvink span { display: inline-flex; align-items: center; gap: 8px; }
.aanvink .ico { color: var(--text-muted); }

/* Een haarlijn met een woordje ertussen: "of met een e-mailadres". Scheidt twee
   manieren om hetzelfde te doen, zonder er een kop van te maken. */
.scheidingslijn {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 16px 0; color: var(--text-zacht); font-size: 0.8rem;
}
.scheidingslijn::before, .scheidingslijn::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
}

/* --------------------------------------------------------------------------
   8. TABBLADEN
   Een onderlijn in plaats van gekleurde pillen: rustiger, en het is meteen
   duidelijk dat de tabs bij elkaar horen.
   -------------------------------------------------------------------------- */
.tab-menu {
    display: flex; gap: 2px; margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
}
.tab-menu::-webkit-scrollbar { display: none; }
.tab-btn {
    background: none; border: none; border-radius: 0;
    color: var(--text-muted);
    padding: 11px 14px;
    font-size: 0.89rem; font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-btn.active .ico { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. TABELLEN
   -------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 0.89rem; }
th {
    text-align: left; padding: 9px 12px;
    color: var(--text-muted); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   10. KLEINE ONDERDELEN
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 650; letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.badge-groen { background: var(--groen-zacht); color: var(--groen); border-color: var(--groen-rand); }
.badge-grijs { background: var(--surface-2); color: var(--text-muted); border-color: var(--line); }
.badge-goud  { background: var(--accent-zacht); color: var(--accent); border-color: var(--accent-rand); }
.badge-rood  { background: var(--rood-zacht); color: var(--rood); border-color: var(--rood-rand); }

.leeg { text-align: center; color: var(--text-muted); padding: 32px 16px; font-size: 0.88rem; }

.nummer-bal {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: var(--r-klein);
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.nummer-bal.leeg-bal { background: var(--surface-2); color: var(--text-muted); border: 1px dashed var(--line-sterk); }

/* De plaats in het klassement. Vroeger stonden hier medaille-emoji; dit leest
   sneller en het blijft op elk toestel hetzelfde. */
.rang {
    display: inline-grid; place-items: center;
    min-width: 26px; height: 26px; padding: 0 7px;
    border-radius: 7px; font-size: 0.8rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line);
}
.rang-1 { background: rgba(255, 201, 60, 0.16); color: var(--goud); border-color: rgba(255, 201, 60, 0.4); }
.rang-2 { background: rgba(180, 195, 205, 0.14); color: #B9C6CE; border-color: rgba(180, 195, 205, 0.34); }
.rang-3 { background: rgba(207, 132, 76, 0.14); color: #D08E5A; border-color: rgba(207, 132, 76, 0.32); }
:root[data-thema="licht"] .rang-2 { color: #64757F; border-color: rgba(100, 117, 127, 0.3); background: rgba(100, 117, 127, 0.1); }
:root[data-thema="licht"] .rang-3 { color: #9A5A25; border-color: rgba(154, 90, 37, 0.3); background: rgba(154, 90, 37, 0.09); }

/* Een regel met een icoon ervoor: wanneer, waar, inleg… */
.info-regel {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 11px 0; border-bottom: 1px solid var(--line);
}
.info-regel:last-child { border-bottom: none; }
.info-regel > .ico { color: var(--text-muted); width: 18px; height: 18px; margin-top: 2px; }
.info-regel .label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.info-regel .waarde { font-weight: 600; }

/* --------------------------------------------------------------------------
   11. DEEL-LINK
   -------------------------------------------------------------------------- */
.deellink {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r); padding: 11px 14px; margin: 4px 0 16px 0;
}
.deellink > .ico { color: var(--text-muted); }
.deellink code {
    color: var(--accent); font-size: 0.88rem; word-break: break-all; flex: 1; min-width: 200px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   12. TAFELSCHEMA
   -------------------------------------------------------------------------- */
.tafel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tafel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-kaart); padding: 16px; }
.tafel h4 { font-size: 0.92rem; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.team { border-radius: var(--r-klein); padding: 9px 12px; margin-bottom: 8px; }
.team-wij { background: var(--groen-zacht); border: 1px solid var(--groen-rand); }
.team-zij { background: var(--rood-zacht); border: 1px solid var(--rood-rand); }
.team-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.speler { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 0.88rem; cursor: grab; }
.speler .nr { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-3); font-size: 0.74rem; font-weight: 650; }
.speler.geselecteerd { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Tafelschema in lijstvorm: één regel per tafel. */
.schema-lijst { display: flex; flex-direction: column; gap: 6px; }
.schema-rij {
    display: grid; grid-template-columns: 52px 1fr 46px 1fr; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--r);
    background: var(--surface-2); border: 1px solid var(--line);
}
.schema-rij .tafel-bal {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-klein);
    background: var(--accent-zacht); border: 1px solid var(--accent-rand);
    color: var(--accent); font-weight: 700; font-size: 1rem; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.schema-rij .tafel-bal small { display: block; font-size: 0.48rem; letter-spacing: 0.1em; opacity: 0.8; font-weight: 650; }
/* min-width:0 laat de kolommen krimpen; anders duwen lange namen de rij
   breder dan het scherm in plaats van te herschikken. */
.schema-rij > * { min-width: 0; }
.schema-team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.schema-team.wij { justify-content: flex-end; }
.schema-team.zij { justify-content: flex-start; }
.schema-vs { text-align: center; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-zacht); text-transform: uppercase; }
.speler-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px 4px 4px; border-radius: 999px;
    background: var(--surface-3); border: 1px solid transparent;
    font-size: 0.85rem; font-weight: 600;
}
.speler-chip .nr {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface); font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.schema-team.wij .speler-chip { background: var(--groen-zacht); }
.schema-team.zij .speler-chip { background: var(--rood-zacht); }
.klikbaar .speler-chip { cursor: pointer; }
.klikbaar .speler-chip:hover { border-color: var(--line-sterk); }
.speler-chip.geselecteerd { border-color: var(--accent); box-shadow: var(--ring); }
.speler-chip.enkel-nr { padding: 4px; }
.speler-chip.enkel-nr .nr { width: 26px; height: 26px; font-size: 0.78rem; }

/* Worden enkel de nummers getoond, dan past een tafel altijd op één regel —
   ook op de smalste telefoon. Deze variant stapelt dus nooit. */
.schema-lijst.enkel-nummers .schema-rij {
    grid-template-columns: auto minmax(0, auto) auto minmax(0, auto);
    justify-content: start; gap: 6px 10px;
}
.schema-lijst.enkel-nummers .schema-team.wij { justify-content: flex-start; }

/* Zoeken op deelnemersnummer boven het schema: in een volle zaal wil je enkel
   je eigen tafel zien en niet door alle rijen scrollen. */
.tafel-zoek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.tafel-zoek input {
    width: 130px; flex: 0 0 auto; padding: 9px 12px;
    font-weight: 650; font-variant-numeric: tabular-nums;
}
.tafel-zoek button { flex: 0 0 auto; }

@media (max-width: 420px) {
    .tafel-zoek input { width: 100%; }
    .tafel-zoek button { flex: 1 1 0; }
}

@media (max-width: 620px) {
    .schema-rij { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; padding: 10px; }
    .schema-rij > .schema-team, .schema-rij > .schema-vs { grid-column: 2; }
    .schema-team.wij, .schema-team.zij { justify-content: flex-start; }
    .schema-vs { text-align: left; }
    /* Krapper op een telefoon, zodat beide spelers van een team naast elkaar
       blijven staan en een tafel drie regels beslaat in plaats van vijf. */
    .speler-chip { font-size: 0.8rem; gap: 5px; padding: 4px 8px 4px 4px; max-width: 100%; }
    .speler-chip .nr { width: 20px; height: 20px; font-size: 0.65rem; }
    .schema-team { gap: 5px; }

    /* De nummervariant houdt haar vier kolommen; ze is smal genoeg. */
    .schema-lijst.enkel-nummers .schema-rij { grid-template-columns: 40px minmax(0, auto) auto minmax(0, auto); }
    .schema-lijst.enkel-nummers .schema-rij > .schema-team,
    .schema-lijst.enkel-nummers .schema-rij > .schema-vs { grid-column: auto; }
    .schema-lijst.enkel-nummers .schema-vs { text-align: center; font-size: 0.6rem; letter-spacing: 0; }
    .schema-lijst.enkel-nummers .tafel-bal { width: 36px; height: 36px; font-size: 0.92rem; }
    .schema-lijst.enkel-nummers .speler-chip.enkel-nr { padding: 3px; }
    .schema-lijst.enkel-nummers .speler-chip.enkel-nr .nr { width: 24px; height: 24px; font-size: 0.72rem; }
}

/* Op de smalste toestellen (een iPhone SE is 320 breed) blijft er net te
   weinig plaats over; hier gaat er nog wat lucht uit. */
@media (max-width: 380px) {
    .schema-lijst.enkel-nummers .schema-rij { gap: 5px 6px; padding: 8px; }
    .schema-lijst.enkel-nummers .schema-team { gap: 4px; }
    .schema-lijst.enkel-nummers .tafel-bal { width: 32px; height: 32px; font-size: 0.85rem; }
    .schema-lijst.enkel-nummers .tafel-bal small { font-size: 0.42rem; }
    .schema-lijst.enkel-nummers .speler-chip.enkel-nr { padding: 2px; }
    .schema-lijst.enkel-nummers .speler-chip.enkel-nr .nr { width: 22px; height: 22px; font-size: 0.68rem; }
    .schema-lijst.enkel-nummers .schema-vs { font-size: 0.55rem; }
}

/* --------------------------------------------------------------------------
   13. PROJECTIEWEERGAVE — leesbaar van achteraan de zaal
   -------------------------------------------------------------------------- */
/* Ligt over de pagina heen en dekt de gloed van de body af; daarom krijgt ze
   hetzelfde verloop, anders zou de projectie vlak zwart zijn. */
.projectie {
    position: fixed; inset: 0; z-index: 9000;
    background-color: var(--bg);
    background-image: var(--bg-verloop);
    display: flex; flex-direction: column; overflow: auto; padding: 2vh 2.5vw;
    font-size: calc(var(--proj, 1) * 1rem);
}
/* De kop: klein de naam van de kaartavond, groot waar je naar kijkt. Eén lijn
   eronder scheidt hem van de tafels; verder geen versiering. */
/* De ruimte onder de kop staat in em en niet in vh: ze hoort mee te groeien
   met de tekst, niet met de hoogte van het scherm. */
.projectie-kop {
    display: flex; align-items: center; gap: 16px; flex: 0 0 auto;
    padding-bottom: 0.5em; margin-bottom: 0.7em;
    border-bottom: 1px solid var(--line);
}
.projectie-titel { font-size: 2em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.projectie-titel small {
    display: block; font-size: 0.36em; color: var(--accent);
    font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase;
}
.projectie-knoppen { margin-left: auto; display: flex; gap: 6px; opacity: 0.2; transition: opacity 0.2s; }
.projectie-knoppen:hover { opacity: 1; }
.projectie-knoppen button { padding: 8px 11px; font-size: 0.85rem; background: var(--surface-2); color: var(--text); border-color: var(--line); }
.projectie-knoppen button:hover { background: var(--surface-3); }
/* Sluit rond de inhoud in plaats van mee te rekken met het scherm: alleen zo
   kan de code meten hoe hoog de regels echt zijn en de tekst daarop afstemmen. */
.projectie-inhoud { flex: 0 0 auto; }
/* Het aantal kolommen zet de code zelf, want dat hangt af van het aantal
   tafels en van hoe groot het scherm is. */
.proj-raster { display: grid; gap: 0.4em 1.6em; align-content: start; }

/* Elke tafel en elke plaats in de stand is een eigen tegel. Vanachteraan de
   zaal zoek je een nummer, geen tekstregel: de vlakjes geven het oog houvast.
   Alles staat in em, zodat pasProjectieSchaal() de hele weergave in één keer
   groter of kleiner kan zetten. */
.proj-rij, .proj-stand {
    align-items: center;
    padding: 0.4em 0.55em;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0.45em;
}
.proj-rij {
    display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.3em 0.7em;
}
/* Het tafelnummer (en de plaats in de stand) als vlakje in de accentkleur. */
.proj-nr {
    display: block; text-align: center;
    font-size: 1.35em; font-weight: 700; line-height: 1.35;
    color: var(--accent); background: var(--accent-zacht);
    border-radius: 0.28em; font-variant-numeric: tabular-nums;
}
.proj-team { font-size: 1.25em; font-weight: 600; line-height: 1.3; }
.proj-team.wij { color: var(--groen); text-align: right; }
.proj-team.zij { color: var(--rood); }
/* Het deelnemersnummer voor de naam: gedempt, maar wel als eigen vlakje. */
.proj-team .nr, .proj-stand .nr {
    display: inline-block; padding: 0 0.3em; margin-right: 0.3em;
    border-radius: 0.25em; background: var(--surface-2);
    color: var(--text-muted); font-size: 0.72em; font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.proj-tegen { font-size: 0.72em; color: var(--text-zacht); letter-spacing: 0.1em; text-transform: uppercase; }
.proj-stand {
    display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 2.4em 2.4em;
    gap: 0.6em; font-size: 1.25em;
}
.proj-stand .naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-stand .proj-nr { font-size: 1em; }

/* Fijn kopregeltje boven elke kolom: net genoeg om te weten wat waar staat.
   Het is een label, geen tegel — dus zonder vlak en zonder rand. */
.proj-kop, .proj-kop.proj-stand {
    background: none; border: none; border-radius: 0;
    padding: 0 0.55em 0.3em; margin-bottom: 0.1em;
}
.proj-kop > span:not(.proj-tegen) {
    font-size: 0.6em; font-weight: 650; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-muted);
    background: none; padding: 0;
}
.proj-kop .rechts { text-align: right; }
.proj-kop .midden { text-align: center; }
.proj-melding { font-size: 1.3em; color: var(--text-muted); text-align: center; padding: 2em; }

/* --- Titelscherm -----------------------------------------------------------
   Een scherm met enkel een titel, of helemaal blanco. Daar hoort geen kopregel
   bij: die zet de code leeg, en hier gaat ze uit de weg staan (rechtsboven) in
   plaats van ruimte in te nemen. Zo staat de titel echt in het midden — en in
   de beheermodule blijven de knopjes van het venster wel bereikbaar. */
.projectie.toont-titel .projectie-kop {
    position: absolute; top: 2vh; right: 2.5vw; z-index: 1;
    border-bottom: none; padding-bottom: 0; margin-bottom: 0;
}
.projectie.toont-titel .projectie-inhoud {
    flex: 1 1 auto; min-height: 0; display: flex;
    /* Ruimte voor de vermelding die rechtsonder over de inhoud heen staat. */
    padding-bottom: 4vh;
}
.proj-titelscherm {
    flex: 1 1 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.6em;
    text-align: center; max-width: 90%; margin: 0 auto;
}
/* Net als elders staat de tekst in em (en groeit dus mee met de projectie), met
   een bovengrens in schermhoogtes voor een venster dat niet schermvullend is. */
.proj-titelscherm-titel {
    font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
    font-size: min(3.2em, 16vh); text-wrap: balance;
}
.proj-titelscherm-titel.lang { font-size: min(2.4em, 12vh); }
.proj-titelscherm-titel.erg-lang { font-size: min(1.8em, 9vh); }
.proj-titelscherm-onder {
    color: var(--text-muted); line-height: 1.35;
    font-size: min(1.25em, 5.5vh); text-wrap: balance;
}

/* --- Sponsorslides ---------------------------------------------------------
   Een lijst met tafels krimpt tot ze past; een sponsorslide doet het omgekeerd
   en vult net de ruimte die er is. Daarom mag de inhoud hier wél meerekken met
   het scherm: de logo's nemen de hoogte die overblijft en schalen zichzelf. */
.projectie.toont-sponsors .projectie-inhoud {
    flex: 1 1 auto; min-height: 0; display: flex;
    /* Ruimte voor de vermelding die rechtsonder over de inhoud heen staat. */
    padding-bottom: 4vh;
}
/* Zelf ook een flexvak in plaats van height:100%: een percentage heeft een vaste
   hoogte nodig om zich op te baseren, en die is er hier niet — de hoogte komt
   net van de flexverdeling. */
.sponsor-slide {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.7em; text-align: center;
}
/* De tekst staat in em (en groeit dus mee met de projectie), maar krijgt een
   bovengrens in schermhoogtes. Op een lager scherm — een venster dat niet op
   volledig scherm staat — zou een bijschrift van drie regels anders alle ruimte
   opeten en bleef er voor de logo's niets over. */
.sponsor-tekst {
    flex: 0 0 auto; color: var(--text-muted); line-height: 1.45;
    font-size: min(0.95em, 3.4vh);
}
/* Het aantal kolommen zet de code zelf; hoeveel logo's er zijn bepaalt dat.
   De rijen verdelen de hoogte die overblijft onder elkaar (grid-auto-rows), want
   anders zijn ze net zo hoog als het logo dat erin staat en blijft de helft van
   het scherm leeg. De ondergrens houdt de logo's overeind wanneer het toch krap
   wordt: zij zijn waar deze slide voor dient, niet het bijschrift. */
.sponsor-beelden {
    flex: 1 1 auto; min-height: 40%; width: 100%;
    display: grid; gap: 0.7em; grid-auto-rows: 1fr; justify-items: center;
}
/* Elk logo in een eigen wit vlak: de meeste logo's zijn donker op een
   doorzichtige achtergrond en zouden op een donker scherm onzichtbaar zijn. */
.sponsor-beeld {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 0;
    background: #fff; border-radius: 0.4em; padding: 0.7em;
}
.sponsor-beelden.zonder-vlak .sponsor-beeld { background: none; padding: 0; }
.sponsor-beeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Een sponsor zonder logo: dan staat de naam in datzelfde vakje. De kleur mag
   hier niet van het scherm komen — de tekst staat op wit, niet op het donkere
   scherm — behalve wanneer dat witte vlak net uitstaat.

   Net als een logo hoort de naam het vakje te vullen: staan er twee sponsors op
   een slide, dan is dat vakje groot, bij acht is het klein. Daarom is het vakje
   hier een container, zodat de code de tekstgrootte in honderdsten ervan kan
   zetten (cqw/cqh). De grootte hieronder geldt zolang die eenheid nog niet
   gelezen is — en in de enkele browser die ze niet kent.

   Een woord wordt daarbij nooit afgebroken: de grootte is net zo gekozen dat
   het langste woord op één regel past. Een naam van meer woorden mag wel over
   meer regels. */
.sponsor-beeld.sponsor-naam {
    container-type: size;
    color: #131A17; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15;
    font-size: min(1.1em, 4.5vh); overflow-wrap: normal; hyphens: manual;
}
.sponsor-beelden.zonder-vlak .sponsor-beeld.sponsor-naam { color: inherit; }
/* Hoeveelste slide van hoeveel: net genoeg om te zien dat er nog volgen. */
.sponsor-bolletjes { display: flex; gap: 0.45em; flex: 0 0 auto; }
.sponsor-bolletjes span {
    width: 0.4em; height: 0.4em; border-radius: 50%;
    background: var(--line); transition: background 0.3s;
}
.sponsor-bolletjes span.nu { background: var(--accent); }

/* --------------------------------------------------------------------------
   14. SCORES INVULLEN
   -------------------------------------------------------------------------- */
.score-tabel { min-width: 620px; }
.score-tabel td { padding: 7px 10px; }
.score-tabel tr:hover td { background: var(--surface-2); }
.score-tabel .nr {
    width: 24px; height: 24px; place-items: center; border-radius: 7px;
    background: var(--surface-3); font-size: 0.72rem; font-weight: 650;
}
.straf-vak {
    width: 62px; margin: 0; padding: 7px 4px; text-align: center;
    font-size: 0.95rem; font-weight: 650; -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
}
.straf-vak::-webkit-outer-spin-button, .straf-vak::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.straf-wij { border-color: var(--groen-rand); background: var(--groen-zacht); }
.straf-zij { border-color: var(--rood-rand); background: var(--rood-zacht); }

/* --------------------------------------------------------------------------
   15. AFFICHE
   Het vak bepaalt hoe groot het affiche in beeld komt; het blad erbinnen wordt
   altijd op ontwerpmaat getekend en door pasAfficheSchaal() naar die breedte
   geschaald. Zo staat er op een telefoon exact hetzelfde als op een groot
   scherm en in de gedownloade afbeelding.
   -------------------------------------------------------------------------- */
.affiche-wrap { display: flex; justify-content: center; padding: 10px 0; }
.affiche {
    width: 420px; max-width: 100%; aspect-ratio: 1 / 1.414;
    border-radius: var(--r-kaart); overflow: hidden; position: relative;
    border: 1px solid var(--line);
    font-family: 'Poppins', 'Inter', sans-serif;
}
/* De maten en de opmaak van het blad zelf staan in afficheHtml(), als gewone
   stijl op de elementen. Dat moet ook zo blijven: bij "downloaden als
   afbeelding" gaat dat stukje HTML los van deze pagina naar de tekenaar van de
   browser, en daar bestaan deze klassen niet. */
.affiche-blad {
    transform: scale(var(--affiche-schaal, 1));
    transform-origin: top left;
    /* Zonder dit laat de browser bij het afdrukken de achtergronden weg en
       krijg je een affiche met witte vlakken. */
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* De kopie die enkel bij het afdrukken meedoet. Op het scherm staat ze ver
   buiten beeld; ze wegsteken met display:none mag niet, want dan kan de
   browser ze ook niet meer afdrukken. */
.affiche-afdruk { position: fixed; left: -20000px; top: 0; }

/* --------------------------------------------------------------------------
   15b. SPONSORSLIDES BEWERKEN (beheermodule)
   Hoe de slides er op de beamer uitzien staat bij de projectieweergave; dit is
   enkel het lijstje waarin de organisatie ze samenstelt.
   -------------------------------------------------------------------------- */
.sponsor-kaart {
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface-2); padding: 14px; margin-bottom: 12px;
}
.sponsor-kaart-kop {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.sponsor-kaart-kop .nr {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 7px; border-radius: 7px;
    background: var(--accent-zacht); color: var(--accent);
    font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* De knopjes van een slide (volgorde, verwijderen) helemaal rechts. */
.sponsor-kaart-kop .knoppen { margin-left: auto; display: flex; gap: 6px; }
/* De vakjes van één slide: een raster dat meegroeit met de breedte. */
.sponsor-logos {
    display: grid; gap: 10px; margin-bottom: 12px;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.sponsor-logo {
    position: relative; aspect-ratio: 3 / 2;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 7px;
}
.sponsor-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Een sponsor zonder logo: hetzelfde vakje, maar je typt er de naam in. De
   invoer staat op wit, net zoals de naam straks op het scherm in de zaal. */
.sponsor-logo.is-naam { background: var(--surface); }
.sponsor-logo input {
    width: 100%; border: none; background: none; padding: 0; height: auto;
    text-align: center; font-weight: 700; font-size: 0.85rem; color: var(--text);
}
.sponsor-logo input:focus { box-shadow: none; }
.sponsor-logo.is-naam:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
/* Het kruisje om een vakje weg te halen; altijd leesbaar, ook op een wit logo. */
.sponsor-logo button {
    position: absolute; top: -7px; right: -7px;
    width: 24px; height: 24px; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rood); border-color: var(--rood); color: #fff;
}
.sponsor-logo button .ico { width: 14px; height: 14px; }
/* De plek om een logo toe te voegen: hetzelfde vakje, maar leeg en gestippeld. */
.sponsor-logo-toevoegen {
    aspect-ratio: 3 / 2; border: 1px dashed var(--line); border-radius: 8px;
    background: none; color: var(--text-muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; font-size: 0.75rem; cursor: pointer;
}
.sponsor-logo-toevoegen:hover { border-color: var(--accent); color: var(--accent); }
.sponsor-logo-toevoegen .ico { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   16. VERMELDING VAN TROEVEN.BE
   Staat op elke publieke pagina. De code in kaartavond.js plaatst het element
   en zet display/visibility/opacity er als !important op; hier staat enkel hoe
   het eruitziet.
   -------------------------------------------------------------------------- */
.troeven-credit {
    align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 20px max(4vw, 20px) 32px;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.8rem; line-height: 1.35;
    flex: 0 0 auto;
}
.troeven-credit img { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
.troeven-credit b { color: var(--text); font-weight: 650; }
.troeven-credit:hover b { color: var(--accent); }

/* Op het scherm in de zaal: klein in de hoek, leesbaar maar niet storend. */
.troeven-credit.op-projectie {
    position: absolute; right: 2.5vw; bottom: 1.4vh;
    width: auto; padding: 0; gap: 9px; opacity: 0.7; font-size: 0.85rem;
}
.troeven-credit.op-projectie img { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   17. MELDINGEN
   -------------------------------------------------------------------------- */
.melding {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--r); margin-bottom: 16px;
    font-size: 0.875rem; line-height: 1.5;
    border: 1px solid transparent;
    /* Een streepje links links laat in één oogopslag zien hoe erg het is. */
    border-left-width: 3px;
}
.melding > .ico { margin-top: 2px; }
.melding-info > .ico { color: var(--blauw); }
.melding-goud > .ico { color: var(--waarschuwing); }
.melding-rood > .ico { color: var(--rood); }
.melding-info { background: var(--blauw-zacht); border-color: var(--blauw-rand); border-left-color: var(--blauw); color: var(--text); }
.melding-goud { background: var(--waarschuwing-zacht); border-color: var(--waarschuwing-rand); border-left-color: var(--waarschuwing); color: var(--text); }
.melding-rood { background: var(--rood-zacht); border-color: var(--rood-rand); border-left-color: var(--rood); color: var(--text); }

/* --------------------------------------------------------------------------
   18. SWEETALERT2
   De vensters van de beheerpagina komen uit een bibliotheek; hier krijgen ze
   dezelfde vlakke opmaak als de rest.
   -------------------------------------------------------------------------- */
.swal2-popup {
    background: var(--surface-vast) !important;
    color: var(--text) !important;
    border: 1px solid var(--line);
    border-radius: var(--r-kaart) !important;
    font-family: inherit !important;
}
.swal2-title { color: var(--text) !important; font-size: 1.15rem !important; font-weight: 650 !important; }
.swal2-html-container { color: var(--text-muted) !important; font-size: 0.9rem !important; }
.swal2-input, .swal2-textarea, .swal2-select {
    background: var(--surface-2) !important; color: var(--text) !important;
    border: 1px solid var(--line) !important; border-radius: var(--r) !important;
    box-shadow: none !important; font-family: inherit !important; font-size: 0.92rem !important;
}
/* De keuzelijstjes in een dialoog (input: 'radio' of 'checkbox'). De
   bibliotheek geeft ze een eigen witte achtergrond mee; in het donkere thema
   stond daar witte tekst op, en dus las je niets. Ze krijgen hier de tokens van
   de module: een gedempt vlak per keuze, met de lettergrootte van de rest. */
.swal2-radio, .swal2-checkbox {
    background: transparent !important;
    color: var(--text) !important;
    gap: 6px;
}
/* Onder elkaar in plaats van naast elkaar: de keuzes zijn hele zinnen. */
.swal2-radio { flex-direction: column; align-items: stretch; }
.swal2-radio label, .swal2-checkbox label {
    display: flex !important; align-items: center; gap: 9px;
    margin: 0 !important; padding: 9px 12px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-klein);
    color: var(--text) !important; font-size: 0.92rem !important;
    text-align: left; cursor: pointer;
}
.swal2-radio label:hover, .swal2-checkbox label:hover { border-color: var(--line-sterk); }
.swal2-radio input, .swal2-checkbox input {
    accent-color: var(--knop); margin: 0 !important;
    width: 17px; height: 17px; flex-shrink: 0;
}
.swal2-input-label { color: var(--text-muted) !important; font-size: 0.85rem !important; }

.swal2-styled { border-radius: var(--r) !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled.swal2-confirm { background: var(--knop) !important; color: var(--knop-ink) !important; }
.swal2-styled.swal2-cancel { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
/* Bevestigen van iets dat niet meer terug te draaien is, of net van iets goeds. */
.swal2-styled.swal-gevaar { background: var(--rood) !important; color: #fff !important; }
.swal2-styled.swal-goed { background: var(--groen) !important; color: #fff !important; }
.swal2-styled:focus { box-shadow: var(--ring) !important; }
.swal2-container { backdrop-filter: none !important; }
/* Enkel echte dialogen krijgen de donkere waas. Een toast deelt dezelfde
   container, en die moet doorzichtig blijven, anders staat er een donkere
   balk van 360px breed rond de melding rechtsboven. */
body:not(.swal2-toast-shown) .swal2-backdrop-show { background: rgba(8, 12, 10, 0.62) !important; }
body.swal2-toast-shown .swal2-container { background: transparent !important; }
.swal2-icon { border-color: var(--line-sterk) !important; }
.swal2-close { color: var(--text-muted) !important; }
.swal2-close:hover { color: var(--text) !important; }
.swal2-validation-message {
    background: var(--rood-zacht) !important; color: var(--rood) !important;
    border-radius: var(--r-klein) !important;
}
.swal2-timer-progress-bar { background: var(--accent) !important; }
.swal2-toast { background: var(--surface-vast) !important; border: 1px solid var(--line) !important; box-shadow: var(--schaduw-zwevend) !important; }
.swal2-toast .swal2-title { font-size: 0.9rem !important; }

/* --------------------------------------------------------------------------
   19. AFDRUKKEN
   Op papier altijd zwart op wit, ongeacht het gekozen thema.
   -------------------------------------------------------------------------- */
.alleen-print { display: none; }
@media print {
    :root, :root[data-thema="donker"], :root[data-thema="licht"] {
        --bg: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #f2f2f2;
        --line: #ccc; --line-sterk: #999;
        --text: #000; --text-muted: #444; --text-zacht: #666;
        --accent: #000; --accent-ink: #fff; --accent-zacht: #f2f2f2; --accent-rand: #999;
        --groen: #000; --rood: #000; --goud: #000; --waarschuwing: #000;
        --waarschuwing-zacht: #f2f2f2; --waarschuwing-rand: #999;
        --groen-zacht: #f2f2f2; --rood-zacht: #f2f2f2; --blauw-zacht: #f2f2f2;
        --groen-rand: #999; --rood-rand: #999; --blauw-rand: #999;
    }
    body { background: #fff !important; color: #000 !important; }
    nav, .tab-menu, .niet-printen, button, .tafel-zoek { display: none !important; }
    .container { padding: 0; max-width: none; }
    .card { border: none; padding: 0; margin-bottom: 18px; break-inside: avoid; }
    .tafel, .schema-rij { border: 1px solid #999; break-inside: avoid; }
    .projectie { display: none !important; }
    .alleen-print { display: block; }
    /* Op papier is de plaats anders dan op het scherm: het blad krijgt hier de
       printschaal die pasAfficheSchaal() apart heeft klaargezet. 680px is de
       breedte van een A4 min de marges, zoals de browser die afdrukt. */
    .affiche { border: none; width: 680px; max-width: 680px; border-radius: 0; break-inside: avoid; }
    .affiche-blad { transform: scale(var(--affiche-print, 1)); }

    /* Enkel het affiche afdrukken: al de rest van de pagina gaat weg en het
       blad vult het papier van rand tot rand. De marges van de pagina zelf
       zet drukAfficheAf() tijdelijk op nul. */
    body.affiche-afdrukken { display: block; margin: 0; padding: 0; }
    body.affiche-afdrukken > *:not(.affiche-afdruk) { display: none !important; }
    body.affiche-afdrukken .affiche-afdruk { position: static; left: auto; }
    body.affiche-afdrukken .affiche-afdruk .affiche {
        width: 210mm; height: 297mm; max-width: none; aspect-ratio: auto;
        border-radius: 0; overflow: hidden;
    }
    body.affiche-afdrukken .affiche-afdruk .affiche-blad { transform: scale(var(--affiche-vol, 1)); }
    .troeven-credit { padding: 10px 0 0 0; }
    @page { margin: 12mm; }
}

/* --------------------------------------------------------------------------
   20. SMALLE SCHERMEN
   -------------------------------------------------------------------------- */
/* Het affiche staat naast het formulier zolang er plaats is; daaronder gaat
   het voorbeeld gewoon boven de velden staan. */
@media (max-width: 980px) {
    #afficheRaster { grid-template-columns: 1fr !important; }
    #afficheRaster > div:last-child { order: -1; }
}

@media (max-width: 640px) {
    .container { padding: 18px max(4vw, 14px) 48px; }
    .card { padding: 18px; }
    .nav-logo { font-size: 0.88rem; }
    .tafel-grid { grid-template-columns: 1fr; }
    .deellink code { font-size: 0.8rem; }
    .tab-btn { padding: 10px 12px; font-size: 0.85rem; }
}