/* Keep panel scrolling; browser pinch/double-tap zoom is handled by the game. */
:where(html,body,body *){touch-action:pan-x pan-y}
:root{color-scheme:light;--map-backdrop:#6a92a3;--ink:#263e45;--muted:#6f7e7e;--paper:#f3f1ea;--line:#224f3b22;--accent:#d8c598}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--map-backdrop);color:var(--ink);font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid #9b8966;outline-offset:4px}button:hover{filter:brightness(.94)}#scene,#labels{position:absolute;inset:0}#scene canvas{display:block;touch-action:none}#labels{pointer-events:none;overflow:hidden}.label{position:absolute;white-space:nowrap;padding:7px 11px;border-radius:4px;background:#f5f3ece8;box-shadow:0 3px 12px #183e3c12;font-size:11px;letter-spacing:1px;transform:translate(-50%,-100%);border:1px solid #fff8}.label:after{content:"";position:absolute;top:100%;left:50%;height:14px;width:1px;background:#234f4477}.label.lake{font-size:22px;letter-spacing:12px;background:none;box-shadow:none;border:0;color:#e9f7ee}.label.lake:after{display:none}header{position:absolute;top:30px;left:38px;right:35px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.identity{display:flex;gap:14px;align-items:center}.mark{border:1px solid #244e4555;width:45px;height:48px;display:grid;place-items:center;font-family:serif;font-size:28px;border-radius:13px 2px 13px 2px}.eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:600}h1{font-size:21px;letter-spacing:4px;margin:5px 0 0;font-weight:600}h1 span{font-size:10px;letter-spacing:1px;font-weight:400;display:inline-block;margin-left:18px;color:var(--muted)}.header-right{display:flex;align-items:center;gap:12px;pointer-events:auto}.live{font-size:11px;margin-right:8px}.live i{display:inline-block;background:#568d54;width:6px;height:6px;border-radius:50%;margin-right:8px}.circle{border:1px solid var(--line);background:#f8faf0c9;border-radius:50%;width:34px;height:34px;display:grid;place-items:center}.intro{position:absolute;left:40px;top:155px;pointer-events:none}.intro h2{font-family:"Songti SC","STSong",serif;font-weight:400;font-size:43px;line-height:1.4;letter-spacing:4px;margin:20px 0 17px}.intro p{font-size:12px;line-height:2;color:var(--muted)}.divider{height:1px;width:34px;background:#37625355;margin:24px 0 16px}.small{font-size:10px;color:var(--muted)}.places{position:absolute;left:40px;bottom:136px;width:198px;display:grid;gap:3px}.places>.eyebrow{margin-bottom:14px}.places button{display:flex;align-items:center;gap:13px;text-align:left;font-size:12px;padding:12px 8px;border-bottom:1px solid var(--line);background:#f0f1eb9c;backdrop-filter:blur(12px);border-radius:3px}.places button b{font-size:9px;font-weight:400;color:var(--muted)}.places button span{margin-left:auto}.tools{position:absolute;right:34px;top:150px;display:grid;gap:4px;background:#f5f3ecdd;padding:6px;border:1px solid #fff9;border-radius:25px;box-shadow:0 10px 35px #2c51420a;backdrop-filter:blur(12px)}.tools button{width:32px;height:34px;font-size:20px;border-radius:50%}.tools button:last-child{font-size:10px;font-weight:700}.tools button:nth-last-child(2){font-size:13px}.tools>span{height:1px;background:var(--line);margin:3px}.map-card{position:absolute;bottom:119px;right:33px;width:208px;background:#f1f1ebf2;border:1px solid #fff;padding:13px;border-radius:10px}.map-card>div{display:flex;justify-content:space-between;font-size:10px}.north{font-size:9px}#minimap{width:100%;height:119px;margin:8px 0}.map-caption{color:var(--muted);font-size:8px!important}.bottom{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;width:530px}.mode-switch{display:flex;padding:5px;background:#f5f3eced;border:1px solid #fff;border-radius:40px;box-shadow:0 8px 30px #1d544014}.mode-switch button{padding:12px 22px;border-radius:30px;font-size:13px;display:flex;align-items:center;gap:8px}.mode-switch .active{background:var(--ink);color:#f1f5e8}.tour{border-radius:30px;background:var(--accent);font-size:12px;padding:18px 24px;box-shadow:0 8px 30px #1d544014}.tour span{font-size:9px;margin-right:6px}.hint{width:100%;text-align:center;font-size:10px;letter-spacing:1px;margin-top:3px;color:#315649}.speed{position:absolute;bottom:130px;left:42px;display:flex;align-items:baseline;gap:10px;color:#f7f9ee;text-shadow:0 2px 20px #142f2c}.speed strong{font-size:58px;font-weight:400;letter-spacing:-3px}.speed span{font-size:11px}.drive-note{position:absolute;bottom:100px;left:44px;font-size:10px;line-height:1.8;color:#fff}.hood{position:absolute;bottom:-60px;left:23%;width:54%;height:100px;background:linear-gradient(#264744,#162f2c);border-radius:50% 50% 0 0;box-shadow:0 -1px 0 #b8d4bc80;pointer-events:none;z-index:-1}#drive-hud{position:absolute;inset:0;pointer-events:none}#drive-hud[hidden]{display:none}.touch-controls{display:none;pointer-events:auto}.driving .intro,.driving .places{display:none}.driving header{color:#153e37}.driving .identity{background:#f5f3ecdf;padding:10px 16px;border-radius:8px}.driving .live{display:none}#toast{position:absolute;top:100px;left:50%;transform:translateX(-50%);background:#173f3cea;color:#fff;padding:11px 20px;font-size:12px;border-radius:30px;opacity:0;transition:opacity .3s;pointer-events:none}#toast.show{opacity:1}#loading{position:absolute;inset:0;background:#e7eee4;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10}#loading[hidden]{display:none}.loader-mark{font-family:serif;font-size:60px;border:1px solid #46766555;border-radius:32px 0 32px 0;padding:10px 30px}#loading h2{font-weight:400;font-size:21px;margin-top:30px;letter-spacing:5px}#loading p{font-size:12px;color:var(--muted)}.loading-line{width:140px;height:2px;background:#b7cbb5;margin-top:20px;overflow:hidden}.loading-line:after{content:"";display:block;width:50%;height:100%;background:#284e3e;animation:load 1s infinite alternate}@keyframes load{to{transform:translateX(100%)}}dialog{border:1px solid #fff;border-radius:16px;padding:38px;background:#f7f8f0;color:var(--ink);width:min(560px,90vw);max-height:85vh;box-shadow:0 25px 100px #173d3944}dialog::backdrop{background:#24453f66;backdrop-filter:blur(5px)}dialog h2{font-family:serif;font-weight:400;font-size:26px}dialog p{font-size:12px;line-height:1.9;color:#58706a}#close-info{float:right}.sources{display:flex;gap:15px;flex-wrap:wrap}.sources a{font-size:11px;color:var(--ink)}
@media(max-height:750px){.intro{top:120px}.intro h2{font-size:32px;margin:15px 0}.intro p{margin:0}.intro .divider,.intro .small{display:none}.places{bottom:130px}.places button{padding:9px}.places>.eyebrow{margin-bottom:5px}}@media(max-width:750px),(pointer:coarse){header{left:19px;right:18px;top:20px}h1{font-size:18px}h1 span,.live{display:none}.mark{width:36px;height:41px;font-size:23px}.eyebrow{font-size:8px}.header-right{gap:6px}.intro{left:23px;top:115px}.intro h2{font-size:30px}.intro p,.intro .divider,.intro .small{display:none}.places{left:20px;bottom:142px;width:150px}.places button{font-size:10px;padding:10px 6px}.tools{right:17px;top:110px}.map-card{right:17px;bottom:145px;width:135px;padding:9px}#minimap{height:80px}.map-caption{font-size:7px!important}.bottom{width:100%;bottom:24px;gap:8px;padding:0 12px}.mode-switch button{padding:11px 14px;font-size:12px}.tour{padding:16px;font-size:11px}.hint{font-size:9px;letter-spacing:0}.speed{left:24px;bottom:205px}.drive-note{display:none}.touch-controls{position:absolute;display:flex;bottom:133px;left:20px;gap:6px}.touch-controls button{width:42px;height:44px;border-radius:12px;background:#f5f8edd9;font-size:21px;touch-action:none}.driving .map-card{bottom:200px}.driving .identity{padding:6px 9px}.driving .mark{display:none}#toast{width:max-content;max-width:90%;text-align:center;font-size:11px}}
#drive-hud{z-index:1}.hood{z-index:0}.speed,.drive-note,.touch-controls{z-index:1}.bottom,.map-card,.tools,header{z-index:2}#toast{z-index:3}.hood{height:85px;bottom:-55px;border-top:2px solid #799087}

.sun-control{position:absolute;right:100px;top:115px;width:220px;padding:16px 18px;background:#f5f7eede;border:1px solid #ffffffa0;border-radius:14px;backdrop-filter:blur(10px);z-index:2;color:var(--ink)}.sun-control>div{display:flex;justify-content:space-between;font-size:12px}.sun-control output{font-variant-numeric:tabular-nums}.sun-control input{width:100%;margin:16px 0 10px;accent-color:#577c60;cursor:ew-resize}.sun-control .sun-caption{font-size:9px;color:#6d8071}.sun-control input:focus-visible{outline:2px solid #567b61;outline-offset:4px}@media(max-width:750px),(pointer:coarse){.sun-control{top:85px;right:70px;width:180px;padding:12px}.intro{top:182px}.places button{padding:7px 6px}}

.night .identity,.night .intro,.night .places>.eyebrow,.night .live,.night .hint{color:#e3ebe4}.night .intro p,.night .intro .small{color:#becdc8}.night .driving .identity,.night.driving .identity{color:var(--ink)}

/* One shared grid aligns the time panel exactly with both action blocks. */
.bottom{display:grid;grid-template-columns:minmax(0,1fr) max-content;width:max-content;max-width:calc(100% - 24px);gap:12px;padding:0;align-items:center}
.bottom .sun-control{position:static;grid-column:1 / -1;width:100%;min-width:0;padding:12px 18px}
.bottom .sun-control input{margin:10px 0 7px}
.bottom .hint{grid-column:1 / -1;width:0;min-width:100%;margin-top:0}
.mode-switch,.tour{white-space:nowrap}.mode-switch{min-width:0}
@media(max-width:750px),(pointer:coarse){.bottom{gap:8px}.bottom .sun-control{padding:10px 14px}.mode-switch button{padding:11px 10px;gap:5px}.tour{padding:16px 12px}.places{bottom:245px}.map-card{bottom:245px}.driving .map-card{bottom:280px}.touch-controls{bottom:225px}.speed{bottom:300px}.intro{top:115px}}

#cabin-hud,

#tower-hud{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:min(560px,calc(100% - 32px));padding:20px 24px;background:#17383deb;color:#e4ece4;border:1px solid #bfd5ca44;border-radius:16px;display:grid;grid-template-columns:1fr auto;gap:12px;backdrop-filter:blur(12px)}#cabin-hud[hidden],#cabin-tip[hidden],#tower-hud[hidden],#tower-tip[hidden]{display:none}#cabin-hud span,#tower-hud span{display:block;font-size:9px;letter-spacing:2px;color:#a9c7c0}#cabin-status,#tower-status{display:block;font-size:15px;font-weight:400;margin-top:7px}#exit-cabin,#exit-tower{background:#d8c598;color:#263e45;border-radius:24px;padding:10px 18px;font-size:12px}#cabin-hud p,#tower-hud p{grid-column:1/-1;font-size:11px;color:#b4c8c1;margin:0}.cabin-walk,.tower-walk{display:none;grid-column:1/-1;gap:8px}.cabin-walk button,.tower-walk button{background:#45635e;padding:12px;border-radius:6px;color:#fff}#cabin-tip,#tower-tip{position:absolute;pointer-events:none;background:#17383deb;color:#edf4e8;padding:10px 14px;border-radius:8px;font-size:12px}.in-cabin .intro,.in-cabin .places,.in-cabin .tools,.in-cabin .map-card,.in-cabin .bottom,.in-cabin #drive-hud{display:none}.in-cabin #scene canvas{cursor:grab}.in-cabin header{color:#e7f0e7}.in-cabin .identity{background:#17383dcc;padding:10px;border-radius:8px}@media(pointer:coarse){.cabin-walk,.tower-walk{display:flex}}

.in-cabin .circle{color:var(--ink)}

#cabin-hud .sun-control,

#tower-hud .sun-control{position:static;grid-column:1/-1;width:100%;margin:0;transform:none;color:var(--ink)}#cabin-hud .sun-control span,#tower-hud .sun-control span{color:var(--muted);font-size:9px;letter-spacing:0}

/* Keep the compact adjustment card behind the cabin controls without moving
   the native slider. Release/cancel restores the HUD via the existing class. */
@media(max-width:750px),(pointer:coarse){
 #cabin-hud,
 #tower-hud{z-index:7}
 #cabin-hud:has(.mobile-adjusting),
 #tower-hud:has(.mobile-adjusting){background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
 #cabin-hud:not(.lake-hud-compact):has(.mobile-adjusting)>:not(.sun-control),
 #tower-hud:not(.lake-hud-compact):has(.mobile-adjusting)>:not(.sun-control){visibility:hidden;pointer-events:none}
 #cabin-hud .sun-control.mobile-adjusting .mobile-adjustment-focus,
 #tower-hud .sun-control.mobile-adjusting .mobile-adjustment-focus{color:#263e45}
 #cabin-hud .sun-control.mobile-adjusting input,
 #tower-hud .sun-control.mobile-adjusting input{accent-color:#577c60}
}

.cross-link{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:1px solid var(--line);background:#f8faf0c9;border-radius:22px;color:var(--ink);text-decoration:none;font-size:11px;white-space:nowrap}.cross-link:hover{background:#fff}.cross-link:focus-visible{outline:3px solid #9b8966;outline-offset:4px}#residential-tip{position:absolute;pointer-events:none;background:#17383deb;color:#edf4e8;padding:10px 14px;border-radius:8px;font-size:12px;z-index:4;white-space:nowrap}#residential-tip[hidden]{display:none}@media(max-width:750px),(pointer:coarse){.cross-link{padding:8px 10px;font-size:10px}.header-right{gap:6px}}

/* The base map remains visible while detail batches and indoor assets arrive. */
#load-status,#home-pending{position:fixed;top:95px;left:50%;transform:translateX(-50%);z-index:9;padding:10px 18px;border-radius:22px;background:#f5f8eeee;color:#315649;font-size:11px;box-shadow:0 4px 20px #173f3c15}
#load-status[hidden],#home-pending[hidden],#home-interior[hidden]{display:none!important}
#home-interior{position:fixed;inset:0;width:var(--scene-width,100vw);height:var(--scene-height,100dvh);z-index:8;isolation:isolate}
@keyframes enter-home{from{opacity:0}to{opacity:1}}
.inside-home>header,.inside-home>.bottom,.inside-home>.tools,.inside-home>.places,.inside-home>.map-card{visibility:hidden}
@media(prefers-reduced-motion:reduce){#home-interior{animation:none}}
.map-card{opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);pointer-events:none;transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s}
body[data-ready=true] .map-card{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),visibility 0s}
.inside-home>.map-card{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.99)}
@media(prefers-reduced-motion:reduce){.map-card{transition:none;transform:none}}
@media(max-width:750px),(pointer:coarse){.map-card.mobile-open #minimap{display:block;width:100%;height:auto;aspect-ratio:380 / 250;object-fit:contain}}
/* No static preview: the canvas stays hidden until its first real frame (the
   plinth, lake and land) is drawn, then shows at once. There is nothing to
   cross-fade from, so no blank gap; the rest of the city grows on top of it. */
body>#scene{opacity:0}
body[data-map-ready=true]>#scene{opacity:1}

#loading{inset:auto;bottom:24px;right:24px;padding:12px 18px;border-radius:12px;background:#f5f8eeee;pointer-events:none;max-width:230px}#loading .loader-mark,#loading h2,#loading .loading-line{display:none}#loading p{margin:0;font-size:11px}
.in-cabin .cross-link{display:none}
.mobile-dock{display:none}
/* Critical mobile layout: present before the 3D module graph downloads. */
@media(max-width:750px),(pointer:coarse){
 body .mobile-panel:not(.mobile-open){display:none!important}
 body>.intro,body>.bottom .hint{display:none}
 body>.bottom{bottom:calc(20px + env(safe-area-inset-bottom))}
 .mobile-dock{position:absolute;display:flex;justify-content:center;gap:7px;left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom));z-index:5;pointer-events:none}
 .mobile-dock button{pointer-events:auto;min-height:38px;padding:9px 15px;border-radius:22px;border:1px solid var(--line,#ffffff55);background:var(--panel,#f1f5e9ed);color:var(--ink,#29443b);font:inherit;font-size:11px;box-shadow:0 3px 14px #00000012}
.mobile-dock button:disabled{opacity:1;cursor:wait}
 .inside-home>.mobile-dock,.in-cabin>.mobile-dock{display:none}
}

/* Touch driving controls must behave like controls, never selectable text. */
.drive-touch{display:none!important;pointer-events:none;position:fixed;left:0;right:0;bottom:calc(72px + env(safe-area-inset-bottom));z-index:40;padding:0 18px}
.drive-touch.is-on{display:block!important}
.drive-touch-row{display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.drive-stick,.drive-brake{
 pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
 touch-action:none;-webkit-tap-highlight-color:transparent;position:relative;left:auto;right:auto;bottom:auto;filter:none
}
.drive-stick{width:120px;height:120px;flex:0 0 120px}
.drive-stick-hit{display:none}
.drive-stick-ring{position:absolute;inset:0;border-radius:50%;background:#173e3c66;border:1px solid #ffffffaa;box-shadow:inset 0 0 0 1px #00000010}
.drive-stick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#f5f8efee;border:1px solid #ffffffaa;box-shadow:0 6px 18px #142f2c28;pointer-events:none;will-change:transform}
body.racing .drive-stick-hit{display:block;position:absolute;inset:-34px;border-radius:50%;background:transparent;touch-action:none;pointer-events:auto;z-index:0}
.drive-stick-ring,.drive-stick-knob{z-index:1}
.drive-brake{width:60px;height:90px;flex:0 0 60px;padding:0;background:transparent;border:0;box-shadow:none;color:#eee}
.drive-brake:focus,.drive-brake:focus-visible{outline:none}
.brake-pedal{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;border-radius:12px 12px 16px 16px;border:2px solid #4a4a4a;background:repeating-linear-gradient(to bottom,#3a3a3a 0 8px,#2a2a2a 8px 11px);box-shadow:0 10px 0 #111,0 14px 16px #0006;transition:transform .08s ease,box-shadow .08s ease}
.brake-face{margin-bottom:14px;font-size:13px;font-weight:700;letter-spacing:3px;text-shadow:0 1px 0 #000;pointer-events:none}
.drive-brake.is-down .brake-pedal{transform:translateY(10px);box-shadow:0 2px 0 #111,0 4px 8px #0005}
.race-touch-controls{display:none;justify-content:space-between;gap:16px;pointer-events:none}
.drive-touch.is-on .drive-touch-row{display:none}
.drive-touch.is-on .race-touch-controls{display:flex}
body.touch-drive .drive-touch{padding:0;left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom))}
.race-touch-pad{display:grid;grid-template-columns:1fr 1fr;height:clamp(96px,16vh,128px);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#race-touch-steer{width:clamp(132px,40vw,190px);gap:1px;border:1px solid #ffffff6b;border-radius:20px;background:#183735ba;overflow:hidden;box-shadow:0 4px 18px #10282730}
#race-touch-pedals{width:clamp(120px,36vw,172px);gap:8px}
.race-touch-pad button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px 2px;min-width:0;touch-action:none;color:#f3f7eb;font-size:12px;font-weight:600;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:background .08s,color .08s}
.race-touch-pad button:hover{filter:none}
#race-steer-left{border-right:1px solid #ffffff3b}
.race-touch-pad button>span[aria-hidden]{font-size:30px;font-weight:400;line-height:1;pointer-events:none}
#race-touch-pedals button{border:1px solid #ffffff6b;border-radius:18px;background:#183735d1;box-shadow:0 4px 18px #10282730}
#race-touch-pedals #race-throttle{background:#d8c598d9;color:#183735;border-color:#edf7d0c9}
.race-touch-pad button.is-down,#race-touch-pedals button.is-down,#race-touch-pedals #race-throttle.is-down{background:#d8c598;color:#173e3c;border-color:#f3ffcc}
#race-touch-pedals #race-brake.is-down{background:#f3c58a;color:#3f3021}
body.racing.touch-drive.driving .bottom .mode-switch,body.racing.touch-drive.driving .bottom .tour,body.touch-drive.driving .drive-note{display:none}
body.touch-drive.driving .tools{display:none!important}
body.racing.touch-drive.driving .header-right>a.cross-link[href="#home"],body.racing.touch-drive.driving #about{display:none}
.race-touch-note{display:none}
body.touch-drive .race-touch-note{display:block;font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-height:500px){body.touch-drive .race-touch-pad{height:82px}body.touch-drive .drive-touch{bottom:calc(14px + env(safe-area-inset-bottom))}.race-touch-pad button{gap:6px}}
body.touch-drive.driving .map-card,
body.touch-drive.driving .bottom .hint{display:none}
body.touch-drive.driving .bottom{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;left:50%;transform:translateX(-50%);z-index:8;width:max-content;max-width:calc(100% - 16px)}
body.touch-drive.driving .mode-switch,body.touch-drive.driving .tour{flex:0 0 auto;white-space:nowrap}
body.touch-drive.driving .mode-switch button{padding:10px 12px;font-size:11px}
body.touch-drive.driving .tour{padding:10px 14px;font-size:11px}
body.touch-drive.driving .bottom .sun-control{position:fixed;top:78px;left:14px;right:70px;width:auto;z-index:15;grid-column:auto}
body.touch-drive.driving .drive-stack{left:19px;top:100px;bottom:auto}
.drive-stack{position:absolute;left:42px;bottom:108px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;z-index:1}
.drive-stack .speed,.drive-stack .drive-note{position:static;left:auto;bottom:auto;margin:0}
#cam-mode{pointer-events:auto;margin:2px 0 0;padding:8px 14px;border-radius:8px;background:#f5f8efee;color:#263e45;font-size:12px;letter-spacing:.4px;border:0;box-shadow:none}
#cam-mode:focus,#cam-mode:focus-visible{outline:none}
.drive-actions{display:flex;align-items:center;gap:8px;margin-top:2px;pointer-events:none}
#race-retry{pointer-events:none;padding:8px 14px;border:1px solid #c5b283;border-radius:8px;background:var(--accent);color:var(--ink);font-size:12px;letter-spacing:.4px;box-shadow:0 5px 18px #1d544022;opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .42s ease,transform .42s ease,visibility 0s linear .42s}
#race-retry.is-visible{pointer-events:auto;opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
#race-retry:focus,#race-retry:focus-visible{outline:none}
.driving.chase .hood,.driving.cockpit .hood{display:none}

/* Keep daylight reachable without covering the steering and brake controls. */
@media(max-width:750px),(pointer:coarse){
 body.driving:not(.touch-drive) .drive-stack{bottom:calc(136px + env(safe-area-inset-bottom))}
 body.touch-drive.driving .mobile-dock{display:flex;top:124px;bottom:auto;left:auto;right:16px;z-index:41}
 body.touch-drive.driving .mobile-dock button:not([aria-controls="city-panel-1"]){display:none}
 body.touch-drive.driving .bottom{left:8px;right:8px;transform:none;width:auto}
 body.touch-drive.driving .bottom:has(.sun-control.mobile-open){z-index:42}
 body.touch-drive.driving .bottom .sun-control.mobile-open{position:fixed!important;top:142px!important;bottom:auto!important}
 body.touch-drive.driving:not(.racing) .bottom{bottom:calc(clamp(96px,16vh,128px) + 36px + env(safe-area-inset-bottom))!important}
 body.touch-drive.driving:not(.racing) .mobile-dock{top:166px}
 body.touch-drive.driving:not(.racing) .bottom .sun-control.mobile-open{top:208px!important}
}
@media(max-width:750px) and (max-height:500px){
 body.touch-drive.driving:not(.racing) .bottom{bottom:calc(112px + env(safe-area-inset-bottom))!important}
 body.touch-drive.driving:not(.racing) .mobile-dock{top:124px}
 body.touch-drive.driving:not(.racing) .bottom .sun-control.mobile-open{top:100px!important;max-height:calc(100dvh - 200px)!important}
}

@media(min-width:751px){
 body.touch-drive.driving .bottom{left:0!important;right:0!important;transform:none;width:auto;max-width:none}
 body.racing.touch-drive.driving .bottom{height:0}
 /* Closed only: the open panel is placed by the mobile-open rules, and this centring shift pushed it half off the left edge on landscape phones (≥751 px wide). */
 body.touch-drive.driving .bottom .sun-control:not(.mobile-open){left:50%;right:auto;top:auto;bottom:70px;width:min(360px,calc(100vw - 440px));transform:translateX(-50%)}
 body.racing.touch-drive.driving .bottom .sun-control{bottom:14px}
}

/* Match the interior's night palette when the daylight control reaches night. */
body.night{color-scheme:dark;--ink:#e9e6dc;--muted:#adb7bf;--paper:#233040;--panel:#243141ee;--surface:#29394be8;--edge:#a6bdd32e;--line:#b3c3d52e;--strong:#e1bc83;--on-strong:#28303b;--slider:#e1bc83}
body.night .identity,body.night .circle,body.night .cross-link,body.night .places button,body.night .mode-switch,body.night #cam-mode{background:var(--surface);color:var(--ink);border-color:var(--edge)}
body.night #race-retry{background:var(--strong);color:var(--on-strong);border-color:var(--edge);box-shadow:0 5px 18px #10182466}
body.night .tools,body.night .map-card,body.night .sun-control,body.night .mobile-panel.mobile-open,body.night dialog,body.night .mobile-adjustment-card{background:var(--panel);color:var(--ink);border-color:var(--edge)}
body.night .mode-switch .active,body.night .tour,body.night #exit-cabin,body.night #exit-tower{background:var(--strong);color:var(--on-strong)}
body.night .cross-link:hover,body.night .tools button[aria-pressed=true]{background:#52605d;color:#fff0d1}
body.night .sun-control .sun-caption,body.night dialog p,body.night .map-caption,body.night .places button b,body.night .hint{color:var(--muted)}
body.night .sun-control input,body.night #cabin-hud .sun-control.mobile-adjusting input,body.night #tower-hud .sun-control.mobile-adjusting input{accent-color:var(--slider)}
body.night #cabin-hud .sun-control.mobile-adjusting .mobile-adjustment-focus,
body.night #tower-hud .sun-control.mobile-adjusting .mobile-adjustment-focus{color:var(--ink)}
body.night .mark{border-color:var(--line)}
body.night .drive-stick-ring{background:#243141aa;border-color:#a6bdd366}
body.night .drive-stick-knob{background:#adb7bf;border-color:var(--edge)}
body.night #toast,body.night #residential-tip,body.night #cabin-tip,body.night #tower-tip{background:var(--panel);color:var(--ink)}
body.night dialog::backdrop{background:#101824aa}
body.night button:focus-visible,body.night a:focus-visible,body.night input:focus-visible{outline-color:var(--strong)}
#clouds-toggle{display:grid;place-items:center;line-height:0}
#clouds-toggle svg{width:17px;height:17px;display:block}

#race-timer,#race-countdown,#race-result,#race-board{position:fixed;z-index:12;pointer-events:none}
#race-timer[hidden],#race-countdown[hidden],#race-result[hidden],#race-board[hidden]{display:none!important}
#race-timer{top:0;left:50%;transform:translateX(-50%);z-index:1000;box-sizing:border-box;min-width:188px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:2px;font-size:28px;color:#f4f8ee;text-shadow:0 2px 16px #142f2c;background:#173e3c99;padding:calc(7px + env(safe-area-inset-top)) 24px 10px;border:1px solid #ffffff33;border-top:0;border-radius:0 0 18px 18px;box-shadow:0 8px 24px #142f2c3d}
body.racing #toast{top:142px;z-index:13}
body.racing header .identity{transition:opacity .42s ease,visibility 0s linear 0s}
body.racing:not(.race-stopped) header .identity{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
#race-countdown{inset:0;display:grid;place-items:center;font-size:min(28vw,180px);font-weight:600;color:#d8c598;text-shadow:0 8px 40px #142f2c;letter-spacing:8px}
#race-countdown.is-ready{font-size:min(13vw,96px);letter-spacing:.12em}
#race-result{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#17383d66;backdrop-filter:blur(6px);color:#f4f8ee}
#race-result strong{font-size:64px;font-weight:500;letter-spacing:2px;font-variant-numeric:tabular-nums}
#race-result .eyebrow,#race-board .eyebrow{letter-spacing:3px}
#race-board{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;background:#17383d55;backdrop-filter:blur(8px);pointer-events:auto;padding:24px}
#race-board h2,#race-setup h2{margin:8px 0 16px}
/* The board's heading sits straight on the blurred, dimmed scene, not on a panel. */
#race-board>.eyebrow,#race-board h2{color:#f7f8f0;text-shadow:0 1px 2px #0d2226,0 2px 14px #0d2226cc}
/* Landscape phones: start below the race timer instead of centring under it. */
@media (max-height:520px){#race-board{padding-top:calc(58px + env(safe-area-inset-top))}#race-board h2{margin:4px 0 10px}}
#race-setup .race-v3-note{display:flex;align-items:baseline;gap:8px;margin:4px 0 18px;font-size:11px;line-height:1.6;color:var(--muted)}
#race-setup .race-v3-note strong{flex:0 0 auto;padding:2px 7px;border-radius:10px;background:var(--accent);color:var(--ink);font-size:9px;line-height:1.5;letter-spacing:.5px}
#race-board table{width:min(420px,92vw);border-collapse:collapse;background:#f7f8f0ee;color:var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 18px 60px #173d3944}
#race-board th,#race-board td{padding:10px 14px;text-align:left;font-size:13px;border-bottom:1px solid var(--line)}
#race-board th{font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:600}
#race-board tr.is-me td{background:#d8c59888;font-weight:600}
#race-board td:first-child,#race-board th:first-child{width:56px;min-width:56px;white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
#race-board td:last-child,#race-board th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.race-field,.race-view{display:grid;gap:8px;margin:16px 0;font-size:13px}
.race-field input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}
.race-view{border:0;padding:0}
.race-view legend{padding:0;font-size:12px;color:var(--muted)}
.race-view label{display:inline-flex;align-items:center;gap:6px;margin-right:16px}
.race-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;pointer-events:auto}
.race-actions button{padding:10px 18px;border-radius:22px;border:1px solid var(--line);background:#f8faf0}
#race-start,#race-again{background:var(--accent);border-color:transparent}
body.racing #race-mode{background:var(--ink);color:#f1f5e8;border-color:transparent}
body.racing #race-mode .race-new{display:none}
body.racing .mode-switch,body.racing .tour{pointer-events:none;opacity:.38;filter:grayscale(.2)}
body.racing .mode-switch button,body.racing .tour{cursor:not-allowed}
.race-entry{position:relative;display:inline-flex;align-items:center}
.race-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:21;display:flex;flex-direction:column;gap:4px;min-width:158px;padding:8px;background:#f8faf0f2;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 36px #173d3928}
.race-menu[hidden]{display:none!important}
.race-menu button{padding:10px 14px;border-radius:12px;text-align:left;font-size:13px;color:var(--ink)}
.race-menu button:hover{background:#ffffff}
#race-menu-start{background:var(--accent)}
/* Open race menu above the touch-drive dock (时间, z-index 41), which sits right under 退出模式 in portrait. */
header:has(#race-mode[aria-expanded="true"]){z-index:42}
body.night .race-menu{background:var(--panel);border-color:var(--edge);color:var(--ink);box-shadow:0 14px 36px #10182466}
body.night .race-menu button{color:var(--ink)}
body.night .race-menu button:hover{background:var(--surface);filter:none}
body.night #race-menu-start{background:var(--strong);color:var(--on-strong)}
.in-cabin .race-entry{display:none}
#race-mode{position:relative;overflow:visible}
#race-mode .race-new{display:none;position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff5a3c;color:#fff;font-size:10px;line-height:18px;letter-spacing:0;font-weight:700;box-shadow:0 2px 8px #c23a2288}
#race-mode.is-new{background:#d8c598;border-color:#c5b283;color:var(--ink);box-shadow:0 0 0 0 #d8c59888;animation:race-new-pulse 1.8s ease-out infinite}
#race-mode.is-new .race-new{display:grid;place-items:center}
body.racing #race-mode.is-new{background:var(--ink);color:#f1f5e8;border-color:transparent;animation:none;box-shadow:none}
body.night #race-mode.is-new{background:#d8c598;color:#263e45;border-color:#c5b283}
body.night.racing #race-mode{background:var(--surface);color:var(--ink);border-color:var(--edge)}
body.racing .header-right>a.cross-link[href="#home"],body.racing #about,body.racing #home,body.racing #zoom-in,body.racing #zoom-out,body.racing [data-place]{pointer-events:none;opacity:.42;cursor:not-allowed;filter:grayscale(.35)}
body.racing button:disabled{cursor:not-allowed}
@keyframes race-new-pulse{0%{box-shadow:0 0 0 0 #d8c59880}70%{box-shadow:0 0 0 12px #d8c59800}100%{box-shadow:0 0 0 0 #d8c59800}}
@media(prefers-reduced-motion:reduce){#race-mode.is-new{animation:none}}
body.night #race-timer{background:#24314199;color:var(--ink);border-color:var(--edge)}
body.night #race-board table,body.night #race-setup{background:var(--panel);color:var(--ink)}
body.night .race-field input{background:var(--surface);color:var(--ink);border-color:var(--edge)}
body.night .race-actions button{background:var(--surface);color:var(--ink);border-color:var(--edge)}
body.night #race-start,body.night #race-again{background:var(--strong);color:var(--on-strong)}
body.night #race-setup .race-v3-note strong{background:var(--strong);color:var(--on-strong);border:1px solid var(--edge)}
@media(max-width:750px),(pointer:coarse){
 #race-timer{top:0;min-width:148px;font-size:20px;padding:calc(5px + env(safe-area-inset-top)) 18px 8px;border-radius:0 0 14px 14px}
 body.racing #toast{top:168px}
 #race-result strong{font-size:42px}
 #race-board table{font-size:12px}
 .header-right{position:relative}
 .race-entry{position:absolute;top:calc(100% + 8px);right:0;z-index:4}
 h1{white-space:nowrap}
 body.racing.touch-drive.driving .mobile-dock{top:124px}
 body.racing.touch-drive.driving .bottom .sun-control.mobile-open{top:166px!important}
 .drive-actions{flex-direction:column;align-items:flex-start;gap:8px}
}
.speed .driver-name{max-width:min(240px,calc(100vw - 150px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.speed .driver-name::before{content:"·";margin-right:10px}
.race-temperature{font-size:12px;line-height:1.35;letter-spacing:.35px;color:#f7f9ee;text-shadow:0 2px 16px #142f2c;font-variant-numeric:tabular-nums;transition:color .35s ease}
.race-temperature[data-band="cold"]{color:#dceeff}.race-temperature[data-band="warm"]{color:#eaffb5}.race-temperature[data-band="hot"]{color:#ffd67e}.race-temperature[data-band="overheat"]{color:#ff9d76;font-weight:600}
.race-temperature[hidden]{display:none}
body.racing .map-card{cursor:zoom-in}
body.racing[data-ready=true] .map-card.map-zoomed{
 cursor:default;position:fixed;left:50%;top:50%;right:auto;bottom:auto;
 width:min(860px,92vw);padding:16px 18px;z-index:20;
 transform:translate(-50%,-50%);
 box-shadow:0 24px 80px #173d3960;
}
body.racing .map-card.map-zoomed #minimap{width:100%;height:auto;aspect-ratio:380/250}
@media(prefers-reduced-motion:reduce){body.racing[data-ready=true] .map-card.map-zoomed{transform:translate(-50%,-50%)}}
html,body{width:100vw;height:100%;height:var(--scene-height,100dvh);overflow:hidden;overscroll-behavior:none}
html.race-viewport-locked,html.race-viewport-locked body,body.racing{touch-action:none;overscroll-behavior:none}
#scene,#labels{position:fixed;inset:0;width:var(--scene-width,100vw);height:100%;height:var(--scene-height,100dvh)}
#scene canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none}
#scene canvas:focus,
#scene canvas:focus-visible{outline:none!important}

/* The language switch uses the same compact text treatment as the HD tool. */
.language-toggle{display:inline-flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--line);border-radius:18px;padding:0 9px;font-weight:700;line-height:1;white-space:nowrap}
.language-toggle .lang-slash{opacity:.45;font-weight:400}
.language-toggle[data-locale="zh-CN"] .lang-cn,.language-toggle[data-locale="en"] .lang-en{color:var(--ink)}
.language-toggle[data-locale="zh-CN"] .lang-en,.language-toggle[data-locale="en"] .lang-cn{opacity:.42;font-weight:500}
.header-right{min-width:0;flex-wrap:wrap;justify-content:flex-end}
.identity,.identity>div{min-width:0}
.places button{min-width:0}
.places button .place-name{min-width:0;margin-left:0;overflow-wrap:anywhere;line-height:1.35}
.places button>span:last-child{margin-left:auto;flex:0 0 auto}
#race-setup,#race-board,#info{max-width:calc(100vw - 24px);overflow:auto}
#race-setup p,#race-board td,#race-board th,#info p{overflow-wrap:anywhere}
#race-name{min-width:0;max-width:100%}
html[data-demo-locale="en"] h1{letter-spacing:2px;line-height:1.2}
html[data-demo-locale="en"] h1 span{margin-left:8px}
@media(max-width:750px),(pointer:coarse){
 .header-right{max-width:calc(100vw - 74px);row-gap:5px}
 .cross-link{max-width:calc(100vw - 145px);overflow:hidden;text-overflow:ellipsis}
 .places button .place-name{font-size:10px}
 #race-setup,#race-board,#info{width:calc(100vw - 24px)}
 #race-setup{max-height:calc(100dvh - 28px)}
 html[data-demo-locale="en"] h1{font-size:17px;letter-spacing:1px}
}

/* Compact language control: show only the active locale, never a two-item
   selector inside the narrow vertical rail. */
#labels-toggle svg{width:20px;height:20px;display:block}

/* Keep the rail locale control text-only, matching the width of the other tools. */
.tools button.language-toggle{
  width:32px;
  min-width:32px;
  height:34px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-family:inherit;
  font-size:13px;
  font-weight:400;
  line-height:normal;
  letter-spacing:normal;
  gap:0;
}
.tools button.language-toggle:hover{background:transparent;filter:none}

/* Long English UI copy should wrap inside its surface instead of expanding the
   scene beyond the viewport. */
.header-right>a.cross-link{white-space:normal;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.places button{align-items:flex-start}
.places button .place-name{white-space:normal;overflow-wrap:anywhere}
.hint,.drive-note,#toast,#load-status,#loading,#residential-tip{max-width:calc(100vw - 24px);white-space:normal;overflow-wrap:anywhere;line-height:1.45;text-align:center}
.hint{width:min(530px,calc(100vw - 32px))}
.drive-note{width:min(360px,calc(100vw - 48px));text-align:left}
#load-status,#loading{width:max-content;text-align:center}
.bottom{max-width:calc(100vw - 24px)}
@media(max-width:750px),(pointer:coarse){
 .header-right>a.cross-link{max-width:calc(100vw - 145px);overflow:visible;text-overflow:clip}
 .places{width:min(180px,calc(100vw - 42px))}
 .hint{width:calc(100vw - 32px)}
}

#race-board .race-board-tabs{display:flex;gap:4px;margin:0 0 10px;padding:4px;background:#f7f8f0cc;border-radius:22px;box-shadow:0 8px 24px #173d3922}
#race-board .race-board-tabs button{padding:8px 14px;border-radius:18px;font-size:12px;color:var(--ink)}
#race-board .race-board-tabs button.is-active{background:var(--ink);color:#f1f5e8}
body.night #race-board .race-board-tabs{background:var(--surface)}
body.night #race-board .race-board-tabs button.is-active{background:var(--strong);color:var(--on-strong)}
/* Keep the daylight captions aligned with the slider, leaving the season column clear. */
.sun-control>.sun-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;column-gap:12px;align-items:center}
.sun-control .sun-row input{grid-column:1;grid-row:1;width:100%;min-width:0}
.sun-control .sun-row .sun-caption{grid-column:1;grid-row:2;display:flex;justify-content:space-between}
.sun-control .sun-row .season-toggle{grid-column:2;grid-row:1}
.season-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;border-radius:999px;border:1px solid #577c6040;background:#ffffffb0;color:var(--ink);font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .15s ease}
.season-toggle:hover{background:#fff;border-color:#577c6080}
.season-toggle:active{transform:scale(.95)}
.season-toggle:focus-visible{outline:2px solid #567b61;outline-offset:3px}
.season-toggle i{width:9px;height:9px;border-radius:50%;background:var(--season-dot,#5d9a52);box-shadow:0 0 0 2px #ffffffc0;transition:background-color .4s ease}
.season-toggle[data-season=spring]{--season-dot:#ef9fb8}
.season-toggle[data-season=summer]{--season-dot:#4f9a55}
.season-toggle[data-season=autumn]{--season-dot:#e3a12c}
.season-toggle[data-season=winter]{--season-dot:#a9c3d6}
body.night .season-toggle{background:#ffffff14;border-color:var(--edge);color:var(--ink)}
body.night .season-toggle i{box-shadow:0 0 0 2px #ffffff30}
@media(max-width:750px),(pointer:coarse){.sun-control>.sun-row{column-gap:8px}.season-toggle{height:26px;padding:0 9px 0 7px;font-size:11px}}
#cabin-hud .season-toggle span,
#tower-hud .season-toggle span{color:inherit;font-size:11px;letter-spacing:.02em}

/* ---- Start-up build loader (build-loader.js) ---- */
body.build-loading #load-status:not([role=button]){position:fixed!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0}
#build-loader{position:fixed;top:92px;left:50%;transform:translateX(-50%);z-index:9;pointer-events:none;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);--p:0}
#build-loader[hidden]{display:none}
#build-loader.bl-out{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.96)}
/* A small map card like the minimap: the header's 湖 mark (tinted with lake
   water as the city is built), the eyebrow and percentage, a serif line of what
   is being built, and a hairline scale bar. */
.bl-card{display:flex;align-items:center;gap:14px;width:min(300px,calc(100vw - 32px));padding:12px 16px 12px 12px;border-radius:10px;background:#f1f1ebf2;border:1px solid #fff;box-shadow:0 10px 35px #2c51421a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);animation:bl-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes bl-in{from{opacity:0;transform:translateY(-6px)}}
.bl-mark{position:relative;flex:none;width:36px;height:40px;border:1px solid #244e4555;border-radius:12px 2px 12px 2px;overflow:hidden;display:grid;place-items:center}
.bl-mark i{position:absolute;inset:0;background:linear-gradient(#3f9b8000,#3f9b8033);transform:translateY(calc((1 - var(--p)) * 100%));transition:transform .8s cubic-bezier(.22,1,.36,1)}
.bl-mark b{position:relative;font:400 22px/1 "Songti SC","STSong",serif}
.bl-mid{flex:1;min-width:0;display:grid;gap:6px}
.bl-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bl-eyebrow{font-size:8px;letter-spacing:2px;font-weight:600;color:var(--muted);white-space:nowrap}
.bl-pct{font:600 10px/1 "Avenir Next","PingFang SC",sans-serif;letter-spacing:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-hint{font:400 14px/1.25 "Songti SC","STSong",serif;letter-spacing:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.25em}
.bl-hint-in{animation:bl-hint .45s cubic-bezier(.22,1,.36,1)}
@keyframes bl-hint{from{opacity:0;transform:translateY(3px)}}
/* Scale bar: a hairline with quarter ticks, the built part drawn in ink. */
.bl-bar{position:relative;overflow:hidden;height:5px;margin-top:2px;background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--bl-tick,#244e4566) 0 1px,#0000 1px 25%) 0 100%/calc(100% + 1px) 4px no-repeat}
.bl-bar i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(var(--p));transform-origin:left;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.bl-bar::after{content:"";position:absolute;left:0;bottom:0;width:24%;height:2px;background:linear-gradient(90deg,#fff0,#ffffffb3,#fff0);animation:bl-shine 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes bl-shine{from{transform:translateX(-100%)}to{transform:translateX(420%)}}
/* Waiting for the opening choice: the shared build is done, nothing is stuck. */
.bl-waiting .bl-bar::after,.bl-finished .bl-bar::after{animation:none;opacity:0}
.bl-waiting .bl-pct,.bl-finished .bl-pct{color:#3f8a72}
.bl-finished .bl-mark{animation:bl-done .7s cubic-bezier(.22,1,.36,1)}
@keyframes bl-done{40%{box-shadow:0 0 0 5px #d8c59859}100%{box-shadow:0 0 0 10px #d8c59800}}
body.night #build-loader .bl-card{--bl-tick:#a6bdd366;background:#29394bf2;border-color:#a6bdd32e;box-shadow:0 10px 30px #0b111866}
body.night #build-loader .bl-mark{border-color:var(--line)}
body.night #build-loader:is(.bl-waiting,.bl-finished) .bl-pct{color:#8fd6a9}

@media(prefers-reduced-motion:reduce){.bl-bar::after,.bl-hint-in,.bl-card,.bl-finished .bl-mark{animation:none}}

/* Night logo: no hard-edged box against a changing sky. A feathered scrim and
   a soft text halo keep the wordmark legible over any dusk or night colour. */
body.night:not(.driving):not(.in-cabin) .identity{background:none;border-color:transparent;position:relative;isolation:isolate}
body.night:not(.driving):not(.in-cabin) .identity::before{content:"";position:absolute;z-index:-1;inset:-34px -56px -34px -40px;pointer-events:none;background:radial-gradient(closest-side,#141d2773 0%,#141d2740 55%,#141d2700 100%)}
body.night:not(.driving):not(.in-cabin) .identity h1,body.night:not(.driving):not(.in-cabin) .identity .eyebrow,body.night:not(.driving):not(.in-cabin) .identity .mark{color:#f1ede2;text-shadow:0 1px 2px #0b111899,0 0 12px #0b111880}
body.night:not(.driving):not(.in-cabin) .identity .mark{border-color:#f1ede266;background:#1a243a33}
body.night:not(.driving):not(.in-cabin) .identity h1 span{color:#d2d8dc}

/* IFS tower walk-through */
#tower-fade{position:fixed;inset:0;background:#0f1c1f;opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:30}#tower-fade.on{opacity:1}
#tower-hud{z-index:8}.in-tower #tower-tip{display:none}
@media(min-width:900px){#tower-hud{left:24px;transform:none;bottom:24px;width:min(430px,calc(100% - 48px));padding:16px 18px}}

/* View gestures leave the city and its landmark labels unobstructed. Keep
   existing display/visibility rules so hidden panels stay hidden on return. */
body>:is(header,.intro,.places,.tools,.bottom,.mobile-dock,#drive-hud,#drive-touch,#cabin-hud,#tower-hud,#residential-tip,#cabin-tip,#tower-tip,#toast,#race-timer,#race-countdown,#race-result,#race-board){transition:opacity .45s ease}
body.scene-immersed>:is(header,.intro,.places,.tools,.map-card,.bottom,.mobile-dock,#drive-hud,#drive-touch,#cabin-hud,#tower-hud,#residential-tip,#cabin-tip,#tower-tip,#toast,#race-timer,#race-countdown,#race-result,#race-board){opacity:0!important;transition-duration:.22s}
body.scene-immersed>:is(header,.intro,.places,.tools,.map-card,.bottom,.mobile-dock,#drive-hud,#drive-touch,#cabin-hud,#tower-hud,#residential-tip,#cabin-tip,#tower-tip,#toast,#race-timer,#race-countdown,#race-result,#race-board),
body.scene-immersed>:is(header,.intro,.places,.tools,.map-card,.bottom,.mobile-dock,#drive-hud,#drive-touch,#cabin-hud,#tower-hud,#residential-tip,#cabin-tip,#tower-tip,#toast,#race-timer,#race-countdown,#race-result,#race-board) *{pointer-events:none!important}
@media(prefers-reduced-motion:reduce){
 body>:is(header,.intro,.places,.tools,.map-card,.bottom,.mobile-dock,#drive-hud,#drive-touch,#cabin-hud,#tower-hud,#residential-tip,#cabin-tip,#tower-tip,#toast,#race-timer,#race-countdown,#race-result,#race-board){transition:none!important}
}

#lake-walk-hud{position:absolute;left:24px;bottom:24px;width:min(470px,calc(100% - 48px));padding:16px 18px;background:var(--panel,#17383deb);color:#edf4e8;border:1px solid #bfd5ca44;border-radius:16px;z-index:8;backdrop-filter:blur(12px);display:grid;grid-template-columns:1fr auto;gap:12px;transition:opacity .45s ease}
#lake-walk-hud.lake-walk-returning{opacity:0;pointer-events:none}
#lake-walk-hud[hidden]{display:none}#lake-walk-hud strong{font-size:15px;font-weight:500;align-self:center}#lake-walk-hud>button{padding:10px 16px;border-radius:24px;background:var(--strong,#d8c598);color:var(--on-strong,#263e45);font-size:12px}#lake-walk-hud p{grid-column:1/-1;font-size:11px;line-height:1.7;margin:0;color:#c7d8cd}.lake-walk-buttons{display:none;grid-column:1/-1;gap:8px}.lake-walk-buttons button{padding:12px 18px;border-radius:8px;background:#45635e;color:white;touch-action:none}
.lakeside-walking .intro,.lakeside-walking .places,.lakeside-walking .tools,.lakeside-walking .bottom,.lakeside-walking .mobile-dock,.lakeside-walking .race-entry,.lakeside-walking .header-right>a.cross-link{display:none}
.lakeside-walking .identity{padding:10px 14px;border-radius:10px;background:#f5f3ecdd}.lakeside-walking .map-card{bottom:140px}
body.scene-immersed>#lake-walk-hud{opacity:0!important;transition-duration:.22s}body.scene-immersed>#lake-walk-hud,body.scene-immersed>#lake-walk-hud *{pointer-events:none!important}
@media(pointer:coarse){.lake-walk-buttons{display:flex}}
@media(prefers-reduced-motion:reduce){#lake-walk-hud{transition:none!important}}

#lake-walk-hud .lake-stand-button{grid-column:1/-1;justify-self:start;background:#45635e;color:#edf4e8}#lake-walk-hud .lake-stand-button[hidden]{display:none}
#lake-walk-hud .lake-view-button{grid-column:1/-1;justify-self:start;background:#45635e;color:#edf4e8}#lake-walk-hud .lake-view-button[hidden]{display:none}
.lake-cruise-controls{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.lake-cruise-controls[hidden]{display:none}.lake-cruise-controls span{width:100%;font-size:12px;color:#e9ddbc}.lake-cruise-controls button{background:#d9dfbc;color:#224e48;padding:10px 14px;border-radius:18px;font-size:12px}.lake-cruise-controls button[hidden]{display:none}
#lake-cruise-tip{position:fixed;z-index:12;pointer-events:none;padding:9px 13px;border-radius:10px;color:#f6eed8;background:#1b4943ed;font-size:12px;box-shadow:0 4px 18px #10383233}#lake-cruise-tip[hidden]{display:none}
.lake-cruising .map-card{display:none}
.lake-cruise-controls>span{display:none}.lake-cruising #lake-walk-hud{width:min(410px,calc(100% - 48px))}

/* The same daylight/season control stays usable while walking or seated. */
#lake-walk-hud .sun-control{display:block!important;position:static!important;grid-column:1/-1;width:100%!important;max-width:none!important;max-height:none!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;margin:0;padding:10px 14px!important;overflow:visible!important;transform:none!important;animation:none!important;color:var(--ink)}

/* Separate corner controls leave the centre of the scene open. */
.lake-mobile-ui[hidden],.lake-mobile-menu[hidden]{display:none!important}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact{left:auto;right:calc(14px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:min(244px,calc(100% - 150px));padding:0;display:block;transform:none;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
.lake-mobile-ui{display:contents}
.lake-hud-compact>div:not(.lake-mobile-ui){display:none}
.lake-mobile-heading{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;min-height:34px}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact strong{flex:1 0 100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:1.5;text-align:right;padding:4px 8px;border-radius:10px;background:#173e3cb8;color:#edf4e8}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-heading button{flex:none;min-height:44px;padding:8px 12px;border-radius:20px;background:#d8c598;color:#173e3c;font-size:12px;white-space:nowrap}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-heading button[data-mobile-label]{font-size:0}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact button[data-mobile-label]::after{content:attr(data-mobile-label);font-size:12px}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-heading button:disabled{opacity:.65}
.lake-mobile-bar{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:6px}
.lake-hud-compact .lake-walk-buttons{display:none!important}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-bar>.lake-view-button,
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-settings{flex:none;width:44px;height:44px;padding:0;border-radius:50%;background:#173e3cc9;color:#f0f5ed;font-size:12px;border:1px solid #ffffff66}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-bar>.lake-view-button{font-size:0}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-settings[aria-expanded=true]{background:#d8c598;color:#173e3c}
.lake-mobile-menu{position:absolute;left:auto;right:0;bottom:calc(100% + 8px);width:min(360px,calc(100vw - 28px));display:flex;flex-direction:column;gap:12px;max-height:min(48dvh,340px);overflow:auto;overscroll-behavior:contain;padding:14px;border-radius:14px;border:1px solid #bfd5ca44;background:#173e3cf5;box-shadow:0 6px 24px #102f3540;backdrop-filter:blur(12px)}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-menu>button{align-self:flex-end;min-height:44px;padding:10px 16px;border-radius:20px;background:#d8c598;color:#173e3c;font-size:12px}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-menu>p:not(.lake-mobile-help){display:none}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-mobile-help{font-size:10px;line-height:1.6;color:#edf4e8;margin:0}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .lake-cruise-controls button{min-height:44px}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .sun-control{display:block!important;position:static!important;width:100%!important;max-width:none!important;max-height:none!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;margin:0;padding:10px 14px!important;overflow:visible!important;transform:none!important;animation:none!important;color:var(--ink)}
:is(#lake-walk-hud,#tower-hud,#cabin-hud).lake-hud-compact .sun-control input{min-height:28px;margin:8px 0 2px}
.lake-hud-compact:has(.mobile-adjusting) .lake-mobile-heading,
.lake-hud-compact:has(.mobile-adjusting) .lake-mobile-bar{visibility:hidden;pointer-events:none}
.lake-mobile-menu:has(.mobile-adjusting){background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
.lake-mobile-menu:has(.mobile-adjusting)>:not(.sun-control){visibility:hidden;pointer-events:none}
@media(max-width:750px),(pointer:coarse){
 :is(.lakeside-walking,.in-cabin) .identity{padding:6px 9px;gap:8px}
 :is(.lakeside-walking,.in-cabin) .identity h1{font-size:16px;letter-spacing:2px;margin-top:3px}
 :is(.lakeside-walking,.in-cabin) .identity .eyebrow{font-size:7px;letter-spacing:1.4px}
 :is(.lakeside-walking,.in-cabin) .identity .mark{width:30px;height:34px;font-size:23px;border-radius:9px 2px 9px 2px}
}

@media(max-width:360px){#lake-walk-hud.lake-hud-compact .lake-mobile-heading strong{display:none}}

.island-shuttle-controls{display:flex;gap:8px;align-items:center;margin-top:10px}
.island-shuttle-controls button{border:0;border-radius:24px;background:#d8c598;color:#234c43;padding:12px 18px;cursor:pointer;min-height:44px}
@media(max-width:750px),(pointer:coarse){.island-shuttle-controls{margin-top:6px}}

.lake-cart-controls{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:#d8e8de}.lake-cart-controls[hidden]{display:none}.lake-cart-exit{margin:0!important;white-space:nowrap;min-height:44px;padding:10px 18px;border-radius:24px;background:#d8c598;color:#234c43;cursor:pointer}.lake-hud-compact .lake-cart-controls{margin:0}.lake-mobile-heading .lake-cart-exit{font-size:13px;padding:10px 15px}

/* Full-width scenery, with only interactive overlays inset around the notch. */
@media(pointer:coarse){
 header{left:calc(19px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right))}
 .tools{right:calc(17px + env(safe-area-inset-right))}
 .mobile-dock{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right))}
 body.touch-drive.driving .drive-stack{left:calc(19px + env(safe-area-inset-left))}
 body.touch-drive.driving .mobile-dock{left:auto;right:calc(16px + env(safe-area-inset-right))}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:440px){
 /* Keep camera/retry actions above the thumbs, including the home indicator. */
 header .identity{padding:10px 14px}
 header h1{font-size:17px;margin:4px 0 0}
 body.touch-drive.driving .drive-stack{top:100px;gap:4px}
 body.touch-drive.driving .speed strong{font-size:34px;line-height:1;letter-spacing:-1px}
 body.touch-drive.driving .race-temperature{font-size:10px;line-height:1.3}
 body.touch-drive.driving #cam-mode,body.touch-drive.driving #race-retry{min-height:44px;margin-top:0}
 /* Safari's bars and the home indicator leave as little as ~300px: Retry sits
    beside the camera button, and the stack (~105px) rises so it ends 10px above
    the steering pad (82px tall, 14px over the safe area) instead of under it. */
 body.touch-drive.driving .drive-actions{flex-direction:row;align-items:center}
 body.touch-drive.driving .drive-stack{top:min(100px,calc(100dvh - 212px - env(safe-area-inset-bottom)))}
}

/* Empty HUD layout space must allow taps through to nearby scene controls. */
.bottom{pointer-events:none}
.bottom .mode-switch,.bottom .sun-control,.bottom .tour{pointer-events:auto}

/* Phone landscape gutters share a black page backdrop in every scene mode. */
@media (pointer:coarse) and (orientation:landscape){
 :root{--map-backdrop:#000;background:#000}
 body{background:var(--map-backdrop)}
}

/* Quiet gallery controls frame the landscape without recolouring the canvas. */
:root{--ink:#263e45;--muted:#6f7e7e;--accent:#d8c598;--line:#31495026}
body.night{--panel:#25323eeb;--surface:#2d3b46e8;--strong:#cfb58a;--on-strong:#26343b;--slider:#cfb58a}
.label{background:#f5f3eceb;border-color:#ffffff85;box-shadow:0 3px 13px #18343c1c;letter-spacing:.06em}
.tools,.map-card,.sun-control,.mode-switch{box-shadow:0 9px 30px #19303b18,inset 0 1px 0 #ffffff45}
.places button{background:#f0f1ebe0;border-color:#31495020}
.tour,#race-mode.is-new,body.night #race-mode.is-new{background:#d8c598;color:#283b40;border-color:#c6b181;box-shadow:0 5px 18px #223b4022;animation:none}
.intro{color:#f3f1e9;text-shadow:0 1px 8px #203d4855}
.intro .eyebrow,.intro p,.intro .small{color:#e1e7e3}
.intro .divider{background:#e1e7e365}
.identity{color:#f3f1e9;text-shadow:0 1px 8px #203d4855}
.identity .eyebrow,.identity h1 span{color:#e1e7e3}
.identity .mark{border-color:#e1e7e380}
body.night .intro{color:#e9e6dc}
body.night .intro p,body.night .intro .eyebrow,body.night .intro .small{color:#b6c2ca}
body.night .label{background:#293943e8;color:#e9e6dc;border-color:#b9c9d32e}
.intro{isolation:isolate}
.intro::before{content:"";position:absolute;inset:-24px -24px;z-index:-1;pointer-events:none;border-radius:12px;background:linear-gradient(90deg,#18343c45,#18343c00)}
.identity{padding:7px 10px;border-radius:10px;background:#f5f3e9e0;color:#263e45;text-shadow:none;border:1px solid #ffffff65}
.identity .eyebrow,.identity h1 span{color:#64777a}
.identity .mark{border-color:#64777a66}
body.night .identity{background:#25323ed9;color:#e9e6dc;border-color:#b9c9d32e}
body.night .identity .eyebrow,body.night .identity h1 span{color:#b6c2ca}
@media(max-width:650px),(pointer:coarse){.identity{padding:5px 7px}}

@media(max-width:650px),(pointer:coarse){
 header .identity{padding:5px 7px;gap:8px}
 header .identity .eyebrow{white-space:nowrap;font-size:6px;letter-spacing:1px}
 header .identity h1{font-size:15px;letter-spacing:1.5px}
}
#station-board{grid-column:1/-1;padding:10px 16px;border:1px solid #c6b98c66;border-radius:20px;background:#d8c598;color:#263e45;font-size:12px;min-height:44px}#station-board:disabled{background:#45615b;color:#d0d9cb;opacity:.7;cursor:wait}#cabin-hud.lake-hud-compact #station-board{max-width:100%;font-size:11px;white-space:normal}
#cabin-hud #wheel-actions{grid-column:1/-1;width:100%}#cabin-hud #station-boarding-hint{margin:0;padding:10px 12px;border-radius:12px;background:#43655d;color:#eee7d5;white-space:normal;line-height:1.5}#station-alight,#station-view{min-height:40px;padding:9px 14px;border-radius:20px;background:#d8c598;color:#263e45;font-size:12px}#station-view{background:#45635e;color:#edf4e8}#cabin-hud.lake-hud-compact #wheel-actions{flex:1 0 100%;font-size:11px}#cabin-hud.lake-hud-compact #station-boarding-hint{font-size:11px;text-align:right;padding:8px 10px}#station-alight[hidden],#station-view[hidden],#station-boarding-hint[hidden]{display:none}

.tools #photo svg{width:22px;height:22px;vertical-align:middle}.tools #photo:disabled{opacity:.45;cursor:wait}

/* Race track picker: a map card with arrows on either side, and the board's track switcher. */
#race-track{width:min(640px,92vw);max-width:calc(100vw - 24px);max-height:calc(100dvh - 28px);overflow:auto;padding:30px 34px}
#race-track h2{margin:6px 0 0}
.race-track-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.race-track-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#race-track .race-track-meta{margin:4px 0 12px;font-size:12px;line-height:1.6;color:var(--muted)}
.race-track-stage{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#eef1e6}
#race-track-map{display:block;width:100%;height:auto;aspect-ratio:4/3}
.race-track-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border-radius:12px;background:#173e3ccc;color:#f3f7eb;font-size:34px;line-height:1;display:grid;place-items:center;box-shadow:0 6px 18px #173d3933}
.race-track-arrow.is-prev{left:8px}.race-track-arrow.is-next{right:8px}
.race-track-arrow:hover{background:#173e3c;filter:none}
.race-track-dots{display:flex;justify-content:center;gap:7px;margin:12px 0 2px}
.race-track-dots span{width:7px;height:7px;border-radius:50%;background:#173e3c33;transition:background .2s,transform .2s}
.race-track-dots span.is-active{background:#2fbf55;transform:scale(1.25)}
#race-track .race-track-hint{margin:4px 0 0;font-size:11px;text-align:center;color:var(--muted)}
#race-track-go{background:var(--accent);border-color:transparent}
#race-setup .race-setup-track{margin:4px 0 0;font-size:12px;color:var(--muted)}
#race-setup .race-install{margin:0 0 12px;padding:8px 8px 8px 12px;border-radius:12px;background:#d8c59833;border:1px solid #c5b28366}
#race-setup .race-install[hidden]{display:none}
#race-setup .race-install-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
#race-setup .race-install-text{flex:1;min-width:0}
#race-setup #race-install-how{flex:none;padding:3px 10px;border-radius:12px;background:var(--ink);color:#f1f5e8;font-size:11px;font-weight:500;line-height:1.5}
#race-setup #race-install-close{flex:none;width:24px;height:24px;border-radius:50%;font-size:15px;line-height:1;color:var(--muted)}
#race-setup #race-install-steps{margin:10px 0 2px;padding-top:8px;border-top:1px solid #c5b28355;font-size:11px;line-height:1.6;color:var(--ink)}
body.night #race-setup #race-install-how{background:var(--strong);color:var(--on-strong)}
#race-setup .race-setup-track strong{color:var(--ink);font-weight:600}
body.night #race-track{background:var(--panel);color:var(--ink)}
body.night .race-track-stage{background:#1d2b33}
body.night .race-track-dots span{background:#e9e6dc33}
body.night .race-track-dots span.is-active{background:#2fbf55}
body.night #race-track-go{background:var(--strong);color:var(--on-strong)}
/* Preparing the race view: a deeper fill sweeps left to right behind the label (--prepare 0..1) and covers the whole button once ready. */
#race-track-go{position:relative;overflow:hidden;isolation:isolate}
#race-track-go::before{content:"";position:absolute;inset:0;z-index:-1;background:#ba9a5a;transform:scaleX(var(--prepare,0));transform-origin:left center;transition:transform .2s linear;opacity:0}
#race-track-go.is-preparing::before{opacity:1}
body.night #race-track-go::before{background:#b8935a}
@media(pointer:coarse){#race-track .race-track-hint{display:none}}
@media(max-width:650px){#race-track{padding:22px 16px}.race-track-arrow{width:36px;height:52px;font-size:28px}}
#race-board .race-board-switch{display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:4px;background:#f7f8f0cc;border-radius:22px;box-shadow:0 8px 24px #173d3922}
#race-board .race-board-switch button{width:34px;height:30px;border-radius:16px;font-size:22px;line-height:1;color:var(--ink)}
#race-board .race-board-switch button:hover{background:#ffffff;filter:none}
#race-board .race-board-switch strong{min-width:120px;text-align:center;font-size:13px;color:var(--ink)}
body.night #race-board .race-board-switch{background:var(--surface)}
body.night #race-board .race-board-switch button:hover{background:var(--panel)}

/* Phones: iOS zooms into a text field set below 16px (and keeps the zoom), and a quick double tap zooms the page. */
@media (pointer:coarse){html{touch-action:manipulation}input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=button]),textarea,select{font-size:16px!important}}
/* Long-pressing a pedal must not select text anywhere around it (the iOS magnifier): no driving HUD text is selectable. */
#drive-hud,#drive-hud *,#race-timer,#race-countdown,#race-result,.drive-touch,.drive-touch *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* While driving or racing, a long press anywhere (scene, labels, panels) must not start a page-wide selection or the callout menu; text fields still edit. */
body.driving,body.racing,body.driving *,body.racing *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.driving :is(input,textarea,[contenteditable]),body.racing :is(input,textarea,[contenteditable]){-webkit-user-select:text;user-select:text}
/* ---- Opening choice: full map or straight into a race (index.html) ---- */
#launch-choice{position:fixed;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:#1b3a3a40;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#launch-choice[hidden]{display:none}
#launch-choice .lc-card{width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:20px;background:#f7f8f0f4;border:1px solid #fff;box-shadow:0 24px 80px #173d3940;color:var(--ink)}
#launch-choice h2{font-family:"Songti SC","STSong",serif;font-weight:400;font-size:26px;letter-spacing:2px;margin:0 0 18px;text-align:center}
#launch-choice .lc-options{display:grid;gap:10px}
#launch-choice .lc-option{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;text-align:left;border-radius:14px;border:1px solid #224f3b26;background:#ffffffa8;transition:transform .15s,box-shadow .15s}
#launch-choice .lc-option:hover{filter:none;transform:translateY(-1px);box-shadow:0 8px 24px #1d544018}
#launch-choice .lc-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#224f3b14;font-size:20px}
#launch-choice .is-race .lc-icon{background:#d8c59873}
#launch-choice .lc-text{display:grid;gap:4px;min-width:0}
#launch-choice .lc-text b{font-size:16px;font-weight:600;letter-spacing:1px;display:flex;align-items:center;gap:8px}
#launch-choice .lc-text i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1px;padding:2px 7px;border-radius:10px;background:var(--accent);color:var(--ink)}
@media (max-height:520px) and (orientation:landscape){#launch-choice{align-items:end;padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}#launch-choice .lc-card{max-height:calc(100dvh - 160px)}#launch-choice .lc-card{width:min(640px,100%);padding:16px 18px}#launch-choice h2{font-size:19px;margin:0 0 10px}#launch-choice .lc-options{grid-template-columns:1fr 1fr}#launch-choice .lc-option{padding:12px 14px}}
/* Very short screens: the card and the progress capsule do not both fit; the capsule returns once a choice is made. */
@media (max-height:600px) and (orientation:portrait){body:not([data-launch]) #build-loader{visibility:hidden}}
/* ---- Race dialogs on landscape phones: two columns so everything, the buttons above all, fits the short screen ---- */
@media (orientation:landscape) and (max-height:500px){
 #race-setup[open],#race-track[open]{display:grid;gap:0 20px;width:min(780px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-width:none;max-height:calc(100dvh - 16px);padding:14px 18px;overflow:hidden}
 /* Name dialog: the notes on the left (they scroll if long), name, view and buttons on the right. */
 #race-setup[open]{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
 #race-setup .race-setup-copy{max-height:calc(100dvh - 46px);overflow:auto;overscroll-behavior:contain;padding-right:4px}
 #race-setup h2{font-size:22px;margin:4px 0 8px}
 #race-setup .race-setup-copy p{margin:0 0 8px;font-size:11px;line-height:1.6}
 #race-setup .race-v3-note{margin:0}
 #race-setup .race-install{margin:0 0 8px;padding:6px 6px 6px 10px}
 #race-setup .race-setup-form{display:flex;flex-direction:column;min-height:0}
 #race-setup .race-field{margin:4px 0 10px}
 #race-setup .race-view{margin:0 0 6px}
 #race-setup .race-actions{margin-top:auto;padding-top:10px}
 /* Track picker: the map on the left at the screen's height, the details and buttons beside it. */
 #race-track[open]{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto auto;grid-template-areas:"stage eyebrow" "stage head" "stage meta" "stage dots" "stage hint" "stage actions"}
 #race-track>.eyebrow{grid-area:eyebrow}
 #race-track .race-track-head{grid-area:head}
 #race-track h2{font-size:22px}
 #race-track .race-track-meta{grid-area:meta;margin:4px 0 0}
 #race-track .race-track-stage{grid-area:stage;align-self:center;width:min(calc((100dvh - 48px) * 4 / 3),56vw)}
 #race-track .race-track-arrow{width:38px;height:54px;font-size:28px}
 #race-track .race-track-dots{grid-area:dots;align-self:center;justify-content:flex-start;margin:8px 0}
 #race-track .race-track-hint{grid-area:hint;text-align:left}
 #race-track .race-actions{grid-area:actions;margin-top:8px}
}
/* Home-screen app (manifest.webmanifest): the iOS status bar is translucent so the scene fills the whole screen
   (with the default style iOS kept a black status-bar strip even in landscape). In portrait the top UI moves below
   the status bar; env(safe-area-inset-top) is 0 in landscape. #race-timer already pads by the inset itself.
   margin-top rather than translate: a transform would make header its own stacking context and trap the race menu under 时间. */
:root{--standalone-top:0px}
@media (display-mode:standalone),(display-mode:fullscreen){:root{--standalone-top:env(safe-area-inset-top)}}
:is(header,.tools,.intro,#toast,#load-status,#build-loader,#home-pending),body.touch-drive.driving :is(.drive-stack,.mobile-dock,.bottom .sun-control){margin-top:var(--standalone-top)}

/* While driving the hint sits over the road and hood, so it is light with a soft shadow. */
body.driving .hint{color:#eef3ea;text-shadow:0 1px 2px #0f2522b3,0 0 10px #0f252299}

/* Online race (city-race-online.js): lobby and room in one dialog, the opponent line under the timer, the head-to-head result above the board. */
#race-online{width:min(520px,92vw);max-width:calc(100vw - 24px);max-height:calc(100dvh - 28px);overflow:auto;padding:30px 34px}
#race-online h2{margin:6px 0 10px;overflow-wrap:anywhere}
#race-online[hidden],#race-online-lobby[hidden],#race-online-room[hidden],.race-online-status[hidden],.race-online-hud[hidden],.race-online-summary[hidden],.race-online-step[hidden]{display:none!important}
#race-online .race-online-note{margin:0 0 4px;font-size:12px;line-height:1.7;color:var(--muted)}
#race-online .race-field{margin:10px 0 14px}
.race-online-list-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:8px}
#race-online-refresh{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#f8faf0;font-size:15px}
.race-online-rooms,.race-online-players{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.race-online-rooms{max-height:min(260px,36dvh);overflow:auto}
.race-online-rooms li,.race-online-players li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff9}
.race-online-rooms li>div{flex:1;min-width:0;display:grid;gap:2px}
.race-online-rooms li strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-online-rooms li span{font-size:11px;color:var(--muted)}
.race-online-rooms li button{flex:none;padding:7px 16px;border-radius:18px;background:var(--accent);font-size:12px}
.race-online-rooms li button:disabled{opacity:.45;cursor:default}
.race-online-rooms li.is-empty,.race-online-players li.is-empty{justify-content:center;font-size:12px;color:var(--muted);border-style:dashed;background:none}
.race-online-track{display:flex;align-items:center;gap:10px}
.race-online-track>div{flex:1;min-width:0;display:grid;gap:2px;text-align:center}
.race-online-track strong{font-size:16px}
.race-online-track span{font-size:11px;line-height:1.5;color:var(--muted)}
.race-online-step{flex:none;width:36px;height:44px;border-radius:10px;background:#173e3ccc;color:#f3f7eb;font-size:26px;line-height:1}
.race-online-step:disabled{opacity:.35;cursor:default}
#race-online-map{display:block;width:100%;height:auto;aspect-ratio:2/1;margin:10px 0;border-radius:12px;border:1px solid var(--line);background:#eef1e6}
.race-online-players li strong{font-size:14px}
.race-online-players li span{flex:1;font-size:11px;color:var(--muted)}
.race-online-players li em{font-style:normal;font-size:12px;padding:3px 10px;border-radius:12px;background:#173e3c14;color:var(--muted)}
.race-online-players li em[data-ready="true"]{background:#2fbf5526;color:#1f7a3a}
.race-online-players li.is-me{border-color:#c5b283;background:#d8c59833}
#race-online .race-online-status{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
#race-online .race-online-status[data-tone="error"]{color:#b2402c}
#race-online-go{background:var(--accent);border-color:transparent;position:relative;overflow:hidden;isolation:isolate}
#race-online-go:disabled{opacity:.6;cursor:default}
#race-online-go::before{content:"";position:absolute;inset:0;z-index:-1;background:#ba9a5a;transform:scaleX(var(--prepare,0));transform-origin:left center;transition:transform .2s linear;opacity:0}
#race-online-go.is-preparing::before{opacity:1}
#race-online-open{background:#173e3c;color:#f1f5e8;border-color:transparent}
.race-online-hud{position:fixed;z-index:1000;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);pointer-events:none;padding:5px 14px;border-radius:14px;background:#173e3cbb;color:#f4f8ee;font-size:12px;line-height:1.6;letter-spacing:.3px;white-space:pre-line;text-align:center;max-width:calc(100vw - 32px);width:max-content;text-shadow:0 1px 6px #142f2c;font-variant-numeric:tabular-nums}
.race-online-options{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 16px;font-size:12px;color:var(--muted)}
.race-online-options label{display:flex;align-items:center;gap:6px}
.race-online-options select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--paper,#f7f8f0);color:var(--ink)}
.race-online-options input{accent-color:#173e3c}
.race-online-sharing{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:12px;color:var(--muted)}
.race-online-sharing button{flex:none;border:1px solid var(--line);border-radius:18px;padding:7px 12px;background:#fff9;font-size:12px}
.race-online-invite-link{width:100%;box-sizing:border-box;margin-bottom:12px;padding:8px;border:1px solid var(--line);border-radius:8px;font-size:12px}
.race-online-watch{position:fixed;z-index:1004;top:calc(126px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:8px 18px;border-radius:20px;border:1px solid #e8f4d977;background:#173e3cee;color:#f7f8f0;font-size:12px;box-shadow:0 4px 16px #102e2833}
.race-online-watch[hidden],.race-online-invite-link[hidden]{display:none!important}
.race-online-summary .race-sector-row{font-size:11px}
#race-board{overflow:auto;overscroll-behavior:contain}
#race-board>*{flex-shrink:0}
body:has(#race-board:not([hidden])) .drive-touch,body.race-spectating .drive-touch{visibility:hidden;pointer-events:none}
@media(max-width:600px){.race-online-sharing{align-items:flex-start}.race-online-sharing span{line-height:1.5}.race-online-hud{font-size:11px}.race-online-options{gap:8px 12px}}
.race-online-summary{display:grid;gap:4px;justify-items:center;margin:0 0 12px;padding:10px 18px;border-radius:12px;background:#f7f8f0ee;color:var(--ink);box-shadow:0 12px 40px #173d3944;font-variant-numeric:tabular-nums;pointer-events:auto}
.race-online-summary strong{font-size:16px}
.race-online-summary span{font-size:13px;color:var(--muted)}
.race-online-summary span.is-me{color:var(--ink);font-weight:600}
body.night #race-online{background:var(--panel);color:var(--ink)}
body.night .race-online-rooms li,body.night .race-online-players li,body.night #race-online-refresh{background:var(--surface);border-color:var(--edge)}
body.night #race-online-map{background:#1d2b33}
body.night #race-online-go,body.night .race-online-rooms li button{background:var(--strong);color:var(--on-strong)}
body.night #race-online-open{background:var(--surface);color:var(--ink);border-color:var(--edge)}
body.night .race-online-summary{background:var(--panel)}
@media(max-width:520px){#race-online{padding:22px 16px}.race-online-hud{top:calc(40px + env(safe-area-inset-top))}}
#race-setup .race-actions{flex-wrap:wrap}
/* The opponent left mid-race: a card under the timer (driving goes on underneath it). */
.race-online-notice{position:fixed;z-index:1001;top:calc(92px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 24px));padding:12px 14px;border-radius:14px;background:#f7f8f0f2;color:var(--ink);box-shadow:0 12px 40px #173d3955;pointer-events:auto}
.race-online-notice[hidden]{display:none!important}
.race-online-notice p{margin:0 0 10px;font-size:13px;line-height:1.6}
.race-online-notice-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.race-online-notice-actions button{padding:7px 14px;border-radius:18px;border:1px solid var(--line);background:#fff;font-size:12px}
.race-online-notice-actions button.is-primary{background:var(--accent);border-color:transparent}
body.night .race-online-notice{background:var(--panel)}
body.night .race-online-notice-actions button{background:var(--surface);color:var(--ink);border-color:var(--edge)}
body.night .race-online-notice-actions button.is-primary{background:var(--strong);color:var(--on-strong)}
@media(max-width:520px){.race-online-notice{top:calc(70px + env(safe-area-inset-top))}}