body{color:#1a1a1a;background:#05070d;margin:0;padding:0;font-family:system-ui,sans-serif;line-height:1.6}#backdrop{z-index:-1;width:100%;height:100%;display:block;position:fixed;inset:0}header{z-index:2;padding:.75rem 1rem;position:absolute;top:0;left:0}main{box-sizing:border-box;place-items:center;min-height:100vh;padding:1rem;display:grid}a{color:#8fe3ff}#game-frame{aspect-ratio:480/800;width:min(100vw - 2rem,60vh - 1.2rem);margin:0 auto;position:relative;container-type:inline-size}#game{width:480px;height:800px;transform:scale(calc(100cqw / 480px));transform-origin:0 0;position:absolute;top:0;left:0}#arena{background:#05070d;border-radius:8px;width:480px;height:800px;display:block;box-shadow:0 0 0 1px #8fe3ff38,0 24px 70px -18px #000000f2}#mute{z-index:1;color:#f4f6ff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff29;border-bottom-width:3px;border-radius:7px;place-items:center;width:34px;height:34px;font-size:1rem;line-height:1;transition:transform 90ms,background-color 90ms,border-color 90ms,box-shadow 90ms;display:grid;position:absolute;top:10px;right:10px}#mute:hover,#mute:focus-visible{border-color:#8fe3ff;box-shadow:0 0 16px -4px #8fe3ff}#mute[aria-pressed=true]{background:#ff5f7e2e;border-color:#ff5f7e;border-bottom-width:1px;transform:translateY(2px)}#select{color:#f4f6ff;text-align:center;box-sizing:border-box;background:radial-gradient(120% 80% at 50% 0,#1e2c588c,#05070ded 70%);border-radius:8px;grid-template-rows:repeat(3,auto);align-content:center;justify-items:center;gap:2.25rem;padding:1.5rem 1.125rem;display:grid;position:absolute;inset:0;overflow:hidden}#select[hidden]{display:none}#select h1{letter-spacing:.34em;text-transform:uppercase;background:linear-gradient(100deg,#8fe3ff,#f4f6ff 45%,#ffb1c6);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.15rem;font-weight:600}#select-body{grid-template-columns:168px 1fr;align-content:center;gap:.875rem;width:100%;display:grid}#ship-list{align-content:center;gap:.625rem;display:grid}.ship-card{--ship-color:#4fd1ff;border:1px solid color-mix(in srgb, var(--ship-color) 35%, transparent);color:#f4f6ff;font:inherit;text-align:left;cursor:pointer;background:#ffffff08;border-radius:10px;grid-template-columns:44px 1fr;align-items:center;gap:.625rem;padding:.5rem .625rem;transition:transform .18s,border-color .18s,background-color .18s,box-shadow .18s;display:grid;position:relative}.ship-card img{object-fit:contain;width:44px;height:44px;animation:3.4s ease-in-out infinite bob}.ship-card strong{color:var(--ship-color);font-size:.9rem;font-weight:600;display:block}.ship-card em{letter-spacing:.12em;font-variant-numeric:tabular-nums;opacity:.5;font-size:.68rem;font-style:normal;display:block}.ship-card:hover,.ship-card:focus-visible{border-color:color-mix(in srgb, var(--ship-color) 70%, transparent);background:#ffffff0f;outline:none;transform:translate(4px)}.ship-card[aria-current=true]{border-color:var(--ship-color);background:color-mix(in srgb, var(--ship-color) 14%, #ffffff0a);box-shadow:0 0 0 1px color-mix(in srgb, var(--ship-color) 45%, transparent), 0 0 22px -4px var(--ship-color);transform:translate(6px)scale(1.015)}.ship-card[aria-current=true]:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,#0000 35%,#ffffff38,#0000 65%) 0 0/280% 100%;animation:.62s ease-out sweep;position:absolute;inset:0}#ship-panel{--ship-color:#4fd1ff;border:1px solid #ffffff17;border-left:2px solid var(--ship-color);text-align:left;background:#ffffff08;border-radius:10px;align-content:start;gap:.3rem;padding:.75rem .8rem;display:grid}#panel-name{letter-spacing:.04em;color:var(--ship-color);margin:0;font-size:1rem;font-weight:600}#panel-blurb{opacity:.62;margin:0 0 .45rem;font-size:.72rem;line-height:1.45}#panel-stats{gap:.42rem;display:grid}.stat{grid-template-columns:58px 1fr 40px;align-items:center;gap:.5rem;font-size:.66rem;display:grid}.stat-label{letter-spacing:.14em;text-transform:uppercase;opacity:.5}.stat-track{background:#ffffff17;border-radius:3px;height:5px;overflow:hidden}.stat-fill{background:linear-gradient(90deg, color-mix(in srgb, var(--ship-color) 55%, transparent), var(--ship-color));border-radius:3px;height:100%;transition:width .32s cubic-bezier(.22,1,.36,1)}.stat-value{text-align:right;font-variant-numeric:tabular-nums;opacity:.85}#keys{opacity:.75;grid-template-columns:repeat(3,40px);gap:.3rem;display:grid}.key{color:#f4f6ff;background:#ffffff0d;border:1px solid #ffffff29;border-bottom-width:3px;border-radius:7px;place-items:center;height:34px;font-size:.78rem;font-weight:600;transition:transform 90ms,background-color 90ms,border-color 90ms,box-shadow 90ms;display:grid}.key[data-dir=up]{grid-area:1/2}.key[data-dir=left]{grid-area:2/1}.key[data-dir=down]{grid-area:2/2}.key[data-dir=right]{grid-area:2/3}#keys:not(.live) .key{animation:2.4s ease-in-out infinite demo-press}#keys:not(.live) .key[data-dir=up]{animation-delay:0s}#keys:not(.live) .key[data-dir=left]{animation-delay:.6s}#keys:not(.live) .key[data-dir=down]{animation-delay:1.2s}#keys:not(.live) .key[data-dir=right]{animation-delay:1.8s}.key.pressed{background:#8fe3ff4d;border-color:#8fe3ff;border-bottom-width:1px;transform:translateY(3px);box-shadow:0 0 16px -2px #8fe3ff}@keyframes bob{0%,to{transform:translateY(-2px)}50%{transform:translateY(2px)}}@keyframes sweep{0%{background-position:140% 0}to{background-position:-140% 0}}@keyframes demo-press{0%,12%,to{box-shadow:none;background:#ffffff0d;border-bottom-width:3px;transform:none}4%,8%{background:#8fe3ff38;border-bottom-width:1px;transform:translateY(3px);box-shadow:0 0 14px -3px #8fe3ff}}@media (prefers-reduced-motion:reduce){.ship-card img,#keys:not(.live) .key,.ship-card[aria-current=true]:after{animation:none}.ship-card,.stat-fill,.key{transition:none}}