:root { color-scheme:dark; --gold:#f0d798; --mint:#66dec5; --ink:#08302f; --panel:#104240 }
* { box-sizing:border-box }
[hidden] { display:none !important }
body { margin:0; background:radial-gradient(ellipse at top left,#174b43,#082d2d 60%); color:#f2faf7; font:16px/1.8 Tahoma,Arial,sans-serif; min-height:100vh }
a { color:var(--gold); text-decoration:none }
button,.game-nav a { font:inherit; padding:9px 15px; border:1px solid #6f9788; border-radius:10px; background:#174b48; color:#f2faf7; cursor:pointer }
button:disabled { cursor:default }
button:focus-visible,a:focus-visible { outline:3px solid var(--mint); outline-offset:3px }
.primary { background:var(--gold)!important; color:var(--ink)!important; font-weight:bold!important; border-color:var(--gold)!important }
.primary:disabled,#undo:disabled { opacity:.55 }
.game-nav { position:sticky; top:0; z-index:2; display:flex; justify-content:center; flex-wrap:wrap; gap:9px; background:#082d2df5; padding:10px 12px; border-bottom:1px solid #5e8274 }
main { width:min(760px,94%); margin:24px auto 35px }
.intro { text-align:center; margin-bottom:22px }
.intro small,#stats { color:var(--mint) }
#game-icon { font-size:39px; color:var(--gold); line-height:1.2 }
h1,h2 { color:var(--gold); margin:8px 0 }
h1 { font-size:clamp(28px,6vw,44px) }
h2 { font-size:23px }
.intro p { margin:0 auto; color:#c5e0d9 }
.panel { background:var(--panel); border:1px solid #5b8279; border-radius:18px; padding:clamp(14px,4vw,28px) }
#stats { font-size:13px }
progress { width:100%; height:7px; accent-color:var(--gold) }
#clue { line-height:1.95; margin:12px 0 18px }
#options { display:grid; gap:8px }
.option { text-align:start }
.option:not(:disabled):hover { border-color:var(--gold); background:#1b5a54 }
.option[data-order]::before { content:attr(data-order); display:inline-grid; place-items:center; width:23px; height:23px; border-radius:50%; margin-inline-end:8px; color:var(--ink); background:var(--gold) }
[data-result=correct] { color:#b0f7db!important; border-color:#6ddbb7!important; background:#195d4e!important }
[data-result=wrong] { color:#ffe5cb!important; border-color:#e0a784!important; background:#593b31!important }
#feedback { margin:13px 0 0; border-radius:8px }
#feedback:not(:empty) { padding:9px 12px; animation:reveal .25s ease }
.actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:12px }
.result { text-align:center }
.result a { display:inline-block; margin-inline-start:12px }
footer { text-align:center; padding:10px 14px 24px; font-size:12px; color:#a9c8bd }
@keyframes reveal { from { opacity:.25; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }
@media(prefers-reduced-motion:reduce) { #feedback { animation:none!important } }