.asteroid-shell{padding-top:46px;padding-bottom:50px}.asteroid-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}.asteroid-heading h1{font-size:clamp(50px,8vw,94px);letter-spacing:-.07em;line-height:1.08;margin:12px 0}.asteroid-heading h1 span{color:#bcf56b;margin-left:8px}.asteroid-heading p{color:#a7acb9;font-size:18px}.asteroid-heading p strong{color:#eef1f4}.asteroid-arena{border:1px solid #303746;background:#111620;border-radius:20px;overflow:hidden}.arena-label{display:flex;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #303746;color:#9ca6ba;font:11px monospace;letter-spacing:.12em}.signal{color:#bcf56b}.asteroid-hud{display:grid;grid-template-columns:1.4fr 1fr .65fr;padding:22px 26px;gap:15px}.asteroid-hud>div+div{border-left:1px solid #333a48;padding-left:26px}.asteroid-hud span{display:block;color:#a7adbc;font:10px monospace;letter-spacing:.12em;margin-bottom:8px}.asteroid-hud strong{font:clamp(21px,4vw,38px) monospace;letter-spacing:-.05em;color:#f3f5f8}.asteroid-hud small{color:#bcf56b}.asteroid-stage{position:relative;background:#0a101c}.asteroid-stage canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}.asteroid-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:8%;background:linear-gradient(90deg,#0b1025e8,transparent);pointer-events:none}.asteroid-overlay[hidden]{display:none}.asteroid-overlay h2{font-size:clamp(27px,5vw,65px);line-height:1.05;letter-spacing:-.05em;margin:18px 0;color:#f2f4f8}.asteroid-overlay p{color:#b2bad1}.asteroid-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 24px;border-top:1px solid #303746}.asteroid-controls>div{display:flex;gap:8px}.asteroid-controls button{touch-action:none;user-select:none;border:1px solid #3a4356;background:#202839;color:#f0f3f8;border-radius:10px;height:54px;min-width:66px;font-size:27px;cursor:pointer}.asteroid-controls button:active,.asteroid-controls button.pressed{background:#bcf56b;color:#111620}.asteroid-controls #fire{padding:0 20px;color:#bcf56b}.asteroid-controls #fire span{font:11px monospace}.asteroid-controls>span{font:12px monospace;color:#b0b8c8}.asteroid-controls small{display:block;font:9px monospace;letter-spacing:.15em;text-align:center;margin-top:5px}.asteroid-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 24px;border-top:1px solid #303746}.asteroid-bottom p{font-size:13px;color:#aab4c6;margin:0}.asteroid-bottom .cta{white-space:nowrap}.asteroid-finish{padding:26px;border-top:1px solid #3b485a;background:#17202b}.asteroid-finish h2{font-size:32px;margin:10px 0;letter-spacing:-.04em}.asteroid-finish label{display:block;margin:20px 0 8px}.save-controls{display:flex;gap:10px;max-width:600px}.save-controls input{min-width:0;flex:1;border:1px solid #526079;border-radius:9px;background:#0d1420;color:white;padding:13px;font:inherit}.asteroid-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:36px 0 70px}.asteroid-rules article{border-top:1px solid #39414e;padding-top:20px}.asteroid-rules article>span{font:10px monospace;color:#bcf56b;letter-spacing:.12em}.asteroid-rules h3{font-size:20px;letter-spacing:-.03em;margin:15px 0 10px}.asteroid-rules p,.asteroid-rankings p{font-size:14px;color:#a5adbd;line-height:1.7}.asteroid-rankings h2{font-size:clamp(30px,5vw,48px);letter-spacing:-.05em;margin:12px 0}.rank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:25px 0}.rank-grid article{border:1px solid #303746;border-radius:16px;padding:24px;background:#131923}.rank-number{font:12px monospace;color:#bcf56b}.rank-grid h3{margin:16px 0 5px;font-size:21px}.rank-grid p{margin:0 0 20px}.rank-grid ol{padding:0;list-style:none;margin:0;counter-reset:rank}.rank-grid li{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #303746;font-size:13px;counter-increment:rank}.rank-grid li:before{content:counter(rank,decimal-leading-zero);color:#8994a8;font:11px monospace}.rank-grid li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.rank-grid li strong{font:12px monospace;color:#bcf56b;white-space:nowrap}.asteroid-footer{display:flex;justify-content:space-between;gap:20px;padding-top:24px;padding-bottom:32px;border-top:1px solid #303746;color:#a5adbd;font-size:12px}.asteroid-footer a{color:#bcf56b}button:focus-visible,input:focus-visible{outline:3px solid #b5a1ff;outline-offset:3px}button:disabled{opacity:.6;cursor:wait}@media(max-width:650px){.asteroid-shell{padding-top:28px}.asteroid-heading{display:block}.asteroid-heading>a{display:inline-block;margin-top:15px}.arena-label{padding:14px;font-size:8px}.signal{display:none}.asteroid-hud{padding:16px 12px;gap:8px}.asteroid-hud>div+div{padding-left:10px}.asteroid-hud span{font-size:7px;letter-spacing:.03em}.asteroid-hud strong{font-size:21px}.asteroid-controls{padding:12px;gap:8px}.asteroid-controls>span{display:none}.asteroid-controls button{min-width:60px}.asteroid-controls #fire{padding:0 12px}.asteroid-bottom{padding:16px 12px;align-items:stretch;flex-direction:column}.asteroid-bottom .cta{justify-content:center}.asteroid-rules,.rank-grid{grid-template-columns:1fr}.asteroid-rules{gap:20px;margin-bottom:45px}.asteroid-finish{padding:20px 14px}.save-controls{flex-direction:column}.asteroid-overlay .eyebrow{font-size:8px}.asteroid-overlay p{font-size:12px;margin:0}.asteroid-overlay h2{margin:10px 0}.asteroid-footer span{max-width:150px;text-align:right}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.asteroid-arena:fullscreen,.asteroid-arena.game-fullscreen-fallback{display:flex;flex-direction:column;height:100dvh;background:#111620;border:0;border-radius:0;overflow:auto}.asteroid-arena:fullscreen .asteroid-stage,.asteroid-arena.game-fullscreen-fallback .asteroid-stage{flex:1;min-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}.asteroid-arena:fullscreen canvas,.asteroid-arena.game-fullscreen-fallback canvas{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}.asteroid-arena:fullscreen .arena-label,.asteroid-arena.game-fullscreen-fallback .arena-label{align-items:center;flex-shrink:0}.asteroid-arena:fullscreen .asteroid-hud,.asteroid-arena.game-fullscreen-fallback .asteroid-hud{padding:10px 20px;flex-shrink:0}.asteroid-arena:fullscreen .asteroid-controls,.asteroid-arena.game-fullscreen-fallback .asteroid-controls{flex-shrink:0;padding:8px 16px}.asteroid-arena:fullscreen .asteroid-bottom,.asteroid-arena.game-fullscreen-fallback .asteroid-bottom{flex-shrink:0;padding:10px 16px;flex-direction:row}.asteroid-arena canvas:focus-visible{outline:2px solid #b5a1ff;outline-offset:-2px}@media(max-height:500px){.asteroid-arena:fullscreen .asteroid-hud strong,.asteroid-arena.game-fullscreen-fallback .asteroid-hud strong{font-size:20px}.asteroid-arena:fullscreen .arena-label,.asteroid-arena.game-fullscreen-fallback .arena-label{padding:6px 14px}.asteroid-arena:fullscreen .asteroid-controls button,.asteroid-arena.game-fullscreen-fallback .asteroid-controls button{height:44px}}
/* Wider movement controls share the available space on small screens. */
#asteroids-game:is(:fullscreen,.game-fullscreen-fallback):not(:has(> [data-fullscreen-region="results"]:not([hidden]))) .asteroid-stage{flex:1 1 0;min-height:60px}
.asteroid-controls>div{flex:1;min-width:0;max-width:240px}.asteroid-controls>div button{flex:1;min-width:0;width:auto}.asteroid-controls #fire{flex-shrink:0}
@media(max-width:650px){.asteroid-controls>div{max-width:240px}.asteroid-controls button{height:58px}.asteroid-controls #fire{width:96px;min-width:96px;padding:0}}
@media(max-width:360px){.asteroid-controls #fire{width:66px;min-width:66px}.asteroid-controls #fire span{display:none}}