*{box-sizing:border-box}
:root{
  --red:#FF1A1A;
  --dark:#111;
  --muted:#666;
  --bg:#fff;
  --panel:#f5f5f5;
  --stroke:#e8e8e8;
}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--dark);
}
.wrap{max-width:1040px;margin:0 auto;padding:24px}
.top h1{margin:0 0 6px 0;font-weight:800;letter-spacing:-0.02em}
.top p{margin:0;color:var(--muted)}
.panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:10px 14px;
  margin:16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.info{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.info b{color:var(--dark)}
.tips{color:var(--muted)}
.btn{
  background:var(--red);
  color:#fff;border:0;border-radius:10px;
  padding:10px 16px;font-weight:700;cursor:pointer
}
.btn:hover{filter:brightness(0.95)}
.game{border:2px solid var(--stroke);border-radius:16px;overflow:hidden}
.legend{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.pill{display:flex;align-items:center;gap:8px;border:1px solid var(--stroke);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
.ico{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--stroke);position:relative}
.ico.shield{background:var(--red)}
.ico.double{background:#111}
.ico.boost{background:gold}
.foot{margin-top:12px;color:var(--muted)}