*{box-sizing:border-box}:root{--bg: #0c1320;--panel: #15203a;--ink: #e8eefb;--muted: #8ea2c8;--accent: #6fd3ff;--t0: #ffcf5c;--t1: #ff6f91}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px}h1{font-size:20px;margin:4px 0;letter-spacing:1px}h1 small{color:var(--muted);font-weight:400;font-size:12px}.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}button,select{background:var(--panel);color:var(--ink);border:1px solid #2c3c63;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}button:hover{border-color:var(--accent)}button.active{background:var(--accent);color:#06121f;font-weight:700}button:disabled{opacity:.4;cursor:default}.hud{display:flex;gap:16px;align-items:center;font-size:13px}.tag{padding:3px 8px;border-radius:6px;font-weight:700}.tag.t0{color:#06121f;background:var(--t0)}.tag.t1{color:#06121f;background:var(--t1)}.muted{color:var(--muted)}#wrap{position:relative}canvas{background:linear-gradient(#0a2a4a,#103a5a);border-radius:10px;border:1px solid #233a63;touch-action:none}.weapons{display:flex;gap:6px}.power{display:flex;align-items:center;gap:8px;font-size:12px}input[type=range]{width:160px}.banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#060c19c7;border-radius:10px}.banner h2{margin:0;font-size:30px}.hidden{display:none}.hint{font-size:12px;color:var(--muted);max-width:860px;text-align:center}