.arcade-identity-fade{opacity:1;transition:opacity 1s ease-in-out}
body.asteroids-playing .arcade-identity-fade{opacity:0;pointer-events:none}
#asteroids-game{--arcade-ink:var(--custom-modal-ink,#a8b8bb);color:var(--arcade-ink);font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;position:fixed;inset:0;z-index:8;pointer-events:none;isolation:isolate}
#asteroids-game [hidden]{display:none!important}
#asteroids-game button,#asteroids-game input{font:inherit;color:inherit;background:transparent;border:0;border-radius:0;pointer-events:auto;padding:6px 10px}
#asteroids-game button{cursor:pointer;letter-spacing:.12em;text-shadow:0 0 8px currentColor}
#asteroids-game button:hover,#asteroids-game button:focus-visible{outline:none;text-decoration:underline;text-underline-offset:6px}
.arcade-screen{position:absolute;inset:55px 64px 70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;text-shadow:0 0 9px #789dab50}
.arcade-eyebrow{font-size:11px;letter-spacing:.4em;margin:0;text-align:center;opacity:.7}
#arcade-title{font:clamp(38px,6vw,90px)/1.1 ui-monospace,monospace;letter-spacing:.12em;text-align:center;margin:0;color:transparent;-webkit-text-stroke:1px var(--arcade-ink);font-weight:normal}
#arcade-title span{display:block;font-size:.35em;letter-spacing:.55em;margin:12px 0 0;color:var(--arcade-ink);-webkit-text-stroke:0}
.arcade-message{text-align:center;min-height:20px;font-size:12px;letter-spacing:.1em;margin:4px 0 10px}
.arcade-columns{width:min(580px,100%);margin:8px 0 16px}
.arcade-columns section{width:100%}.arcade-columns section:last-child{display:none}
.arcade-columns h3{text-align:center;font-size:12px;letter-spacing:.25em;font-weight:normal;margin:0 0 16px}
.arcade-columns dl{display:grid;grid-template-columns:90px 1fr;gap:7px 18px;width:max-content;max-width:100%;margin:0 auto;font-size:13px}
.arcade-columns dd{margin:0}.arcade-columns dt{text-align:right}
.arcade-scoring,.arcade-local{font-size:11px;opacity:.7;text-align:center}.arcade-scoring{margin:16px 0 0}
.arcade-columns table{width:min(400px,100%);border-collapse:collapse;font-size:15px;margin:auto}.arcade-columns th{font-weight:normal;opacity:.6;text-align:left;font-size:11px;padding-bottom:10px}.arcade-columns td{padding:3px 0}.arcade-columns td:last-child,.arcade-columns th:last-child{text-align:right}
#asteroids-game[data-attract=scores] .arcade-columns section:first-child{display:none}
#asteroids-game[data-state=intro][data-attract=scores] .arcade-columns section:last-child{display:block}
.arcade-screen-actions{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto}
.arcade-screen-actions [data-play]{font-size:16px!important;animation:arcade-prompt 1.6s steps(1,end) infinite}
.arcade-screen-actions [data-close]{font-size:10px!important;opacity:.6}
@keyframes arcade-prompt{0%,75%{opacity:1}76%,100%{opacity:.45}}
.arcade-initials{text-align:center;pointer-events:auto;margin:20px 0}.arcade-initials label{display:block;font-size:13px;letter-spacing:.16em;margin-bottom:24px}
.arcade-initials>div{display:flex;flex-direction:column;align-items:center;gap:18px}
#asteroids-game .arcade-initials input{width:5.8ch;padding:0 0 9px .45ch;letter-spacing:.5ch;text-transform:uppercase;text-align:left;font-size:42px;line-height:1.2;border-bottom:2px solid currentColor;outline:none;caret-color:currentColor}
.arcade-initials button{font-size:12px!important}
.arcade-hud{position:absolute;inset:0;pointer-events:none}.arcade-score{position:absolute;top:15px;right:calc(50% + 150px);min-width:110px;white-space:nowrap}.arcade-score span{font-size:10px;letter-spacing:.1em}.arcade-score b{font-size:19px;display:block;font-weight:normal;letter-spacing:.07em}.arcade-lives{display:flex;gap:8px;height:20px}.arcade-lives svg{width:13px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.arcade-actions{position:absolute;bottom:85px;right:18px;display:flex;gap:8px}.arcade-help{position:absolute;bottom:48px;width:100%;text-align:center;font-size:11px;pointer-events:none}
.arcade-touch{display:none}
#asteroids-game[data-state=over]{--arcade-ink:#d1e5e8;background:#02070dee}

#asteroids-game[data-state=over][data-ending=arriving] #arcade-title{animation:arcade-game-over 1.1s cubic-bezier(.15,.6,.3,1) both}
#asteroids-game[data-state=over] .arcade-eyebrow,#asteroids-game[data-state=over] .arcade-columns,#asteroids-game[data-state=over] .arcade-screen-actions{display:none}
#asteroids-game[data-state=paused] .arcade-columns{display:none}
@keyframes arcade-game-over{from{opacity:0;transform:perspective(500px) translateZ(-1200px)}to{opacity:1;transform:perspective(500px) translateZ(0)}}
@keyframes arcade-darken{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.arcade-screen{inset:65px 36px 80px;gap:10px}#arcade-title{font-size:clamp(28px,8vw,54px)}.arcade-message{font-size:10px}.arcade-columns{margin:4px 0 10px}.arcade-columns dl{font-size:11px;grid-template-columns:64px 1fr;gap:6px 12px}.arcade-columns table{font-size:13px}.arcade-score{right:auto;left:12px;top:42px;min-width:0}.arcade-score b{font-size:17px}.arcade-actions{bottom:auto;top:55px;right:8px}.arcade-actions button{font-size:10px!important;padding:5px!important}.arcade-help{display:none}.arcade-initials label{font-size:11px}}
@media(pointer:coarse),(max-width:700px){.arcade-touch{position:absolute;bottom:100px;left:10px;right:10px;display:flex;justify-content:space-between;gap:12px}.arcade-touch>div{display:flex;gap:7px;flex-wrap:wrap;max-width:48%}.arcade-touch button{touch-action:none;user-select:none;min-height:46px;min-width:42px;padding:8px!important;border:1px solid currentColor!important}.arcade-touch .held{background:#70999b35!important}.arcade-actions{bottom:auto;top:70px}}
@media(max-height:650px){.arcade-screen{inset:30px 48px 32px;gap:5px}.arcade-eyebrow{display:none}#arcade-title{font-size:clamp(28px,7vh,55px)}.arcade-columns{margin:4px 0}.arcade-columns h3{margin-bottom:6px}.arcade-columns dl{gap:3px 16px;font-size:11px}.arcade-columns table{font-size:12px}.arcade-columns td{padding:1px 0}.arcade-message{margin:2px}.arcade-scoring{font-size:10px;margin:6px 0}.arcade-screen-actions [data-play]{font-size:13px!important}.arcade-touch{bottom:55px}.arcade-initials{margin:12px 0}}
@media(max-height:430px) and (min-width:600px){#asteroids-game[data-state=intro][data-attract=title] .arcade-columns dl{grid-template-columns:64px 150px 64px 160px}.arcade-scoring br{display:none}.arcade-columns table{font-size:10px}.arcade-columns td{padding:0}.arcade-local{margin:4px}}
@media(prefers-reduced-motion:reduce){.arcade-identity-fade{transition-duration:.01ms}#asteroids-game #arcade-title,#asteroids-game .arcade-screen-actions [data-play],#asteroids-game::before{animation:none!important}}

/* Three distinct attract pages, drawn in the game space. */
.arcade-columns,.arcade-columns section,.arcade-columns section:last-child{display:none}
#asteroids-game[data-state=intro][data-attract=instructions] .arcade-columns,#asteroids-game[data-state=intro][data-attract=scores] .arcade-columns{display:block}
#asteroids-game[data-state=intro][data-attract=instructions] .arcade-columns section:first-child{display:block}
#asteroids-game[data-state=intro][data-attract=scores] .arcade-columns section:last-child{display:block}
.arcade-logo{display:block;width:min(760px,80vw);height:auto;overflow:visible;fill:none;stroke:var(--arcade-ink);stroke-width:1.2;filter:drop-shadow(0 0 9px #6d9fba55)}
.arcade-logo text{font:100px ui-monospace,monospace;letter-spacing:0;paint-order:stroke}
.arcade-logo .arcade-logo-sub{font-size:37px;stroke-width:.65}
#asteroids-game[data-state=intro][data-attract=title] .arcade-message{margin:30px 0 44px}
#asteroids-game[data-state=intro][data-attract=title] .arcade-screen-actions{margin-top:20px}
#asteroids-game[data-state=over] .arcade-columns{display:none!important}
@media(max-height:650px){#asteroids-game[data-state=intro][data-attract=title] .arcade-message{margin:10px 0 16px}.arcade-logo{width:min(600px,70vw)}}
body.asteroids-playing #asteroids-advanced-background{z-index:2!important}

/* Native vector title: transparent geometry with a restrained neon halo. */
.arcade-logo.arcade-logo-vector{width:min(1100px,86vw);height:auto;max-height:60vh;fill:none;stroke:none;filter:drop-shadow(0 0 3px #22baff99)}
#asteroids-game[data-state=intro][data-attract=title] .arcade-eyebrow{display:none}
#asteroids-game[data-state=intro][data-attract=title] .arcade-message{margin:8px 0}
#asteroids-game[data-state=intro][data-attract=title] .arcade-screen-actions{margin-top:12px}
@media(max-height:650px){.arcade-logo.arcade-logo-vector{max-height:53vh}}

.arcade-mobile-manual{display:none!important}
#asteroids-game[data-touch=true] .arcade-keyboard-manual{display:none}
#asteroids-game[data-touch=true] .arcade-mobile-manual{display:grid!important}
#asteroids-game[data-touch=true][data-state=intro] #arcade-title,#asteroids-game[data-touch=true][data-state=paused] #arcade-title{pointer-events:auto;cursor:pointer;touch-action:manipulation}
#asteroids-game button{touch-action:manipulation}
/* Live instruction captions sit above the action, with start always available. */
#asteroids-game[data-state=intro][data-attract=demo] .arcade-screen{inset:76px 38px 74px;justify-content:space-between;gap:12px}
#asteroids-game[data-state=intro][data-attract=demo] #arcade-title{display:none}
#asteroids-game[data-state=intro][data-attract=demo] .arcade-message{max-width:780px;font-size:clamp(12px,1.4vw,20px);letter-spacing:.1em;margin:0;text-shadow:0 0 10px currentColor;line-height:1.7}
#asteroids-game[data-state=intro][data-attract=demo] .arcade-message::before{content:'DEMONSTRATION';display:block;font-size:10px;letter-spacing:.35em;opacity:.55;margin-bottom:8px}
#asteroids-game[data-state=intro][data-attract=demo][data-demo-paused=true] .arcade-message::before{content:'DEMONSTRATION'}
#asteroids-game[data-state=intro][data-attract=demo] .arcade-actions,#asteroids-game[data-state=intro][data-attract=demo] .arcade-lives{display:none}
#asteroids-game[data-state=intro][data-attract=demo] .arcade-score>span::before{content:'DEMO ';opacity:.6}
@media(max-width:700px){#asteroids-game[data-state=intro][data-attract=demo] .arcade-screen{inset:116px 38px 76px}.arcade-message::before{font-size:8px!important}}
@media(max-height:450px){#asteroids-game[data-state=intro][data-attract=demo] .arcade-screen{inset:54px 70px 25px}#asteroids-game[data-state=intro][data-attract=demo] .arcade-message{font-size:11px;line-height:1.5}.arcade-message::before{margin-bottom:3px!important}}

.arcade-level{display:block;font-size:10px;letter-spacing:.1em;opacity:.8;margin:3px 0}

.arcade-cheat{position:absolute;top:100px;left:50%;transform:translateX(-50%);font-size:14px;text-align:center;white-space:nowrap;pointer-events:none}

/* True stroke glyphs retain semantic text for assistive technology and input. */
.arcade-vector-word{display:inline-block;white-space:nowrap;line-height:1;vertical-align:baseline}
.arcade-vector-word svg{height:1em;vertical-align:-.08em;overflow:visible;fill:none;stroke:currentColor;stroke-width:.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.arcade-vector-source{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#asteroids-game #arcade-title{color:var(--arcade-ink);-webkit-text-stroke:0}
.arcade-vector-input{position:relative;display:inline-block}
#asteroids-game .arcade-vector-input input{color:transparent;caret-color:var(--arcade-ink)}
.arcade-vector-input-display{position:absolute;inset:0;pointer-events:none;font-size:42px;line-height:1.2;text-align:center;color:var(--arcade-ink);padding-bottom:9px}

#asteroids-game .arcade-vector-word{font-size:inherit!important;letter-spacing:0!important}
#asteroids-game #arcade-title .arcade-vector-word{display:inline-block;margin:0}

#asteroids-game button:hover,#asteroids-game button:focus-visible{text-decoration:none}
#asteroids-game button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
#asteroids-game[data-state=intro][data-attract=scores] .arcade-screen{inset:30px 36px 40px;gap:6px}
#asteroids-game[data-state=intro][data-attract=scores] #arcade-title{font-size:clamp(24px,min(5vh,7vw),54px);max-width:100%}
#asteroids-game[data-attract=scores] .arcade-columns{margin:4px 0;width:min(460px,100%)}
#asteroids-game[data-attract=scores] .arcade-columns table{font-size:clamp(10px,1.65vh,14px);line-height:1.4;width:100%}
#asteroids-game[data-attract=scores] .arcade-columns td{padding:1px 0}
#asteroids-game[data-attract=scores] .arcade-columns h3{margin-bottom:6px}
#asteroids-game[data-attract=scores] .arcade-local{margin:4px 0;font-size:10px}
#asteroids-game[data-attract=scores] .arcade-screen-actions [data-play]{font-size:clamp(11px,1.8vh,15px)!important}
@media(max-height:450px){#asteroids-game[data-state=intro][data-attract=scores] .arcade-screen{inset:14px 36px 24px;gap:3px}#asteroids-game[data-attract=scores] .arcade-columns table{line-height:1.15}#asteroids-game[data-attract=scores] .arcade-columns td{padding:0}#asteroids-game[data-attract=scores] .arcade-columns h3{display:none}#asteroids-game[data-attract=scores] .arcade-message{margin:0}#asteroids-game[data-attract=scores] .arcade-local{margin:2px 0}}

#asteroids-game .arcade-message::before,#asteroids-game .arcade-score>span::before{content:none!important}
.arcade-demo-label{display:block;font-size:10px;letter-spacing:.35em;opacity:.55;margin-bottom:8px}
@media(max-height:450px){.arcade-demo-label{font-size:8px;margin-bottom:3px}}

/* Level is independent of the left score/lives group. */
#asteroids-game .arcade-level{position:absolute;top:18px;right:100px;margin:0;font-size:14px;letter-spacing:.1em;white-space:nowrap;text-align:right}
@media(max-width:700px){#asteroids-game .arcade-score{top:72px;left:16px}#asteroids-game .arcade-level{top:75px;right:72px;font-size:12px}#asteroids-game .arcade-actions{top:128px;right:72px}}

/* Bank up to 30 ships: ten fixed columns and at most three rows. */
#asteroids-game .arcade-lives{display:grid;grid-template-columns:repeat(10,13px);grid-auto-rows:18px;gap:4px 5px;height:auto;width:max-content;max-width:100%}
@media(max-width:700px){#asteroids-game .arcade-lives{grid-template-columns:repeat(10,11px);grid-auto-rows:16px;column-gap:4px}#asteroids-game .arcade-lives svg{width:11px;height:16px}}

/* Round announcements share the real stroke alphabet and never capture input. */
.arcade-round{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-size:clamp(38px,7vw,96px);line-height:1.25;text-align:center;pointer-events:none;white-space:nowrap;will-change:opacity}
.arcade-round>span,.arcade-round>b{display:block;font-weight:normal}
.arcade-round>b{font-size:1.6em}
@media(max-height:450px){.arcade-round{font-size:clamp(30px,10vh,54px)}}

/* The media dock shares the viewport/game center in ambient and arcade modes. */
body #custom-transport{left:50%;right:auto;transform:translateX(-50%)}