@charset "UTF-8";

/* ==========================================================================
   1. SETTINGS (Variabelen & Thema)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@700;800&display=swap');

:root {
    /* Base RGB Waarden (Voor flexibel gebruik met RGBA transparantie) */
    --bg-rgb: 18, 18, 18;             /* #121212 */
    --bg-dark-rgb: 9, 9, 9;           /* #090909 - Diep zwart voor extreme achtergronden/bounce */
    --surface-rgb: 30, 30, 30;        /* #1e1e1e */
    --surface-alt-rgb: 42, 42, 42;    /* #2a2a2a - Voor input velden en kaarten */
    --primary-rgb: 42, 189, 95;       /* #2abd5f - Spotify-ish Green */
    --accent-rgb: 99, 20, 255;        /* #6314ff - Neon Purple voor acties/BINGO */
    --error-rgb: 252, 65, 48;         /* #fc4130 - Rood voor fouten/verwijderen */
    --warning-rgb: 243, 156, 18;      /* #f39c12 - Oranje voor waarschuwingen/hervatten */
    --info-rgb: 52, 152, 219;         /* #3498db - Blauw voor bewerken/info */
    
    --text-main-rgb: 244, 244, 244;   /* #f4f4f4 - Hoofdtekst */
    --text-muted-rgb: 179, 179, 179;  /* #b3b3b3 - Subtekst */
    --border-rgb: 51, 51, 51;         /* #333333 - Standaard randen */
    
    --black-rgb: 0, 0, 0;             /* Zwart voor schaduwen en contrast text */
    --white-rgb: 244, 244, 244;       /* Wit voor knoppen en actieve text */
    
    /* Direct Bruikbare Kleuren */
    --bg-color: rgb(var(--bg-rgb));
    --bg-dark-color: rgb(var(--bg-dark-rgb));
    --surface-color: rgb(var(--surface-rgb));
    --surface-alt: rgb(var(--surface-alt-rgb));
    --primary-color: rgb(var(--primary-rgb));
    --accent-color: rgb(var(--accent-rgb));
    --error-color: rgb(var(--error-rgb));
    --warning-color: rgb(var(--warning-rgb));
    --info-color: rgb(var(--info-rgb));
    
    --text-main: rgb(var(--text-main-rgb));
    --text-muted: rgb(var(--text-muted-rgb));
    --border-color: rgb(var(--border-rgb));
    --black: rgb(var(--black-rgb));
    --white: rgb(var(--white-rgb));
    
    /* Vormgeving & Systeem Variabelen */
    --border-radius: 3.2rem; /* 0.4rem; 12px; */
    --control-height: 38px; /* Perfecte touch-target hoogte voor instellingen */
    --transition: 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
    --slow-down: 1; /* Wordt uitgelezen door JavaScript voor gesynchroniseerde animaties */
    --nav-scale: 1; /* Globale schalingsfactor voor navigatie en zwevende UI-elementen */
    --glass-edge: inset 0.5px 0.5px 0 rgba(var(--white-rgb), 0.12), inset -0.5px -0.5px 0 rgba(var(--white-rgb), 0.06);
    --glass-edge-large: var(--glass-edge), inset 1px 1px 2px rgba(var(--white-rgb), 0.24), inset -1px -1px 2px rgba(var(--white-rgb), 0.12);


    /* Z-index hiërarchie: van -1 (achtergrond) via vaste UI-lagen (100, 200) naar modale overlays (9999) en schermvergrendeling (100000) */
    --z-background: -1;
    --z-base: 1;
    --z-above-base: 2;
    --z-elevated: 10;
    --z-fixed: 100;
    --z-sticky: 200;
    --z-modal: 9999;
    --z-lock: 100000;
}

@media (max-width: 1023px) { :root { --nav-scale: 0.8; } }
@media (max-width: 767px)  { :root { --nav-scale: 0.7; } }

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    touch-action: manipulation;
}

html { font-size: 62.5%; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    padding: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.6rem;
    -webkit-user-select: none;
    user-select: none;
}

/* Padding en scroll-offset zijn uitsluitend actief wanneer de zwevende paginering zichtbaar is. */
body.has-pagination { scroll-padding-bottom: calc(96px * var(--nav-scale)); }
body.has-pagination #tab-content { padding-bottom: calc(96px * var(--nav-scale)); }

input, textarea { -webkit-user-select: auto; user-select: auto; }
img { -webkit-user-drag: none; }
:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* Typografie Basis */
h1, h2, h3, h4, h5, h6 { 
    color: var(--text-main); 
    text-align: center; 
    text-transform: uppercase; 
    margin-top: 0; 
    font-weight: 700;
}
h1, h2 { font-family: 'Montserrat', system-ui, sans-serif; letter-spacing: 1px; }
h1 { font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 2rem); }

a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--border-color); margin: 20px 0; }


/* ==========================================================================
   3. BLOCKS (Layout & Componenten)
   ========================================================================== */

/* --- Layout Blocks (Objects) --- */
.o-container { width: 100%; max-width: 800px; margin: 0 auto; }
.o-container--wide { max-width: 1200px; }
.o-layout { display: flex; gap: 20px; flex-wrap: wrap; }
.o-layout__col { flex: 1; min-width: 300px; }
.o-flex { display: flex; align-items: center; }
.o-flex-between { display: flex; justify-content: space-between; align-items: center; }
.o-flex-center { display: flex; justify-content: center; align-items: center; width: 100%; }

/* Specifieke Grid Modifier voor de Leaderboards (3 blokken) - Mobiel: 1 kolom (alles onder elkaar) */
.o-grid--leaderboards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* Tablet: 2 kolommen. Eerste item pakt de volle breedte! */
@media (min-width: 768px) and (max-width: 1023px) {
    .o-grid--leaderboards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .o-grid--leaderboards > :first-child { grid-column: 1 / -1; /* Span over alle beschikbare kolommen */ }
}
/* Desktop: 3 kolommen strak naast elkaar */
@media (min-width: 1024px) {
    .o-grid--leaderboards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* --- Containers & Cards --- */
.c-card {
    background: var(--surface-color); 
    padding: 25px; 
    margin-bottom: 20px;
    border-radius: calc(0.4 * var(--border-radius));
    box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.4);
}
.c-card--active { border-top: 4px solid var(--primary-color); }
.c-card--highlight { border: 1px solid var(--primary-color); text-align: center; }

.c-divider { width: 100%; height: 1px; background: rgba(var(--white-rgb), 0.1); margin: 15px 0; }
.c-divider--vertical { width: 1px; min-height: 20px; background: rgba(var(--white-rgb), 0.1); margin: 0 4px; }
.c-badge .c-divider--vertical { min-height: auto; height: 1.2em; background: rgba(var(--white-rgb), 0.4); margin: 0 4px; }

.c-date-divider, .c-section-header { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin: 30px 0 15px 0; 
}
.c-date-divider__text, .c-section-header__text {
    font-family: 'Montserrat', system-ui, sans-serif; 
    font-size: 1.3rem; 
    font-weight: 700;
    text-transform: uppercase; 
    letter-spacing: 1px;
}

/* --- Formulieren & Inputs --- */
.c-form-field { position: relative; width: 100%; font-size: 1.4rem; }
.c-form-field__control { position: relative; width: 100%; }
.c-form-field__input {
    width: 100%; 
    padding: 22px 15px 8px 15px; 
    margin: 8px 0;
    border-radius: calc(0.4 * var(--border-radius)); 
    border: 2px solid var(--border-color);
    /* 1.6rem is 16px, en dat is een harde ondergrens — geen smaakkwestie. iOS Safari zoomt de
       hele pagina in zodra je een tekstveld met kleinere letters focust, en dat is met CSS
       niet uit te zetten. Hier stond `inherit`, wat via .c-form-field op 1.4rem uitkwam.
       Terugzetten naar inherit brengt de zoom terug (gemeld na de live-avond van 12 aug 2026).

       Het zwevende label verandert hier niet van maat mee: dat is een broer van dit veld
       binnen .c-form-field__control en erft zijn 1.4rem rechtstreeks van .c-form-field. */
    font-size: 1.6rem;
    background: var(--surface-alt);
    color: var(--text-main);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.c-form-field__input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.4); }

.c-form-field__label {
    position: absolute; top: 50%; left: 17px; font-size: 1em; color: var(--text-muted);
    pointer-events: none; transform: translateY(-50%) scale(1); transform-origin: left top; transition: 0.2s ease all;
}
.c-form-field__input:focus ~ .c-form-field__label,
.c-form-field__input:not(:placeholder-shown) ~ .c-form-field__label {
    top: 17px; transform: translateY(0) scale(0.7);
}
.c-form-field__input:focus ~ .c-form-field__label { color: var(--primary-color); }
/* :user-invalid en niet :invalid — zie de uitleg bij .c-input--validate hieronder. */
.c-form-field__input.c-input--validate:user-invalid ~ .c-form-field__label,
.c-form-field__input.is-invalid ~ .c-form-field__label { color: var(--error-color); }
.c-form-field__input.c-input--validate:user-valid ~ .c-form-field__label { color: var(--primary-color); }

.c-form-field__error {
    display: block; font-size: 1rem; color: var(--error-color); font-weight: 600; text-align: left;
    padding-left: 17px; max-height: 40px; opacity: 1; transform: translateY(0); margin-bottom: 6px;
    overflow: hidden; transition: max-height 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, margin-bottom 0.2s ease-out;
}
.c-form-field__error.u-hidden { display: block !important; max-height: 0; opacity: 0; transform: translateY(-4px); margin-bottom: 0; }

.c-input {
    width: 100%; padding: 14px 15px; margin: 8px 0; border-radius: var(--border-radius);
    border: 2px solid var(--border-color); font-size: 1.6rem; background: var(--surface-alt);
    color: var(--text-main); transition: box-shadow var(--transition), border-color var(--transition);
}
.c-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.4); }
.c-input--validate { padding-right: 40px; background-position: center right 14px; background-repeat: no-repeat; background-size: 24px 24px; }
/* :user-invalid en :user-valid, niet :invalid en :valid.
   Hier stond `:not(:placeholder-shown):invalid`, en dat kleurde het veld rood zodra je één letter
   had getypt: het invoerveld draagt `placeholder=" "` voor het zwevende label, dus
   :not(:placeholder-shown) is al waar bij één teken — terwijl minlength="2" dan nog niet gehaald
   is. Je werd dus afgekeurd tijdens het intypen van je eigen naam.
   :user-invalid slaat pas aan nadat de gebruiker het veld heeft verlaten of heeft geprobeerd te
   verzenden. Daarmee vervalt ook :not(:placeholder-shown), die er alleen stond om een leeg veld
   niet te kleuren — iets wat :user-invalid zelf al beter doet.
   Ondersteunt een browser :user-invalid niet, dan kleurt er niets. Dat is de goede kant om fout
   te vallen: geen vals rood. De .is-invalid hieronder wordt bij het verzenden door JavaScript
   gezet en markeert de fout dan alsnog. */
.c-input--validate:user-invalid { border-color: var(--error-color); background-image: url('../img/error-32.svg'); }
.c-input--validate:user-valid { border-color: var(--primary-color); background-image: url('../img/valid-32.svg'); }
/* Bij het verzenden gezet, en het enige dat een leeg verplicht veld markeert: een leeg veld
   haalt :user-invalid niet altijd, en het formulier draagt novalidate. */
.c-input--validate.is-invalid { background-image: url('../img/error-32.svg'); }
.c-input--compact { padding: 8px 12px; }
.c-input--number-clean { appearance: textfield; -moz-appearance: textfield; width: 80px; text-align: center; }
.c-input--number-clean::-webkit-outer-spin-button, .c-input--number-clean::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Knoppen --- */
.c-btn {
    width: 100%; padding: 14px 15px; margin: 8px 0; border-radius: var(--border-radius);
    border: none; font-size: 1.6rem; font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
    transition: var(--transition); display: inline-flex; align-items: center; justify-content: center;
}
.c-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.4); }
.c-btn:disabled, .is-loading { opacity: 0.7; cursor: not-allowed; transform: none; }

.c-btn--primary { background: var(--primary-color); color: var(--white); }
.c-btn--accent { background: var(--accent-color); color: var(--white); }
.c-btn--danger { background: var(--error-color); color: var(--white); }
.c-btn--warning { background: var(--warning-color); color: var(--white); }
.c-btn--success { background: var(--primary-color); color: var(--white); }
.c-btn--info { background: var(--info-color); color: var(--white); }
.c-btn--secondary { background: var(--border-color); color: var(--text-main); }
.c-btn--ghost { background: none; color: var(--text-muted); letter-spacing: normal; width: auto; padding: 0; }
.c-btn--ghost:hover:not(:disabled) { color: var(--white); box-shadow: none; transform: none; }
.c-btn--small { width: auto; padding: 10px 20px; font-size: 1.4rem; }
.c-btn--tiny { width: auto; padding: 8px 12px; margin: 0 2px; font-size: 1rem; }
.c-btn--play-next { height: 72px; font-size: 2.4rem; flex-direction: column; }

.c-btn__subtitle { display: block; margin-bottom: 5px; opacity: 0.8; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; letter-spacing: normal; }

.c-btn--large-action { padding: 0; margin: 0; width: 44px; height: 44px; border-radius: 8px; transition: transform 0.2s ease, background-color 0.2s ease; }
.c-btn--large-action:hover { transform: scale(1.05); }
.c-btn--large-action .c-btn__icon { width: 24px; height: 24px; fill: currentColor; }

/* --- Confirm Action Pill --- */
.c-confirm-action {
    display: inline-flex; align-items: stretch; background: var(--white); border-radius: 40px; padding: 2px;
    border: none; cursor: pointer; font-family: 'Montserrat', system-ui, sans-serif;
    transition: background-color calc(0.4s * var(--slow-down, 1)) ease; box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.8); user-select: none; max-width: 100%;
}
.c-confirm-action__title {
    display: flex; align-items: center; background: var(--surface-color); color: var(--white);
    border-radius: 40px; padding: 6px 18px; font-size: 1.4rem; line-height: 1; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; max-width: 400px; opacity: 1; text-overflow: ellipsis;
    transition: max-width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.5, 0, 0.2, 1), padding calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.5, 0, 0.2, 1), opacity calc(0.4s * var(--slow-down, 1)) ease;
}
.c-confirm-action__badge { color: var(--surface-color); padding: 0 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color calc(0.4s * var(--slow-down, 1)) ease; }
.c-confirm-action__icon { width: 20px; height: 20px; fill: var(--surface-color); transform: rotate(0deg); transition: transform calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.5, 0, 0.2, 1); }
.c-confirm-action__confirm-text {
    display: flex; align-items: center; background: var(--surface-color); color: var(--error-color);
    border-radius: 40px; font-size: 1.4rem; line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden;
    max-width: 0; padding: 6px 0; opacity: 0; text-overflow: ellipsis;
    transition: max-width calc(0.15s * var(--slow-down, 1)) ease-out, padding calc(0.15s * var(--slow-down, 1)) ease-out, opacity calc(0.1s * var(--slow-down, 1)) ease-out;
}

.c-confirm-action.is-confirming { background-color: var(--error-color); }
.c-confirm-action.is-confirming .c-confirm-action__icon { transform: rotate(-90deg); }
.c-confirm-action.is-confirming .c-confirm-action__title {
    max-width: 0; padding-left: 0; padding-right: 0; opacity: 0;
    transition: max-width calc(0.15s * var(--slow-down, 1)) ease-out, padding calc(0.15s * var(--slow-down, 1)) ease-out, opacity calc(0.1s * var(--slow-down, 1)) ease-out;
}
.c-confirm-action.is-confirming .c-confirm-action__badge { color: var(--white); }
.c-confirm-action.is-confirming .c-confirm-action__confirm-text {
    max-width: 400px; padding: 6px 18px; opacity: 1;
    transition: max-width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.5, 0, 0.2, 1), padding calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.5, 0, 0.2, 1), opacity calc(0.4s * var(--slow-down, 1)) ease;
}

.c-confirm-action--small { padding: 1px; }
.c-confirm-action--small .c-confirm-action__title { font-size: 1rem; padding: 4px 12px; }
.c-confirm-action--small .c-confirm-action__icon { width: 16px; height: 16px; }
.c-confirm-action--small .c-confirm-action__confirm-text { font-size: 1rem; }
.c-confirm-action--small.is-confirming .c-confirm-action__confirm-text { padding-left: 12px; padding-right: 12px; }

/* --- Alerts & Feedback --- */
.c-alert { padding: 15px; border-radius: calc(0.4 * var(--border-radius)); margin-bottom: 20px; text-align: center; font-weight: 700; width: 100%; }
.c-alert--success { background: rgba(var(--primary-rgb), 0.4); color: var(--primary-color); }
.c-alert--error { background: rgba(var(--error-rgb), 0.4); color: var(--error-color); }
.c-alert--accent { background: rgba(var(--accent-rgb), 0.8); color: var(--white); }

.c-time-pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(var(--text-main-rgb), 0.2); color: var(--text-main); padding: 4px 10px; border-radius: 12px; font-size: 1.2rem; font-weight: 700; }
.c-error-block { margin-top: 20px; padding: 15px; border-radius: 4px; background: rgba(var(--error-rgb), 0.1); border-left: 4px solid var(--error-color); text-align: left; font-size: 1.6rem; font-weight: 400; }
.c-error-block__list { margin: 10px 0 0 0; padding-left: 20px; }
.c-error-block__item { margin-bottom: 6px; }

/* --- Pause Banner --- */
.c-pause-banner {
    display: none; padding: 15px; border-radius: calc(0.4 * var(--border-radius)); margin-bottom: 20px; text-align: center; font-weight: 700; width: 100%;
    background-color: rgba(var(--accent-rgb), 0.8); color: var(--white); font-family: 'Montserrat', system-ui, sans-serif;
    text-transform: uppercase; letter-spacing: 2px; font-size: 1.4rem; z-index: var(--z-elevated); box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.3);
}
.c-pause-banner.is-visible { display: block; }

/* --- Pause Overlay --- */

/* Wrapper: Neemt het hele scherm over en centreert de inhoud */
.c-pause-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;     /* Verticaal centreren */
    justify-content: center; /* Horizontaal centreren */
    pointer-events: none;
}

/* Achtergrond: De volledige backdrop via ::before */
.c-pause-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(var(--black-rgb), 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -var(--z-background);
    
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Panel: Het gecentreerde vlak */
.c-pause-overlay__panel {
    /* 80vmin is 80% van de kleinste schermzijde. Aspect 3/2 dwingt een mooie rechthoek af. */
    width: 80vmin;
    aspect-ratio: 3 / 2; 
    
    /* Max-afmetingen zodat hij op enorme desktop schermen niet gigantisch wordt */
    max-width: 450px; 
    
    background-color: rgba(var(--accent-rgb), 0.8);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.4), var(--glass-edge-large);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 3vmin, 25px);

    /* Typografie (Direct overgenomen van je .c-pause-banner) */
    font-family: 'Montserrat', system-ui, sans-serif;
    text-transform: uppercase; 
    letter-spacing: 2px; 
    
    /* Animatie startpunt */
    opacity: 0;
    transform: scale(0.8) translateY(-40%);
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.c-pause-overlay__icon {
    /* Icoon flink groter gemaakt: start nu op 60px en groeit mee tot 100px */
    width: clamp(60px, 16vmin, 100px);
    height: clamp(60px, 16vmin, 100px);
    fill: var(--white);
    opacity: 0.92;
}

.c-pause-overlay__text {
    /* De clamp aangepast zodat hij altijd netjes in de 3/2 verhouding past */
    font-size: clamp(1.4rem, 4.5vmin, 2.2rem);
    font-weight: 700;
    color: var(--white);
    text-align: center;
    line-height: 1.2; /* Iets meer ademruimte mocht het op mobiel over 2 regels vallen */
}

/* --- ZICHTBARE STAAT --- */
.c-pause-overlay.is-visible {
    pointer-events: auto;
}

.c-pause-overlay.is-visible::before {
    opacity: 1;
}

.c-pause-overlay.is-visible .c-pause-overlay__panel {
    opacity: 1;
    transform: scale(1) translateY(0);
    /* Pop-animatie met lichte overshoot */
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* --- Toggles --- */
.c-toggle { cursor: pointer; display: inline-flex; align-items: center; margin: 0; }
.c-toggle__input { display: none; }
.c-toggle__switch {
    position: relative; width: 44px; height: 24px; background: rgba(var(--white-rgb), 0.2);
    border-radius: 12px; transition: background calc(0.3s * var(--slow-down, 1)) ease; flex-shrink: 0;
}
.c-toggle__switch::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--white);
    border-radius: 50%; transition: transform calc(0.3s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(var(--black-rgb), 0.3);
}
.c-toggle__input:checked + .c-toggle__switch { background: var(--primary-color); }
.c-toggle__input:checked + .c-toggle__switch::after { transform: translateX(20px); }
.c-toggle--danger .c-toggle__input:checked + .c-toggle__switch { background: var(--error-color); }
.c-toggle--warning .c-toggle__input:checked + .c-toggle__switch { background: var(--warning-color); }
.c-toggle.is-disabled { opacity: 0.4; cursor: not-allowed; }
/* De templates zetten is-disabled op de rij en niet op de schakelaar zelf — en daar stond tot
   1 sep 2026 niets tegenover, dus een uitgeschakelde instelling zag er gewoon beschikbaar uit.
   Dat gold ook voor de rij "eigen teksten", die deze klasse al veel langer gebruikt.
   De hele rij vergrijzen zegt meer dan alleen het schuifje: het label en de uitleg horen er
   net zo goed bij. pointer-events blokkeert de klik ook als het disabled-attribuut ontbreekt. */
.c-settings-row.is-disabled { opacity: 0.4; }
.c-settings-row.is-disabled .c-settings-row__control { pointer-events: none; }

/* --- Badges --- */
.c-badge { font-family: "Montserrat", system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.c-badge svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.c-badge--accent { background: rgba(var(--accent-rgb), 0.6); color: var(--white); }
.c-badge--primary { background: var(--primary-color); color: var(--white); }
.c-badge--ghost { background: rgba(var(--accent-rgb), 0.2); color: rgba(var(--accent-rgb), 0.9); }
/* Voor een toestand die de host moet opvallen zonder dat er iets stuk is — zoals een actieve
   overflow, waarbij spelers zonder e-mailverificatie binnenkomen. */
.c-badge--danger { background: var(--error-color); color: var(--white); }
@media (max-width: 767px) {
    .c-badge { font-size: 1.0rem; padding: 3px 10px; gap: 4px; }
    .c-badge svg { width: 12px; height: 12px; }
}

/* --- Settings Panels & Rows --- */
.c-settings-grid { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.c-settings-panel { display: flex; flex-direction: column; gap: 8px; }
.c-settings-panel__title { display: block; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 2px; padding-left: 4px; }

.c-settings-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; background: rgba(var(--surface-alt-rgb), 0.6); border: 1px solid rgba(var(--white-rgb), 0.05); border-radius: 12px; padding: 12px 16px; }
.c-settings-row-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 480px) { .c-settings-row-group { grid-template-columns: 1fr; } }

.c-settings-row__label { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.c-settings-row__title { font-size: 1.4rem; font-weight: 600; color: var(--text-main); }
.c-settings-row__desc { font-size: 1.1rem; color: var(--text-muted); line-height: 1.3; }
.c-settings-row__control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.c-input--settings {
    height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(var(--white-rgb), 0.1);
    background: rgba(var(--bg-dark-rgb), 0.4); color: var(--white); font-size: 1.4rem; font-weight: 700;
    text-align: center; width: 70px; transition: border-color var(--transition);
}
.c-input--settings:focus { outline: none; border-color: var(--primary-color); }
select.c-input--settings { width: auto; min-width: 70px; cursor: pointer; }

/* --- Fullscreen Overlays --- */
.c-fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: rgba(var(--bg-rgb), 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: var(--z-modal); display: flex; justify-content: center; align-items: center; padding: 20px; }
.c-fullscreen-box { position: relative; background: var(--surface-color); padding: 40px 30px; border-radius: var(--border-radius); text-align: center; max-width: 600px; width: 100%; box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.8); border-top: 8px solid transparent; }
.c-fullscreen-box--success { border-color: var(--primary-color); }
.c-fullscreen-box--danger { border-color: var(--error-color); }
.c-fullscreen-box__icon { font-size: 6rem; margin-bottom: 15px; }
.c-fullscreen-box__icon svg { width: 64px; height: 64px; display: block; margin: 0 auto; }
.c-fullscreen-box__text { font-size: 2.2rem; line-height: 1.5; font-weight: 700; }
.c-fullscreen-box .c-time-pill { font-size: 1.4rem; padding: 6px 14px; }

.c-fullscreen-badge {
    position: absolute; top: -30px; right: -20px; background-color: var(--error-color); color: var(--white);
    font-size: 3.2rem; font-weight: 700; width: 56px; height: 56px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(var(--black-rgb), 0.4);
    border: 3px solid var(--white); z-index: var(--z-above-base); opacity: 0; transform: scale(0);
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.c-fullscreen-badge.is-visible { opacity: 1; transform: scale(1); }
.c-fullscreen-badge.is-popping { animation: badgePop 0.4s ease-out; }
@keyframes badgePop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* --- Portrait Lock --- */
.c-portrait-lock { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: rgba(var(--bg-rgb), 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-main); z-index: var(--z-lock); justify-content: center; align-items: center; text-align: center; padding: 30px; }
.c-portrait-lock__title { color: var(--primary-color); margin-top: 0; }
.c-portrait-lock__text { font-size: 1.8rem; line-height: 1.5; color: var(--white); margin: 0; }
.c-portrait-lock__icon { font-size: 6rem; margin-bottom: 20px; color: var(--primary-color); animation: tiltPhone 2s infinite ease-in-out; }
@keyframes tiltPhone { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } }
@media screen and (max-width: 950px) and (orientation: landscape) {
    body.has-portrait-lock .c-portrait-lock { display: flex; flex-direction: column; }
    body.has-portrait-lock > *:not(.c-portrait-lock) { display: none !important; }
}

/* ==========================================================================
   4. MODULES: NAVIGATOR (Sticky & Morphing Pill)
   ========================================================================== */

.c-header {
    position: sticky; top: 0; z-index: var(--z-sticky); width: 100%; padding-top: calc(8px * var(--nav-scale));
}

.c-nav {
    position: relative; width: 100%; max-width: 1200px; margin: 0 auto;
    border-radius: calc(20px * var(--nav-scale)); background-color: rgba(var(--black-rgb), 0);
    backdrop-filter: saturate(220%) blur(16px); -webkit-backdrop-filter: saturate(220%) blur(16px);
    box-shadow: 0 8px 32px rgba(var(--black-rgb), 0);    
    transition: all calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.c-nav__inner { display: flex; align-items: center; height: calc(70px * var(--nav-scale)); padding: 0 calc(20px * var(--nav-scale)); }
.c-nav__brand { flex: 1; display: flex; justify-content: flex-start; text-decoration: none; text-transform: uppercase; font-weight: 800; font-size: calc(1.8rem * var(--nav-scale)); color: var(--white); padding: calc(8px * var(--nav-scale)); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c-nav__menu { display: flex; justify-content: center; gap: calc(6px * var(--nav-scale)); }
.c-nav__actions { flex: 1; display: flex; justify-content: flex-end; gap: calc(6px * var(--nav-scale)); min-width: 0; }

.c-nav__link, .c-nav__mobile-link { background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: 1.2rem; color: rgba(var(--white-rgb), 0.8); border-radius: calc(20px * var(--nav-scale)); transition: all calc(0.2s * var(--slow-down, 1)); }
/* Flexbox op de ouderknop voorkomt dat de badge de regelafstand en knophoogte beïnvloedt. */
.c-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: calc(8px * var(--nav-scale)) calc(12px * var(--nav-scale)); }
.c-nav__mobile-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; text-align: center; padding: calc(12px * var(--nav-scale)); margin-bottom: calc(4px * var(--nav-scale)); }
.c-nav__mobile-link:last-child { margin-bottom: 0; }
.c-nav__link.is-active, .c-nav__mobile-link.is-active { color: var(--white); background-color: var(--primary-color); }
.c-nav__link:hover:not(.is-active), .c-nav__mobile-link:hover:not(.is-active) { color: var(--primary-color); background-color: rgba(var(--primary-rgb), 0.4); }

.c-nav__trigger { background: none; border: none; color: var(--white); cursor: pointer; font-size: calc(1.2rem * var(--nav-scale)); padding: calc(5px * var(--nav-scale)); transition: transform calc(0.2s * var(--slow-down, 1)); }
.js-toggle-settings { transition: all calc(0.3s * var(--slow-down, 1)) ease; }
.c-nav__icon { width: 24px; height: 24px; display: block; color: currentColor; transition: color calc(0.2s * var(--slow-down, 1)); }
.c-nav__trigger:hover .c-nav__icon { color: currentColor; }
.c-nav__trigger--danger .c-nav__icon { color: var(--error-color); }
.c-nav__trigger--danger:hover .c-nav__icon { filter: brightness(1.2); }

/* badgePop wordt hergebruikt zodat alle badges in de interface dezelfde animatie-taal spreken. */
.c-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--white);
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.c-nav-badge:empty { display: none; }
.c-nav-badge.is-popping { animation: badgePop 0.4s ease-out; }

/* De Zwevende Pill / Morphing States */
.c-nav.is-scrolled:not(.is-menu-open):not(.is-settings-open) {
    width: calc(100% - (144px * var(--nav-scale))); max-width: calc(800px * var(--nav-scale));
    border-radius: calc(50px * var(--nav-scale)); background-color: rgba(var(--surface-rgb), 0.6); box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.4), var(--glass-edge);
    transition: background-color calc(0.4s * var(--slow-down, 1)) ease 0s, width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s, max-width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s, border-radius calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.c-nav.is-scrolled.is-closing:not(.is-menu-open):not(.is-settings-open) {
    box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.4), var(--glass-edge);
    transition: background-color calc(0.4s * var(--slow-down, 1)) ease 0s, width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.3s * var(--slow-down, 1)), max-width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.3s * var(--slow-down, 1)), border-radius calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.3s * var(--slow-down, 1));
}
.c-nav.is-closing:not(.is-scrolled):not(.is-menu-open):not(.is-settings-open) {
    transition: background-color calc(0.4s * var(--slow-down, 1)) ease 0s, width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.3s * var(--slow-down, 1)), max-width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.3s * var(--slow-down, 1));
}
.c-nav.is-menu-open, .c-nav.is-settings-open {
    width: calc(100% - 32px); max-width: calc(1200px - 32px); border-radius: calc(20px * var(--nav-scale)); background-color: rgba(var(--surface-rgb), 0.6); box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.4), var(--glass-edge);
    transition: background-color calc(0.4s * var(--slow-down, 1)) ease 0s, width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s, max-width calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s, border-radius calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

/* Dropdowns */
.c-nav__mobile-dropdown, .c-nav__settings-dropdown {
    display: flex; flex-direction: column; max-height: 0; opacity: 0; overflow: hidden; padding: 0 calc(20px * var(--nav-scale));
    transition: max-height calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s, padding-bottom calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s, padding-top calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) 0s, opacity calc(0.15s * var(--slow-down, 1)) ease 0s;
}
.c-nav.is-settings-open .c-nav__settings-dropdown, .c-nav.is-menu-open .c-nav__mobile-dropdown {
    max-height: min(800px, calc(100dvh - 64px)); overflow-y: auto; overscroll-behavior: contain; opacity: 1; padding-bottom: calc(20px * var(--nav-scale)); padding-top: calc(10px * var(--nav-scale));
    transition: max-height calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.15s * var(--slow-down, 1)), padding-bottom calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.15s * var(--slow-down, 1)), padding-top calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.15s * var(--slow-down, 1)), opacity calc(0.3s * var(--slow-down, 1)) ease calc(0.15s * var(--slow-down, 1));
}
.c-nav__settings-dropdown::-webkit-scrollbar, .c-nav__mobile-dropdown::-webkit-scrollbar { width: 6px; }
.c-nav__settings-dropdown::-webkit-scrollbar-thumb, .c-nav__mobile-dropdown::-webkit-scrollbar-thumb { background: rgba(var(--white-rgb), 0.2); border-radius: 3px; }

/* Hamburger Icoon */
.c-nav__hamburger { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 20px; height: 14px; margin: 5px 2px; }
.c-nav__hamburger-line { display: block; width: 100%; height: 2px; background-color: currentColor; transform-origin: center; transition: transform calc(0.4s * var(--slow-down, 1)) cubic-bezier(0.4, 0, 0.2, 1), opacity calc(0.3s * var(--slow-down, 1)) ease, background-color calc(0.2s * var(--slow-down, 1)) ease; }
.c-nav__trigger:hover .c-nav__hamburger-line { background-color: currentColor; }
.c-nav.is-menu-open .c-nav__hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); background-color: currentColor; }
.c-nav.is-menu-open .c-nav__hamburger-line:nth-child(2) { opacity: 0; }
.c-nav.is-menu-open .c-nav__hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background-color: currentColor; }

/* Settings Icoon */
.c-nav__settings-icon { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 20px; height: 14px; margin: 5px 2px; }
.c-nav__settings-line { display: block; width: 100%; height: 2px; background-color: rgba(var(--white-rgb), 0.6); position: relative; }
.c-nav__settings-line::before {
    content: ""; position: absolute; top: 50%; margin-top: -1.5px; width: 3px; height: 3px; border-radius: 0; background-color: currentColor; transition: transform calc(0.3s * var(--slow-down, 1)) ease;
}
.c-nav__settings-line--left::before { left: 3px; }
.c-nav__settings-line--right::before { right: 3px; }
.c-nav__trigger:hover .c-nav__settings-line--left::before { transform: translateX(10px); }
.c-nav__trigger:hover .c-nav__settings-line--right::before { transform: translateX(-10px); }
.c-nav.is-settings-open .js-toggle-settings { background-color: rgba(var(--white-rgb), 0.06); color: var(--white); border-radius: 6px; }
@keyframes settingsSlideLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(11px); } }
@keyframes settingsSlideRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-11px); } }
.c-nav.is-settings-open .js-toggle-settings .c-nav__settings-line--left::before { animation: settingsSlideLeft calc(1.6s * var(--slow-down, 1)) ease-in-out infinite; }
.c-nav.is-settings-open .js-toggle-settings .c-nav__settings-line--right::before { animation: settingsSlideRight calc(1.6s * var(--slow-down, 1)) ease-in-out infinite; }

/* ==========================================================================
   5. MODULES: BINGO & REQUESTS
   ========================================================================== */

/* --- Slider --- */
.c-slider { position: relative; width: 100%; height: 65px; background: var(--surface-alt); border-radius: 12px; overflow: hidden; border: 2px solid var(--accent-color); touch-action: none; user-select: none; box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2); }
.c-slider__text { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--white); z-index: var(--z-base); text-transform: uppercase; letter-spacing: 2px; pointer-events: none; opacity: 0.8; }
.c-slider__fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: rgba(var(--accent-rgb), 0.4); z-index: var(--z-base); pointer-events: none; transition: width var(--transition); }
.c-slider__thumb { position: absolute; top: 0; left: 0; height: 100%; width: 65px; background: var(--accent-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; z-index: var(--z-elevated); cursor: grab; box-shadow: 2px 0 8px rgba(var(--black-rgb), 0.4); transition: transform var(--transition); will-change: transform; }
.c-slider__thumb:active { cursor: grabbing; }
.c-slider.is-dragging .c-slider__fill, .c-slider.is-dragging .c-slider__thumb { transition: none; }
.c-slider.is-disabled { opacity: 0.5; pointer-events: none; border-color: rgba(var(--text-main-rgb), 0.4); box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.2); }
.c-slider.is-disabled .c-slider__thumb { background: rgba(var(--text-main-rgb), 0.4); }
@media (max-width: 380px) { .c-slider { height: 55px; } .c-slider__thumb { width: 55px; font-size: 2rem; } .c-slider__text { font-size: 1.2rem; } }

/* --- Bingo Grid & Pills --- */
.c-game-pill { display: inline-flex; max-width: 100%; background: var(--primary-color); border-radius: 40px; box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.8); margin-bottom: 8px; padding: 2px; align-items: center; }
.c-game-pill__title { flex: 1; min-width: 0; background: var(--surface-color); color: var(--primary-color); border-radius: 40px; padding: 6px 18px; font-family: 'Montserrat', system-ui, sans-serif; font-size: 2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-game-pill__progress { color: var(--surface-color); padding: 6px 14px 6px 12px; font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.8rem; font-weight: 800; white-space: nowrap; }
.c-game-pill__slash { font-size: 0.6em; display: inline-block; transform: translateY(-0.2em); margin: 0 2px; }
@media (max-width: 767px) { .c-game-pill__title { font-size: 1.6rem; padding: 6px 14px; } .c-game-pill__progress { font-size: 1.4rem; padding: 6px 12px 6px 10px; } }
@media (max-width: 380px) { .c-game-pill__title { font-size: 1.4rem; padding: 6px 12px; } .c-game-pill__progress { font-size: 1.2rem; padding: 6px 10px 6px 8px; } }

.c-bingo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 25px 0; }
.c-bingo-cell { background: rgba(var(--surface-alt-rgb), 0.8); border: 2px solid var(--border-color); border-radius: calc(0.4 * var(--border-radius)); aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 5px; cursor: pointer; transition: all 0.2s; user-select: none; overflow: hidden; }
.c-bingo-cell:hover { background: var(--border-color); }
.c-bingo-cell.is-marked { background: var(--accent-color); border-color: var(--accent-color); transform: scale(0.95); }
.c-bingo-cell--free.is-marked { background: var(--primary-color); border-color: var(--primary-color); color: var(--black); font-weight: 700; cursor: default; }
/* De opmaak van de celtekst staat hier compleet: maat, uitlijning én afkapping. Er waren
   hiervoor drie lagen — deze regel, een .v-play-override en een mediaquery — die elk een
   andere maat opdrongen. Dat .v-play-voorvoegsel voegde niets toe, want .c-bingo-cell komt
   alleen op public/play.php voor.

   De maten zijn na een praktijktest bewust de kleine gebleven (UX-audit, UX-01). Groter
   testte slechter: met minder regels per cel werden titels vaker afgekapt, en dan is er méér
   onleesbaar in plaats van minder. Wijzig je ze, doe dat dan hier en in de mediaquery
   onderaan — nergens anders. */
.c-bingo-cell__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; word-break: break-word; line-height: 1.2; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c-bingo-cell__artist { font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.c-bingo-cell.is-marked .c-bingo-cell__artist { color: rgba(var(--white-rgb), 0.9); }

/* --- Swipe Cards (Requests & Users) --- */
.c-swipe-card { position: relative; border-radius: 8px; background: transparent; border: none; padding: 0; overflow: hidden; touch-action: pan-y; box-shadow: none; }
.c-swipe-card__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 20px; z-index: var(--z-base); opacity: 0; transition: opacity 0.2s; border-radius: 8px; color: var(--white); }
.c-swipe-card__bg--left { justify-content: flex-start; }
.c-swipe-card__bg--right { justify-content: flex-end; }
.c-swipe-card__icon { width: 32px; height: 32px; fill: currentColor; }
.c-swipe-card__content { position: relative; z-index: var(--z-above-base); background: rgba(var(--surface-rgb), 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(var(--white-rgb), 0.08); border-radius: 8px; box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.3); display: flex; align-items: center; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.3s, border-color 0.3s; will-change: transform; }
.c-swipe-card__content.is-dragging { transition: none; }
.c-swipe-card__bg--danger { background-color: var(--error-color); }

/* Swipe Cards: Requests */
.c-request-list, .c-user-list { display: flex; flex-direction: column; gap: 8px; }
.c-request-list { padding-bottom: 20px; }
.c-request-card .c-swipe-card__bg--play { background-color: var(--primary-color); justify-content: flex-start; }
.c-request-card .c-swipe-card__bg--archive { background-color: var(--error-color); justify-content: flex-end; }
.c-request-card .c-swipe-card__content { padding: 10px 12px; gap: 12px; border-left: 4px solid var(--primary-color); }
.c-request-card.is-moving-up { position: relative; z-index: var(--z-elevated); overflow: visible; }
.c-request-card.is-moving-up .c-swipe-card__content { box-shadow: 0 10px 24px rgba(var(--black-rgb), 0.6); background: rgba(var(--surface-rgb), 0.2); transform: scale(1.01); }
.c-request-card__image { width: 55px; height: 55px; border-radius: 6px; margin: 0; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 6px rgba(var(--black-rgb), 0.4); }
.c-request-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.c-request-card__title { font-size: 1.5rem; margin-bottom: 2px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.c-request-card__artist { color: var(--primary-color); font-weight: 700; font-size: 1.3rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.c-request-card__user { color: rgba(var(--white-rgb), 0.5); font-size: 1.1rem; line-height: 1.2; }
.c-request-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
/* Ondersteunt zowel een <a> als een <button> zodat de weergave consistent is ongeacht het HTML-element. */
.c-request-card__user-link { color: var(--primary-color); font-weight: 600; text-decoration: none; transition: opacity 0.2s; }
button.c-request-card__user-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.c-request-card__user-link:hover { opacity: 0.75; }
.c-request-card__desktop-actions { display: none; gap: 12px; margin-left: auto; padding-left: 12px; }
.c-request-card--mine .c-swipe-card__content { border-left-color: var(--error-color); }
.c-request-card--mine .c-request-card__artist { color: var(--error-color); }
.c-request-card--mine .c-request-card__user { color: var(--white); }
@media (min-width: 768px) { .c-request-card__desktop-actions { display: flex; align-items: center; } }

/* Swipe Cards: Users */
.c-user-card { scroll-margin-top: 100px; }
.c-user-card.is-highlighted .c-swipe-card__content { animation: highlight-pulse 2.5s ease-out; }
@keyframes highlight-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.7); border-color: var(--primary-color); } 70% { box-shadow: 0 0 0 15px rgba(var(--primary-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); } }

.c-user-card .c-swipe-card__content { padding: 15px; gap: 15px; flex-wrap: wrap; border-left: 4px solid transparent; }
.c-user-card[data-banned="0"] .c-swipe-card__content { border-left-color: var(--primary-color); }
.c-user-card[data-banned="1"] .c-swipe-card__content { border-left-color: var(--error-color); }
.c-user-card[data-banned="1"] .c-swipe-card__bg { background-color: var(--primary-color); }
.c-user-card[data-banned="0"] .c-swipe-card__bg { background-color: var(--error-color); }
.c-user-card[data-banned="1"] .js-icon-ban, .c-user-card[data-banned="0"] .js-icon-unban { display: none; }

.c-user-card__info { flex: 1 1 250px; min-width: 0; }
.c-user-card__name { display: block; font-size: 1.5rem; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.c-user-card__email { display: block; font-size: 1.1rem; color: var(--primary-color); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; line-height: 1.2;}
.c-user-card__meta { display: block; font-size: 1.1rem; color: rgba(var(--white-rgb), 0.5); line-height: 1.2; }
.c-user-card__stats { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-end; }
.c-user-card__desktop-actions { display: none; gap: 12px; margin-left: auto; padding-left: 12px; }
@media (min-width: 768px) { .c-user-card__desktop-actions { display: flex; align-items: center; } }
@media (max-width: 767px) {
    .c-user-card .c-swipe-card__content { gap: 10px; padding: 12px; }
    .c-user-card__info { flex-basis: 100%; margin-bottom: 0; }
    .c-user-card__stats { flex-basis: 100%; justify-content: center; border-top: 1px solid rgba(var(--white-rgb), 0.06); padding-top: 10px; gap: 6px; }
}

/* --- FINGERPRINT-PILLS EN CLUSTER-HEADER --- */
.c-fingerprint-row {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--white-rgb), 0.06);
}
.c-fingerprint-row.u-hidden { display: none; }

.c-fingerprint-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}
.c-fingerprint-pill--muted {
    background: transparent;
    color: rgba(var(--white-rgb), 0.4);
    box-shadow: inset 0 0 0 1px rgba(var(--white-rgb), 0.06);
}
.c-fingerprint-pill--active {
    background: rgba(var(--accent-rgb), 0.2);
    color: rgba(var(--white-rgb), 0.9);
}
.c-fingerprint-pill--info {
    background: rgba(var(--white-rgb), 0.08);
    color: rgba(var(--white-rgb), 0.85);
}
.c-fingerprint-row.is-in-cluster .c-fingerprint-pill--active {
    background: var(--cluster-color);
    color: var(--white);
}
.c-cluster-header .c-fingerprint-pill--active {
    background: var(--cluster-color);
    color: var(--white);
}

.c-cluster-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--cluster-color, rgba(var(--white-rgb), 0.2));
    color: var(--white);
    white-space: nowrap;
}

.c-cluster-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-top: 15px;
    margin-bottom: -5px;
    background: rgba(var(--white-rgb), 0.04);
    border-radius: 8px 8px 0 0;
}

/* Klikbare naam in de speler-kaart: erft kleur, krijgt onderstreping bij hover */
.c-user-card__name-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.c-user-card__name-link:hover .c-user-card__name {
    text-decoration: underline;
}


/* --- DETAIL MODAL --- */
.c-detail-modal {
    position: fixed;
    inset: 0;
    background: rgba(var(--bg-rgb), 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.c-detail-modal:not(.u-hidden) { opacity: 1; }

.c-detail-modal__box {
    position: relative;
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.6);
    max-width: 800px;
    width: 100%;
    padding: 25px;
    transform: scale(0.96);
    transition: transform 0.2s ease-out;
}
.c-detail-modal:not(.u-hidden) .c-detail-modal__box { transform: scale(1); }

.c-detail-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: rgba(var(--white-rgb), 0.6);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.c-detail-modal__close:hover {
    background: rgba(var(--white-rgb), 0.08);
    color: var(--white);
}
.c-detail-modal__close svg { width: 20px; height: 20px; }

.c-detail-modal__header {
    padding-right: 50px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.08);
}

.c-detail-modal__section { margin-bottom: 24px; }
.c-detail-modal__section:last-child { margin-bottom: 0; }

.c-detail-modal__section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.c-detail-modal__section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(var(--white-rgb), 0.9);
    margin: 0 0 12px 0;
}
.c-detail-modal__section-header .c-detail-modal__section-title { margin: 0; }

.c-detail-modal__section-count {
    font-size: 1.1rem;
    color: rgba(var(--white-rgb), 0.5);
}

.c-detail-modal__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.c-detail-modal__fingerprint {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.c-detail-modal__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.c-detail-modal__item {
    padding: 12px 15px;
    background: rgba(var(--white-rgb), 0.04);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.c-detail-modal__item-main {
    flex: 1 1 200px;
    min-width: 0;
}
.c-detail-modal__item-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.c-detail-modal__item-meta {
    font-size: 1rem;
    color: rgba(var(--white-rgb), 0.55);
}
.c-detail-modal__item-aside {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.c-detail-modal__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.c-detail-modal__status--pending  { background: rgba(var(--warning-rgb), 0.18); color: var(--warning-color); }
.c-detail-modal__status--played   { background: rgba(var(--primary-rgb), 0.18); color: var(--primary-color); }
.c-detail-modal__status--archived { background: rgba(var(--white-rgb), 0.08);   color: rgba(var(--white-rgb), 0.5); }
.c-detail-modal__status--deleted  { background: rgba(var(--error-rgb), 0.18);   color: var(--error-color); }

.c-detail-modal__load-more {
    margin-top: 12px;
    padding: 10px 20px;
    background: rgba(var(--white-rgb), 0.06);
    border: 1px solid rgba(var(--white-rgb), 0.1);
    color: rgba(var(--white-rgb), 0.8);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    transition: background 0.2s, color 0.2s;
}
.c-detail-modal__load-more:hover    { background: rgba(var(--white-rgb), 0.1); color: var(--white); }
.c-detail-modal__load-more:disabled { opacity: 0.5; cursor: wait; }

.c-detail-modal__empty {
    padding: 20px;
    text-align: center;
    color: rgba(var(--white-rgb), 0.4);
    font-size: 1rem;
}

.c-detail-modal__skeleton {
    background: linear-gradient(
        90deg,
        rgba(var(--white-rgb), 0.04) 0%,
        rgba(var(--white-rgb), 0.08) 50%,
        rgba(var(--white-rgb), 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: 6px;
    height: 16px;
    margin-bottom: 8px;
}
.c-detail-modal__skeleton--line-short  { width: 40%; }
.c-detail-modal__skeleton--line-medium { width: 65%; }
.c-detail-modal__skeleton--line-full   { width: 100%; }
.c-detail-modal__skeleton--block       { height: 60px; margin-bottom: 12px; }

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 767px) {
    .c-detail-modal {
        padding: 0;
        align-items: stretch;
    }
    .c-detail-modal__box {
        max-width: 100%;
        border-radius: 0;
        padding: 20px 15px;
        min-height: 100dvh;
        transform: none;
        transition: opacity 0.2s ease-out;
    }
    .c-detail-modal:not(.u-hidden) .c-detail-modal__box { transform: none; }
}

/* --- USERS TOOLBAR (zoek + filter) --- */
.c-users-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.c-users-toolbar__filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (min-width: 768px) {
    .c-users-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
    .c-users-toolbar .c-form-field { flex: 1; max-width: 340px; }
}

/* --- SEGMENTED CONTROL (3-state filter) --- */
.c-segmented-control { display: inline-flex; border: 1px solid var(--border-color); border-radius: calc(0.5 * var(--border-radius)); overflow: hidden; }
.c-segmented-control__option {
    background: none;
    border: none;
    border-right: 1px solid var(--border-color);
    padding: 6px 14px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.c-segmented-control__option:last-child { border-right: none; }
.c-segmented-control__option:hover { background: rgba(var(--white-rgb), 0.06); color: var(--text-main); }
.c-segmented-control__option--active { background: var(--primary-color); color: var(--black); }
.c-segmented-control__option--active:hover { background: var(--primary-color); color: var(--black); }

/* --- BANNED COUNT BADGE --- */
.c-banned-count { font-size: 1.2rem; font-weight: 700; color: var(--error-color); white-space: nowrap; }

/* --- STATUS DOT COMPONENT --- */
.c-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.c-status-dot--online { background-color: var(--primary-color); }
.c-status-dot--recent { background-color: var(--accent-color); }
.c-status-dot--offline { background-color: rgba(var(--white-rgb), 0.2); }

/* --- Stats & Dashboard --- */
.c-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; background: rgba(var(--white-rgb),0.1); padding: 6px 12px; border-radius: 20px; font-weight: 600; }
.c-stat svg { width: 16px; height: 16px; fill: currentColor; }
.c-stat--compact { font-size: 0.8rem; padding: 4px 8px; gap: 4px; }
.c-stat--compact svg { width: 12px; height: 12px; }
.c-stat--accent { color: rgba(var(--white-rgb), 0.8); background: rgba(var(--accent-rgb), 0.2); }
.c-stat--accent svg { color: rgba(var(--accent-rgb), 1); }
.c-stat--primary { color: rgba(var(--white-rgb), 0.8); background: rgba(var(--primary-rgb), 0.2); }
.c-stat--primary svg { color: rgba(var(--primary-rgb), 1); }
.c-stat--info { color: rgba(var(--white-rgb), 0.8); background: rgba(var(--info-rgb), 0.2); }
.c-stat--info svg { color: rgba(var(--info-rgb), 1); }
.c-stat--like { color: rgba(var(--white-rgb), 0.8); background: rgba(var(--error-rgb), 0.2); }
.c-stat--like svg { color: rgba(var(--error-rgb), 1); }
.c-stat--win { color: rgba(var(--white-rgb), 0.8); background: rgba(var(--primary-rgb), 0.2); }
.c-stat--win svg { color: rgba(var(--primary-rgb), 1); }
.c-stat--warning { color: rgba(var(--white-rgb), 0.8); background: rgba(var(--warning-rgb), 0.2); }
.c-stat--warning svg { color: rgba(var(--warning-rgb), 1); }
.c-stat--error { color: rgba(var(--white-rgb), 0.8); background: rgba(var(--error-rgb), 0.2); }
.c-stat--error svg { color: rgba(var(--error-rgb), 1); }
.c-stat.c-stat--empty { background: transparent; color: rgba(var(--white-rgb), 0.4); box-shadow: inset 0 0 0 1px rgba(var(--white-rgb), 0.06); }
@media (max-width: 767px) {
    .c-stat { font-size: 0.8rem; padding: 4px 8px; } .c-stat svg { width: 12px; height: 12px; }
    .c-stat--compact { font-size: 0.75rem; padding: 2px 6px; } .c-stat--compact svg { width: 10px; height: 10px; }
}

.c-stats-group { border-left: 4px solid var(--surface-alt); padding-left: 20px; margin-bottom: 40px; }
.c-stats-day-header { display: flex; align-items: baseline; gap: 15px; margin-bottom: 20px; }
.c-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 15px; }

.c-analytics-card { background: rgba(var(--white-rgb), 0.03); padding: 12px; border-radius: 8px; text-align: center; border: 1px solid rgba(var(--white-rgb), 0.05); }
.c-analytics-card__label { font-size: 1rem; color: var(--text-muted); text-transform: uppercase; display: block; margin-bottom: 4px; }
.c-analytics-card__value { font-size: 1.8rem; font-weight: 800; font-family: 'Montserrat', sans-serif; color: var(--primary-color); }
.c-analytics-card__unit { font-size: 1.1rem; opacity: 0.6; font-weight: 400; }

/* --- Leaderboard Component --- */
.c-leaderboard { display: flex; flex-direction: column; gap: 10px; }
.c-leaderboard__item { display: flex; align-items: center; gap: 15px; padding: 10px; background: rgba(var(--white-rgb), 0.04); border-radius: calc(0.2 * var(--border-radius)); }
.c-leaderboard__rank { font-weight: bold; color: var(--primary-color); min-width: 12px; }
.c-leaderboard__image { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.c-leaderboard__info { flex-grow: 1; min-width: 0; }
.c-leaderboard__info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Like Component --- */
.c-like-pill-wrapper { display: flex; align-items: center; line-height: 0; }
.c-like-pill { display: inline-flex; align-items: center; justify-content: center; background: var(--error-color); color: var(--white); border-radius: 12px; padding: 2px 8px; font-size: 1.1rem; font-weight: 700; gap: 4px; box-shadow: 0 2px 4px rgba(var(--black-rgb), 0.4); }
.c-like-pill__icon { width: 12px; height: 12px; fill: currentColor; }
.c-like-pill.is-popping { animation: pillPop 0.6s ease-in-out 7; }
@keyframes pillPop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

.c-like-btn { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 4px; margin: 0; color: var(--text-main); flex-shrink: 0; }
.c-like-btn__icon { width: 26px; height: 26px; fill: transparent; stroke: var(--text-muted); stroke-width: 2px; transition: fill 0.2s, stroke 0.2s; }
.c-like-btn.is-liked .c-like-btn__icon { fill: var(--error-color); stroke: var(--error-color); }
.c-like-btn__count { font-size: 1.5rem; font-weight: 700; min-width: 14px; text-align: right; }
.c-like-btn.is-popping .c-like-btn__icon { animation: reqBadgePop 0.6s ease-in-out 7; fill: var(--error-color); stroke: var(--error-color); }
@keyframes reqBadgePop { 0% { transform: scale(1); } 50% { transform: scale(1.4); filter: drop-shadow(0 0 4px rgba(var(--error-rgb), 0.6)); } 100% { transform: scale(1); } }

/* --- Search & Songs --- */
.c-search-dropdown { background: var(--surface-alt); border-radius: 8px; margin-top: 5px; max-height: 350px; overflow-y: auto; }
.c-search-item { display: flex; align-items: center; padding: 12px; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: 0.2s; }
.c-search-item:hover { background: var(--border-color); border-left: 4px solid var(--primary-color); }
.c-search-item__image { width: 50px; height: 50px; border-radius: 4px; margin-right: 15px; }
.c-search-item__title { font-size: 1.6rem; font-weight: 700; }
.c-search-item__subtitle { color: var(--text-muted); }

.c-selected-song { display: flex; align-items: center; background: rgba(var(--primary-rgb), 0.2); padding: 15px; border-radius: 8px; border: 1px solid var(--primary-color); margin-top: 20px; }
.c-selected-song__image { width: 60px; height: 60px; border-radius: 4px; margin-right: 15px; }
.c-selected-song__title { font-size: 1.8rem; font-weight: 700; color: var(--white); }
.c-selected-song__artist { color: var(--primary-color); }

.c-song { padding: 12px; background: var(--surface-alt); border-radius: 5px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s; }
.c-song--ghost { opacity: 1 !important; }
.c-song--chosen { opacity: 0 !important; }
.c-song--cutoff { opacity: 0.4; }
.c-song__info { display: flex; align-items: center; flex: 1; min-width: 0; }
.c-song__track-num { color: rgba(var(--text-main-rgb), 0.6); font-size: 1.2rem; width: 25px; font-weight: 700; }
.c-song__title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.c-song__artist { color: var(--text-muted); font-size: 0.85em; }
.c-song__custom { font-size: 1.3rem; font-weight: 700; color: var(--error-color); margin-right: 15px; text-align: right; }
/* Het actieve nummer werd tot 12 aug 2026 met de tekst "NU BEZIG" gemarkeerd; dat is nu een
   play-icoon. Geen font-size of font-weight meer: er is geen tekst om op te maken. De kleur
   blijft wél, want get_icon() zet fill="currentColor" — daar komt het groen vandaan.
   Bewust geen animatie: de app heeft nog geen prefers-reduced-motion-vangnet (UX-16). */
.c-song__now-playing { color: var(--primary-color); display: inline-flex; align-items: center; }
.c-song__now-playing svg { width: 20px; height: 20px; }
.c-song.is-played { opacity: 0.4; border-left-color: rgba(var(--text-main-rgb), 0.3); }
.c-song.is-active { border-left-color: var(--primary-color); background: rgba(var(--primary-rgb), 0.2); transform: scale(1.02); box-shadow: 0 6px 12px rgba(var(--black-rgb), 0.8); border-radius: 8px; font-weight: 700; }
.c-song__actions { display: flex; flex-direction: column; gap: 4px; }
.c-song__action-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: 0.2s; }
.c-song__action-btn:hover { background: rgba(var(--primary-rgb), 0.2); color: var(--primary-color); }
.c-song__action-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* --- Drag, Prizes & Cutoff --- */
.c-drag-handle { display: inline-flex; align-items: center; justify-content: center; cursor: grab; color: var(--text-muted); padding-right: 10px; user-select: none; }
.c-drag-handle:active { cursor: grabbing; color: var(--primary-color); }
.c-drag-handle svg { width: 24px; height: 24px; display: block; }

/* De banner die op de verzoekjespagina meldt dat er een bingo bezig is (UX-08, §6.1).
   Groen omdat dat in dit palet de bingokleur is; de linkerrand maakt hem herkenbaar als
   mededeling en niet als nog een kaart in de lijst. Onder 480px stapelt hij, zodat de knop
   op een smal scherm niet in de verdrukking komt naast de spelnaam. */
.c-bingo-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 16px; background: rgba(var(--primary-rgb), 0.12); border-left: 4px solid var(--primary-color); border-radius: calc(0.4 * var(--border-radius)); }
.c-bingo-banner__icon { width: 24px; height: 24px; flex-shrink: 0; fill: var(--primary-color); }
.c-bingo-banner__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-bingo-banner__title { font-weight: 700; font-size: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-bingo-banner__progress { font-size: 1.3rem; color: var(--text-muted); }
.c-bingo-banner__progress:empty { display: none; }
.c-bingo-banner__action { flex-shrink: 0; width: auto; margin: 0; padding: 8px 16px; font-size: 1.3rem; }

@media (max-width: 480px) {
    .c-bingo-banner { flex-wrap: wrap; }
    .c-bingo-banner__action { width: 100%; }
}

.c-prize-container { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.c-prize-badge { background: var(--accent-color); padding: 4px 10px; border-radius: 20px; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; color: var(--text-main); transition: 0.3s; }
.c-prize-badge.is-won { background: rgba(var(--white-rgb), 0.1); color: rgba(var(--white-rgb), 0.3); }
/* De prijs die deze speler zelf won. Grijs betekent "niet meer te winnen" en klopt voor
   iedereen die hem misliep — maar de winnaar zag zijn eigen prijs daardoor vervágen, precies
   hetzelfde beeld als wanneer een ander hem had gepakt (UX-audit, UX-02). Groen op zwart,
   dezelfde combinatie als het FREE SPACE-vakje. Verschijnt pas ná de onthulling door de host;
   die voorwaarde zit in play.js. */
.c-prize-badge.is-won-by-me { background: var(--primary-color); color: var(--black); }

.c-cutoff-warning { display: flex; align-items: center; justify-content: center; margin: 20px 0; color: var(--error-color); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.c-cutoff-warning::before, .c-cutoff-warning::after { content: ''; flex: 1; border-bottom: 2px dashed var(--error-color); opacity: 0.4; }
.c-cutoff-warning::before { margin-right: 15px; }
.c-cutoff-warning::after { margin-left: 15px; }

/* --- Table --- */
.c-table { width: 100%; text-align: left; margin-top: 20px; border-collapse: collapse; }
.c-table th { padding-bottom: 10px; }
.c-table tr:not(:first-child, :last-child) { border-bottom: 1px solid var(--border-color); }
.c-table td { padding: 10px 0; }

/* --- Live Dashboard --- */
.c-live-header { flex-shrink: 0; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.c-live-main { display: flex; flex-direction: column; flex-grow: 1; overflow: visible; }
.c-live-playlist { flex-grow: 1; padding: 15px; }
.c-alert-item { display: flex; align-items: center; gap: 12px; background: var(--surface-alt); padding: 12px; border-radius: 8px; border-left: 4px solid transparent; flex-shrink: 0; }
.c-alert-item--success { border-color: var(--primary-color); }
.c-alert-item--danger { border-color: var(--error-color); }
.c-alert-item__icon { font-size: 2rem; }
.c-alert-item__icon svg { width: 24px; height: 24px; display: block; }
.c-alert-item__info { display: flex; flex-direction: column; align-items: flex-start; }
.c-alert-item__msg { font-size: 1.3rem; line-height: 1.3; }

.c-alerts-panel { background: rgba(var(--bg-rgb), 0.8); }
.c-alerts-panel__header { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 15px; background: none; border: none; color: var(--white); cursor: pointer; font-family: inherit; font-size: 1.4rem; font-weight: 600; text-align: left; }
.c-alerts-panel__header:hover { background: rgba(var(--white-rgb), 0.05); }
.c-alerts-panel__title { flex: 1; }
.c-alerts-panel__badge { background-color: var(--error-color); color: var(--white); font-size: 1.2rem; font-weight: 700; min-width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 4px 10px rgba(var(--black-rgb), 0.4); border: 2px solid var(--white); }
.c-alerts-panel__badge.is-pulsing { animation: badgePop calc(0.4s * var(--slow-down, 1)) ease-out; }
.c-alerts-panel__chevron-icon { width: 16px; height: 16px; display: block; transition: transform calc(0.2s * var(--slow-down, 1)) ease; }
.c-alerts-panel.is-open .c-alerts-panel__chevron-icon { transform: rotate(180deg); }
.c-alerts-panel__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 15px 15px; }

/* ==========================================================================
   6. VIEWS & STATES
   ========================================================================== */
/* Voorkomt dat de onderste kaart onbereikbaar wordt door de vaste pagination balk. */
.v-host { padding: 0; }
.v-host .o-container { padding: 20px; }
.tab-content { width: 100%; }


/* Ruimte onder de speellijst, zodat het laatste nummer niet achter de vaste speelknop valt.
   LET OP DE SELECTOR. Hier stond `.v-host-bingo-content` met één klasse, en dat verloor het van
   `.v-host .o-container` hierboven — dit element draagt namelijk óók de klasse o-container. De
   regel stond er dus wél, maar er kwam nooit meer dan 20px uit. Twee klassen zijn hier het
   minimum; de paginering hierboven ontkomt eraan doordat die op een id staat.
   LET OP DE FORMULE. Alleen --btn-base-height (72px) wordt geschaald, en er komt niets bij.
   De knopbalk is hoger dan de knop zelf: hij draagt `padding: 1rem 0`, oftewel 20px (html staat
   op 62.5%, dus 1rem = 10px). Die 20px is hier bewust niet opgeteld, want onder het laatste
   nummer zit al precies zoveel ruimte — 5px margin-bottom van .c-song plus 15px padding van
   .c-live-playlist. Samen sluit dat aan op de bovenkant van de balk, en die bovenste 10px is
   toch transparante padding met een gradient.
   Twee dingen volgen daaruit. De hele balk schalen — calc(92px * var(--nav-scale)) — komt op
   0.8 en 0.7 tekort en zet dezelfde fout terug, alleen dan alleen zichtbaar op tablet en mobiel.
   En haalt iemand de padding van .c-live-playlist of de margin van .c-song weg, dan valt het
   laatste nummer hier alsnog achter de knop: die drie waarden dragen samen de ruimte.
   tests/LayoutTest.php rekent ze door, en bewaakt ook dat de 72 hier gelijk blijft aan
   --btn-base-height. Die staat bewust op de component en niet in :root, dus CSS kan die
   koppeling zelf niet leggen. */
.v-host .v-host-bingo-content { padding-bottom: calc(72px * var(--nav-scale)); }

.v-bingo-play-btn { --btn-base-height: 72px; --btn-base-radius: 20px; --btn-base-font: 2.4rem; position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem 0; background: linear-gradient(to top, rgba(var(--bg-rgb), 0.8), transparent); z-index: var(--z-fixed); }
.v-bingo-play-btn__inner { width: calc(100% - 32px); max-width: calc(1200px - 32px); margin: 0 auto; }
.v-bingo-play-btn .c-btn--play-next { height: calc(var(--btn-base-height) * var(--nav-scale)); border-radius: calc(var(--btn-base-radius) * var(--nav-scale)); font-size: calc(var(--btn-base-font) * var(--nav-scale)); }

/* De buitenste container verzorgt uitsluitend de gradient over de volledige breedte, identiek
   aan de bingo-speelknop. De binnenste pill omsluit zichzelf en schaalt automatisch mee met
   de inhoud, op dezelfde wijze als het navigatiemenu na scrollen. */
.c-pagination { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-fixed); padding: 0; padding-bottom: calc(24px * var(--nav-scale)); background: linear-gradient(to top, rgba(var(--bg-rgb), 0.8), transparent); display: flex; justify-content: center; }
.c-pagination__inner { display: inline-flex; align-items: center; gap: calc(12px * var(--nav-scale)); padding: calc(8px * var(--nav-scale)); border-radius: calc(50px * var(--nav-scale)); background-color: rgba(var(--surface-rgb), 0.6); backdrop-filter: saturate(220%) blur(16px); -webkit-backdrop-filter: saturate(220%) blur(16px); box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.4), var(--glass-edge); }
.c-pagination__btn { width: calc(40px * var(--nav-scale)); height: calc(40px * var(--nav-scale)); border-radius: 50%; background: rgba(var(--white-rgb), 0.08); border: 1px solid rgba(var(--white-rgb), 0.1); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; }
.c-pagination__btn:hover { background: rgba(var(--primary-rgb), 0.24); border-color: var(--primary-color); }
.c-pagination__btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.c-pagination__btn svg { width: calc(20px * var(--nav-scale)); height: calc(20px * var(--nav-scale)); }
.c-pagination__info { font-size: calc(1.2rem * var(--nav-scale)); color: rgba(var(--white-rgb), 0.8); min-width: calc(120px * var(--nav-scale)); text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* Logboek (public/log.php). Bewust een eenvoudig blok: dit is een diagnosepagina voor de host,
   geen onderdeel van de spelinterface. De regels breken af in plaats van horizontaal te scrollen,
   want een stacktrace op een telefoon is anders onleesbaar. */
.c-log { padding: 20px; max-width: 1200px; margin: 0 auto; }
.c-log__title { margin-bottom: 8px; }
.c-log__intro { color: var(--text-muted); margin-bottom: 16px; }
.c-log__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.c-log__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.c-log__line { background: var(--surface-alt); padding: 8px 12px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.2rem; line-height: 1.5; overflow-wrap: anywhere; }

.v-play { padding: 0; height: 100dvh; width: 100vw; display: flex; justify-content: center; overflow: hidden; }
.v-play__wrapper { width: 100%; max-width: 600px; height: 100dvh; display: flex; flex-direction: column; padding: 10px; }
.v-play__header { flex-shrink: 0; text-align: center; margin-bottom: 10px; padding-top: env(safe-area-inset-top, 5px); }
.v-play__header .player-name { font-size: 1.4rem; color: var(--text-muted); }
.v-play__info-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 15px; }
.v-play__grid-container { flex-grow: 1; display: flex; justify-content: center; align-items: center; min-height: 0; width: 100%; }
.v-play .c-bingo-grid { width: 100%; height: auto; max-height: 100%; aspect-ratio: 1 / 1; margin: 0; gap: 4px; }
.v-play .c-bingo-cell { padding: 3px; border-width: 1px; }
.v-play__footer { flex-shrink: 0; margin-top: 10px; padding-bottom: env(safe-area-inset-bottom, 15px); }

/* Onder 380px is een cel nog geen 65px. Daar gaat een regel titel af én een stapje in
   lettergrootte; alleen het een of het ander liet te weinig van de titel over. */
@media (max-width: 380px) {
    .c-bingo-cell__title { font-size: 0.9rem; line-clamp: 2; -webkit-line-clamp: 2; }
    .c-bingo-cell__artist { font-size: 0.8rem; }
}

html:has(.v-request) { background-color: var(--bg-dark-color); }
body.v-request { background-color: transparent; min-height: 100dvh; }
body.v-request::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
    background-image: linear-gradient(0deg, rgba(9,9,9,0.92) 0%, rgba(16,12,16,0.48) 40%, rgba(28,20,28,0) 100%), radial-gradient(circle farthest-side at 100% 0, rgb(120,70,250) 0%, rgb(108,20,250) 32%, rgb(42,18,88) 100%);
    background-blend-mode: multiply, normal; z-index: var(--z-background); pointer-events: none;
}


/* ==========================================================================
   7. UTILITIES & ANIMATIONS
   ========================================================================== */
/* Let op: utility classes lijken ongebruikt voor statische scanners, maar worden
   ook dynamisch toegepast via JavaScript (classList.add/remove) en PHP-string-
   concatenatie. Verwijder een utility class alleen na handmatig zoeken in de
   volledige codebase. Sommige classes zijn bewust gereserveerd als API voor
   toekomstig gebruik. */
.u-hidden { display: none !important; }

/* Responsive weergave */
@media (max-width: 767px) { .u-desktop-only { display: none !important; } }
@media (min-width: 768px) { .u-mobile-only { display: none !important; } }

/* Layout & Flexbox */
.u-block { display: block !important; }
.u-flex-1 { flex: 1 !important; }
.u-flex-2 { flex: 2 !important; }
.u-justify-center { justify-content: center !important; }
.u-align-start { align-items: flex-start !important; }
.u-align-end { align-items: flex-end !important; }
.u-align-center { align-items: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-flex-wrap { flex-wrap: wrap !important; }

/* Afmetingen */
.u-w-100 { width: 100% !important; }
.u-max-w-100 { max-width: 100% !important; }
.u-min-w-120 { min-width: 120px !important; }
.u-min-w-200 { min-width: 200px !important; }
.u-min-w-300 { min-width: 300px !important; }
.u-overflow-x-auto { overflow-x: auto !important; }

/* Marges (M) & Paddings (P) */
.u-m-0 { margin: 0 !important; }
.u-m-30 { margin: 30px !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-5 { margin-top: 5px !important; }
.u-mt-15 { margin-top: 15px !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-mr-10 { margin-right: 10px !important; }
.u-mr-15 { margin-right: 15px !important; }
.u-mb-5 { margin-bottom: 5px !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-mb-15 { margin-bottom: 15px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-mb-30 { margin-bottom: 30px !important; }
.u-mb-40 { margin-bottom: 40px !important; }

.u-p-15 { padding: 15px !important; }
.u-p-30 { padding: 30px !important; }

/* Gaps (Voor Flex/Grid) */
.u-gap-5 { gap: 5px !important; }
.u-gap-10 { gap: 10px !important; }
.u-gap-15 { gap: 15px !important; }

/* Typografie & Kleuren */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-small { font-size: 1.2rem !important; }
.u-font-bold { font-weight: 700 !important; }
.u-text-primary { color: var(--primary-color) !important; }
.u-text-accent { color: var(--accent-color) !important; }
.u-text-info { color: var(--info-color) !important; }
.u-text-muted { color: rgba(var(--text-main-rgb), 0.6) !important; }
.u-text-error { color: var(--error-color) !important; }
.u-text-warning { color: var(--warning-color) !important; }

/* Iconen */
.u-icon-small { width: 14px; height: 14px; }
.u-icon-huge { width: 64px; height: 64px; }

/* Dynamische Javascript States (Modifiers) */
.is-invalid { border-color: var(--error-color) !important; }
.is-pulsing { z-index: var(--z-elevated); animation: alertPulse 1s infinite alternate; }

/* Keyframes */
@keyframes alertPulse { 
    0% { transform: scale(1); } 
    100% { transform: scale(1.04); box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.8); } 
}