*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:radial-gradient(circle,#fff,#ccc);color:#222;padding:16px}
.g-sob{--bg:#9dd2ea;--sh:#009de4;--q:#9da0ea;--qs:#535aa8;--i:#b481d9;--is:#8153a8;--hit:#9c89f6}
.g-mno{--bg:#f6c98b;--sh:#e08a14;--q:#f39c8b;--qs:#b5523f;--i:#7fcf9a;--is:#3f8f5a;--hit:#e0702e}
.g-pow{--bg:#e3c6f0;--sh:#8a3fb0;--q:#f3e38d;--qs:#b39a1f;--i:#9fc7f2;--is:#4a7fb8;--hit:#8a3fb0}
.g-tab{--bg:#ffd6a5;--sh:#e07b00;--q:#a0c4ff;--qs:#3d6fc2;--i:#caffbf;--is:#5aa84a;--hit:#e07b00}
.g-alg{--bg:#c9e4f6;--sh:#2f7fb8;--q:#ffe08a;--qs:#c49a12;--i:#f7b7c9;--is:#c25a7a;--hit:#2f7fb8}
.g-prop{--bg:#d4f0d0;--sh:#3b9a4f;--q:#ffc8a8;--qs:#c26a3a;--i:#c9c4f7;--is:#6a5fc2;--hit:#3b9a4f}
.g-real{--bg:#fde2c4;--sh:#c4701f;--q:#c9e9f6;--qs:#2f87ad;--i:#d9f2c4;--is:#5a9a2f;--hit:#c4701f}
.g-a100{--bg:#fde2e4;--sh:#d1495b;--q:#bde0fe;--qs:#3a86c8;--i:#fff3b0;--is:#c9a227;--hit:#d1495b}
.g-a10{--bg:#fff1c1;--sh:#e0a800;--q:#c3f0ca;--qs:#3a9d4f;--i:#d7c8f5;--is:#7a5cc4;--hit:#e0a800}
.g-s10{--bg:#d8f3dc;--sh:#40916c;--q:#ffd6e0;--qs:#c9184a;--i:#cde7ff;--is:#3a7bd5;--hit:#40916c}
.g-s100{--bg:#e2d9f3;--sh:#6f42c1;--q:#fff0b3;--qs:#c49b00;--i:#c8f1e7;--is:#2a9d8f;--hit:#6f42c1}
.g-del{--bg:#b6e3b0;--sh:#3e9d34;--q:#8fd3d0;--qs:#2f8783;--i:#f1d36b;--is:#b2952a;--hit:#2f8783}
.back{display:block;max-width:590px;margin:0 auto 10px;color:#333;font-size:15px}
#container{max-width:590px;margin:20px auto;padding:20px;border-radius:10px;background:var(--bg);box-shadow:0 4px 0 0 var(--sh);position:relative}
.bar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
h1{margin:0;font-size:20px;flex:1 1 200px}
.stats{display:flex;gap:10px}
#score,#miss,#clock{background:#f1ff92;color:#5f6438;box-shadow:0 4px 0 0 #9da853;padding:10px 12px;font-weight:600;white-space:nowrap}
#miss{background:#ffd0c4;color:#8a2f17;box-shadow:0 4px 0 0 #c9765f}
#clock{background:#afe64b;color:#2f4a07;box-shadow:0 4px 0 0 #7fae2a;font-variant-numeric:tabular-nums}
.low #clock{background:#ff6b4a;color:#fff;box-shadow:0 4px 0 0 #b33a1f}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.iwrap{position:relative;max-width:450px;margin:12px auto 10px}
#msg{position:absolute;inset:0;z-index:1;pointer-events:none}
#correct,#wrong{display:none;height:100%;padding:12px;color:#fff;background:#2e9e3a;font-weight:700;text-align:center}
#wrong{background:#c0391b}
#question{max-width:450px;margin:6px auto 0;height:130px;background:var(--q);border-radius:3px;box-shadow:0 4px 0 0 var(--qs);font-size:clamp(34px,10vw,64px);font-weight:700;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
#question.long{font-size:clamp(26px,7.5vw,46px)}
#question .cap{font-size:16px;font-weight:600;opacity:.8;white-space:normal}
.box.long{font-size:clamp(16px,4.6vw,21px)}
#info{margin:0;background:var(--i);box-shadow:0 4px var(--is);padding:12px;text-align:center}
#choices{max-width:450px;margin:14px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.box{height:80px;background:#fff;border:0;border-radius:3px;box-shadow:0 4px rgba(0,0,0,.2);font-family:inherit;font-size:28px;font-weight:700;line-height:80px;color:#222;cursor:pointer;position:relative;padding:0}
.box:active,#start-reset:active{top:4px;background:var(--hit);color:#fff;box-shadow:none}
.box:focus-visible,#start-reset:focus-visible{outline:3px solid #222;outline-offset:2px}
#start-reset{display:block;min-width:130px;margin:14px auto 4px;padding:10px 16px;background:rgba(255,255,255,.6);border:0;border-radius:3px;box-shadow:0 4px rgba(0,0,0,.2);font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;position:relative}
#game-over{display:none;position:absolute;left:20px;right:20px;top:90px;z-index:2;padding:30px 16px;background:linear-gradient(#f3c76b,#f3746c);color:#fff;font-size:clamp(22px,6vw,36px);text-transform:uppercase;text-align:center;border-radius:6px}
#game-over p{margin:6px 0 14px}
.rep{list-style:none;margin:0;padding:0;font-size:.6em;text-transform:none;line-height:1.6}
.rep b{font-size:1.25em}
@media(max-width:420px){#choices{grid-template-columns:repeat(2,1fr);gap:10px}#question{height:110px}.box{height:70px;line-height:70px}h1{font-size:18px}.stats{gap:8px}#score,#miss,#clock{padding:8px 10px;font-size:15px}#container{padding:14px}}
#question sup,.box sup{font-size:.55em;line-height:0}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1;font-size:.8em}
.fr span:first-child{border-bottom:2px solid currentColor;padding:0 2px}
.idle #question{font-size:clamp(20px,6vw,30px);font-weight:600}
.idle #choices,.idle .iwrap{display:none}