/* ============================================================
   Presentatie-chrome — volgt app/STYLEGUIDE.md:
   Inter, inkt-basis, accent #f08c00 (spaarzaam).
   Alleen de chrome (controlebalk, dialogen, banners);
   slide-inhoud volgt quiz.css / het quiz-thema.
   ============================================================ */
@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('/wp-content/themes/quizmaken/fonts/inter-v19-latin-500.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('/wp-content/themes/quizmaken/fonts/inter-v19-latin-600.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('/wp-content/themes/quizmaken/fonts/inter-v19-latin-700.woff2') format('woff2');
}

.ctrl-wrap,
.modal.confirm-modal,
.conn-warning,
.pause-banner,
.audio-banner {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Toggle in het donkere settingspaneel: accent i.p.v. groen, en meegroeiend met het
   scherm (--tgl-w/--tgl-h staan bij .settings-panel). Het knopje schuift precies de
   breedte van de baan min zijn eigen hoogte op. */
.settings-panel .toggle.on {
    background: #f08c00;
}

.settings-panel .toggle {
    height: var(--tgl-h);
}

.settings-panel .toggle.on::after {
    left: 2px;
    right: auto;
    transform: translateX(calc(var(--tgl-w) - var(--tgl-h)));
}

/* De slide is 1600x900 en wordt geschaald (scaleSlide in quiz.js); door afronding
   houdt de wrapper soms een halve pixel over en dat is genoeg voor een scrollbar.
   Firefox laat die zien, Chrome legt hem als overlay over de slide heen, maar in
   beide gevallen valt er hier niets te scrollen. Clip in plaats van hidden: hidden
   maakt nog steeds een scrollcontainer, waarin focus op iets net buiten beeld de
   hele pagina kan verschuiven zonder weg terug. */
html {
    overflow: clip;
}

.present {
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    transition: opacity 0.15s ease;
    /* Binnen de marges van slide_canvas (quiz.js) groeit de slide mee met het
       scherm; daarbuiten staat er zwart omheen, zoals bij film en video. */
    background-color: black;
}

.present.fading { opacity: 0; }
.present .wrapper {
    margin: 0 auto;
}

.ctrl-wrap {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 20px;
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


.ctrl-wrap.hidden { opacity: 0; pointer-events: none; }

/* Zolang er een hint bovenin de slide staat, zakken de bedieningsbalk en de
   pauzebanner naar onderen: de hint is voor de zaal, die twee alleen voor de
   host. */
body.hint-open .ctrl-wrap {
    transform: translateX(-50%) translateY(calc(100vh - 100% - 64px));
}

/* Settings panel — slides up above the bar */
.settings-panel {
    --tgl-w: max(5vw, 70px);
    --tgl-h: max(3.6vh, 32px);
    background: rgba(24,24,27,0.92);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    /* Zelfde maatvoering als de balk: vast tot ~900px schermhoogte, daarboven mee omhoog */
    padding: max(2.2vh, 20px) max(3vh, 28px);
    display: flex;
    flex-direction: column;
    gap: max(1.8vh, 16px);
    min-width: max(29vh, 260px);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34,1.4,0.64,1);
}

.settings-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.s-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: max(2.7vh, 24px);
}
.s-row:has(.toggle) {
    display: grid;
    grid-template-columns: auto var(--tgl-w);
}

.s-label {
    font-size: max(1.5vh, 13px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    /* white-space: nowrap; */
    max-width: max(10vw, 240px);
}

/* Sneltoetsen: alleen ter herinnering, dus rustiger dan de schakelaars erboven */
.s-keys {
    display: flex;
    flex-direction: column;
    gap: max(0.9vh, 8px);
    padding-top: max(1.6vh, 14px);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.s-keys-title {
    font-size: max(1.25vh, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}

.s-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: max(2.7vh, 24px);
    font-size: max(1.5vh, 13px);
    color: rgba(255,255,255,0.75);
}

.s-key-combo {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.s-key kbd {
    font-family: inherit;
    font-size: max(1.3vh, 11px);
    font-weight: 600;
    line-height: 1;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
    border-radius: 6px;
    padding: max(0.6vh, 5px) max(0.8vh, 7px);
    min-width: max(2.4vh, 22px);
    text-align: center;
}



/* De balk en de eindknop als één rij; het settingspaneel staat erboven of eronder.
   Stretch: de knop wordt zo net zo hoog als de balk, ook als die van maat verandert. */
.ctrl-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Main bar */
.ctrl-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(24, 24, 27, 0.88);
    backdrop-filter: blur(16px);
    border: 1px solid #ffffff42;
    border-radius: 999px;
    padding: 8px 10px;
}
.ctrl-btn {
    width: max(4vh,44px);
    height: max(4vh,44px);
    border-radius: 50%;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

/* display:flex hierboven wint anders van het hidden-attribuut */
.ctrl-btn[hidden], .ctrl-divider[hidden] { display: none; }

.ctrl-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: white; }
.ctrl-btn:disabled { opacity: 0.35; cursor: default; }
.ctrl-btn.active { color: #f08c00; }

.ctrl-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Afsluiten staat naast de balk in dezelfde vorm, maar rood: het is het enige wat je
   niet terugdraait, dus het staat er met zoveel woorden en niet tussen de bediening. */
.btn-end-quiz {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid #ffffff42;
    border-radius: 999px;
    background: #e50350f5;
    backdrop-filter: blur(16px);
    color: white;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
    align-self: center;
    aspect-ratio: 1;
}

.btn-end-quiz svg { 
    width: max(2vh, 24px); 
    height: max(2vh, 24px); 
    flex-shrink: 0;
}

.btn-end-quiz:hover { background: #e03131; }

.ctrl-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.12);
    margin: 0 4px;
    flex-shrink: 0;
}

/* De secundaire knoppen doen op een breed scherm alsof ze los in de balk staan;
   het smalle scherm (onderaan dit bestand) maakt er een paneel van. */
.ctrl-extra {
    display: contents;
}

/* De ...-knop bestaat alleen op smalle schermen */
.ctrl-bar .btn-more,
.ctrl-bar .ctrl-divider-more {
    display: none;
}

/* Join-kaartje: klein in de hoek, of schermvullend voor de hele zaal */
.join-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    background: rgba(0,0,0,0);
    transition: background 0.25s ease, opacity 0.25s ease;
    font-family: 'Inter', system-ui, sans-serif;
}

.join-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.join-overlay.hidden .join-badge {
    pointer-events: none;
}

.join-overlay.big {
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    pointer-events: all;
}

.join-badge {
    position: absolute;
    left: 24px;
    bottom: 24px;
    pointer-events: all;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 26px;
    border-radius: 22px;
    background: rgba(24,24,27,0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.16);
    color: white;
    transform-origin: left bottom;
    transition: left 0.35s cubic-bezier(0.22,1,0.36,1),
                bottom 0.35s cubic-bezier(0.22,1,0.36,1),
                transform 0.35s cubic-bezier(0.22,1,0.36,1),
                padding 0.35s ease, gap 0.35s ease;
}

.join-badge-qr {
    width: max(15vh, 150px);
    height: max(15vh, 150px);
    background: white;
    border-radius: 10px;
    padding: 6px;
    display: flex;
    transition: width 0.35s ease, height 0.35s ease;
}

.join-badge-qr svg {
    width: 100%;
    height: 100%;
}

.join-badge-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.1;
}

.join-badge-label {
    font-size: max(1.3vh, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f08c00;
}

.join-badge-url {
    font-size: max(2.4vh, 1.2rem);
    font-weight: 700;
    color: rgba(255,255,255,0.75);
}

.join-badge-pin {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.join-badge-pin .k {
    font-size: max(1.2vh, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.join-badge-pin .v {
    font-size: max(5vh, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: font-size 0.35s ease;
}

/* Vergroot-hint en kruisje naast elkaar rechtsboven in het kaartje */
.join-badge-tools {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -4px -10px 0 -8px;
}

/* Vergrootteken: maakt zichtbaar dat het kaartje aanklikbaar is */
.join-badge-zoom {
    flex: none;
    width: 20px;
    height: 20px;
    color: rgba(255,255,255,0.45);
    display: flex;
    transition: color 0.2s ease;
}

.join-badge:hover .join-badge-zoom {
    color: white;
}

.join-badge-zoom svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.join-badge-zoom .ico-shrink,
.join-overlay.big .join-badge-zoom .ico-grow {
    display: none;
}

.join-overlay.big .join-badge-zoom .ico-shrink {
    display: block;
}

.join-badge-close {
    align-self: flex-start;
    flex: none;
    width: 26px;
    height: 26px;
    padding: 4px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
}

.join-badge-close:hover {
    background: rgba(255,255,255,0.16);
    color: white;
}

.join-badge-close svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* Vergroot: gecentreerd, leesbaar tot achterin de zaal */
.join-overlay.big .join-badge {
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    transform-origin: center;
    gap: 48px;
    padding: 40px 48px;
    border-radius: 28px;
}

.join-overlay.big .join-badge-qr {
    width: min(42vh, 42vw);
    height: min(42vh, 42vw);
    padding: 12px;
    border-radius: 14px;
}

.join-overlay.big .join-badge-label { font-size: max(2vh, 1rem); }
.join-overlay.big .join-badge-url { font-size: max(4vh, 1.6rem); }
.join-overlay.big .join-badge-pin .k { font-size: max(1.8vh, 0.9rem); }
.join-overlay.big .join-badge-pin .v { font-size: max(9vh, 3rem); }

.confirm-save-results {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -12px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.confirm-save-results.hidden {
    display: none;
}

.confirm-save-results-input {
    accent-color: #f08c00;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ctrl-nav {
    position: relative;
}

.ctrl-page-num {
    font-size: max(16px, 1.2vh);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    padding: 6px 10px;
    white-space: nowrap;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.ctrl-page-num:hover { background: rgba(255,255,255,0.1); color: white; }
.ctrl-page-num.active { background: rgba(255,255,255,0.12); color: #f08c00; }

/* Vragenlade: opbouw komt van .drawer, hier alleen de scrollende lijst */
.nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.22) transparent;
    margin: 0 -6px;
    padding: 0 6px;
}

.nav-list::-webkit-scrollbar {
    width: 8px;
}

.nav-list::-webkit-scrollbar-track {
    background: transparent;
}

.nav-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.nav-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.4);
    background-clip: content-box;
}

.nav-row {
    display: grid;
    grid-template-columns: calc(1.75 * var(--drawer-u)) 1fr;
    align-items: baseline;
    gap: calc(0.25 * var(--drawer-u)) calc(0.625 * var(--drawer-u));
    padding: calc(0.5625 * var(--drawer-u)) calc(0.75 * var(--drawer-u));
    border-radius: calc(0.625 * var(--drawer-u));
    cursor: pointer;
    color: rgba(255,255,255,0.82);
    transition: background 0.12s;
}

.nav-row:hover { background: rgba(255,255,255,0.07); }
.nav-row.locked { opacity: 0.35; cursor: default; }
.nav-row.locked:hover { background: none; }
.nav-row.past { color: rgba(255,255,255,0.42); }
.nav-row.now {
    background: rgba(240,140,0,0.14);
    color: white;
}

.nav-row.skipped .nav-title {
    text-decoration: line-through;
    color: rgba(255,255,255,0.35);
}

.nav-no {
    font-size: calc(0.8 * var(--drawer-u));
    font-weight: 700;
    text-align: right;
    color: rgba(255,255,255,0.4);
}

.nav-row.now .nav-no { color: #f08c00; }

.nav-title {
    font-size: calc(0.95 * var(--drawer-u));
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-steps {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.25 * var(--drawer-u));
}

.nav-step {
    font-size: calc(0.7 * var(--drawer-u));
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: calc(0.1875 * var(--drawer-u)) calc(0.5 * var(--drawer-u));
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.nav-step:hover { background: rgba(255,255,255,0.18); color: white; }

.nav-step.now {
    background: #f08c00;
    color: #18181b;
}

/* Wel gepasseerd maar nooit in beeld geweest */
.nav-step.skipped {
    background: transparent;
    color: rgba(255,255,255,0.3);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
    text-decoration: line-through;
}

.settings-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* ---- Lades ----------------------------------------------------------------
   Vaste panelen aan de linkerkant, naast de slide in plaats van eroverheen: de
   vragennavigatie en het puntenpaneel. Er kan er maar één tegelijk open, zodat
   de slide met één breedte hoeft te rekenen (body.drawer-open). */
:root {
    /* Eén maat waar de hele lade van afhangt. Tot en met 1080p is dit 16px -
       precies de oude rem, dus daar verandert er niets - en daarboven groeit
       hij mee met het scherm, net als de knoppen in de bedieningsbalk.
       De binnenmaten staan als calc(x * var(--drawer-u)) en bewust niet in em:
       een eigen font-size op een knop of invulveld zou anders de maten
       eromheen nog eens vermenigvuldigen. */
    --drawer-u: clamp(16px, 1.5vmin, 26px);
    --drawer-w: min(calc(26.25 * var(--drawer-u)), 34vw);
}

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    width: var(--drawer-w);
    height: 100dvh;
    box-sizing: border-box;
    background: rgba(24,24,27,0.96);
    backdrop-filter: blur(16px);
    border-right: 1.5px solid rgba(255,255,255,0.1);
    padding: calc(1 * var(--drawer-u)) calc(1.125 * var(--drawer-u));
    display: flex;
    flex-direction: column;
    gap: calc(0.75 * var(--drawer-u));
    font-size: var(--drawer-u);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    color: rgba(255,255,255,0.82);
    font-family: 'Inter', system-ui, sans-serif;
}

.drawer.open {
    transform: translateX(0);
}

/* De slide schuift op en krijgt de resterende ruimte; scaleSlide() meet .present
   en schaalt mee zolang deze transitie loopt (zie drawer_scale_slide) */
body.drawer-open .present {
    width: calc(100% - var(--drawer-w));
    margin-left: var(--drawer-w);
}

/* opacity staat hierboven al op .present; hier meegenomen zodat de fade tussen
   slides niet wegvalt */
.present {
    transition: opacity 0.15s ease,
                width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bedieningsbalk boven de slide houden, niet half onder de lade */
body.drawer-open .ctrl-wrap {
    left: calc(50% + var(--drawer-w) / 2);
}

/* Het join-kaartje staat linksonder, dus precies waar de lade openschuift */
body.drawer-open .join-badge {
    left: calc(24px + var(--drawer-w));
}

.drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(0.75 * var(--drawer-u));
}

.drawer-title {
    font-size: calc(0.78 * var(--drawer-u));
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.drawer-close {
    width: calc(1.875 * var(--drawer-u));
    height: calc(1.875 * var(--drawer-u));
    padding: calc(0.375 * var(--drawer-u));
    border: none;
    border-radius: 50%;
    background: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.drawer-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drawer-close:hover { background: rgba(255,255,255,0.12); color: white; }

.numimg .num-answers .text {
  opacity: 0;
}

/* Video's */
/* De dekplaat over de titel zit in de speler zelf, dus hij klopt overal even
   goed: in het beeldvak van een vraag én in een los element op een slide. */
.video-canvas .notitle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15%;
    backdrop-filter: blur(16px);
}

/* De speler buiten beeld telt niet mee: dan geldt de gewone afbeeldingsopmaak
   voor de thumbnail die ervoor in de plaats komt. */
.image-slot:has(.video-canvas:not(.video-offscreen)) {
    display: block;
}
.video-canvas {
    display: grid;
    /* houdt de speler binnen de afgeronde hoeken van de vormgeving */
    overflow: hidden;
    /* ankerpunt voor de dekplaat over de titel */
    position: relative;
}
.image-slot .video-canvas {
    margin: 0 auto;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    justify-self: center;
    align-self: center;
    height: 100%;
}
/* In een losse slide bepaalt het element de maat: de speler vult hem helemaal,
   de vormgeving (marge, rand) trekt dat inline weer bij. */
.slide-element .video-canvas {
    width: 100%;
    height: 100%;
}
/* "Video verbergen" met een eigen thumbnail: de speler staat buiten beeld en
   buiten de opmaak — alleen het geluid komt door. De thumbnail staat als gewone
   afbeelding in de slide. */
.video-canvas.video-offscreen {
    position: fixed;
    left: -200vw;
    top: 0;
    width: 16vw;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;
}

/* "Video verbergen" zonder thumbnail: alleen de speler zelf wordt geblurd, de
   kaders van de vormgeving blijven scherp. De schaal voorkomt zachte randen. */
.video-canvas.video-blurred > * {
    filter: blur(8px);
    pointer-events: none;
}

/* de YouTube-speler zit sinds de vormgeving in een eigen laagje in .video-canvas */
.slide-element .video-canvas > iframe,
.image-slot .video-canvas > iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}



/* ── Announce screen ─────────────────────────────────────────────── */

/* .circle-timer {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
} */

/* .timer-ring {
    width: 100%;
    height: 100%;
} */

/* .ring-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.12);
    stroke-width: 6;
} */

/* .ring-fill {
    fill: none;
    stroke: var(--bg_question, #f08c00);
    stroke-width: 6;
    stroke-dasharray: 220;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    transform-origin: 40px 40px;
    transform: rotate(-90deg);
} */

/* ── Announce animations ─────────────────────────────────────────── */

/* De opbouw loopt mee met de leesrichting van de slide: eerst de meta
   (welke vraag, hoeveel punten), daarna pas de vraag zelf. */
.view.announce .question {
    animation: wipe-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
    clip-path: inset(0 100% 0 0);
}

@keyframes wipe-in {
    to { clip-path: inset(0 0% 0 0); }
}

.view.announce .meta {
    opacity: 0;
    transform: translateY(-20px);
    animation: meta-in 0.35s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes meta-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Connection warning ──────────────────────────────────────────── */

.conn-warning {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(24, 24, 27, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(240, 140, 0, 0.5);
    border-radius: 999px;
    padding: 10px 20px;
    color: rgba(255, 196, 110, 0.95);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.conn-warning.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(-6px);
}

.conn-warning svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Pause banner ─────────────────────────────────────────────────── */

.pause-banner,
.audio-banner {
    position: fixed;
    top: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(24, 24, 27, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 10px 20px;
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pause-banner.visible,
.audio-banner.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(6px);
}

body.hint-open .pause-banner.visible,
body.hint-open .audio-banner.visible {
    transform: translateX(-50%) translateY(calc(100vh - 100% - 64px));
}

.pause-banner svg,
.audio-banner svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
}

/* ── End screen ──────────────────────────────────────────────────── */

.view.endscreen {
    display: grid;
    place-items: center;
    color: var(--co_question);
}

.view.endscreen .es-title {
    font-family: var(--font_question);
    font-size: 120pt;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow:
        0 1pt 3pt color-mix(in srgb, var(--es-title-shadow, #000000) 22%, transparent),
        0 3pt 14pt color-mix(in srgb, var(--es-title-shadow, #000000) 28%, transparent);
    opacity: 0;
    transform: scale(0.92);
    animation: es-in 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s forwards;
}

@keyframes es-in {
    to { opacity: 1; transform: scale(1); }
}

/* ── Video vrijgeven (Safari) ─────────────────────────────────────
   Systeemslide, geen quizinhoud: eigen chrome-stijl (Inter, inkt,
   accent-loos) i.p.v. het quizthema. Maten in px op het
   1600x900-canvas van .slide. */

.slide.enablevideo {
    place-content: center;
    justify-items: center;
    background: #fffdf9;
    font-family: 'Inter', system-ui, sans-serif;
    color: #18181b;
}

.slide.enablevideo .ev-inner {
    display: grid;
    justify-items: center;
    text-align: center;
    row-gap: 28px;
}

.slide.enablevideo .ev-sub {
    font-size: 30px;
    line-height: 1.5;
    margin: 0;
    max-width: 900px;
}

/* Plate-frame om de speler, zoals de screenshotframes op de landing. */
.slide.enablevideo .ev-plate {
    background: #ffffff;
    border: 1px solid #e9e7e2;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(24, 24, 27, 0.12);
    line-height: 0;
}

/* De YT-speler vervangt .video door een iframe, dus op het frame stylen. */
.slide.enablevideo .ev-plate > * {
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

/* Staat altijd in de flow (alleen onzichtbaar), zodat de slide niet
   verspringt zodra het gelukt is. */
.slide.enablevideo .succes {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 600;
    color: #15803d;
    opacity: 0;
    transform: translateY(8px);
}

.slide.enablevideo .succes.show {
    animation: succes-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.slide.enablevideo .ev-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #15803d;
    flex-shrink: 0;
    position: relative;
}

.slide.enablevideo .ev-check::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

@keyframes succes-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Demo-telefoon (?demo) ────────────────────────────────────────── */
/* Kolom rechts naast de slide, het spiegelbeeld van de lades links. De slide
   wordt smaller (body.demo-open) en scaleSlide() schaalt mee. Zonder bewaarde
   breedte past de kolom om een telefoon van 76vh hoog met 3vh marge; erboven
   staat dat dit een demo is, eronder hoe je op een echte telefoon meedoet.
   Maten in cqw: alles schaalt mee met de breedte van de telefoon, in de
   verhoudingen van een iPhone 15 Pro (71,5 × 146,5 mm, scherm 393 × 852 pt). */
:root {
    --demo-w: calc(76vh * 71.5 / 146.5 + 6vh);
}

body.demo-open .present {
    width: calc(100% - var(--demo-w));
}
body.drawer-open.demo-open .present {
    width: calc(100% - var(--drawer-w) - var(--demo-w));
}
body.demo-open .ctrl-wrap {
    left: calc(50% - var(--demo-w) / 2);
}

/* De slide als groot scherm: een tv-rand op hetzelfde donkere vlak als de
   telefoonkolom, zodat beamer en speler samen één beeld zijn. De padding
   houdt ruimte vrij voor de teksten erboven en de rand; scaleSlide() trekt
   hem af en slide_canvas() houdt het beeld op 16:9. De teksten zet
   demo_phone() in --demo-tv-title en --demo-tv-caption, zodat ze vertaalbaar
   zijn. De inhoud van .present wordt per slide vervangen, dus de teksten zijn
   pseudo-elementen op de wrapper, die precies zo groot is als de geschaalde
   slide. */
body.demo-open .present {
    padding: 11vh 5vh 5vh;
    background-color: #18181b;
}
body.demo-open .present .wrapper {
    position: relative;
    border-radius: 2px;
    box-shadow:
        0 0 0 1.1vh #050506,
        0 0 0 calc(1.1vh + 1px) #3f3f46,
        0 0 0 calc(1.1vh + 3px) #1c1c1f,
        0 5vh 9vh rgba(0,0,0,0.6);
}
/* Links, want in het midden zweeft de controlbar. Zelfde stijl als de teksten
   bij de telefoon. */
body.demo-open .present .wrapper::before,
body.demo-open .present .wrapper::after {
    position: absolute;
    left: 0;
    white-space: nowrap;
    font: 500 max(1.5vh, 12px)/1.3 Inter, system-ui, sans-serif;
}
body.demo-open .present .wrapper::after {
    content: var(--demo-tv-caption, '');
    bottom: calc(100% + 1.1vh + 3px + 2vh);
    color: rgba(255,255,255,0.55);
}
body.demo-open .present .wrapper::before {
    content: var(--demo-tv-title, '');
    bottom: calc(100% + 1.1vh + 3px + 2vh + max(1.5vh, 12px) * 1.3 + 0.5vh);
    font-size: max(1.9vh, 14px);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
body.demo-bare .present .wrapper::before,
body.demo-bare .present .wrapper::after {
    display: none;
}
body.drawer-open.demo-open .ctrl-wrap {
    left: calc(50% + (var(--drawer-w) - var(--demo-w)) / 2);
}

/* Onder de controlbar (100), zodat die er nooit achter verdwijnt */
.demo-phone {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: var(--demo-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5vh;
    background: #18181b;
}
.demo-phone.hidden { display: none; }
.demo-phone.dragging { cursor: ew-resize; }
/* Tijdens het trekken mag de iframe de muis niet afpakken */
.demo-phone.dragging iframe { pointer-events: none; }

.demo-phone-device {
    position: relative;
    width: min(calc(100% - 6vh), calc(76vh * 71.5 / 146.5));
    aspect-ratio: 71.5 / 146.5;
    container-type: inline-size;
}

.demo-phone-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vh;
    padding: 0 3vh;
    text-align: center;
    font: 500 max(1.5vh, 12px)/1.3 Inter, system-ui, sans-serif;
    color: rgba(255,255,255,0.55);
}
.demo-phone-caption strong {
    font-size: max(1.9vh, 14px);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
/* H: zonder teksten voor een opname. De telefoon mag dan de hele hoogte in
   (94vh met 3vh marge) en de kolom wordt even breed mee, tenzij je zelf een
   breedte hebt getrokken: die staat inline op body en wint */
body.demo-bare {
    --demo-w: calc(94vh * 71.5 / 146.5 + 6vh);
}
body.demo-bare .demo-phone-caption {
    display: none;
}
body.demo-bare .demo-phone-device {
    width: min(calc(100% - 6vh), calc(94vh * 71.5 / 146.5));
}
.demo-phone-caption a {
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.demo-phone-real strong {
    font-size: inherit;
    letter-spacing: 0.05em;
}
.demo-phone-caption kbd {
    font: inherit;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
    border-radius: 4px;
    padding: 0.1em 0.45em;
}

/* Linkerrand om breder of smaller te trekken; de streep pas bij hover, zodat
   hij niet in een opname staat */
.demo-phone-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    cursor: ew-resize;
    touch-action: none;
}
.demo-phone-resize::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: rgba(255,255,255,0.35);
    opacity: 0;
    transition: opacity .15s;
}
.demo-phone-resize:hover::after,
.demo-phone.dragging .demo-phone-resize::after {
    opacity: 1;
}

/* Titanium rand met daarbinnen de zwarte bezel */
.demo-phone-body {
    position: absolute;
    inset: 0;
    padding: 3.2cqw;
    border-radius: 14.5cqw;
    background: #0b0b0c;
    box-shadow:
        inset 0 0 0 0.9cqw #7d7a75,
        inset 0 0 0 1.2cqw #4a4845,
        0 3cqw 10cqw rgba(0,0,0,0.55);
}
/* Knoppen: links actieknop en twee volumeknoppen (één strook, de gaten zitten in
   de gradient), rechts aan/uit */
.demo-phone-body::before,
.demo-phone-body::after {
    content: '';
    position: absolute;
    width: 1cqw;
}
.demo-phone-body::before {
    left: -0.8cqw;
    top: 26cqw;
    height: 44cqw;
    background: linear-gradient(#6d6a66 0 8cqw, transparent 8cqw 14cqw, #6d6a66 14cqw 27cqw, transparent 27cqw 31cqw, #6d6a66 31cqw);
}
.demo-phone-body::after {
    right: -0.8cqw;
    top: 42cqw;
    height: 21cqw;
    border-radius: 0 0.6cqw 0.6cqw 0;
    background: #6d6a66;
}

.demo-phone-screen {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 11.3cqw;
    background: #f3f0e8; /* --bg van de telefoon-app */
}

.demo-phone-status {
    position: relative;
    flex: none;
    height: 13cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7cqw 0 10cqw;
    color: #18181b;
}
.demo-phone-time {
    font: 600 4.4cqw/1 Inter, system-ui, sans-serif;
    letter-spacing: -0.02em;
}
.demo-phone-icons {
    display: flex;
    align-items: center;
    gap: 1.4cqw;
}
.demo-phone-icons svg {
    height: 3cqw;
    fill: currentColor;
}
.demo-phone-battery {
    position: relative;
    width: 6.4cqw;
    height: 3.1cqw;
    border: 0.3cqw solid rgba(24,24,27,0.4);
    border-radius: 1cqw;
    box-shadow: inset 0 0 0 0.35cqw #f3f0e8;
    background: currentColor;
}
.demo-phone-battery::after {
    content: '';
    position: absolute;
    right: -1cqw;
    top: 50%;
    width: 0.5cqw;
    height: 1.2cqw;
    transform: translateY(-50%);
    border-radius: 0 0.4cqw 0.4cqw 0;
    background: rgba(24,24,27,0.4);
}

.demo-phone-view {
    position: relative;
    flex: 1;
    overflow: hidden;
}
/* Hoogte en schaal zet demo_phone() */
.demo-phone iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 393px;
    border: 0;
    transform-origin: 0 0;
    background: #f3f0e8;
}

/* Adresbalk onderin, zoals Safari op iOS; de ruimte eronder is voor de home-balk */
.demo-phone-bar {
    flex: none;
    padding: 2.4cqw 4cqw 7cqw;
    border-top: 0.25cqw solid rgba(24,24,27,0.08);
    background: #f3f0e8;
}
.demo-phone-url {
    position: relative;
    height: 11cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5.5cqw;
    background: #fff;
    box-shadow: 0 0.4cqw 1.6cqw rgba(0,0,0,0.08);
    font: 500 3.9cqw/1 Inter, system-ui, sans-serif;
    color: #18181b;
}
.demo-phone-url svg {
    position: absolute;
    right: 4.4cqw;
    height: 4cqw;
    fill: currentColor;
}

.demo-phone-home {
    position: absolute;
    left: 50%;
    bottom: 2cqw;
    width: 35cqw;
    height: 1.3cqw;
    transform: translateX(-50%);
    border-radius: 1cqw;
    background: #18181b;
    pointer-events: none;
}

/* ── Replay ───────────────────────────────────────────────────────── */

.replay-badge {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(24, 24, 27, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.replay-empty {
    padding: 16px 0;
}
.replay-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f08c00;
    flex-shrink: 0;
}
.replay-rows {
    display: grid;
    gap: 12px;
    padding: 16px 0;
    max-height: 50vh;
    overflow-y: auto;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.replay-rows::-webkit-scrollbar {
    width: 6px;
}

.replay-rows::-webkit-scrollbar-track {
    background: transparent;
}

.replay-rows::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.replay-rows::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}
.replay-exit {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 12px;
}

.replay-exit:hover { color: #fff; }

.replay-picker {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #18181b;
    font-family: 'Inter', system-ui, sans-serif;
    overflow-y: auto;
}

.replay-card {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
}

.replay-card h2 {
    margin: 0 0 6px;
    font-size: 1.4rem;
    font-weight: 700;
}

.replay-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}
.replay-card p.replay-empty  {
    color:#FF9800;
}

.replay-note {
    font-size: 0.85rem;
}

.replay-row {
    display: flex;
    text-transform: none;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    background: none;
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.replay-row:hover {
    border-color: #f08c00;
    background: rgba(240, 140, 0, 0.08);
}

.replay-title { font-weight: 700; }

.replay-meta {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.replay-btn {
    align-self: flex-start;
    margin-top: 8px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.replay-btn:hover {
    border-color: #f08c00;
    background: rgba(240, 140, 0, 0.08);
    color: #fff;
}

/* ============================================================
   Lader bij het starten
   Zolang de api's, geluiden en afbeeldingen voorgeladen worden staat het
   scherm nog leeg. Een klein rondje met een woordje eronder, midden op het
   scherm - genoeg om te laten zien dat er iets gebeurt, zonder show.
   ============================================================ */
.present-loader {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Alles schaalt met het scherm mee: presenteren gebeurt op een beamer of
       groot tv-scherm, en daar verdwijnt een vaste 34px-ring in het niets. */
    gap: clamp(12px, 1.6vmin, 32px);
    background: #0b0b0d;
    font-family: 'Inter', system-ui, sans-serif;
    transition: opacity 0.35s ease;
}

.present-loader.weg {
    opacity: 0;
    pointer-events: none;
}

.present-loader .ring {
    width: clamp(34px, 4.5vmin, 88px);
    height: clamp(34px, 4.5vmin, 88px);
    border-radius: 50%;
    border: clamp(3px, 0.45vmin, 8px) solid rgba(255,255,255,0.15);
    border-top-color: #f08c00;
    animation: present-loader-spin 0.8s linear infinite;
}

.present-loader .label {
    font-size: clamp(13px, 1.5vmin, 28px);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.55);
}

@keyframes present-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .present-loader .ring {
        animation-duration: 2.4s;
    }
}


/* ============================================================
   Smal scherm (telefoon)
   De balk telt negen knoppen; die passen naast elkaar niet op een
   telefoon en vielen links en rechts buiten beeld. Hier blijft alleen
   de bediening staan die je tijdens het spelen echt nodig hebt
   (vorige - vraagnummer - volgende - pauze), de rest komt achter de
   ...-knop. En de balk gaat naar onderen, binnen bereik van de duim.
   ============================================================ */

@media (max-width: 700px) {

    .ctrl-wrap {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        /* panelen boven de balk in plaats van eronder */
        flex-direction: column;
        gap: 10px;
        max-width: 100vw;
    }

    /* De hint staat bovenin de slide en de balk staat hier al onderaan: die
       hoeft dus niet meer opzij te gaan (op een breed scherm wel, zie boven). */
    body.hint-open .ctrl-wrap {
        transform: translateX(-50%);
    }

    /* De lade beslaat op deze breedte zowat het hele scherm; de balk dan niet
       ook nog opzij schuiven, want dan valt hij er alsnog naast */
    body.drawer-open .ctrl-wrap {
        left: 50%;
    }

    .ctrl-bar {
        position: relative;
        gap: 2px;
        padding: 6px 8px;
    }

    .ctrl-btn {
        width: 40px;
        height: 40px;
    }

    .btn-end-quiz {
        padding: 0 12px;
        font-size: 12px;
        gap: 6px;
    }

    .btn-end-quiz svg { width: 15px; height: 15px; }

    /* Balk plus knop passen naast elkaar niet altijd op één regel */
    .ctrl-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .ctrl-bar > .ctrl-divider {
        margin: 0 2px;
    }

    .ctrl-page-num {
        font-size: 15px;
        padding: 6px 8px;
    }

    /* Van doorzichtige groep naar zwevend paneel boven de balk */
    .ctrl-extra {
        display: none;
        position: absolute;
        bottom: calc(100% + 10px);
        right: 0;
        align-items: center;
        gap: 2px;
        background: rgba(24,24,27,0.92);
        backdrop-filter: blur(16px);
        border: 1px solid #ffffff42;
        border-radius: 999px;
        padding: 6px 8px;
    }

    .ctrl-extra.open {
        display: flex;
    }

    /* In het paneel scheiden de knoppen zichzelf al */
    .ctrl-extra .ctrl-divider {
        display: none;
    }

    .ctrl-bar .btn-more {
        display: flex;
    }

    .ctrl-bar .ctrl-divider-more {
        display: block;
    }

    /* Het settingspaneel is op deze breedte breder dan het scherm */
    .settings-panel {
        min-width: 0;
        width: calc(100vw - 32px);
        max-width: 340px;
        padding: 16px 20px;
    }

    .s-row {
        gap: 12px;
    }
}

/* Meldingsvenster in de stijl van confirm_modal uit de editor (zie editor.css):
   inktzwarte kaart op een donkere sluier. Hier alleen gebruikt voor de melding
   "niet ingelogd" bij het laden van een quiz via de ?quiz=-parameter. */
.modal.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(24, 24, 27, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 0 16px;
    display: grid;
    align-items: center;
    animation: confirm-veil-in 0.14s ease-out;
}

.modal.confirm-modal .modal-content {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto minmax(0, auto) auto;
    background-color: #18181b;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 120px);
    color: #fafafa;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 2px rgba(24, 24, 27, 0.2),
        0 24px 60px -12px rgba(24, 24, 27, 0.55);
    animation: confirm-card-in 0.16s ease-out;
}

@keyframes confirm-veil-in {
    from { opacity: 0; }
}
@keyframes confirm-card-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
    .modal.confirm-modal,
    .modal.confirm-modal .modal-content {
        animation: none;
    }
}

.modal.confirm-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 16px 0;
}

.modal.confirm-modal .modal-title h2 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: #fafafa;
    margin: 0;
}

.modal.confirm-modal .modal-header .close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #a1a1aa;
    padding: 4px;
    margin: -4px -4px 0 0;
    border-radius: 6px;
    cursor: pointer;
}
@media (hover: hover) {
    .modal.confirm-modal .modal-header .close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fafafa;
    }
}
.modal.confirm-modal .modal-header .close:active {
    background: rgba(255, 255, 255, 0.16);
    color: #fafafa;
}
.modal.confirm-modal .modal-header .close:focus-visible {
    outline: 2px solid #fafafa;
    outline-offset: 2px;
}

.modal.confirm-modal .modal-main {
    padding: 8px 16px 4px;
    overflow-y: auto;
}
.modal.confirm-modal .confirm-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #a1a1aa;
}

/* De opslaan-checkbox stond in het oude venster onder de tekst, met een
   negatieve margin om dichter tegen de knoppen aan te kruipen. Hier staat hij
   los in modal-main, dus gewoon op zijn plek laten staan. */
.modal.confirm-modal .confirm-save-results {
    margin-top: 0;
}

.modal.confirm-modal .bottom-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 16px;
}

.modal.confirm-modal .bottom-buttons button {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
}

.modal.confirm-modal .bottom-buttons .cancel {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e4e4e7;
}

.modal.confirm-modal .bottom-buttons .submit {
    background-color: #fafafa;
    border: 1px solid #fafafa;
    color: #18181b;
}

@media (hover: hover) {
    .modal.confirm-modal .bottom-buttons .cancel:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.28);
    }
    .modal.confirm-modal .bottom-buttons .submit:hover {
        background-color: #fff;
        border-color: #fff;
    }
}

.modal.confirm-modal .bottom-buttons .cancel:active {
    background-color: rgba(255, 255, 255, 0.16);
}
.modal.confirm-modal .bottom-buttons .submit:active {
    background-color: #e4e4e7;
    border-color: #e4e4e7;
}

.modal.confirm-modal .bottom-buttons button:focus-visible {
    outline: 2px solid #fafafa;
    outline-offset: 3px;
}

/* ============================================================
   Presenterview (presenter.js) — het tweede venster voor de host.
   Zelfde chrome als de lades: inkt, wit op transparant, accent amber.
   ============================================================ */

/* Staat de presenterview open, dan bedient de host vanaf de laptop en ziet de zaal
   geen balk, ook niet als de muis op het grote scherm beweegt */
body.presenter-open .ctrl-wrap { display: none; }

body.pv-body {
    --drawer-u: 15px;
    margin: 0;
    height: 100vh;
    background: #18181b;
    color: rgba(255,255,255,0.82);
    font-family: 'Inter', system-ui, sans-serif;
}

.pv {
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
}

.pv-main {
    display: grid;
    grid-template-columns: 240px 1fr 340px;
    gap: 16px;
    padding: 16px 16px 0;
    min-height: 0;
}

.pv-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pv-timeline,
.pv-stage,
.pv-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pv-side { gap: 12px; overflow-y: auto; }

/* De kopie van het grote scherm en het volgende scherm: vaste maat, verkleind en
   gecentreerd door presenter_scale(). Klikken doet er niets. */
.pv-now,
.pv-upcoming {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    pointer-events: none;
}

.pv-now {
    flex: 1;
    min-height: 0;
}

.pv-upcoming {
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
    background: #000;
    border-radius: 8px;
}

.pv-upcoming[hidden] { display: none; }

.pv-body .pv-present {
    position: absolute;
    transform-origin: top left;
    transition: none;
}

/* Het puntenpaneel (de lade uit score_management) staat hier boven de onderbalk:
   vorige en volgende moeten bereikbaar blijven terwijl je corrigeert */
.pv-body .drawer {
    height: auto;
    bottom: 72px;
    border-bottom: 1.5px solid rgba(255,255,255,0.1);
    border-bottom-right-radius: 12px;
}

/* Hier tekent de presenterview het volgende scherm (scaleSlide meet deze maat).
   Breder en hoger dan 1600x900 om de 16px marge die scaleSlide eraf haalt. */
.pv-render {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 1616px;
    height: 916px;
    visibility: hidden;
    pointer-events: none;
}

.pv-media {
    width: 100%;
    height: 100%;
    background: #000;
    display: grid;
    place-items: center;
}

.pv-media svg { width: 120px; fill: rgba(255,255,255,0.5); }

.pv-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 14px;
}

.pv-card[hidden] { display: none; }

.pv-chip {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.75);
}

.pv-chip:empty { display: none; }

.pv-next-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: white;
}

.pv-answer { border-color: rgba(240,140,0,0.35); }

.pv-answer-list {
    margin: 0;
    padding-left: 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: white;
}

.pv-answer-list li::marker { color: #f08c00; font-size: 12px; }

.pv-count { color: #f08c00; letter-spacing: 0; }

.pv-player-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pv-player-list li {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
}

.pv-player-list li.done {
    background: rgba(240,140,0,0.18);
    color: white;
}

.pv-player-list li.done::before { content: '✓ '; color: #f08c00; }
.pv-player-list li.away { opacity: 0.4; }

.pv-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.pv-btn {
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    font: 600 15px 'Inter', system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.pv-btn[hidden] { display: none; }
.pv-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); }
.pv-btn:disabled { opacity: 0.35; cursor: default; }
.pv-btn.active { color: #f08c00; border-color: rgba(240,140,0,0.5); }
.pv-sound .pv-sound-on,
.pv-sound.on .pv-sound-off { display: none; }
.pv-sound.on .pv-sound-on { display: block; }
.pv-sound:not(.on) { color: rgba(255,255,255,0.45); }
.pv-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Volgende is wat je de hele avond indrukt: de grote, lichte knop */
.pv-next-btn {
    padding: 0 22px 0 26px;
    background: #fafafa;
    border-color: #fafafa;
    color: #18181b;
}

.pv-next-btn:hover:not(:disabled) { background: #fff; }

.pv-page {
    min-width: 72px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pv-sb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding-left: 20px;
    border-left: 1px solid rgba(255,255,255,0.12);
}

.pv-sb[hidden] { display: none; }

.pv-sb-label {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.pv-bar-extra {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pv-clock {
    margin-left: 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.55);
}

.pv-lost {
    height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    box-sizing: border-box;
    text-align: center;
    font: 600 16px/1.5 'Inter', system-ui, sans-serif;
    color: rgba(255,255,255,0.7);
    background: #18181b;
}

/* Smal venster: de tijdlijn eraf, de slide en de zijkolom houden de ruimte */
@media (max-width: 960px) {
    .pv-main { grid-template-columns: 1fr 280px; }
    .pv-timeline { display: none; }
}