:root{color-scheme:dark;--cyan:#54e7ff;--green:#56f5a2;--red:#ff667a;--glass:rgba(4,13,24,.72);--line:rgba(255,255,255,.14)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#07111d;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#fff;touch-action:none}button,input{font:inherit}button{color:inherit;border:0;cursor:pointer}#game{position:absolute;inset:0;width:100%;height:100%;display:block}.glass{background:linear-gradient(135deg,rgba(14,29,46,.82),rgba(3,10,19,.7));border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#loading{position:fixed;inset:0;z-index:50;background:#07111d;display:grid;place-content:center;text-align:center;gap:8px;transition:.45s}#loading.hidden{opacity:0;pointer-events:none}.loader{width:48px;height:48px;border-radius:50%;border:3px solid #183044;border-top-color:var(--cyan);animation:spin 1s linear infinite;margin:auto}#loading b{font-size:16px}#loading small{color:#7890a5}@keyframes spin{to{transform:rotate(360deg)}}
.hud{position:absolute;z-index:5;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));height:58px;border-radius:18px;display:flex;align-items:center;padding:8px 10px;gap:12px}.brand{display:flex;align-items:center;gap:9px;min-width:180px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#32d6ef,#2266dc);font-weight:900;box-shadow:0 6px 18px #13bfe855}.brand b,.brand small{display:block}.brand b{font-size:14px}.brand small{font-size:10px;color:#8ba3b9;margin-top:2px}.metrics{display:flex;flex:1;justify-content:center;gap:clamp(12px,4vw,42px)}.metrics span{text-align:center;white-space:nowrap}.metrics small,.metrics em{font-size:9px;color:#91a6ba;font-style:normal}.metrics b{font-size:17px;margin:0 4px;font-variant-numeric:tabular-nums}.icon-btn{width:39px;height:39px;border-radius:12px;background:#14293c;font-size:19px}.icon-btn:active{transform:scale(.94)}
.notice{position:absolute;z-index:5;left:50%;top:76px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;min-width:265px;padding:8px 14px;border-radius:14px}.notice i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}.notice b,.notice span{display:block}.notice b{font-size:12px}.notice span{font-size:10px;color:#9bb0c3;margin-top:2px}.notice.danger i{background:var(--red);box-shadow:0 0 12px var(--red)}
.mirror{position:absolute;z-index:4;top:79px;width:19vw;max-width:220px;height:70px;border:2px solid #1b2834;border-radius:9px 9px 16px 16px;overflow:hidden;background:#0a131c;box-shadow:0 5px 18px #0008}.mirror canvas{width:100%;height:100%;display:block}.mirror span{position:absolute;right:6px;bottom:4px;padding:1px 4px;border-radius:4px;background:#0008;color:#c9e7f5;font-size:8px}.mirror-left{left:max(14px,env(safe-area-inset-left));transform:perspective(300px) rotateY(8deg)}.mirror-right{right:max(14px,env(safe-area-inset-right));transform:perspective(300px) rotateY(-8deg)}
.controls{position:absolute;z-index:6;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));height:112px;pointer-events:none}.controls>*{pointer-events:auto}.wheel-zone{position:absolute;left:0;bottom:0;width:154px;height:112px;border-radius:24px;display:flex;align-items:center;padding:8px}.wheel{position:relative;width:92px;height:92px;border:10px solid #1d3041;border-radius:50%;box-shadow:inset 0 0 0 3px #050b10,0 8px 20px #0008;transform:rotate(0deg)}.wheel:after{content:"";position:absolute;inset:-7px;border:2px solid #4a6072;border-radius:50%}.wheel i{position:absolute;left:37px;top:36px;width:6px;height:39px;background:#344a5d;transform-origin:3px 3px;border-radius:3px}.wheel i:nth-child(1){transform:rotate(0deg)}.wheel i:nth-child(2){transform:rotate(120deg)}.wheel i:nth-child(3){transform:rotate(240deg)}.wheel span{position:absolute;inset:25px;display:grid;place-items:center;border-radius:50%;background:#102334;color:var(--cyan);font-size:10px}.wheel-read{position:absolute;right:7px;text-align:center;width:44px}.wheel-read b,.wheel-read small{display:block}.wheel-read b{font-size:12px;color:var(--cyan)}.wheel-read small{font-size:8px;color:#7f96a9;margin-top:5px;line-height:1.3}.gear-panel{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;gap:5px;padding:6px;border-radius:16px}.gear-panel button{width:38px;height:38px;border-radius:11px;background:#0b1926;color:#70879a;font-weight:800}.gear-panel button.active{background:linear-gradient(145deg,#28cfe6,#246bd6);color:#fff;box-shadow:0 5px 16px #23b8e855}.pedals{position:absolute;right:0;bottom:0;display:flex;align-items:flex-end;gap:10px}.pedal{width:72px;border-radius:18px 18px 12px 12px;background:linear-gradient(#263a4d,#111e2a);border:1px solid #435769;box-shadow:0 9px 20px #0009;display:flex;flex-direction:column;align-items:center;justify-content:center}.pedal span{font-size:13px;font-weight:800}.pedal small{font-size:8px;color:#8295a5;margin-top:3px}.pedal.brake{height:78px}.pedal.gas{height:102px;border-color:#2d8662}.pedal.active,.pedal:active{transform:translateY(5px);filter:brightness(1.35)}.pedal.gas.active{box-shadow:0 0 24px #42e69b66}
.drawer{position:absolute;z-index:15;top:0;right:0;width:min(345px,88vw);height:100%;padding:max(18px,env(safe-area-inset-top)) 18px max(16px,env(safe-area-inset-bottom));transform:translateX(105%);transition:.26s ease;border-radius:24px 0 0 24px}.drawer.open{transform:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.drawer-head b,.drawer-head small{display:block}.drawer-head small{font-size:10px;color:#89a0b4;margin-top:3px}.course-list{display:grid;gap:7px}.course-list button{display:flex;text-align:left;align-items:center;gap:12px;padding:9px 10px;border-radius:13px;background:#0a1825;border:1px solid transparent}.course-list button.active{border-color:#3fcce6;background:#102b3a}.course-list strong{color:var(--cyan);font-size:12px}.course-list span b,.course-list span small{display:block}.course-list span b{font-size:12px}.course-list span small{font-size:9px;color:#7f94a6;margin-top:2px}.settings{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.settings label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#b5c7d6;margin:8px 2px}.settings input[type=range]{width:115px;accent-color:#42ddeb}.settings input[type=checkbox]{accent-color:#42ddeb}.drawer-actions{display:flex;gap:8px;margin-top:12px}.drawer-actions button,.modal .primary{height:38px;flex:1;border-radius:11px;background:#16283a}.primary{background:linear-gradient(135deg,#22bad7,#246bd6)!important;font-weight:800}.drawer:before{content:"";position:fixed;inset:0 100% 0 -200vw;background:#0007;opacity:0;pointer-events:none;transition:.25s}.drawer.open:before{opacity:1}.overlay{position:fixed;z-index:30;inset:0;background:#02070dbb;display:grid;place-items:center}.overlay[hidden]{display:none}.modal{position:relative;width:min(360px,88vw);padding:26px;border-radius:22px;text-align:center}.modal-close{position:absolute;right:10px;top:10px}.modal-icon{font-size:35px;color:var(--green)}.modal h2{font-size:20px;margin:6px}.modal p{color:#9bb0c2;font-size:12px;line-height:1.6}.modal-stats{display:flex;justify-content:center;gap:20px;margin:12px}.modal-stats b{color:var(--cyan)}.modal .primary{width:100%;margin-top:8px}.rotate-tip{display:none;position:fixed;z-index:60;inset:0;background:#07111d;place-content:center;text-align:center}.rotate-tip span,.rotate-tip b,.rotate-tip small{display:block}.rotate-tip span{font-size:50px;color:var(--cyan)}.rotate-tip b{font-size:18px;margin-top:12px}.rotate-tip small{font-size:11px;color:#7890a4;margin-top:7px}
@media(max-width:700px){.hud{height:52px;top:7px}.brand{min-width:115px}.brand-mark{width:32px;height:32px}.brand b{font-size:12px}.brand small{display:none}.metrics{gap:10px}.metrics b{font-size:14px}.notice{top:65px}.mirror{top:65px;height:54px}.controls{height:100px}.wheel-zone{width:137px;height:100px}.wheel{width:82px;height:82px}.wheel i{left:32px;top:31px;height:34px}.wheel span{inset:21px}.pedal{width:65px}.pedal.brake{height:69px}.pedal.gas{height:90px}.gear-panel button{width:33px;height:34px}.icon-btn{width:34px;height:34px}.hud{gap:6px;padding:6px}.mirror{width:17vw}}
@media(orientation:portrait){#rotateTip{display:grid}}