:root{
  --green:#00b14f;
  --green-deep:#009445;
  --charcoal:#1b1f24;
  --panel:#202425;
  --panel-2:#262b2d;
  --chrome:#b9bdc0;
  --cream:#f3e7d3;
  --cream-2:#efe5d8;
  --amber:#f2a03d;
  --red:#ce1126;
  --ink:#1d2226;
  --muted:#6f797e;
  --white:#ffffff;
  --display:'Chakra Petch',system-ui,sans-serif;
  --text:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --shadow:0 18px 50px rgba(6,12,14,.35);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:#10161a;
  color:var(--white);
  font-family:var(--text);
  font-weight:400;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit}
img{display:block}
.hidden{display:none!important}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;background:#9fb8c8;transition:filter .35s ease,transform .35s ease}
body.menu-mode #world{filter:blur(4px) brightness(.72) saturate(.95);transform:scale(1.025)}
#weather-wash{position:fixed;inset:0;pointer-events:none;z-index:1;background:transparent;transition:background 1.4s ease,opacity 1.4s ease;mix-blend-mode:multiply}
#rainLayer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0;transition:opacity .8s ease}
#world-wash{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,12,14,.74) 0%,rgba(7,12,14,.55) 34%,rgba(7,12,14,.14) 62%,rgba(7,12,14,.4) 100%),linear-gradient(0deg,rgba(7,12,14,.72) 0%,rgba(7,12,14,0) 32%,rgba(7,12,14,0) 72%,rgba(7,12,14,.26) 100%);opacity:0;transition:opacity .55s ease}
body.menu-mode #world-wash{opacity:1}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 54%,rgba(4,9,11,.42) 100%);mix-blend-mode:multiply}
.screen{position:fixed;inset:0;pointer-events:none}
#menu{pointer-events:auto;overflow:auto;scrollbar-width:none}
#menu::-webkit-scrollbar{display:none}
#hud{pointer-events:none}

.boot{background:radial-gradient(90% 80% at 50% 40%,#233039 0%,#0c1216 75%);display:flex;align-items:center;justify-content:center;z-index:40;pointer-events:auto;transition:opacity .5s ease}
.boot-card{width:min(92vw,430px);display:flex;flex-direction:column;align-items:center;gap:12px}
.boot-badge{width:74px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.35))}
.boot-title{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.01em;color:var(--green)}
.boot-title span{color:#f3f4f5}
.boot-note{font-family:var(--text);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#aeb9bd}
.boot-track{width:100%;height:3px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;margin-top:8px}
.boot-track i{display:block;height:100%;width:0%;background:var(--green);transition:width .3s ease}
.boot-sub{font-size:12px;color:#88969c}

.menu-scrim{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,11,13,.28) 0%,rgba(6,11,13,.05) 38%,rgba(6,11,13,.5) 100%)}
.menu-head{position:absolute;left:34px;right:34px;top:26px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;z-index:2}
.brand-lockup{display:flex;align-items:center;gap:14px;min-width:0}
.brand-badge{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.brand-title{width:min(482px,42vw);height:auto;object-fit:contain;filter:drop-shadow(0 0 7px rgba(255,255,255,.5)) drop-shadow(0 0 18px rgba(255,255,255,.22))}
.head-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.city-short{display:none}
.city-switch{background:var(--white);color:var(--ink);border-radius:13px;padding:8px 9px 8px 12px;display:flex;align-items:center;gap:7px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.city-kicker{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8b9599;margin-right:2px}
.city-option{border:0;background:transparent;display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;cursor:pointer;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.02em;color:#2a3033;transition:background .18s ease,color .18s ease}
.city-option.live{background:#eaf8ef;color:#087a3c}
.city-option.locked{color:#8a9296}
.city-option.locked .lock{width:13px;height:13px;color:#9aa2a5}
.city-option .tick{width:14px;height:14px}
.city-option:not(.live) .tick{display:none}
.city-option:not(.live) .city-dot{background:#bcc3c6;box-shadow:none}
.city-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(0,177,79,.15)}
.city-option:hover{background:#f1f4f3}
.city-option.live:hover{background:#e2f5ea}
.icon-btn{border:0;width:42px;height:42px;border-radius:11px;background:rgba(20,25,28,.82);display:grid;place-items:center;cursor:pointer;color:#e8ecec;box-shadow:0 10px 30px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.1);transition:background .18s ease,transform .18s ease}
.icon-btn:hover{background:rgba(31,38,41,.92);transform:translateY(-1px)}
.icon-btn svg{width:20px;height:20px}
.snd-off{display:none}
body.is-muted .snd-on{display:none}
.snd-off{display:none}
body.is-muted .snd-off{display:block}

.segments{position:absolute;left:34px;right:34px;top:116px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;z-index:2}
.seg{position:relative;height:46px;border:0;background:transparent;cursor:pointer;padding:0;min-width:0;filter:drop-shadow(0 5px 10px rgba(0,0,0,.08));transition:transform .16s ease,opacity .18s ease}
.seg:hover{transform:translateY(-2px)}
.seg img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:99px}
.seg-wash{position:absolute;left:5%;right:5%;top:16%;bottom:16%;border-radius:8px;background:#f8f8f8;z-index:1}
.seg-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;z-index:2;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.01em;color:#252b2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px}
.seg.active .seg-wash{background:var(--green)}
.seg.active .seg-label{color:#fff}
.seg.active{filter:drop-shadow(0 7px 16px rgba(0,177,79,.25))}
.seg.locked{opacity:.82}
.seg.locked .seg-wash{background:#7f8789}
.seg.locked .seg-label{color:#eef0ef}
.seg.locked:hover{opacity:1}
.seg .mini-lock{width:11px;height:11px;flex-shrink:0}
.seg-soon{display:none}

.menu-main{position:absolute;left:34px;right:34px;top:184px;bottom:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(318px,368px);gap:22px;z-index:2;align-items:start}
.left-stack{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.column-kicker{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.62);padding-left:2px}
.cards-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.vehicle-card{position:relative;height:176px;border-radius:14px;background:var(--white);color:var(--ink);border:2px solid transparent;padding:0;overflow:hidden;cursor:pointer;text-align:left;box-shadow:0 16px 40px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.vehicle-card:hover{transform:translateY(-3px);box-shadow:0 22px 52px rgba(0,0,0,.26)}
.vehicle-card.selected{border-color:var(--green)}
.vehicle-card.selected::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,177,79,.28);pointer-events:none}
.card-art{height:124px;width:100%;display:flex;align-items:center;justify-content:center;padding:10px 12px 2px;background:#fff;overflow:hidden}
.card-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.card-meta{position:absolute;left:0;right:0;bottom:0;height:52px;background:#fff;padding:0 13px 9px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;border-top:1px solid rgba(20,30,34,.06)}
.card-name{font-family:var(--display);font-weight:700;font-size:14px;line-height:1.05;letter-spacing:-.005em;color:#1c2225;display:block}
.card-sub{display:block;font-size:10px;color:#7b8589;margin-top:3px;letter-spacing:.01em}
.card-tick{width:25px;height:25px;border-radius:50%;background:#e8eef0;color:#9aa4a7;display:grid;place-items:center;flex-shrink:0;transition:background .18s ease,color .18s ease}
.card-tick svg{width:13px;height:13px}
.vehicle-card.selected .card-tick{background:var(--green);color:#fff}
.card-pill{position:absolute;top:9px;left:10px;background:rgba(20,26,29,.08);color:#465054;border-radius:99px;padding:4px 7px;font-family:var(--display);font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.vehicle-card.selected .card-pill{background:rgba(0,177,79,.12);color:#098043}

.services{display:flex;gap:8px;align-items:stretch;margin-top:2px}
.service{border:0;display:flex;align-items:center;gap:8px;background:rgba(20,26,29,.66);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:7px 11px 7px 8px;color:#eef2f2;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.01em;cursor:default;text-align:left}
.service img{width:26px;height:26px;object-fit:contain;filter:brightness(1.35) saturate(.8)}
.service.live{background:rgba(0,177,79,.16);border-color:rgba(0,177,79,.34);color:#dff8e9}
.service.soon{cursor:pointer;opacity:.78}
.service.soon:hover{opacity:1}
.service small{font-family:var(--text);font-weight:600;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#aab4b7;margin-left:2px}
.spot-line{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 2px 0;color:rgba(255,255,255,.48);font-size:10px;letter-spacing:.02em}
.spot-line i{display:block;width:26px;height:1px;background:rgba(255,255,255,.25)}

.start-column{display:flex;flex-direction:column;gap:10px;min-width:0}
.selected-card{background:var(--white);color:var(--ink);border-radius:14px;padding:14px 16px 13px;box-shadow:0 18px 46px rgba(0,0,0,.24)}
.selected-kicker{font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#8b969a}
.selected-name{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.05;letter-spacing:-.015em;color:#1a2023;margin-top:5px}
.selected-meta{font-size:11px;color:#748085;margin-top:4px}
.selected-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;border-top:1px solid rgba(20,30,34,.08);padding-top:10px}
.selected-stats b{display:block;font-family:var(--mono);font-size:16px;font-weight:500;color:#1c2326;line-height:1}
.selected-stats span{display:block;font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:#8e989b;margin-top:4px}
.start-btn{width:100%;height:58px;border:0;border-radius:13px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;cursor:pointer;box-shadow:0 16px 34px rgba(0,177,79,.27);transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.start-btn:hover{background:var(--green-deep);transform:translateY(-1px);box-shadow:0 20px 40px rgba(0,177,79,.33)}
.start-btn:active{transform:translateY(0)}
.start-label{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.start-key{font-family:var(--mono);font-size:10px;letter-spacing:.07em;opacity:.72;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:4px 8px}
.start-btn.small{height:48px;justify-content:center;padding:0 22px;width:auto;min-width:150px}
.route-pick{background:rgba(20,26,29,.68);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 13px}
.route-kicker{font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.route-name{font-family:var(--display);font-weight:600;font-size:14px;color:#f2f5f5;margin-top:4px}
.route-sub{font-size:10px;color:rgba(255,255,255,.55);margin-top:3px;line-height:1.35}
.weather-pick{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09)}
.weather-kicker{font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.weather-options{display:flex;flex-wrap:wrap;gap:5px}
.weather-opt{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.78);border-radius:7px;padding:5px 9px;font-family:var(--display);font-size:10px;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.weather-opt:hover{background:rgba(255,255,255,.12)}
.weather-opt.active{background:var(--green);border-color:var(--green);color:#fff}
.clock-chip{display:flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(16,21,24,.86);border:1px solid rgba(255,255,255,.16);font-family:var(--mono);font-size:10px;color:#eef2f2;letter-spacing:.04em}
.weather-chip{pointer-events:auto;cursor:pointer}
.control-hint{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:4px 2px 0;color:rgba(255,255,255,.66);font-size:10px}
.control-hint div{display:flex;align-items:center;gap:6px;min-width:0}
kbd{display:inline-grid;place-items:center;min-width:20px;height:19px;padding:0 5px;border-radius:4px;border:1px solid rgba(255,255,255,.23);background:rgba(255,255,255,.07);color:#e9eeee;font-family:var(--mono);font-size:9px;line-height:1;flex-shrink:0}
.control-hint span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.music-host{position:relative;width:100%;aspect-ratio:1024/355;filter:drop-shadow(0 18px 40px rgba(0,0,0,.28));pointer-events:auto}
#menu .music-host{margin-top:auto;z-index:3}
.menu-foot{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:8px;letter-spacing:.05em;color:rgba(255,255,255,.38);width:100%;margin-top:2px}
.music-host.compact{position:absolute;left:18px;top:62px;width:260px;z-index:4;filter:drop-shadow(0 12px 28px rgba(0,0,0,.35))}
.mp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:10px}
.mp-vinyl-cover{position:absolute;left:3.4%;top:7.2%;width:30.2%;aspect-ratio:1;background:#2a282b;border-radius:50%}
.mp-vinyl{position:absolute;left:3.9%;top:8.2%;width:29.2%;aspect-ratio:1;border-radius:50%;object-fit:cover;cursor:pointer;transition:transform .2s ease}
.mp-vinyl.spinning{animation:spin 4.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mp-name-cover{position:absolute;left:35.8%;top:12.6%;width:36.2%;height:14.2%;background:var(--cream-2);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 8px;z-index:3;overflow:hidden}
.mp-name{display:block;font-family:var(--display);font-weight:600;font-size:14px;color:#24292b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.05;max-width:100%}
.mp-artist{display:block;font-family:var(--text);font-weight:600;font-size:8px;letter-spacing:.02em;color:#727b7c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-top:2px;max-width:100%}
.music-host.compact .mp-name{font-size:11px}
.music-host.compact .mp-artist{display:none}
.mp-progress-cover{position:absolute;left:34.9%;top:31%;width:58.1%;height:7%;background:#24262a;border-radius:99px;overflow:hidden}
.mp-progress{display:block;height:100%;width:0%;background:var(--green);border-radius:99px;transition:width .25s linear}
.mp-eq-cover{position:absolute;left:37.2%;top:48.8%;width:57.2%;height:36.2%;background:#29272a;border-radius:3px}
.mp-eq{position:absolute;left:37.8%;right:4.4%;top:48.8%;height:36.2%;display:flex;align-items:flex-end;gap:4.35%}
.mp-bar{flex:1;min-width:0;border-radius:1px;height:40%;background:var(--green);transition:height .09s linear}
.mp-bar.amber{background:var(--amber)}
.mp-transport{position:absolute;right:2%;top:9%;display:flex;align-items:center;gap:2%;width:26%;justify-content:flex-end}
.mp-transport button{border:0;background:transparent;color:#d7dddd;cursor:pointer;padding:4px;display:grid;place-items:center;border-radius:50%;opacity:.72;transition:opacity .16s ease,background .16s ease}
.mp-transport button:hover{opacity:1;background:rgba(255,255,255,.07)}
.mp-transport svg{width:14px;height:14px}
.music-host.compact .mp-transport button.edge{display:none}
.music-host.compact .mp-transport{width:20%;right:3%}
.mp-play .i-pause{display:none}
.mp-play.playing .i-play{display:none}
.mp-play.playing .i-pause{display:block}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:rgba(20,26,29,.94);border:1px solid rgba(255,255,255,.12);color:#f1f4f4;border-radius:10px;padding:11px 16px;font-size:12px;letter-spacing:.01em;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:60;box-shadow:0 16px 38px rgba(0,0,0,.3);max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

.hud-brand{position:absolute;left:18px;top:16px;width:38px;height:38px;z-index:3;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));pointer-events:none}
.hud-brand img{width:100%;height:100%;object-fit:contain}
.breadcrumb{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(18,23,26,.66);border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:6px 13px 6px 8px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.02em;color:#eef2f2;white-space:nowrap;z-index:3}
.breadcrumb img{width:19px;height:19px;object-fit:contain}
.breadcrumb i{display:block;width:1px;height:13px;background:rgba(255,255,255,.2)}
.breadcrumb span:last-child{color:rgba(255,255,255,.55);font-weight:400}

.minimap-wrap{position:absolute;right:18px;top:16px;display:flex;align-items:flex-start;gap:8px;z-index:3;pointer-events:none}
.minimap{position:relative;width:190px;aspect-ratio:906/898;filter:drop-shadow(0 12px 26px rgba(0,0,0,.32))}
.map-glass{position:absolute;left:6.95%;top:7%;width:86.1%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#171b1d;z-index:1}
.map-glass canvas{width:100%;height:100%;display:block}
.map-ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}
.map-heading{position:absolute;left:50%;bottom:7.5%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#cdd5d5;background:rgba(16,20,22,.55);border-radius:99px;padding:2px 7px;z-index:3;white-space:nowrap}
.conditions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:132px}
.weather-chip{display:flex;align-items:center;gap:4px;background:rgba(18,23,26,.72);border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:4px 9px 4px 4px;font-family:var(--mono);font-size:10px;color:#e9eeee}
.weather-chip img{width:24px;height:17px;object-fit:contain}
.limit-chip img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}

.job-slot{position:absolute;left:18px;bottom:150px;width:230px;z-index:3;pointer-events:none}
.job-empty{background:rgba(18,23,26,.76);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 28px rgba(0,0,0,.2)}
.job-icons{display:flex;opacity:.62}
.job-icons img{width:25px;height:25px;object-fit:contain;margin-right:-7px;filter:brightness(1.25)}
.job-copy b{display:block;font-family:var(--display);font-size:12px;font-weight:600;color:#eef2f2;letter-spacing:.01em}
.job-copy span{display:block;font-size:9px;color:rgba(255,255,255,.5);margin-top:2px}

.job-strip{position:absolute;left:50%;top:56px;transform:translateX(-50%);display:none;align-items:center;gap:8px;padding:6px 10px 6px 7px;background:rgba(16,21,24,.9);border:1px solid rgba(255,255,255,.14);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.24);z-index:5;pointer-events:none;font-family:var(--display);font-size:11px;color:#eef2f2;max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-strip img{width:22px;height:22px;object-fit:contain}
.job-strip b{font-family:var(--mono);font-weight:500;color:#4be08a;font-size:12px}
.job-strip kbd{font-family:var(--display);font-size:9px;border:1px solid rgba(255,255,255,.24);border-radius:4px;padding:1px 5px;color:rgba(255,255,255,.7)}
.job-strip.show{display:flex}
.trip-plate{position:absolute;left:18px;bottom:88px;width:282px;aspect-ratio:704/151;z-index:3;filter:drop-shadow(0 10px 22px rgba(0,0,0,.26));pointer-events:none}
.trip-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}

.trip-val,.earn-val{position:absolute;top:31%;height:38%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;font-size:18px;color:#f0f3f3;letter-spacing:0;background:var(--panel);border-radius:2px;padding:0 2px;white-space:nowrap}

.trip-val{left:21%;width:17.5%}
.earn-val{left:68.2%;width:27.8%;font-size:14px}
.trip-val small,.earn-val small{font-size:.6em;opacity:.6;margin-right:2px}

.cluster::before{content:'';position:absolute;left:-2.5%;right:-2.5%;top:-2.5%;bottom:-2.5%;border-radius:20px 20px 0 0;background:linear-gradient(180deg,rgba(32,36,37,.98) 0%,rgba(18,21,22,.98) 64%,rgba(12,15,16,.99) 100%);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 22px 50px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);z-index:-1}

.cluster{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:grid;grid-template-columns:1fr .455fr 1fr;gap:8px;align-items:end;width:min(540px,42vw);z-index:3;filter:drop-shadow(0 20px 42px rgba(0,0,0,.38));pointer-events:none;container-type:inline-size}
.dial{position:relative;width:100%;aspect-ratio:456/466;user-select:none}
.dial-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.needle{position:absolute;left:50%;bottom:50%;width:1.05%;height:39%;transform-origin:50% 100%;transform:translateX(-50%) rotate(-135deg);border-radius:99px;z-index:3}
.needle.green{background:linear-gradient(180deg,#1ad06b 0%,#00b14f 60%,#008a3e 100%);box-shadow:0 0 7px rgba(0,205,107,.38)}
.needle.amber{background:linear-gradient(180deg,#ffc36d 0%,#f2a03d 58%,#c4781c 100%);box-shadow:0 0 7px rgba(255,170,71,.34)}
.dial-hub{position:absolute;left:50%;top:50%;width:13.2%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:4;background:radial-gradient(circle at 38% 32%,#eef0ef 0%,#b7bbbb 18%,#6d7374 42%,#2b2f30 72%,#151718 100%);box-shadow:0 0 0 9px rgba(16,18,19,.62),0 1px 2px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.22)}
.dial-glass{position:absolute;inset:5.2%;border-radius:50%;z-index:5;pointer-events:none;background:radial-gradient(62% 46% at 29% 19%,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 38%,rgba(255,255,255,0) 66%),linear-gradient(128deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 36%,rgba(255,255,255,.05) 64%,rgba(255,255,255,0) 100%);mix-blend-mode:screen}
.dial-readout{position:absolute;left:50%;top:64%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:6;pointer-events:none}
.dial-readout .kmh{font-family:var(--mono);font-size:clamp(10px,3.4cqw,26px);font-weight:500;line-height:1;color:#f4f6f6;text-shadow:0 2px 8px rgba(0,0,0,.65)}
.dial-readout .unit{font-family:var(--display);font-size:clamp(4px,1.05cqw,8px);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52);margin-top:4px}
.dial-readout.tach .kmh{font-size:clamp(8px,2.5cqw,19px);color:#e9eeee}
.dial-readout.tach .unit{font-size:clamp(3px,.9cqw,7px)}
.gearplate{position:relative;width:100%;aspect-ratio:198/401;align-self:end;margin-bottom:2px}
.mode-badge{position:absolute;left:10%;top:0.8%;width:80%;height:7.4%;display:flex;align-items:center;justify-content:center;border-radius:2px;background:rgba(0,177,79,.2);color:#4be08a;font-family:var(--display);font-weight:700;font-size:clamp(5px,1.75cqw,11px);letter-spacing:.06em;z-index:3;box-shadow:inset 0 0 0 1px rgba(75,224,138,.28)}
.mode-badge.manual{background:rgba(242,160,61,.2);color:#ffc36d;box-shadow:inset 0 0 0 1px rgba(255,195,109,.3)}
.gear-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gear-cell,.mode-cell{position:absolute;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1f2324,#222728);box-shadow:0 0 4px 4px #202425;font-family:var(--display);font-weight:600;color:#e9eeee;border-radius:2px;z-index:2;line-height:1}
.g-d{left:32%;top:8%;width:36%;height:17%;font-size:clamp(9px,3.05cqw,23px)}
.g-n{left:34%;top:26%;width:32%;height:17%;font-size:clamp(9px,3.05cqw,23px)}
.g-r{left:34%;top:44%;width:32%;height:17%;font-size:clamp(9px,3.05cqw,23px)}
.m-a{left:24%;top:76.2%;width:52%;height:8.1%;font-size:clamp(3px,1cqw,8px);letter-spacing:.04em}
.m-m{left:20%;top:85.5%;width:60%;height:8%;font-size:clamp(3px,1cqw,8px);letter-spacing:.04em}
.gear-cell.on{color:var(--green)}
.gear-cell.rev.on{color:#ff5f5f}
.mode-cell.on{color:var(--green)}
.gear-num{position:absolute;left:50%;top:66.8%;transform:translateX(-50%);font-family:var(--mono);font-size:clamp(5px,1.5cqw,11px);color:var(--amber);z-index:3;min-width:14px;text-align:center}
.chase-hud{position:absolute;left:18px;bottom:18px;width:292px;height:66px;display:none;align-items:center;gap:14px;padding:9px 14px;background:linear-gradient(180deg,rgba(32,36,37,.98),rgba(16,19,20,.98));border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07);z-index:4;pointer-events:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}
.chase-speed{display:flex;align-items:baseline;gap:5px;min-width:78px}
.chase-speed b{font-family:var(--mono);font-size:30px;line-height:1;font-weight:500;color:#f4f6f6}
.chase-speed span{font-family:var(--display);font-size:7px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.chase-gear{display:flex;flex-direction:column;align-items:center;gap:2px;border-left:1px solid rgba(255,255,255,.14);padding-left:12px;min-width:42px}
.chase-gear b{font-family:var(--display);font-size:18px;font-weight:700;color:var(--green);line-height:1}
.chase-gear span{font-family:var(--display);font-size:7px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.chase-tach{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;align-self:flex-end;margin-bottom:4px}
.chase-tach i{display:block;height:100%;width:10%;background:linear-gradient(90deg,var(--green),var(--amber));border-radius:99px;transition:width .1s linear}
body.chase-view .chase-hud{display:none}
@media (pointer:coarse){.chase-hud{width:230px;height:56px;left:10px;bottom:80px}.chase-speed b{font-size:22px}}
.fuel-gauge{position:absolute;left:310px;right:auto;bottom:88px;width:74px;aspect-ratio:1;z-index:3;filter:drop-shadow(0 8px 18px rgba(0,0,0,.24));pointer-events:none}
.fuel-gauge img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

.hud-buttons{position:absolute;right:18px;bottom:92px;display:flex;flex-direction:column;align-items:flex-end;gap:7px;z-index:5;pointer-events:none}
.hud-btn{pointer-events:auto;border:1px solid rgba(255,255,255,.12);background:rgba(18,23,26,.78);color:#eef2f2;border-radius:10px;min-width:42px;height:38px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;cursor:pointer;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.02em;box-shadow:0 10px 24px rgba(0,0,0,.2);transition:background .16s ease,transform .16s ease}
.hud-btn:hover{background:rgba(30,37,40,.92);transform:translateY(-1px)}
.hud-btn img{width:23px;height:19px;object-fit:contain;filter:brightness(1.15)}
.hud-btn svg{width:18px;height:18px}
.hud-btn.text-btn{font-family:var(--display);font-size:13px;font-weight:700}
#cameraLabel{font-size:9px;color:rgba(255,255,255,.62);font-weight:400}
.touch-controls{display:none}

.pause{background:rgba(6,11,13,.64);display:flex;align-items:center;justify-content:center;z-index:30;pointer-events:auto}
.pause-panel{width:min(92vw,620px);background:rgba(18,23,26,.97);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px 26px 20px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pause-kicker{font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.pause-panel h2{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.02em;margin:3px 0 16px}
.pause-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);padding:12px 0}
.pause-grid b{display:block;font-family:var(--mono);font-size:17px;font-weight:500;color:#f1f4f4}
.pause-grid span{display:block;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:4px}
.pause-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 0 8px}
.control-group{display:flex;flex-direction:column;gap:7px}
.group-title{font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:2px}
.control-group div{display:flex;align-items:center;gap:7px;font-size:11px;color:rgba(255,255,255,.7)}
.pause-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.ghost-btn{border:1px solid rgba(255,255,255,.16);background:transparent;color:#e9eeee;border-radius:11px;height:44px;padding:0 16px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.ghost-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26)}
.pause-note{font-size:10px;color:rgba(255,255,255,.4);margin-top:14px;line-height:1.4}

@media (max-width:1180px){
  .brand-title{width:370px}
  .menu-main{grid-template-columns:minmax(0,1fr) 318px;gap:16px}
  .cluster{width:min(560px,54vw)}
  .trip-plate{width:250px}
  .job-slot{width:210px}
  .fuel-gauge{left:278px;width:60px}
  .music-host.compact{width:200px}
}
@media (max-width:960px){
  #menu{overflow-y:auto;padding-bottom:18px}
  .menu-head{left:18px;right:18px;top:16px}
  .brand-badge{width:54px;height:54px}
  .brand-title{width:min(300px,52vw)}
  .city-switch{padding:6px;gap:4px}
  .city-kicker{display:none}
  .city-option{font-size:10px;padding:5px 6px}
  .city-name{display:none}
  .city-option.live .city-name{display:inline}
  .segments{left:18px;right:18px;top:84px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .seg{height:40px}
  .seg-label{font-size:11px;padding:0 6px}
  .menu-main{left:18px;right:18px;top:184px;bottom:auto;grid-template-columns:1fr;gap:14px}
  .cards-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .vehicle-card{height:146px}
  .card-art{height:100px}
  .card-meta{height:46px}
  .card-name{font-size:12px}
  .card-sub{font-size:9px}
    #menu .music-host{width:100%;margin-top:8px}
  .start-column{padding-bottom:10px}
  .selected-stats b{font-size:14px}
  .minimap{width:142px}
  .conditions{margin-top:96px}
  .job-slot{display:none}
  .trip-plate{width:196px;bottom:150px;left:10px}
  .trip-val,.earn-val{font-size:14px}
  .earn-val{font-size:12px}
  .cluster{width:min(560px,70vw);bottom:6px}
  .fuel-gauge{display:none}
  .hud-buttons{right:10px;bottom:160px}
  .music-host.compact{left:10px;top:60px;width:178px}
  .hud-brand{left:10px;top:12px;width:32px;height:32px}
  .breadcrumb{top:10px;font-size:9px;padding:4px 9px 4px 6px}
  .breadcrumb span:last-child{display:none}
  .breadcrumb i{display:none}
  .minimap-wrap{right:10px;top:10px}
  .hud-btn{height:34px;min-width:36px;font-size:9px}
  .hud-btn img{width:19px;height:16px}
  #cameraLabel{display:none}
}
@media (max-width:620px){
  .job-strip{top:158px;max-width:64vw;font-size:10px}
  .brand-title{width:122px}
  .brand-badge{width:46px;height:46px}
  .brand-lockup{gap:5px}
  .city-switch{padding:4px 5px;gap:2px}
  .city-option{padding:4px 5px}
  .head-tools .sound-toggle{display:none}
  .breadcrumb{display:none}
  .city-option .city-name{display:none!important}
  .city-option .city-short{display:inline}
  .breadcrumb{max-width:40vw!important}
  .brand-title{display:block;width:118px}
  .brand-lockup{gap:5px;align-items:center}
  .brand-badge{width:44px;height:44px}
  .segments{top:82px}
  .seg{height:36px}
  .seg-label{font-size:9px;gap:3px}
  .seg .mini-lock{width:9px;height:9px}
  .menu-main{top:168px}
  .cards-row{grid-template-columns:1fr;gap:8px}
  .vehicle-card{height:118px}
  .card-art{height:82px;padding:8px 12px 0}
  .card-meta{height:36px;padding-bottom:6px}
  .card-name{font-size:13px}
  .card-sub{display:none}
  .card-tick{width:23px;height:23px}
  .services{flex-wrap:wrap}
  .service{padding:6px 9px 6px 6px}
  .service img{width:22px;height:22px}
  .selected-name{font-size:19px}
  .start-btn{height:52px}
  .start-label{font-size:15px}
  .weather-pick{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09)}
.weather-kicker{font-family:var(--display);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.weather-options{display:flex;flex-wrap:wrap;gap:5px}
.weather-opt{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.78);border-radius:7px;padding:5px 9px;font-family:var(--display);font-size:10px;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.weather-opt:hover{background:rgba(255,255,255,.12)}
.weather-opt.active{background:var(--green);border-color:var(--green);color:#fff}
.clock-chip{display:flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(16,21,24,.86);border:1px solid rgba(255,255,255,.16);font-family:var(--mono);font-size:10px;color:#eef2f2;letter-spacing:.04em}
.weather-chip{pointer-events:auto;cursor:pointer}
.control-hint{font-size:9px}
  .cluster{width:76vw;bottom:4px;gap:4px}
  .dial-readout .kmh{font-size:17px}
  .dial-readout .unit{font-size:5px}
  .dial-readout.tach .kmh{font-size:13px}
  .gear-cell{font-size:14px}
  .g-d,.g-n,.g-r{font-size:14px}
  .mode-cell{font-size:5px}
  .trip-plate{width:150px;bottom:calc(38vw + 10px);left:8px}
  .trip-val{font-size:11px}
  .earn-val{font-size:9px}
  .hud-buttons{bottom:calc(38vw + 10px);right:8px;gap:4px}
  .hud-btn{height:28px;min-width:28px;padding:0 7px}
  .hud-btn.text-btn{font-size:10px}
  .hud-btn img{width:15px;height:13px}
  .music-host.compact{width:136px;top:54px;left:8px}
  .music-host.compact .mp-name{font-size:9px}
  .mp-name-cover{padding:0 4px}
  .minimap{width:104px}
  .conditions{margin-top:72px;gap:3px}
  .weather-chip{font-size:8px;padding:3px 6px 3px 3px}
  .weather-chip img{width:18px;height:13px}
  .limit-chip img{width:25px;height:25px}
  .map-heading{font-size:7px;bottom:6.8%}
  .breadcrumb{top:8px;max-width:52vw;overflow:hidden;text-overflow:ellipsis}
  .pause-panel{padding:18px 16px 16px}
  .pause-panel h2{font-size:26px}
  .pause-controls{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .touch-controls{display:flex;position:absolute;left:0;right:0;bottom:12px;justify-content:space-between;padding:0 10px;z-index:6;pointer-events:none}
  .touch-steer,.touch-drive{display:flex;gap:8px;pointer-events:none}
  .touch-pad{pointer-events:auto;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(16,21,24,.52);color:#fff;font-family:var(--display);font-weight:700;font-size:17px;display:grid;place-items:center;user-select:none;touch-action:none}
  .touch-pad.gas{background:rgba(0,177,79,.38);border-color:rgba(0,177,79,.58)}
  .touch-pad.brake{background:rgba(206,17,38,.24);border-color:rgba(206,17,38,.42)}
  .touch-pad:active{transform:scale(.96)}
  .cluster{width:88vw;bottom:82px}
  .trip-plate,.job-slot,.fuel-gauge{display:none}
  .hud-buttons{right:auto;bottom:auto;top:118px;left:50%;transform:translateX(-50%);flex-direction:row;gap:5px}
  .hud-btn{height:32px;min-width:34px}
  .hud-btn.text-btn{font-size:11px}
  .hud-btn img{width:18px;height:15px}
  .hud-btn#helpBtn{display:none}
  .music-host.compact{width:148px}
}
@media (pointer:coarse) and (orientation:landscape){
  .cluster{width:min(44vw,360px);bottom:78px}
  .hud-buttons{top:118px;right:auto;bottom:auto}
  .music-host.compact{width:190px}
}
@media (max-height:520px) and (orientation:landscape){
  .cluster{width:min(470px,46vw)}
  .trip-plate{bottom:74px}
  .job-slot{bottom:130px}
  .hud-buttons{bottom:76px}
  .music-host.compact{width:180px}
  .minimap{width:132px}
  .conditions{margin-top:90px}
}