*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Trebuchet MS",system-ui,sans-serif;background:#f1f3f5;color:#222;touch-action:manipulation}
a{color:inherit}
.top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1c3d5a;color:#fff;flex-wrap:wrap}
.top h1{font-size:20px;margin:0 auto 0 0}
.chip{border:0;border-radius:20px;padding:8px 14px;font-size:15px;background:#fff3;color:#fff;cursor:pointer}
.chip.on{background:#ffd43b;color:#222}
.btn{border:0;border-radius:14px;padding:12px 20px;font-size:18px;font-weight:bold;cursor:pointer;background:#228be6;color:#fff;box-shadow:0 4px 0 #0005}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0005}
.btn.green{background:#2f9e44}.btn.pink{background:#e64980}.btn.gray{background:#868e96}.btn.gold{background:#f59f00}
#stage{display:block;width:min(100%,900px,calc((100vh - 250px) * 1.5));width:min(100%,900px,calc((100dvh - 250px) * 1.5));margin:8px auto;border-radius:16px;background:#2b8a3e;aspect-ratio:3/2}
.hud{max-width:900px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:0 8px;font-weight:bold;font-size:18px}
.center{text-align:center;margin:10px}
.overlay{position:fixed;inset:0;background:#0007;display:flex;align-items:center;justify-content:center;z-index:10;padding:10px}
.card{background:#fff;border-radius:22px;max-width:720px;width:100%;max-height:94vh;overflow:auto;padding:18px;box-shadow:0 10px 40px #0006}
.qtext{font-size:24px;white-space:pre-wrap;margin:6px 0 14px;line-height:1.35}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{font-size:24px;padding:18px 10px;border-radius:16px;border:4px solid #dee2e6;background:#f8f9fa;cursor:pointer;min-height:76px}
.choice.big{font-size:54px;min-height:120px}
.choice.right{background:#d3f9d8;border-color:#2f9e44}.choice.wrong{background:#ffe3e3;border-color:#e03131}
.timer{height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;margin-bottom:10px}.timer i{display:block;height:100%;background:linear-gradient(90deg,#2f9e44,#f59f00,#e03131);width:0}
.meta{font-size:13px;color:#868e96;display:flex;justify-content:space-between}
.result{font-size:28px;font-weight:bold;text-align:center;margin:8px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.learn img{width:100%;max-width:360px;display:block;margin:8px auto;border-radius:14px}
.learn .emo{font-size:70px;text-align:center}
.learn p{font-size:21px;line-height:1.5}
.say{background:none;border:0;font-size:26px;cursor:pointer}
table{border-collapse:collapse;width:100%;background:#fff}td,th{border:1px solid #dee2e6;padding:8px;text-align:center}
.bar{height:14px;background:#e9ecef;border-radius:7px;overflow:hidden}.bar i{display:block;height:100%;background:#228be6}

.choice.picked{background:#d0ebff;border-color:#1971c2}
#ctl{margin:6px}
@media (orientation:portrait){.top h1{font-size:18px}}