:root {
            --bg-base:              #3d2914;
            --glass-bg:             rgba(254, 249, 231, 0.08);
            --glass-border:         rgba(212, 175, 55, 0.35);
            --brand-gradient:       linear-gradient(135deg, #c8102e 0%, #d4af37 100%);
            --brand-primary:        #c8102e;
            --text-main:            #fef9e7;
            --text-muted:           #d4af37;
            --cell-bg:              rgba(254, 249, 231, 0.10);
            --cell-checked-gradient:linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #d4af37 100%);
            --teal:                 #d4af37;
            --danger:               #c8102e;
            /* Panini-palet */
            --panini-paper:         #f3e9d2;
            --panini-paper-light:   #fef9e7;
            --panini-kaft:          #3d2914;
            --panini-gold:          #d4af37;
            --panini-gold-light:    #fbbf24;
            --panini-red:           #c8102e;
            --panini-blue:          #0a4d8c;
        }

        /* ── LIGHT MODE VARIABELEN ── */
        body.light {
            --bg-base:              #f3e9d2;
            --glass-bg:             rgba(254, 249, 231, 0.88);
            --glass-border:         rgba(212, 175, 55, 0.45);
            --brand-gradient:       linear-gradient(135deg, #c8102e 0%, #d4af37 100%);
            --brand-primary:        #c8102e;
            --text-main:            #3d2914;
            --text-muted:           #8b6914;
            --cell-bg:              rgba(254, 249, 231, 0.95);
            --cell-checked-gradient:linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #d4af37 100%);
            --teal:                 #b8860b;
            --danger:               #c8102e;
        }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        /* ── CUSTOM SCROLLBAR (Panini-stijl) ── */
        * {
            scrollbar-width: thin;
            scrollbar-color: #d4af37 rgba(61, 41, 20, 0.18);
        }
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track {
            background: rgba(61, 41, 20, 0.18);
            border-radius: 10px;
            box-shadow: inset 0 0 3px rgba(0, 0, 0, .25);
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 50%, #b8860b 100%);
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: padding-box;
            box-shadow: inset 0 0 0 1px rgba(61, 41, 20, .35);
        }
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #fde68a 0%, #fbbf24 50%, #d4af37 100%);
            background-clip: padding-box;
        }
        ::-webkit-scrollbar-thumb:active {
            background: linear-gradient(180deg, #d4af37 0%, #b8860b 100%);
            background-clip: padding-box;
        }
        ::-webkit-scrollbar-corner { background: transparent; }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-base);
            background-image:
                radial-gradient(ellipse at 20% 15%, rgba(212,175,55,.18) 0%, transparent 45%),
                radial-gradient(ellipse at 80% 85%, rgba(200,16,46,.14) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(254,249,231,.04) 0%, transparent 70%),
                radial-gradient(circle at 12% 88%, rgba(10,77,140,.10) 0%, transparent 40%);
            margin: 0; padding: 20px;
            color: var(--text-main);
            min-height: 100vh;
            display: flex; flex-direction: column; align-items: center;
            overflow-x: hidden;
        }
        body.light {
            background-image:
                radial-gradient(ellipse at 20% 15%, rgba(212,175,55,.22) 0%, transparent 45%),
                radial-gradient(ellipse at 80% 85%, rgba(200,16,46,.10) 0%, transparent 50%),
                radial-gradient(circle at 12% 88%, rgba(10,77,140,.08) 0%, transparent 40%);
        }

        /* ── ACHTERGROND: PANINI OUD-PAPIER ── */
        .background-shapes {
            position: fixed; inset: 0; z-index: -1;
            overflow: hidden; pointer-events: none;
            /* Paper-grain noise overlay */
            background-image:
                radial-gradient(circle at 25% 25%, rgba(61,41,20,.08) 1px, transparent 2px),
                radial-gradient(circle at 75% 75%, rgba(212,175,55,.06) 1px, transparent 2px),
                radial-gradient(circle at 50% 80%, rgba(61,41,20,.05) 1px, transparent 2px);
            background-size: 8px 8px, 12px 12px, 6px 6px;
        }
        body.light .background-shapes {
            background-image:
                radial-gradient(circle at 25% 25%, rgba(61,41,20,.10) 1px, transparent 2px),
                radial-gradient(circle at 75% 75%, rgba(139,105,20,.08) 1px, transparent 2px),
                radial-gradient(circle at 50% 80%, rgba(61,41,20,.06) 1px, transparent 2px);
            background-size: 8px 8px, 12px 12px, 6px 6px;
        }
        /* Vignet voor album-look */
        .background-shapes::after {
            content: '';
            position: absolute; inset: 0;
            background: radial-gradient(ellipse at center, transparent 35%, rgba(61,41,20,.45) 100%);
            pointer-events: none;
        }
        body.light .background-shapes::after {
            background: radial-gradient(ellipse at center, transparent 35%, rgba(139,105,20,.18) 100%);
        }
        .blob {
            position: absolute; border-radius: 50%;
            filter: blur(70px); opacity: 0.35;
            animation: float 14s infinite ease-in-out alternate;
        }
        .blob-1 { top:-12%; left:-10%;  width:380px; height:380px; background:#c8102e; animation-duration:16s; }
        .blob-2 { bottom:-5%; right:-10%; width:340px; height:340px; background:#d4af37; animation-duration:12s; animation-delay:1s; }
        .blob-3 { top:42%; left:32%;    width:220px; height:220px; background:#0a4d8c; opacity:.18; animation-duration:20s; animation-delay:2s; }
        body.light .blob { opacity: 0.18; }
        body.light .blob-3 { opacity: 0.10; }
        @keyframes float {
            0%   { transform: translate(0,0) scale(1); }
            100% { transform: translate(30px,50px) scale(1.1); }
        }

        /* ── HEADER / LOGO ── */
        header {
            margin-bottom: 20px;
            text-align: center;
            position: relative; z-index: 2;
            flex-shrink: 0; width: 100%; max-width: 500px;
        }

        .logo-container {
            display: flex; align-items: center; justify-content: center;
            gap: 10px; margin-bottom: 6px;
            flex-wrap: wrap;
        }

        .logo-icon {
            width: 44px; height: 44px; flex-shrink: 0;
            background: linear-gradient(135deg, #c8102e 0%, #d4af37 50%, #c8102e 100%);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            box-shadow:
                0 0 0 2px #fef9e7,
                0 0 0 4px #d4af37,
                0 6px 16px rgba(61,41,20,.55);
            transform: rotate(-4deg);
            position: relative;
        }
        .logo-icon::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,.45) 0%, transparent 50%);
            border-radius: 8px;
            pointer-events: none;
        }
        .logo-icon svg { width: 26px; height: 26px; fill: white; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); position: relative; z-index: 1; }

        .logo-text-group {
            display: flex; align-items: center; gap: 4px;
        }

        .logo-text {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: clamp(2rem, 6vw, 2.8rem);
            font-weight: 400; margin: 0;
            background: linear-gradient(180deg, #d4af37 0%, #fbbf24 45%, #d4af37 55%, #8b6914 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            letter-spacing: 2px; line-height: 1;
            text-transform: uppercase;
            filter: drop-shadow(0 2px 0 rgba(61,41,20,.6)) drop-shadow(0 4px 6px rgba(0,0,0,.4));
            transform: rotate(-1deg);
        }

        /* De 5 bingo-vakjes die de "ooooo" vormen */
        .logo-squares {
            display: inline-flex; gap: 3px; align-items: center;
            padding-bottom: 2px;
        }
        .logo-sq {
            width: 13px; height: 13px;
            border-radius: 3px;
            border: 2px solid rgba(255,153,102,.5);
            background: transparent;
            animation: sqWave 4s infinite ease-in-out;
        }
        .logo-sq:nth-child(1) { animation-delay: 0s;    }
        .logo-sq:nth-child(2) { animation-delay: 0.35s; }
        .logo-sq:nth-child(3) { animation-delay: 0.7s;  }
        .logo-sq:nth-child(4) { animation-delay: 1.05s; }
        .logo-sq:nth-child(5) { animation-delay: 1.4s;  }
        @keyframes sqWave {
            0%,  25%  { background:transparent; border-color:rgba(255,153,102,.5); box-shadow:none; }
            40%,  65% { background:#2dd4bf;     border-color:#2dd4bf; box-shadow:0 0 6px rgba(45,212,191,.6); }
            80%, 100% { background:transparent; border-color:rgba(255,153,102,.5); box-shadow:none; }
        }

        .tagline {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size:.9rem; color:var(--text-muted); letter-spacing:1px;
            text-shadow: 0 1px 0 rgba(61,41,20,.4);
        }

        .offline-badge {
            display:inline-block;
            background:rgba(255,255,255,.15);
            padding:4px 12px; border-radius:20px;
            font-size:.7rem; margin-top:6px;
            color:#fbbf24; border:1px solid rgba(251,191,36,.3);
        }

        /* Info-knop (alleen zichtbaar bij TV Bingo) */
        .btn-info {
            position:absolute; top:5px; right:0;
            width:36px; height:36px; border-radius:50%;
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.3);
            display:none; align-items:center; justify-content:center;
            cursor:pointer; z-index:50; padding:0;
            color:var(--text-muted); transition:all .2s;
        }
        .btn-info.visible { display:flex; }
        .btn-info:hover { background:rgba(255,255,255,.25); color:white; }
        .btn-info svg { width:20px; height:20px; fill:currentColor; }

        /* ── CONTAINER: PANINI-ALBUMPAGINA ── */
        .container {
            width:100%; max-width:500px;
            background:
                radial-gradient(circle at 18% 22%, rgba(212,175,55,.06) 0%, transparent 60%),
                radial-gradient(circle at 82% 78%, rgba(200,16,46,.05) 0%, transparent 60%),
                linear-gradient(135deg, #f3e9d2 0%, #fef9e7 40%, #f3e9d2 100%);
            border: 3px solid #d4af37;
            padding:22px; border-radius:14px;
            box-shadow:
                inset 0 0 0 1px rgba(254,249,231,.6),
                inset 0 0 40px rgba(212,175,55,.15),
                0 25px 50px rgba(0,0,0,.45),
                0 0 0 6px #3d2914,
                0 0 0 9px #d4af37;
            display:flex; flex-direction:column;
            position:relative;
            overflow-y:auto; overflow-x:hidden;
            max-height:85vh; z-index:2;
            color: #3d2914;
        }
        .container::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                radial-gradient(circle at 20% 30%, rgba(61,41,20,.05) 1px, transparent 2px),
                radial-gradient(circle at 70% 60%, rgba(61,41,20,.04) 1px, transparent 2px);
            background-size: 6px 6px, 10px 10px;
            pointer-events: none;
            border-radius: 14px;
            opacity: .8;
        }
        /* ── SCREENS ── */
        .screen { display:none; width:100%; animation:fadeIn .3s ease; }
        .screen.active { display:block; }
        @keyframes fadeIn {
            from { opacity:0; transform:translateY(8px); }
            to   { opacity:1; transform:translateY(0); }
        }

        /* Scherm-header met terug-knop */
        .screen-header {
            display:flex; align-items:center; gap:10px;
            margin-bottom:18px;
        }
        .screen-header h2 { margin:0; font-size:1.1rem; }

        /* ── HOME MENU ── */
        .menu-grid {
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
        }

        .menu-tile {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border:3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 40%, #d4af37 60%, #8b6914 100%) 1;
            border-radius:10px;
            padding:18px 10px 14px;
            text-align:center; cursor:pointer;
            transition:transform .15s ease, box-shadow .2s ease;
            display:flex; flex-direction:column;
            align-items:center; gap:5px;
            position:relative; overflow:hidden;
            user-select:none;
            box-shadow:
                0 4px 12px rgba(61,41,20,.35),
                inset 0 0 0 1px rgba(254,249,231,.6);
            color: #3d2914;
        }
        .menu-tile::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 60%;
            background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 45%, transparent 70%);
            pointer-events: none;
        }
        .menu-tile:nth-child(1) { transform: rotate(-1.5deg); }
        .menu-tile:nth-child(2) { transform: rotate(1.2deg);  }
        .menu-tile:nth-child(3) { transform: rotate(-0.8deg); }
        .menu-tile:nth-child(4) { transform: rotate(1.6deg);  }
        .menu-tile:nth-child(5) { transform: rotate(-1.3deg); }
        .menu-tile:nth-child(6) { transform: rotate(0.9deg);  }
        .menu-tile:nth-child(7) { transform: rotate(-1.1deg); }
        .menu-tile:hover  {
            transform: rotate(0) scale(1.04);
            box-shadow: 0 8px 22px rgba(61,41,20,.5), inset 0 0 0 1px rgba(254,249,231,.7);
        }
        .menu-tile:active { transform:scale(.95) rotate(0); }

        .tile-icon  {
            font-size:2.1rem; line-height:1;
            filter: drop-shadow(0 2px 3px rgba(61,41,20,.4));
            position: relative; z-index: 1;
        }
        .tile-title {
            font-family: 'Bebas Neue', 'Anton', sans-serif;
            font-size:1rem; font-weight:400; letter-spacing:1px;
            color: #3d2914; line-height:1.1;
            text-transform: uppercase;
            position: relative; z-index: 1;
        }
        .tile-desc  { font-size:.65rem; color:#8b6914; line-height:1.3; position: relative; z-index: 1; }

        /* Badge rechtsbovenin een tegel - Panini-stijl */
        .tile-badge {
            position:absolute; top:8px; right:8px;
            background: linear-gradient(135deg, #c8102e 0%, #8b0a1f 100%);
            color:#fef9e7;
            font-family: 'Bebas Neue', sans-serif;
            font-size:.62rem; font-weight:400;
            padding:3px 7px; border-radius:3px;
            letter-spacing:1px;
            border: 1px solid #fef9e7;
            box-shadow: 0 2px 4px rgba(61,41,20,.5), 0 0 0 1px #d4af37;
            text-transform: uppercase;
            transform: rotate(4deg);
            z-index: 2;
        }

        /* ── COMING SOON ── */
        .coming-soon {
            display:flex; flex-direction:column;
            align-items:center; justify-content:center;
            padding:40px 20px; text-align:center; gap:10px;
        }
        .coming-soon .cs-icon { font-size:3rem; }
        .coming-soon h3 { font-size:1.1rem; margin:0; }
        .coming-soon p  { color:var(--text-muted); font-size:.9rem; margin:0; }

        /* ── GENERIEKE CONTROLS ── */
        h2 { font-size:1.2rem; margin-bottom:15px; font-weight:600; }

        label {
            display:block; margin-bottom:8px;
            font-size:.85rem; color:var(--text-muted);
            font-weight:600; text-transform:uppercase; letter-spacing:1px;
        }

        select, input, textarea {
            width:100%; padding:14px 16px; margin-bottom:20px;
            border-radius:14px; border:1px solid var(--glass-border);
            background:rgba(0,0,0,.25); color:white;
            font-family:'Poppins',sans-serif; font-size:1rem;
            outline:none; transition:border .3s, background .3s;
        }
        select:focus, input:focus, textarea:focus {
            border-color:var(--brand-primary); background:rgba(0,0,0,.4);
        }
        select option { background:#290101; color:white; }

        /* ── BUTTONS ── */
        button {
            width:100%; padding:16px; border-radius:14px; border:none;
            font-family:'Poppins',sans-serif; font-weight:700; font-size:1rem;
            cursor:pointer; transition:transform .1s, filter .2s;
            margin-bottom:10px; color:white; position:relative; overflow:hidden;
        }
        button:active   { transform:scale(.97); }
        button:disabled { opacity:.5; cursor:not-allowed; filter:grayscale(1); }

        .btn-primary   { background:var(--brand-gradient); box-shadow:0 4px 15px rgba(255,94,98,.4); text-shadow:0 1px 2px rgba(0,0,0,.2); }
        .btn-secondary { background:rgba(255,255,255,.1); color:var(--text-muted); }
        .btn-secondary:hover { background:rgba(255,255,255,.2); color:white; }
        .btn-danger    { background:#ef4444; color:white; }

        .btn-back {
            width:auto; margin-bottom:0; flex-shrink:0;
            padding:7px 14px; font-size:.8rem; border-radius:20px;
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.2);
            color:var(--text-muted);
        }
        .btn-back:hover { background:rgba(255,255,255,.2); color:white; }

        .btn-link {
            background:transparent; color:var(--text-muted);
            font-size:.8rem; margin-top:10px;
            width:auto; padding:10px;
        }
        .btn-link:hover { color:white; text-decoration:underline; }

        /* ── SPEL (game screen) ── */
        .game-header {
            display:flex; justify-content:space-between;
            align-items:center; margin-bottom:15px;
        }

        .btn-shuffle {
            width:auto; margin-bottom:0; padding:6px 12px;
            font-size:.8rem; border-radius:20px;
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.2);
            display:flex; align-items:center; gap:6px;
            color:var(--text-muted);
        }
        .btn-shuffle svg { width:14px; height:14px; fill:currentColor; transition:transform .4s ease; }
        .btn-shuffle:hover:not(:disabled) { background:rgba(255,255,255,.2); color:white; }
        .btn-shuffle:hover:not(:disabled) svg { transform:rotate(180deg); }
        .btn-shuffle:disabled { opacity:.4; cursor:default; border-color:transparent; }
        .shuffle-count { font-weight:800; color:var(--brand-primary); }

        .btn-full  { flex-grow:1; margin-bottom:0; }

        /* ── BINGO GRID ── */
        .grid-wrapper { position:relative; margin-top:10px; width:100%; }

        .bingo-grid {
            display:grid;
            grid-template-columns:repeat(4,1fr);
            grid-auto-rows:1fr;
            gap:6px; width:100%; aspect-ratio:1/1;
        }
        .bingo-cell {
            background:var(--cell-bg); border-radius:8px;
            display:flex; align-items:center; justify-content:center;
            text-align:center; padding:2px;
            font-size:.7rem; line-height:1.1;
            width:100%; height:100%;
            overflow:hidden; word-break:break-word; hyphens:auto;
            cursor:pointer; user-select:none;
            border:1px solid rgba(255,255,255,.05);
            transition:all .2s cubic-bezier(.175,.885,.32,1.275);
            color:#e2e8f0; font-weight:600;
            box-shadow:0 4px 6px rgba(0,0,0,.1); z-index:1;
        }
        @media (min-width:380px) { .bingo-cell { font-size:.8rem;  padding:4px; } .bingo-grid { gap:8px; } }
        @media (min-width:500px) { .bingo-cell { font-size:.95rem; padding:8px; } }

        .bingo-cell.flash { animation:flashCell .4s ease; }
        @keyframes flashCell {
            0%   { opacity:1; transform:scale(1); }
            50%  { opacity:.5; transform:scale(.95); background:white; color:black; }
            100% { opacity:1; transform:scale(1); }
        }
        .bingo-cell:active { transform:scale(.9); }
        .bingo-cell.checked {
            background:var(--cell-checked-gradient); color:#3d2914;
            border-color:#c8102e; transform:scale(.96);
            box-shadow:inset 0 2px 5px rgba(0,0,0,.2), 0 0 15px rgba(212,175,55,.45);
            text-shadow:0 1px 2px rgba(254,249,231,.4);
        }

        /* ── STREEPLIJNEN ── */
        #bingo-lines, #saved-bingo-lines {
            position:absolute; inset:0;
            pointer-events:none; z-index:10;
            overflow:hidden; border-radius:8px;
        }
        .strike-line {
            position:absolute; background:var(--danger);
            box-shadow:0 0 10px rgba(255,51,51,.6);
            border-radius:99px; opacity:0;
            animation:drawLine .3s forwards ease-out;
            z-index:5;
        }
        @keyframes drawLine     { from{opacity:0;transform:scaleX(0)} to{opacity:.9;transform:scaleX(1)} }
        @keyframes drawLineVert { from{opacity:0;transform:scaleY(0)} to{opacity:.9;transform:scaleY(1)} }

        .strike-row-0 { top:12.5%; left:2%; width:96%; height:6px; transform-origin:left; }
        .strike-row-1 { top:37.5%; left:2%; width:96%; height:6px; transform-origin:left; }
        .strike-row-2 { top:62.5%; left:2%; width:96%; height:6px; transform-origin:left; }
        .strike-row-3 { top:87.5%; left:2%; width:96%; height:6px; transform-origin:left; }
        .strike-col-0 { left:12.5%; top:2%; height:96%; width:6px; transform-origin:top; animation-name:drawLineVert !important; }
        .strike-col-1 { left:37.5%; top:2%; height:96%; width:6px; transform-origin:top; animation-name:drawLineVert !important; }
        .strike-col-2 { left:62.5%; top:2%; height:96%; width:6px; transform-origin:top; animation-name:drawLineVert !important; }
        .strike-col-3 { left:87.5%; top:2%; height:96%; width:6px; transform-origin:top; animation-name:drawLineVert !important; }
        .strike-diag-1 { top:0; left:0;  height:6px; width:141%; transform-origin:top left;  transform:rotate(45deg);  animation:drawDiag1 .3s forwards ease-out !important; }
        .strike-diag-2 { top:0; right:0; height:6px; width:141%; transform-origin:top right; transform:rotate(-45deg); animation:drawDiag2 .3s forwards ease-out !important; }
        @keyframes drawDiag1 { from{opacity:0;width:0} to{opacity:.9;width:141%} }
        @keyframes drawDiag2 { from{opacity:0;width:0} to{opacity:.9;width:141%} }

        /* ── OVERLAYS ── */
        .overlay {
            position:fixed; inset:0;
            background:rgba(41,1,1,.9); backdrop-filter:blur(10px);
            display:none; align-items:center; justify-content:center;
            flex-direction:column; color:white;
            z-index:100; text-align:center; padding:20px;
        }
        .overlay.show { display:flex; animation:popIn .3s; }
        @keyframes popIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }

        .bingo-text {
            font-size:4rem; font-weight:800; margin:0; line-height:1;
            background:var(--brand-gradient);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
            filter:drop-shadow(0 2px 10px rgba(255,94,98,.3));
        }

        .info-list {
            text-align:left; max-width:320px; margin:20px 0;
            font-size:.9rem; line-height:1.6;
            list-style-type:none; padding:0;
        }
        .info-list li { margin-bottom:12px; display:flex; align-items:flex-start; gap:10px; }
        .info-icon { min-width:20px; }

        /* Loader */
        #loader {
            font-size:.9rem; color:var(--text-muted);
            margin-top:10px; padding:20px;
            border:1px solid rgba(255,255,255,.1); border-radius:10px;
            max-width:90%; background:var(--glass-bg); backdrop-filter:blur(5px);
        }

        /* ── GENEREER KAARTEN ── */
        .gen-options-row {
            display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap;
        }
        .gen-options-row > div { flex:1; min-width:120px; }
        .gen-label-sm {
            font-size:.7rem; font-weight:700; color:var(--text-muted);
            text-transform:uppercase; letter-spacing:1px; margin-bottom:5px;
        }
        .gen-toggle-group {
            display:flex; border-radius:10px; overflow:hidden;
            border:1px solid rgba(255,255,255,.15);
        }
        .gen-tog-btn {
            flex:1; padding:7px 12px; border:none; border-radius:0; margin:0;
            background:rgba(255,255,255,.06); color:var(--text-muted);
            font-family:'Poppins',sans-serif; font-size:.82rem; font-weight:600;
            cursor:pointer; transition:all .15s; width:auto;
        }
        .gen-tog-btn:not(:last-child) { border-right:1px solid rgba(255,255,255,.1); }
        .gen-tog-btn.active { background:var(--brand-gradient); color:white; box-shadow:0 2px 8px rgba(255,94,98,.3); }
        .gen-tog-btn:active { transform:none; }
        .gen-hint { font-size:.75rem; color:var(--text-muted); text-transform:none; letter-spacing:0; font-weight:400; }
        .gen-inline-row {
            display:flex; align-items:center; justify-content:space-between;
            gap:10px; margin-bottom:14px;
        }
        .gen-check-label {
            display:flex; align-items:center; gap:8px;
            font-size:.9rem; font-weight:600; color:var(--text-main);
            cursor:pointer; text-transform:none; letter-spacing:0; margin:0; flex-shrink:0;
        }
        .gen-check-label input[type="checkbox"] {
            width:18px; height:18px; margin:0; padding:0;
            accent-color:var(--brand-primary); cursor:pointer; flex-shrink:0;
        }
        .gen-num-row {
            display:flex; align-items:center; gap:8px; flex-shrink:0;
        }
        .gen-num-row span {
            font-size:.8rem; font-weight:600; color:var(--text-muted);
            text-transform:uppercase; letter-spacing:1px; white-space:nowrap;
        }
        .gen-small-num {
            width:72px !important; padding:8px 10px !important;
            margin:0 !important; text-align:center;
        }
        .gen-config-box {
            background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
            border-radius:16px; padding:16px; margin-bottom:14px;
        }
        .gen-sec-title {
            font-size:.78rem; font-weight:700; color:var(--text-muted);
            text-transform:uppercase; letter-spacing:1px; margin:0 0 8px;
        }
        .gen-info-box {
            background:rgba(45,212,191,.12); border:1px solid rgba(45,212,191,.35);
            border-radius:10px; padding:10px 12px; font-size:.82rem;
            color:var(--text-main); margin-bottom:10px; line-height:1.5;
        }
        .gen-info-box p { margin:4px 0 0; color:var(--text-muted); font-size:.8rem; }
        .gen-info-close {
            width:auto; margin:8px 0 0; padding:4px 12px; font-size:.78rem;
            background:rgba(255,255,255,.1); color:var(--text-muted); border-radius:8px;
        }
        .gen-info-icon {
            width:auto; margin:0 0 0 4px; padding:0 2px; background:transparent;
            color:var(--teal); font-size:.82rem; border:none; cursor:pointer;
            vertical-align:middle; display:inline; font-weight:400; font-style:normal;
        }
        .gen-info-icon:active { transform:none; }
        .gen-table {
            width:100%; border-collapse:collapse; font-size:.85rem; margin-bottom:4px;
        }
        .gen-table th {
            color:var(--text-muted); font-size:.7rem; text-transform:uppercase;
            letter-spacing:.5px; padding:5px 6px; text-align:left;
            border-bottom:1px solid rgba(255,255,255,.1); font-weight:600;
        }
        .gen-table td { padding:6px 6px; border-bottom:1px solid rgba(255,255,255,.04); }
        .gen-table tr:last-child td { border-bottom:none; }
        .gen-table td:first-child { color:var(--text-main); font-size:.82rem; }
        .gen-table td:nth-child(2) { text-align:center; width:52px; }
        .gen-table td:nth-child(3) { width:96px; }
        .gen-table input[type="checkbox"] {
            width:17px; height:17px; margin:0; padding:0;
            accent-color:var(--teal); cursor:pointer;
        }
        .gen-table input[type="number"] {
            width:82px !important; padding:5px 7px !important; margin:0 !important; font-size:.8rem !important;
        }
        .gen-table input[type="number"]:disabled { opacity:.3; cursor:not-allowed; }
        .gen-sec-row td {
            font-size:.68rem; font-weight:700; color:var(--text-muted);
            padding:7px 6px 2px; text-transform:uppercase; letter-spacing:.5px;
            border-bottom:none !important;
        }
        .gen-voorwaarde {
            display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;
        }
        .gen-cond-label {
            display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:500;
            color:var(--text-main); cursor:pointer; text-transform:none; letter-spacing:0; margin:0;
        }
        .gen-cond-label input[type="checkbox"] {
            width:17px; height:17px; margin:0; padding:0; accent-color:var(--teal); cursor:pointer;
        }
        .gen-progress {
            text-align:center; padding:12px; color:var(--text-muted); font-size:.9rem;
        }
        .gen-error {
            background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4);
            border-radius:10px; padding:12px; color:#fca5a5; font-size:.82rem; margin-top:10px;
            line-height:1.6;
        }
        .gen-output-header {
            display:flex; align-items:center; justify-content:space-between;
            gap:10px; margin:14px 0 10px;
        }
        .gen-output-header h3 { margin:0; font-size:.95rem; font-weight:700; }
        .gen-cards-grid { display:grid; gap:14px; }
        .gen-card {
            background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
            border-radius:12px; padding:10px;
        }
        .gen-card-title {
            font-size:.72rem; font-weight:700; color:var(--text-muted);
            text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;
        }
        .gen-card-grid { display:grid; gap:4px; aspect-ratio:1/1; width:100%; grid-auto-rows:1fr; }
        .gen-card-cell {
            background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
            border-radius:5px; padding:3px 2px; text-align:center;
            font-size:.78rem; line-height:1.2;
            display:flex; align-items:center; justify-content:center;
            word-break:break-word; hyphens:auto; color:#e2e8f0;
            aspect-ratio:1/1; overflow:hidden;
        }

        /* ── KAARTONTWERP ── */
        .gen-card.themed { padding:0; border:none; border-radius:12px; overflow:hidden; position:relative; }
        .gen-card-header { padding:8px 10px 5px; text-align:center; }
        .gen-card-main-title { font-size:.85rem; font-weight:800; letter-spacing:.3px; line-height:1.2; }
        .gen-card-sub-title  { font-size:.62rem; font-weight:600; opacity:.85; margin-top:2px; }
        .gen-card-body { display:grid; gap:4px; padding:0 6px; }
        .gen-card-footer { display:flex; justify-content:space-between; align-items:center;
                           padding:4px 10px 6px; font-size:.6rem; font-weight:700; letter-spacing:.3px; }
        .theme-pill {
            padding:5px 11px; border-radius:20px; font-size:.72rem; font-weight:600;
            border:2px solid transparent; cursor:pointer; transition:all .15s;
            display:inline-flex; align-items:center; gap:5px;
            width:auto; margin:0;
        }
        .theme-pill.active { border-color:var(--brand-primary) !important; }
        .theme-pill-swatch { width:10px; height:10px; border-radius:2px; flex-shrink:0;
                             border:1px solid rgba(255,255,255,.3); }
        .theme-item { display:flex; align-items:center; gap:10px; padding:10px 12px;
                      background:var(--glass-bg); border:1px solid var(--glass-border);
                      border-radius:10px; margin-bottom:8px; }
        .theme-item-swatch { width:28px; height:28px; border-radius:6px; flex-shrink:0;
                             border:1px solid rgba(255,255,255,.15); }
        .theme-item-name { flex:1; font-size:.88rem; font-weight:600; }
        .theme-form-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
        .theme-form-row label { flex:1; font-size:.8rem; color:var(--text-muted);
                                font-weight:600; margin:0; text-transform:none; letter-spacing:0; }
        .theme-form-row input[type="color"] {
            width:44px; height:32px; padding:2px; border-radius:6px;
            border:1px solid var(--glass-border); background:none;
            cursor:pointer; flex-shrink:0; margin:0;
        }
        body.light .theme-item { background:rgba(255,255,255,.7); }

        /* ── THEMA AFBEELDING EDITOR ── */
        .theme-img-preview {
            position:relative; width:100%; aspect-ratio:1/1;
            border-radius:8px; overflow:hidden;
            margin:10px 0; user-select:none; cursor:default;
        }
        .theme-img-grid-overlay {
            position:absolute; inset:0; display:flex; flex-direction:column;
            pointer-events:none; z-index:1;
        }
        .theme-img-grid-header { height:18%; display:flex; align-items:center;
            justify-content:center; background:rgba(0,0,0,.15); }
        .theme-img-grid-body   { flex:1; display:grid; padding:4% 5%; gap:3%; }
        .theme-img-grid-footer { height:10%; background:rgba(0,0,0,.1); }
        .theme-img-grid-cell   { background:rgba(255,255,255,.22); border-radius:2px; }
        .theme-img-handle {
            position:absolute; touch-action:none;
            border:2px dashed rgba(255,255,255,.65); border-radius:4px;
            box-sizing:border-box; z-index:10; cursor:grab;
        }
        .theme-img-handle:active { cursor:grabbing; }
        .theme-img-handle img { width:100%; display:block; pointer-events:none; }

        /* ── SPOTIFY BINGO ──────────────────────────────────────── */
        .spotify-status-box {
            padding:12px 16px; border-radius:12px; font-size:.83rem; margin-top:10px;
        }
        .spotify-status-box.loading { background:rgba(255,255,255,.07); color:var(--text-muted); }
        .spotify-status-box.error   { background:rgba(255,51,51,.13); color:#fca5a5; border:1px solid rgba(255,51,51,.3); }
        .spotify-status-box.success { background:rgba(45,212,191,.08); color:#2dd4bf; border:1px solid rgba(45,212,191,.2); }

        .spotify-playlist-card {
            background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
            border-radius:14px; padding:12px 14px; margin-top:10px;
            display:flex; gap:12px; align-items:center;
        }
        .spotify-playlist-card img {
            width:52px; height:52px; border-radius:8px; object-fit:cover;
            flex-shrink:0; background:rgba(255,255,255,.1);
        }
        .spotify-playlist-info { flex:1; min-width:0; }
        .spotify-playlist-name { font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .spotify-playlist-meta { font-size:.73rem; color:var(--text-muted); margin-top:2px; }

        .spotify-tracks-preview {
            max-height:150px; overflow-y:auto;
            background:rgba(0,0,0,.2); border-radius:10px; padding:7px 10px; margin-top:10px;
        }
        .spotify-track-row {
            display:flex; align-items:center; gap:8px; padding:3px 0;
            border-bottom:1px solid rgba(255,255,255,.05); font-size:.78rem;
        }
        .spotify-track-row:last-child { border-bottom:none; }
        .spotify-track-num  { color:var(--text-muted); width:22px; flex-shrink:0; text-align:right; font-size:.7rem; }
        .spotify-track-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .spotify-track-artist { color:var(--text-muted); font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }

        .spotify-setup-box {
            background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
            border-radius:12px; padding:12px 14px; margin-top:12px;
            font-size:.8rem; color:var(--text-muted);
        }
        .spotify-setup-box summary {
            cursor:pointer; color:var(--text-main); font-weight:600; font-size:.83rem; outline:none;
        }
        .spotify-setup-box ol  { margin:8px 0 0 16px; padding:0; line-height:1.9; }
        .spotify-setup-box a   { color:var(--teal); }
        .spotify-setup-box code {
            background:rgba(255,255,255,.1); border-radius:4px; padding:1px 5px;
            font-family:monospace; font-size:.78rem; color:#fbbf24; word-break:break-all;
        }

        /* ── MIJN KAARTEN ──────────────────────────────────────── */
        .mycard-list { display:flex; flex-direction:column; gap:10px; }

        .mycard-item {
            background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
            border-radius:14px; padding:12px 14px;
            display:flex; gap:10px; align-items:center;
        }
        .mycard-icon { font-size:1.7rem; flex-shrink:0; }
        .mycard-info { flex:1; min-width:0; }
        .mycard-title-text { font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mycard-meta-text  { font-size:.7rem; color:var(--text-muted); margin-top:2px; }
        .mycard-actions    { display:flex; gap:6px; flex-shrink:0; }
        .mycard-btn-play {
            background:var(--brand-gradient); color:#fff; border:none;
            border-radius:8px; padding:7px 12px; font-size:.78rem; font-weight:700; cursor:pointer;
            font-family:inherit;
        }
        .mycard-btn-del {
            background:rgba(255,51,51,.18); color:#fca5a5;
            border:1px solid rgba(255,51,51,.3); border-radius:8px;
            padding:7px 10px; font-size:.78rem; cursor:pointer; font-family:inherit;
        }
        .mycard-btn-del:hover { background:rgba(255,51,51,.32); }

        /* Card-picker (kies kaart #N om te spelen) */
        .cardpicker-grid {
            display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px; margin-top:10px;
        }
        .cardpicker-btn {
            background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
            border-radius:8px; padding:10px 4px; text-align:center;
            font-size:.82rem; font-weight:600; cursor:pointer;
            transition:all .15s; font-family:inherit; color:var(--text-main);
        }
        .cardpicker-btn:hover  { background:rgba(255,255,255,.15); }
        .cardpicker-btn:active { transform:scale(.94); }

        /* ── THEME TOGGLE KNOP ── */
        .btn-theme-toggle {
            position:absolute; top:5px; left:0;
            width:36px; height:36px; border-radius:50%;
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.3);
            display:flex; align-items:center; justify-content:center;
            cursor:pointer; z-index:50; padding:0; margin:0;
            color:var(--text-muted); transition:all .2s;
            font-size:1.1rem; line-height:1;
        }
        .btn-theme-toggle:hover { background:rgba(255,255,255,.25); color:white; transform:none; }
        body.light .btn-theme-toggle {
            background:rgba(0,0,0,.07);
            border-color:rgba(0,0,0,.18);
            color:var(--text-muted);
        }
        body.light .btn-theme-toggle:hover { background:rgba(0,0,0,.14); color:var(--text-main); }

        /* ── LIGHT MODE COMPONENT OVERRIDES ── */
        body.light { background-color:var(--bg-base); }

        body.light .blob-1 { background:#ffb347; opacity:.45; }
        body.light .blob-2 { background:#ff6b9d; opacity:.35; }
        body.light .blob-3 { background:#ffd700; opacity:.30; }

        body.light .container { box-shadow:0 25px 50px rgba(0,0,0,.10); }

        body.light .menu-tile {
            background:rgba(255,255,255,.72); border-color:rgba(0,0,0,.08);
        }
        body.light .menu-tile:hover { background:rgba(255,255,255,.95); }

        body.light select,
        body.light input:not([type="checkbox"]),
        body.light textarea {
            background:rgba(255,255,255,.75); color:var(--text-main);
            border-color:rgba(0,0,0,.12);
        }
        body.light select:focus,
        body.light input:not([type="checkbox"]):focus,
        body.light textarea:focus { background:white; border-color:var(--brand-primary); }
        body.light select option { background:white; color:#1c1028; }

        body.light .btn-secondary { background:rgba(0,0,0,.06); color:var(--text-muted); }
        body.light .btn-secondary:hover { background:rgba(0,0,0,.12); color:var(--text-main); }
        body.light .btn-back {
            background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.12); color:var(--text-muted);
        }
        body.light .btn-back:hover { background:rgba(0,0,0,.12); color:var(--text-main); }
        body.light .btn-shuffle {
            background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.12); color:var(--text-muted);
        }
        body.light .btn-shuffle:hover:not(:disabled) { background:rgba(0,0,0,.12); color:var(--text-main); }
        body.light .btn-link { color:var(--text-muted); }
        body.light .btn-link:hover { color:var(--text-main); }
        body.light .btn-info {
            background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.15); color:var(--text-muted);
        }
        body.light .btn-info:hover { background:rgba(0,0,0,.15); color:var(--text-main); }

        body.light .bingo-cell {
            background:rgba(255,255,255,.88); border-color:rgba(0,0,0,.08);
            color:#1c1028; box-shadow:0 4px 6px rgba(0,0,0,.06);
        }
        body.light .bingo-cell.checked {
            background:var(--cell-checked-gradient); color:white;
            border-color:rgba(255,255,255,.6);
        }

        body.light .offline-badge {
            background:rgba(0,0,0,.07); color:#b45309; border-color:rgba(180,83,9,.25);
        }

        body.light .overlay { background:rgba(255,240,215,.96); color:var(--text-main); }

        body.light #loader { border-color:rgba(0,0,0,.1); color:var(--text-muted); background:rgba(255,255,255,.6); }

        body.light .gen-toggle-group { border-color:rgba(0,0,0,.12); }
        body.light .gen-tog-btn { background:rgba(0,0,0,.04); color:var(--text-muted); }
        body.light .gen-tog-btn:not(:last-child) { border-right-color:rgba(0,0,0,.08); }
        body.light .gen-tog-btn.active { background:var(--brand-gradient); color:#fff; box-shadow:0 2px 8px rgba(255,94,98,.35); }
        body.light .gen-config-box { background:rgba(255,255,255,.62); border-color:rgba(0,0,0,.09); }
        body.light .gen-card { background:rgba(255,255,255,.62); border-color:rgba(0,0,0,.09); }
        body.light .gen-card-cell {
            background:rgba(255,255,255,.82); border-color:rgba(0,0,0,.08); color:#1c1028; font-size:.82rem;
        }
        body.light .gen-table th { border-bottom-color:rgba(0,0,0,.1); }
        body.light .gen-table td { border-bottom-color:rgba(0,0,0,.05); }
        body.light .gen-info-box {
            background:rgba(13,148,136,.1); border-color:rgba(13,148,136,.3);
        }

        body.light .spotify-playlist-card { background:rgba(255,255,255,.72); border-color:rgba(0,0,0,.09); }
        body.light .spotify-tracks-preview { background:rgba(0,0,0,.05); }
        body.light .spotify-track-row { border-bottom-color:rgba(0,0,0,.06); }
        body.light .spotify-setup-box { background:rgba(255,255,255,.62); border-color:rgba(0,0,0,.09); }
        body.light .spotify-setup-box code { background:rgba(0,0,0,.07); color:#c2410c; }

        body.light .mycard-item { background:rgba(255,255,255,.72); border-color:rgba(0,0,0,.09); }
        body.light .cardpicker-btn {
            background:rgba(255,255,255,.72); border-color:rgba(0,0,0,.09); color:var(--text-main);
        }
        body.light .cardpicker-btn:hover { background:white; }

        body.light { scrollbar-color: #b8860b rgba(61, 41, 20, 0.10); }
        body.light ::-webkit-scrollbar-track {
            background: rgba(61, 41, 20, 0.08);
            box-shadow: inset 0 0 3px rgba(61, 41, 20, .15);
        }
        body.light ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #d4af37 0%, #b8860b 50%, #8b6914 100%);
            background-clip: padding-box;
            box-shadow: inset 0 0 0 1px rgba(61, 41, 20, .25);
        }
        body.light ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 50%, #b8860b 100%);
            background-clip: padding-box;
        }

        /* ── WIZARD ── */
        .gen-step-title {
            font-size: 1.05rem; font-weight: 800; color: var(--text-main);
            margin: 0 0 6px; letter-spacing: -.3px;
        }
        .gen-step-desc {
            font-size: .82rem; color: var(--text-muted);
            margin: 0 0 14px; line-height: 1.5;
        }
        .gen-option-card {
            border: 2px solid rgba(0,0,0,.1); border-radius: 14px;
            padding: 16px 10px; cursor: pointer; text-align: center;
            transition: border-color .15s, background .15s;
            background: var(--glass-bg);
        }
        .gen-option-card.selected {
            border-color: var(--brand-primary);
            background: rgba(255,94,98,.08);
        }
        .gen-option-card:active { transform: scale(.97); }
        .gen-option-icon  { font-size: 1.8rem; margin-bottom: 5px; line-height: 1; }
        .gen-option-label { font-size: .88rem; font-weight: 700; color: var(--text-main); }
        .gen-option-desc  { font-size: .68rem; color: var(--text-muted); margin-top: 3px; }

        /* ── Raster-preview in stap 2 ── */
        .gen-grid-preview {
            display: grid; gap: 3px;
            width: 64px; height: 64px;
            margin: 0 auto 8px;
        }
        .gen-grid-preview span {
            background: var(--brand-primary);
            border-radius: 2px;
            opacity: .55;
        }
        .gen-option-card.selected .gen-grid-preview span { opacity: 1; }

        .gen-wizard-bar {
            display: flex; align-items: center; justify-content: center;
            gap: 0; margin-bottom: 20px; position: relative;
        }
        .gen-wizard-step-dot {
            width: 28px; height: 28px; border-radius: 50%;
            background: rgba(0,0,0,.08); border: 2px solid rgba(0,0,0,.12);
            display: flex; align-items: center; justify-content: center;
            font-size: .65rem; font-weight: 800; color: var(--text-muted);
            flex-shrink: 0; transition: all .2s; position: relative; z-index: 1;
        }
        .gen-wizard-step-dot.active {
            background: var(--brand-primary); border-color: var(--brand-primary); color: white;
            box-shadow: 0 2px 8px rgba(255,94,98,.4);
        }
        .gen-wizard-step-dot.done {
            background: rgba(45,212,191,.2); border-color: var(--teal); color: var(--teal);
        }
        .gen-wizard-connector {
            height: 2px; flex: 1; background: rgba(0,0,0,.08); max-width: 28px;
        }
        .gen-wizard-connector.done { background: var(--teal); }
        .gen-wizard-nav {
            display: flex; justify-content: space-between; align-items: center;
            margin-top: 18px; gap: 10px;
        }
        body.light .gen-option-card { border-color: rgba(0,0,0,.1); }
        body.light .gen-wizard-step-dot { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.15); }
        body.light .gen-wizard-connector { background: rgba(0,0,0,.12); }

        /* ── SHARE KNOP ── */
        .mycard-btn-share {
            background:rgba(45,212,191,.18); color:#2dd4bf;
            border:1px solid rgba(45,212,191,.3); border-radius:8px;
            padding:7px 10px; font-size:.78rem; cursor:pointer; font-family:inherit;
        }
        .mycard-btn-share:hover { background:rgba(45,212,191,.32); }
        body.light .mycard-btn-share { background:rgba(13,148,136,.12); color:#0d9488; border-color:rgba(13,148,136,.3); }

        /* ── SOORT / PUBLIEK BADGE ── */
        .mycard-badge {
            display:inline-block; font-size:.6rem; font-weight:700;
            padding:2px 6px; border-radius:6px; margin-right:4px;
            background:rgba(255,255,255,.12); color:var(--text-muted);
            vertical-align:middle;
        }

        /* ── PUBLIEK TOGGLE ── */
        .publiek-toggle-group {
            display:flex; border-radius:10px; overflow:hidden;
            border:1px solid rgba(255,255,255,.15); margin-bottom:20px;
        }
        .publiek-tog-btn {
            flex:1; padding:10px 12px; border:none; border-radius:0; margin:0;
            background:rgba(255,255,255,.06); color:var(--text-muted);
            font-family:'Poppins',sans-serif; font-size:.88rem; font-weight:600;
            cursor:pointer; transition:all .15s; width:auto;
        }
        .publiek-tog-btn:not(:last-child) { border-right:1px solid rgba(255,255,255,.1); }
        .publiek-tog-btn.active { background:var(--brand-gradient); color:white; box-shadow:0 2px 8px rgba(255,94,98,.3); }
        .publiek-tog-btn:active { transform:none; }

        /* ── WK BINGO — PANINI ALBUM ──────────────────────────────────── */
        :root {
            /* Behouden voor backwards compat — gealiased naar Panini-kleuren */
            --wk-green:       #c8102e;
            --wk-green-light: #d4af37;
            --wk-green-bg:    rgba(212, 175, 55, 0.12);
            --wk-green-border:rgba(212, 175, 55, 0.45);
        }

        /* Banner - Panini-album-omslag */
        .wk-banner {
            margin: -22px -22px 18px;
            border-radius: 12px 12px 10px 10px;
            position: relative; overflow: hidden;
            text-align: center;
            min-height: 220px;
            display: flex; flex-direction: column; justify-content: flex-end;
            box-shadow: inset 0 -4px 0 #d4af37, 0 6px 18px rgba(61,41,20,.5);
            border-bottom: 4px solid #3d2914;
        }
        .wk-banner-photo {
            position: absolute; inset: 0;
            background-image:
                url('https://images.pexels.com/photos/14813312/pexels-photo-14813312.jpeg?auto=compress&cs=tinysrgb&w=1000&h=600');
            background-size: cover; background-position: center 35%;
            /* Sepia-warm filter zodat de foto past bij vintage Panini-album */
            filter: sepia(0.55) saturate(1.15) contrast(1.05) brightness(0.85);
        }
        .wk-banner-photo::before {
            /* Oud-papier grain over de foto */
            content: '';
            position: absolute; inset: 0;
            background-image:
                radial-gradient(circle at 25% 25%, rgba(212,175,55,.22) 1px, transparent 2px),
                radial-gradient(circle at 75% 65%, rgba(254,249,231,.14) 1px, transparent 2px),
                radial-gradient(circle at 40% 80%, rgba(212,175,55,.18) 1px, transparent 2px);
            background-size: 14px 14px, 22px 22px, 9px 9px;
            opacity: .7;
            mix-blend-mode: overlay;
        }
        .wk-banner-photo::after {
            /* Verticale Panini-rode streep aan zijkant */
            content: '';
            position: absolute; top: 0; left: 0; bottom: 0; width: 18px;
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            box-shadow: inset -2px 0 0 #d4af37, 2px 0 8px rgba(0,0,0,.3);
            z-index: 1;
        }
        .wk-banner-overlay {
            position: absolute; inset: 0;
            background:
                linear-gradient(180deg,
                    rgba(61,41,20,.55) 0%,
                    rgba(91,58,31,.35) 40%,
                    rgba(61,41,20,.75) 100%),
                radial-gradient(ellipse at 50% 40%, rgba(212,175,55,.18) 0%, transparent 60%),
                radial-gradient(ellipse at center, transparent 25%, rgba(61,41,20,.6) 100%);
        }
        .wk-banner-content {
            position: relative; z-index: 1;
            padding: 60px 28px 24px;
        }
        /* Bovenste actiebalk in de banner — flex met Terug & stats-knop */
        .wk-banner-topbar {
            position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2;
            display: flex; justify-content: space-between; align-items: center;
            gap: 10px;
        }
        .wk-banner-back {
            background: rgba(254,249,231,.92) !important;
            border: 2px solid #d4af37 !important;
            color: #3d2914 !important;
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
        }
        .wk-banner-badge {
            display: inline-block;
            background: linear-gradient(135deg, #0a4d8c 0%, #073463 100%);
            border: 2px solid #d4af37;
            padding: 4px 14px; border-radius: 4px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: .75rem; font-weight: 400; letter-spacing: 2px;
            text-transform: uppercase; color: #fef9e7;
            margin-bottom: 10px;
            box-shadow: 0 2px 6px rgba(0,0,0,.4);
            transform: rotate(-1.5deg);
        }
        .wk-banner-title {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 3rem; font-weight: 400; color: #fef9e7;
            letter-spacing: 3px; line-height: 1; margin: 0 0 8px;
            text-transform: uppercase;
            text-shadow:
                0 2px 0 #c8102e,
                0 4px 0 #8b0a1f,
                0 6px 12px rgba(0,0,0,.8);
            transform: rotate(-1deg);
        }
        .wk-banner-title span {
            color: #d4af37;
            text-shadow:
                0 2px 0 #8b6914,
                0 4px 0 #5a4810,
                0 6px 12px rgba(0,0,0,.8);
        }
        .wk-banner-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .85rem; color: #fef9e7;
            margin: 0; letter-spacing: .5px;
            text-shadow: 0 1px 4px rgba(0,0,0,.7);
        }

        /* Intro card - PANINI verzamelkaart */
        .wk-intro {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #8b6914 100%) 1;
            border-radius: 8px; padding: 16px 18px;
            margin-bottom: 16px;
            color: #3d2914;
            box-shadow: 0 4px 12px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(-0.5deg);
            position: relative;
        }
        .wk-intro-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .95rem; font-weight: 400; text-transform: uppercase;
            letter-spacing: 2px; color: #c8102e;
            margin-bottom: 10px;
        }
        body.light .wk-intro-title { color: #c8102e; }
        .wk-intro-list {
            list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: 7px;
        }
        .wk-intro-list li {
            font-size: .85rem; color: #3d2914;
            display: flex; gap: 8px; align-items: flex-start; line-height: 1.4;
        }
        .wk-intro-list li::before {
            content: '⚽'; font-size: .85rem; flex-shrink: 0; margin-top: 1px;
            filter: drop-shadow(0 1px 1px rgba(61,41,20,.4));
        }
        body.light .wk-intro {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
        }

        @media (min-width: 768px) {
            .wk-banner { margin: -32px -32px 22px; min-height: 280px; }
            .wk-banner-content { padding: 80px 36px 32px; }
            .wk-banner-title { font-size: 4rem; letter-spacing: 4px; }
        }

        /* Tabs groepsfase / knock-out - Panini-knipstickers */
        .wk-tabs {
            display:flex; gap:8px; margin-bottom:14px;
        }
        .wk-tab {
            flex:1; padding:10px 8px;
            border-radius: 6px;
            border: 2px solid #d4af37;
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            color: #8b6914;
            font-family: 'Bebas Neue', 'Anton', sans-serif;
            font-size: .95rem; font-weight: 400; letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor:pointer; transition:all .15s; margin:0;
            box-shadow: 0 2px 6px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.5);
        }
        .wk-tab.active {
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
            border-color: #d4af37;
            box-shadow: 0 3px 8px rgba(200,16,46,.5), inset 0 0 0 1px rgba(254,249,231,.4);
            transform: rotate(-1deg);
        }
        .wk-tab:active { transform:scale(.95); }
        body.light .wk-tab {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border-color: #d4af37;
        }
        body.light .wk-tab.active {
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7; border-color: #d4af37;
        }

        /* Poule-tabs A t/m L - mini stickers */
        .wk-poule-tabs {
            display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;
        }
        .wk-poule-tab {
            width:38px; height:38px; border-radius:50%;
            border: 2px solid #d4af37;
            background: linear-gradient(135deg, #fef9e7 0%, #f3e9d2 100%);
            color: #3d2914;
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.05rem; font-weight: 400; letter-spacing: 0;
            cursor:pointer; transition:all .15s; margin:0;
            display:flex; align-items:center; justify-content:center;
            box-shadow: 0 2px 5px rgba(61,41,20,.4), inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .wk-poule-tab:nth-child(odd) { transform: rotate(-2deg); }
        .wk-poule-tab:nth-child(even) { transform: rotate(2deg); }
        .wk-poule-tab.active {
            background: radial-gradient(circle at 30% 30%, #fbbf24 0%, #d4af37 60%, #8b6914 100%);
            color: #3d2914;
            border-color: #c8102e;
            transform: rotate(0) scale(1.1);
            box-shadow: 0 4px 10px rgba(212,175,55,.6), inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .wk-poule-tab:active { transform: scale(.92); }
        body.light .wk-poule-tab {
            background: linear-gradient(135deg, #fef9e7 0%, #f3e9d2 100%);
            border-color: #d4af37;
        }
        body.light .wk-poule-tab.active {
            background: radial-gradient(circle at 30% 30%, #fbbf24 0%, #d4af37 60%, #8b6914 100%);
            color: #3d2914; border-color: #c8102e;
        }

        /* Matchrij - PANINI 2-STICKER KAART */
        .wk-match-item {
            background: linear-gradient(135deg, #3d2914 0%, #5a3a1f 100%);
            border: 3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 40%, #d4af37 60%, #8b6914 100%) 1;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 12px;
            cursor:pointer; transition: transform .15s, box-shadow .2s; user-select:none;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 6px;
            position: relative;
            box-shadow: 0 4px 12px rgba(61,41,20,.4), inset 0 0 0 1px #d4af37;
        }

        /* Actie-knoppen (gebruikt binnen de match-action-modal) */
        .wk-match-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 4px;
        }
        .wk-match-action-btn {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 16px 10px;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid #d4af37;
            transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
            color: #3d2914;
            box-shadow: 0 3px 8px rgba(61,41,20,.4), inset 0 0 0 1px rgba(254,249,231,.6);
            display: flex; flex-direction: column; align-items: center; gap: 4px;
            line-height: 1.1;
        }
        .wk-match-action-btn .wk-action-icon {
            font-size: 1.6rem; line-height: 1;
            filter: drop-shadow(0 1px 2px rgba(61,41,20,.4));
        }
        .wk-match-action-btn.solo {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
        }
        .wk-match-action-btn.multi {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 100%);
        }
        .wk-match-action-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
        .wk-match-action-btn:active { transform: scale(.97); }
        .wk-match-action-btn:disabled {
            opacity: .55; cursor: not-allowed; filter: none;
        }

        /* Subtitel boven de knoppen in de keuze-modal */
        .wk-match-action-sub {
            font-size: .8rem;
            color: #5d4427;
            text-align: center;
            margin: 2px 0 14px;
            font-style: italic;
        }
        .wk-match-item::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 35%, transparent 65%, rgba(255,255,255,.08) 100%);
            pointer-events: none;
            border-radius: 4px;
        }
        .wk-match-item:nth-child(3n+1) { transform: rotate(-0.8deg); }
        .wk-match-item:nth-child(3n+2) { transform: rotate(0.6deg); }
        .wk-match-item:nth-child(3n+3) { transform: rotate(-0.3deg); }
        .wk-match-item:hover  {
            transform: rotate(0) scale(1.02);
            box-shadow: 0 8px 22px rgba(61,41,20,.55), inset 0 0 0 1px #fbbf24;
        }
        .wk-match-item:active { transform: scale(.97) rotate(0); }

        /* Voorbije wedstrijd: visueel disabled, geen pointer-events */
        .wk-match-item.is-past {
            opacity: .42;
            filter: grayscale(.6);
            cursor: not-allowed;
            pointer-events: none;
        }
        .wk-match-item.is-past::after {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                -45deg,
                rgba(61,41,20,.04) 0 8px,
                rgba(61,41,20,.10) 8px 16px
            );
            border-radius: inherit;
            pointer-events: none;
        }

        body.light .wk-match-item {
            background: linear-gradient(135deg, #fef9e7 0%, #f3e9d2 100%);
            box-shadow: 0 4px 12px rgba(61,41,20,.3), inset 0 0 0 1px #d4af37;
        }
        body.light .wk-match-item:hover {
            box-shadow: 0 8px 22px rgba(61,41,20,.4), inset 0 0 0 1px #fbbf24;
        }

        /* Eén team-sticker binnen de match-kaart */
        .wk-team-sticker {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            border-radius: 5px;
            padding: 8px 6px 10px;
            text-align: center;
            position: relative;
            box-shadow: 0 2px 5px rgba(61,41,20,.4), inset 0 0 0 1px rgba(254,249,231,.7);
            min-height: 84px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            overflow: hidden;
        }
        .wk-team-sticker::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 55%;
            background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 50%, transparent 80%);
            pointer-events: none;
        }
        .wk-team-sticker.t1 { transform: rotate(-1.5deg); }
        .wk-team-sticker.t2 { transform: rotate(1.5deg); }
        .wk-team-flag {
            font-size: 2.4rem;
            line-height: 1;
            filter: drop-shadow(0 2px 3px rgba(61,41,20,.5)) drop-shadow(0 0 4px rgba(212,175,55,.4));
            position: relative; z-index: 1;
            display: inline-flex;
            align-items: center; justify-content: center;
        }
        .wk-team-flag .fi {
            width: 3.4rem;
            height: 2.4rem;
            border-radius: 3px;
            background-size: cover;
            background-position: center;
            box-shadow:
                0 2px 4px rgba(61,41,20,.6),
                0 0 0 1px rgba(212,175,55,.5),
                inset 0 1px 0 rgba(255,255,255,.35);
            filter: none;
        }
        .wk-team-sticker.tbd .wk-team-flag .fi {
            width: 2.5rem; height: 1.8rem;
        }
        .wk-flag-fallback {
            font-size: 2.4rem; line-height: 1;
        }
        .wk-team-name {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: .82rem; font-weight: 400;
            color: #3d2914;
            letter-spacing: .5px; line-height: 1;
            text-transform: uppercase;
            position: relative; z-index: 1;
            margin-top: 3px;
            text-shadow: 0 1px 0 rgba(254,249,231,.5);
        }
        .wk-team-code-badge {
            position: absolute; top: 3px; right: 3px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: .55rem;
            background: #c8102e;
            color: #fef9e7;
            padding: 1px 4px;
            border-radius: 2px;
            letter-spacing: .5px;
            border: 1px solid #fef9e7;
            box-shadow: 0 1px 2px rgba(0,0,0,.4);
            z-index: 2;
        }
        .wk-team-sticker.tbd { opacity: .55; }
        .wk-team-sticker.tbd .wk-team-flag { font-size: 1.8rem; }

        .wk-match-teams {
            display:contents;
            font-size:.92rem; font-weight:700; color:var(--text-main);
        }
        .wk-team1, .wk-team2 { display:flex; align-items:center; gap:6px; }
        .wk-code {
            font-size:.58rem; font-weight:800; letter-spacing:.5px;
            background: rgba(212,175,55,.15); color:#d4af37;
            border:1px solid rgba(212,175,55,.45);
            padding:1px 5px; border-radius:4px; flex-shrink:0;
        }
        body.light .wk-code { background:rgba(212,175,55,.18); color:#8b6914; }

        /* "vs" centraal - als oude badge */
        .wk-match-vs {
            font-family: 'Anton', sans-serif;
            font-size: .9rem; font-weight: 400; letter-spacing: 1px;
            color: #fef9e7;
            padding: 5px 8px;
            background: radial-gradient(circle, #c8102e 0%, #8b0a1f 100%);
            border: 2px solid #d4af37;
            border-radius: 50%;
            flex-shrink: 0; text-align: center;
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 3px 6px rgba(0,0,0,.4), inset 0 0 0 1px rgba(254,249,231,.4);
            position: relative; z-index: 2;
            text-transform: uppercase;
        }
        .wk-match-meta {
            grid-column: 1 / -1;
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size:.72rem; color:#fef9e7; display:flex; gap:10px;
            margin-top: 6px; padding: 4px 6px 0;
            border-top: 1px dashed rgba(212,175,55,.5);
            justify-content: center;
            position: relative; z-index: 1;
        }
        body.light .wk-match-meta { color: #8b6914; border-top-color: rgba(139,105,20,.4); }
        .wk-match-meta span { display:inline-flex; align-items:center; gap:3px; }

        /* Speelscherm header - PANINI */
        .wk-game-header {
            display:flex; align-items:center; gap:10px; margin-bottom:14px;
            background:
                linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border-radius: 6px; padding: 10px 14px;
            border: 3px solid #d4af37;
            box-shadow: 0 3px 8px rgba(61,41,20,.35), inset 0 0 0 1px rgba(254,249,231,.6);
            color: #3d2914;
        }

        /* WK Game: oud-papier achtergrond */
        #wk-game {
            position: relative;
        }
        #wk-game .grid-wrapper {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            padding: 8px;
            background:
                radial-gradient(circle at 30% 30%, rgba(212,175,55,.12) 1px, transparent 2px),
                radial-gradient(circle at 70% 70%, rgba(61,41,20,.08) 1px, transparent 2px),
                linear-gradient(135deg, #3d2914 0%, #5a3a1f 100%);
            background-size: 10px 10px, 14px 14px, 100%;
            border: 3px solid #d4af37;
            box-shadow: 0 6px 18px rgba(61,41,20,.5), inset 0 0 0 1px rgba(254,249,231,.3);
        }
        body.light #wk-game .grid-wrapper {
            background:
                radial-gradient(circle at 30% 30%, rgba(212,175,55,.18) 1px, transparent 2px),
                radial-gradient(circle at 70% 70%, rgba(61,41,20,.08) 1px, transparent 2px),
                linear-gradient(135deg, #fef9e7 0%, #f3e9d2 100%);
            background-size: 10px 10px, 14px 14px, 100%;
        }
        #wk-game .grid-wrapper::before {
            display: none;
        }
        #wk-game .bingo-grid {
            position: relative; z-index: 1;
        }
        #wk-bingo-lines {
            position: absolute; inset: 8px;
            pointer-events: none; z-index: 6;
            overflow: hidden; border-radius: 4px;
        }
        #wk-game .bingo-cell {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 50%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%) !important;
            border: 2px solid #d4af37 !important;
            color: #3d2914 !important;
            font-family: 'Bebas Neue', 'Anton', sans-serif;
            font-weight: 400;
            letter-spacing: .5px;
            text-transform: uppercase;
            box-shadow: 0 2px 5px rgba(61,41,20,.35), inset 0 0 0 1px rgba(254,249,231,.6) !important;
            position: relative;
        }
        #wk-game .bingo-cell:nth-child(4n+1) { transform: rotate(-1.5deg); }
        #wk-game .bingo-cell:nth-child(4n+2) { transform: rotate(1deg); }
        #wk-game .bingo-cell:nth-child(4n+3) { transform: rotate(-.5deg); }
        #wk-game .bingo-cell:nth-child(4n)   { transform: rotate(1.8deg); }
        #wk-game .bingo-cell.checked {
            background: radial-gradient(circle at 30% 30%, #fbbf24 0%, #d4af37 60%, #8b6914 100%) !important;
            border-color: #c8102e !important;
            color: #fef9e7 !important;
            text-shadow: 0 1px 0 #3d2914, 0 2px 4px rgba(0,0,0,.5);
            box-shadow: 0 4px 12px rgba(212,175,55,.6), inset 0 0 0 1px rgba(254,249,231,.5) !important;
        }
        #wk-game .bingo-cell.checked::after {
            content: '★';
            position: absolute;
            font-size: .8em;
            top: 2px; right: 4px;
            color: #c8102e;
            text-shadow: 0 1px 0 #fef9e7;
            opacity: .95;
            pointer-events: none;
        }
        body.light #wk-game .bingo-cell {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 50%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%) !important;
            color: #3d2914 !important;
            border-color: #d4af37 !important;
        }
        body.light #wk-game .bingo-cell.checked {
            background: radial-gradient(circle at 30% 30%, #fbbf24 0%, #d4af37 60%, #8b6914 100%) !important;
            color: #fef9e7 !important;
        }

        /* WK Goal overlay - GOUDEN STICKER over je scherm */
        #wk-goal-overlay {
            position: fixed; inset: 0; z-index: 1000;
            background:
                radial-gradient(circle at center, rgba(212,175,55,.35) 0%, rgba(61,41,20,.95) 70%);
            display: flex; align-items: center; justify-content: center;
            flex-direction: column;
            backdrop-filter: blur(8px);
        }
        #wk-goal-overlay.show { display: flex !important; }
        .wk-goal-content {
            text-align: center; position: relative;
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            padding: 40px 30px;
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                radial-gradient(circle at 30% 30%, #fbbf24 0%, #d4af37 55%, #8b6914 100%);
            border: 4px solid #c8102e;
            border-radius: 12px;
            box-shadow:
                0 0 0 4px #fef9e7,
                0 0 0 7px #d4af37,
                0 25px 60px rgba(0,0,0,.7);
            transform: rotate(-3deg);
            max-width: 90%;
        }
        .wk-goal-ball {
            font-size: 4.5rem;
            animation: wkBallBounce 0.6s ease-out;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
        }
        @keyframes wkBallBounce {
            0%   { transform: translateY(-60px) scale(0.5); opacity:0; }
            60%  { transform: translateY(10px)  scale(1.1); opacity:1; }
            80%  { transform: translateY(-8px)  scale(0.95); }
            100% { transform: translateY(0)     scale(1); }
        }
        .wk-goal-text {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 3.4rem; font-weight: 400;
            color: #c8102e;
            letter-spacing: 2px; line-height: 1;
            text-transform: uppercase;
            text-shadow:
                0 2px 0 #fef9e7,
                0 4px 0 #8b6914,
                0 6px 12px rgba(0,0,0,.6);
            animation: wkGoalPop 0.4s 0.3s both ease-out;
        }
        @keyframes wkGoalPop {
            0%   { transform: scale(0.3); opacity: 0; }
            70%  { transform: scale(1.15); }
            100% { transform: scale(1); opacity: 1; }
        }
        .wk-goal-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 1.05rem; color: #3d2914; font-weight: 700;
            text-shadow: 0 1px 0 rgba(254,249,231,.6);
            animation: wkGoalPop 0.4s 0.5s both ease-out;
        }
        .wk-match-title {
            font-family: 'Bebas Neue', 'Anton', sans-serif;
            font-size: 1.1rem; font-weight: 400; letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #3d2914;
            flex:1; line-height:1.2;
        }

        /* Knockout groep-heading */
        .wk-round-heading {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.05rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px;
            color: #c8102e; margin: 14px 0 8px;
            padding-bottom: 4px;
            border-bottom: 2px solid #d4af37;
            text-shadow: 0 1px 0 rgba(254,249,231,.4);
        }
        body.light .wk-round-heading { color: #c8102e; }

        /* Poule-titel boven matchlijst */
        .wk-poule-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .9rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px;
            color: #8b6914; margin-bottom: 10px;
        }

        /* Shuffle-knop WK - Panini-stijl */
        .wk-btn-shuffle {
            width:auto; margin:0 0 0 auto; padding:6px 12px;
            font-family: 'Bebas Neue', sans-serif;
            font-size:.85rem; letter-spacing: 1px;
            border-radius: 4px;
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            display:flex; align-items:center; gap:6px;
            color: #3d2914;
            flex-shrink:0;
            text-transform: uppercase;
            box-shadow: 0 2px 5px rgba(61,41,20,.3);
        }
        .wk-btn-shuffle svg { width:14px; height:14px; fill:currentColor; transition:transform .4s ease; }
        .wk-btn-shuffle:hover:not(:disabled) {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 100%);
            color: #3d2914;
        }
        .wk-btn-shuffle:hover:not(:disabled) svg { transform:rotate(180deg); }
        .wk-btn-shuffle:disabled { opacity:.4; cursor:default; }
        .wk-shuffle-count {
            font-family: 'Anton', sans-serif;
            font-weight: 400; font-size: 1.05rem;
            color: #c8102e;
        }
        body.light .wk-shuffle-count { color: #c8102e; }

        /* WK Stats-knop in banner — pre-paid-ticket */
        .wk-banner-stats {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            color: #3d2914; padding: 6px 12px; border-radius: 4px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: .82rem; font-weight: 400; letter-spacing: 1.2px;
            text-transform: uppercase;
            cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
            transition: background .15s, transform .15s;
            white-space: nowrap;
            box-shadow: 0 2px 5px rgba(61,41,20,.4), inset 0 0 0 1px rgba(254,249,231,.5);
            transform: rotate(1.5deg);
        }
        .wk-banner-stats:hover {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 100%);
            transform: rotate(0);
        }
        .wk-banner-stats:active { transform: scale(.96) rotate(0); }

        /* Naam-onboarding (eerste keer) - oud-papier kaart */
        .wk-name-prompt {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #8b6914 100%) 1;
            border-radius: 8px; padding: 14px 16px; margin-bottom: 14px;
            box-shadow: 0 4px 12px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(-0.4deg);
            position: relative;
            color: #3d2914;
        }
        body.light .wk-name-prompt {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
        }
        .wk-name-prompt-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .95rem; font-weight: 400; text-transform: uppercase;
            letter-spacing: 2px; color: #c8102e;
            margin-bottom: 10px;
        }
        body.light .wk-name-prompt-title { color: #c8102e; }
        .wk-name-prompt-row {
            display: flex; gap: 8px; align-items: stretch;
        }
        .wk-name-prompt input {
            flex: 1; min-width: 0;
            padding: 10px 12px; border-radius: 4px;
            border: 2px solid #d4af37;
            background: #fef9e7;
            color: #3d2914;
            font-family: 'Poppins', sans-serif;
            font-size: .9rem;
            box-shadow: inset 0 1px 3px rgba(61,41,20,.15);
        }
        body.light .wk-name-prompt input {
            background: #fef9e7; border-color: #d4af37;
        }
        .wk-name-prompt input:focus {
            outline: none; border-color: #c8102e;
            box-shadow: inset 0 1px 3px rgba(61,41,20,.15), 0 0 0 2px rgba(200,16,46,.15);
        }
        .wk-name-prompt button {
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
            border: 2px solid #d4af37;
            width: auto;
            margin: 0;
            padding: 0 18px;
            border-radius: 4px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: .9rem; letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor: pointer; flex-shrink: 0;
            box-shadow: 0 2px 5px rgba(61,41,20,.4), inset 0 0 0 1px rgba(254,249,231,.4);
        }
        .wk-name-prompt button:active { transform: scale(.97); }
        .wk-name-prompt button:disabled { opacity: .5; cursor: default; }

        /* Naam-chip (na invullen) - spelersnaam-sticker, scheef geplakt */
        .wk-name-chip {
            display: inline-flex; align-items: center; gap: 6px;
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            border-radius: 4px; padding: 5px 10px 5px 12px;
            font-family: 'Poppins', sans-serif;
            font-size: .78rem; margin-bottom: 14px;
            color: #3d2914;
            box-shadow: 0 2px 5px rgba(61,41,20,.35), inset 0 0 0 1px rgba(254,249,231,.7);
            transform: rotate(-1.5deg);
        }
        .wk-name-chip-label {
            font-family: 'Bebas Neue', sans-serif;
            color: #8b6914;
            font-size: .72rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .wk-name-chip-name  {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-weight: 400; font-size: .92rem;
            letter-spacing: .5px;
            text-transform: uppercase;
            color: #c8102e;
        }
        body.light .wk-name-chip-name { color: #c8102e; }
        .wk-name-chip-edit {
            background: none; border: none; cursor: pointer;
            color: #8b6914; padding: 2px 4px;
            font-size: .85rem; line-height: 1;
        }
        .wk-name-chip-edit:hover { color: #c8102e; }

        /* ── Multiplayer-blok (Speel met vrienden) - verzamelkaart-kassa ── */
        .wk-mp-card {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #8b6914 100%) 1;
            border-radius: 8px; padding: 14px 16px; margin-bottom: 16px;
            box-shadow: 0 4px 12px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
            color: #3d2914;
            transform: rotate(0.4deg);
            position: relative;
        }
        body.light .wk-mp-card {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
        }
        .wk-mp-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1rem; font-weight: 400; letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #c8102e;
            margin-bottom: 4px;
            display: flex; align-items: center; gap: 6px;
        }
        .wk-mp-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .78rem; color: #8b6914; margin-bottom: 10px;
        }
        .wk-mp-actions {
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        }
        .wk-mp-btn {
            padding: 10px 12px; border-radius: 4px;
            font-family: 'Bebas Neue', sans-serif;
            font-weight: 400; letter-spacing: 1.5px;
            font-size: .9rem; cursor: pointer;
            text-transform: uppercase;
            border: 2px solid #d4af37;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            box-shadow: 0 2px 6px rgba(61,41,20,.35), inset 0 0 0 1px rgba(254,249,231,.4);
            transition: transform .12s, box-shadow .15s;
        }
        .wk-mp-btn.primary {
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
        }
        .wk-mp-btn.primary:hover {
            background: linear-gradient(180deg, #d4af37 0%, #c8102e 100%);
        }
        .wk-mp-btn.secondary {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            color: #3d2914;
        }
        .wk-mp-btn.secondary:hover {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 100%);
        }
        body.light .wk-mp-btn.secondary {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            color: #3d2914;
        }
        .wk-mp-btn:active { transform: scale(.97); }
        .wk-mp-btn:disabled { opacity: .5; cursor: default; transform: none; }
        .wk-mp-offline-note {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .75rem; color: #8b6914; margin-top: 8px;
            display: none;
        }
        .wk-mp-offline-note.show { display: block; }

        /* ── Broadcast-blok (radio + TV-tips) ── */
        .wk-broadcast-card {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #8b6914 100%) 1;
            border-radius: 8px; padding: 14px 16px; margin-top: 16px;
            box-shadow: 0 4px 12px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
            color: #3d2914;
            transform: rotate(-0.3deg);
        }
        .wk-broadcast-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1rem; font-weight: 400; letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #c8102e;
            margin-bottom: 10px;
            display: flex; align-items: center; gap: 6px;
        }
        .wk-broadcast-row {
            display: flex; gap: 10px;
            margin-bottom: 10px;
            font-family: 'Playfair Display', serif;
            font-size: .8rem; line-height: 1.4;
            color: #3d2914;
        }
        .wk-broadcast-label {
            flex: 0 0 auto;
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
            color: #8b6914;
            min-width: 60px;
            padding-top: 1px;
        }
        .wk-broadcast-body { flex: 1; min-width: 0; }
        .wk-broadcast-links {
            display: flex; flex-wrap: wrap; gap: 6px 10px;
            margin-top: 6px;
        }
        .wk-broadcast-link {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
            font-size: .78rem;
            color: #c8102e;
            text-decoration: none;
            border-bottom: 1px solid rgba(200,16,46,.35);
            padding-bottom: 1px;
            transition: color .15s, border-color .15s;
        }
        .wk-broadcast-link:hover {
            color: #8b0a1f;
            border-bottom-color: #8b0a1f;
        }
        .wk-broadcast-note {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .72rem; color: #8b6914;
            margin-top: 4px;
        }
        /* Op .nl-domein: BBC-link verbergen (alleen NOS/NPO tonen). */
        html[lang="nl"] .wk-broadcast-bbc { display: none; }

        /* ── Modal voor kamer maken / joinen - uitscheurbare kaart ── */
        .wk-modal-overlay {
            position: fixed; inset: 0; z-index: 1100;
            background:
                radial-gradient(circle at center, rgba(61,41,20,.6) 0%, rgba(61,41,20,.92) 80%);
            backdrop-filter: blur(8px);
            display: none; align-items: center; justify-content: center;
            padding: 20px;
        }
        .wk-modal-overlay.show { display: flex; }
        .wk-modal {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 4px solid #3d2914;
            border-radius: 8px; padding: 22px;
            max-width: 380px; width: 100%;
            color: #3d2914;
            box-shadow:
                0 0 0 2px #d4af37,
                inset 0 0 0 1px rgba(254,249,231,.6),
                0 30px 60px rgba(0,0,0,.55);
            transform: rotate(-1deg);
            position: relative;
        }
        .wk-modal::before {
            content: '';
            position: absolute; inset: 6px;
            border: 1px dashed rgba(212,175,55,.55);
            border-radius: 4px;
            pointer-events: none;
        }
        .wk-modal-title {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.3rem; font-weight: 400; margin: 0 0 14px;
            letter-spacing: 1.5px; text-transform: uppercase;
            color: #c8102e;
            text-shadow: 0 1px 0 rgba(254,249,231,.5);
        }
        .wk-modal-label {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .8rem; font-weight: 400; text-transform: uppercase;
            letter-spacing: 1.5px; color: #8b6914;
            margin-bottom: 6px; display: block;
        }
        .wk-modal-input, .wk-modal-select {
            width: 100%; padding: 10px 12px; border-radius: 4px;
            border: 2px solid #d4af37;
            background: #fef9e7; color: #3d2914;
            font-family: 'Poppins', sans-serif; font-size: .9rem;
            margin-bottom: 12px;
            box-shadow: inset 0 1px 3px rgba(61,41,20,.15);
        }
        body.light .wk-modal-input, body.light .wk-modal-select {
            background: #fef9e7; border-color: #d4af37;
        }
        .wk-modal-input:focus, .wk-modal-select:focus {
            outline: none; border-color: #c8102e;
            box-shadow: inset 0 1px 3px rgba(61,41,20,.15), 0 0 0 2px rgba(200,16,46,.15);
        }
        .wk-code-input {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 2.4rem; font-weight: 400; text-align: center;
            letter-spacing: 12px; padding: 14px;
            font-variant-numeric: tabular-nums;
            color: #c8102e;
            text-shadow: 0 1px 0 rgba(254,249,231,.6);
        }
        .wk-modal-actions {
            display: flex; gap: 8px; margin-top: 6px;
            position: relative; z-index: 1;
        }
        .wk-modal-actions button { flex: 1; }
        .wk-modal-error {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            color: #c8102e; font-size: .82rem; margin: -4px 0 8px;
            min-height: 1em;
        }

        /* ── Generieke dialoog (alert/confirm/prompt) - Panini sticker ── */
        .bingo-dialog-overlay {
            position: fixed; inset: 0; z-index: 2000;
            background:
                radial-gradient(circle at center, rgba(61,41,20,.6) 0%, rgba(61,41,20,.92) 80%);
            backdrop-filter: blur(8px);
            display: none; align-items: center; justify-content: center;
            padding: 20px;
        }
        .bingo-dialog-overlay.show { display: flex; animation: popIn .25s; }
        .bingo-dialog {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 4px solid #3d2914;
            border-radius: 8px;
            padding: 22px 22px 18px;
            max-width: 380px; width: 100%;
            color: #3d2914;
            box-shadow:
                0 0 0 2px #d4af37,
                inset 0 0 0 1px rgba(254,249,231,.6),
                0 30px 60px rgba(0,0,0,.55);
            transform: rotate(-0.8deg);
            position: relative;
            text-align: center;
        }
        .bingo-dialog::before {
            content: '';
            position: absolute; inset: 6px;
            border: 1px dashed rgba(212,175,55,.55);
            border-radius: 4px;
            pointer-events: none;
        }
        .bingo-dialog-icon {
            font-size: 2rem; line-height: 1;
            margin: 0 0 8px;
            filter: drop-shadow(0 2px 3px rgba(61,41,20,.3));
        }
        .bingo-dialog-title {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.25rem; font-weight: 400; margin: 0 0 8px;
            letter-spacing: 1.5px; text-transform: uppercase;
            color: #c8102e;
            text-shadow: 0 1px 0 rgba(254,249,231,.5);
        }
        .bingo-dialog-message {
            font-family: 'Poppins', sans-serif;
            font-size: .92rem; line-height: 1.45;
            color: #3d2914;
            margin: 0 0 14px;
            white-space: pre-line;
        }
        .bingo-dialog-input {
            width: 100%; padding: 10px 12px; border-radius: 4px;
            border: 2px solid #d4af37;
            background: #fef9e7; color: #3d2914;
            font-family: 'Poppins', sans-serif; font-size: .95rem;
            margin: 0 0 12px;
            box-shadow: inset 0 1px 3px rgba(61,41,20,.15);
            text-align: center;
        }
        .bingo-dialog-input:focus {
            outline: none; border-color: #c8102e;
            box-shadow: inset 0 1px 3px rgba(61,41,20,.15), 0 0 0 2px rgba(200,16,46,.15);
        }
        .bingo-dialog-actions {
            display: flex; gap: 8px; margin-top: 4px;
            position: relative; z-index: 1;
        }
        .bingo-dialog-actions button {
            flex: 1;
            padding: 10px 12px; border-radius: 4px;
            font-family: 'Bebas Neue', sans-serif;
            font-weight: 400; letter-spacing: 1.5px;
            font-size: .9rem; cursor: pointer;
            text-transform: uppercase;
            border: 2px solid #d4af37;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            box-shadow: 0 2px 6px rgba(61,41,20,.35), inset 0 0 0 1px rgba(254,249,231,.4);
            transition: transform .12s, box-shadow .15s;
            margin: 0;
            width: auto;
        }
        .bingo-dialog-actions button.primary {
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
        }
        .bingo-dialog-actions button.primary:hover {
            background: linear-gradient(180deg, #d4af37 0%, #c8102e 100%);
        }
        .bingo-dialog-actions button.secondary {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            color: #3d2914;
        }
        .bingo-dialog-actions button.secondary:hover {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 100%);
        }
        .bingo-dialog-actions button:active { transform: scale(.97); }
        /* Variants per type */
        .bingo-dialog.type-error .bingo-dialog-title { color: #c8102e; }
        .bingo-dialog.type-success .bingo-dialog-title { color: #15803d; }
        .bingo-dialog.type-info .bingo-dialog-title { color: #0a4d8c; }

        /* ── Lobby - Panini ticket-balie ── */
        .wk-lobby {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #8b6914 100%) 1;
            border-radius: 8px; padding: 18px; margin-bottom: 16px;
            color: #3d2914;
            box-shadow: 0 4px 14px rgba(61,41,20,.35), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(-0.5deg);
            position: relative;
        }
        body.light .wk-lobby {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
        }
        .wk-lobby-header {
            text-align: center; margin-bottom: 14px;
        }
        .wk-lobby-label {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .78rem; font-weight: 400; text-transform: uppercase;
            letter-spacing: 2px; color: #8b6914; margin-bottom: 4px;
        }
        body.light .wk-lobby-label { color: #8b6914; }
        .wk-lobby-code {
            display: inline-block;
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 3rem; font-weight: 400; letter-spacing: 10px;
            color: #c8102e;
            font-variant-numeric: tabular-nums;
            text-transform: uppercase;
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid #d4af37;
            border-radius: 6px;
            padding: 6px 18px 4px;
            margin: 6px 0 8px;
            text-shadow:
                0 2px 0 #fef9e7,
                0 3px 0 rgba(139,105,20,.4);
            box-shadow:
                0 4px 10px rgba(61,41,20,.4),
                inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(-1deg);
        }
        body.light .wk-lobby-code { color: #c8102e; }
        .wk-lobby-share-btn {
            display: inline-flex; width: auto;
            margin: 2px auto 10px; padding: 7px 16px;
            font-size: .8rem; letter-spacing: 1px;
        }
        .wk-lobby-match {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1rem; font-weight: 400; letter-spacing: 1px;
            text-transform: uppercase;
            color: #3d2914; margin-bottom: 2px;
        }
        .wk-lobby-meta {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .78rem; color: #8b6914;
        }
        .wk-lobby-players-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .8rem; font-weight: 400; text-transform: uppercase;
            letter-spacing: 1.5px; color: #c8102e;
            margin: 14px 0 8px;
            padding-bottom: 4px;
            border-bottom: 2px solid #d4af37;
        }
        .wk-lobby-players {
            display: flex; flex-direction: column; gap: 6px;
        }
        .wk-lobby-player {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            border-radius: 4px; padding: 8px 12px;
            display: flex; justify-content: space-between; align-items: center;
            font-family: 'Poppins', sans-serif;
            font-size: .85rem;
            box-shadow: 0 2px 4px rgba(61,41,20,.25), inset 0 0 0 1px rgba(254,249,231,.5);
        }
        .wk-lobby-player:nth-child(odd) { transform: rotate(-0.5deg); }
        .wk-lobby-player:nth-child(even) { transform: rotate(0.5deg); }
        body.light .wk-lobby-player {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
        }
        .wk-lobby-player.is-me {
            border-color: #c8102e;
            box-shadow: 0 3px 6px rgba(200,16,46,.3), inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .wk-lobby-player-name {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-weight: 400; letter-spacing: .5px;
            font-size: .95rem;
            text-transform: uppercase;
            color: #3d2914;
            display: flex; gap: 6px; align-items: center;
        }
        .wk-lobby-player-tag {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .65rem; padding: 2px 7px; border-radius: 3px;
            background: linear-gradient(135deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
            font-weight: 400;
            text-transform: uppercase; letter-spacing: 1px;
            border: 1px solid #fef9e7;
            box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 0 1px #d4af37;
        }
        body.light .wk-lobby-player-tag {
            background: linear-gradient(135deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
        }
        .wk-lobby-buttons {
            display: flex; gap: 8px; margin-top: 14px;
        }
        .wk-lobby-buttons button { flex: 1; }
        .wk-lobby-waiting {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            text-align: center; color: #8b6914;
            font-size: .9rem; padding: 12px;
        }

        /* ── Leaderboard - notebook-bladzijde ── */
        .wk-leaderboard {
            background:
                linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%),
                repeating-linear-gradient(
                    180deg,
                    #fef9e7 0px, #fef9e7 22px,
                    rgba(212,175,55,.25) 22px, rgba(212,175,55,.25) 23px
                );
            border: 3px solid #d4af37;
            border-left: 6px solid #c8102e;
            border-radius: 4px; padding: 12px 14px; margin-top: 14px;
            color: #3d2914;
            box-shadow: 0 4px 10px rgba(61,41,20,.35), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(0.6deg);
            position: relative;
        }
        body.light .wk-leaderboard {
            background:
                linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%),
                repeating-linear-gradient(
                    180deg,
                    #fef9e7 0px, #fef9e7 22px,
                    rgba(212,175,55,.25) 22px, rgba(212,175,55,.25) 23px
                );
        }
        .wk-leaderboard-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .85rem; font-weight: 400; text-transform: uppercase;
            letter-spacing: 1.5px; color: #c8102e; margin-bottom: 8px;
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px dashed rgba(139,105,20,.4);
            padding-bottom: 4px;
        }
        body.light .wk-leaderboard-title { color: #c8102e; }
        .wk-leaderboard-code {
            font-family: 'Anton', sans-serif;
            font-weight: 400; letter-spacing: 2px;
            color: #c8102e;
            background: #fef9e7;
            padding: 2px 8px; border-radius: 3px;
            border: 2px solid #d4af37;
            box-shadow: 0 1px 3px rgba(61,41,20,.3);
        }
        .wk-leaderboard-list {
            display: flex; flex-direction: column; gap: 4px;
        }
        .wk-leaderboard-row {
            display: flex; justify-content: space-between; align-items: center;
            font-family: 'Poppins', sans-serif;
            font-size: .85rem; padding: 4px 6px; border-radius: 3px;
            color: #3d2914;
        }
        .wk-leaderboard-row.is-me {
            background: rgba(200,16,46,.12);
            border-left: 3px solid #c8102e;
        }
        .wk-leaderboard-rank {
            font-family: 'Anton', sans-serif;
            font-weight: 400; color: #8b6914;
            font-size: 1rem;
            width: 24px; text-align: center; flex-shrink: 0;
        }
        .wk-leaderboard-name {
            flex: 1; min-width: 0; padding: 0 6px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            font-weight: 700;
        }
        .wk-leaderboard-score {
            font-family: 'Anton', sans-serif;
            font-weight: 400; color: #c8102e;
            font-size: .95rem;
            font-variant-numeric: tabular-nums;
        }
        body.light .wk-leaderboard-score { color: #c8102e; }
        .wk-leaderboard-bingo {
            font-size: .75rem; margin-left: 4px;
        }

        /* ══════════════════════════ BORRELBINGO ═════════════════════════════ */
        /* Hergebruikt grotendeels wk-lobby-player / wk-mp-card / wk-modal / wk-leaderboard.
           Hieronder alleen aanvullingen specifiek voor borrelmodus.                       */

        /* Speler-rij in lobby/spel met term-tag + strafpunten-tag */
        .bb-player-row {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            border-radius: 4px; padding: 8px 12px;
            display: flex; justify-content: space-between; align-items: center;
            gap: 8px;
            font-family: 'Poppins', sans-serif;
            font-size: .85rem;
            color: #3d2914;
            box-shadow: 0 2px 4px rgba(61,41,20,.25), inset 0 0 0 1px rgba(254,249,231,.5);
            transition: transform .12s, box-shadow .15s, border-color .15s;
        }
        .bb-player-row:nth-child(odd)  { transform: rotate(-0.5deg); }
        .bb-player-row:nth-child(even) { transform: rotate(0.5deg); }
        .bb-player-row.is-me {
            border-color: #c8102e;
            box-shadow: 0 3px 6px rgba(200,16,46,.3), inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .bb-player-row-left {
            display: flex; align-items: center; gap: 6px;
            min-width: 0; flex: 1;
        }
        .bb-player-row-name {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-weight: 400; letter-spacing: .5px;
            font-size: .95rem;
            text-transform: uppercase;
            color: #3d2914;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            min-width: 0;
        }
        .bb-player-row-right {
            display: flex; align-items: center; gap: 6px;
            flex-shrink: 0;
        }
        .bb-tag-term {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .8rem; padding: 3px 9px; border-radius: 3px;
            background: linear-gradient(135deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
            font-weight: 400;
            text-transform: uppercase; letter-spacing: 1px;
            border: 1px solid #fef9e7;
            box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 0 1px #d4af37;
            white-space: nowrap;
            max-width: 160px; overflow: hidden; text-overflow: ellipsis;
        }
        .bb-tag-term.pending {
            background: linear-gradient(135deg, #8b6914 0%, #5a4514 100%);
            font-family: 'Playfair Display', serif;
            font-style: italic; text-transform: none; letter-spacing: 0;
            font-size: .72rem;
        }
        .bb-tag-penalty {
            font-family: 'Anton', sans-serif;
            font-size: .9rem; padding: 2px 8px; border-radius: 3px;
            background: linear-gradient(135deg, #fbbf24 0%, #d4af37 100%);
            color: #3d2914;
            border: 1px solid #8b6914;
            box-shadow: 0 1px 3px rgba(0,0,0,.3);
            font-variant-numeric: tabular-nums;
            min-width: 28px; text-align: center;
        }
        .bb-tag-host {
            font-size: .85rem;
        }

        /* Game-mode: spelers tikbaar */
        .bb-player-row.is-tappable {
            cursor: pointer;
        }
        .bb-player-row.is-tappable:hover:not(.is-me) {
            transform: rotate(0) scale(1.02);
            border-color: #c8102e;
            box-shadow: 0 4px 10px rgba(200,16,46,.35), inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .bb-player-row.is-tappable:active:not(.is-me) {
            transform: scale(.97);
        }
        .bb-player-row.is-tappable.is-me {
            cursor: not-allowed; opacity: .65;
        }
        @keyframes bbClaimPulse {
            0%   { box-shadow: 0 0 0 0 rgba(200,16,46,.7), 0 2px 4px rgba(61,41,20,.25); }
            70%  { box-shadow: 0 0 0 14px rgba(200,16,46,0), 0 2px 4px rgba(61,41,20,.25); }
            100% { box-shadow: 0 0 0 0 rgba(200,16,46,0), 0 2px 4px rgba(61,41,20,.25); }
        }
        .bb-player-row.claim-flash { animation: bbClaimPulse .6s ease-out; }

        /* Eigen term-kaartje (groot, prominent in spel) */
        .bb-my-card {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #8b6914 100%) 1;
            border-radius: 8px;
            padding: 14px 18px 12px;
            margin-bottom: 16px;
            text-align: center;
            color: #3d2914;
            box-shadow: 0 4px 14px rgba(61,41,20,.35), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(-0.6deg);
        }
        .bb-my-card-label {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .72rem; letter-spacing: 2px;
            color: #8b6914; text-transform: uppercase;
            margin-bottom: 2px;
        }
        .bb-my-card-value {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.9rem; line-height: 1.05;
            color: #c8102e;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 2px 0 rgba(254,249,231,.6);
            margin-bottom: 8px;
            word-break: break-word;
        }
        .bb-my-card-value.pending {
            font-family: 'Playfair Display', serif; font-style: italic;
            font-size: 1.2rem; text-transform: none; letter-spacing: 0;
            color: #8b6914;
        }
        .bb-my-card-penalty {
            display: inline-block;
            font-family: 'Anton', sans-serif;
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
            padding: 4px 14px;
            border-radius: 4px;
            font-size: 1.1rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border: 2px solid #d4af37;
            box-shadow: 0 2px 6px rgba(61,41,20,.4);
            font-variant-numeric: tabular-nums;
        }

        /* Ronde-timer (5 minuten countdown) - Panini-stijl note */
        .bb-timer-card {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px dashed #8b6914;
            border-radius: 8px;
            padding: 8px 14px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #3d2914;
            box-shadow: 0 2px 8px rgba(61,41,20,.2), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(.3deg);
        }
        .bb-timer-label {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .8rem; letter-spacing: 1.5px;
            color: #8b6914; text-transform: uppercase;
        }
        .bb-timer-value {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.6rem; letter-spacing: 2px;
            color: #c8102e;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 2px 0 rgba(254,249,231,.6);
        }
        .bb-timer-value.is-urgent {
            color: #fef9e7;
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            padding: 2px 10px;
            border-radius: 4px;
            animation: bbTimerPulse .8s ease-in-out infinite alternate;
        }
        @keyframes bbTimerPulse {
            from { transform: scale(1);    box-shadow: 0 0 0 0 rgba(200,16,46,.4); }
            to   { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(200,16,46,0); }
        }

        /* Sectie-titel binnen borrelbingo */
        .bb-section-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .82rem; font-weight: 400;
            text-transform: uppercase; letter-spacing: 1.5px;
            color: #c8102e; margin: 14px 0 8px;
            padding-bottom: 4px;
            border-bottom: 1px dashed rgba(139,105,20,.4);
        }

        /* Naam-invoer modal */
        .bb-modal-name-input { margin-bottom: 12px; }

        /* "Pak m'n term" knop met flair */
        .bb-claim-term-btn {
            width: 100%;
            margin-top: 4px;
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 100%) !important;
            color: #3d2914 !important;
        }
        .bb-claim-term-btn:hover {
            background: linear-gradient(180deg, #d4af37 0%, #c8102e 100%) !important;
            color: #fef9e7 !important;
        }

        /* Spelregelkaart - panini-stijl note */
        .bb-rules-card {
            background:
                linear-gradient(135deg, rgba(255,255,255,.45) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px dashed #8b6914;
            border-radius: 6px;
            padding: 10px 14px;
            margin-bottom: 14px;
            color: #3d2914;
            font-family: 'Poppins', sans-serif;
            font-size: .78rem; line-height: 1.4;
            box-shadow: 0 2px 6px rgba(61,41,20,.18), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(-0.3deg);
        }
        .bb-rules-card-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .85rem; letter-spacing: 1.5px;
            color: #c8102e; text-transform: uppercase;
            margin-bottom: 4px;
        }
        .bb-rules-card ul {
            margin: 0; padding-left: 18px;
        }
        .bb-rules-card li { margin: 2px 0; }
        .bb-rules-card strong {
            color: #c8102e;
            font-weight: 600;
        }

        /* Spelmodus: 1 rij per speler (Naam | Term-tegel | Strafpunten) */
        .bb-game-grid {
            display: grid;
            grid-template-columns: minmax(70px, 1fr) minmax(120px, 2fr) minmax(48px, auto);
            gap: 8px 12px;
            align-items: stretch;
            margin-bottom: 6px;
        }
        .bb-game-head {
            display: contents;
            font-family: 'Bebas Neue', sans-serif;
        }
        .bb-game-head > div {
            font-size: .72rem; letter-spacing: 1.5px;
            color: #8b6914; text-transform: uppercase;
            padding-bottom: 4px;
            border-bottom: 1px dashed rgba(139,105,20,.4);
        }
        .bb-game-head > div:last-child { text-align: right; }

        .bb-game-row {
            display: contents;
        }
        .bb-game-row-name {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.05rem; letter-spacing: 1px;
            color: #3d2914;
            display: flex; align-items: center;
            text-transform: uppercase;
            word-break: break-word;
        }
        .bb-game-row.is-me .bb-game-row-name { color: #c8102e; }
        .bb-game-row-penalty {
            font-family: 'Anton', sans-serif;
            font-size: 1.6rem; letter-spacing: 1px;
            color: #c8102e;
            display: flex; align-items: center; justify-content: flex-end;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 2px 0 rgba(254,249,231,.6);
        }

        /* Term-tegel binnen rij (klikbaar) */
        .bb-row-tile {
            position: relative;
            background:
                linear-gradient(135deg, rgba(255,255,255,.55) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid #d4af37;
            border-radius: 8px;
            padding: 10px 12px;
            min-height: 48px;
            display: flex; align-items: center; justify-content: center;
            text-align: center;
            color: #3d2914;
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
            transition: transform .12s, box-shadow .15s, border-color .15s;
            overflow: hidden;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .bb-row-tile:hover:not(.is-mine):not(.is-empty) {
            transform: scale(1.03);
            border-color: #c8102e;
            box-shadow: 0 5px 12px rgba(200,16,46,.35), inset 0 0 0 1px rgba(254,249,231,.7);
        }
        .bb-row-tile:active:not(.is-mine):not(.is-empty) { transform: scale(.96); }
        .bb-row-tile.is-mine {
            cursor: not-allowed;
            opacity: .55;
            border-style: dashed;
            background: linear-gradient(180deg, #f3e9d2 0%, #e8dcb8 100%);
        }
        .bb-row-tile.is-empty {
            cursor: default;
            opacity: .4;
            border-style: dotted;
        }
        .bb-row-tile-term {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.05rem; line-height: 1.1;
            color: #c8102e;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 2px 0 rgba(254,249,231,.6);
            word-break: break-word;
            hyphens: auto;
        }
        .bb-row-tile.is-mine .bb-row-tile-term { color: #8b6914; }

        /* Hit-flash hergebruikt bbTileHit-animatie via .bb-tile-hit */
        .bb-row-tile.bb-tile-hit {
            animation: bbTileHit 1.2s ease-out;
            border-color: #c8102e !important;
            z-index: 5;
        }

        /* Grid van grote term-tegels (spelmodus) */
        .bb-tile-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 4px;
        }
        @media (min-width: 520px) {
            .bb-tile-grid { grid-template-columns: repeat(3, 1fr); }
        }

        .bb-tile {
            position: relative;
            background:
                linear-gradient(135deg, rgba(255,255,255,.55) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid #d4af37;
            border-radius: 8px;
            padding: 22px 10px 14px;
            min-height: 110px;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            text-align: center;
            color: #3d2914;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
            transition: transform .12s, box-shadow .15s, border-color .15s;
            overflow: hidden;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .bb-tile:nth-child(odd)  { transform: rotate(-0.6deg); }
        .bb-tile:nth-child(even) { transform: rotate(0.6deg); }
        .bb-tile:hover:not(.is-mine) {
            transform: rotate(0) scale(1.03);
            border-color: #c8102e;
            box-shadow: 0 6px 14px rgba(200,16,46,.35), inset 0 0 0 1px rgba(254,249,231,.7);
        }
        .bb-tile:active:not(.is-mine) {
            transform: scale(.96);
        }
        .bb-tile.is-mine {
            cursor: not-allowed;
            opacity: .55;
            border-style: dashed;
            background: linear-gradient(180deg, #f3e9d2 0%, #e8dcb8 100%);
        }
        .bb-tile-term {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.25rem; line-height: 1.1;
            color: #c8102e;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 2px 0 rgba(254,249,231,.6);
            word-break: break-word;
            hyphens: auto;
        }
        .bb-tile.is-mine .bb-tile-term {
            color: #8b6914;
        }
        .bb-tile-owner {
            position: absolute;
            top: 4px; left: 6px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: .62rem;
            letter-spacing: 1px;
            color: #8b6914;
            text-transform: uppercase;
            max-width: 70%;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .bb-tile-owner.is-mine-tag {
            color: #c8102e;
            font-weight: 600;
        }
        .bb-tile-penalty {
            position: absolute;
            top: 4px; right: 6px;
            font-family: 'Anton', sans-serif;
            font-size: .75rem;
            background: linear-gradient(135deg, #fbbf24 0%, #d4af37 100%);
            color: #3d2914;
            padding: 1px 6px;
            border-radius: 3px;
            border: 1px solid #8b6914;
            box-shadow: 0 1px 2px rgba(0,0,0,.25);
            font-variant-numeric: tabular-nums;
            min-width: 18px; text-align: center;
        }
        @keyframes bbTilePulse {
            0%   { box-shadow: 0 0 0 0 rgba(200,16,46,.7), 0 4px 10px rgba(61,41,20,.3); }
            70%  { box-shadow: 0 0 0 18px rgba(200,16,46,0), 0 4px 10px rgba(61,41,20,.3); }
            100% { box-shadow: 0 0 0 0 rgba(200,16,46,0), 0 4px 10px rgba(61,41,20,.3); }
        }
        .bb-tile.claim-flash { animation: bbTilePulse .6s ease-out; }

        /* Strafpunt-hit: dikke rode pulse + schud, vergelijkbaar met bingo-lijn */
        @keyframes bbTileHit {
            0%   { transform: scale(1) rotate(0); border-color: #c8102e;
                   box-shadow: 0 0 0 0 rgba(200,16,46,.8), 0 4px 10px rgba(61,41,20,.3); }
            15%  { transform: scale(1.08) rotate(-2deg); border-color: #c8102e;
                   box-shadow: 0 0 0 6px rgba(200,16,46,.55), 0 0 26px rgba(251,191,36,.7), 0 6px 14px rgba(61,41,20,.4); }
            30%  { transform: scale(1.05) rotate(2deg); }
            45%  { transform: scale(1.06) rotate(-1.5deg); }
            60%  { transform: scale(1.03) rotate(1deg); }
            100% { transform: scale(1) rotate(0); border-color: #d4af37;
                   box-shadow: 0 0 0 0 rgba(200,16,46,0), 0 4px 10px rgba(61,41,20,.3); }
        }
        .bb-tile.bb-tile-hit {
            animation: bbTileHit 1.2s ease-out;
            border-color: #c8102e !important;
            z-index: 5;
        }

        /* Drijvende "+N!" overlay-badge op een tegel bij een hit */
        @keyframes bbHitBadgeFloat {
            0%   { opacity: 0; transform: translate(-50%, 10%) scale(.4); }
            18%  { opacity: 1; transform: translate(-50%, -40%) scale(1.25); }
            70%  { opacity: 1; transform: translate(-50%, -85%) scale(1.05); }
            100% { opacity: 0; transform: translate(-50%, -130%) scale(.9); }
        }
        .bb-tile-hit-badge {
            position: absolute;
            left: 50%; top: 50%;
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 2.4rem;
            color: #fbbf24;
            letter-spacing: 2px;
            text-shadow:
                0 2px 0 #c8102e,
                0 4px 0 #8b0a1f,
                0 6px 14px rgba(0,0,0,.6),
                0 0 18px rgba(251,191,36,.8);
            pointer-events: none;
            z-index: 20;
            animation: bbHitBadgeFloat 1.4s ease-out forwards;
            white-space: nowrap;
        }

        /* ── Eindscherm kamer - PANINI WINNAARS-KAFT ── */
        .wk-finish-card {
            background:
                linear-gradient(135deg, rgba(255,255,255,.45) 0%, transparent 45%),
                linear-gradient(180deg, #3d2914 0%, #5a3a1f 100%);
            border: 4px solid #d4af37;
            border-radius: 8px; padding: 22px; text-align: center;
            color: #fef9e7; margin-bottom: 16px;
            box-shadow:
                0 0 0 2px #fef9e7,
                0 0 0 5px #d4af37,
                0 8px 22px rgba(0,0,0,.55),
                inset 0 0 0 1px rgba(254,249,231,.4);
            position: relative;
        }
        .wk-finish-title {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1.9rem; font-weight: 400; color: #d4af37;
            letter-spacing: 3px; margin-bottom: 4px;
            text-transform: uppercase;
            text-shadow:
                0 2px 0 #c8102e,
                0 4px 0 #8b0a1f,
                0 6px 12px rgba(0,0,0,.7);
        }
        .wk-finish-sub {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .9rem; color: rgba(254,249,231,.85); margin-bottom: 16px;
        }
        .wk-finish-podium {
            display: flex; flex-direction: column; gap: 8px;
            text-align: left;
        }
        .wk-finish-row {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            border-radius: 5px; padding: 10px 12px;
            display: flex; align-items: center; gap: 10px;
            color: #3d2914;
            box-shadow: 0 2px 5px rgba(0,0,0,.3), inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .wk-finish-row:nth-child(odd) { transform: rotate(-0.7deg); }
        .wk-finish-row:nth-child(even) { transform: rotate(0.7deg); }
        .wk-finish-row.gold {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                radial-gradient(circle at 30% 30%, #fbbf24 0%, #d4af37 60%, #8b6914 100%);
            border: 3px solid #c8102e;
            box-shadow: 0 4px 10px rgba(212,175,55,.55), inset 0 0 0 1px rgba(254,249,231,.7);
        }
        .wk-finish-row.silver {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                radial-gradient(circle at 30% 30%, #f1f5f9 0%, #cbd5e1 60%, #64748b 100%);
            border: 3px solid #d4af37;
            box-shadow: 0 4px 10px rgba(203,213,225,.5), inset 0 0 0 1px rgba(254,249,231,.7);
        }
        .wk-finish-row.bronze {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                radial-gradient(circle at 30% 30%, #e8b58e 0%, #b87333 60%, #6b3a0a 100%);
            border: 3px solid #d4af37;
            box-shadow: 0 4px 10px rgba(184,115,51,.5), inset 0 0 0 1px rgba(254,249,231,.7);
            color: #fef9e7;
        }
        .wk-finish-medal {
            font-size: 1.6rem; width: 32px; text-align: center;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
        }
        .wk-finish-name {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-weight: 400; letter-spacing: .5px;
            text-transform: uppercase;
            font-size: 1rem;
            flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .wk-finish-time {
            font-family: 'Anton', sans-serif;
            font-weight: 400; color: #c8102e;
            font-size: 1.05rem;
            font-variant-numeric: tabular-nums;
            text-shadow: 0 1px 0 rgba(254,249,231,.5);
        }
        .wk-finish-row.bronze .wk-finish-time { color: #fef9e7; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
        .wk-finish-nobingo {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .85rem; color: rgba(61,41,20,.6);
        }
        .wk-finish-row.bronze .wk-finish-nobingo { color: rgba(254,249,231,.75); }
        /* Host-knop bovenop leaderboard */
        #wk-host-finish-btn {
            margin-top: 12px;
            transform: rotate(-0.5deg);
        }

        /* WK Stats-scherm - Panini stickervakjes */
        .wk-stats-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
            margin-bottom: 18px;
        }
        .wk-stat-tile {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid #d4af37;
            border-radius: 6px; padding: 14px 12px;
            display: flex; flex-direction: column; gap: 4px;
            color: #3d2914;
            box-shadow: 0 3px 8px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
            position: relative;
        }
        .wk-stat-tile:nth-child(odd) { transform: rotate(-1deg); }
        .wk-stat-tile:nth-child(even) { transform: rotate(1deg); }
        body.light .wk-stat-tile {
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
        }
        .wk-stat-icon {
            font-size: 1.6rem; line-height: 1;
            filter: drop-shadow(0 2px 3px rgba(61,41,20,.4));
        }
        .wk-stat-value {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 2rem; font-weight: 400; color: #c8102e;
            line-height: 1; letter-spacing: 1px;
            text-shadow: 0 1px 0 rgba(254,249,231,.5);
        }
        body.light .wk-stat-value { color: #c8102e; }
        .wk-stat-label {
            font-family: 'Bebas Neue', sans-serif;
            font-size: .72rem; color: #8b6914;
            text-transform: uppercase; letter-spacing: 1.2px; font-weight: 400;
        }
        .wk-stats-section-title {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 1rem; font-weight: 400; text-transform: uppercase;
            letter-spacing: 2px; color: #c8102e;
            margin: 18px 0 8px;
            padding-bottom: 4px;
            border-bottom: 2px solid #d4af37;
        }
        body.light .wk-stats-section-title { color: #c8102e; }
        .wk-stats-empty {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            text-align: center; padding: 30px 20px; color: #8b6914;
        }
        .wk-stats-empty-icon {
            font-size: 2.8rem; margin-bottom: 10px;
            filter: drop-shadow(0 2px 3px rgba(61,41,20,.3));
        }
        .wk-stats-match-row {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            border-radius: 4px; padding: 10px 12px; margin-bottom: 7px;
            display: flex; justify-content: space-between; align-items: center;
            gap: 8px;
            color: #3d2914;
            box-shadow: 0 2px 5px rgba(61,41,20,.25), inset 0 0 0 1px rgba(254,249,231,.5);
        }
        .wk-stats-match-row:nth-child(odd) { transform: rotate(-0.3deg); }
        .wk-stats-match-row:nth-child(even) { transform: rotate(0.3deg); }
        body.light .wk-stats-match-row {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
        }
        .wk-stats-match-teams {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: .92rem; font-weight: 400; letter-spacing: .5px;
            text-transform: uppercase;
        }
        .wk-stats-match-meta {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .72rem; color: #8b6914;
        }
        .wk-stats-match-numbers {
            display: flex; gap: 10px; font-size: .78rem; flex-shrink: 0;
        }
        .wk-stats-match-numbers span {
            font-family: 'Anton', sans-serif;
            display: inline-flex; align-items: center; gap: 3px;
            color: #c8102e; font-weight: 400;
            font-size: .95rem;
        }
        body.light .wk-stats-match-numbers span { color: #c8102e; }
        .wk-stats-reset {
            margin-top: 20px;
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            color: #8b6914;
            padding: 8px 14px; border-radius: 4px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: .85rem; letter-spacing: 1.2px;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(61,41,20,.25);
        }
        .wk-stats-reset:hover {
            background: linear-gradient(180deg, #c8102e 0%, #8b0a1f 100%);
            color: #fef9e7;
            border-color: #d4af37;
        }

        /* Deel-knop in goal overlay - Panini ticket */
        .wk-goal-actions {
            display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
            justify-content: center;
        }
        .wk-share-btn {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #c8102e;
            color: #3d2914; padding: 10px 22px; border-radius: 4px;
            font-family: 'Bebas Neue', sans-serif;
            font-weight: 400; letter-spacing: 1.5px;
            font-size: 1rem; cursor: pointer;
            text-transform: uppercase;
            display: inline-flex; align-items: center; gap: 6px;
            transition: background .15s, transform .12s;
            box-shadow: 0 3px 8px rgba(61,41,20,.45), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(-1deg);
        }
        .wk-share-btn:hover {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 100%);
            transform: rotate(0);
        }
        .wk-share-btn:disabled { opacity: .5; cursor: default; }

        /* Deel-keuze modal: WhatsApp + Kopieer */
        .wk-share-choice-actions {
            display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px;
            position: relative; z-index: 1;
        }
        .wk-share-choice-btn {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #c8102e;
            color: #3d2914;
            padding: 14px 18px;
            border-radius: 6px;
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1.5px;
            font-size: 1rem;
            cursor: pointer;
            text-transform: uppercase;
            display: flex; align-items: center; justify-content: center; gap: 10px;
            transition: background .15s, transform .12s;
            box-shadow: 0 3px 8px rgba(61,41,20,.4), inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .wk-share-choice-btn:hover:not(:disabled) {
            background: linear-gradient(180deg, #fbbf24 0%, #d4af37 100%);
            transform: translateY(-1px);
        }
        .wk-share-choice-btn:disabled { opacity: .55; cursor: default; }
        .wk-share-choice-btn .wk-share-choice-icon { font-size: 1.35rem; line-height: 1; }
        .wk-share-choice-btn.whatsapp { border-color: #25d366; }
        .wk-share-choice-btn.whatsapp:hover:not(:disabled) {
            background: linear-gradient(180deg, #25d366 0%, #128c7e 100%);
            color: #fef9e7;
        }

        /* Off-screen share-card render-target - PANINI VERZAMELKAART */
        .wk-share-render {
            position: fixed; left: -10000px; top: 0; z-index: -1;
            width: 540px; padding: 28px; box-sizing: border-box;
            background:
                linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%),
                radial-gradient(circle at 30% 20%, rgba(212,175,55,.18) 0%, transparent 60%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            color: #3d2914;
            font-family: 'Poppins', sans-serif;
            border-radius: 10px;
            border: 6px solid #d4af37;
            box-shadow: 0 0 0 3px #fef9e7, 0 0 0 6px #3d2914;
            position: fixed;
        }
        .wk-share-render .wk-share-header {
            text-align: center; margin-bottom: 18px;
            padding-bottom: 12px;
            border-bottom: 2px dashed rgba(139,105,20,.5);
        }
        .wk-share-render .wk-share-goal {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-size: 3.4rem; font-weight: 400; color: #c8102e;
            letter-spacing: 3px; margin: 0;
            text-transform: uppercase;
            text-shadow:
                0 2px 0 #fef9e7,
                0 4px 0 #8b6914,
                0 6px 8px rgba(0,0,0,.3);
        }
        .wk-share-render .wk-share-match {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.15rem; color: #3d2914;
            margin-top: 6px; font-weight: 400; letter-spacing: 1.5px;
            text-transform: uppercase;
        }
        .wk-share-render .wk-share-meta {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: .85rem; color: #8b6914;
            margin-top: 4px;
        }
        .wk-share-render .wk-share-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
            margin: 16px 0;
        }
        .wk-share-render .wk-share-cell {
            aspect-ratio: 1/1;
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 50%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            border-radius: 4px;
            display: flex; align-items: center; justify-content: center;
            padding: 4px; text-align: center;
            font-family: 'Bebas Neue', 'Anton', sans-serif;
            font-size: .68rem; font-weight: 400;
            letter-spacing: .3px;
            text-transform: uppercase;
            color: #3d2914; line-height: 1.15;
            word-break: break-word;
            box-shadow: 0 1px 3px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .wk-share-render .wk-share-cell.checked {
            background:
                linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%),
                radial-gradient(circle at 30% 30%, #fbbf24 0%, #d4af37 60%, #8b6914 100%);
            border-color: #c8102e;
            color: #fef9e7;
            text-shadow: 0 1px 0 #3d2914;
            box-shadow: 0 2px 6px rgba(212,175,55,.55);
        }
        .wk-share-render .wk-share-footer {
            display: flex; justify-content: space-between; align-items: center;
            margin-top: 16px; font-size: .85rem;
            color: #8b6914;
            border-top: 2px dashed rgba(139,105,20,.5);
            padding-top: 12px;
        }
        .wk-share-render .wk-share-player {
            font-family: 'Anton', 'Bebas Neue', sans-serif;
            font-weight: 400; letter-spacing: 1px;
            font-size: 1rem;
            text-transform: uppercase;
            color: #c8102e;
        }
        .wk-share-render .wk-share-brand {
            font-family: 'Anton', sans-serif;
            font-weight: 400; letter-spacing: 1.5px;
            font-size: 1rem;
            text-transform: uppercase;
            background: linear-gradient(180deg, #d4af37 0%, #fbbf24 45%, #d4af37 55%, #8b6914 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 1px 0 rgba(61,41,20,.4));
        }

        .theme-mini-card {
            border-radius: 8px; overflow: hidden; cursor: pointer;
            border: 2px solid transparent; transition: border-color .15s, transform .1s;
            position: relative;
        }
        .theme-mini-card:hover { transform: scale(1.03); }
        .theme-mini-card.selected { border-color: var(--brand-primary); }
        .theme-mini-card-header { padding: 5px 6px 3px; }
        .theme-mini-card-title  { font-size: .55rem; font-weight: 800; line-height: 1.2; }
        .theme-mini-card-sub    { font-size: .42rem; opacity: .8; }
        .theme-mini-card-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; padding: 0 4px; }
        .theme-mini-card-cell   { border-radius: 2px; aspect-ratio: 1/1; }
        .theme-mini-card-footer { padding: 3px 6px; font-size: .45rem; font-weight: 700; }
        .theme-mini-card-name   { font-size: .68rem; font-weight: 700; padding: 4px 6px 5px; text-align: center; }

        /* ── DESKTOP SCALING (≥ 768px) ── */
        @media (min-width: 768px) {
            body {
                padding: 40px 20px;
            }
            header {
                max-width: 680px;
                margin-bottom: 28px;
            }
            .tagline { font-size: 1rem; }
            .logo-icon { width: 52px; height: 52px; border-radius: 15px; }
            .logo-icon svg { width: 30px; height: 30px; }
            .logo-sq { width: 17px; height: 17px; border-radius: 4px; }
            .container {
                max-width: 680px;
                padding: 32px;
                border-radius: 36px;
                max-height: 88vh;
            }
            /* wc-mode heeft geen header → container mag bijna tot aan de
               footer doorlopen zodat alle content (hero + intro + tegels)
               binnen viewport past zonder interne scrollbar */
            body.wc-mode .container { max-height: calc(100dvh - 100px); }
            h2 { font-size: 1.5rem; margin-bottom: 20px; }
            .screen-header { margin-bottom: 24px; }
            .screen-header h2 { font-size: 1.35rem; }
            label { font-size: .95rem; margin-bottom: 10px; }
            select, input, textarea {
                padding: 16px 18px;
                font-size: 1.05rem;
                border-radius: 16px;
                margin-bottom: 24px;
            }
            button { padding: 18px; font-size: 1.05rem; border-radius: 16px; }
            .btn-back { padding: 9px 18px; font-size: .88rem; }
            .menu-grid { gap: 14px; }
            .menu-tile { padding: 26px 14px 20px; border-radius: 22px; gap: 8px; }
            .tile-icon  { font-size: 2.5rem; }
            .tile-title { font-size: 1rem; }
            .tile-desc  { font-size: .75rem; }
            .bingo-cell { font-size: 1rem; padding: 8px; }
            .bingo-grid { gap: 10px; }
            .game-header { margin-bottom: 20px; }
            .gen-options-row { gap: 18px; margin-bottom: 18px; }
            .gen-label-sm { font-size: .78rem; }
            .gen-tog-btn { padding: 9px 16px; font-size: .9rem; }
            .gen-card-cell { font-size: .82rem; padding: 5px 3px; }
            .mycard-item { padding: 16px 18px; }
        }

        /* Vooraf-gekozen wedstrijd-info in create-modal (vervangt dropdown) */
        .wk-create-match-info {
            background: linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 2px solid #d4af37;
            border-radius: 6px;
            padding: 10px 12px;
            margin-bottom: 12px;
            color: #3d2914;
            font-size: .9rem;
            box-shadow: inset 0 0 0 1px rgba(254,249,231,.6);
        }
        .wk-create-match-info .wk-create-match-label {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1.2px;
            font-size: .78rem;
            color: #c8102e;
            margin-right: 4px;
            text-transform: uppercase;
        }
        .wk-create-match-info .wk-create-match-datum {
            display: inline-block;
            margin-left: 8px;
            font-size: .78rem;
            color: #5d4427;
        }

        /* ── WC-MODE (worldcupbingo2026.nl) ── */
        /* Hero-banner + intro zijn standaard verborgen; alleen in wc-mode tonen */
        .wc-banner-hero { display: none; }
        .wc-intro { display: none; }

        body.wc-mode > header { display: none; }

        /* Op screen-home: alleen WK + BorrelBingo tonen */
        body.wc-mode #screen-home .menu-tile:not(.wc-tile) { display: none; }

        /* Hero-banner op homepage in wc-mode: hergebruikt wk-banner stijl,
           maar zonder topbar dus minder padding-top nodig */
        body.wc-mode .wc-banner-hero {
            display: flex;
        }
        body.wc-mode .wc-banner-hero .wk-banner-content {
            padding: 36px 28px 28px;
        }

        /* Intro-blok in wc-mode: Panini-stijl (hergebruikt wk-intro look) */
        body.wc-mode .wc-intro {
            display: block;
            background:
                linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%),
                linear-gradient(180deg, #fef9e7 0%, #f3e9d2 100%);
            border: 3px solid;
            border-image: linear-gradient(135deg, #d4af37 0%, #fbbf24 50%, #8b6914 100%) 1;
            border-radius: 8px;
            padding: 12px 18px 12px;
            margin-bottom: 12px;
            color: #3d2914;
            box-shadow: 0 4px 12px rgba(61,41,20,.3), inset 0 0 0 1px rgba(254,249,231,.6);
            transform: rotate(-0.4deg);
            position: relative;
        }
        body.wc-mode .wc-intro-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.3rem;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #c8102e;
            line-height: 1.05;
            margin-bottom: 4px;
        }
        body.wc-mode .wc-intro-lead {
            font-size: .85rem;
            color: #3d2914;
            line-height: 1.35;
            margin: 2px 0 8px;
        }
        body.wc-mode .wc-intro-list {
            list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: 5px;
        }
        body.wc-mode .wc-intro-list li {
            font-size: .82rem; color: #3d2914;
            display: flex; gap: 8px; align-items: flex-start; line-height: 1.35;
        }
        body.wc-mode .wc-intro-list li::before {
            content: '⚽'; font-size: .85rem; flex-shrink: 0; margin-top: 1px;
            filter: drop-shadow(0 1px 1px rgba(61,41,20,.4));
        }

        /* Compactere hero in wc-mode op desktop: WK Bingo en BorrelBingo
           tegels blijven daardoor zonder scrollen in beeld. */
        @media (min-width: 768px) {
            body.wc-mode .wc-banner-hero { min-height: 180px; }
            body.wc-mode .wc-banner-hero .wk-banner-content {
                padding: 26px 36px 22px;
            }
            body.wc-mode .wc-banner-hero .wk-banner-title {
                font-size: 3rem; letter-spacing: 3px;
            }
        }

        /* ── FAQ (subtiel, Panini-stijl) ──────────────────────────────────────
           Server-side gevuld door functions/_middleware.js op WK-domeinen.
           Default ingeklapt; opent als een klein Panini-kaartje dat past bij
           de "ZO WERKT HET"-stijl erboven, maar gedempter (lichtere rand,
           minder schaduw, geen rotatie). */
        .wc-faq { display: none; }

        body.wc-mode .wc-faq {
            display: block;
            margin: 16px auto 12px;
            max-width: 480px;
            background:
                linear-gradient(135deg, rgba(255,255,255,.45) 0%, transparent 50%),
                linear-gradient(180deg, rgba(254,249,231,.92) 0%, rgba(243,233,210,.85) 100%);
            border: 2px solid;
            border-image: linear-gradient(135deg,
                rgba(212,175,55,.55) 0%,
                rgba(251,191,36,.55) 50%,
                rgba(139,105,20,.55) 100%) 1;
            border-radius: 6px;
            color: #3d2914;
            box-shadow: 0 2px 8px rgba(61,41,20,.15);
            overflow: hidden;
        }

        body.wc-mode .wc-faq > summary {
            /* display:block schakelt list-item-rendering uit; daarmee verdwijnt
               de standaard ▼/▶ marker in zowel oude als nieuwe browsers. */
            display: block;
            cursor: pointer;
            user-select: none;
            padding: 10px 16px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: .95rem;
            font-weight: 400;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: #c8102e;
            line-height: 1;
        }
        /* Belt-and-braces voor oude Chrome/Safari */
        body.wc-mode .wc-faq > summary::-webkit-details-marker { display: none; }

        body.wc-mode .wc-faq > summary::before {
            content: '›';
            display: inline-block;
            width: 14px;
            margin-right: 8px;
            font-family: system-ui, -apple-system, sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            line-height: .8;
            vertical-align: -2px;
            color: #c8102e;
            transition: transform .2s ease;
        }
        body.wc-mode .wc-faq[open] > summary::before {
            transform: rotate(90deg);
        }

        body.wc-mode .wc-faq dl {
            margin: 0;
            padding: 4px 16px 14px;
            border-top: 1px solid rgba(212,175,55,.35);
        }
        /* De middleware injecteert beide talen (NL + EN). Toon het <dl> dat
           matcht met de actieve UI-taal — die staat op <html lang> en wordt
           door js/i18n/i18n.js bij de NL/EN-toggle bijgewerkt. */
        body.wc-mode .wc-faq dl[data-faq-lang]                                { display: none; }
        html[lang="nl"] body.wc-mode .wc-faq dl[data-faq-lang="nl"],
        html[lang="en"] body.wc-mode .wc-faq dl[data-faq-lang="en"]           { display: block; }
        body.wc-mode .wc-faq dt {
            margin: 14px 0 0 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
            font-size: .82rem;
            font-weight: 700;
            color: #3d2914;
            line-height: 1.4;
        }
        body.wc-mode .wc-faq dt:first-of-type { margin-top: 10px; }
        body.wc-mode .wc-faq dd {
            /* Vier waarden expliciet zodat user-agent margin-left: 40px wordt
               overruled; anders krijgen de antwoorden een lelijke inspring. */
            margin: 4px 0 0 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
            font-size: .78rem;
            color: #5d4029;
            line-height: 1.5;
        }

        /* ── Taalswitcher (vast rechtsboven, ook in wc-mode zichtbaar) ─────────
           Right schuift mee met de 500px-content op brede schermen, zodat hij
           op desktop niet eenzaam in de hoek hangt. Op mobiel valt-ie netjes
           op 14px van de rand. */
        .lang-switch {
            position: fixed;
            top: 14px;
            right: max(14px, calc(50vw - 250px));
            display: inline-flex;
            align-items: stretch;
            gap: 2px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 999px;
            padding: 2px;
            backdrop-filter: blur(6px);
            z-index: 100;
        }
        .lang-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: inherit;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .02em;
            color: var(--text-muted);
            background: transparent;
            border: 0;
            padding: 4px 11px;
            border-radius: 999px;
            line-height: 1;
            cursor: pointer;
            transition: background .15s, color .15s;
        }
        .lang-btn[aria-pressed="true"] {
            background: var(--brand-gradient);
            color: #fff;
            box-shadow: 0 1px 4px rgba(200,16,46,.25);
        }
        .lang-btn:hover:not([aria-pressed="true"]) {
            color: var(--text-main);
            background: rgba(212,175,55,.12);
        }
        @media (max-width: 480px) {
            .lang-switch { top: 10px; right: 10px; }
            .lang-btn    { font-size: 11px; padding: 3px 8px; }
        }