:root{--home-gold:#f6c666;--home-ink:#172623}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.home-panel{position:fixed;left:5.5vw;top:50%;transform:translateY(-45%);width:min(620px,49vw);padding:clamp(25px,3.4vw,48px);border:1.5px solid #ffe5a4;border-radius:30px;background:linear-gradient(120deg,#15221dd9,#28302b9e 65%,#8a662c58);backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 0 0 1px #ffdc9333,inset 0 0 23px #f3c26a18,0 0 20px #eabd6860,0 22px 70px #0006;isolation:isolate;animation:home-reveal .65s ease-out;max-height:calc(100dvh - 145px);overflow:auto}
.home-panel:before{content:'';position:absolute;right:-90px;top:-25px;width:350px;height:350px;border:1px solid #e8c67c22;border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 37px,#f4c8710c 38px 39px,transparent 40px 60px);transform:rotate(-28deg);z-index:-1;pointer-events:none}
.home-accent{width:46px;height:3px;background:#ffda8b;box-shadow:0 0 10px #f8bd66a0;margin-bottom:26px}
.home-panel h1{font-size:clamp(32px,4.15vw,60px);font-weight:900;line-height:1.01;letter-spacing:-2px;margin:0 0 16px;color:#fffdf7;text-shadow:0 2px 18px #0003}
.home-panel h1 span{color:var(--home-gold)}
.home-panel .home-subtitle{font-size:clamp(14px,1.6vw,21px);line-height:1.5;color:#f0eee6;margin:0 0 34px;letter-spacing:.1px}
.destination-field{display:flex;align-items:center;position:relative;height:65px;border:1px solid #ffe4ad;border-radius:13px;background:linear-gradient(120deg,#1724229c,#fff1d814);box-shadow:inset 0 0 12px #ffe0a31a,0 0 14px #ffd48c2b;transition:box-shadow .2s,background .2s}
.destination-field:focus-within{outline:2px solid #fff2cc;outline-offset:4px;box-shadow:0 0 22px #ffdc8b70}
.destination-field>svg{position:absolute;left:21px;width:22px;height:25px;fill:#fff;pointer-events:none}.destination-field>svg circle{fill:var(--home-ink)}
.destination-field .chevron{left:auto;right:20px;fill:none;stroke:#fff;stroke-width:2;width:21px}
#destination{appearance:none;width:100%;height:100%;border:0;background:transparent;color:#fff7e8;font:inherit;font-size:clamp(14px,1.5vw,19px);padding:0 47px 0 58px;cursor:pointer;outline:none;text-overflow:ellipsis}
#destination option{background:#23312c;color:#fff7e8;font-size:16px}
#intro #start{display:flex;align-items:center;justify-content:space-between;margin-top:25px;height:70px;padding:0 26px;border:1px solid #ffedb9;border-radius:13px;color:#172723;background:linear-gradient(125deg,#ffd985,#efb54f 55%,#ffe39a);box-shadow:inset 0 1px 5px #fff6,0 0 22px #f2c16b42;font-size:clamp(14px,1.6vw,21px);letter-spacing:.4px;transition:transform .2s,box-shadow .2s,filter .2s}
#intro #start svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
#intro #start:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 28px #ffd27280}
#intro #start:disabled{cursor:default;filter:saturate(.7);opacity:.78}
.home-note{font-size:11px;color:#e0d5be;text-align:center;letter-spacing:.5px;margin-top:18px;min-height:14px}
body[data-playing="false"] header{top:30px;left:3vw;right:3vw;z-index:2}
body[data-playing="false"] .brand{font-size:clamp(28px,3.3vw,46px);letter-spacing:-2px;line-height:1}
body[data-playing="false"] .brand small{font-size:clamp(8px,.95vw,13px);letter-spacing:3px;margin-top:13px}
body[data-playing="false"] .top{gap:12px}
body[data-playing="false"] .top button{border:1px solid #ffe3a2;border-radius:12px;padding:16px 18px;background:linear-gradient(130deg,#172523d9,#333b34be);box-shadow:inset 0 0 10px #ffd68915,0 0 10px #efc46c30;font-size:12px;font-weight:700;letter-spacing:.5px;backdrop-filter:blur(12px)}
body[data-playing="false"] #district,body[data-playing="false"] #quality,body[data-playing="false"] #touch,body[data-playing="false"] #rotatePrompt,body[data-playing="false"] #interact,body[data-playing="false"] #toast{display:none!important}
#journeyTransition{position:fixed;inset:0;background:#172623;opacity:0;pointer-events:none;z-index:8;transition:opacity .28s ease}
body.entering #journeyTransition{opacity:1;pointer-events:auto}
body.entering #intro{opacity:0;transition:opacity .25s ease}
@keyframes home-reveal{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:900px){.home-panel{width:min(570px,72vw);left:5vw;padding:30px;transform:translateY(-43%)}.home-panel h1{font-size:clamp(33px,5.5vw,50px)}body[data-playing="false"] .top{gap:6px}body[data-playing="false"] .top button{font-size:10px;padding:12px}body[data-playing="false"] .brand small{letter-spacing:1.7px}}
@media(max-width:600px) and (orientation:portrait){body[data-playing="false"] header{top:max(22px,env(safe-area-inset-top));left:22px;right:22px;display:block}body[data-playing="false"] .top{margin-top:24px;justify-content:space-between}body[data-playing="false"] .top button{padding:11px;font-size:9px;flex:1}.home-panel{left:20px;top:50%;width:calc(100% - 40px);max-height:calc(100dvh - 205px);padding:26px 23px;transform:translateY(-28%);border-radius:24px}.home-panel h1{font-size:clamp(29px,8vw,44px);letter-spacing:-1.2px}.home-panel .home-subtitle{font-size:14px;margin-bottom:25px}.home-accent{margin-bottom:21px}.destination-field{height:56px}#intro #start{height:58px;margin-top:19px;font-size:14px;padding:0 20px}.home-note{font-size:9px}.destination-field>svg{left:16px}#destination{padding-left:46px;font-size:14px}}
@media(max-height:600px) and (orientation:landscape){body[data-playing="false"] header{top:max(12px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right))}body[data-playing="false"] .brand{font-size:27px}body[data-playing="false"] .brand small{font-size:7px;margin-top:7px}body[data-playing="false"] .top button{font-size:9px;padding:10px}.home-panel{top:76px;left:max(28px,env(safe-area-inset-left));transform:none;width:min(470px,58vw);padding:21px 26px;max-height:calc(100dvh - 88px);border-radius:22px}.home-accent{margin-bottom:12px}.home-panel h1{font-size:32px;letter-spacing:-1px;margin-bottom:9px}.home-panel .home-subtitle{font-size:12px;margin-bottom:15px}.destination-field{height:44px}#destination{font-size:13px}#intro #start{height:47px;margin-top:13px;font-size:14px}.home-note{font-size:9px;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.home-panel{animation:none}#journeyTransition,#intro #start,.destination-field{transition:none}}

@media(max-width:600px) and (orientation:portrait){body[data-playing="false"] .top{gap:4px}body[data-playing="false"] .top button{padding:10px 5px;font-size:8px}}
@media(any-pointer:coarse){body[data-playing="true"] .top{gap:4px}body[data-playing="true"] .top button{padding:10px 6px;font-size:8px}}

.character-field{display:flex;gap:14px;align-items:center;margin-top:16px;color:#e7cca0;font-size:10px;letter-spacing:1px}.character-field select{flex:1;min-width:0;border:1px solid #ffe4ad80;border-radius:9px;background:#1b2a26;color:#fff2da;font:inherit;font-size:14px;padding:12px;letter-spacing:0}
#metroPrompt{position:fixed;left:50%;transform:translateX(-50%);bottom:168px;border:1px solid #f3d08c;background:#1b3731;color:#ffe2a3;padding:13px 20px;border-radius:9px;font-size:11px;font-weight:bold;z-index:5}
#metroPanel{position:fixed;z-index:15;top:50%;left:50%;transform:translate(-50%,-50%);width:min(480px,90vw);max-height:85dvh;overflow:auto;padding:25px;background:#182d28f5;border:1px solid #e8c27c;border-radius:20px;box-shadow:0 20px 90px #000a;backdrop-filter:blur(14px)}#metroPanel h2{font-size:20px;color:#ffdc95;margin:0}#metroDestinations{display:grid;grid-template-columns:1fr 1fr;gap:9px}#metroPanel button{border:1px solid #e3c07b70;background:#344a3f;border-radius:8px;padding:13px;font-size:11px}#metroClose{width:100%;margin-top:15px}
body[data-mode="transit"] #touch,body:has(#metroPanel:not(.hidden)) #touch,body[data-mode="transit"] #interact{display:none!important}
@media(any-pointer:coarse){#metroPrompt{bottom:146px;padding:10px;font-size:9px}.character-field{margin-top:10px}.character-field select{padding:8px;font-size:12px}}
@media(max-height:600px) and (orientation:landscape){.home-panel{padding-top:14px;padding-bottom:14px}.home-accent{margin-bottom:7px}.home-panel .home-subtitle{margin-bottom:10px}.home-panel h1{font-size:28px}.home-note{display:none}#intro #start{margin-top:10px;height:42px}.character-field{margin-top:8px}}

body[data-mode=transit] footer {display:none}

/* Compact destination menu and a small map that expands for route planning. */
.maptools button,#missions button{color:#fff1cf;background:#20372f;border:1px solid #d5b47988;border-radius:7px;font-weight:600}
#intro .destination-field{height:46px}#intro #start{height:48px;margin-top:12px}
.home-panel{width:min(390px,44vw);padding:22px;border-radius:20px}
.home-panel h1{font-size:clamp(24px,3vw,36px);line-height:1.06;margin:12px 0}
.home-panel .home-subtitle{font-size:13px;margin:10px 0 16px}
.home-panel .destination-field{min-height:44px;margin-bottom:12px}
.home-panel #start{min-height:46px;padding:12px;font-size:13px}
.home-panel .home-note{font-size:10px;margin-top:10px}
.home-panel .home-accent{margin-bottom:12px}
#mapbox:not(.expanded){width:150px;padding:9px}#mapbox canvas{display:block;width:100%;height:auto;cursor:crosshair}
#mapbox.expanded{width:min(440px,88vw,calc((90dvh - 95px)*1.1));max-height:90vh;overflow:auto;z-index:11}
.maptools{display:flex;justify-content:space-between;margin:4px 0}.maptools button{padding:5px 9px;min-width:30px;min-height:28px}
#mapbox:not(.expanded) #clearRoute{display:none}#routeStatus{font-size:10px;line-height:1.3;margin-top:5px}#mapbox .mapfoot{display:none}
@media(max-width:700px){.home-panel{width:calc(100% - 32px);max-width:360px;padding:18px}#mapbox:not(.expanded){width:108px;padding:6px}#mapbox:not(.expanded) .eyebrow{font-size:7px}#mapbox:not(.expanded) #checkpoint{display:none}#routeStatus{font-size:9px}}
@media(max-height:500px) and (orientation:landscape){.home-panel{width:min(330px,44vw);padding:14px}.home-panel h1{font-size:25px}.home-panel .home-subtitle{margin:6px 0 10px}.home-panel .home-accent,.home-panel .home-note{display:none}#mapbox:not(.expanded){width:108px}}

#missions{position:fixed;right:22px;top:90px;z-index:12;max-width:300px;color:#fff1cf}#missions[hidden],#missions [hidden]{display:none!important}#missionToggle{float:right;padding:9px 14px}#missionBoard{clear:both;background:#182c27ed;border:1px solid #d2ae66;border-radius:14px;padding:16px;max-height:60vh;overflow:auto}#missionBoard h2{font-size:18px;margin:0 0 7px}#missionBalance{font-size:11px;margin-bottom:10px}.job{display:block;width:100%;text-align:left;padding:12px;margin:5px 0}#missionObjective{clear:both;display:flex;gap:8px;align-items:center;background:#182c27ed;border-left:3px solid #f1bd73;padding:10px;font-size:12px;max-width:280px}#missionObjective button{padding:8px}@media(max-height:500px){#missions{top:58px;right:12px;max-width:230px}#missionObjective{font-size:10px;padding:6px}#missionBoard{padding:10px;max-height:60vh}.job{padding:8px}}

body[data-playing="false"] #gameOptions,body[data-playing="false"] #insideCamera{display:none!important}
#insideCamera[hidden],#drivingOptions[hidden]{display:none!important}#drivingOptions{position:fixed;z-index:30;right:18px;top:80px;width:min(320px,90vw);max-height:75dvh;overflow:auto;padding:20px;background:#162c26f5;border:1px solid #d5b479;border-radius:14px;color:#fff1cf;box-shadow:0 12px 50px #0006}#drivingOptions h2{font-size:18px;margin:0 0 20px}#drivingOptions label{display:block;font-size:13px;margin:16px 0 8px}#drivingOptions input,#drivingOptions select{width:100%;accent-color:#efbe77}#drivingOptions small{display:block;font-size:10px;margin-top:8px;color:#c3cfc7}#drivingOptions button,#drivingOptions select{background:#294338;color:#fff1cf;border:1px solid #d5b47988;border-radius:6px;padding:10px;font-size:11px}#drivingOptions>div{display:flex;gap:8px;margin-top:15px}#closeOptions{float:right}#sensitivityValue{float:right;color:#efbe77}@media(max-height:500px){#drivingOptions{top:55px;padding:12px;max-height:80dvh}.top{gap:4px}.top button{padding:8px 6px;font-size:8px}}

body[data-playing=true] header .top{max-width:calc(100vw - 250px);flex-wrap:wrap;justify-content:flex-end}body[data-playing=true] header .top button{white-space:nowrap}@media(max-width:900px){body[data-playing=true] header .top{max-width:calc(100vw - 190px)}}
body[data-playing="false"] .home-panel{overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:thin;width:min(390px,44vw);max-width:calc(100vw - 32px);max-height:calc(100dvh - 130px);height:auto;min-width:0;z-index:3}
body[data-playing="false"] .home-panel::-webkit-scrollbar{display:none}
#fpsReadout{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:10;padding:5px 9px;border:1px solid #98ffe677;border-radius:8px;background:#071a1ddd;color:#a5ffe0;font:600 11px ui-monospace,monospace;pointer-events:none}
@media(max-width:600px) and (orientation:portrait){body[data-playing="false"] .home-panel{width:calc(100vw - 32px);max-width:390px;max-height:calc(100dvh - 205px);padding:18px}body[data-playing="false"] .home-panel h1{font-size:clamp(25px,7.3vw,36px);margin:9px 0}body[data-playing="false"] .home-panel .home-subtitle{margin:7px 0 12px}body[data-playing="false"] .home-accent{margin-bottom:10px}body[data-playing="false"] .destination-field{height:44px}body[data-playing="false"] #intro #start{height:46px;margin-top:10px}}

/* A bounded phone menu keeps every field and action inside the visible screen. */
@media(any-pointer:coarse),(max-width:700px),(max-height:500px){
 body[data-playing="false"] .home-panel{top:90px;bottom:max(10px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto;max-width:none;max-height:none;transform:none;padding:16px;border-radius:16px;background:#172623ed}
 body[data-playing="false"] header{top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px}
 body[data-playing="false"] .top{margin:0;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:62%}
 body[data-playing="false"] .top button{min-height:36px;padding:8px;font-size:9px;flex:none}
 body[data-playing="false"] .brand{font-size:22px}body[data-playing="false"] .brand small{font-size:6px;letter-spacing:1px;margin-top:6px}
 body[data-playing="false"] .home-panel h1{font-size:26px;margin:6px 0}
 body[data-playing="false"] .home-subtitle{margin:6px 0 12px;font-size:12px}
 body[data-playing="false"] .home-accent{display:none}
 body[data-playing="false"] .home-note{display:block;font-size:10px;line-height:1.5}
 .character-field select,#destination{font-size:16px;min-height:44px}
 #intro #start{min-height:48px}#homeFullscreen{min-height:44px;width:100%;margin-top:10px;border:1px solid #e8bf7a;border-radius:9px;background:#294338;color:#fff1cf}
 #homeScreenHint{font-size:11px;line-height:1.4;margin:8px 0 0;color:#e0d5be}
 body[data-playing="false"] #fpsReadout{display:none}
}
@media(max-width:450px){
 body[data-playing="false"] header{display:grid;grid-template-columns:1fr;gap:6px}
 body[data-playing="false"] .brand small{display:none}
 body[data-playing="false"] .top{max-width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;touch-action:pan-x;scrollbar-width:none;pointer-events:auto}
 body[data-playing="false"] .top button{flex-shrink:0}
}
@media(min-width:701px) and (min-height:501px) and (pointer:fine){#homeFullscreen,#homeScreenHint{display:none}}
.job small{display:block;margin-top:6px;font-size:10px;line-height:1.45;opacity:.8;font-weight:400}
#nightMode[aria-pressed=true]{border-color:#ffdb93;box-shadow:0 0 16px #ffd07880,inset 0 0 12px #ffd07830;color:#ffe5ad}
#metroPanel #metroDestinations button.selected{border-color:#ffd27d;background:#5d5437;box-shadow:0 0 12px #ffcf7540}
#metroTicketStatus{margin:12px 0;color:#ffe5b4;font-size:12px}
#metroPanel #metroTravel{width:100%;margin-top:4px;border-color:#ffdb93;background:linear-gradient(120deg,#ffd985,#efb54f);color:#172723;font-weight:800}
#metroPanel #metroTravel:disabled{opacity:.48}
#metroPanel #metroClose{width:100%;margin-top:9px}