:root{font-family:'Barlow Condensed','Noto Sans SC',system-ui,sans-serif;color:#fff}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#75ceec}button{font:inherit;cursor:pointer}#game,#scene,.vignette{position:fixed;inset:0}canvas{display:block}#scene canvas{width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(180deg,rgba(11,53,62,.36),transparent 23%,transparent 68%,rgba(8,48,48,.3));}.topline{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;padding:27px 42px;gap:38px}.brand{display:flex;align-items:center;gap:9px;font-size:12px;line-height:.9;letter-spacing:1.5px;font-weight:700;text-shadow:0 2px 5px #386b76}.brand b{font-size:15px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:#ed403d;border:2px solid white;border-radius:50%;font-size:24px;font-weight:900;letter-spacing:0}.track-label{font-size:12px;letter-spacing:1px;font-weight:800;text-shadow:0 2px 5px #396b76}.track-label span{color:#ffe14c;font-size:17px;margin-right:5px}.track-label small{opacity:.7;font-size:10px}.icon-btn{margin-left:auto;border:1px solid #ffffff90;background:#ffffff30;color:white;width:37px;height:37px;border-radius:50%;font-size:20px}.overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(14,58,67,.88) 0%,rgba(15,65,68,.71) 35%,rgba(22,84,81,.13) 72%),linear-gradient(0deg,rgba(13,63,65,.36),transparent 35%)}.intro{position:absolute;left:8%;top:50%;transform:translateY(-43%);max-width:620px}.eyebrow{font-size:13px;font-weight:800;letter-spacing:3px;color:#ffe264}.eyebrow span{font-size:11px}.intro h1{font-family:'Noto Sans SC',sans-serif;font-size:clamp(45px,6vw,88px);line-height:1.14;letter-spacing:-3px;margin:19px 0 17px;font-weight:900;text-shadow:0 5px 0 rgba(13,77,72,.25)}.intro h1 span{color:#ffdd46}.intro p{line-height:1.8;color:#e5f3ef;font-size:15px;margin:0 0 30px}.intro-actions{display:flex;align-items:center;gap:28px}.primary{border:0;border-radius:7px;background:#f64a3f;color:white;font-weight:900;font-size:18px;padding:16px 23px;box-shadow:0 5px 0 #c82f2d,0 9px 20px #173b3960;min-width:172px;text-align:left}.primary:hover{background:#ff5e50;transform:translateY(-2px)}.primary span{float:right;font-size:23px;margin-left:30px}.race-info{display:flex;align-items:center;gap:8px}.race-info>b{font-size:30px;color:#ffdf51}.race-info span{font-size:10px;line-height:1.4;opacity:.9}.race-info strong{font-size:12px}.race-info i{width:1px;height:31px;background:#ffffff50;margin:0 6px}.controls{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px;color:#e8f5ed;font-size:11px;font-weight:700}.controls span{white-space:nowrap}kbd,.hint span{display:inline-block;border:1px solid #ffffff80;border-radius:3px;background:#ffffff25;padding:3px 6px;margin-right:3px;font:700 10px system-ui}.intro-side{position:absolute;right:5%;bottom:16%;font-size:12px;line-height:1.4;letter-spacing:2px;text-align:right;text-shadow:0 2px 4px #336}.side-number{font-size:44px;font-weight:900;letter-spacing:0}.side-number span{font-size:15px;opacity:.65}.side-line{height:2px;background:#fff;margin:8px 0 14px}.intro-footer{position:absolute;bottom:25px;left:42px;right:42px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;font-weight:700;opacity:.85}.hidden{display:none!important}.hud{position:absolute;inset:0;z-index:1;pointer-events:none}.hud-left{position:absolute;top:94px;left:42px}.position{height:100px;font-size:115px;line-height:.8;font-weight:900;font-style:italic;color:#ffdd48;text-shadow:3px 4px 0 #de8026,5px 7px 0 #693c2270}.position sup{font-size:30px;vertical-align:top;line-height:1.5;margin-left:2px}.position-label{font-size:10px;font-weight:900;letter-spacing:3px}.position-label span{letter-spacing:1px;opacity:.75;margin-left:4px}.item-box{margin-top:22px;display:flex;align-items:center;gap:10px}.item-box>div:first-child{display:grid;place-items:center;width:56px;height:56px;background:linear-gradient(140deg,#91ebfb,#638ae6);border:3px solid #fff;border-radius:12px;box-shadow:0 4px 0 #3163a177;font-size:34px;font-weight:900}.item-box b,.item-box small{display:block}.item-box b{font-size:13px}.item-box small{font-size:10px;opacity:.75;margin-top:3px}.hud-right{position:absolute;right:42px;top:91px;text-align:right}.lap,.time{display:flex;align-items:baseline;justify-content:flex-end;gap:12px}.lap span,.time span{font-size:10px;letter-spacing:2px;font-weight:800}.lap b{font-size:34px;font-style:italic}.lap em{font-size:17px;font-style:normal;opacity:.7}.time b{font-size:20px;letter-spacing:1px}.hud-right canvas{margin:8px -9px 0 auto;width:160px;height:133px}.bottom-hud{position:absolute;bottom:30px;left:42px;right:42px;display:flex;align-items:flex-end;justify-content:space-between}.hint{font-size:11px;font-weight:700}.hint span{margin-left:8px}.speed{text-align:right;text-shadow:0 2px 5px #347}.speed>span{font-size:60px;font-style:italic;font-weight:900;line-height:.8}.speed small{font-size:11px;font-weight:900;margin-left:4px}.speed-line{height:5px;width:150px;background:#ffffff70;transform:skewX(-25deg);margin-top:9px}.speed-line i{display:block;height:100%;width:0;background:#ffe051}.center-message{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);z-index:5;color:#ffdf42;font-size:clamp(90px,14vw,180px);font-weight:900;font-style:italic;text-shadow:0 8px 0 #e94a38,0 14px 25px #204a4b80;pointer-events:none}.toast{position:absolute;left:50%;top:23%;transform:translateX(-50%);z-index:4;font-size:18px;font-weight:900;text-shadow:0 3px 5px #366;opacity:0;transition:opacity .2s}.toast.show{opacity:1}.finish{display:grid;place-items:center;background:#123e49bb}.finish-card{text-align:center;background:#f9fbeb;color:#16494b;padding:42px 60px;border-radius:20px;box-shadow:0 12px 0 #1d695a;min-width:330px}.finish-card .eyebrow{color:#e5523d}.finish-emoji{font-size:65px;margin:15px}.finish-card h2{font-size:36px;margin:0}.finish-card p{color:#64857e;margin:12px 0 27px}.touch-controls{display:none;position:absolute;bottom:20px;left:15px;right:15px;z-index:3;display:flex;justify-content:space-between;pointer-events:none}.touch-controls>div{display:flex;gap:8px;align-items:end}.touch-controls button{pointer-events:auto;touch-action:none;border:2px solid #ffffffb0;border-radius:50%;background:#1b5c69a0;color:white;width:54px;height:54px;font-weight:900}.touch-controls .go{width:68px;height:68px;background:#e9483dcc}.error{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#333;padding:25px;border-radius:10px}@media(max-width:700px){.topline{padding:18px 20px}.track-label{display:none}.intro{left:7%;right:7%;top:46%}.intro h1{font-size:47px}.intro p{font-size:13px}.intro-side,.intro-footer span:last-child{display:none}.intro-footer{left:20px;bottom:20px}.controls{gap:8px;margin-top:25px}.hud-left{left:20px;top:80px}.position{font-size:80px;height:70px}.position sup{font-size:22px}.hud-right{right:20px;top:76px}.hud-right canvas{width:120px;height:100px}.bottom-hud{bottom:100px;left:20px;right:20px}.hint{display:none}.speed>span{font-size:45px}.item-box{margin-top:15px}.item-box>div:first-child{width:44px;height:44px;font-size:26px}.race-info{gap:5px}.race-info>b{font-size:23px}}@media(pointer:coarse){.touch-controls:not(.hidden){display:flex}.hint{display:none}.bottom-hud{bottom:105px}}