:root{--bg:#f1f2f5;--text:#1a1b1f;--muted:#676a75;--line:#dcdee5;--surface:#fff;--space:#0b0f24;--space-light:#161c3d;--frame:#1c2240;--squid:#f472b6;--crab:#a78bfa;--octopus:#67e8f9;--cannon:#4ade80;--shield:#22c55e;--ship:#f87171;--shot:#fef9c3;--bomb:#fb923c;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#101219;--text:#eceef4;--muted:#9fa3b0;--line:#272a36;--surface:#181b25;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0}a{color:inherit;text-underline-offset:3px}button{font:inherit;color:inherit}.muted{color:var(--muted)}.layout{gap:16px;max-width:640px;margin:0 auto;padding:32px 16px 64px;display:grid}.header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;display:flex}h1{letter-spacing:-.02em;margin:0;font-size:28px}h1+p{margin:4px 0 0;font-size:14px}h2{margin:0 0 8px;font-size:15px}.ghost{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:10px;padding:7px 14px;font-size:14px}.ghost:hover{background:var(--line)}.hud{align-items:center;gap:8px;display:flex}.stat{border:1px solid var(--line);background:var(--surface);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:6px;min-height:32px;padding:5px 10px;font-size:14px;font-weight:700;display:inline-flex}.stat small{color:var(--muted);font-size:12px;font-weight:500}.lives{color:var(--shield);gap:4px}.lives svg{width:18px;height:12px}.hud .status{text-align:center;flex:1;font-size:14px}.board{aspect-ratio:21/19;border:8px solid var(--frame);background:radial-gradient(1px 1px at 12% 20%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 33% 64%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 58% 12%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 81% 41%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 91% 8%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 22% 47%, #fff4 50%, transparent 51%), radial-gradient(1px 1px at 68% 77%, #fff4 50%, transparent 51%), radial-gradient(1px 1px at 46% 33%, #fff6 50%, transparent 51%), linear-gradient(var(--space), var(--space-light));-webkit-user-select:none;user-select:none;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 12px 32px #00000040}.ground{background:var(--cannon);opacity:.6;height:2px;position:absolute;bottom:0;left:0;right:0}.cell{place-items:center;width:4.7619%;height:5.26316%;display:grid;position:absolute}.cell svg{shape-rendering:crispedges;width:84%;height:76%;display:block}.invader.squid{color:var(--squid)}.invader.crab{color:var(--crab)}.invader.octopus{color:var(--octopus)}.invader svg{filter:drop-shadow(0 0 3px)}.shield{background:var(--shield);border-radius:2px;box-shadow:inset 0 0 0 1px #00000026}.shield.worn{background:radial-gradient(circle at 30% 40%, var(--space) 0 20%, transparent 21%), radial-gradient(circle at 72% 70%, var(--space) 0 18%, transparent 19%), var(--shield);opacity:.75}.cannon{color:var(--cannon)}.cannon svg{filter:drop-shadow(0 0 3px)}.cannon.hit{animation:.16s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.15}}.ship{width:9.52381%;color:var(--ship)}.ship svg{filter:drop-shadow(0 0 4px);width:90%;height:70%}.shot:before,.bomb:before{content:"";border-radius:2px;width:14%;height:80%}.shot:before{background:var(--shot);box-shadow:0 0 6px var(--shot)}.bomb:before{background:repeating-linear-gradient(170deg, var(--bomb) 0 3px, transparent 3px 4px);width:22%;box-shadow:0 0 6px var(--bomb)}.blast:before{content:"";aspect-ratio:1;background:radial-gradient(circle,#fff 0 15%,#fde047 30%,#fb923c 55%,#0000 70%);border-radius:50%;width:90%;animation:.25s ease-out forwards pop}@keyframes pop{0%{transform:scale(.4)}to{opacity:0;transform:scale(1.2)}}.overlay{color:#fff;text-align:center;background:#05081499;place-content:center;justify-items:center;gap:4px;animation:.3s ease-out fade;display:grid;position:absolute;inset:0}.overlay p{margin:0;font-size:18px;font-weight:600}.overlay .muted{color:#ffffffbf;font-size:14px;font-weight:400}.primary{color:#1a1b1f;cursor:pointer;background:#fff;border:0;border-radius:10px;margin-top:10px;padding:9px 18px;font-weight:600}@keyframes fade{0%{opacity:0}}.touch{touch-action:none;align-items:center;gap:12px;display:none}@media (pointer:coarse){.touch{display:flex}}.dir{border:1px solid var(--line);background:var(--surface);touch-action:none;border-radius:14px;width:72px;height:64px}.dir:active{background:var(--line)}.dir:before{content:"";border:11px solid #0000;width:0;height:0;margin:auto;display:block}.dir.left:before{border-right-color:var(--text);margin-left:18px}.dir.right:before{border-left-color:var(--text);margin-left:40px}.fire{color:#fff;touch-action:none;background:radial-gradient(circle at 35% 30%,#fca5a5,#dc2626 65%);border:0;border-radius:50%;width:96px;height:96px;margin-left:auto;font-weight:700}.rules ul{color:var(--muted);margin:0;padding-left:18px;font-size:14px;line-height:1.7}@media (width<=480px){.hud{flex-wrap:wrap}.hud .status{flex-basis:100%;order:-1}.board{border-width:5px}}@media (prefers-reduced-motion:reduce){.cannon.hit,.blast:before{animation:none}}