:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#06070c;--ink:#e7f6ff;--dim:#8ea3b8;--line:#5ee0ff66;--accent:#5ee0ff;font-family:Avenir Next,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0;overflow:hidden}body{touch-action:none;overscroll-behavior:none;width:100%;position:fixed;inset:0}.app{height:100dvh;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));background:radial-gradient(900px 420px at 50% -10%, #468cff2e, transparent 60%), radial-gradient(700px 380px at 100% 100%, #28dcc814, transparent 55%), var(--bg);flex-direction:column;gap:8px;display:flex;overflow:hidden}.hud{flex-direction:column;gap:6px;display:flex}.title-row,.stats,.lives,.buttons{align-items:center;display:flex}.title-row{justify-content:space-between}h1{letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 18px #5ee0ff59;margin:0;font-size:1.35rem;font-weight:650}.tag,.stats span,.lives>span{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem}.stats{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stats div,.lives{background:#080e16b8;border:1px solid #5ee0ff2e;border-radius:10px;padding:6px 10px}.stats strong{letter-spacing:.06em;color:var(--ink);margin-top:2px;font-family:SF Mono,ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;display:block}.lives{justify-content:space-between}.lives div{gap:4px;display:flex}.life{display:block}.board{border:1px solid var(--line);background:#070b12;border-radius:16px;flex:1;min-height:0;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0006,0 20px 60px #00000059}canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.overlay{pointer-events:none;background:linear-gradient(#04060a14,#04060a47);place-items:center;display:grid;position:absolute;inset:0}.card{text-align:center;border:1px solid var(--line);min-width:min(280px,86%);color:var(--ink);background:#060a10d1;border-radius:14px;padding:16px 18px;box-shadow:0 0 30px #5ee0ff1f}.card strong{letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;display:block}.card p{color:var(--dim);margin:0;line-height:1.45}.card.ready{letter-spacing:.22em;text-transform:uppercase;font-size:1.4rem}.bar{flex-direction:column;align-items:center;gap:8px;display:flex}.buttons{flex-wrap:wrap;justify-content:center;gap:8px}button{appearance:none;color:var(--ink);min-height:44px;font:inherit;letter-spacing:.08em;text-transform:uppercase;background:#0d141d;border:1px solid #5ee0ff59;border-radius:999px;padding:0 16px;font-size:.78rem}button:hover:not(:disabled){border-color:var(--accent);color:#fff}button:disabled{opacity:.4}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dpad{touch-action:none;grid-template-columns:72px 72px 72px;grid-template-areas:".up.""left.right"".down.";gap:8px;display:none}.dpad button{border-radius:18px;width:72px;height:72px;font-size:.68rem}@media (pointer:coarse),(width<=820px){.dpad{display:grid}h1{font-size:1.1rem}}
