:root{--bg: #05060e;--panel: #0d1024;--ink: #cfe3ff;--dim: #6f7da0;--accent: #7cf0c8;--warn: #ff7a7a;--good: #8effa8}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px}h1{margin:0;font-size:20px;letter-spacing:3px;color:var(--accent);font-weight:700}.wrap{position:relative;width:min(1000px,96vw)}canvas{width:100%;height:auto;display:block;border:1px solid #1c2546;border-radius:8px;background:#03040a;touch-action:none}.hud{display:flex;flex-wrap:wrap;gap:8px 18px;width:min(1000px,96vw);padding:8px 12px;background:var(--panel);border:1px solid #1c2546;border-radius:8px;font-variant-numeric:tabular-nums;font-size:14px}.hud .k{color:var(--dim);margin-right:5px}.hud .v{color:var(--ink);font-weight:600}.hud .v.warn{color:var(--warn)}.hud .standing{flex-basis:100%;margin:0;font-size:13px;color:var(--good)}.hud .standing:empty{display:none}.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}button{background:#15203f;color:var(--ink);border:1px solid #2b3a66;border-radius:6px;padding:7px 12px;font-size:13px;cursor:pointer}button:hover{background:#1d2c54}button.primary{background:#1c5a48;border-color:#2c8a6f;color:#d6fff0}select{background:#15203f;color:var(--ink);border:1px solid #2b3a66;border-radius:6px;padding:6px 8px}.hint{color:var(--dim);font-size:12px}