:root{--blue:#006D6B;--navy:#003C4C;--mist:#edf6f5;--sea:#45B5A0;--y:#F4C400;--g:#2E9E5B;--a:#E0A100;--r:#C0392B}
*{box-sizing:border-box}body{margin:0;font-family:Raleway,system-ui,sans-serif;color:var(--navy);background:#fff;line-height:1.45}
.wrap{max-width:640px;margin:0 auto;padding:0 16px}
header{background:#fff;color:var(--navy);border-bottom:3px solid var(--sea)}header .wrap{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.brand{color:var(--navy);text-decoration:none;font-weight:800;font-size:18px;display:flex;flex-direction:column}.brand small{font-weight:400;font-size:11px;opacity:.8}
nav a{color:var(--navy);font-weight:600;margin-left:14px;font-size:14px;text-decoration:none}.logo{height:44px;width:auto;display:block}
h1{font-family:Cinzel,serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:21px;margin:18px 0 6px}h2{font-size:18px}
.banner{background:var(--mist);border-left:4px solid var(--blue);padding:10px 12px;border-radius:6px;margin:14px 0;font-size:14px}
.draft{display:inline-block;background:var(--mist);border:1px solid var(--sea);font-size:11px;padding:2px 8px;border-radius:10px;margin:4px 0}
.card{border:1px solid #d6e2ec;border-radius:10px;padding:14px;margin:10px 0;background:#fff}
.case{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--navy)}
.tag{font-size:11px;background:var(--mist);color:var(--blue);padding:2px 8px;border-radius:10px;font-weight:600}
button,.btn{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:11px 16px;font:600 15px Raleway,sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
button.sec{background:var(--mist);color:var(--navy)}button:disabled{opacity:.5}
input{width:100%;padding:11px;border:1px solid #b9cbd9;border-radius:8px;font:15px Raleway,sans-serif;margin:4px 0 10px}
label{font-size:13px;font-weight:600}
img.case{width:100%;border-radius:8px;border:1px solid #d6e2ec;background:#000}
.credit{font-size:11px;color:#557;margin:2px 0 10px}.credit a{color:var(--blue)}
.ta{position:relative}.sugg{position:absolute;z-index:5;left:0;right:0;top:48px;background:#fff;border:1px solid #b9cbd9;border-radius:8px;max-height:220px;overflow:auto}
.sugg div{padding:9px 11px;cursor:pointer;font-size:14px}.sugg div:hover,.sugg div.on{background:var(--mist)}
.guess{padding:8px 11px;border-radius:8px;margin:4px 0;font-size:14px;font-weight:600;color:#fff}
.correct{background:var(--g)}.amber{background:var(--a)}.wrong{background:#7a8a99}.wrongm{background:var(--r)}
.clue{background:var(--mist);border-radius:8px;padding:9px 11px;margin:6px 0;font-size:14px}.clue b{color:var(--blue)}
.opt{display:block;width:100%;text-align:left;margin:6px 0;background:#fff;color:var(--navy);border:1px solid #b9cbd9;font-weight:400}
.opt.correct,.opt.wrongm{color:#fff}
.refer{border-left:4px solid var(--y);background:#fffbea;padding:10px 12px;border-radius:6px}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:7px;border-bottom:1px solid #e3ebf1;text-align:left}
.tabs button{margin-right:6px;padding:7px 12px;font-size:13px}.grid{font-size:26px;letter-spacing:2px}
footer{font-size:11px;color:#667;margin-top:30px;padding-bottom:30px}.err{color:var(--r);font-size:14px}

h2{font-family:Cinzel,serif;font-weight:600}footer .fb{border-top:2px solid var(--sea);padding-top:10px;color:var(--navy);font-size:12px}footer .fb b{font-family:Cinzel,serif}
@media(max-width:480px){.logo{height:34px}nav a{margin-left:9px;font-size:13px}}

/* game show layer */
body{background:#f3f8f7}
header{position:relative}.logo{height:54px}
.cstrip{position:sticky;top:0;z-index:20;background:var(--navy);font-size:13px}.cstrip .wrap{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:7px 16px}.cstrip a{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap}.cstrip a:hover,.cstrip a:focus{text-decoration:underline}
.stage{position:relative;overflow:hidden;margin:14px 0;padding:26px 18px 22px;border-radius:16px;color:#fff;text-align:center;background:radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.35),transparent 55%),linear-gradient(160deg,var(--teal,#006D6B),var(--navy) 75%);box-shadow:0 10px 30px rgba(0,60,76,.25)}
.stage:before{content:"";position:absolute;inset:-40% 30% auto;height:140%;background:conic-gradient(from 180deg,transparent 40%,rgba(69,181,160,.35) 50%,transparent 60%);animation:sweep 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes sweep{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.stage h1{font-size:30px;margin:0;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);position:relative}.stage .sub{position:relative;font-size:15px;opacity:.95;margin:6px 0 0}
.stage .kicker{position:relative;display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--sea);border-radius:20px;padding:3px 12px;margin-bottom:10px}
.stats{position:relative;display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:8px 14px;min-width:92px}.stat b{display:block;font-size:22px}.stat small{font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.flame{display:inline-block;animation:flick 1.2s ease-in-out infinite}@keyframes flick{50%{transform:scale(1.15) rotate(-6deg)}}
.cd{font-variant-numeric:tabular-nums;letter-spacing:.04em}
button,.btn{border-radius:12px;font-weight:700;box-shadow:0 4px 0 var(--navy);transition:transform .08s,box-shadow .08s}button:active,.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}button.sec,.btn.sec{box-shadow:0 4px 0 #b9cbd9}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
.card{border-radius:14px;box-shadow:0 2px 10px rgba(0,60,76,.06)}a.card.case{transition:transform .12s}a.card.case:hover{transform:translateY(-2px);border-color:var(--sea)}
.play{background:var(--blue);color:#fff;border-radius:10px;padding:6px 12px;font-weight:700;font-size:14px}
.clue,.guess{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}@keyframes pop{from{opacity:0;transform:scale(.85) translateY(8px)}}
.clue{border-left:4px solid var(--sea);font-size:15px}
.reveal{border:2px solid var(--blue)!important;animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}.reveal h2{font-size:22px}
.score{font-size:34px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums}
.gbar{display:flex;gap:4px;margin:8px 0}.gbar i{flex:1;height:8px;border-radius:4px;background:#d6e2ec}.gbar i.u{background:var(--sea)}
#cf{position:fixed;inset:0;pointer-events:none;z-index:50}
footer{background:#fff;border-top:3px solid var(--sea);margin-top:30px;padding:18px 0 30px;font-size:12px}footer .fb{border:0;padding:0}footer a{color:var(--blue)}.flogo{height:44px;display:block;margin-bottom:6px}
.soc{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.soc a{background:var(--mist);border-radius:16px;padding:5px 11px;font-weight:600;text-decoration:none}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
@media(max-width:480px){.logo{height:40px}.stage h1{font-size:24px}.cstrip{font-size:12px}.cstrip .wrap{gap:10px}}

/* wrong-guess + windows */
.wbox{display:flex;flex-direction:column;gap:2px;background:var(--r);color:#fff;border-radius:12px;padding:12px 14px;margin:10px 0;box-shadow:0 4px 0 #8e2a20;animation:shake .5s ease both}
.wbox b{font-size:20px;font-family:Cinzel,serif;letter-spacing:.02em}.wbox span{font-size:14px}.wbox.mcq b{font-size:17px}.wbox.out{background:var(--navy);box-shadow:0 4px 0 #001f28}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.rbox{background:var(--g);color:#fff;border-radius:10px;padding:9px 12px;margin-top:8px;font-weight:600;font-size:14px}
.sec-h{margin:22px 0 4px}.sec-h small{font-family:Raleway,sans-serif;font-size:12px;font-weight:500;opacity:.7}
.live{color:var(--g);font-size:12px;font-weight:800;letter-spacing:.05em}.card.cur{border:2px solid var(--sea)}
.tag.prac{background:#fff3cd;color:#7a5b00}.nt{font-size:22px;color:#9aa9b6}.prac-b{border-left-color:var(--y);background:#fffbea}
.how p{margin:8px 0}
nav a{white-space:nowrap}@media(max-width:480px){nav a[href="#/how"]{display:none}}