:root{font-family:Inter,"Noto Sans TC",PingFang TC,Microsoft JhengHei,system-ui,sans-serif;color:#fff;background:#b9dded;font-synthesis:none;--ink:#172c39;--yellow:#ffd15c;--red:#ed705b;--muted:#a4c3cc}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffd15c;outline-offset:4px}button:active{transform:translateY(1px)}#game{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#speedFX{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 110px 12px #ffce4933;background:radial-gradient(ellipse at center,transparent 45%,#def9ff44 100%);transition:opacity .2s}#loading{position:absolute;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:50}#loading span{font-size:13px;color:var(--muted)}.loading-wheel{width:48px;height:48px;border:5px solid #36505f;border-top-color:var(--yellow);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}#hud{position:absolute;left:24px;right:24px;top:max(20px,env(safe-area-inset-top));display:flex;align-items:center;gap:18px;pointer-events:none}.identity,.raceinfo,.icon-btn{border:1px solid #ffffff20;background:#172c39e6;box-shadow:0 4px 18px #10263715;backdrop-filter:blur(8px)}.identity{padding:12px 17px;border-radius:15px;display:flex;align-items:center;gap:10px}.identity b{font-size:15px;letter-spacing:1px}.identity small{display:block;font-size:9px;letter-spacing:2px;color:var(--yellow);margin-top:3px}.dot{width:9px;height:9px;background:var(--yellow);border-radius:50%;box-shadow:0 0 15px #ffd15c66}.raceinfo{margin-left:auto;border-radius:15px;padding:9px 20px;display:flex;gap:27px;align-items:center}.raceinfo div{min-width:45px}.raceinfo small{display:block;font-size:10px;color:var(--muted);letter-spacing:2px;margin-bottom:2px}.raceinfo b{font-variant-numeric:tabular-nums;font-size:23px;font-weight:850}.raceinfo b span{font-size:12px;color:var(--muted);margin-left:4px}.icon-btn{width:48px;height:52px;border-radius:14px;pointer-events:auto;font-size:22px}#location{position:absolute;top:max(96px,calc(env(safe-area-inset-top) + 80px));left:28px;text-shadow:0 2px 8px #172c3966}#location small{display:inline-block;background:var(--yellow);color:var(--ink);font-size:10px;font-weight:900;padding:3px 5px;border-radius:4px;margin-right:5px;vertical-align:3px}#location b{font-size:22px}#location>span{display:block;font-size:12px;margin-top:5px;color:#243b47;text-shadow:0 1px 8px #fff;font-weight:650}#mapPanel{position:absolute;right:24px;top:100px;background:#172c39d9;border:1px solid #ffffff20;border-radius:16px;padding:12px 14px;width:170px;backdrop-filter:blur(8px)}.map-title{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.map-title b{color:#fff}#minimap{width:100%;height:160px;display:block}#progressText{text-align:center;font-size:10px;color:var(--yellow);font-variant-numeric:tabular-nums}#speedPanel{position:absolute;right:28px;bottom:83px;min-width:157px;text-shadow:0 2px 10px #10263799}#speedPanel>div:first-child{display:flex;align-items:baseline;justify-content:flex-end;gap:5px}#speed{font-size:64px;line-height:1;font-weight:900;font-style:italic;letter-spacing:-3px;font-variant-numeric:tabular-nums}#speedPanel span{font-size:11px;font-weight:700}.boost-label{display:flex;justify-content:space-between;margin:12px 0 5px}.boost-label span{font-size:9px!important;letter-spacing:1px}.boost-track{height:6px;background:#172c3977;border-radius:5px;overflow:hidden}.boost-track i{display:block;width:100%;height:100%;background:var(--yellow);box-shadow:0 0 10px var(--yellow)}#driveMode{display:block;margin-top:8px;font-size:9px;text-align:right}#utilities{position:absolute;bottom:30px;left:24px;display:flex;gap:7px}#utilities button{background:#172c39cc;border:1px solid #ffffff20;border-radius:7px;font-size:11px;padding:9px 12px}#raceToast{position:absolute;left:50%;top:31%;transform:translate(-50%,-8px);opacity:0;transition:.18s;background:var(--ink);border:1px solid #ffd15c50;border-radius:30px;padding:10px 22px;font-size:14px;white-space:nowrap;pointer-events:none}#raceToast.show{opacity:1;transform:translate(-50%,0)}#countdown{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:92px;font-weight:950;font-style:italic;color:var(--yellow);text-shadow:5px 6px 0 var(--ink);pointer-events:none}.overlay{position:absolute;inset:0;background:linear-gradient(100deg,#0d2533dd 0%,#0d253366 58%,#0d253311 100%);display:flex;align-items:center;padding:4vh 7vw;z-index:20;overflow:auto}.menu-card{width:490px;max-width:100%}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--yellow);font-weight:800}h1{font-size:clamp(40px,5vw,68px);line-height:1.03;letter-spacing:3px;margin:16px 0 19px;font-weight:950}h1 em{color:var(--yellow);font-style:normal}.title-stripe{display:inline-block;width:54px;height:10px;background:var(--red);transform:skew(-25deg);margin-left:13px;vertical-align:10px}.intro{color:#d8e6e9;line-height:1.8;font-size:14px;margin-bottom:20px}.tags{display:flex;gap:8px;margin-bottom:22px}.tags span{border:1px solid #ffffff30;padding:7px 10px;border-radius:6px;color:#e2ecef;font-size:10px}.control-guide{display:flex;gap:17px;margin-bottom:20px}.control-guide>div{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.control-guide span{display:block;width:100%;font-size:10px;color:var(--muted);margin-top:4px}kbd{font-family:inherit;font-weight:750;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:5px;background:#365362;border:1px solid #7493a3;font-size:11px}.toggle{display:grid;grid-template-columns:22px 1fr;gap:2px 8px;font-size:12px;margin:0 0 18px;align-items:center;cursor:pointer}.toggle input{accent-color:var(--yellow);width:17px;height:17px;grid-row:span 2}.toggle small{font-size:10px;color:var(--muted)}.primary{display:flex;align-items:center;justify-content:space-between;background:var(--yellow);color:var(--ink);font-weight:900;width:100%;padding:17px 22px;border-radius:12px;font-size:17px;box-shadow:0 5px 0 #b78b27;transition:filter .15s}.primary:hover{filter:brightness(1.07)}.primary span{font-size:25px;line-height:1}.mode-note{font-size:10px;color:#b1c5ce;line-height:1.7;margin:19px 0 0}.best{font-size:11px;letter-spacing:.3px;margin-top:12px;color:var(--yellow)}.pause-card,.finish-card{width:440px;max-width:100%;padding:30px;border:1px solid #ffffff22;background:#172c39ed;border-radius:22px;box-shadow:0 15px 70px #06162255}.pause-card h2,.finish-card h2{font-size:27px;line-height:1.3;margin:16px 0}.pause-card p,.finish-card p{font-size:13px;line-height:1.8;color:#b9d0da}.secondary{border:1px solid #ffffff35;background:transparent;padding:13px 20px;margin-top:15px;border-radius:10px;width:100%;font-size:13px;font-weight:700}.text-btn{display:block;margin:18px auto 0;font-size:12px;background:transparent;color:var(--muted)}#pauseScreen,#finishScreen,#errorScreen{justify-content:center;background:#0d25339c;backdrop-filter:blur(5px)}#finishMedal{font-size:42px;margin-top:15px}.finish-results{display:flex;gap:25px;margin:25px 0}.finish-results small{font-size:10px;color:var(--muted);display:block}.finish-results b{display:block;font-size:28px;color:var(--yellow);font-variant-numeric:tabular-nums}.finish-card .primary{margin-top:23px}#attribution{position:absolute;left:0;bottom:0;width:100%;padding:4px 15px;background:#172c3977;display:flex;justify-content:space-between;font-size:8px;color:#e4edf0;z-index:30;pointer-events:none}#attribution a{color:inherit;pointer-events:auto;text-decoration:none}#touchControls{position:absolute;left:20px;right:20px;bottom:max(46px,calc(env(safe-area-inset-bottom) + 33px));display:none;justify-content:space-between;align-items:flex-end;pointer-events:none}.steer-controls,.pedal-controls{display:flex;gap:10px;align-items:flex-end}.drive-btn{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:62px;height:62px;border:1px solid #ffffff40;background:#172c39ba;border-radius:18px;font-size:22px;box-shadow:0 4px 0 #0c202a55;backdrop-filter:blur(5px)}.drive-btn.active{background:var(--yellow);color:var(--ink);transform:scale(.95)}.drive-btn.brake,.drive-btn.gas{font-size:12px;font-weight:900}.drive-btn.brake{height:54px;width:51px;background:#b44941cc}.drive-btn.gas{height:77px;width:62px;background:#ffd15cdd;color:var(--ink)}.drive-btn.turbo{width:46px;height:46px;background:#396971db;color:#ffd15c;margin-bottom:44px}
@media (hover:none),(max-width:900px){#touchControls{display:flex}#speedPanel{bottom:143px;right:22px}#utilities{left:20px;bottom:132px}#utilities button{font-size:10px;padding:7px 9px}.control-guide{display:none}.menu-card{max-width:450px}.intro{font-size:13px}#mapPanel{width:135px;padding:10px;top:96px;right:18px}#minimap{height:132px}.map-title{font-size:8px}#hud{left:16px;right:16px;gap:10px}.raceinfo{gap:17px;padding:8px 13px}.raceinfo b{font-size:20px}.identity{padding:10px 12px}.identity b{font-size:12px}.identity small{font-size:7px}.identity .dot{display:none}.icon-btn{height:47px;width:42px}#location{left:20px;top:91px}#location b{font-size:18px}#location>span{font-size:10px;max-width:175px}#speed{font-size:52px}}
@media(max-width:600px) and (orientation:portrait){.overlay{padding:35px 25px;background:linear-gradient(110deg,#0d2533ec,#0d253390)}h1{font-size:52px;margin-top:17px}.intro{margin-bottom:16px}.tags{margin-bottom:18px}.menu-card{margin:auto 0}.mode-note{font-size:9px}#hud{left:12px;right:12px;gap:7px}.identity{display:none}.raceinfo{margin-left:0;flex:1;justify-content:space-between;gap:8px}.raceinfo b{font-size:20px}.raceinfo small{font-size:9px}.raceinfo div:last-child{min-width:93px}.raceinfo b span{font-size:10px}#location{top:83px;left:16px}#mapPanel{right:12px;top:143px;width:112px;background:#172c39a8}#minimap{height:110px}.map-title span{font-size:7px}.map-title b{display:none}#speedPanel{right:18px;bottom:155px;min-width:132px}#speed{font-size:48px}#touchControls{left:14px;right:14px}.steer-controls,.pedal-controls{gap:8px}.drive-btn{width:53px;height:58px;border-radius:15px}.drive-btn.gas{width:52px;height:73px}.drive-btn.brake{width:44px;height:51px}.drive-btn.turbo{width:41px;height:41px;margin-bottom:41px}#utilities{left:16px;bottom:128px}#utilities button{padding:7px;font-size:9px}#fullscreenBtn{display:none}#attribution{font-size:6px;padding:5px 10px}#attribution span{max-width:44%;text-align:right}.pause-card,.finish-card{padding:24px}.finish-results{gap:20px}.finish-results b{font-size:25px}}
@media(max-height:550px) and (orientation:landscape){.overlay{padding:17px 6vw}.menu-card{width:450px}h1{font-size:40px;margin:11px 0 10px;line-height:1}h1 br{display:none}.intro{font-size:11px;line-height:1.55;margin:8px 0 12px}.tags{margin-bottom:12px}.tags span{font-size:9px;padding:5px 8px}.toggle{margin-bottom:12px;font-size:11px}.mode-note{font-size:8px;margin-top:13px}.primary{padding:12px 18px;font-size:15px}.eyebrow{font-size:8px}.best{font-size:9px;margin-top:6px}#hud{top:12px}.identity{padding:8px 12px}.raceinfo{padding:7px 13px}.raceinfo b{font-size:18px}.raceinfo small{font-size:8px}.icon-btn{height:43px}#location{top:72px}#mapPanel{top:72px;width:108px;padding:8px;right:16px}#minimap{height:100px}.map-title{font-size:7px}#progressText{font-size:8px}#speedPanel{right:190px;bottom:54px;min-width:120px}#speed{font-size:42px}#driveMode{display:none}.boost-label{margin-top:7px}#utilities{left:20px;bottom:107px}#touchControls{bottom:34px}#attribution{font-size:6px}.drive-btn{height:52px;width:56px}.drive-btn.gas{height:65px}.drive-btn.turbo{margin-bottom:32px}.pause-card,.finish-card{padding:20px;width:500px}.finish-card h2{font-size:21px;margin:8px 0}#finishMedal{display:none}.finish-results{margin:12px 0}.finish-results b{font-size:23px}.finish-card .primary{margin-top:14px}.finish-card p{font-size:11px;margin:8px 0}.finish-card .secondary{margin-top:10px;padding:10px}.pause-card h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.loading-wheel{animation-duration:2s}#speedFX{display:none}}

#attribution .credits-link{font-size:9px;font-weight:750;text-decoration:underline;white-space:nowrap;margin:0 10px} @media(max-width:600px){#attribution .credits-link{font-size:8px;margin:0 7px}}

/* ===== v0.3.0 motion design ===== */
#speedLines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rank-cell{position:relative}.rank-delta{position:absolute;left:100%;top:14px;margin-left:-4px;font-style:normal;font-size:15px;font-weight:900;opacity:0;pointer-events:none}.rank-delta.up{color:#7ee38c}.rank-delta.down{color:#ff8a7a}.rank-delta.pop{animation:rankDelta 1.7s ease-out forwards}
#rank.bump{animation:rankBump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes rankDelta{0%{opacity:0;transform:translateY(8px) scale(.4)}15%{opacity:1;transform:translateY(0) scale(1.5)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes rankBump{0%{transform:scale(1)}35%{transform:scale(1.35);color:var(--yellow)}100%{transform:scale(1)}}
#countdown{display:block}#countdown.pop{animation:cdPop .7s cubic-bezier(.2,1.5,.35,1)}#countdown.go{color:#7ee38c;animation:cdGo .8s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes cdPop{0%{transform:translate(-50%,-50%) scale(2.3);opacity:0}30%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes cdGo{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}30%{transform:translate(-50%,-50%) scale(1.5);opacity:1}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
#startLights{position:absolute;left:50%;top:16%;transform:translateX(-50%);display:flex;gap:12px;padding:12px 18px;background:#0d1a22ee;border:2px solid #ffffff22;border-radius:16px;box-shadow:0 8px 30px #0008;pointer-events:none}
#startLights i{display:block;width:34px;height:34px;border-radius:50%;background:#3a1212;box-shadow:inset 0 3px 6px #0009;transition:background .08s,box-shadow .08s}
#startLights i.on{background:#ff2a1a;box-shadow:0 0 22px 6px #ff2a1aaa,inset 0 -4px 8px #8a0b05}#startLights.out{opacity:0;transition:opacity .35s}#startLights.out i{background:#3a1212;box-shadow:none}
#cornerCard{position:absolute;left:50%;top:15%;width:min(560px,90vw);transform:translateX(-50%);padding:13px 22px 14px 26px;color:#fff;background:linear-gradient(100deg,#0d1a22f2 0%,#172c39e6 70%,#172c3900 100%);border-left:8px solid #d62b2a;pointer-events:none;opacity:0;overflow:hidden}
#cornerCard .kerb-bar{position:absolute;left:-8px;top:0;bottom:0;width:8px;background:repeating-linear-gradient(180deg,#d62b2a 0 12px,#f7f2e6 12px 24px)}
#cornerCard small{display:block;font-size:11px;letter-spacing:3px;color:var(--yellow);font-weight:800}#cornerCard b{display:block;font-size:clamp(28px,5.4vw,46px);line-height:1.12;font-weight:950;letter-spacing:2px;text-shadow:0 3px 0 #0006}#cornerCard span{display:block;font-size:clamp(13px,2.6vw,19px);font-weight:800;letter-spacing:4px;color:#dbe9ee;font-style:italic}
#cornerCard.show{animation:cardSlide 3.4s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes cardSlide{0%{opacity:0;transform:translateX(-160%) skewX(-14deg)}9%{opacity:1;transform:translateX(-50%) skewX(-14deg)}13%{transform:translateX(-50%) skewX(0)}82%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(30%) skewX(10deg)}}
#bigBanner{position:absolute;left:0;right:0;top:27%;text-align:center;pointer-events:none;opacity:0}#bigBanner b{display:block;font-size:clamp(40px,9vw,92px);font-weight:950;font-style:italic;letter-spacing:4px;color:var(--yellow);text-shadow:4px 5px 0 var(--ink),0 0 40px #ffd15c55}#bigBanner small{display:block;font-size:clamp(14px,3vw,26px);letter-spacing:10px;font-weight:900;color:#fff;text-shadow:0 2px 8px #000a}
#bigBanner.sector b{color:#ff6a55}#bigBanner.finish b{color:#fff}#bigBanner.show{animation:bannerPop 2.6s cubic-bezier(.2,1.2,.3,1) forwards}
@keyframes bannerPop{0%{opacity:0;transform:scale(2.2) skewX(-10deg)}12%{opacity:1;transform:scale(1) skewX(-10deg)}80%{opacity:1;transform:scale(1.04) skewX(-10deg)}100%{opacity:0;transform:scale(1.2) skewX(-10deg);letter-spacing:14px}}
#slipBox{margin-top:9px}#slipBox .boost-label{margin:0 0 4px}#slipBox .boost-label span{color:#bfeaff}.slip-track{height:6px;background:#172c3977;border-radius:5px;overflow:hidden}.slip-track i{display:block;height:100%;width:0;background:#8fdcff;box-shadow:0 0 10px #8fdcff;transition:width .08s}#slipBox.full .slip-track i{background:#e8fbff;animation:slipPulse .35s ease-in-out infinite alternate}@keyframes slipPulse{to{box-shadow:0 0 18px 3px #c8f1ff}}
#app.reduce-motion #speedFX,#app.reduce-motion #speedLines{display:none}
#app.reduce-motion #cornerCard.show{animation:cardFade 3.4s linear forwards}@keyframes cardFade{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}
#app.reduce-motion #bigBanner.show{animation:cardFade 2.6s linear forwards}#app.reduce-motion #countdown.pop,#app.reduce-motion #countdown.go{animation:none;opacity:1;transform:translate(-50%,-50%)}
#app.reduce-motion .rank-delta.pop{animation:cardFade 1.7s linear forwards}#app.reduce-motion #rank.bump{animation:none}#app.reduce-motion #slipBox.full .slip-track i{animation:none}
@media(prefers-reduced-motion:reduce){#cornerCard.show{animation:cardFade 3.4s linear forwards}#bigBanner.show{animation:cardFade 2.6s linear forwards}#countdown.pop,#countdown.go{animation:none;opacity:1;transform:translate(-50%,-50%)}.rank-delta.pop{animation:cardFade 1.7s linear forwards}#rank.bump{animation:none}#speedLines{display:none}@keyframes cardFade{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}}
@media(max-width:600px) and (orientation:portrait){#cornerCard{top:52%;width:min(560px,92vw)}#startLights{top:20%;gap:9px;padding:9px 13px}#startLights i{width:28px;height:28px}#bigBanner{top:22%}.rank-delta{top:11px}#slipBox{margin-top:6px}}
@media(max-height:550px) and (orientation:landscape){#cornerCard{top:19%;padding:8px 18px}#cornerCard b{font-size:26px}#startLights{top:12%}#bigBanner{top:22%}#bigBanner b{font-size:44px}}
#cornerCard,#bigBanner,.rank-delta,#countdown,#rank{will-change:transform,opacity}

/* ===== v0.4.0 garage (vehicle picker) ===== */
#menu{touch-action:pan-y}
.garage{position:absolute;right:max(22px,5vw);bottom:max(44px,8vh);width:min(380px,38vw);padding:15px 18px 14px;border:1px solid #ffffff26;border-radius:18px;background:#172c39ea;box-shadow:0 10px 40px #06162266;backdrop-filter:blur(8px);user-select:none;-webkit-user-select:none;z-index:2}
.g-top{display:flex;justify-content:space-between;align-items:center}.g-index{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:1px}
.g-name{display:flex;align-items:center;gap:8px;margin:8px 0 4px}.g-title{flex:1;text-align:center;min-width:0}.g-title b{display:block;font-size:22px;font-weight:900;letter-spacing:1px;line-height:1.2}.g-title small{display:block;font-size:10px;letter-spacing:2px;color:var(--yellow);margin-top:3px}
.g-arrow{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid #ffffff30;background:#ffffff12;font-size:28px;line-height:1;padding:0 0 3px;color:#fff}.g-arrow:hover{background:#ffffff26}
.g-desc{font-size:12px;line-height:1.6;color:#cfe0e6;margin:6px 2px 10px;text-align:center;min-height:2.4em}
.g-stats{margin:0 0 10px;display:grid;gap:7px}.g-stats>div{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px}.g-stats dt{font-size:12px;font-weight:800;color:#e4eef1}.g-stats dd{margin:0;height:8px;border-radius:6px;background:#ffffff1c;overflow:hidden}.g-stats dd i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#ffb13b,var(--yellow));transition:width .28s cubic-bezier(.2,.9,.3,1)}.g-num{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:50px;text-align:right;grid-column:3;grid-row:1}.g-stats>div:not(:first-child)::after{content:"";min-width:50px}
.g-dots{display:flex;justify-content:center;gap:2px;margin-top:2px}.g-dot{width:26px;height:26px;border-radius:50%;background:transparent;position:relative;padding:0}.g-dot::before{content:"";position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:50%;background:#ffffff40;transition:background .15s,transform .15s}.g-dot.on::before{background:var(--yellow);transform:scale(1.35);box-shadow:0 0 10px #ffd15c88}
.g-hint{display:block;text-align:center;font-size:10px;color:var(--muted);margin-top:6px}.g-hint kbd{min-width:20px;height:20px;font-size:10px;padding:0 5px;margin:0 2px}
.finish-vehicle{margin:-6px 0 0!important;font-size:12px!important;color:var(--muted)!important}.finish-vehicle b{color:#fff;font-size:14px;letter-spacing:1px}
#app.reduce-motion .g-stats dd i,#app.reduce-motion .g-dot::before{transition:none}
@media(prefers-reduced-motion:reduce){.g-stats dd i,.g-dot::before{transition:none}}
@media (hover:none){.g-hint{display:none}}
@media(max-width:900px) and (orientation:landscape),(max-height:550px) and (orientation:landscape){.garage{width:min(330px,40vw);bottom:22px;padding:8px 14px 4px}.g-stats{display:none}.g-desc{display:none}#garage.locked .g-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 4px;min-height:0;font-size:11px;line-height:1.35}.g-name{margin:4px 0 2px}.g-dot{height:30px}.g-dot::before{top:10px}.g-title b{font-size:18px}.g-stats{gap:5px;margin-bottom:6px}.g-hint{display:none}.g-arrow{width:38px;height:38px}}
@media(max-width:600px) and (orientation:portrait){
  #menu{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:14px 16px 96px;background:linear-gradient(180deg,#0d253322 0,#0d253399 34%,#0d2533ee 52%)}
  #menu .menu-card{order:2;margin:14px 0 0;width:100%}
  .garage{order:1;position:relative;right:auto;bottom:auto;width:100%;margin-top:min(33vh,300px);padding:12px 14px 8px}
  .g-title b{font-size:20px}.g-desc{margin:4px 0 8px;min-height:0}
  #startBtn{position:sticky;bottom:12px;z-index:3;box-shadow:0 5px 0 #b78b27,0 8px 26px #000a}
  #menu .intro,#menu .tags{display:none}
}

/* ---- v0.5.0: cover art, track info screen -------------------------------------------------------- */
#cover{position:absolute;inset:0;z-index:19;background:#150a1f;overflow:hidden;transition:opacity .7s ease}
#cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;display:block}
#cover::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,#0d0a18f2 0%,#0d0a18c2 30%,#0d0a1855 62%,#0d0a1800 100%),linear-gradient(0deg,#0d0a18aa 0,#0d0a1800 28%)}
#cover small{position:absolute;right:16px;top:14px;z-index:1;font-size:9px;letter-spacing:2px;color:#ffffffb8;background:#0d0a1899;padding:4px 8px;border-radius:5px}
#cover.fade{opacity:0;pointer-events:none}
#menu.has-cover{background:transparent}
.menu-card .secondary{display:flex;align-items:center;justify-content:space-between;margin-top:12px;background:#0d253388;border-color:#ffd15c66;color:#ffe8a8;letter-spacing:.5px}
.menu-card .secondary:hover{background:#ffd15c22}
.tags{flex-wrap:wrap}
#trackInfo{position:absolute;inset:0;z-index:40;background:#06070a;color:#f6efe4;overflow:hidden;font-family:"Avenir Next Condensed","Avenir Next",Inter,"Noto Sans TC","PingFang TC",sans-serif}
#tiCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#tiLeaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#tiLeaders line{stroke:#ff6a5299;stroke-width:1}#tiLeaders line.peak{stroke:#ffd15ccc}
#tiLeaders circle{fill:#ff3a2a;stroke:#fff;stroke-width:1}#tiLeaders circle.peak{fill:#ffd15c}
.ti-head{position:absolute;left:max(24px,3vw);right:max(24px,3vw);top:max(18px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;gap:16px;pointer-events:none}
.ti-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:5px;color:#e10600}
.ti-head h2{margin:6px 0 4px;font-size:clamp(26px,3.6vw,46px);line-height:1.1;font-weight:900;text-shadow:0 0 18px #ffffff30}
.ti-src{margin:0;font-size:10px;letter-spacing:1.5px;color:#9a9486}
.ti-close{pointer-events:auto;flex:none;background:#ffd15c;color:#172c39;font-weight:900;border-radius:10px;padding:11px 18px;font-size:14px;box-shadow:0 4px 0 #b78b27}
.ti-stats{position:absolute;right:max(24px,3vw);top:max(92px,calc(env(safe-area-inset-top) + 74px));margin:0;display:flex;gap:clamp(14px,2.4vw,40px);text-align:right}
.ti-stats>div{min-width:0}
.ti-stats dt{font-size:10px;font-weight:800;letter-spacing:3px;color:#e10600}
.ti-stats dd{margin:2px 0 0;display:flex;justify-content:flex-end;align-items:baseline;gap:4px}
.ti-stats b{font-size:clamp(30px,4vw,54px);line-height:1;font-style:italic;font-weight:950;text-shadow:0 0 16px #ffffff40}
.ti-stats em{font-style:italic;font-weight:900;color:#ffd15c;font-size:clamp(14px,1.6vw,22px)}
.ti-stats small{display:block;font-size:11px;color:#d8d0c2;margin-top:3px}
.ti-labels{position:absolute;left:0;right:0;top:max(176px,24vh);bottom:max(150px,22vh);margin:0;padding:0;list-style:none;pointer-events:none}
.ti-label{position:absolute;width:min(17vw,236px);top:calc(var(--slot,0) * 16.66%);padding:5px 10px 6px 12px;background:#06070acc;border-left:3px solid #e10600;line-height:1.15}
.ti-label.left{left:max(18px,2vw)}.ti-label.right{right:max(18px,2vw)}
.ti-label.peak{border-left-color:#ffd15c}
.ti-label b{display:block;font-size:clamp(14px,1.55vw,22px);font-weight:900}
.ti-label small{display:block;font-size:9.5px;letter-spacing:1.4px;color:#ffaa96;font-weight:700;text-transform:uppercase;margin-top:2px}
.ti-label.peak small,.ti-label.peak .ti-num{color:#ffd15c}
.ti-num{display:none;font-style:normal}
.ti-profile{position:absolute;left:max(24px,3vw);right:max(24px,3vw);bottom:max(44px,calc(env(safe-area-inset-bottom) + 38px));height:clamp(76px,13vh,130px);display:flex;flex-direction:column}
.ti-profile>small{font-size:10px;letter-spacing:3px;font-weight:800;color:#bdb6a8;margin-bottom:2px}
#tiProfile{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#tiProfile .ti-line{fill:none;stroke:#fff;stroke-width:2.2;vector-effect:non-scaling-stroke}
.ti-plot{position:relative;flex:1;min-height:0}
.ti-peak{position:absolute;transform:translate(0,-50%);padding-left:12px;white-space:nowrap;color:#ffd15c;font-size:13px;font-weight:900;font-style:italic;letter-spacing:.5px;pointer-events:none}
.ti-peak i{position:absolute;left:-6px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#ffd15c;box-shadow:0 0 10px #ffd15c}
#tiProfile .tick{stroke:#ff6a52;stroke-width:1.2;vector-effect:non-scaling-stroke}
#tiProfile .peakline{stroke:#ffd15c;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.ti-axis{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:2px;color:#9a9486}
.ti-list{display:none;margin:0;padding:0;list-style:none}
.ti-foot{position:absolute;left:0;right:0;bottom:0;padding:5px max(24px,3vw);display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#9a9486;background:#06070acc}
.ti-foot a{color:#ffd15c;white-space:nowrap}
#trackInfo.compact{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto auto;padding:max(12px,env(safe-area-inset-top)) 14px 0}
#trackInfo.compact:not(.hidden){display:grid}
#trackInfo.compact .ti-head,#trackInfo.compact .ti-stats,#trackInfo.compact .ti-profile,#trackInfo.compact .ti-foot{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto}
#trackInfo.compact .ti-head{grid-row:1;padding:0 2px;z-index:2}
#trackInfo.compact .ti-head h2{font-size:25px}
#trackInfo.compact .ti-src{font-size:8px;letter-spacing:.6px}
#trackInfo.compact #tiCanvas{position:relative;grid-row:2;min-height:0}
#trackInfo.compact #tiLeaders{display:none}
#trackInfo.compact .ti-labels{position:absolute;inset:0;z-index:1}
#trackInfo.compact .ti-label{width:auto;top:0;left:0;padding:0;min-width:22px;height:22px;border:1.5px solid #fff;border-radius:11px;background:#e10600;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
#trackInfo.compact .ti-label.peak{background:#ffd15c;border-color:#fff}
#trackInfo.compact .ti-label.left,#trackInfo.compact .ti-label.right{left:0;right:auto}
#trackInfo.compact .ti-label b,#trackInfo.compact .ti-label small{display:none}
#trackInfo.compact .ti-label .ti-num{display:block;font-size:10px;font-weight:900;color:#fff;padding:0 4px}
#trackInfo.compact .ti-label.peak .ti-num{color:#172c39}
#trackInfo.compact .ti-stats{grid-row:3;justify-content:space-between;gap:8px;padding:8px 2px 4px;text-align:left}
#trackInfo.compact .ti-stats dd{justify-content:flex-start}
#trackInfo.compact .ti-stats b{font-size:28px}
#trackInfo.compact .ti-stats dt{font-size:8px;letter-spacing:1.5px}
#trackInfo.compact .ti-stats small{font-size:10px}
#trackInfo.compact .ti-profile{grid-row:4;height:84px}
#trackInfo.compact .ti-list{grid-row:5;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;max-height:21vh;overflow:auto;padding:6px 2px;font-size:12px}
#trackInfo.compact .ti-list li{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
#trackInfo.compact .ti-list .ti-num{display:inline-block;flex:none;width:20px;text-align:right;color:#ff6a52;font-weight:900;font-size:10px}
#trackInfo.compact .ti-list li.peak .ti-num{color:#ffd15c}
#trackInfo.compact .ti-list small{font-size:8px;color:#9a9486;overflow:hidden;text-overflow:ellipsis}
#trackInfo.compact .ti-list span{font-weight:800}
#trackInfo.compact .ti-foot{grid-row:6;padding:5px 0 max(6px,env(safe-area-inset-bottom));flex-direction:column;gap:2px;background:transparent}
@media(prefers-reduced-motion:reduce){#cover{transition:none}}
#game.graded{filter:contrast(1.09) saturate(1.16) brightness(.985)}
@media(max-width:600px) and (orientation:portrait){#menu.has-cover{background:linear-gradient(180deg,#0d253300 0,#0d253366 30%,#0d2533e6 56%)}#cover img{object-position:60% 50%}#cover::after{background:linear-gradient(0deg,#0d0a18cc 0,#0d0a1800 40%)}}
.menu-card .toggle{margin-bottom:12px}
.since{margin:14px 0 0;line-height:1.25}.since b{display:inline-block;font-size:15px;font-style:italic;font-weight:900;letter-spacing:1px;color:#fff;border-left:4px solid #e10600;padding-left:9px}.since small{display:block;margin:3px 0 0 13px;font-size:9px;letter-spacing:2.4px;color:#ffaa96;font-weight:800}@media(max-height:640px) and (orientation:landscape){.since{display:none}}
#menu{align-items:flex-start}#menu .menu-card{margin:auto 0}
@media(max-height:800px) and (orientation:landscape){.since{display:none}.menu-card .control-guide{margin-bottom:12px}.menu-card .tags{margin-bottom:14px}.menu-card .intro{margin-bottom:12px}.menu-card h1{margin:12px 0 12px}.menu-card .mode-note{margin-top:12px}.menu-card .primary{padding:14px 20px}.menu-card .secondary{margin-top:10px;padding:11px 18px}}
@media(max-width:600px) and (orientation:portrait){#menu{align-items:stretch}#menu .menu-card{margin:14px 0 0}}

/* v0.5.1 mobile title: hero art, title + tagline, garage, options, sticky start (nothing hidden under it) */
@media(max-width:600px) and (orientation:portrait){
  #menu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:min(24vh,210px) 16px calc(122px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#0d253300 0,#0d253300 18%,#0d2533cc 34%,#0d2533f0 55%)}
  #menu.has-cover{background:linear-gradient(180deg,#0d253300 0,#0d253300 18%,#0d2533c8 34%,#0d2533f0 55%)}
  #menu .menu-card{display:contents}
  #menu .menu-card>.eyebrow{order:1;margin:0}
  #menu .since{order:2;display:block;margin:8px 0 0}
  #menu h1{order:3;font-size:46px;margin:10px 0 14px}
  #menu .garage{order:4;position:relative;right:auto;bottom:auto;width:100%;margin:0 0 16px;padding:12px 14px 8px}
  #menu .toggle{order:5;margin:0 0 12px}
  #menu #trackBtn{order:6;margin:4px 0 0}
  #menu .mode-note{order:7;margin:14px 0 0}
  #menu #bestMenu{order:8}
  #menu .intro,#menu .tags,#menu .control-guide{display:none}
  #menu #startBtn{order:9;position:sticky;bottom:calc(30px + env(safe-area-inset-bottom));z-index:3;margin-top:46px;box-shadow:0 5px 0 #b78b27,0 10px 28px #000c}
  #attribution{padding-bottom:max(5px,env(safe-area-inset-bottom))}
}
#cover small{transition:opacity .25s}#cover.scrolled small{opacity:0}
@media(max-width:600px) and (orientation:portrait){
  #menu{padding-bottom:0!important}   /* sticky offsets are measured from the content box: keep end-space as an in-flow spacer instead of padding */
  #menu::after{content:"";order:12;flex:none;height:calc(30px + env(safe-area-inset-bottom))}   /* spacer == the button's pinned bottom offset: at scroll end nothing sits under it */
  #menu::before{content:"";order:11;flex:none;position:sticky;bottom:0;z-index:2;height:calc(116px + env(safe-area-inset-bottom));margin-top:calc(-116px - env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(180deg,#0d253300 0,#0d2533f2 26px,#0d2533 44px)}   /* solid backing strip behind the sticky start button */
}

/* ===== v0.6.0: pre-race options, laps, leaderboard ============================================================ */
.race-opts{margin:0 0 6px}
.opt{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.opt-name{flex:none;width:40px;font-size:12px;font-weight:800;color:#e4eef1}
.seg{display:flex;flex:1;gap:6px}
.seg button{flex:1;min-height:40px;padding:6px 8px;border-radius:10px;border:1px solid #ffffff30;background:#ffffff12;font-weight:800;font-size:14px;color:#fff;transition:background .15s,transform .15s}
.seg button:hover{background:#ffffff24}
.seg button.on{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:0 3px 0 #b78b27}
.assist-note{margin:0 0 10px;padding:6px 10px;border-radius:8px;background:#ffd15c1f;border:1px solid #ffd15c55;color:#ffe8a8;font-size:11px}
.assist-note.hidden{display:none}
.finish-results{flex-wrap:wrap}
.finish-laps{list-style:none;margin:-8px 0 14px;padding:0;display:grid;gap:3px;font-size:12px;color:#cfe0e6;font-variant-numeric:tabular-nums}
.finish-laps li{padding:5px 10px;border-radius:7px;background:#ffffff0d}
.finish-laps.hidden{display:none}
.submit-box{margin:0 0 14px;padding:12px;border-radius:12px;background:#ffffff0f;border:1px solid #ffffff1f}
.submit-box.hidden{display:none}
.submit-box label{display:block;font-size:12px;font-weight:800;margin-bottom:8px;color:#e4eef1}
.submit-row{display:flex;gap:8px}
.submit-row input{flex:1;min-width:0;height:44px;border-radius:10px;border:1px solid #ffffff40;background:#0d2533;color:#fff;padding:0 12px;font:inherit;font-size:16px}
.submit-row input:focus-visible{outline:3px solid #ffd15c}
.submit-row .primary{flex:none;width:auto;padding:0 16px;height:44px;font-size:14px;margin:0}
.submit-status{margin:8px 0 0;font-size:12px;color:var(--yellow);min-height:1.3em}
#finishScreen .secondary{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:10px}
#boardScreen{background:rgba(9,22,31,.88);justify-content:center;align-items:flex-start;z-index:24}
.board-card{width:min(900px,100%);margin:auto;padding:22px 24px 18px;border:1px solid #ffffff22;border-radius:20px;background:#172c39f4;box-shadow:0 15px 70px #06162277}
.lb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.lb-head h2{margin:6px 0 0;font-size:26px;font-weight:900}
.lb-tabs{flex:none;margin-bottom:12px}
.lb-filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.lb-filters label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#e4eef1}
.lb-filters select{min-height:38px;border-radius:9px;border:1px solid #ffffff40;background:#0d2533;color:#fff;padding:0 10px;font:inherit;font-size:14px}
.lb-status{min-height:1.4em;margin:6px 0;font-size:13px;color:var(--yellow)}
.lb-cols,.lb-list li{display:grid;grid-template-columns:54px minmax(0,1.5fr) 92px 92px minmax(0,1.3fr) 86px;gap:8px;align-items:center}
.lb-cols{padding:0 10px 4px;font-size:10px;letter-spacing:1px;color:var(--muted)}
.lb-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:3px}
.lb-list li{padding:8px 10px;border-radius:8px;background:#ffffff0d;font-size:13px;font-variant-numeric:tabular-nums}
.lb-list li.me{background:#ffd15c26;outline:1px solid #ffd15c88}
.lb-list li.empty{display:block;color:var(--muted);text-align:center}
.lb-list .lb-rank{font-weight:900;color:var(--yellow)}
.lb-list .lb-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-list .lb-veh,.lb-list .lb-date{font-size:11px;color:#cfe0e6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-sub{margin:16px 0 6px;font-size:14px}.lb-sub small{font-weight:600;color:var(--muted);font-size:11px;margin-left:8px}
.lb-note{margin:10px 0 0;font-size:10px;color:var(--muted)}
@media(max-width:600px){
  .board-card{padding:16px 14px}.lb-head h2{font-size:21px}
  .lb-cols,.lb-list li{grid-template-columns:38px minmax(0,1fr) 74px 74px;gap:6px}
  .lb-cols span:nth-child(n+5),.lb-list .lb-veh,.lb-list .lb-date{display:none}
  .lb-list li{font-size:12px;padding:7px 8px}
}
/* mobile: toast must not sit on the mini-map; (portrait) keep it left of the map, under the location chip */
@media(max-width:600px) and (orientation:portrait){
  #raceToast{left:12px;top:238px;max-width:calc(100vw - 150px);white-space:normal;text-align:left;font-size:12px;padding:8px 14px;border-radius:16px;transform:translate(0,-8px)}
  #raceToast.show{transform:translate(0,0)}
}
/* v0.6.0 title layout: everything (options + start) reachable without scrolling at 1280x720; car visible on phones */
@media(max-height:800px) and (orientation:landscape){
  .menu-card .tags,.menu-card .mode-note{display:none}
  .menu-card h1{font-size:50px;margin:8px 0 8px}.menu-card .intro{margin-bottom:10px;font-size:13px}
  .menu-card .control-guide{margin-bottom:8px}.opt{margin-bottom:7px}.seg button{min-height:36px}
  .menu-card .toggle{margin-bottom:8px}.menu-card .primary{padding:12px 20px}.menu-card .secondary{margin-top:8px;padding:9px 18px}
  #menu .menu-card{margin:0}#menu{padding-top:3vh;padding-bottom:36px}
}
@media(max-width:600px) and (orientation:portrait){
  #menu{padding-top:12px}
  #menu .race-opts{order:5;margin:0 0 6px}
  #menu #boardBtn{order:6;margin:4px 0 0}
  #menu .since{display:none}
  #menu h1{font-size:30px;margin:4px 0 0;line-height:1.1}#menu h1 br{display:none}#menu .title-stripe{display:none}
  #menu .garage{margin-top:calc(46vh - 92px)}   /* the 3D car shows in the band between the title and the garage card */
  .opt{margin-bottom:8px}.seg button{min-height:42px}
}

@media(max-width:600px) and (orientation:portrait){#menu .eyebrow,#menu h1{text-shadow:0 2px 10px #0d2533,0 0 3px #0d2533}#menu{background:linear-gradient(180deg,#0d253399 0,#0d253300 14%,#0d253300 30%,#0d2533cc 40%,#0d2533f0 55%)}#menu.has-cover{background:linear-gradient(180deg,#0d253300 0,#0d253300 18%,#0d2533c8 34%,#0d2533f0 55%)}}

/* ===== v0.6.5 mobile: gesture lock, big translucent thumb controls, safe areas, keyboard-safe menus ====================================== */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}
#app,#hud,#touchControls,#utilities,.drive-btn,.icon-btn,#location,#mapPanel,#speedPanel,.garage,.seg button,.primary,.secondary{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.overlay{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-bottom:calc(var(--kb,0px) + 24px);padding-bottom:calc(4vh + var(--kb,0px));padding-left:max(7vw,env(safe-area-inset-left));padding-right:max(7vw,env(safe-area-inset-right))}
#finishScreen,#boardScreen{padding-bottom:calc(24px + var(--kb,0px))}
.touch-only{display:none!important}@media(hover:none),(pointer:coarse){.toggle.touch-only{display:grid!important}}.touch-only.hidden{display:none!important}
#rotateHint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 108px);transform:translateX(-50%);z-index:30;max-width:90vw;padding:8px 14px;border-radius:18px;background:#172c39dd;border:1px solid #ffd15c66;color:#ffe8a8;font-size:12px;font-weight:800;white-space:nowrap;pointer-events:none;box-shadow:0 4px 18px #0006}
#rotateHint.top{bottom:auto;left:auto;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));transform:none;font-size:11px;padding:6px 10px}
@media(orientation:landscape){#rotateHint{display:none!important}}
/* touch controls: bigger (>= 56 px, most 64+), see-through so the road shows, pinned to the bottom corners, away from the track centre */
#touchControls{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px))}
#touchControls .steer-controls,#touchControls .pedal-controls{gap:10px}
#touchControls .drive-btn{width:68px;height:76px;border-radius:20px;background:#172c3966;border:1.5px solid #ffffff55;box-shadow:0 3px 0 #0c202a33;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);margin:0;font-size:26px;color:#ffffffe6;touch-action:none}
#touchControls .drive-btn.brake{width:62px;height:66px;background:#b44941aa;font-size:13px}
#touchControls .drive-btn.gas{width:72px;height:92px;background:#ffd15cbb;color:var(--ink);font-size:13px}
#touchControls .drive-btn.turbo{width:58px;height:58px;margin-bottom:34px;background:#396971bb;color:#ffd15c;font-size:24px}
#touchControls .drive-btn.active{background:var(--yellow);color:var(--ink);transform:scale(.94)}
#touchControls.tilt .steer-controls .drive-btn{opacity:.3}
#tiltCalBtn{margin:-4px 0 12px;padding:8px 14px;font-size:12px;min-height:40px;border-radius:12px;border:1px solid #ffd15c66;background:#0d253388;color:#ffe8a8}@media(hover:none),(pointer:coarse){#tiltCalBtn.touch-only:not(.hidden){display:block!important}}
@media (hover:none),(max-width:900px){#touchControls:not(.hidden)~#attribution{display:none}}   /* v0.6.6: touch buttons sit where the footer is; hide it while racing (visible again on menu / finish) */
#speedPanel{bottom:calc(max(16px,env(safe-area-inset-bottom) + 8px) + 104px)}
#utilities{left:max(16px,env(safe-area-inset-left));bottom:calc(max(16px,env(safe-area-inset-bottom) + 8px) + 88px)}
#utilities button{min-height:40px;min-width:48px;padding:8px 12px;font-size:12px}
.icon-btn,#pauseBtn{min-width:48px;min-height:48px}
#hud{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
@media(pointer:coarse){#fullscreenBtn{display:inline-block}.seg button,.lb-filters select,.ti-close,.g-arrow{min-height:44px}.g-arrow{min-width:48px}.g-dot{width:34px;height:44px}.g-dot::before{left:12px;top:17px}.toggle{min-height:44px}.submit-row input,.submit-row .primary{height:48px}}
#fullscreenBtn.hidden{display:none!important}
@media(max-width:600px) and (orientation:portrait){
  #touchControls .drive-btn{width:64px;height:72px}
  #touchControls .drive-btn.brake{width:56px;height:62px}
  #touchControls .drive-btn.gas{width:62px;height:84px}
  #touchControls .drive-btn.turbo{width:52px;height:52px;margin-bottom:30px}
  #touchControls .steer-controls,#touchControls .pedal-controls{gap:8px}
  #fullscreenBtn{display:none}
  /* corner / banner cards sit in the top band beside the map, never on the road ahead */
  #cornerCard{top:calc(max(12px,env(safe-area-inset-top)) + 112px);left:calc(12px + (100vw - 150px) / 2);width:calc(100vw - 150px);padding:8px 12px 9px 16px}
  #cornerCard b{font-size:24px}#cornerCard span{font-size:11px;letter-spacing:2px}
  #raceToast{top:calc(max(12px,env(safe-area-inset-top)) + 196px)}
}
@media(max-height:550px) and (orientation:landscape){
  #touchControls{bottom:max(12px,calc(env(safe-area-inset-bottom) + 4px))}
  #touchControls .drive-btn{width:66px;height:66px}
  #touchControls .drive-btn.brake{width:60px;height:60px}
  #touchControls .drive-btn.gas{width:68px;height:80px}
  #touchControls .drive-btn.turbo{width:56px;height:56px;margin-bottom:26px}
  #speedPanel{right:calc(max(14px,env(safe-area-inset-right)) + 262px);bottom:max(12px,calc(env(safe-area-inset-bottom) + 4px))}
  #utilities{bottom:calc(max(12px,env(safe-area-inset-bottom) + 4px) + 78px)}
  #mapPanel{right:max(16px,env(safe-area-inset-right))}
  /* corner card: small, at the top-left under the HUD instead of the middle of the view */
  #cornerCard{top:64px;left:calc(max(16px,env(safe-area-inset-left)) + 150px);width:min(300px,40vw);padding:6px 14px 7px 18px}
  #cornerCard b{font-size:21px}#cornerCard span{font-size:10px;letter-spacing:2px}
  #menu #startBtn{position:sticky;bottom:8px;z-index:3;box-shadow:0 4px 0 #b78b27,0 0 0 9px #0d2533f2,0 8px 22px #000a}
  .finish-card,.pause-card{margin:auto}
}
/* v0.6.7 ghost racing: pre-race row, HUD delta cell, finish line */
.ghost-note{margin:-4px 0 10px 52px;font-size:10px;line-height:1.5;color:var(--muted)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.ghost-chip small{color:#9fe8ff!important}
#ghostDelta{color:#fff;min-width:3.4em;display:inline-block}#ghostDelta.ahead{color:#7ee59a}#ghostDelta.behind{color:var(--red)}
.ghost-result{margin:6px 0 0!important;font-weight:800;color:#9fe8ff!important}
@media(max-height:550px) and (orientation:landscape){.ghost-note{margin:-4px 0 7px 52px;font-size:9px}.ghost-chip{min-width:0}}
@media(max-width:600px) and (orientation:portrait){.ghost-chip{min-width:56px!important}}

/* v0.6.8 online ghosts (G2): 4-way ghost row, 「追佢」 buttons on the board, upload status line */
#ghostSeg.online-on{flex-wrap:wrap}#ghostSeg.online-on button{flex:1 1 calc(50% - 6px);font-size:13px}
#ghostSeg button.hidden{display:none}
.lb-list.has-chase li{grid-template-columns:54px minmax(0,1.5fr) 92px 92px minmax(0,1.3fr) 86px 58px}
.lb-chase{min-height:30px;padding:2px 8px;border-radius:8px;border:1px solid #9fe8ff88;background:#9fe8ff1f;color:#bff3ff;font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.lb-chase:hover{background:#9fe8ff40}
@media(max-width:600px){.lb-list.has-chase li{grid-template-columns:38px minmax(0,1fr) 74px 74px 52px}}
@media(pointer:coarse){.lb-chase{min-height:40px;min-width:48px}}
/* v0.6.8 special vehicles: 11 dots wrap, special dots are rounded squares, a locked vehicle can be previewed but not started */
.g-dots{flex-wrap:wrap}.g-dot.special::before{border-radius:3px;background:#ffb85c88}.g-dot.special.on::before{background:var(--yellow)}
#startBtn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}#garage.locked .g-desc{color:#ffd15c}
.unranked-note{margin:8px 0 0;font-size:12px;color:#ffd15c}

/* ===== v0.7.0 sharing: result card, Facebook, copy link, WeChat 朋友圈 guide ============================================ */
.share-box{margin:14px 0 0;padding:12px;border-radius:12px;background:#ffffff0f;border:1px solid #ffffff1f}
.share-title{display:block;margin:0 0 8px;font-size:12px;font-weight:800;color:#e4eef1}
.share-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.share-btn{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid #ffd15c66;background:#0d253388;color:#ffe8a8;font-size:13px;font-weight:800;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.share-btn:hover{background:#ffd15c22}.share-btn.main{background:var(--yellow);color:var(--ink);border-color:transparent;box-shadow:0 3px 0 #b78b27}.share-btn:disabled{opacity:.55;cursor:progress}.share-btn.hidden{display:none}
.share-status{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--yellow);min-height:1.3em;word-break:break-all}
.share-sheet{z-index:60;background:rgba(9,22,31,.9);justify-content:center;align-items:flex-start}
.share-sheet-card{width:min(440px,100%);margin:auto;padding:22px 22px 16px;border:1px solid #ffffff22;background:#172c39f4;border-radius:22px;box-shadow:0 15px 70px #06162277}
.share-sheet-card h2{font-size:24px;line-height:1.3;margin:8px 0 6px}
.share-note,.share-steps{margin:0 0 10px;font-size:13px;line-height:1.7;color:#b9d0da}.share-steps{font-size:12px;color:#9fb8c2}
.share-preview{position:relative;min-height:110px;margin:0 0 10px;text-align:center}
.share-preview img{display:block;margin:0 auto;max-width:100%;width:auto;height:auto;max-height:44vh;border-radius:12px;border:1px solid #ffffff2a;box-shadow:0 8px 30px #0008;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.share-preview img:not([src]){display:none}
.share-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}.share-busy.hidden{display:none}
.share-actions .secondary{display:flex;align-items:center;justify-content:space-between;margin-top:8px;min-height:44px;color:inherit;text-decoration:none}.share-actions .secondary.hidden{display:none}
.share-actions .primary{margin-top:0}
.wx-hint{position:absolute;inset:0;z-index:70;background:rgba(5,12,18,.9);display:flex;align-items:flex-start;justify-content:center;padding:max(18vh,110px) 28px 28px}
.wx-arrow{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top));width:92px;height:116px;pointer-events:none}
.wx-hint-body{width:min(360px,100%);text-align:center}.wx-hint-body b{display:block;font-size:24px;line-height:1.4;color:var(--yellow);font-weight:900;margin-bottom:10px}
.wx-hint-body p{margin:0 0 22px;font-size:14px;line-height:1.7;color:#d6e4ea}.wx-hint-body .primary{justify-content:center}
#menu #shareMenu{max-width:100%}
@media(max-width:600px) and (orientation:portrait){#menu #shareMenu{order:6;margin:12px 0 0}.share-sheet{padding:20px 16px}.share-preview img{max-height:40vh}.wx-hint{padding-top:max(16vh,96px)}}
@media(max-height:550px) and (orientation:landscape){
  .share-sheet{padding:12px 4vw}
  .share-sheet-card{width:min(780px,100%);display:grid;grid-template-columns:minmax(150px,230px) 1fr;column-gap:20px;padding:14px 18px 10px;align-items:start}
  .share-sheet-card>*{grid-column:2}.share-sheet-card .share-preview{grid-column:1;grid-row:1/8;margin:0}
  .share-preview img{max-height:calc(100vh - 56px)}
  .share-sheet-card h2{font-size:19px;margin:4px 0}.share-note,.share-steps{font-size:11px;margin-bottom:6px;line-height:1.5}
  .share-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.share-actions .primary,.share-actions .secondary{margin:0;padding:8px 12px;font-size:12px;min-height:40px}.share-actions .text-btn{grid-column:1/3;margin:2px auto 0}
  .share-box{padding:8px}.share-btn{min-height:40px;font-size:12px}
  .wx-hint{padding-top:56px}.wx-hint-body b{font-size:19px}.wx-hint-body p{margin-bottom:12px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.share-btn{transition:none}}

/* v0.7.0 mobile garage: 844x390 shows the 3D car above a compact garage strip (stats hidden; they stay on tall screens) */