*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0,#2b2f38,#16181c 70%);color:#e8e8e8;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;max-width:640px;margin:0 auto;padding:20px;text-align:center;width:100%}
h1{font-size:clamp(1.6rem,5vw,2.4rem);margin:.3em 0 0;line-height:1.1}h1 span{color:#f0913a}.sub{color:#aab;margin:.4em 0 1em}
#hud{display:flex;justify-content:space-between;font-weight:600;color:#ccd}
#you{width:170px;height:170px;margin:6px auto;display:block}
.part{fill:#f0b45a;transition:all .6s}.cheek{fill:#f08a6a;transition:all .6s}.eye{fill:#2a1a10;stroke:#2a1a10}
#youlbl{fill:#e8e8e8;font:700 18px system-ui,sans-serif;letter-spacing:1px}
.hit1 .part{fill:#c9a77a;rx:30px;ry:30px}.hit1 .cheek{fill:#b99a8a}
.hit2 .part{fill:#9a9a9a;rx:8px;ry:8px}.hit2 .cheek{fill:#9a9a9a}.hit2 .eye{rx:1px;ry:1px}.hit2 #smile{stroke-linecap:butt}
#cube{opacity:0;transform-origin:100px 108px;transform:scale(.2) rotate(-90deg);transition:all .9s cubic-bezier(.3,1.6,.5,1)}
#mk{transform-origin:100px 100px;transition:all .7s}
.dead #mk{opacity:0;transform:scale(.3) rotate(180deg)}.dead #cube{opacity:1;transform:none}
.hurt #mk{animation:shake .4s}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.card{background:#23262d;border:1px solid #333843;border-radius:14px;padding:22px;margin:10px 0}
#q{font-size:clamp(1.3rem,4.5vw,1.9rem);font-weight:700;min-height:2.6em;display:flex;align-items:center;justify-content:center}
#bar{height:10px;background:#111;border-radius:6px;overflow:hidden}#fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e05252,#f0913a,#5ec46b)}
#fb{min-height:2.4em;margin-top:12px;font-size:1.1rem}.ok{color:#5ec46b}.bad{color:#ff7b7b}
kbd{background:#eee;color:#111;border-radius:5px;padding:2px 8px;box-shadow:0 2px 0 #999;font-weight:700;margin:0 2px}
.btn{display:inline-block;background:#f0913a;color:#111;border:0;border-radius:9px;padding:10px 18px;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;margin:4px}
.ghost{background:#333843;color:#eee}.row{margin:10px 0}.big{font-size:1.3rem}
.cta{display:block;margin-top:14px;background:#5ec46b;color:#0d1f10;border-radius:10px;padding:14px;font-weight:800;font-size:1.15rem;text-decoration:none}
.hint{color:#aab;font-size:.9rem;margin:.6em 0 0}
.mode{background:#333843;color:#eee;border:1px solid #444a57;border-radius:999px;padding:8px 16px;font-size:.95rem;cursor:pointer;margin:8px 0 0;min-height:44px}
#opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}#opts:empty{display:none}
.opt{min-height:76px;font-size:1.25rem;font-weight:800;border-radius:14px;border:2px solid #444a57;background:#2e323b;color:#fff;cursor:pointer;touch-action:manipulation;padding:8px}
.opt:focus-visible{outline:3px solid #f0913a;outline-offset:2px}.opt:active{transform:scale(.97)}
.opt.right{background:#2f6b3a;border-color:#5ec46b}.opt.wrong{background:#7a2f2f;border-color:#ff7b7b}.opt:disabled{cursor:default}
@media (max-width:600px){main{padding:12px}.sub{font-size:.9rem}#you{width:110px;height:110px}.card{padding:16px}#q{min-height:2.2em}}
.about{color:#99a;font-size:.9rem;text-align:left}.about h2{font-size:1rem;color:#ccd}
footer{text-align:center;padding:16px;color:#889;font-size:.9rem}footer a{color:#f0913a}
.hit2 #smile{d:path("M78 118 L122 118")}