:root{color-scheme:dark;--bg: #08111f;--panel: rgba(9, 18, 32, .78);--panel-border: rgba(145, 185, 255, .24);--text: #eff5ff;--muted: #8ba2c7;--accent: #53f1bd;--accent-2: #56a8ff;--warning: #ffcf5c;--danger: #ff7c72;--shadow: 0 18px 50px rgba(0, 0, 0, .34)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,rgba(86,168,255,.16),transparent 34%),radial-gradient(circle at bottom,rgba(83,241,189,.1),transparent 28%),linear-gradient(180deg,#09111e,#04080f);color:var(--text);font-family:Trebuchet MS,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:28px 28px;opacity:.5}#app-shell,#game-container,canvas{width:100%;height:100%}#app-shell{position:relative}#game-container canvas{display:block}#hud-root{position:fixed;inset:0;pointer-events:none}#top-bar{position:absolute;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(110px,.8fr));gap:12px}.hud-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;box-shadow:var(--shadow)}.title-card,.gauge-card,.objective-card,.status-card{padding:14px 18px}.eyebrow,.label{display:block;color:var(--muted);font-size:11px;letter-spacing:.2em;text-transform:uppercase}.title{margin-top:4px;font-size:24px;font-weight:700}.value{display:block;margin-top:6px;font-size:22px;font-weight:700}#status-wrap{position:absolute;left:50%;top:108px;transform:translate(-50%);width:min(520px,calc(100vw - 32px))}.status-card{text-align:center;font-size:16px;font-weight:600}#mobile-controls{position:absolute;inset:0}.mobile-ui{pointer-events:auto;position:absolute;bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));display:flex;align-items:flex-end}.mobile-ui.left{left:max(18px,env(safe-area-inset-left))}.mobile-ui.right{right:max(18px,env(safe-area-inset-right));gap:12px}.steer-pad{width:154px;height:154px;border-radius:50%;border:1px solid rgba(145,185,255,.26);background:#050a1259;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px #ffffff05;position:relative}.steer-pad:before,.steer-pad:after{content:"";position:absolute;background:#ffffff0f;left:50%;top:50%;transform:translate(-50%,-50%)}.steer-pad:before{width:104px;height:2px}.steer-pad:after{width:2px;height:104px}.steer-thumb{position:absolute;left:50%;top:50%;width:62px;height:62px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.9),transparent 26%),radial-gradient(circle at 30% 30%,#56a8ffcc,#0f3760f5 62%);box-shadow:inset 0 0 18px #ffffff14,0 8px 20px #00000059}.pedal-stack{display:flex;gap:12px;align-items:flex-end}.control-btn{pointer-events:auto;min-width:82px;min-height:82px;border:1px solid rgba(145,185,255,.24);border-radius:24px;background:#050b148a;color:var(--text);font:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;box-shadow:var(--shadow)}.control-btn[data-role=gas]{border-color:#53f1bd57}.control-btn[data-role=brake]{border-color:#ff7c7257}.control-btn[data-role=handbrake]{min-width:94px;min-height:94px;border-radius:50%;margin-left:4px}.control-btn.active{background:#56a8ff47;transform:translateY(2px) scale(.98)}.control-btn[data-role=gas].active{background:#53f1bd2e}.control-btn[data-role=brake].active,.control-btn[data-role=handbrake].active{background:#ff7c7229}@media(max-width:960px){#top-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.title{font-size:20px}.value{font-size:18px}#status-wrap{top:158px}}@media(max-width:720px){#top-bar{gap:8px;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right))}.title-card,.gauge-card,.objective-card,.status-card{padding:10px 12px;border-radius:14px}.steer-pad{width:132px;height:132px}.steer-thumb{width:56px;height:56px}.control-btn{min-width:74px;min-height:74px;font-size:14px}.control-btn[data-role=handbrake]{min-width:86px;min-height:86px}}