:root{--bg: #07040a;--panel: #170f1f;--ink: #f6ecff;--muted: #a08cb6;--accent: #ff7a2f;--accent2: #ffd23f;--shield: #4fd6ff;--danger: #ff4d6d}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(130% 130% at 50% 0%,#1b0c22,#07040a 70%);color:var(--ink);font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased}#app{display:flex;justify-content:center;padding:14px 12px 28px}.wrap{width:min(100%,480px)}header h1{margin:0 0 4px;font-size:1.5rem;letter-spacing:.18em;color:var(--accent);text-shadow:0 0 16px rgba(255,122,47,.45)}.tag{margin:0 0 12px;font-size:.72rem;line-height:1.45;color:var(--muted)}.bar{display:flex;align-items:center;gap:8px;margin-bottom:10px}.spacer{flex:1}.seg{display:inline-flex;border:1px solid #36284a;border-radius:8px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:0;padding:6px 10px;font:inherit;font-size:.74rem;cursor:pointer}.seg button.active{background:var(--accent);color:#2a0f00;font-weight:700}button{background:var(--panel);color:var(--ink);border:1px solid #36284a;border-radius:8px;padding:6px 12px;font:inherit;font-size:.78rem;cursor:pointer}button:hover{border-color:#50406b}button.primary{background:var(--accent2);color:#2a2000;border-color:transparent;font-weight:700}.hud{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}.box{background:var(--panel);border:1px solid #271a35;border-radius:10px;padding:6px;text-align:center}.box .k{font-size:.56rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.box b{font-size:1rem}#lives{color:var(--accent);letter-spacing:2px}#shield{color:var(--shield)}.stage{position:relative;border:1px solid #271a35;border-radius:12px;background:#07040a;overflow:hidden;box-shadow:0 10px 40px #00000080}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#07040acc;backdrop-filter:blur(2px)}.overlay.hidden{display:none}.card{text-align:center;padding:20px 24px;background:var(--panel);border:1px solid #36284a;border-radius:14px;max-width:84%}.card h2{margin:0 0 8px;color:var(--accent);letter-spacing:.08em}.card p{margin:0 0 14px;font-size:.82rem;line-height:1.5;color:var(--ink)}.pad{display:grid;grid-template-columns:1fr 1.2fr 1.2fr 1fr;gap:8px;margin-top:10px}.pad button{padding:14px 0;font-size:.95rem;touch-action:none;user-select:none}.pad button[data-act=fire]{background:var(--danger);color:#2a0410;border-color:transparent;font-weight:700}.pad button[data-act=shield]{background:var(--shield);color:#04222e;border-color:transparent;font-weight:700}.hint{margin:10px 2px 0;font-size:.68rem;color:var(--muted);line-height:1.5}@media(hover:hover)and (pointer:fine){.pad{display:none}}