:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
/* Geometry is assigned by hud-layout.mjs. No viewport-wide control panel. */
#hud,#controls{position:fixed;inset:0;pointer-events:none}
.hud-left,.hud-right,.objective,.tip,.navigation,.dashboard,.service-status,.cab-mirror,#stick,.camera-controls,.vehicle-tools button,.action,.car-button,.use-button{position:fixed;right:auto;bottom:auto;transform:none;margin:0}
.hud-left{padding:6px 8px;border-left:2px solid var(--accent);background:linear-gradient(90deg,#101c29c7,#101c2980);overflow:hidden;border-radius:0 5px 5px 0}
.mini-brand{display:block;font-size:12px;line-height:15px;letter-spacing:1.5px;font-weight:850;white-space:nowrap}
#level-label{display:block;margin-top:1px;font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#deded0}
.hud-stats{display:flex;gap:10px;margin-top:2px;font-size:9px;line-height:11px;white-space:nowrap;color:#c9d7d1}
#coins{color:#e4c18b}
.hud-right{display:flex;gap:4px;align-items:start;z-index:5;pointer-events:none}
.hud-right button{height:44px;min-height:44px;border:1px solid #d8e4db46;background:#102632be;border-radius:7px;pointer-events:auto;backdrop-filter:blur(5px)}
.hud-button{width:44px;flex:none;font-size:19px;padding:0}
.mission-button{width:52px;flex:none;font-size:8px;font-weight:700;letter-spacing:.3px;padding:0}
.hud-button.active{background:#9fc6b8;color:#173433}
#room-bar{position:relative;flex:none;width:48px;height:44px;display:block}
#copy-code{width:48px;padding:0 1px 9px;font-size:8px;letter-spacing:.3px;color:#e6c18a}
#players-label{position:absolute;left:0;right:0;bottom:5px;font-size:6px;line-height:8px;text-align:center;color:#d9e5de;white-space:nowrap;pointer-events:none}
#hud[data-wrapped=true] .hud-right{display:grid;grid-template-columns:repeat(3,48px);gap:4px}
#hud[data-wrapped=true] .hud-right button{width:48px}
#hud[data-wrapped=true] #missions{order:0}
#hud[data-wrapped=true] #sound-toggle{order:1}
#hud[data-wrapped=true] #pause{order:2}
#hud[data-wrapped=true] #voice{order:3}
#hud[data-wrapped=true] #camera{order:4}
#hud[data-wrapped=true] #room-bar{order:5}
#hud[data-wrapped=true] .hud-stats{display:none}
#hud[data-brand-narrow=true] .mini-brand{font-size:9px;letter-spacing:.3px}
#hud[data-brand-narrow=true] .hud-stats{display:none}
.objective,.tip{padding:5px 8px;border:0;border-radius:6px;background:#102633ae;font-size:10px;line-height:13px;color:#f0ecd9;text-align:center;overflow:hidden;overflow-wrap:anywhere;text-shadow:0 1px 2px #0008;max-width:none;width:auto;z-index:2;pointer-events:none}
.objective:empty,.tip:empty{display:none}
.objective,#tip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
#hud[data-tip=true] .objective{visibility:hidden}
#hud[data-servicing=true] .objective,#hud[data-servicing=true] .tip{visibility:hidden}
.navigation{pointer-events:none;z-index:2;overflow:hidden;border-radius:5px}
.navigation canvas{display:block;width:100%;height:calc(100% - 18px);border:2px solid #253b45b8;opacity:.88;box-shadow:0 2px 8px #0003}
#minimap{pointer-events:auto;cursor:pointer;touch-action:manipulation}
#waypoint{display:block;height:18px;padding:3px 4px;line-height:12px;font-size:8px;color:#efe2c5;background:#102632ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud[data-compact-map=true] .navigation canvas{height:100%}
#hud[data-compact-map=true] #waypoint{display:none}
.dashboard{padding:6px 8px;border:1px solid #c2d2c540;border-bottom:2px solid #dab07899;border-radius:7px;background:#0e2531b3;overflow:hidden;z-index:2;pointer-events:none}
.dash-top,.dash-small{display:flex;align-items:center;justify-content:space-between;gap:3px;white-space:nowrap}
.dash-top{height:26px}
#gear{font-size:17px;font-weight:750;line-height:24px}
#speed{position:static;transform:none;font-size:17px;font-weight:750;letter-spacing:0;line-height:24px;text-shadow:0 2px 5px #0007;white-space:nowrap}
#speed{display:flex;flex-direction:column;align-items:center;line-height:17px}
#speed small{font-size:7px;line-height:8px;font-weight:500;letter-spacing:.3px}
.limit{display:grid;place-items:center;flex:none;width:24px;height:24px;border:2px solid #ba7259;border-radius:50%;background:#efe9d8;color:#233438;font-size:10px;font-weight:800}
.limit.over{background:#ffd1a1;border-color:#ef826d}
.dash-small{margin-top:3px;font-size:8px;line-height:11px;color:#cfddd4}
#rpm{display:block;font-size:8px;line-height:11px;margin-top:2px;color:#a9c7cb}
.load-status,.light-status{font-size:8px;line-height:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e2c087}
.light-status{color:#a0ded7;font-size:7px}
.light-status:empty{display:none}
.service-status{background:#102936df;border-radius:5px;padding:5px 8px;font-size:9px;line-height:11px;text-align:center;pointer-events:none;z-index:2;overflow:hidden}
.service-status>div{height:3px;background:#50616a;margin-top:4px}
.service-status i{display:block;height:3px;width:0;background:var(--accent);transition:width .15s}
.cab-mirror{border:2px solid #263e48cc;border-radius:5px;padding:3px;font-size:6px;line-height:8px;color:#f0ead7;text-shadow:0 1px 3px #000;background:transparent;pointer-events:none;z-index:1}
#controls button,#stick{pointer-events:auto}
#stick{border:1px solid #e4ead597;border-radius:50%;background:#14273940;display:grid;place-items:center;touch-action:none;user-select:none;box-shadow:inset 0 0 18px #e2efd310;z-index:4}
#stick-knob{width:42%;height:42%;border-radius:50%;background:#e7e5dbb8;border:1px solid #fff6;box-shadow:0 4px 12px #0003;pointer-events:none}
.camera-controls{display:flex;gap:4px;pointer-events:none;z-index:4}
.camera-controls button{width:44px;height:44px;padding:0;background:#12293880;border:1px solid #d0dbbe44;border-radius:7px;font-size:22px;touch-action:none}
#controls[data-camera-stacked=true] .camera-controls{display:grid;grid-template-columns:repeat(2,44px);grid-template-rows:repeat(2,44px)}
#controls[data-camera-stacked=true] #rotate-left{grid-column:1;grid-row:1}
#controls[data-camera-stacked=true] #rotate-right{grid-column:2;grid-row:1}
#controls[data-camera-stacked=true] #center-camera{grid-column:1 / -1;grid-row:2;width:92px}
.vehicle-tools{position:fixed;inset:0;display:block;pointer-events:none;z-index:4}
.vehicle-tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;padding:3px 1px;border:1px solid #9bbbc34a;border-radius:7px;background:#17313dd4;color:#e0e9e2;font-size:8px;font-weight:700;letter-spacing:.1px;line-height:10px;touch-action:manipulation;user-select:none;pointer-events:auto;box-shadow:0 2px 5px #0002}
.vehicle-tools svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.vehicle-tools span{pointer-events:none;white-space:nowrap}
.vehicle-tools button.active{background:#9fc6b8;color:#173433;border-color:#cce5cf}
.vehicle-tools #parking.active,.vehicle-tools #doors.active,.vehicle-tools #horn.active{background:#d9b774;color:#263035}
.vehicle-tools #siren.active,.vehicle-tools #beacon.active{background:#246baa;color:#eef8ff;border-color:#8dceff}
.vehicle-tools button:disabled{opacity:.38}
.vehicle-tools #fleet-open{color:#efcc94;border-color:#cfb27977}
.action-buttons,.action-row{display:contents}
.action{border-radius:20%;border:1px solid #e3e8ce85;background:#152e3ccb;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none;z-index:4}
.action b{font-size:27px;font-weight:400;line-height:29px}
.action span{font-size:9px;font-weight:700;letter-spacing:.5px}
.action.active{background:#ceaa6ed9;color:#142536}
.car-button,.use-button{padding:4px 2px;min-height:44px;border:1px solid #d1c5a46e;border-radius:7px;background:#14303bc9;color:#eed09c;font-size:8px;font-weight:700;letter-spacing:.1px;line-height:11px;touch-action:none;z-index:4;max-width:none}
.use-button.active{background:#96c4b9;color:#122b33}
#hud[data-short=true] .hud-left{padding:6px}
#hud[data-short=true] .mini-brand{font-size:10px;letter-spacing:.4px;line-height:14px}
#hud[data-short=true] #level-label{font-size:8px;line-height:10px}
#hud[data-short=true] .hud-stats{display:none}
#hud[data-short=true] .dashboard{padding:2px 6px}
#hud[data-short=true] .dash-top{height:24px}
#hud[data-short=true] #speed{font-size:14px;line-height:15px}
#hud[data-short=true] #gear{font-size:14px}
#hud[data-short=true] .limit{width:22px;height:22px}
#hud[data-short=true] .dash-small{font-size:7px;line-height:9px;margin-top:2px}
#hud[data-short=true] #rpm,#hud[data-short=true] .load-status,#hud[data-short=true] .light-status{display:none}
#hud[data-short=true] .objective,#hud[data-short=true] .tip{font-size:9px;line-height:11px;-webkit-line-clamp:2}
#hud[data-telemetry-narrow=true] .dashboard{padding:6px 4px}
#hud[data-telemetry-narrow=true] #speed,#hud[data-telemetry-narrow=true] #gear{font-size:14px}
#hud[data-telemetry-narrow=true] .limit{width:22px;height:22px}
#hud[data-telemetry-narrow=true] .dash-small{flex-direction:column;align-items:start;gap:0;line-height:11px}
#hud[data-telemetry-narrow=true] #rpm{display:none}
#hud[data-short=true][data-telemetry-narrow=true] .dashboard{padding:2px 4px}
#hud[data-short=true][data-telemetry-narrow=true] .dash-small{flex-direction:row;font-size:6px;line-height:8px}

.weather-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 20px}.weather-options button{min-height:48px;padding:12px;font-size:13px}.weather-options button[aria-pressed=true]{background:#abc9bc;color:#18342d;border-color:#d6e4db}.world-conditions-label{padding:12px;border-radius:9px;background:#192f3c;color:#d5e8ed}#world-weather-error{color:#edb191}