:root{
  --bg:#0f1226; --card:#1b2040; --card2:#232a54; --ink:#eef1ff; --muted:#9aa3d0;
  --accent:#6c8cff; --accent2:#8a6cff; --good:#28c76f; --bad:#ff5c7c; --gold:#ffc53d;
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:-apple-system,Segoe UI,Roboto,sans-serif;background:
  radial-gradient(1200px 600px at 50% -10%,#20264f 0,var(--bg) 60%);
  color:var(--ink);overflow-x:hidden}
#app{max-width:560px;margin:0 auto;min-height:100%;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.screen{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;gap:18px}
.logo{font-size:64px}
.spinner{width:34px;height:34px;border:3px solid #333a66;border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.hello{font-size:15px;color:var(--muted)}
.hello b{color:var(--ink);font-size:17px}
.stats{display:flex;gap:8px}
.chip{background:var(--card);border-radius:999px;padding:7px 12px;font-weight:700;font-size:14px;display:flex;gap:6px;align-items:center}
.chip.xp{color:var(--accent)} .chip.coin{color:var(--gold)}

h1{font-size:22px;margin:6px 0 14px}
.sub{color:var(--muted);font-size:14px;margin:-8px 0 16px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;cursor:pointer;
  transition:transform .1s, box-shadow .1s}
.tile:active{transform:scale(.97)}
.tile .emo{font-size:30px}
.tile .name{font-weight:700;margin-top:8px}
.tile .cnt{color:var(--muted);font-size:13px;margin-top:2px}

.btn{display:block;width:100%;border:0;border-radius:14px;padding:15px;font-size:16px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));cursor:pointer;margin-top:10px}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.sm{padding:11px;font-size:14px}

.qcard{background:var(--card);border-radius:var(--radius);padding:18px;margin-top:8px}
.qmeta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:10px}
.qtext{font-size:19px;font-weight:700;line-height:1.35;margin:6px 0 14px}
.qimg{font-size:72px;text-align:center;margin:6px 0 14px}
.opt{background:var(--card2);border:2px solid transparent;border-radius:14px;padding:14px;margin:9px 0;
  font-size:16px;cursor:pointer;transition:.12s}
.opt:active{transform:scale(.99)}
.opt.good{border-color:var(--good);background:rgba(40,199,111,.16)}
.opt.bad{border-color:var(--bad);background:rgba(255,92,124,.16)}
input.answer{width:100%;background:var(--card2);border:2px solid #33407a;border-radius:14px;
  padding:14px;color:var(--ink);font-size:16px}
input.answer:focus{outline:none;border-color:var(--accent)}
.hintn{color:var(--muted);font-size:13px;margin:8px 2px}

.feedback{margin-top:14px;border-radius:14px;padding:14px;font-size:15px;animation:fade .2s}
.feedback.good{background:rgba(40,199,111,.14);border:1px solid var(--good)}
.feedback.bad{background:rgba(255,92,124,.14);border:1px solid var(--bad)}
.feedback .ttl{font-weight:800;margin-bottom:4px}
.feedback .exp{color:var(--muted);margin-top:6px;font-size:14px;line-height:1.4}

.progressbar{height:8px;background:var(--card);border-radius:99px;overflow:hidden;margin-bottom:14px}
.progressbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}

.result-emo{font-size:70px;text-align:center}
.big{font-size:40px;font-weight:800;text-align:center}
.rewards{display:flex;gap:12px;justify-content:center;margin:16px 0}
.reward{background:var(--card);border-radius:14px;padding:12px 16px;text-align:center;min-width:90px}
.reward .v{font-size:22px;font-weight:800}
.reward .l{color:var(--muted);font-size:12px}

.row{display:flex;justify-content:space-between;background:var(--card);border-radius:12px;padding:12px 14px;margin:8px 0}
.row .l{color:var(--muted);font-size:14px}
.row .v{font-weight:700}
.timer{font-weight:800;color:var(--gold)}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:20px;animation:fade .15s ease}
.modal-box{background:var(--card);border-radius:var(--radius);padding:26px 22px;max-width:340px;
  width:100%;text-align:center}
.modal-box h2{margin:0 0 6px;font-size:20px}
.modal-box .sub{margin:0}
.chip.coin{cursor:pointer}
.opt.sel{border-color:var(--accent);background:rgba(108,140,255,.16)}
.duel-banner{background:linear-gradient(135deg,var(--accent2),var(--accent));border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;cursor:pointer}
.duel-banner .t{font-weight:700}
.duel-banner .s{color:rgba(255,255,255,.85);font-size:13px;margin-top:2px}