*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:#0a0620;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;touch-action:none;overscroll-behavior:none}
canvas#c{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}
.hidden{display:none!important}
button{font:inherit;color:#fff;background:rgba(20,16,40,.85);border:2px solid #ff2bd6;border-radius:12px;padding:.55em 1.1em;font-weight:800;letter-spacing:.04em;cursor:pointer;box-shadow:0 0 12px rgba(255,43,214,.35)}
button:active{transform:scale(.96)}
button.big{background:linear-gradient(90deg,#ff2bd6,#7a2bff);border:none;font-size:1.15em;padding:.7em 1.6em}
button.icon{padding:.3em .7em}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.screen header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.screen h2{margin:0;font-size:clamp(18px,3.4vw,28px);letter-spacing:.08em;text-shadow:0 0 10px #ff2bd6}
.wallet{font-weight:900;font-size:clamp(14px,2.6vw,20px);background:rgba(0,0,0,.5);padding:.3em .8em;border-radius:20px;border:1px solid #ffd200}
#title{justify-content:center;align-items:flex-start;background:linear-gradient(90deg,rgba(10,6,32,.92) 0%,rgba(10,6,32,.55) 45%,rgba(10,6,32,0) 70%)}
#title .logo h1{margin:0;font-size:clamp(40px,9vw,86px);line-height:.95;font-style:italic;letter-spacing:.02em;text-shadow:0 0 18px #ff2bd6,4px 4px 0 #7a2bff}
#title .logo h1 i{color:#00e5ff;text-shadow:0 0 18px #00e5ff,4px 4px 0 #ff2bd6}
#title .jp{font-size:clamp(14px,2.6vw,22px);color:#ffe600;letter-spacing:.4em}
#title p{opacity:.85;margin:.4em 0 1em;font-size:clamp(12px,2.2vw,16px)}
.menuBtns{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#title .wallet{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.foot{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));opacity:.55;font-size:12px}
#cities{background:rgba(8,5,24,.86)}
#cityList{flex:1;display:flex;gap:12px;align-items:center;overflow-x:auto;padding:10px 4px;touch-action:pan-x}
.city{flex:0 0 clamp(150px,22vw,210px);height:min(62vh,280px);border-radius:16px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;cursor:pointer;border:2px solid var(--c);box-shadow:0 0 16px var(--c);background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.85)),var(--bg)}
.city .k{position:absolute;top:10px;right:12px;font-size:clamp(28px,5vw,44px);font-weight:900;color:var(--c);opacity:.9;writing-mode:vertical-rl}
.city h3{margin:0;font-size:clamp(18px,3vw,24px)}
.city small{opacity:.8}
.city.locked{filter:grayscale(1) brightness(.5);cursor:not-allowed}
.city.locked::after{content:"🔒";position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:40px}
.city .badge{position:absolute;top:10px;left:10px;font-size:11px;background:#1f6b3a;padding:2px 8px;border-radius:10px}
.note{opacity:.7;font-size:12px;margin:4px 0}
/* garage */
#garage{background:linear-gradient(90deg,rgba(8,5,24,.92) 0,rgba(8,5,24,.55) 30%,rgba(8,5,24,0) 42%,rgba(8,5,24,0) 60%,rgba(8,5,24,.6) 68%,rgba(8,5,24,.92) 100%)}
.gWrap{flex:1;display:grid;grid-template-columns:minmax(150px,28%) 1fr minmax(170px,30%);gap:10px;min-height:0;margin-top:6px}
.gLeft,.gRight{overflow-y:auto;min-height:0;touch-action:pan-y;padding-right:4px}
.gMid{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding-bottom:4px;pointer-events:none}
.gMid>*{pointer-events:auto}
#carName{font-weight:900;font-size:clamp(16px,3vw,24px);text-shadow:0 0 10px #00e5ff;text-align:center}
#carStats{display:grid;grid-template-columns:auto 90px;gap:2px 8px;font-size:11px;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:10px}
#carStats .b{height:7px;background:#222;border-radius:4px;overflow:hidden;align-self:center}#carStats .b i{display:block;height:100%;background:linear-gradient(90deg,#00e5ff,#ff2bd6)}
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.tabs button{padding:.3em .6em;font-size:12px;border-width:1px;box-shadow:none}
.tabs button.on{background:#ff2bd6}
.carItem{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;margin-bottom:6px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:13px;cursor:pointer}
.carItem.on{border-color:#00e5ff;box-shadow:0 0 10px rgba(0,229,255,.5)}
.carItem .p{font-weight:800;color:#ffd200;white-space:nowrap}.carItem .p.own{color:#5be08a}
.gRight h3{margin:8px 0 4px;font-size:12px;letter-spacing:.1em;opacity:.8;text-transform:uppercase}
.sw{display:flex;flex-wrap:wrap;gap:5px}
.sw b{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.3);cursor:pointer}
.sw b.on{border-color:#fff;box-shadow:0 0 8px #fff}
.sw input[type=color]{width:28px;height:28px;border:none;background:none;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips button,.seg button{font-size:11px;padding:.35em .6em;border-width:1px;box-shadow:none;border-color:rgba(255,255,255,.3)}
.chips button.on,.seg button.on{background:#7a2bff;border-color:#fff}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.plateRow{margin-top:6px;font-size:12px}
.plateRow input{width:80px;font:inherit;font-weight:800;font-size:16px;background:#111;color:#fff;border:1px solid #ff2bd6;border-radius:8px;padding:4px 8px;user-select:text;-webkit-user-select:text}
#settings{background:rgba(8,5,24,.92)}
.setBox{max-width:620px;overflow-y:auto;touch-action:pan-y;padding:4px}
.setBox h3{margin:12px 0 6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.setBox .seg button{font-size:14px;padding:.5em .9em}
input[type=range]{width:260px;accent-color:#ff2bd6}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;font-weight:900}
#hudL{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left))}
#score{font-size:clamp(20px,4vw,34px);text-shadow:0 0 10px #ff2bd6,2px 2px 0 #000}
#combo{font-size:clamp(13px,2.4vw,20px);color:#00e5ff;text-shadow:0 0 8px #00e5ff;min-height:1.2em}
#hudC{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(44vw,380px)}
#progLbl{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em;text-shadow:1px 1px 0 #000}
#progDist{color:#ffe600}
#prog{position:relative;height:8px;background:rgba(0,0,0,.6);border-radius:5px;border:1px solid rgba(255,255,255,.3);margin-top:2px}
#progFill{height:100%;width:0;background:linear-gradient(90deg,#00e5ff,#ff2bd6);border-radius:5px}
#progCar{position:absolute;top:-9px;left:0;font-size:16px;transform:translateX(-50%) scaleX(-1)}
#heatWrap{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px}
#heat{flex:1;height:6px;background:rgba(0,0,0,.6);border-radius:4px;overflow:hidden}
#heatFill{height:100%;width:30%;background:linear-gradient(90deg,#3d7bff,#ff2030)}
#hudR{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:10px;align-items:center;pointer-events:auto}
#coins{font-size:clamp(14px,2.6vw,20px);text-shadow:2px 2px 0 #000}
#speed{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 0 10px #00e5ff,2px 2px 0 #000}
#speed b{font-size:clamp(24px,5vw,40px)}#speed small{display:block;font-size:11px;opacity:.8;margin-top:-4px}
#popups{position:absolute;left:50%;top:30%;transform:translateX(-50%);text-align:center}
.pop{font-size:clamp(16px,3.4vw,28px);color:#ffe600;text-shadow:0 0 10px #ff2bd6,2px 2px 0 #000;animation:pop 1.1s ease-out forwards;white-space:nowrap}
@keyframes pop{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}100%{opacity:0;transform:translateY(-40px)}}
#warn{position:absolute;top:28%;width:100%;text-align:center;color:#ff3040;font-size:clamp(16px,3vw,24px);text-shadow:0 0 12px #ff0020;opacity:0;transition:opacity .2s}
#warn.on{opacity:1;animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
/* controls */
#controls{position:fixed;inset:0;pointer-events:none}
#wheel{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));width:clamp(120px,24vh + 40px,190px);aspect-ratio:1;pointer-events:auto;touch-action:none;border-radius:50%;background:radial-gradient(rgba(0,0,0,.35),rgba(0,0,0,0) 70%)}
#wheelImg{width:100%;height:100%}#wheelImg svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(255,43,214,.7))}
#tiltIco{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));font-weight:900;font-size:13px;opacity:.7;display:none}
#controls.tilt #wheel{display:none}#controls.tilt #tiltIco{display:block}
#pedals{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:flex-end;pointer-events:auto}
.pedal{width:clamp(64px,13vh + 20px,96px);border-radius:14px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-weight:900;font-size:12px;touch-action:none;border:2px solid rgba(255,255,255,.45);background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 6px,rgba(0,0,0,.35) 6px 12px);transition:transform .05s}
#brake{height:clamp(70px,20vh,110px);border-color:#ff3040;box-shadow:0 0 10px rgba(255,48,64,.5)}
#gas{height:clamp(100px,30vh,150px);width:clamp(58px,11vh + 16px,84px);border-color:#5be08a;box-shadow:0 0 10px rgba(91,224,138,.5)}
.pedal.down{transform:scale(.92) perspective(200px) rotateX(18deg);filter:brightness(1.6)}
#kbHint{position:absolute;bottom:4px;left:50%;transform:translateX(-50%) translateY(-64px);font-size:11px;opacity:.55;white-space:nowrap}
@media (pointer:coarse){#kbHint{display:none}}
/* intro */
#intro{position:fixed;inset:0;pointer-events:none}
#intro .bar{position:absolute;left:0;right:0;height:9vh;background:#000;animation:bars .5s ease-out}
#intro .top{top:0}#intro .bot{bottom:0}
@keyframes bars{from{height:0}}
#caption{position:absolute;bottom:12vh;width:100%;text-align:center;font-weight:900;font-size:clamp(18px,4vw,36px);letter-spacing:.06em;text-shadow:0 0 14px #ff2bd6,3px 3px 0 #000}
#caption.pulse{animation:pop2 .4s ease-out}
@keyframes pop2{from{transform:scale(1.4);opacity:0}}
#skip{position:absolute;top:calc(9vh + 8px);right:max(14px,env(safe-area-inset-right));pointer-events:auto;font-size:14px;padding:.4em .9em}
/* modals */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,3,15,.6)}
.card{background:rgba(16,12,36,.94);border:2px solid #ff2bd6;border-radius:18px;padding:16px 26px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:0 0 30px rgba(255,43,214,.4);max-height:94vh;overflow:auto}
.card h2{margin:0;font-size:clamp(24px,5vw,40px);font-style:italic;text-shadow:0 0 14px #ff2bd6}
.card p{margin:0;opacity:.85}
.card .row{display:flex;gap:8px}
.stats{display:grid;grid-template-columns:auto auto;gap:2px 18px;font-weight:800;text-align:left}
.stats span:nth-child(2n){color:#ffe600;text-align:right}
#toast{position:fixed;top:22%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);border:1px solid #00e5ff;padding:8px 16px;border-radius:12px;font-weight:700;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;max-width:80vw}
#toast.on{opacity:1}
#rotate{position:fixed;inset:0;background:#0a0620;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:20px;padding:20px}
#rotate .phone{font-size:72px;animation:rot 1.6s ease-in-out infinite}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0620;font-weight:900;letter-spacing:.2em;z-index:60}
@media (max-height:420px){.gRight h3{margin:5px 0 3px}.sw b{width:20px;height:20px}.city{height:min(66vh,260px)}}

/* horn, tricks, minimap, beat */
#horn{position:absolute;left:50%;top:56%;width:28%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;padding:0;border:2px solid #00e5ff;background:radial-gradient(#3a3a4a,#15151c);font-size:clamp(14px,3vh,22px);box-shadow:0 0 10px rgba(0,229,255,.6);touch-action:none;pointer-events:auto;z-index:2;color:#fff}
#horn.down{transform:translate(-50%,-50%) scale(.88);background:#00e5ff}
#tricks{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(max(10px,env(safe-area-inset-bottom)) + clamp(108px,31vh,160px));display:flex;gap:8px;pointer-events:auto}
#tricks button{min-width:54px;padding:6px 8px;border-radius:12px;font-size:12px;font-weight:900;touch-action:none;position:relative;overflow:hidden;border:2px solid #ffe600;background:rgba(20,10,40,.75);color:#fff}
#tricks button i{position:absolute;left:0;bottom:0;height:4px;background:#ffe600;width:100%}
#tricks button.cd{opacity:.45}
#minimap{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 40px);right:max(14px,env(safe-area-inset-right));width:clamp(84px,24vh,130px);height:clamp(84px,24vh,130px);border-radius:50%;border:2px solid rgba(0,229,255,.7);box-shadow:0 0 12px rgba(0,229,255,.4);background:rgba(5,3,15,.65)}
#speed b,#score{transform:scale(calc(1 + var(--beat,0) * .08));display:inline-block}
.trickItem small{display:block;opacity:.7;font-size:11px;font-weight:400}
.appBtns{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 48px);right:max(16px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.appBtns button,.appBtns a.btn{font-size:13px;padding:.45em .9em;border-radius:12px;border:2px solid #00e5ff;background:rgba(0,229,255,.12);color:#fff;text-decoration:none;font-weight:800;font-family:inherit;cursor:pointer}
.appBtns a.btn{border-color:#7cff4f;background:rgba(124,255,79,.12)}