/* The game keeps the atlas palette, with motion that supports each action. */
.quiz-section{position:relative;isolation:isolate;background:radial-gradient(ellipse at 3% 20%,#d4d6db 0,transparent 44%),radial-gradient(ellipse at 90% 85%,#ede0be 0,transparent 46%),#f7f6f2}.quiz-section:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#565c6820 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(90deg,#000,transparent 65%)}
.quiz-card{position:relative;border-radius:18px;border:1px solid #b5b9c1;box-shadow:0 24px 70px #292c3214,0 2px 6px #292c3208;background:#f8f8f9;transition:box-shadow .3s,border-color .3s}.quiz-card[data-state="feedback"]:has(.good){border-color:#6f7684;box-shadow:0 18px 60px #43475022}.quiz-lobby-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;font-size:10px;font-weight:700;letter-spacing:1.2px;color:#555b66}.quiz-lobby-heading>div{display:flex;align-items:center;gap:9px}.quiz-live-dot{width:7px;height:7px;border-radius:50%;background:#6b7280;box-shadow:0 0 0 5px #6b728017}.quiz-rule-chip{font-size:11px;letter-spacing:0;white-space:nowrap;border:1px solid #c9ccd2;border-radius:30px;padding:7px 10px;color:#4d525c}
.quiz-mode{border-radius:11px;min-height:88px;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}.quiz-mode-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#e9eaec;font:26px/1 var(--display);color:#666d7a;transition:transform .25s,background .25s,color .25s}.quiz-mode:has(input:checked){background:linear-gradient(115deg,#dfe1e5,#edeef0);box-shadow:inset 4px 0 #5f6571,0 4px 14px #33363d10}.quiz-mode:has(input:checked) .quiz-mode-icon{background:#34373e;color:#ecdaa3;transform:rotate(-5deg)}.quiz-mode:hover{transform:translateX(3px);border-color:#818895}.quiz-primary{border-radius:9px;min-height:58px;background:linear-gradient(115deg,#2a2d33,#41454d);box-shadow:0 5px 16px #292c311a;transition:transform .2s,box-shadow .2s,background .2s;position:relative;overflow:hidden}.quiz-primary:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff1c 48%,transparent 66%);transform:translateX(-100%)}.quiz-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #292c3133}.quiz-primary:hover:before{animation:quiz-sheen .7s ease-out}.quiz-primary>span:last-child{transition:transform .2s}.quiz-primary:hover>span:last-child{transform:translateX(4px)}
.quiz-stages{display:flex;justify-content:space-between;gap:9px;margin:0 0 23px}.quiz-stages>span{display:flex;align-items:center;gap:7px;flex:1;font-size:11px;color:#717887;line-height:1.4}.quiz-stages b{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid #c0c3ca;border-radius:50%;font-size:10px}.quiz-stages .is-current{color:#32353c;font-weight:700}.quiz-stages .is-current b{background:#32353c;color:#f3dfaa;border-color:#32353c;box-shadow:0 0 0 4px #7c83921c}.quiz-stages .is-complete b{background:#dee0e3;border-color:#8c929f;color:#3d414a}#quizSetup .quiz-stages{margin-top:25px;margin-bottom:0}
.quiz-hud{position:relative;display:flex;align-items:center;gap:20px;justify-content:space-between;padding:23px 24px 25px;color:#f4f0df;border-radius:13px;background:radial-gradient(ellipse at 100% 0,#454a53,transparent 70%),#25282d;overflow:hidden}.quiz-hud-label{display:block;font-size:10px;letter-spacing:1.7px;text-transform:uppercase;color:#babec6;margin-bottom:8px}.quiz-hud-question strong,.quiz-hud-score strong{display:flex;align-items:baseline;gap:8px;line-height:1}.quiz-hud-question b{font:42px/1 var(--display);font-weight:400;color:#efdbab}.quiz-hud-question small{font-size:15px;color:#b3b7bf;font-weight:400}.quiz-hud-score strong{font-size:27px;font-variant-numeric:tabular-nums}.quiz-hud-score small{font-size:9px;color:#b3b7bf;letter-spacing:1px}.quiz-clock{position:relative;flex:none;display:grid;align-content:center;justify-items:center;width:70px;height:70px;border-radius:50%;background:conic-gradient(#e4c377 var(--time-left,100%),#5f657250 0);isolation:isolate}.quiz-clock:before{content:'';position:absolute;inset:4px;border-radius:50%;background:#2d3036;z-index:-1}#quizTime{font:29px/1 var(--display);color:#f3dfaa;padding:0;border:0;background:none;border-radius:0;min-width:0}.quiz-clock small{font-size:8px;letter-spacing:1.4px;color:#c0c3ca;margin-top:5px}.quiz-time-track{position:absolute;inset:auto 0 0;height:3px;background:#ffffff14}.quiz-time-track>span{display:block;width:var(--time-left,100%);height:100%;background:#d8bd7f;transition:width .2s linear}.time-urgent .quiz-clock{background:conic-gradient(#e6a567 var(--time-left,100%),#5f657250 0);animation:quiz-clock-pulse 1s ease-in-out infinite}.time-urgent #quizTime{color:#ffd2a4}.quiz-progress{margin:16px 0 27px;height:4px}.quiz-progress>span{background:#79808f}.quiz-question h3{margin-top:14px;margin-bottom:26px}.quiz-question blockquote{padding:16px 18px;border-radius:0 10px 10px 0;background:#ebecef;font-size:18px}
.quiz-option{border-radius:10px;min-height:76px;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;border:1px solid #c4c7ce;position:relative}.quiz-option-letter{width:29px;height:29px;border-radius:7px;font-weight:700;background:#ecedf0}.quiz-option:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 14px #4449521a;border-color:#656b78;background:#eff0f2}.quiz-option:active:not(:disabled){transform:translateY(0) scale(.985)}.quiz-option.is-correct{border-width:1px;border-color:#676e7c;background:linear-gradient(110deg,#d7d9dd,#e7e8eb);animation:quiz-correct .65s ease-out}.quiz-option.is-correct .quiz-option-letter{color:#fff;background:#575d68;border-color:#575d68}.quiz-option.is-wrong{border-width:1px;animation:quiz-nudge .35s ease-out}.quiz-answer-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:16px;background:#ffffff65;flex:none}.quiz-card[data-state="question"] .quiz-question{animation:quiz-question-in .35s ease-out both}.quiz-card[data-state="question"] .quiz-option{animation:quiz-option-in .32s ease-out backwards;animation-delay:calc(var(--option-index)*45ms)}
.quiz-feedback{position:relative;border-radius:0 12px 12px 0;padding-top:21px;animation:quiz-feedback-in .32s ease-out}.quiz-feedback.good{padding-top:25px}.quiz-feedback>strong{display:block;padding-right:85px}.quiz-points-pop{position:absolute;top:19px;right:17px;font-size:24px;line-height:1;font-weight:800;color:#515762;animation:quiz-points-in .65s cubic-bezier(.2,.8,.2,1.2) both}.quiz-points-pop small{font-size:9px;letter-spacing:1px}.quiz-streak{display:inline-block;margin:8px 0 0;font-size:10px}.quiz-sparks{position:absolute;left:50%;top:25px;pointer-events:none;z-index:3}.quiz-sparks i{position:absolute;width:5px;height:9px;border-radius:2px;background:#c9ac65;opacity:0;animation:quiz-spark .85s ease-out var(--spark-delay) both}.quiz-sparks i:nth-child(2n){background:#7e8594;width:6px;height:6px;border-radius:50%}.quiz-result-seal{width:102px;height:102px;position:relative;display:grid;place-items:center;border-radius:50%;border:1px solid #d1bd85;background:radial-gradient(circle,#f0e0b1,#f5efdb);color:#8e7134;font-size:46px;box-shadow:0 0 0 9px #e8ddb73b;margin:26px auto 30px;animation:quiz-seal-in .7s cubic-bezier(.2,.8,.2,1.2)}.quiz-result-seal .quiz-sparks{top:50%}.quiz-result-seal .quiz-sparks i{animation-duration:1.2s;animation-delay:calc(.2s + var(--spark-delay))}.quiz-result-score b{display:inline-block;font-weight:400;animation:quiz-points-in .7s ease-out .1s both}.quiz-result>p,.quiz-best{animation:quiz-feedback-in .4s ease-out .15s both}.quiz-result-actions .quiz-secondary{border-radius:9px}.quiz-review button{transition:background .2s,transform .2s;border-radius:7px}.quiz-review button:hover{background:#e9eaed;transform:translateX(2px)}
@keyframes quiz-question-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes quiz-option-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes quiz-feedback-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes quiz-correct{0%{box-shadow:0 0 0 0 #79808f60}60%{box-shadow:0 0 0 8px #79808f00}100%{box-shadow:0 0 0 0 #79808f00}}@keyframes quiz-nudge{0%,100%{transform:none}25%{transform:translateX(-4px)}70%{transform:translateX(3px)}}@keyframes quiz-points-in{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}@keyframes quiz-clock-pulse{50%{box-shadow:0 0 0 5px #e6a56714}}@keyframes quiz-sheen{to{transform:translateX(100%)}}@keyframes quiz-spark{0%{opacity:0;transform:rotate(var(--spark-angle)) translateY(0) scale(.5)}15%{opacity:.9}100%{opacity:0;transform:rotate(var(--spark-angle)) translateY(calc(-1 * var(--spark-distance))) rotate(90deg) scale(.4)}}@keyframes quiz-seal-in{from{opacity:0;transform:scale(.65) rotate(-20deg)}to{opacity:1;transform:none}}
@media(max-width:600px){.quiz-hud{padding:18px 17px 21px;gap:10px}.quiz-clock{width:62px;height:62px}.quiz-hud-question b{font-size:36px}.quiz-hud-score strong{font-size:25px}.quiz-hud-score strong{gap:5px}.quiz-hud-score small{font-size:8px}.quiz-stages{gap:7px}.quiz-stages>span{font-size:10px;gap:5px}.quiz-stages b{width:22px;height:22px}.quiz-mode{gap:12px}.quiz-mode-icon{width:35px;height:38px;font-size:23px}.quiz-mode small{font-size:12px}.quiz-option{min-height:62px}.quiz-lobby-heading{gap:7px;font-size:9px;letter-spacing:.8px}.quiz-rule-chip{font-size:10px;padding:6px 8px}.quiz-question blockquote{font-size:16px}.quiz-feedback>strong{padding-right:72px}.quiz-points-pop{font-size:21px;right:13px}.quiz-streak{font-size:10px}.quiz-card{border-radius:14px}}
@media(prefers-reduced-motion:reduce){.quiz-section *,.quiz-section *:before,.quiz-section *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.quiz-sparks{display:none}.quiz-mode:hover,.quiz-primary:hover:not(:disabled),.quiz-option:hover:not(:disabled),.quiz-review button:hover{transform:none}}
/* Global scroll padding already reserves the fixed navigation. */
#quizApp{scroll-margin-top:10px}