body { font-family: 'Inter', sans-serif; overscroll-behavior-y: contain; }
        input { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
        
/* Forceert álle donkere tooltips naar centreren (zowel div als span); evt. aan te passen naar left */
[class*="bg-slate-800"] {
    text-align: center !important;
}

.bg-chess {
    background-color: #f8fafc;
    background-image:  linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0), 
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%, #e2e8f0);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* Subtiele pulse animatie voor de bonus-badge */
@keyframes bonusPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.animate-bonus { animation: bonusPulse 2s infinite; }

/* Kleur-flash effect bij herberekening */
@keyframes flashGreen {
    0% { background-color: rgba(34, 197, 94, 0.9); }
    50% { background-color: rgba(74, 222, 128, 0.9); }
    100% { background-color: rgba(34, 197, 94, 0.9); }
}
.bonus-refresh { animation: flashGreen 0.6s ease-out; }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-in { animation: slideIn 0.2s ease-out; }

        @keyframes fadeOut {
            0% { opacity: 1; transform: translateY(0); }
            90% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-20px); }
        }
        .toast { animation: fadeOut 2s forwards; }
        
        .hidden-element { display: none !important; }
        
        select.k-select-row {
            text-align: center;
            text-align-last: center;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.1rem center;
            background-size: 1em;
            padding-right: 1rem;
        }

.lang-btn { 
    opacity: 0.8; /* Duidelijk zichtbaar, maar herkenbaar als 'niet-actief' */
    cursor: pointer; 
    transition: all 0.2s ease; 
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-btn.active { 
    opacity: 1; /* Volledige helderheid */
    font-weight: 600; 
}

.lang-btn.active .btn-text { 
    text-decoration: underline; 
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* De knop wordt weer even fel als je eroverheen hovert */
.lang-btn:hover {
    opacity: 1;
}

/* Taalwisselaar: bij 9 talen past dit niet altijd op één regel. In plaats van te wrappen (wat op
   smalle/liggende schermen de banner eronder overlapt, want de wisselaar is absolute positioned)
   laten we 'm horizontaal scrollen op één regel, altijd, ongeacht schermgrootte of aantal talen. */
.lang-switcher {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* oude Edge/IE */
}
.lang-switcher::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Op zeer smalle schermen (waar zelfs zonder scheidingstekens niet alle vlaggen passen) blijft
   scrollen nodig. app.js zet deze class alleen dan, en de rand vervaagt zachtjes zodat duidelijk is
   dat er nog vlaggen buiten beeld staan — zonder een apart pijltje/icoontje toe te voegen. */
.lang-switcher.has-overflow {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}

/* "Delen"-knoppen hebben een vaste breedte (w-48) en de tekst staat op nowrap; in het Oekraïens en
   Portugees is de vertaling net iets te lang om daarbinnen te passen. Kleiner lettertype, zelfde
   knopgrootte/layout. */
html:lang(uk) [data-i18n="share"],
html:lang(uk) [data-i18n="shareResult"],
html:lang(pt) [data-i18n="share"],
html:lang(pt) [data-i18n="shareResult"] {
    font-size: 0.68rem !important;
}

        .k-input-wrapper-knsb.disabled { background-color: #f3f4f6; border-color: #e5e7eb; }
        .k-input-row:disabled { background-color: transparent; color: #9ca3af; }
        button:disabled { color: #d1d5db; cursor: not-allowed; }

        .youth-tooltip { visibility: hidden; opacity: 0; transition: opacity 0.2s; }
        @media (hover: hover) { .group:hover .youth-tooltip { visibility: visible; opacity: 1; } }
        .group:focus-within .youth-tooltip { visibility: visible; opacity: 1; }

        /* Compacte ronde badges */
        .input-badge-btn {
            border: 2px solid #cbd5e1;
            border-radius: 9999px; 
            width: 36px; 
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 800;
            background: #ffffff;
            transition: all 0.2s;
            color: #475569;
            flex-shrink: 0;
        }
        .peer:checked + .input-badge-btn {
            background: #fff7ed;
            border-color: #f97316;
            color: #ea580c;
            box-shadow: 0 2px 4px rgba(249, 115, 22, 0.2);
        }
        
        /* Ronde stijl voor badges in tooltips */
        .badge-inline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid currentColor;
            border-radius: 9999px;
            width: 26px;
            height: 26px;
            font-size: 0.85em;
            font-weight: 800;
            margin: 0 2px;
            background-color: rgba(255,255,255,0.1);
            vertical-align: middle;
            line-height: 1;
        }