dialog.neon-arcade{box-sizing:border-box;width:680px;max-width:100vw;height:100svh;max-height:100svh;margin:0 auto;padding:12px 16px;background:#101010;border:0;border-radius:0;color:#f5f5f5;overflow:hidden;outline:none;box-shadow:none;font-family:ui-monospace,Consolas,monospace}
.neon-arcade::backdrop{background:#101010;backdrop-filter:none}.neon-heading{display:flex;align-items:center;gap:12px;margin-bottom:8px}.neon-heading h2{flex:1;text-align:center;margin:0;font-size:17px;letter-spacing:2px;color:#dedfe2}.neon-heading button{width:auto;height:30px;min-height:30px;padding:0 12px;background:#18181e;border:1px solid #555;color:#eee;font-size:12px}.neon-stage{position:relative;display:grid;place-items:center;width:100%}.neon-stage canvas{display:block;width:auto;max-width:100%;height:min(calc(100svh - 102px),calc((100vw - 32px)*580/360));aspect-ratio:360/580;outline:none;border:0}.neon-screen{position:absolute;inset:48px 0 0;display:flex;align-items:center;justify-content:center;background:#101010d9;text-align:center;padding:16px}.neon-screen>div{max-width:310px}.neon-screen h3{font-size:22px;letter-spacing:2px;color:#dedfe2;margin:0 0 14px}.neon-screen p{font-size:12px;line-height:1.8;margin:8px 0;color:#c7c7cf}.neon-screen strong{color:#fff}.neon-keys{display:grid;grid-template-columns:1fr auto;gap:5px 16px;text-align:left;margin:16px auto;color:#c7c7cf;font-size:12px;max-width:230px}.neon-keys dt,.neon-keys dd{margin:0}.neon-keys dd{color:#fff}.neon-footer{text-align:center;font-size:10px;color:#94949f;margin:8px 0 0;line-height:1.6}.neon-arcade kbd{font:inherit;color:#fff}.neon-arcade .neon-status{color:#bfc1c6;font-size:11px}
.login-screen .web-version-credit button{display:block;margin:0 auto;padding:0 4px;min-height:24px;line-height:1.7;font:inherit;color:inherit;background:transparent;border:0;border-radius:4px;cursor:default}.login-screen .web-version-credit button:hover{color:inherit}
@media(prefers-reduced-motion:reduce){dialog.neon-arcade{box-shadow:none}}

dialog.neon-arcade[open]{display:flex;flex-direction:column;justify-content:center}.neon-powerups{display:flex;justify-content:center;gap:44px;margin:16px 0}.neon-powerups>div{display:grid;justify-items:center;gap:8px;font-size:11px;color:#dedfe2}.neon-powerups svg{width:36px;height:36px;fill:currentColor;shape-rendering:crispEdges}.neon-screen .neon-powerup-note{font-size:10px}

/* Entrance timing mirrors the canvas fleet and ship arrival; no game simulation runs yet. */
.neon-login-leaving .login-form,.neon-login-leaving footer{animation:neon-login-away .9s ease-in both}
dialog.neon-arcade[open]{animation:neon-surface-in .25s .9s linear both}
.neon-arcade[open]::backdrop{animation:neon-backdrop-in .25s .9s linear both}
.neon-arcade[open] .neon-heading,.neon-arcade[open] .neon-footer{animation:neon-stage-in .3s .9s ease-out both}
.neon-arcade[open] .neon-stage{animation:neon-stage-in .15s ease-out both}
.neon-instructions-enter>div{animation:neon-instructions-in .28s ease-out both}
@keyframes neon-login-away{0%{opacity:1}80%{opacity:1}100%{transform:translateY(100svh);opacity:0}}
@keyframes neon-surface-in{from{background:transparent}to{background:#101010}}
@keyframes neon-backdrop-in{from{background:transparent}to{background:#101010}}
@keyframes neon-stage-in{from{opacity:0}to{opacity:1}}
@keyframes neon-instructions-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}