@font-face{font-family:Pressura;src:url('./bb-circuit-v2-pressura.otf')}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#1b1b1b;color:#f1f1f1;font:13px Pressura,monospace}
body{display:grid;place-items:center;overflow:hidden}
.game{position:relative;width:min(100vw,calc((100dvh - 72px) * 1.9657));background:#1b1b1b}
.scene-viewport{position:relative;aspect-ratio:2752/1400;overflow:hidden}
canvas{display:block;width:100%;height:auto;aspect-ratio:2752/1536;touch-action:none}
canvas:focus,canvas:focus-visible{outline:none}
button{font:inherit;line-height:1;color:inherit;background:transparent;border:0;min-height:44px;cursor:pointer;touch-action:manipulation}
button:hover{color:#4cc9e9}
button:disabled{opacity:.55;cursor:default}
button:focus-visible{outline:2px solid #4cc9e9;outline-offset:2px}
[hidden]{display:none!important}
.icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle}
.icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hud{position:relative;display:flex;align-items:center;gap:24px;height:72px;padding:0 20px;isolation:isolate}
.hud::before,.hud::after{content:'';position:absolute;left:4px;right:4px;height:var(--dot-step,3px);pointer-events:none;background-image:radial-gradient(circle,#616161 var(--dot-radius,.8px),transparent calc(var(--dot-radius,.8px) + .2px));background-size:var(--dot-step,3px) 100%}
.hud::before{top:0}
.hud::after{bottom:0}
.hud button{height:44px;flex:none;display:flex;align-items:center;justify-content:center}
.hud #menu{min-width:86px;padding:0 8px;gap:8px;letter-spacing:.06em}
.area{display:none}
.key-hint{display:flex;align-items:center;gap:12px;color:#888;font-size:11px;line-height:1;white-space:nowrap}
.hint-group{display:flex;align-items:center;gap:6px}
.hint-group .icon + .icon{margin-left:-2px}
.hint-divider{color:#626262}
kbd{font:inherit}
.drive{display:flex;align-items:center;gap:8px;margin-left:auto}
.drive>button{border:1px dotted #777}
.drive #up,.drive #down{width:44px;padding:0}
.drive .boost{position:relative;gap:10px;width:172px;padding:0 12px;color:#4cc9e9;border-color:#4cc9e9;overflow:hidden}
.boost small{font-size:10px;margin-left:auto;text-align:right}
.boost i{position:absolute;bottom:0;left:0;height:2px;width:var(--charge,100%);background:#4cc9e9}
.boost:disabled{border-color:#696969;color:#bbb}
.boost:disabled[data-state="LIVE"]{color:#4cc9e9;border-color:#4cc9e9;opacity:1}
.menu-backdrop{position:absolute;inset:0;display:grid;place-items:center;background:#1b1b1bcf;overflow:auto;padding:54px 18px 18px}
.menu-card{max-height:100%;overflow:auto;width:min(420px,94%);padding:26px 32px;border:1px dotted #626262;background:#1b1b1bf2}
.eyebrow{font-size:10px;letter-spacing:.14em;color:#999;margin:0 0 12px}
h1{font-size:26px;line-height:1.1;font-weight:400;letter-spacing:.03em;margin:0 0 12px}
#menu-detail{font-size:12px;color:#aaa;line-height:1.6;margin:0 0 18px}
.menu-actions{display:flex;flex-direction:column;gap:2px}
.menu-actions button{display:flex;align-items:center;gap:14px;text-align:left;padding:9px 12px;font-size:12px;letter-spacing:.05em}
.menu-actions button.primary{min-height:48px;margin-bottom:8px;border:1px solid #4cc9e9;color:#1b1b1b;background:#4cc9e9}
.menu-actions button.primary:hover{background:#04acd7;color:#1b1b1b}
.primary .next{display:flex;margin-left:auto}
.menu-actions button:not(.primary):hover{background:#2c2c2c}
.menu-actions button:focus-visible{outline:2px solid #f1f1f1;outline-offset:3px}
.menu-actions #exit{border-top:1px dotted #555;margin-top:16px;color:#aaa}
#help,#motion-note{font-size:11px;line-height:1.6;color:#bcbcbc;margin:14px 0 0}
.close-game{position:absolute;top:5px;right:5px;z-index:4;width:44px;height:44px;display:grid;place-items:center;color:#aaa;background:#1b1b1b}
.close-game:hover{color:#4cc9e9;background:#262626}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#1b1b1b}
#error{position:absolute;inset:auto 20px 20px;color:#f1f1f1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){.key-hint{display:none}}
@media(max-width:700px){
 .game{width:100vw;min-height:min(100dvh,440px)}
 .scene-viewport{margin-top:24px}
 .hud{height:68px;padding:0 12px;gap:12px}
 .hud #menu{min-width:44px;padding:0}
 .hud #menu>span:not(.icon){display:none}
 .drive{gap:8px}
 .drive .boost{width:144px;padding:0 10px;gap:8px;font-size:11px}
 .menu-backdrop{padding:52px 10px 10px}
 .menu-card{padding:16px 20px;width:min(360px,96%)}
 h1{font-size:23px}
 .menu-actions button{padding:7px 10px}
 #menu-detail{margin-bottom:10px}
 .eyebrow{margin-bottom:8px}
 .close-game{top:4px;right:4px}
}

@media(max-width:360px){.drive .boost{width:132px}}