*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#87968b;color:#f5f2e6;font-family:Arial,sans-serif}#scene, #scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 48%,#12222055)}header{position:absolute;left:30px;right:30px;top:27px;display:flex;justify-content:space-between;align-items:flex-start}.brand{font-size:30px;font-weight:950;letter-spacing:-1px;text-shadow:0 2px 10px #132a2355}.brand span{display:block;font:9px Arial;letter-spacing:3px;margin-top:6px}.topright{display:flex;gap:9px;align-items:center}.topright>span{font:12px monospace;margin-right:10px}button{cursor:pointer;border:0;font:700 11px Arial;background:#1b2c27e6;color:#f5f2e6;padding:12px 14px;border-radius:4px}button:hover{background:#354d40}#job{position:absolute;top:113px;left:30px;width:255px;padding:20px;background:#1a2b25ed;border-radius:7px;box-shadow:0 10px 35px #17292022}.eyebrow{font:9px Arial;letter-spacing:1.7px;color:#b9c4b6}#count{float:right;color:#e8c172}h2{font-size:19px;margin:14px 0 10px;letter-spacing:-.4px}#description{color:#bbc5bc;font-size:12px;line-height:1.6;margin:0 0 18px}.jobfoot{border-top:1px solid #ffffff20;padding-top:13px;display:flex;justify-content:space-between;font:12px monospace}.jobfoot b{color:#e9c480}#progress{height:3px;background:#ffffff15;margin-top:15px}#progress i{display:block;background:#e9c480;height:100%;width:0}#map{position:absolute;bottom:65px;left:30px;background:#1a2b25;border:5px solid #1a2b25;border-radius:8px;overflow:hidden;box-shadow:0 5px 30px #0002}#minimap{display:block;width:180px;height:180px}#map>div{display:flex;justify-content:space-between;font-size:8px;padding:8px 4px 3px;letter-spacing:1px}#dashboard{position:absolute;right:32px;bottom:72px;text-shadow:0 2px 10px #14251c66;width:165px}#cash{text-align:right;font:20px monospace;color:#e9cf9d}#cash small{font-size:12px}.speed{display:flex;align-items:center;justify-content:flex-end;gap:13px}.speed strong{font-size:76px;font-weight:900;letter-spacing:-5px}.speed span{font:9px monospace;line-height:2}.speed b{font-size:19px;color:#e9cf9d}.condition{display:flex;align-items:center;gap:10px;font:8px monospace;letter-spacing:2px}.condition>div{height:4px;background:#ffffff33;flex:1}.condition i{display:block;height:100%;background:#d8e1bb;width:100%}footer{position:absolute;left:30px;right:30px;bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:9px;text-shadow:0 1px 4px #000}footer a{color:#eee7d7;font-size:8px}kbd{font:9px monospace;margin:0 3px 0 7px;background:#1a2b25b0;padding:4px;border-radius:3px}#intro{position:absolute;inset:0;background:linear-gradient(90deg,#12251fe8,#12251f80 45%,#12251f00);display:flex;align-items:center;padding:7vw}#intro section{max-width:560px}#intro h1{font-size:clamp(40px,5vw,72px);letter-spacing:-3px;line-height:1.05;margin:25px 0}h1 em{font-style:normal;color:#e9c480}#intro p{font-size:17px;line-height:1.65;color:#d3d9cd}#start{background:#e9c480;color:#21352a;padding:20px 24px;width:290px;text-align:left;border-radius:4px;margin:12px 0 24px;letter-spacing:1px}#start span{float:right;font-size:18px}.help{font-size:11px;color:#d0d7cc;line-height:1.9}#intro small{display:block;font-size:9px;color:#9eafa3;margin-top:24px}#toast{position:absolute;left:50%;top:18%;transform:translateX(-50%);background:#1a2b25ed;border:1px solid #e9c48055;padding:15px 24px;border-radius:5px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none}#touch{display:none}@media(max-width:700px){header{top:18px;left:18px;right:18px}.brand{font-size:24px}.topright>span{display:none}#job{top:93px;left:18px;width:210px;padding:14px}#job h2{font-size:17px}#map{left:18px;bottom:110px}#minimap{width:125px;height:125px}#map>div{font-size:6px}#dashboard{right:20px;bottom:115px;width:130px}.speed strong{font-size:55px}footer>span{display:none}footer{left:18px;bottom:10px}#touch{position:absolute;bottom:40px;left:18px;right:18px;display:flex;gap:8px;justify-content:space-between}#touch button{height:48px;flex:1;touch-action:none;background:#1a2b25dc}#intro{padding:28px}#intro h1{letter-spacing:-2px}#toast{top:45%;width:75%;text-align:center}}

#citytour{position:absolute;left:30px;top:112px;background:#1a2b25ef;border-radius:7px;padding:20px;width:270px}#citytour[hidden]{display:none}#citytour p{font-size:12px;line-height:1.6;color:#c5d1c5}#citytour nav{display:flex;gap:5px}#citytour nav button{font-size:10px;padding:9px}#return{background:#e9c480;color:#243b30;width:100%;margin-top:14px}body.touring #job,body.touring #dashboard,body.touring #map{display:none}@media(max-width:700px){#citytour{top:93px;left:18px;width:240px}.topright{gap:4px}.topright button{padding:10px 8px;font-size:9px}}

.zoom-controls{position:fixed;right:30px;top:90px;display:flex;gap:6px;z-index:5}.zoom-controls button{width:38px;height:38px;border:1px solid #ffffff25;background:#20362ee8;color:#f7f1dd;border-radius:6px;font-size:22px;cursor:pointer}@media(max-width:700px){.zoom-controls{right:16px;top:72px}}

#citytour nav{flex-wrap:wrap}#citytour nav button{flex:1 0 20%}

#fullmap{position:fixed;inset:0;z-index:100;background:#13231de8;display:grid;place-items:center;padding:20px;overflow:auto}#fullmap[hidden]{display:none}.mapcard{max-width:850px;text-align:center}.maphead{display:flex;justify-content:space-between;align-items:center;text-align:left;margin-bottom:14px}.maphead h2{margin:4px 0;color:#f1e8d2}.maphead small{color:#adbeaa;letter-spacing:2px}.maphead button{background:#395249;color:#f5ead1;border:0;border-radius:6px;padding:12px;font-size:18px}#city-map-canvas{border:1px solid #cbd5b74d;border-radius:8px}.maplegend{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;max-width:740px;margin:14px auto;color:#dddcc6;font-size:12px}.mapcard p{font-size:11px;color:#adc0ac}.topright{gap:8px}@media(max-width:600px){.topright #clock{display:none}.topright button{padding:8px;font-size:10px}}

/* Keep city exploration available above the start/pause veil. */
header{z-index:6}footer{gap:8px;flex-wrap:wrap}footer a{white-space:nowrap}

body.touring #touch{display:none}

.fly-only{display:none}body.flying .fly-only{display:block}
#map-pick[hidden]{display:none!important}

/* The header spans the whole width (big Lip City logo) and used to swallow clicks meant for the zoom bar below it. */
header{pointer-events:none}header .topright,header .topright *{pointer-events:auto}
.zoom-controls{z-index:7;align-items:center}
.zoom-controls button{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;vertical-align:middle}
.zoom-controls button img{display:block;pointer-events:none}
#view-angle,#chase-view{width:auto!important;min-width:70px;padding:0 12px!important;font-size:12px!important;letter-spacing:.06em}
#altitude{line-height:38px}
.zoom-controls .turn{font-size:20px;font-family:Arial,sans-serif}
#map>div{gap:8px;align-items:center}

#chase-view.active{background:#39758c!important;border-color:#7fc3d8!important}

/* Free roam: the courier panel shows only while navigating to a place picked on the map. */
body.freeroam #job{display:none}body.freeroam.navigating #job{display:block;width:auto;padding:10px 14px}body.freeroam #job .eyebrow,body.freeroam #mission,body.freeroam #description,body.freeroam #reward,body.freeroam #progress{display:none}
body.freeroam #cash{visibility:hidden}

/* Altimeter under the speed while flying or under the canopy: height above sea level, above the ground, and the climb. */
.altimeter{display:none;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:9px;margin:-4px 0 10px}body.aloft .altimeter{display:flex}
.altimeter strong{font-size:34px;font-weight:900;letter-spacing:-2px}.altimeter span{font:9px monospace;line-height:1.7}.altimeter b{font-size:13px;color:#e9cf9d}
.altimeter em{flex-basis:100%;text-align:right;font:700 11px monospace;font-style:normal;color:#d8e1bb;letter-spacing:1px}.altimeter em.up{color:#9be08a}.altimeter em.down{color:#f0b46a}
@media(max-width:700px){.altimeter strong{font-size:26px}}