.mobile-nav,.mobile-voices,.mobile-quick{display:none}
/* Bottom sheets for the phone menus: one compact style for segments, chips and lists. */
.mobile-sheet{width:100%;max-width:520px;max-height:calc(100dvh - 72px);margin:auto auto 0;padding:8px 16px calc(40px + env(safe-area-inset-bottom));border:1px solid #3f5a5d;border-bottom:0;border-radius:22px 22px 0 0;background:#152a33;color:#e1ecdf;overflow:auto;overscroll-behavior:contain}
.mobile-sheet::backdrop{background:#08151bb3}
.mobile-sheet-handle{width:40px;height:5px;border-radius:3px;background:#4d6a6c;margin:0 auto 6px}
.mobile-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.mobile-sheet-header h2{font-size:19px;margin:0;outline:none}
.mobile-sheet-close{width:36px;height:36px;flex-shrink:0;border:0;border-radius:50%;background:#223f48;color:#cfe0d6;font-size:20px;line-height:1;cursor:pointer}
.mobile-sheet-close:focus:not(:focus-visible){outline:none}
.m-company{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-bottom:14px;border-radius:14px;background:#1f3a43}
.m-company div{min-width:0}.m-company b{display:block;font-size:15px;color:#eef5e6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-company span{display:block;font-size:11px;color:#9fb8b6;margin-top:3px}.m-company strong{font-size:15px;color:#c9eba0;white-space:nowrap}
.m-group{margin:0 0 14px}
.m-group h3{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#93acad;margin:0 0 7px 2px}
.m-seg{display:flex;padding:3px;border-radius:12px;background:#0f232b;gap:3px}
.m-seg button{flex:1;min-width:0;min-height:38px;border:0;border-radius:9px;background:none;color:#c3d5cf;font:600 12px 'Bondis Flecha','Segoe UI',sans-serif;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.m-seg button.active{background:#b4ec73;color:#17301f}
.m-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.m-chips button{min-height:40px;border:1px solid #33515a;border-radius:11px;background:#1d363f;color:#dbe8e0;font:600 12px 'Bondis Flecha','Segoe UI',sans-serif;cursor:pointer}
.m-list{border-radius:14px;background:#1d363f;overflow:hidden;margin:0 0 12px}
.m-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px;border:0;border-top:1px solid #2b4952;background:none;color:#e8f2dc;text-align:left;font:inherit;cursor:pointer}
.m-row:first-child{border-top:0}
.m-row-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:8px;background:#10262e;color:#b4ec73;font-size:15px}
.m-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.m-row-text b{font-size:14px;font-weight:600}.m-row-text small{font-size:11px;color:#9fb8b6;line-height:1.35}
.m-row-chevron{color:#6f8c8c;font-size:20px}
.m-row.m-warn .m-row-text small{color:#e9d08c}.m-row.m-warn .m-row-icon{color:#e9d08c}
.m-row.m-danger{justify-content:center}.m-row.m-danger .m-row-icon{background:none;color:#f0a48f}.m-row.m-danger b{color:#f3b3a1}.m-row.m-danger .m-row-text{flex:0 1 auto}
.mobile-badge{position:absolute;top:2px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ef8a71;color:#2a1510;font:700 10px/17px 'Bondis Flecha','Segoe UI',sans-serif;font-style:normal;text-align:center}
.mobile-badge[hidden]{display:none}

@media(max-width:700px){
 :root{--mobile-nav-height:58px}
 /* Compact header: logo, cash and mood. Name, mode, share and reset move to the sheets. */
 .topbar{height:52px;padding:0 12px;gap:8px}
 .topbar .brand{max-width:none;flex-shrink:0}.brand-label,.topbar #shareGame,.topbar #achievementsButton,.topbar #rankingButton,.topbar .game-mode-badge,.topbar .save-status{display:none!important}
 .topbar .company-button{margin-left:auto;min-width:0;max-width:none;display:flex;flex-direction:row;align-items:baseline;gap:8px;padding:7px 12px}
 .topbar .company-button>span,.topbar #companyName{display:none!important}.topbar .company-button b{font-size:16px;white-space:nowrap}.topbar .company-button small{display:block!important;font-size:10px;white-space:nowrap}
 main{height:calc(100dvh - 52px - var(--mobile-nav-height) - env(safe-area-inset-bottom))}
 /* Bottom navigation replaces the buttons that used to sit over the map. */
 .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:1200;height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#122832;border-top:1px solid #2e4950}
 .mobile-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#93acad;font:600 10px 'Bondis Flecha','Segoe UI',sans-serif;cursor:pointer}
 .mobile-nav-icon{font-size:18px;line-height:1}
 .mobile-nav button.active{color:#b4ec73}.mobile-nav button.active .mobile-nav-icon{transform:scale(1.1)}
 .map-header #toggleLines,.map-header #dispatchButton,.map-header #modeButton{display:none!important}
 .map-controls,body[data-map-mode="2d"] .map-controls,.citizen-widget,.camera-hint,.map-header .map-view-switch,.mobile-map-options{display:none!important}
 /* One bottom strip: selected line, clock and speed. */
 .timebar{left:10px;right:10px;width:auto;max-width:none;bottom:18px;transform:none;padding:6px 8px;gap:8px}
 .timebar .weather,.time-hint{display:none!important}
 .timebar .selected-line-hud{position:static!important;min-width:0;flex:1 1 auto;max-width:150px;padding:4px 6px;gap:8px;box-shadow:none;background:#ffffff12;border-radius:10px}
 .timebar .selected-line-hud>span:first-child{min-width:34px;height:30px;font-size:13px}
 .timebar .selected-line-hud b{font-size:11px;color:#eef5e6}.timebar .selected-line-hud small{color:#a9c0bf}.timebar .selected-line-hud small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timebar .selected-line-hud span:nth-child(2){min-width:0;overflow:hidden}.timebar .selected-line-hud em{display:none}
 .timebar .clock strong{font-size:18px}.timebar .clock span{font-size:9px}
 .timebar .playback{margin-left:auto}.timebar .playback button{min-width:34px;min-height:34px;padding:6px}
 .mobile-voices{display:flex;align-items:center;justify-content:center;position:absolute;right:12px;bottom:82px;z-index:520;width:48px;height:48px;border-radius:50%;border:1px solid #4f6d61;background:#203f39;color:#d6efa6;font-size:20px;box-shadow:0 4px 14px #0005;cursor:pointer}
 .mobile-voices .mobile-badge{top:-3px;right:-3px}
 .panel-open .mobile-voices,.lines-open .mobile-voices{display:none}
 .sidebar,.panel-open .inspector{top:12px!important;bottom:82px!important}
 .inspector{bottom:82px!important}
 /* Draggable sheets: the height comes from --sheet-h, set by mobile-ui.js. */
 body.lines-open .sidebar[data-sheet],body.panel-open .inspector[data-sheet]:not(.draft-panel){top:auto!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;max-width:none!important;margin:0!important;height:var(--sheet-h,50%)!important;max-height:none!important;border-radius:20px 20px 0 0!important;padding-top:0!important;padding-bottom:88px!important;overscroll-behavior:contain;transition:height .28s cubic-bezier(.2,.8,.2,1)!important;box-shadow:0 -6px 24px #0006}
 .sidebar.sheet-dragging,.inspector.sheet-dragging{transition:none!important}
 .sidebar[data-sheet="peek"],.inspector[data-sheet="peek"]{overflow:hidden!important}
 .sheet-grip{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;height:26px;min-height:26px;flex-shrink:0;margin:0 -16px 6px;background:inherit;cursor:grab;touch-action:none;outline:none}
 .sidebar .intro{display:none}
 .phone-layout #lineList+.network-card{margin-top:16px}
 .sheet-grip span{width:44px;height:5px;border-radius:3px;background:#5d7a7c}
 .sheet-grip:focus-visible span{background:#b4ec73}
 .sheet-dragging .sheet-grip{cursor:grabbing}
 .inspector[data-sheet] .simple-close,.sidebar[data-sheet] .simple-close{top:6px!important;z-index:6}
 /* The lines sheet closes from its title row; the clock bar floats over the sheets' bottom edge. */
 .sidebar[data-sheet] #closeLines{top:30px!important;right:14px!important;width:34px;height:34px;font-size:21px;background:#223f48;color:#cfe0d6;border-radius:50%}
 .phone-layout .timebar{z-index:900}
 /* Confirmations (out of cash, reset) fit the phone width. */
 #confirmDialog{width:auto;max-width:min(420px,calc(100vw - 24px));margin:auto;padding:22px 20px 20px}
 /* With a sheet open the clock bar docks as its solid footer, so the sheet's content scrolls under it instead of peeking around it. */
 body.lines-open:has(.sidebar[data-sheet]) .timebar,body.panel-open:has(.inspector[data-sheet]:not(.draft-panel)) .timebar{left:0;right:0;bottom:0;height:62px;padding:6px 12px;border:0;border-top:1px solid #2e4950;border-radius:0;background:#122832;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 /* Quick map controls: view, follow and share, out of the way while a sheet is full or a route is being drawn. */
 .mobile-quick{display:flex;flex-direction:column;align-items:flex-end;gap:8px;position:absolute;top:12px;right:12px;z-index:520}
 .mobile-quick>button,.mobile-quick-view{border:1px solid #3d5a5e;background:#152a33e8;box-shadow:0 3px 12px #0004;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
 .mobile-quick>button{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border-radius:19px;color:#dbe8e0;font:600 12px 'Bondis Flecha','Segoe UI',sans-serif;cursor:pointer}
 .mobile-quick>button span{display:flex;color:#b4ec73;font-size:14px}
 .mobile-quick svg,.m-row-icon svg{width:16px;height:16px}
 .mobile-quick>button.active{background:#b4ec73;border-color:#b4ec73;color:#17301f}.mobile-quick>button.active span{color:#17301f}
 .mobile-quick>button[hidden]{display:none}
 .mobile-quick-view{display:flex;padding:3px;gap:2px;border-radius:19px}
 .mobile-quick-view button{min-width:40px;min-height:32px;border:0;border-radius:16px;background:none;color:#c3d5cf;font:700 12px 'Bondis Flecha','Segoe UI',sans-serif;cursor:pointer}
 .mobile-quick-view button.active{background:#b4ec73;color:#17301f}
 body:has(#buildBanner:not(.hidden)) .mobile-quick,body.lines-open:has(.sidebar[data-sheet="full"]) .mobile-quick,body.panel-open:has(.inspector[data-sheet="full"]) .mobile-quick{display:none}
 /* Menus stop above the bottom bar and leave it undimmed, so the next tab is one tap away. Backdrops cannot read custom properties everywhere, so the bar height (58px) is written out. */
 .mobile-sheet{margin-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));max-height:calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom) - 40px);padding-bottom:20px}
 #mobileSheet::backdrop,#achievementsDialog::backdrop,#modesDialog::backdrop,#businessDialog::backdrop,#operationsDialog::backdrop,#messagesDialog::backdrop,#shareDialog::backdrop,#helpDialog::backdrop,#rankingDialog::backdrop{background:linear-gradient(#08151bb3,#08151bb3) top/100% calc(100% - 58px - env(safe-area-inset-bottom)) no-repeat;-webkit-backdrop-filter:none;backdrop-filter:none}
 #achievementsDialog,#modesDialog,#businessDialog,#operationsDialog,#messagesDialog,#shareDialog,#helpDialog,#rankingDialog{max-height:calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom) - 24px)!important;margin-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px)}
 .panel-open .inspector.draft-panel{bottom:auto!important;max-height:calc(100% - 100px)}
 .build-banner,body[data-map-mode="3d"] .build-banner{top:12px}
 .city-credit{display:block!important;bottom:3px;right:8px;max-width:70%;font-size:6px}
 .toast{bottom:calc(var(--mobile-nav-height) + 90px)!important}
 .operations-dialog,.business-dialog,#messagesDialog,#shareDialog,#helpDialog{max-height:calc(100dvh - 24px)}
}
@media(max-width:360px){.topbar .company-button small{display:none!important}.timebar .selected-line-hud{max-width:112px}.timebar .playback button{min-width:30px;padding:5px}}