/* ============================================================================ */
/* === Main setup quiz container
/* ============================================================================ */
#quizbody { margin: 0; z-index: 99999; font-family: Arial,sans-serif; min-height: 100vh; position: relative; color: #fff; background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; overflow-x: hidden }
@media(max-width:768px) {
    #quizContent { margin-top: calc(env(safe-area-inset-top,0px) + 24px); }
}
#quizOverlay { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: multiply }
#quizModal { width: 100%; max-width: 800px; box-sizing: border-box; padding: 20px; background: transparent; position: relative; z-index: 1 }

/* === MOBIEL FIXES === */
@media(max-width:600px) {
    #quizbody { height: auto; overflow: auto }
    #quizOverlay { align-items: flex-start; padding-top: 20px; overflow-y: auto }
}
#quizProgress { font-size: 0.95rem; font-weight: bold; color: #eee; margin-bottom: 8px; text-align: center; opacity: 0.85; }

/* ============================================================================ */
/* === Close & report button
/* ============================================================================ */
#closeIcon { position: absolute; top: 10px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.4); color: #fff; cursor: pointer; z-index: 1000; padding: 0; }
#closeIcon:hover { background: rgba(0,0,0,0.55); }
#closeIcon:focus { outline: 2px solid rgba(255,255,255,0.75); outline-offset: 2px; }
#closeIcon svg { width: 22px; height: 22px; pointer-events: none; display: block; }
@media(max-width:768px) {
    #closeIcon { width: 38px; height: 38px; right: 10px; }
    #closeIcon svg { width: 20px; height: 20px; }
}
#reportWrapper { position: fixed; z-index: 1002; }
#reportBtn { width: 40px; height: 40px; background: rgba(255,255,255,0.3); border: none; border-radius: 50%; color: #fff; font-size: 20px; text-align: center; line-height: 40px; cursor: pointer; z-index: 1003; }
.popupreportmenu { position: absolute; background: #fff; color: #000; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); min-width: 240px; max-width: 90vw; max-height: 250px; overflow-y: auto; padding: 0; display: flex; flex-direction: column; z-index: 1004; }

/* === Menu opties === */
.report-option { padding: 12px 16px; font-size: 1em; cursor: pointer; border-bottom: 1px solid #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-option:last-child { border-bottom: none; }
.report-option:hover { background: #f0f0f0; }
.cancel-option { color: #d9534f; font-weight: bold; text-align: center; }

/* === Mobile layout: linksboven, menu eronder === */
@media (max-width: 768px) {
    #reportWrapper { top: 10px; left: 10px; }
    .popupreportmenu { top: 45px; left: 0; }
}

/* === Desktop layout: linksonder, menu erboven === */
@media (min-width: 769px) {
    #reportWrapper { bottom: 20px; left: 20px; }
    .popupreportmenu { bottom: 50px; left: 0; }
}


/* ============================================================================ */
/* === Image & video container
/* ============================================================================ */
#imageContainer, #videoContainer { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; display: none; position: relative; z-index: 0 }
#imageContainer img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 8px 8px 0 0; display: block }
#videoContainer iframe { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%,-50%); border: none; border-radius: 8px 8px 0 0 }

/* ============================================================================ */
/* === Title & description
/* ============================================================================ */
#questionBubble { background: #fff; color: #283e51; padding: 20px; font-size: 1.6rem; font-weight: bold; margin: 0 0 20px 0; border-radius: 8px; z-index: 0 }
@media(max-width:768px) {
    #questionBubble { font-size: 1.2rem; padding: 10px 20px }
}
.question-desc { font-size: 1rem; font-weight: normal; color: #555; margin-top: 8px }
.question-external a { color: #007bff; text-decoration: underline; font-weight: 500; font-size: 0.8em; }

/* ============================================================================ */
/* === Poll options
/* ============================================================================ */
#options { display: grid; }
#options.image-layout { display: grid }
@media(min-width:992px) {
    #options.image-layout { grid-template-columns: repeat(2,1fr) }
}
@media(max-width:991px) {
    #options.image-layout { grid-template-columns: 1fr }
}
#options.text-layout { grid-template-columns: repeat(2,1fr) }
#options.single-column { grid-template-columns: 1fr }
.option { background: #fff; color: #283e51; border-radius: 10px; padding: 12px 20px; margin: 10px 0; display: flex; align-items: center; cursor: pointer; position: relative; font-size: 1.2rem; border: 3px solid transparent; transform: translateX(50%); opacity: 0; transition: transform .8s ease,opacity .8s ease; z-index: 0; padding-right: 45px; }
@media(max-width:768px) {
    .option { font-size: 1rem; margin-bottom: 0 !important }
}
#options .pollitem { transform: translateX(50%); opacity: 0; transition: transform .8s ease, opacity .8s ease; }
#options .pollitem.slide-in { transform: translateX(0); opacity: 1; }


/* Gekozen optie (werkt voor zowel legacy .option als nieuwe .pollitem) */
#options .pollitem.selected,
#options .option.selected { border: solid 2px #005f99; background: #a3d1ff; }

/* Tekstkleur bij selectie */
#options .pollitem.selected .polltext,
#options .option.selected .option-text { color: #0f2d44; }

#options .polltext > div { white-space: pre-line }


/* Disabled state na resultaten */
#options .pollitem.disabled,
#options .option.disabled { opacity: 0.85; pointer-events: none; }

.option-label { width: 36px; height: 36px; border-radius: 50%; background: #f2b134; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem }
.option-text { margin-left: 10px }

.option-image { width: 100%; height: auto; object-fit: cover; border-radius: 12px; margin-bottom: 10px; display: block }
.option.image-option { flex-direction: column; align-items: stretch; border-radius: 12px; padding: 15px; background: #fff; color: #283e51; text-align: left }
.option.image-option .option-meta { display: flex; align-items: center; gap: 10px }
.option.image-option .option-label { margin: 0 }
.option.image-option.slide-in { transform: translateY(0); opacity: 1 }
@media(min-width:992px) {
    .option.image-option { max-width: 100% }
}

/* === STEMMEN & ANIMATIES === */
.vote-count { position: absolute; font-weight: bold; font-size: 16px; color: #333; right: 10px; }

.splash-in { animation: splashIn 0.6s ease-out }

@keyframes splashIn {
    0% { transform: scale(0.6); opacity: 0 }
    50% { transform: scale(1.2); opacity: 1 }
    100% { transform: scale(1) }
}

/* Subtiele overlaycolor-tint voor feed items */
.poll-item.poll-tinted { position: relative; border-radius: 12px; /* match je kaartjes */ box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.poll-item.poll-tinted::before { content: ""; position: absolute; inset: 0; border-radius: inherit; /* dunne binnenrand in de tint-kleur */ box-shadow: inset 0 0 0 2px var(--poll-tint); pointer-events: none; }
.poll-item.poll-tinted::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; /* mini “glow” onderin */ background: linear-gradient(to top, var(--poll-tint), transparent); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; pointer-events: none; }

/* ============================================================================ */
/* === Poll controls
/* ============================================================================ */
#controls { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#controls .left-buttons { display: flex; flex-direction: column; gap: 10px; }
#showResultsBtn,#nextBtn { background: #005f99; color: #fff; padding: 12px 25px; border: none; border-radius: 10px; font-size: 1rem; cursor: pointer; box-shadow: 5px 5px 0 rgba(0,0,0,0.2); min-height: 48px; white-space: normal; /* laat tekst wrappen */ word-break: break-word; /* breek lange woorden indien nodig */ width: 100%; /* volle breedte */ }
@media (max-width: 768px) {
    #showResultsBtn, #nextBtn { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; background: #005f99; color: #fff; padding: 16px; border: none; border-radius: 0; font-size: 1.1rem; cursor: pointer; box-shadow: 0 -2px 5px rgba(0,0,0,0.3); z-index: 1001; }
    #quizContent { padding-bottom: 90px; /* hoogte knop (~60px) + marge */ }
}
#showResultsBtn:disabled, #nextBtn:disabled { opacity: 0.5; cursor: not-allowed; }
#showResultsBtn.invisible, #nextBtn.invisible { display: none; }
#skipBtn { background: transparent; color: #fff; border: none; font-size: 1rem; cursor: pointer; text-decoration: underline; padding: 0; width: 100%; }
#showResultsBtn:disabled, #nextBtn:disabled { opacity: 0.5; cursor: not-allowed }
#showResultsBtn.invisible, #nextBtn.invisible { display: none; }
#skipBtn { background: transparent; color: #fff; border: none; font-size: 1rem; cursor: pointer; text-decoration: underline; padding: 0 }



/* ============================================================================ */
/* === poll (generic for choice + rank)                                         */
/* ============================================================================ */
.polllist { list-style: none; margin: 0; padding: 0 }
.pollitem { position: relative; display: flex; align-items: stretch; background: #fff; border: 3px solid #fff; border-radius: 10px; padding: 0; margin-bottom: 12px; gap: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-sizing: border-box; overflow: visible; transition: background-color .2s,border-color .2s,box-shadow .2s; min-height: 60px; cursor: pointer }
.pollitem:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08) }
.polloption { flex: 0 0 60px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.4em; border-top-left-radius: 10px; border-bottom-left-radius: 10px }
.polltext { flex: 1; display: flex; align-items: center; font-size: 16px; color: #333; padding: 10px 12px }
.pollhandle { align-self: stretch; display: grid; place-items: center; width: 36px; height: auto; cursor: grab; font-size: 20px; line-height: 1; color: #888; flex-shrink: 0; margin-left: 0; touch-action: none; -ms-touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none }
.pollhandle:active { cursor: grabbing }
.pollarrows { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; flex-shrink: 0; padding: 10px 8px }
.pollarrow { cursor: pointer; font-size: 16px; line-height: 14px; padding: 2px 6px; color: #666; border-radius: 6px }
.pollarrow:hover { background: #f3f4f6; color: #007bff }
.poll-placeholder { height: auto; min-height: 60px; margin-bottom: 12px; border: 1px dashed #bbb; border-radius: 10px; background: #f9f9f9; box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-sizing: border-box }
.ui-sortable-placeholder { visibility: visible !important }
.ui-sortable-helper { cursor: grabbing }
.dragging { opacity: .85 }
.rank-meta-inline { font-size: .85em; color: #666 }
.vote-count { position: absolute; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 700; font-size: 14px; color: #333; opacity: 0; visibility: hidden; transition: opacity .25s ease }
.vote-count.vc-show { opacity: 1; visibility: visible }
.winner-badge { position: absolute; top: -15px; right: -15px; background: #d9534f; color: #fff; font-weight: 700; font-size: .9rem; padding: 4px 8px; transform: rotate(12deg); transform-origin: top right; border-radius: 6px; z-index: 5; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.2) }
.good-badge { background: #16a34a !important }
.bad-badge { background: #dc2626 !important }
.option-expl { margin-top: 6px; font-size: .9rem; color: #333 }
.splash-in { animation: splashIn .6s ease-out }

@keyframes splashIn {
    0% { transform: scale(.6); opacity: 0 }
    50% { transform: scale(1.2); opacity: 1 }
    100% { transform: scale(1) }
}

@media(max-width:480px) {
    .pollitem { min-height: 48px }
    .polloption { flex-basis: 48px }
    .poll-placeholder { min-height: 48px }
}

/* ============================================================================ */
/* === Rankgame + reveal slider
/* ============================================================================ */
.reveal-rail { position: absolute; right: 0; top: 0; bottom: 0; width: 28px; display: flex; align-items: center; justify-content: center; z-index: 3 }
.reveal-line { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.25) }
.reveal-knob { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #ddd; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #333; transform: translateX(0); touch-action: none; cursor: grab }
.reveal-knob:active { cursor: grabbing }
.polltext { position: relative }
.polltext .text-correct { position: relative; z-index: 1 }
.polltext .text-user { position: absolute; top: 0; bottom: 0; left: 0; right: auto; display: flex; align-items: center; padding: 10px 12px 10px 12px; color: #333; background: transparent }

.no-select { user-select: none; -webkit-user-select: none; -ms-user-select: none }

.polltext .user-mask { position: absolute; right: 0; top: 0; bottom: 0; width: 0; overflow: hidden; z-index: 2; background: #f1f1f1; pointer-events: none; }
.reveal-rail { position: absolute; right: 0; top: calc(-1*var(--pi-bw)); bottom: calc(-1*var(--pi-bw)); width: 32px; display: flex; align-items: center; justify-content: center; z-index: 3; margin-right: 10px }
.reveal-knob { width: 30px; z-index: 100; height: 30px; border-radius: 50%; color: #fff; background: #bbb; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #333; touch-action: none; cursor: grab }
.reveal-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: #bbb; z-index: 2; transform: translateX(-50%) }

.img-with-overlay { position: relative; isolation: isolate; }
.img-with-overlay img { display: block; width: 100%; height: auto; position: relative; z-index: -1; }
.img-with-overlay::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 0; pointer-events: none }
#imageContainer.img-with-overlay { margin-bottom: 12px; }
.qb-onimage { position: absolute; left: 0; font-size: 1.6rem; font-weight: bold; bottom: 20px; width: 100%; padding: 12px 16px; box-sizing: border-box; color: #fff !important; text-align: left; text-shadow: 0 2px 4px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.5); background: transparent !important; z-index: 1 }
.qb-onimage * { color: #fff !important; background: transparent !important }


/* Reveal bar */ #revealBar { position: relative; display: block; width: 100%; margin: 8px 0 32px; padding: 0 }
#revealRange { display: block; width: 100% !important; max-width: none; -webkit-appearance: none; appearance: none; margin-top: 20px; height: 6px; background: linear-gradient(90deg,#bbb,#888); border-radius: 9999px; outline: none }
#revealRange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 24px; background: transparent; border: none; box-shadow: none }
#revealRange::-moz-range-thumb { width: 1px; height: 24px; background: transparent; border: none; box-shadow: none }
.reveal-thumb-label { position: absolute; top: 50%; transform: translate(-50%,-50%); padding: 6px 12px; border-radius: 9999px; background: #005f99; color: #fff; font-weight: 600; font-size: .9rem; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,.2); z-index: 1 }
/* Row masking */ .polltext { position: relative }
.polltext .text-correct { position: relative; z-index: 1 }

/* UX helpers */ .no-select { user-select: none; -webkit-user-select: none; -ms-user-select: none }
#rankList .reveal-rail, #rankList .reveal-line, #rankList .reveal-knob { display: none !important }
#rankList .pollitem .polltext, #rankList .pollitem .user-mask, #rankList .pollitem .text-user { touch-action: pan-y }



/* ============================================================================ */
/* === Game variant (goed/fout)                                                */
/* ============================================================================ */
/* Correct antwoord */
#options .pollitem.correct { border-color: #16a34a; background: #d1fae5; }
#options .pollitem.correct .polloption { background: #16a34a; }
#options .pollitem.correct .polltext { color: #064e3b; }

/* Fout antwoord */
#options .pollitem.wrong { border-color: #dc2626; background: #fee2e2; }
#options .pollitem.wrong .polloption { background: #dc2626; }
#options .pollitem.wrong .polltext { color: #7f1d1d; }

/* Feedback message onder de opties */
#gameFeedback { margin-top: 12px; font-size: 1.1rem; font-weight: bold; text-align: center; padding: 10px; border-radius: 8px; }
#gameFeedback.correct { color: #16a34a; }
#gameFeedback.wrong { color: #dc2626; }


/* ============================================================================ */
/* === Dilemma (2 foto's variant)
/* ============================================================================ */
.dilemma-options { display: grid; gap: 20px; margin-bottom: 20px; /* ruimte boven de controls */ }

@media (min-width: 768px) {
    .dilemma-options { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
    .dilemma-options { grid-template-columns: 1fr; }
}

.dilemma-option { position: relative; cursor: pointer; }

.dilemma-img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .2s; display: block; }

.dilemma-option:hover .dilemma-img { transform: scale(1.03); }

.dilemma-overlay { position: absolute; inset: 0; border-radius: 12px; background: rgba(0,0,0,.2); opacity: 0; transition: .3s; }

.dilemma-option.selected .dilemma-overlay { opacity: 1; background: rgba(0,150,0,.35); }

.dilemma-label { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: .9rem; display: none; }

.dilemma-option.voted .dilemma-label { display: block; }