*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Microsoft YaHei,PingFang SC,Noto Sans CJK SC,system-ui,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}#app canvas{display:block}.hidden{display:none!important}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:20;background:radial-gradient(ellipse at center,#141e50d1,#00000af0)}#menu{overflow:auto;align-items:flex-start}.menu-inner{width:min(1180px,96vw);padding:24px 0 40px}.logo{text-align:center;margin:8px 0 18px;font-weight:900;letter-spacing:2px}.logo .l1{font-size:64px;background:linear-gradient(180deg,#fff 10%,#5fd0ff 55%,#2a6cff);-webkit-background-clip:text;color:transparent;font-style:italic;text-shadow:0 0 30px rgba(80,180,255,.35)}.logo .l2{font-size:54px;color:#ffd400;font-style:italic;margin-left:8px;text-shadow:0 4px 0 #c45c00}.logo small{display:block;font-size:16px;color:#9cc4ff;letter-spacing:6px;margin-top:4px}.tracks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media (max-width:900px){.tracks{grid-template-columns:repeat(2,1fr)}}.card{background:linear-gradient(180deg,#2846a08c,#0a143cb3);border:2px solid rgba(120,180,255,.25);border-radius:14px;padding:10px;cursor:pointer;transition:.15s;position:relative}.card:hover{transform:translateY(-3px);border-color:#5fd0ff}.card.sel{border-color:#ffd400;box-shadow:0 0 0 3px #ffd40059,0 8px 30px #00000080}.card img{width:100%;aspect-ratio:1/1.03;object-fit:cover;border-radius:8px;background:#111;display:block}.card h3{margin:8px 0 2px;font-size:20px}.card p{margin:0;font-size:13px;color:#a9c4ee}.card .bt{font-size:12px;color:#ffd400;margin-top:4px}.opts{display:flex;gap:18px;align-items:center;justify-content:center;margin:18px 0;flex-wrap:wrap}.opts label{font-size:15px}select{font-size:15px;padding:4px 8px;border-radius:6px;background:#0e1838;color:#fff;border:1px solid #3a5ab0}.btn{font:inherit;font-weight:700;font-size:17px;padding:10px 26px;margin:6px;border:none;border-radius:30px;cursor:pointer;color:#1b1200;background:linear-gradient(180deg,#ffe766,#ffb400);box-shadow:0 4px #b46b00,0 6px 16px #0006}.btn:active{transform:translateY(2px);box-shadow:0 2px #b46b00}.btn.big{font-size:22px;padding:12px 44px}.keys-box{background:#00000059;border:1px solid rgba(120,180,255,.2);border-radius:12px;padding:12px 18px;font-size:14px}.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 14px;margin:8px 0}kbd{display:inline-block;min-width:22px;padding:1px 6px;margin:0 2px;border-radius:5px;background:#e9eefb;color:#122;font:700 12px/18px system-ui;text-align:center;box-shadow:0 2px #8a96b8}.tip{color:#b8cdf0;margin:6px 0 0;line-height:1.6}.panel{background:linear-gradient(180deg,#1b2d6b,#0b1433);border:2px solid #4a7cff;border-radius:16px;padding:24px 34px;text-align:center;min-width:300px}.panel.wide{min-width:min(620px,94vw)}.panel h2{margin:0 0 14px;font-size:30px;color:#ffd400}.panel table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:16px}.panel td,.panel th{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.1)}.panel tr.me{color:#ffd400;font-weight:700}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#topLeft{position:absolute;left:18px;top:14px;text-shadow:0 2px 4px #000}.pos{font-size:64px;font-weight:900;font-style:italic;color:#ffd400;line-height:1}.pos small{font-size:26px;color:#fff}.lap{font-size:20px;margin-top:4px}.lap b{font-size:26px;color:#5fd0ff}.time{font:700 30px/1.2 ui-monospace,Consolas,monospace}#lapTimes{font:14px/1.5 ui-monospace,Consolas,monospace;color:#cfe0ff}.best{font-size:14px;color:#ffd400}#minimap{position:absolute;right:14px;top:14px;width:220px;height:220px;background:#000a1e73;border-radius:50%;border:2px solid rgba(120,180,255,.35)}#speedo{position:absolute;right:16px;bottom:14px;width:230px;height:230px}#speedCv{width:100%;height:100%}#speedo .spd{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:22px;text-shadow:0 2px 6px #000}#speedo .spd b{font:900 italic 56px/1 system-ui}#speedo .spd small{font-size:14px;color:#9cc4ff}#nitroBox{position:absolute;right:256px;bottom:28px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.slots{display:flex;gap:8px}.slot{width:62px;height:42px;border-radius:8px;border:2px solid rgba(120,180,255,.4);background:#0006;display:flex;align-items:center;justify-content:center;font:900 italic 16px system-ui;color:#ffffff40}.slot.on{background:linear-gradient(180deg,#5fd0ff,#1f5cff);color:#fff;border-color:#bfe9ff;box-shadow:0 0 14px #3fa9ff}.gauge{width:240px;height:14px;border-radius:7px;background:#00000080;border:1px solid rgba(255,255,255,.3);overflow:hidden}#gaugeFill{height:100%;width:0;background:linear-gradient(90deg,#3fa9ff,#a5f0ff)}#popups{position:absolute;left:0;right:0;top:30%;text-align:center}.pop{font:900 italic 64px/1.1 Microsoft YaHei,Noto Sans CJK SC,system-ui;color:#fff;-webkit-text-stroke:2px #0a2a7a;text-shadow:0 0 18px #3fa9ff,0 4px 0 #0a2a7a;animation:pop 1s ease-out forwards}.pop.small{color:#ffe14a;-webkit-text-stroke-color:#7a3a00;text-shadow:0 0 18px #ff9a00,0 4px 0 #7a3a00}.pop.double{color:#ff7ad9;-webkit-text-stroke-color:#5a0050;text-shadow:0 0 22px #ff3ac8,0 4px 0 #5a0050;font-size:76px}.pop.nitro{color:#9fe6ff}.pop.info{font-size:34px;color:#fff;-webkit-text-stroke:1px #000}@keyframes pop{0%{transform:scale(.4);opacity:0}15%{transform:scale(1.15);opacity:1}30%{transform:scale(1)}80%{opacity:1}to{transform:translateY(-40px);opacity:0}}#countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font:900 italic 180px system-ui;color:#ffd400;-webkit-text-stroke:4px #6a2a00;text-shadow:0 0 40px rgba(255,160,0,.7)}#countdown .go{color:#5fff7a;-webkit-text-stroke-color:#004a10}#boostHint{position:absolute;left:50%;top:58%;transform:translate(-50%);font:900 60px system-ui;color:#ffe14a;text-shadow:0 0 20px #ff9a00;opacity:0}#boostHint.on{opacity:1;animation:blink .18s infinite alternate}#boostHint.two{color:#ff7ad9;text-shadow:0 0 20px #ff3ac8}@keyframes blink{to{transform:translate(-50%) scale(1.25)}}#keyGuide{position:absolute;left:16px;bottom:16px;background:#0006;border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.9}#keyGuide .dim{color:#9cb4dc;font-size:12px}#driftInfo{position:absolute;left:50%;bottom:90px;transform:translate(-50%);font:700 18px system-ui;color:#bfe9ff;text-shadow:0 2px 4px #000}#touch{position:fixed;inset:auto 0 0 0;height:180px;z-index:15;pointer-events:none}#touch button{pointer-events:auto;width:84px;height:84px;margin:8px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:#14286473;color:#fff;font:700 20px system-ui;touch-action:none}#touch .tl{position:absolute;left:10px;bottom:10px}#touch .tr{position:absolute;right:250px;bottom:10px;display:flex;align-items:flex-end}#touch .sm{width:62px;height:62px}#touch .nit{background:#1e78ff99}@media (max-width:800px){#speedo{width:150px;height:150px}#speedo .spd b{font-size:36px}#nitroBox{right:170px}#touch .tr{right:160px}.gauge{width:150px}#minimap{width:140px;height:140px}.pos{font-size:44px}#keyGuide{display:none}.pop{font-size:44px}}body.touchmode #keyGuide{display:none}body.touchmode #minimap{width:120px;height:120px;top:8px;right:8px}body.touchmode #speedo{width:120px;height:120px;left:50%;right:auto;transform:translate(-50%);bottom:4px}body.touchmode #speedo .spd b{font-size:30px}body.touchmode #speedo .spd small{font-size:11px}body.touchmode #nitroBox{right:auto;left:50%;transform:translate(-50%);top:8px;bottom:auto;align-items:center}body.touchmode .slot{width:46px;height:30px;font-size:12px}body.touchmode .gauge{width:140px;height:10px}body.touchmode .pos{font-size:40px}body.touchmode .time{font-size:20px}body.touchmode .lap{font-size:15px}body.touchmode #lapTimes{font-size:11px}body.touchmode #touch .tr{right:8px}body.touchmode #touch button{width:70px;height:70px;font-size:17px;margin:5px}body.touchmode #touch .sm{width:54px;height:54px}body.touchmode .pop{font-size:40px}body.touchmode #countdown{font-size:110px}@media (max-height:520px){#keyGuide{display:none}#speedo{width:150px;height:150px}#speedo .spd b{font-size:36px}#nitroBox{right:170px}#minimap{width:140px;height:140px}}
