:root{color-scheme:dark;--ink:#f4f0e7;--muted:#b4b7b2;--orange:#ff854a;--mint:#adedd9;--line:#ffffff24;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:#101719;color:var(--ink);overflow:hidden;overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:4px}button:disabled{cursor:default;opacity:.5}.hidden{display:none!important}#app{position:fixed;inset:0;touch-action:none}#app canvas{display:block;width:100%;height:100%}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#0c1519c9,transparent 65%),linear-gradient(0deg,#0a13188c,transparent 45%)}.masthead{position:fixed;z-index:3;top:max(24px,env(safe-area-inset-top));left:4%;right:4%;display:flex;justify-content:space-between;align-items:center}.brand{font-size:26px;font-weight:900;letter-spacing:-2px;text-decoration:none;color:var(--ink)}.brand span{color:var(--orange)}.brand small{font-size:10px;letter-spacing:2px;margin-left:16px;vertical-align:middle}.icon-button{border:1px solid var(--line);border-radius:24px;padding:9px 14px;background:#14202590;font-size:11px;backdrop-filter:blur(14px)}kbd{font-size:10px;font-family:inherit;border:1px solid #ffffff45;border-radius:4px;padding:3px 5px;color:#fff}.panel{position:fixed;z-index:4}.menu{left:6%;top:50%;transform:translateY(-46%);width:390px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--mint);font-weight:700}h1{font-size:66px;line-height:1.08;letter-spacing:-3px;margin:24px 0 20px;font-weight:900}h1 span{display:block;font-size:25px;letter-spacing:1px;margin-top:14px}p{line-height:1.8}.intro{color:#d1d3ca;font-size:13px;margin:0 0 25px}.route-info{display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}.route-info strong{display:block;font-size:24px;font-variant-numeric:tabular-nums}.route-info small{font-size:9px;color:#d6c9b6}.route-info span{font-size:10px;color:var(--muted);display:block;margin-top:5px}.instructions{font-size:11px;color:#d3d5ce;margin:22px 0}.instructions p{margin:7px 0}.instructions b{font-size:9px;margin-right:10px;color:var(--orange)}.primary{width:100%;border:0;border-radius:10px;background:var(--orange);color:#181c1b;min-height:52px;padding:14px 20px;font-size:15px;font-weight:800;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 30px #d45b251c}.primary:hover{background:#ffa06e}.primary:active{transform:translateY(1px)}.primary span{font-size:24px;line-height:1}.secondary{width:100%;background:#0b15194d;border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:12px;margin-top:10px}.secondary:hover{background:#ffffff15}.secondary small{font-size:10px;color:var(--muted);margin-left:10px}.key-help{font-size:10px;color:var(--muted);margin-top:18px}.touch-help{display:none}.route-hud{position:fixed;top:100px;left:50%;transform:translateX(-50%);width:min(380px,40vw)}.route-hud>div:first-child{display:flex;justify-content:space-between;align-items:baseline;font-size:11px}.route-hud strong{font-size:21px;letter-spacing:1px}.progress-track,.force-track{height:5px;background:#0c171bd9;border-radius:6px;overflow:hidden;margin-top:10px;border:1px solid #ffffff2b}.progress-track i{display:block;background:var(--mint);height:100%;width:0}.route-labels{display:flex;justify-content:space-between;color:#c2cac4;font-size:8px;letter-spacing:2px;margin-top:6px}.race-stats{position:fixed;top:98px;right:4%;display:grid;gap:10px;font-size:10px;color:#dae2df;text-align:right}.race-stats b{color:white;font-size:19px;font-variant-numeric:tabular-nums;margin:0 5px}.warning{position:fixed;top:190px;left:50%;transform:translateX(-50%);border:1px solid #ff9d5760;background:#2d1a17c9;color:#ffb28c;font-size:12px;letter-spacing:1px;padding:10px 20px;border-radius:6px;white-space:nowrap}.lane-radar{position:fixed;top:100px;left:4%;background:#101b22ad;border:1px solid var(--line);border-radius:10px;padding:10px 7px;text-align:center}.lane-radar>span{font-size:9px;letter-spacing:2px;color:var(--muted)}#radar{display:block;width:66px;height:105px;margin-top:8px}.steering{position:fixed;left:4%;bottom:max(32px,env(safe-area-inset-bottom));display:grid;grid-template-columns:70px 70px;gap:9px}.steering button{background:#101c24c4;border:1px solid #ffffff45;border-radius:14px;height:66px;font-size:30px;backdrop-filter:blur(10px);touch-action:none}.steering button:active{background:#adedd942;border-color:var(--mint)}.steering small{grid-column:span 2;text-align:center;font-size:9px;letter-spacing:2px;color:var(--muted)}.speedometer{position:fixed;bottom:29px;left:50%;transform:translateX(-50%);text-align:center}.speedometer strong{font-size:82px;line-height:1;font-weight:800;letter-spacing:-4px;font-variant-numeric:tabular-nums;text-shadow:0 3px 24px #0008}.speedometer>span{display:block;font-size:10px;letter-spacing:3px;color:#d2dad5}.speedometer p{font-size:10px;margin:10px 0 0;letter-spacing:2px;color:var(--mint)}.brake-control{position:fixed;right:4%;bottom:max(32px,env(safe-area-inset-bottom));width:168px}.force-caption{display:flex;justify-content:space-between;align-items:center;font-size:10px}.force-caption strong{font-size:15px;font-variant-numeric:tabular-nums}.force-caption small{font-size:9px;color:var(--muted)}.force-track{height:9px;margin:8px 0 14px}.force-track i{display:block;background:var(--mint);height:100%;width:0}#brake{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:112px;background:#172027e0;border:1px solid #ffba8966;border-radius:18px;touch-action:none;user-select:none;backdrop-filter:blur(10px)}#brake>span{color:var(--orange);font-size:20px;letter-spacing:6px}#brake b{font-size:14px}#brake small{font-size:9px;color:var(--muted)}#brake.pressed{background:#7f3f23dc;border-color:var(--orange);box-shadow:0 0 24px #ff854a30}.countdown{position:fixed;z-index:5;inset:0;display:grid;place-items:center;font-size:120px;font-weight:900;color:var(--mint);pointer-events:none;text-shadow:0 4px 35px #0007}.modal{top:50%;left:50%;transform:translate(-50%,-50%);width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:30px;background:#121d24ed;border:1px solid #ffffff29;box-shadow:0 24px 100px #0007;border-radius:18px;backdrop-filter:blur(22px)}h2{font-size:32px;letter-spacing:-1px;margin:15px 0 8px}.modal>p{font-size:12px;color:var(--muted);margin:6px 0 18px}.finish-speed{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:16px;margin-top:20px}.finish-speed strong{font-size:70px;line-height:1.2;letter-spacing:-3px;font-variant-numeric:tabular-nums;color:var(--mint)}.finish-speed>span{font-size:12px}.finish-speed small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.result-stats{display:flex;justify-content:space-between;margin:20px 0}.result-stats span{display:block;font-size:9px;color:var(--muted);margin-bottom:7px}.result-stats b{font-size:14px}#save-form label{display:block;font-size:10px;margin-bottom:8px;color:var(--muted)}#save-form>div{display:flex;gap:8px}#nickname{width:0;flex:1;min-height:41px;border:1px solid var(--line);border-radius:7px;background:#0002;color:var(--ink);padding:10px;font-size:12px}#save-form button{background:#adedd921;color:var(--mint);border:1px solid #adedd949;border-radius:7px;font-size:11px;padding:0 12px}#save-message{font-size:11px;color:var(--mint);margin:10px 0 16px;min-height:18px}.result-actions{display:flex;gap:10px}.local-tag{font-size:10px;color:var(--mint);background:#adedd910;border-radius:5px;padding:9px;margin:15px 0}.table-wrap{max-height:42vh;overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px;text-align:left;font-variant-numeric:tabular-nums}th{font-size:9px;color:var(--muted);font-weight:400;padding:12px 3px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#152027}td{padding:14px 3px;border-bottom:1px solid #ffffff0c}td:nth-child(3){color:var(--mint);font-weight:700}td:first-child{color:var(--orange)}th:nth-child(n+3),td:nth-child(n+3){text-align:right}#empty-board{text-align:center;padding:30px 0;color:var(--muted);font-size:12px}.loading{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:25px;background:#101719;font-size:12px;color:var(--muted)}.loading>div{font-size:50px;color:var(--orange);font-weight:900;letter-spacing:-5px}
@media(max-width:700px){.masthead{top:max(16px,env(safe-area-inset-top));left:20px;right:20px}.brand{font-size:22px}.brand small{display:none}.icon-button{font-size:10px;padding:8px 11px}.menu{left:22px;right:22px;top:auto;bottom:max(24px,env(safe-area-inset-bottom));transform:none;width:auto;background:linear-gradient(0deg,#101719eb,#10171980);padding:20px;border-radius:16px;border:1px solid #ffffff16;backdrop-filter:blur(8px)}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:44px;margin:16px 0 12px;letter-spacing:-2px}h1 span{font-size:18px;margin-top:9px}.intro{font-size:11px;margin-bottom:14px}.route-info{padding:12px 0}.route-info strong{font-size:21px}.route-info span{font-size:9px}.instructions{margin:14px 0;font-size:10px}.instructions p{margin:5px 0}.primary{min-height:47px;font-size:13px}.secondary{padding:11px}.key-help{display:none}.touch-help{display:block;text-align:center;color:var(--muted);font-size:9px;margin-top:13px}.route-hud{top:77px;width:calc(100% - 40px)}.route-hud strong{font-size:19px}.race-stats{top:143px;right:20px;display:flex;gap:12px}.race-stats b{font-size:15px;margin:0 3px}.lane-radar{top:145px;left:20px;padding:7px 4px}.lane-radar>span{font-size:8px}#radar{width:50px;height:80px}.warning{top:188px;left:auto;right:20px;transform:none;font-size:10px;padding:8px 10px}.steering{left:18px;bottom:max(24px,env(safe-area-inset-bottom));grid-template-columns:52px 52px;gap:6px}.steering button{height:56px;border-radius:12px;font-size:25px}.steering small{font-size:8px;letter-spacing:0}.brake-control{right:18px;bottom:max(24px,env(safe-area-inset-bottom));width:122px}#brake{height:82px;border-radius:13px;gap:4px}#brake>span{font-size:17px}#brake b{font-size:11px}.force-caption{font-size:8px}.force-caption strong{font-size:12px}.force-caption small{font-size:7px}.force-track{margin-bottom:9px;height:7px}.speedometer{bottom:145px}.speedometer strong{font-size:62px}.speedometer p{font-size:9px}.modal{padding:24px}.finish-speed strong{font-size:62px}}
@media(max-height:680px) and (max-width:700px){.menu{bottom:14px;padding:16px}.intro{display:none}h1{font-size:37px;margin:12px 0}.instructions{margin:10px 0}.route-info{padding:9px 0}.touch-help{margin-top:8px}}
@media(orientation:landscape) and (max-height:600px){.menu{top:80px;bottom:14px;left:5%;width:380px;transform:none;overflow:auto}.menu h1{font-size:38px;margin:12px 0}.menu h1 span{font-size:18px}.intro,.instructions,.route-info,.key-help,.touch-help{display:none}.menu .primary{margin-top:18px}.route-hud{top:65px;width:35vw}.race-stats{top:76px}.lane-radar{top:80px}.warning{top:130px}.speedometer strong{font-size:56px}.steering{bottom:18px}.brake-control{bottom:18px;width:145px}#brake{height:80px}.speedometer{bottom:18px}.modal{padding:20px}.finish-speed strong{font-size:45px}.result-stats{margin:12px 0}}

#brake.locked{border-color:#ffffff30;background:#142028bb}#brake.locked>span{color:#899a9e}#brake.locked b{font-size:11px;color:#b0bdc0}#brake.locked small{font-size:8px}#chassis-state{display:block;font-size:9px;margin-top:6px;color:#b8c6c6;letter-spacing:1px}.force-track{background:linear-gradient(90deg,#adedd918 0 46%,#ffb66230 46% 68%,#ff624f45 68% 100%)}
.steering button.pressed{background:#adedd942;border-color:var(--mint);box-shadow:0 0 18px #adedd922}.steering button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.pursuit{position:fixed;left:4%;top:275px;width:226px;padding:12px 14px;border:1px solid #ff596b88;border-left:3px solid #ff596b;border-radius:8px;background:#141c30e6;pointer-events:none}.pursuit.blue{border-left-color:#57a7ff}.pursuit strong{font-size:12px;letter-spacing:1px;color:#eaf0ff}.pursuit>span{display:block;font-size:9px;line-height:1.7;margin-top:7px;color:#c7d6eb}.pursuit-track{height:3px;background:#ffffff20;margin-top:9px}.pursuit-track i{display:block;height:100%;background:#95caff;width:0}.event-notice{position:fixed;left:50%;transform:translateX(-50%);top:244px;padding:8px 15px;border:1px solid #ffe09c55;border-radius:6px;background:#1a242ed9;color:#ffe2a3;font-size:12px;pointer-events:none;white-space:nowrap}.event-summary{color:var(--mint)!important;font-size:11px!important}.route-hud>div:first-child>span{max-width:75%;font-size:10px}.route-hud{width:min(420px,46vw)}
@media(max-width:700px){.route-hud{width:calc(100% - 40px)}.route-hud>div:first-child>span{font-size:9px}.race-stats{gap:6px}.race-stats b{font-size:13px}.pursuit{left:auto;right:20px;top:233px;width:216px;padding:9px 11px}.pursuit strong{font-size:10px}.pursuit>span{font-size:8px}.event-notice{top:325px;font-size:10px;max-width:calc(100vw - 32px);text-align:center;white-space:normal}}
@media(orientation:landscape) and (max-height:600px){.pursuit{left:4%;top:245px;width:210px}.event-notice{top:176px;font-size:10px}.race-stats{display:flex;gap:8px}.race-stats b{font-size:14px}}

.pursuit{background:linear-gradient(#141c30ed 0 31px,transparent 31px 95px,#141c30ed 95px)}#rear-mirror{height:64px;margin:8px 0 0;outline:1px solid #b4c7e333}.pursuit>span{text-shadow:0 1px 3px #000}.pursuit strong{text-shadow:0 1px 3px #000}
@media(max-width:700px){.event-notice{top:382px}.pursuit{background:linear-gradient(#141c30ed 0 27px,transparent 27px 91px,#141c30ed 91px)}}
@media(orientation:landscape) and (max-height:600px){.pursuit{top:210px;left:4%;width:170px}.event-notice{top:176px}.pursuit>span{font-size:8px}}

.menu-contact{display:block;margin-top:14px;text-align:right;font-size:10px;line-height:1.5;letter-spacing:.2px;color:#a5b3b099;text-decoration:none}.menu-contact:hover{color:#b8c6c3}.menu-contact:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* Keep the mobile mirror in the upper HUD, clear of the road's vanishing point. */
@media(max-width:700px),(orientation:landscape) and (max-height:600px){
  .pursuit{top:166px;left:auto;right:20px;width:200px;padding:8px 10px;background:linear-gradient(#141c30ed 0 28px,transparent 28px 76px,#141c30ed 76px)}
  .pursuit strong{display:block;font-size:10px;line-height:14px}
  #rear-mirror{height:48px;margin-top:6px}
  .pursuit>span{margin-top:6px;font-size:8px;line-height:12px}
  .pursuit-track{margin-top:6px}
}
@media(max-width:700px) and (orientation:portrait){
  .event-notice{top:282px}
  #hud:has(#pursuit:not(.hidden)) .warning{top:300px}
  #hud:has(#warning:not(.hidden)) .event-notice{display:none}
}
@media(orientation:landscape) and (max-height:600px){.pursuit{top:112px;width:180px}}

/* Event rewards belong in the top HUD rather than over approaching traffic. */
#event-notice{top:64px;max-width:calc(100vw - 40px);padding:4px 12px;font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){#event-notice{top:52px;padding:2px 10px;font-size:10px}}
@media(orientation:landscape) and (max-height:600px){#event-notice{top:24px;max-width:36vw}}