:root{color-scheme:dark;--deep:#102939;--ink:#102534;--paper:#fff7e3;--mint:#a4e6d4;--sun:#ffd45f;--line:#41606a;--mono:Consolas,"Courier New",monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%;overflow:hidden;overscroll-behavior:none}body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;margin:0;background:var(--deep);color:var(--paper);font-family:system-ui,"Segoe UI",sans-serif}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid #ffce4f;outline-offset:4px}
.cabinet{height:100vh;height:100dvh;min-height:0;padding-top:env(safe-area-inset-top);display:flex;flex-direction:column;overflow:hidden}
.mast,footer{display:flex;align-items:center;justify-content:space-between;flex:none;position:relative;z-index:2;background:var(--deep);padding:0 max(env(safe-area-inset-right),clamp(14px,3.8vw,68px)) 0 max(env(safe-area-inset-left),clamp(14px,3.8vw,68px));font-family:var(--mono)}
.mast{height:55px;border-bottom:2px solid #42626b}
.identity,.mast-actions,.trailmark,.sound,.touch div{display:flex;align-items:center;gap:12px}
.identity svg{width:32px;height:26px}.identity b{font-size:17px;letter-spacing:.08em}.identity span{font-size:10px;color:var(--mint);letter-spacing:.16em;border-left:1px solid var(--line);padding-left:12px}
.mast-actions{gap:20px}.online,.eyebrow,.trailmark,.series,.mobile-tip{font:700 11px var(--mono);letter-spacing:.14em}
.online{color:#bad1cf;display:flex;align-items:center;gap:8px}.online i,.trailmark i{display:block;width:7px;height:7px;background:#89e3c4}
.mast button{border:1px solid #617f88;background:#183849;padding:7px 10px;font:700 12px var(--mono)}.sound{gap:7px}.sound b{font-size:10px;color:var(--mint)}
#stage{position:relative;min-height:0;flex:1;isolation:isolate;background:#659ab1;overflow:hidden}
#game{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}
#menu,#modal,#hud{position:absolute;inset:0}
#menu{display:flex;align-items:center;padding:14px clamp(22px,6.5vw,125px);background:linear-gradient(90deg,#102739b5,#15344b60 32%,transparent 65%)}
.menu-copy{width:clamp(310px,39vw,565px);position:relative}
.eyebrow{display:flex;gap:11px;align-items:center;margin:0 0 13px;color:#ffdf81;text-shadow:0 1px 3px #122938}
.eyebrow i{height:3px;width:31px;background:#ffda70}
h1{margin:0;line-height:1}
#titleArt{display:block;width:100%;height:auto;image-rendering:pixelated}
.intro{margin:15px 0 23px;color:#fff;font-weight:650;font-size:clamp(15px,1.35vw,21px);text-shadow:0 2px 4px #122d3d}
.primary{background:var(--sun);color:var(--ink);font:950 17px var(--mono);border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);padding:12px 22px;letter-spacing:.06em}
.start{display:flex;align-items:center;gap:19px;min-width:200px;min-height:49px}.start .enter{margin-left:auto;font-size:17px;opacity:.68}
.primary:hover{background:#ffea96;transform:translateY(-1px)}.primary:active{transform:translate(2px,2px);box-shadow:1px 1px var(--ink)}
.links{display:flex;gap:12px;align-items:center;margin-top:16px;color:#d3e3df}.links button{padding:7px 9px;background:#112e42df;color:white;border:1px solid #b6d0d5;font:700 13px var(--mono)}.links span{display:none}
.bib{position:absolute;bottom:5%;right:4%;display:flex;align-items:stretch;color:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px var(--ink);transform:skew(-5deg);background:var(--ink);font-family:var(--mono)}
.bib>b{padding:4px 10px;color:var(--ink);font-size:30px;background:var(--sun)}.bib div{display:grid;align-content:center;padding:4px 12px}.bib small{font-size:8px;letter-spacing:.17em;color:var(--mint)}.bib strong{font-size:16px;letter-spacing:.06em}
footer{height:42px;border-top:2px solid var(--line);font-size:11px;color:#bed2d2}.trailmark{font-size:10px}.trailmark i{background:var(--sun);transform:rotate(45deg)}
kbd{display:inline-block;border:1px solid #769299;padding:0 3px;font-family:var(--mono);color:#deece5;margin-left:4px}.series{font-size:10px}.series b{color:var(--sun)}.mobile-tip{display:none}
#hud{pointer-events:none;font-family:var(--mono);font-weight:800}
.instrument{position:absolute;top:14px;display:flex;flex-direction:column;background:#102c3ee8;border:1px solid #95b2bc;box-shadow:2px 2px #193b4b70;padding:6px 12px;min-width:102px;align-items:flex-start}
.instrument.left{left:14px;border-left:4px solid var(--mint)}.instrument.right{right:14px;align-items:flex-end;border-right:4px solid var(--sun)}
.instrument small{font-size:10px;color:#bde2df;letter-spacing:.07em}.instrument b{font-size:clamp(19px,2vw,29px);font-variant-numeric:tabular-nums;line-height:1.15}.instrument.right b{color:var(--sun)}.instrument em{font-size:12px;font-style:normal}.instrument strong{font-size:15px}
#life{color:#ff8ea6;font-size:15px;letter-spacing:2px}.energy{width:100%;height:3px;background:#4a6272;margin:3px 0}.energy i{display:block;height:100%;background:var(--mint);transform-origin:left}
.race-line{position:absolute;left:0;bottom:0;width:100%;height:4px;background:#173a4b50}.race-line i{display:block;height:100%;width:100%;transform-origin:left;background:var(--sun)}
#power{position:absolute;bottom:12px;left:12px;font-size:11px;color:#fff;background:#163446dd;padding:5px 8px}#power:empty{display:none}
#callout{position:absolute;left:50%;top:16%;transform:translateX(-50%);width:max-content;max-width:85%;background:#132f43eb;border:1px solid #d7e9e5;color:#ffda72;text-align:center;padding:7px 11px;font:800 clamp(11px,1.3vw,16px) var(--mono);pointer-events:none}
#modal{display:grid;place-items:center;background:#081d2e8c;padding:14px;z-index:3}
#dialog{width:min(440px,100%);max-height:100%;overflow:auto;padding:clamp(17px,3vw,33px);border:2px solid #152b39;border-top:6px solid var(--sun);background:#fff7e4;color:var(--ink);box-shadow:6px 6px #102a39}
#dialog h2{margin:6px 0 14px;line-height:1.06;font-size:clamp(25px,3.5vw,38px);letter-spacing:-.055em}
#dialog .kicker{font:900 10px var(--mono);letter-spacing:.14em;color:#30696d}
#dialog p{font-size:14px;line-height:1.45;margin:8px 0}
#dialog .actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:19px}
.actions button{padding:9px 13px;font:750 13px var(--mono);background:#f4ebd5;border:1px solid #59717c;color:var(--ink)}
.actions button:first-child{background:var(--sun);border:2px solid var(--ink);box-shadow:2px 2px var(--ink)}
.result{display:flex;justify-content:space-between;gap:9px;padding:6px 0;border-bottom:1px solid #bbc6be;font:700 13px var(--mono)}
.touch{display:none}
.cabinet[data-scene="race"] footer{display:none}
.cabinet[data-scene="race"] .online{display:none}
@media(max-width:640px){
 .mast{height:45px}.mast-actions{gap:8px}.identity{gap:7px}.identity b{font-size:13px}.identity span{font-size:8px;padding-left:7px}.identity svg{width:24px}
 .online,.series,.desktop-tip{display:none}.mobile-tip{display:block;font-size:9px}
 #menu{align-items:flex-end;padding:0 20px max(30px,5vh);background:linear-gradient(0deg,#0c283cee,#183e5080 34%,transparent 67%)}
 .menu-copy{width:min(74vw,340px)}.eyebrow{font-size:9px;margin-bottom:6px}.intro{margin:7px 0 14px;font-size:14px}.links{margin-top:10px;gap:8px}
 .bib{right:12px;top:15px;bottom:auto}.bib>b{font-size:20px}.bib div{padding:2px 7px}.bib strong{font-size:12px}
 .instrument{min-width:76px;top:8px;padding:5px 7px}.instrument.left{left:7px}.instrument.right{right:7px}.instrument small{font-size:8px}footer{height:32px}
}
@media(pointer:coarse){
 .touch:not([hidden]){display:flex;flex:none;align-items:center;justify-content:space-between;padding:5px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:5px;background:#132f40}
 .touch div{gap:7px}.touch button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;border:1px solid #688593;background:#234457;color:white;min-width:clamp(49px,14vw,76px);min-height:45px;font:800 15px var(--mono)}
 .touch .jump{background:var(--sun);color:var(--ink)}.touch .brake{font-size:11px}.touch button:active,.touch button.pressed{background:#92d8c8;color:var(--ink)}
}
@media(max-height:510px) and (orientation:landscape){
 .mast{height:35px}footer{height:25px}.menu-copy{width:245px}.eyebrow{margin:0 0 3px;font-size:9px}.intro{margin:6px 0 8px;font-size:12px}.primary.start{min-height:34px;padding:5px 14px}.links{margin-top:7px}.links button{padding:4px}.touch button{min-height:44px}#dialog{padding:12px 20px}
}

/* Safari keeps the play area inside its changing browser chrome and safe areas. */
@supports not (height:100dvh){.cabinet{height:var(--screen-height,100vh)}}
footer{height:calc(42px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
#modal{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
#dialog{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media(pointer:coarse){
 .mast button{min-height:44px;min-width:44px}
 .mast{min-height:48px}
 .touch button{min-width:clamp(52px,14vw,80px);min-height:48px}
 .instrument.left{left:max(7px,env(safe-area-inset-left))}
 .instrument.right{right:max(7px,env(safe-area-inset-right))}
 #power{left:max(12px,env(safe-area-inset-left))}
}
@media(max-width:640px){
 footer{height:calc(32px + env(safe-area-inset-bottom))}
}
@media(pointer:coarse) and (orientation:landscape){
 .identity span{display:none}
 .mast{height:44px}
 .touch button{min-height:44px}
 .instrument{top:6px}
 #menu{padding-left:max(22px,env(safe-area-inset-left))}
}
@media(max-width:374px){
 .identity{gap:5px}.identity b{font-size:11px;white-space:nowrap}.identity span{display:none}
 .identity svg{width:20px}.mast-actions{gap:5px}.mast button{padding:5px 7px}
}

.links{flex-wrap:wrap;max-width:100%}
.links #install{font-size:11px;color:#ffdf8b;border-color:#74969d}
.install-icon{float:right;margin:0 0 8px 12px;border-radius:14px;image-rendering:pixelated}
@media(max-width:640px){.links{max-width:340px}.links #install{padding:6px 9px}}