.trivia-section{min-height:75vh;background:radial-gradient(ellipse at 10% 20%,#102d43,transparent 65%)}
.trivia-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,65px);align-items:start}
.trivia-intro h1{font-size:clamp(2.5rem,5vw,4.2rem)}.trivia-intro p{max-width:340px}.trivia-intro .trivia-kicker{color:var(--cyan);font-size:.85rem}
.trivia-card{border:1px solid #34546c;border-radius:17px;background:linear-gradient(145deg,#142131,#0b111a);box-shadow:0 20px 60px #0004;overflow:hidden}
.trivia-topline{display:flex;justify-content:space-between;gap:15px;padding:18px 24px;font-size:.85rem;color:var(--muted)}.trivia-topline strong{color:var(--cyan)}
.trivia-progress{display:block;width:100%;height:4px;border:0;accent-color:var(--cyan);background:#233546}.trivia-progress::-webkit-progress-bar{background:#233546}.trivia-progress::-webkit-progress-value{background:var(--cyan)}.trivia-progress::-moz-progress-bar{background:var(--cyan)}
.trivia-body{padding:clamp(18px,3vw,30px)}.trivia-body h2{font-size:clamp(1.4rem,2.5vw,1.8rem);line-height:1.3;margin:0 0 24px}.trivia-body h2:focus{outline:none}
.trivia-answers{display:grid;gap:11px}.trivia-answer{font:inherit;text-align:left;font-weight:650;line-height:1.5;border:1px solid #455d73;background:#0b1521;border-radius:10px;padding:14px 17px;min-height:52px;color:var(--white)}.trivia-answer:hover:not(:disabled){border-color:var(--cyan);background:#142d43}.trivia-answer:focus-visible,.trivia-body .btn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.trivia-answer:disabled{opacity:1;cursor:default}.trivia-answer[data-result="correct"]{border-color:#79b8a2;background:#15312b;color:#d6f2e8}.trivia-answer[data-result="incorrect"]{border-color:#bb9873;background:#35291e;color:#f4dfc7}
.trivia-feedback{font-size:.95rem;margin:20px 0 0}.trivia-feedback:empty{display:none}.trivia-feedback[data-result]{border-left:3px solid var(--cyan);padding-left:14px;color:var(--white)}.trivia-actions{display:flex;gap:10px;margin-top:24px}.trivia-actions:has(button:not([hidden])){min-height:46px}
@media(max-width:760px){.trivia-layout{grid-template-columns:1fr}.trivia-intro p{max-width:580px}.trivia-topline{padding:16px 18px}}