/* The challenge uses the same open, photographic stage as the main viewer. */
#challenge-overlay { display:block; overflow-y:auto; overscroll-behavior:contain; background:#0b0d0e; backdrop-filter:none; }
#challenge-overlay.hidden { display:none; }
#challenge-overlay::before { content:''; position:fixed; inset:-36px; background:var(--quiz-atmosphere-image,linear-gradient(135deg,#263139,#342c22)) center/cover; filter:blur(32px) brightness(.48) saturate(1.05); pointer-events:none; }
#challenge-overlay::after { content:''; position:fixed; inset:0; background:linear-gradient(#0003,transparent 38%,#0009); pointer-events:none; }
#challenge-overlay .challenge-box { position:relative; z-index:1; align-items:center; width:100%; max-width:none; min-height:100dvh; max-height:none; overflow:visible; padding-bottom:12px; border:0; border-radius:0; background:transparent; }
#challenge-overlay .challenge-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); width:100%; min-height:56px; padding:8px 24px; border:0; background:linear-gradient(#080a0b80,transparent); }
#challenge-overlay .challenge-streak { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; justify-self:start; font:600 10px/1.5 var(--font); color:#ffffffbf; }
#explore-menu button[data-xp="quiz"],.quiz-title-invitation { font:700 13px/1.5 var(--font); color:#e9eceb; animation:quiz-title-pulse 3.6s ease-in-out infinite; }
#explore-menu button[data-xp="quiz"]:is(:hover,:focus-visible) { animation:none; color:#fff; text-shadow:0 0 12px #ffffff88; }
.quiz-score-label { color:#c1c6c7; }
@keyframes quiz-title-pulse { 0%,100% { color:#d0d8d8; text-shadow:0 0 0 #ffffff00; } 50% { color:#fff; text-shadow:0 0 12px #ffffff99; } }
@media(prefers-reduced-motion:reduce) { #explore-menu button[data-xp="quiz"],.quiz-title-invitation { animation:none; color:#fff; } #quiz-static { filter:brightness(0); } }
.quiz-brand { color:#f1eeea; font:700 18px var(--serif); letter-spacing:.02em; }
.quiz-header-right { display:flex; align-items:center; justify-self:end; gap:18px; }
#quiz-live { display:inline-flex; align-items:center; gap:6px; color:#d0d3d2; font:500 10px/1.3 var(--font); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
#quiz-live[hidden] { display:none; }
.quiz-live-dot { width:5px; height:5px; border-radius:50%; background:#4ade80; }
#challenge-overlay .challenge-close { justify-self:end; width:36px; height:36px; border:0; border-radius:0; color:#ffffffbf; font:300 26px/1 var(--font); transition:color .2s,text-shadow .2s; }
#challenge-overlay .challenge-close:is(:hover,:focus-visible) { color:#fff; text-shadow:0 0 10px #ffffff77; }
.quiz-screen { position:relative; flex:none; width:min(1268px,calc(100% - 64px),calc(var(--quiz-video-height,calc(100dvh - 400px)) * 16 / 9)); }
.quiz-screen:has(#challenge-frame-wrap[hidden]) { display:none; }
#challenge-overlay .challenge-frame-wrap { width:100%; height:auto; aspect-ratio:16/9; max-height:none; min-height:0; background:transparent; }
#quiz-static { position:absolute; inset:0; z-index:12; display:block; width:100%; height:100%; background:#17191b; image-rendering:pixelated; }
#quiz-static[hidden] { display:none; }
#challenge-overlay #quiz-question { padding:17px 20px 0; font:700 24px/1.2 var(--serif); color:#f1eeea; }
#challenge-overlay .challenge-hint { max-width:980px; padding:16px 24px 12px; color:#f1eeea; font:700 18px/1.5 var(--serif); }
#challenge-overlay .challenge-options { width:min(940px,calc(100% - 64px)); gap:10px; padding:0 0 12px; }
#challenge-overlay .challenge-option { min-height:44px; padding:10px 16px; border-radius:24px; border-color:#ffffff40; background:#10131438; font:500 13px/1.4 var(--font); color:#e5e6e4; }
#challenge-overlay .challenge-option:not(:disabled):is(:hover,:focus-visible) { color:#fff; border-color:#ffffffaa; background:#ffffff12; }
#challenge-overlay .challenge-option.correct { color:#96e2b0; border-color:#96e2b0; background:#4ade8010; }
#challenge-overlay .challenge-option.wrong { color:#ffadad; border-color:#f87171; }
#challenge-overlay #quiz-feedback { padding:0 24px; max-width:980px; min-height:42px; color:#ead4a5; font:500 13px/1.5 var(--font); outline:none; }
#challenge-overlay #quiz-feedback:not(:empty) { padding-bottom:12px; }
#challenge-overlay #quiz-actions { padding:6px 20px 0; }
#challenge-overlay #quiz-actions[hidden] { display:none; }
#challenge-overlay #quiz-actions button { font:600 12px var(--font); border-color:#ffffff40; color:#e0e1df; }
#challenge-overlay .challenge-result { width:min(760px,100%); }
#challenge-overlay.quiz-playing .challenge-result { min-height:84px; padding:4px 16px; flex-direction:row; flex-wrap:wrap; justify-content:center; align-content:center; gap:8px 16px; }
#challenge-overlay.quiz-playing .challenge-result.hidden { display:flex; visibility:hidden; }
#challenge-overlay.quiz-playing :is(.challenge-result-title,.challenge-leaderboard) { display:none; }
#challenge-overlay.quiz-playing .challenge-name-entry { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; }
#challenge-overlay.quiz-playing .challenge-name-entry label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#challenge-overlay.quiz-playing .challenge-name-entry input { width:125px; min-height:34px; }
#challenge-overlay.quiz-playing .challenge-name-entry button { min-height:34px; }
#challenge-overlay.quiz-playing .challenge-result-score { color:#c1c6c7; }
#challenge-overlay #audio-callout { position:fixed; top:50%; right:0; transform:translateY(-50%); }
@media(max-width:680px) {
 #challenge-overlay .challenge-header { padding:8px 14px; grid-template-columns:minmax(0,1fr) auto; min-height:56px; }
 .quiz-brand { display:none; }
 .quiz-screen { margin:8px 52px 0 12px; }
 #challenge-overlay #audio-callout { top:76px; transform:none; }
 #challenge-overlay .challenge-options { width:calc(100% - 32px); gap:8px; }
 #challenge-overlay .challenge-option { min-height:48px; padding:9px 12px; font-size:12px; }
 #challenge-overlay #quiz-question { padding-top:20px; font-size:22px; }
 #challenge-overlay .challenge-hint { padding:12px 20px 10px; font-size:16px; }
 #challenge-overlay #quiz-feedback { min-height:58px; }
 #challenge-overlay.quiz-playing .challenge-result { min-height:92px; }
}
@media(max-height:560px) and (min-width:681px) {
 #challenge-overlay.quiz-playing .challenge-box { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:48px auto auto auto auto 1fr; align-content:start; align-items:center; padding:0 44px 8px 12px; height:100dvh; }
 #challenge-overlay.quiz-playing .challenge-header { grid-column:1 / -1; padding:4px 8px; min-height:48px; }
 #challenge-overlay.quiz-playing .quiz-screen { grid-column:1; grid-row:2 / 7; width:min(100%,calc((100dvh - 68px) * 16 / 9)); }
 #challenge-overlay.quiz-playing .challenge-hint { grid-column:2; grid-row:2; padding:4px 12px 8px; font-size:14px; line-height:1.3; }
 #challenge-overlay.quiz-playing .challenge-options { grid-column:2; grid-row:3; width:100%; gap:6px; padding-bottom:6px; }
 #challenge-overlay.quiz-playing .challenge-option { min-height:36px; padding:7px 8px; font-size:11px; }
 #challenge-overlay.quiz-playing #quiz-feedback { grid-column:2; grid-row:4; min-height:36px; padding:0 8px; font-size:11px; line-height:1.3; }
 #challenge-overlay.quiz-playing #quiz-actions { grid-column:2; grid-row:5; padding:2px; }
 #challenge-overlay.quiz-playing .challenge-result { grid-column:2; grid-row:6; min-height:66px; gap:6px 10px; padding:2px; }
}