/* Transport (#25): the speedometer, the touch brake and horn, the passenger panel, the dealership card, the Garage and the corner minimap. */
:root{--bolha-minimap:168px}
@media(max-width:600px),(max-height:500px){:root{--bolha-minimap:116px}}

#drive-hud{position:fixed;top:86px;left:20px;display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:#172b3ee6;color:#fff;font:13px system-ui;box-shadow:0 6px 18px #0005;z-index:14;pointer-events:none}
@media(max-width:600px){#drive-hud{top:64px;left:12px}}
#drive-hud b{font:800 26px/1 system-ui;font-variant-numeric:tabular-nums}#drive-hud span{font-size:12px;color:#c9d8e6;white-space:pre-line}#drive-hud[hidden]{display:none}
#drive-pad{position:fixed;left:22px;bottom:152px;display:flex;flex-direction:column;gap:10px;z-index:16}#drive-pad[hidden]{display:none}
#drive-pad button{width:56px;height:56px;border-radius:50%;border:2px solid #ffffff80;background:#182a3ed9;color:#fff;font:22px/1 system-ui;touch-action:none;user-select:none;-webkit-user-select:none}
#drive-pad .drive-brake{background:#8e2f2fd9}#drive-pad button.held{filter:brightness(1.4);transform:scale(.94)}
/* On a phone the action button («Выйти из машины») sits bottom left: the brake and horn go above it. */
@media(max-width:600px){#drive-pad{bottom:206px;left:14px}}

#ride-panel{position:fixed;top:12px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;padding:10px 14px;max-width:min(440px,calc(100vw - 24px));border-radius:14px;background:#172b3ef0;border:1px solid #6f8fb2;color:#fff;font:14px system-ui;z-index:15;box-shadow:0 8px 26px #0005;text-align:center}
#ride-panel[hidden]{display:none}#ride-panel span{font-size:12px;color:#c9d8e6}.ride-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ride-buttons button{font:700 13px system-ui;border:0;border-radius:9px;padding:8px 12px;background:#365d7a;color:#fff;cursor:pointer}.ride-buttons button:disabled{opacity:.45;cursor:default}
.ride-buttons .ride-go{background:#2f7d55}.ride-buttons .ride-exit{background:#7a4636}
body:has(#bolha-guide:not([hidden])) #ride-panel{top:76px}
/* On a phone the route banner sits under the title: the speedometer and the ride panel go below it. */
@media(max-width:600px){body:has(#bolha-guide:not([hidden])) #ride-panel{top:140px}body:has(#bolha-guide:not([hidden])) #drive-hud{top:136px}}

.dealer-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:16px 18px;border-radius:16px;background:#f2f6f9;color:#22364a;font:14px system-ui;box-shadow:0 24px 80px #0008;z-index:60}
.dealer-card[hidden]{display:none}.dealer-card h2{margin:0 26px 2px 0;font-size:20px}.dealer-price{margin:0 0 10px;font:800 18px system-ui;color:#2f6f4f}
.dealer-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 10px}.dealer-card dt{color:#5c7488}.dealer-card dd{margin:0;font-weight:700;text-align:right}
.dealer-close{position:absolute;top:8px;right:8px;border:0;background:transparent;font-size:26px;line-height:1;color:#35536a;cursor:pointer}
.dealer-color{margin:6px 0}.dealer-actions{display:flex;gap:8px;margin-top:12px}.dealer-actions button{flex:1;font:700 14px system-ui;border:0;border-radius:10px;padding:11px 8px;color:#fff;cursor:pointer}
.dealer-buy{background:#2f7d55}.dealer-test{background:#365d7a}.dealer-note{font-size:12px;color:#5c7488;line-height:1.45;margin:10px 0 0}
.color-row{display:flex;flex-wrap:wrap;gap:7px}.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #9fb3c3;padding:0!important;cursor:pointer}
.color-swatch[aria-pressed=true]{box-shadow:0 0 0 3px #2f7cf6}

.garage-car{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;padding:10px 0;border-bottom:1px solid #c9d5df}
.garage-dot{grid-row:span 2;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px #8aa0b2}.garage-car small{color:#5c7488;font-size:11px}
.garage-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}#phone .garage-actions button{font-size:11px;padding:6px 8px}#phone .garage-actions select{font-size:11px;padding:6px;width:auto;flex:1 1 100%}

/* The minimap is the last thing in the phone dock: a round map under the phone (or under «📱 Телефон» when it is folded, #28). */
#minimap{align-self:flex-end;width:var(--bolha-minimap);height:var(--bolha-minimap);padding:0;border:0;border-radius:50%;background:#93ab80;box-shadow:0 6px 20px #0006;cursor:pointer;flex-shrink:0;pointer-events:auto}
#minimap[hidden]{display:none}#minimap canvas{display:block;width:100%;height:100%;border-radius:50%}
body:has(#minimap:not([hidden])) #bolha-online-list{max-height:max(0px,min(198px,calc(100dvh - var(--bolha-phone-height) - var(--bolha-minimap) - 210px)))}
body:has(#bolha-phone-dock.folded) #bolha-online-list{max-height:max(0px,min(198px,calc(100dvh - var(--bolha-minimap) - 200px)))}
#phone [data-fold]{padding:2px 6px;font-size:18px}