:root{--bg:#faf6ee;--fg:#241f19;--mu:#6b6257;--card:#fff;--ln:#e4dccb;--ac:#8a5a14;--ac2:#c58a2b;--acbg:#f3e6cc;--ok:#1f7a4d;--okbg:#e2f3e9;--bad:#b23a2e;--badbg:#f9e4e1;--ob:#f8ece8;--rp:#e6f1ed;--sh:0 6px 20px rgba(60,40,10,.08);--r:14px}
[data-theme="dark"]{--bg:#15120d;--fg:#efe8da;--mu:#a69c8b;--card:#211d16;--ln:#3a3328;--ac:#e0b062;--ac2:#f2cd86;--acbg:#3a2e17;--ok:#6fd49b;--okbg:#17301f;--bad:#f08a7e;--badbg:#3a1d19;--ob:#2c1f1b;--rp:#16292a;--sh:0 6px 20px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 Georgia,"Times New Roman",serif;transition:background .4s,color .4s}
#prog{position:fixed;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--ac),var(--ac2));transform-origin:0 50%;transform:scaleX(0);z-index:20}
header{position:relative;overflow:hidden;padding:56px 20px 36px;text-align:center}
header::before,header::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(70px);opacity:.35;z-index:0;animation:float 14s ease-in-out infinite}
header::before{background:var(--ac2);left:-80px;top:-120px}
header::after{background:#6aa6a0;right:-100px;top:-60px;animation-delay:-7s}
header>*{position:relative;z-index:1}
h1{font-size:clamp(2.4rem,8vw,3.8rem);margin:0;line-height:1.1;background:linear-gradient(90deg,var(--ac),var(--ac2),var(--ac));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.sub{color:var(--mu);max-width:560px;margin:12px auto 0;animation:up .8s .15s both}
header h1{animation:shine 6s linear infinite,up .8s both}
#theme{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--ln);background:var(--card);color:var(--fg);font-size:1.1rem;cursor:pointer;box-shadow:var(--sh);transition:transform .4s}
#theme:hover{transform:rotate(25deg) scale(1.08)}
main{max-width:780px;margin:0 auto;padding:0 16px 56px}
nav{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;position:sticky;top:0;z-index:10;padding:10px 0;background:linear-gradient(var(--bg) 70%,transparent)}
nav button{font:600 .92rem system-ui,sans-serif;padding:9px 16px;border:1px solid var(--ln);border-radius:999px;background:var(--card);color:var(--fg);cursor:pointer;transition:transform .2s,background .25s,color .25s,box-shadow .25s}
nav button:hover{transform:translateY(-2px);box-shadow:var(--sh)}
nav button.on{background:var(--ac);color:var(--bg);border-color:var(--ac)}
:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
section{display:none}section.on{display:block;animation:up .5s both}
.card{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:14px 18px;margin:12px 0;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-2px);border-color:var(--ac2)}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--d,0s),transform .6s var(--d,0s)}.rv.vis{opacity:1;transform:none}
.tag{display:inline-block;font:600 .72rem system-ui,sans-serif;background:var(--acbg);color:var(--ac);padding:2px 9px;border-radius:999px;margin-right:8px;vertical-align:2px}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:6px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font:400 1.4rem system-ui;color:var(--ac);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details.read{border-left:4px solid var(--ok)}
.body{overflow:hidden}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 4px}
@media(max-width:600px){.duel{grid-template-columns:1fr}}
.duel>div{padding:11px 13px;border-radius:10px;font-size:.95rem}
.duel b{display:block;font:700 .72rem system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
details[open] .duel>div{animation:up .5s both}details[open] .duel>div+div{animation-delay:.12s}
.ob{background:var(--ob)}.rp{background:var(--rp)}
input{width:100%;font:inherit;padding:11px 14px;border:1px solid var(--ln);border-radius:12px;background:var(--card);color:var(--fg);transition:border-color .2s,box-shadow .2s}
input:focus{outline:0;border-color:var(--ac2);box-shadow:0 0 0 3px var(--acbg)}
.row{display:flex;gap:12px;align-items:center;margin:12px 0}.row .bar{flex:1}.row span{font:600 .85rem system-ui,sans-serif;color:var(--mu);white-space:nowrap}
.bar{height:7px;background:var(--ln);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));border-radius:9px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
mark{background:var(--acbg);color:var(--ac);border-radius:3px;padding:0 2px}
.opt{display:block;width:100%;text-align:left;font:inherit;padding:12px 14px;margin:9px 0;border:1px solid var(--ln);border-radius:12px;background:var(--bg);color:var(--fg);cursor:pointer;animation:up .45s both;transition:transform .2s,border-color .2s,background .3s}
.opt:nth-of-type(2){animation-delay:.06s}.opt:nth-of-type(3){animation-delay:.12s}.opt:nth-of-type(4){animation-delay:.18s}
.opt:hover:not(:disabled){border-color:var(--ac2);transform:translateX(5px)}
.opt:disabled{cursor:default;color:var(--fg)}
.opt kbd{font:600 .75rem system-ui;background:var(--acbg);color:var(--ac);border-radius:6px;padding:1px 7px;margin-right:10px}
.opt.ok{background:var(--okbg);border-color:var(--ok);animation:pop .4s}
.opt.bad{background:var(--badbg);border-color:var(--bad);animation:shake .4s}
.btn{font:600 1rem system-ui,sans-serif;padding:11px 20px;border:0;border-radius:12px;background:var(--ac);color:var(--bg);cursor:pointer;margin:6px 8px 0 0;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}.btn.alt{background:var(--acbg);color:var(--ac)}
.ex{background:var(--acbg);padding:11px 14px;border-radius:12px;font-size:.95rem;animation:up .4s both}
.ring{display:block;margin:6px auto 12px}.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .t{stroke:var(--ln)}.ring .v{stroke:var(--ac);stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);transform:rotate(-90deg);transform-origin:50% 50%}
.ring text{font:700 24px system-ui;fill:var(--fg)}
.res{text-align:center}.miss{text-align:left;font-size:.93rem}
#fx{position:fixed;inset:0;pointer-events:none;z-index:30}
footer{text-align:center;color:var(--mu);font-size:.85rem;padding:0 16px 32px}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translate(40px,30px) scale(1.15)}}
@keyframes shine{to{background-position:200% center}}
@keyframes pop{50%{transform:scale(1.03)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}