/* =============================
   Leukequizzen — vlag-quiz UI
   ============================= */

.lq-fq {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: clamp(20px, 3.5vw, 36px);
	box-shadow: var(--shadow-card);
	scroll-margin-top: 90px; /* zodat anchor-springen niet onder sticky header valt */
}

/* ---------- Setup (naam + niveau) ---------- */
/* ---------- Uitlegblok bovenaan setup ---------- */
.lq-fq__intro {
	background: var(--color-cream);
	border-radius: var(--radius-card);
	padding: 22px 24px;
	margin-bottom: 28px;
}
.lq-fq__intro-title {
	margin: 0 0 14px;
	font-size: 1.2rem;
}
.lq-fq__intro-list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
}
@media (max-width: 720px) { .lq-fq__intro-list { grid-template-columns: 1fr; } }
.lq-fq__intro-list > li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 10px;
	align-items: start;
}
.lq-fq__intro-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--color-white);
	font-size: 1.3rem;
	flex-shrink: 0;
	box-shadow: 0 2px 0 rgba(31,77,67,0.08);
}
.lq-fq__intro-list strong { display: block; font-size: 0.98rem; margin-bottom: 2px; }
.lq-fq__intro-list p { margin: 0; font-size: 0.9rem; color: var(--color-muted); line-height: 1.45; }

.lq-fq__setup-head { text-align: center; margin-bottom: 20px; }
.lq-fq__setup-head h2 { margin-bottom: 8px; }
.lq-fq__setup-head p { color: var(--color-muted); margin: 0; }

.lq-fq__name {
	display: block;
	max-width: 420px;
	margin: 0 auto 28px;
}
.lq-fq__name > span {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
	text-align: center;
}
.lq-fq__name input[type="text"] {
	width: 100%;
	padding: 14px 18px;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-input);
	background: var(--color-cream);
	font: inherit;
	font-size: 1.05rem;
	text-align: center;
}
.lq-fq__name input[type="text"]:focus {
	background: var(--color-white);
	border-color: var(--color-primary);
	outline: none;
}
.lq-fq__error { display: block; color: var(--color-error); margin-top: 4px; font-size: 0.9rem; text-align: center; }

.lq-fq__levels {
	border: 0; margin: 0; padding: 0;
}
.lq-fq__levels legend {
	display: block;
	font-weight: 700;
	margin-bottom: 14px;
	text-align: center;
	font-size: 1.1rem;
	width: 100%;
}
.lq-fq__levelgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}
@media (max-width: 720px) { .lq-fq__levelgrid { grid-template-columns: 1fr; } }

.lq-fq__level {
	display: block;
	position: relative;
	cursor: pointer;
}
.lq-fq__level input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.lq-fq__level-card {
	background: var(--color-cream);
	border: 3px solid transparent;
	border-radius: var(--radius-card);
	padding: 20px;
	height: 100%;
	transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.lq-fq__level:hover .lq-fq__level-card { transform: translateY(-2px); border-color: var(--lv-color); }
.lq-fq__level input:checked + .lq-fq__level-card {
	background: var(--color-white);
	border-color: var(--lv-color);
	box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--lv-color) 35%, transparent);
}
.lq-fq__level input:focus-visible + .lq-fq__level-card {
	outline: 3px solid var(--color-dark);
	outline-offset: 4px;
}
.lq-fq__level-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lq-fq__level-dot {
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--lv-color);
	box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.lq-fq__level-title { font-family: var(--font-heading); font-weight: 900; font-size: 1.2rem; color: var(--color-dark); }
.lq-fq__level-meta {
	list-style: none; padding: 0; margin: 0 0 8px;
	display: flex; gap: 12px;
	font-size: 0.9rem; color: var(--color-muted);
}
.lq-fq__level-meta strong { color: var(--color-dark); font-weight: 800; }
.lq-fq__level-sub { font-weight: 700; margin: 0 0 6px; }
.lq-fq__level-desc { color: var(--color-muted); font-size: 0.92rem; margin: 0; line-height: 1.45; }

.lq-fq__screen[data-lq-screen="setup"] {
	text-align: center;
}
.lq-fq__screen[data-lq-screen="setup"] .lq-fq__levels { text-align: left; }

/* ---------- Play ---------- */
.lq-fq__topbar {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-bottom: 18px;
}
.lq-fq__progress { flex: 1; min-width: 200px; }
.lq-fq__progress-bar {
	height: 8px;
	background: var(--color-cream);
	border-radius: var(--radius-pill);
	overflow: hidden;
	margin-bottom: 6px;
}
.lq-fq__progress-bar span {
	display: block;
	height: 100%;
	background: var(--color-primary);
	transition: width .3s ease;
	width: 0;
}
.lq-fq__progress-text { font-size: 0.9rem; color: var(--color-muted); font-weight: 600; }

.lq-fq__timer, .lq-fq__score {
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: 1.2rem;
	color: var(--color-dark);
	background: var(--color-cream);
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	min-width: 64px;
	text-align: center;
}
.lq-fq__score-sep { color: var(--color-muted); margin: 0 2px; font-weight: 700; }

/* ---------- Hulplijnen ---------- */
.lq-fq__helpers {
	display: flex; gap: 12px; flex-wrap: wrap;
	margin: 8px 0 20px;
	justify-content: flex-end;
}
.lq-fq__helper {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--color-white);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 8px 16px 8px 8px;
	cursor: pointer;
	font: inherit;
	transition: transform .12s ease, border-color .12s ease, background-color .12s ease, opacity .12s ease;
	box-shadow: 0 3px 0 rgba(31,77,67,0.1);
}
.lq-fq__helper:hover:not(:disabled) {
	border-color: var(--color-primary);
	transform: translateY(-1px);
}
.lq-fq__helper:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}
.lq-fq__helper[data-used="1"] .lq-fq__helper-text strong {
	text-decoration: line-through;
}
.lq-fq__helper-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--color-cream);
	font-size: 1.1rem;
	flex-shrink: 0;
}
.lq-fq__helper-text { display: grid; line-height: 1.2; text-align: left; }
.lq-fq__helper-text strong { font-size: 0.95rem; color: var(--color-dark); }
.lq-fq__helper-text small { font-size: 0.78rem; color: var(--color-muted); }

/* ---------- Hint balk ---------- */
.lq-fq__hint {
	background: color-mix(in srgb, var(--color-yellow) 22%, white);
	border: 2px solid var(--color-yellow);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
	display: flex;
	align-items: flex-start;
}
.lq-fq__hint-icon {
	font-size: 1.3rem;
	line-height: 1.4;
	margin-right: 12px;
	flex-shrink: 0;
}
.lq-fq__hint-body { flex: 1; line-height: 1.55; }
.lq-fq__hint-label {
	font-weight: 800;
	color: var(--color-dark);
	margin-right: 6px;
}

.lq-fq__question {
	text-align: center;
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	margin: 10px 0 18px;
}

.lq-fq__flag-wrap {
	display: flex; justify-content: center;
	margin-bottom: 24px;
}
.lq-fq__flag {
	width: 100%;
	max-width: 380px;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	overflow: hidden;
	border: 3px solid var(--color-dark);
	box-shadow: 0 6px 0 rgba(31,77,67,0.18);
	background: var(--color-white);
	display: flex; align-items: center; justify-content: center;
	padding: 4px;
}
/* Gebruik contain zodat hele vlag altijd zichtbaar blijft, ongeacht aspect-ratio van het SVG. */
.lq-fq__flag img, .lq-fq__flag svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.lq-fq__flag-fallback {
	display: flex; align-items: center; justify-content: center;
	height: 100%;
	color: var(--color-muted);
	font-style: italic;
	padding: 12px;
	text-align: center;
}

.lq-fq__answers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}
@media (max-width: 540px) { .lq-fq__answers { grid-template-columns: 1fr; } }

.lq-fq__answer {
	display: flex; align-items: center; gap: 12px;
	background: var(--color-cream);
	border: 3px solid var(--color-cream);
	border-radius: var(--radius-input);
	padding: 14px 16px;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	color: var(--color-dark);
	text-align: left;
	transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
	width: 100%;
}
.lq-fq__answer:hover:not(:disabled):not([data-state]) {
	background: var(--color-white);
	border-color: var(--color-primary);
	transform: translateY(-1px);
}
/* Direct gekozen + juist → felgroene fill, witte tekst, korte bounce. */
.lq-fq__answer[data-state="correct"] {
	background: var(--color-success);
	border-color: var(--color-success);
	color: #fff;
	box-shadow: 0 6px 0 color-mix(in srgb, var(--color-success) 60%, black);
	animation: lq-fq-bounce .4s ease;
}
/* Direct gekozen + fout → felrode fill, witte tekst, korte shake. */
.lq-fq__answer[data-state="wrong"] {
	background: var(--color-error);
	border-color: var(--color-error);
	color: #fff;
	box-shadow: 0 6px 0 color-mix(in srgb, var(--color-error) 60%, black);
	animation: lq-fq-shake .35s ease;
}
/* Het juiste antwoord wanneer de speler iets anders koos → felgroen met pulse. */
.lq-fq__answer[data-state="reveal"] {
	background: var(--color-success);
	border-color: var(--color-success);
	color: #fff;
	box-shadow: 0 6px 0 color-mix(in srgb, var(--color-success) 60%, black);
	animation: lq-fq-pulse 1.1s ease-in-out 1;
}
/* Overige knoppen tijdens de reveal: gedimd zodat het oog naar groen/rood gaat. */
.lq-fq__answer[disabled]:not([data-state]) {
	opacity: 0.5;
	background: var(--color-cream);
	border-color: var(--color-border);
}
/* Knoppen die door 50/50 zijn weggehaald: doorgestreept en grijs. */
.lq-fq__answer[data-state="removed"] {
	opacity: 0.35;
	background: var(--color-cream);
	border-color: var(--color-border);
	color: var(--color-muted);
	text-decoration: line-through;
	box-shadow: none;
}
.lq-fq__answer:disabled { cursor: default; }

.lq-fq__answer-bullet {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--color-white);
	border: 2px solid var(--color-border);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 900; font-size: 0.95rem;
	flex-shrink: 0;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lq-fq__answer[data-state="correct"] .lq-fq__answer-bullet,
.lq-fq__answer[data-state="reveal"] .lq-fq__answer-bullet {
	background: #fff; color: var(--color-success); border-color: #fff;
}
.lq-fq__answer[data-state="wrong"] .lq-fq__answer-bullet {
	background: #fff; color: var(--color-error); border-color: #fff;
}
/* Vink/kruis op het bolletje na reveal voor extra duidelijkheid. */
.lq-fq__answer[data-state="correct"] .lq-fq__answer-bullet::after,
.lq-fq__answer[data-state="reveal"] .lq-fq__answer-bullet::after { content: "✓"; font-size: 1.1rem; line-height: 1; }
.lq-fq__answer[data-state="wrong"] .lq-fq__answer-bullet::after { content: "✕"; font-size: 1.1rem; line-height: 1; }
.lq-fq__answer[data-state] .lq-fq__answer-bullet > :first-child { display: none; }
.lq-fq__answer[data-state] .lq-fq__answer-bullet { font-size: 0; }
.lq-fq__answer[data-state] .lq-fq__answer-bullet::after { display: inline-block; }

@keyframes lq-fq-bounce { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-8px) scale(1.03); } 60% { transform: translateY(0) scale(1); } }
@keyframes lq-fq-shake  { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes lq-fq-pulse  { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.03); box-shadow: 0 8px 0 color-mix(in srgb, var(--color-success) 60%, black), 0 0 0 8px color-mix(in srgb, var(--color-success) 25%, transparent); } 70% { transform: scale(1); } }

.lq-fq__feedback {
	background: var(--color-cream);
	border-left: 4px solid var(--color-primary);
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 14px;
}
.lq-fq__feedback strong { display: inline; margin-right: 6px; }

.lq-fq__controls {
	display: flex; justify-content: flex-end; gap: 12px;
	margin-top: 6px;
}

/* ---------- Result ---------- */
.lq-fq__screen[data-lq-screen="result"] {
	text-align: center;
	position: relative;
	min-height: 280px;
	padding: 16px 0;
}
.lq-fq__result-title { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 8px; }
.lq-fq__result-text { font-size: 1.1rem; color: var(--color-text); margin-bottom: 8px; }
.lq-fq__rank {
	display: inline-block;
	background: var(--color-yellow);
	color: var(--color-dark);
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	font-weight: 800;
	margin-top: 10px;
	box-shadow: 0 3px 0 rgba(31,77,67,0.18);
}
.lq-fq__result-actions {
	display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
	margin-top: 22px;
}
.lq-fq__confetti {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	pointer-events: none;
}

/* ---------- Leaderboard ---------- */
.lq-fq__leaderboard {
	margin-top: 36px;
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: 24px;
	box-shadow: var(--shadow-card);
}
.lq-fq__lb-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lq-fq__lb-head h2 { margin: 0; }
.lq-fq__lb-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.lq-fq__lb-tab {
	background: var(--color-cream);
	border: 0;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	color: var(--color-muted);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	transition: background-color .15s ease, color .15s ease;
	border-bottom: 3px solid transparent;
}
.lq-fq__lb-tab:hover { color: var(--color-dark); }
.lq-fq__lb-tab.is-active {
	background: var(--color-white);
	color: var(--color-dark);
	border-bottom-color: var(--lv-color, var(--color-dark));
}

.lq-fq__lb-body { min-height: 80px; }
.lq-fq__lb-loading, .lq-fq__lb-empty {
	color: var(--color-muted);
	text-align: center;
	padding: 24px;
}

.lq-fq__lb-list { list-style: none; padding: 0; margin: 0; }
.lq-fq__lb-row {
	display: grid;
	grid-template-columns: 56px 1fr auto auto auto;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-border);
}
.lq-fq__lb-row:last-child { border-bottom: 0; }
.lq-fq__lb-row:nth-child(1) { background: color-mix(in srgb, #FFD23F 18%, white); border-radius: 12px; }
.lq-fq__lb-row:nth-child(2) { background: color-mix(in srgb, #C0C0C0 16%, white); border-radius: 12px; }
.lq-fq__lb-row:nth-child(3) { background: color-mix(in srgb, #CD7F32 14%, white); border-radius: 12px; }
.lq-fq__lb-rank { font-family: var(--font-heading); font-weight: 900; font-size: 1.2rem; color: var(--color-dark); text-align: center; }
.lq-fq__lb-name { font-weight: 700; color: var(--color-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-fq__lb-score, .lq-fq__lb-pct, .lq-fq__lb-time {
	font-weight: 600; color: var(--color-muted); font-size: 0.95rem;
}
.lq-fq__lb-pct { font-weight: 800; color: var(--color-dark); }
@media (max-width: 540px) {
	.lq-fq__lb-row { grid-template-columns: 36px 1fr auto; gap: 8px; padding: 8px; }
	.lq-fq__lb-score, .lq-fq__lb-time { display: none; }
	.lq-fq__lb-rank { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.lq-fq__answer, .lq-fq__progress-bar span { transition: none; }
	.lq-fq__answer[data-state] { animation: none; }
}

/* ---------- SEO content block under the quiz ---------- */
.lq-quizpage__seo {
	max-width: 760px;
	margin: 48px auto 0;
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: clamp(20px, 3vw, 36px);
	box-shadow: var(--shadow-card);
}
.lq-quizpage__seo h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-top: 0; }
.lq-quizpage__seo h3 { font-size: 1.3rem; margin-top: 1.6em; }
.lq-quizpage__seo h4 { font-size: 1.05rem; margin-top: 1.3em; color: var(--color-dark); }
.lq-quizpage__seo p, .lq-quizpage__seo ul, .lq-quizpage__seo ol { font-size: 1.02rem; line-height: 1.65; }
.lq-quizpage__seo ul li { margin-bottom: 6px; }