:root{color:#f4efe3;font-synthesis:none;text-rendering:optimizelegibility;--ink:#10231c;--paper:#f3ecda;--moss:#7fa25b;--leaf:#b6c982;--sun:#efb56f;--signal:#ff7157;--muted:#f4efe3ad;background:#10231c;font-family:PingFang SC,Noto Sans CJK SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none;background:#10231c}button{color:inherit;font:inherit}button:focus-visible{outline-offset:4px;outline:3px solid #fff4d6}::selection{color:var(--ink);background:#ffd39b}.game-shell{isolation:isolate;background:linear-gradient(#7ba9b9 0%,#d9c99d 44%,#44663c 45%,#203327 100%);width:100%;height:100%;position:relative;overflow:hidden}.game-shell>canvas{z-index:0;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.game-shell:after{z-index:2;pointer-events:none;content:"";position:absolute;inset:0;box-shadow:inset 0 0 18vmin #030a0747}.road-vignette{z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 78%,#0000 25%,#ff71572e 80%),linear-gradient(#ff715714,#0000 35%);transition:opacity .3s ease-out;position:absolute;inset:0}.game-shell.is-bumping .road-vignette{opacity:1;animation:.18s steps(2,end) 4 bump-vignette}@keyframes bump-vignette{0%,to{transform:translate(0)}35%{transform:translate(-4px,2px)}70%{transform:translate(3px,-2px)}}.intro{z-index:20;pointer-events:none;background:linear-gradient(90deg,#091913f5 0%,#091913d9 38%,#0919130d 72%),linear-gradient(#0000 60%,#040e0a52);grid-template-columns:minmax(390px,48vw) 1fr;transition:opacity .48s,visibility .48s;display:grid;position:absolute;inset:0}.intro.is-hidden{visibility:hidden;opacity:0}.intro-copy{pointer-events:auto;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:100%;padding:clamp(30px,5.5vw,88px);display:flex}.eyebrow,.route-phase,.hazard-alert span,.pause-card span,.viewfinder-readout{letter-spacing:.16em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;font-weight:800}.eyebrow{color:var(--sun);margin-bottom:18px}.intro h1{letter-spacing:-.065em;margin:0;font-family:Songti SC,STSong,Georgia,serif;font-size:clamp(68px,9vw,120px);font-weight:700;line-height:.76}.intro-lead{color:#ffffffc7;max-width:35em;margin:32px 0 0;font-size:clamp(15px,1.3vw,19px);line-height:1.75}.brief-line{color:#ffffffb3;border-top:1px solid #ffffff38;grid-template-columns:1fr;gap:7px;width:min(100%,500px);margin:24px 0 30px;padding-top:15px;font-size:13px;line-height:1.55;display:grid}.brief-line span:first-child{color:var(--paper);font-weight:800}.start-button{color:var(--ink);cursor:pointer;background:var(--paper);border:0;justify-content:space-between;align-items:center;gap:46px;min-width:240px;min-height:56px;padding:0 20px 0 24px;font-size:15px;font-weight:900;transition:background-color .18s,transform .18s;display:inline-flex}.start-button svg{fill:none;stroke:currentColor;stroke-width:1.7px;width:30px}.start-button:hover{background:#ffd097;transform:translate(5px)}.start-note{color:#ffffff6b;margin:13px 0 0;font-size:11px}.intro-rule{background:#ffffff2e;width:1px;position:absolute;top:0;bottom:0;right:clamp(28px,4vw,64px)}.intro-rule span{color:#ffffff7a;writing-mode:vertical-rl;background:#0919138a;padding:10px 0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:9px;position:absolute;top:50%;left:-9px}.hud{z-index:5;visibility:hidden;pointer-events:none;opacity:0;transition:opacity .32s,visibility .32s;position:absolute;inset:0}.hud.is-visible{visibility:visible;opacity:1}.route-status{top:max(24px, env(safe-area-inset-top));left:max(24px, env(safe-area-inset-left));color:var(--paper);text-shadow:0 2px 14px #0000009e;flex-direction:column;gap:5px;padding-left:15px;display:flex;position:absolute}.route-status:before{content:"";background:var(--sun);width:2px;position:absolute;top:0;bottom:0;left:0}.route-phase{color:var(--sun)}.distance-value{letter-spacing:-.03em;font-family:Songti SC,STSong,Georgia,serif;font-size:clamp(25px,3vw,42px);line-height:1}.route-note{color:var(--muted);font-size:11px}.smoothness{top:max(28px, env(safe-area-inset-top));width:min(26vw,280px);color:var(--paper);text-shadow:0 2px 10px #0000009e;position:absolute;left:50%;transform:translate(-50%)}.smoothness-copy{letter-spacing:.1em;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-size:10px;font-weight:800;display:flex}.smoothness-copy strong{color:#f8df9f;font:700 17px ui-monospace,SFMono-Regular,Menlo,monospace}.smoothness-track{background:#ffffff47;height:3px;box-shadow:0 3px 14px #0006}.smoothness-track span{transform-origin:0;background:#dce3aa;width:100%;height:100%;transition:transform .18s,background-color .18s;display:block}.smoothness.is-rough .smoothness-track span{background:var(--signal)}.hazard-alert{top:max(92px, calc(env(safe-area-inset-top) + 76px));color:var(--paper);opacity:0;visibility:hidden;background:#59170dd1;border:1px solid #ffab8fa3;align-items:center;gap:14px;min-height:40px;padding:0 16px;transition:opacity .18s,transform .18s,visibility .18s;display:flex;position:absolute;left:50%;transform:translate(-50%,-8px)}.hazard-alert.is-visible{opacity:1;visibility:visible;transform:translate(-50%)}.hazard-alert span{color:#ffb18f}.hazard-alert strong{font-size:12px}.hud-actions{top:max(24px, env(safe-area-inset-top));right:max(24px, env(safe-area-inset-right));pointer-events:auto;gap:8px;display:flex;position:absolute}.hud-action{color:#ffffffd1;cursor:pointer;background:#07181199;border:1px solid #ffffff52;align-items:center;gap:8px;min-height:40px;padding:0 12px;font-size:11px;font-weight:800;transition:color .16s,background-color .16s,border-color .16s;display:inline-flex}.hud-action:hover{color:var(--ink);background:var(--sun);border-color:var(--sun)}.hud-action svg{flex:none;width:21px;height:21px}.view-toggle svg{fill:none;stroke:currentColor;stroke-linecap:square;stroke-linejoin:miter;stroke-width:1.6px}.view-toggle .chase-icon,.view-toggle.is-chase .cockpit-icon{display:none}.view-toggle.is-chase .chase-icon{display:block}.audio-toggle svg{fill:currentColor}.waves,.muted-mark{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.7px}.muted-mark,.audio-toggle.is-muted .waves{display:none}.audio-toggle.is-muted .muted-mark{display:block}.viewfinder{aspect-ratio:16/9;filter:drop-shadow(0 1px 4px #00000057);border:1px solid #ffffff17;width:min(72vw,1080px);position:absolute;top:49%;left:50%;transform:translate(-50%,-50%)}.viewfinder-corner{border-style:solid;border-color:#fffc;width:clamp(24px,2.2vw,38px);height:clamp(24px,2.2vw,38px);position:absolute}.viewfinder-corner--tl{border-width:2px 0 0 2px;top:-2px;left:-2px}.viewfinder-corner--tr{border-width:2px 2px 0 0;top:-2px;right:-2px}.viewfinder-corner--bl{border-width:0 0 2px 2px;bottom:-2px;left:-2px}.viewfinder-corner--br{border-width:0 2px 2px 0;bottom:-2px;right:-2px}.viewfinder-readout{color:#ffffff8a;position:absolute;bottom:-24px;right:0}.drive-stats{right:max(24px, env(safe-area-inset-right));bottom:max(28px, env(safe-area-inset-bottom));color:#ffffffc2;text-shadow:0 2px 10px #000;flex-direction:column;align-items:flex-end;gap:5px;font-size:11px;display:flex;position:absolute}.drive-stats strong{color:var(--paper);margin-right:3px;font:700 18px ui-monospace,SFMono-Regular,Menlo,monospace}.desktop-controls{left:max(24px, env(safe-area-inset-left));bottom:max(28px, env(safe-area-inset-bottom));color:#ffffffad;text-shadow:0 2px 8px #000;align-items:center;gap:18px;font-size:11px;display:flex;position:absolute}kbd{color:#fff;background:#05140e94;border:1px solid #ffffff5c;align-items:center;min-width:26px;min-height:25px;margin-right:4px;padding:0 7px;font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-flex}.touch-controls{display:none}.pause-card{z-index:9;color:var(--ink);background:var(--paper);border-top:4px solid var(--sun);opacity:0;visibility:hidden;flex-direction:column;align-items:center;gap:8px;min-width:240px;padding:24px 30px;transition:opacity .18s,visibility .18s,transform .18s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-44%);box-shadow:0 24px 80px #00000061}.pause-card.is-visible{opacity:1;visibility:visible;transform:translate(-50%,-50%)}.pause-card span{color:#80622d}.pause-card strong{font:700 28px Songti SC,STSong,Georgia,serif}.pause-card small{color:#10231c99}noscript{z-index:50;color:#fff;background:#10231c;place-items:center;display:grid;position:fixed;inset:0}@media (width<=760px),(pointer:coarse){.intro{background:linear-gradient(#06150f0d 0%,#06150fb8 45%,#06150ffa 100%);grid-template-columns:1fr}.intro-copy{padding:32px max(22px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));justify-content:flex-end}.intro h1{font-size:clamp(64px,19vw,92px)}.intro-lead{max-width:26em;margin-top:22px}.brief-line{gap:5px;margin:17px 0 20px}.brief-line span:last-child,.start-note,.intro-rule,.desktop-controls,.viewfinder-readout{display:none}.start-button{width:min(100%,340px)}.route-status{top:max(16px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left))}.route-note{display:none}.smoothness{top:max(78px, calc(env(safe-area-inset-top) + 62px));left:max(16px, env(safe-area-inset-left));width:min(46vw,210px);transform:none}.hud-actions{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right))}.hud-action{justify-content:center;width:44px;height:44px;padding:0}.hud-action span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.viewfinder{aspect-ratio:4/5;width:calc(100% - 34px);max-height:calc(100dvh - 190px);top:48%}.hazard-alert{top:max(128px, calc(env(safe-area-inset-top) + 112px));justify-content:center;width:calc(100vw - 32px)}.hazard-alert strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.drive-stats{top:max(78px, calc(env(safe-area-inset-top) + 62px));right:max(16px, env(safe-area-inset-right));bottom:auto}.touch-controls{left:50%;bottom:max(20px, env(safe-area-inset-bottom));pointer-events:auto;gap:18px;display:flex;position:absolute;transform:translate(-50%)}.touch-controls button{color:#fff;touch-action:none;background:#05140ea3;border:1px solid #ffffff7a;place-items:center;width:68px;height:56px;display:grid}.touch-controls button.is-active{color:var(--ink);background:var(--sun);border-color:var(--sun)}.touch-controls svg{fill:none;stroke:currentColor;stroke-linecap:square;stroke-linejoin:miter;stroke-width:2px;width:26px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}