/* Short landscape windows share the same split view on web and Android. */
@media (orientation:landscape) and (min-width:600px) and (max-height:600px) {
  :root { --panel-width:clamp(292px,40vw,380px); --phone-header:54px; --phone-nav:58px; }
  html,body { height:100%; overflow:hidden; }
  .shell { height:100dvh; min-height:0; padding:0; }
  .topbar { height:var(--phone-header); min-height:0; flex-wrap:nowrap; padding:3px 10px; gap:10px; }
  .topbar .brandmark { flex-basis:auto; min-height:44px; }
  .ltw-brand--compact .ltw-globe { width:42px; height:42px; }
  .ltw-name>strong { font-size:16px; }
  .ltw-name>span { font-size:8px; }
  .header-controls { width:auto; margin-left:auto; gap:6px; }
  .rank-chip,.balance-chip { height:44px; min-height:44px; font-size:14px; padding:5px 9px; }
  .rank-chip { flex:none; }
  .rank-track { display:none; }
  .topbar .header-icon { display:none; }
  .content { height:calc(100dvh - var(--phone-header)); overflow:hidden; }
  .workspace { display:grid; grid-template-columns:minmax(0,1fr) var(--panel-width); height:100%; min-height:0; }
  .workspace,.mapzone,.panel { width:auto; max-width:100%; }
  .mapzone { height:100%; min-height:0; grid-template-rows:minmax(0,1fr) 104px; }
  .mapviewport { height:auto; min-height:0; }
  .atlas-toolbar { display:flex; flex-wrap:nowrap; top:5px; left:6px; right:6px; gap:4px; }
  .atlas-toolbar select { grid-column:auto; flex:1; min-width:0; width:0; max-width:none; font-size:12px; }
  .atlas-toolbar>button,.atlas-info>summary { min-width:44px; min-height:44px; font-size:11px; padding:5px; }
  .atlas-info { margin-left:0; }
  .atlas-info>div { max-height:calc(100dvh - 130px); width:min(300px,80vw); }
  .map-controls { left:6px; right:6px; bottom:18px; gap:4px; }
  .map-search { width:0; flex:1; min-width:0; padding:4px; gap:3px; }
  .map-search>svg { display:none; }
  .map-search input { font-size:14px; }
  .map-controls .zoom-control { width:44px; height:44px; min-width:44px; font-size:26px; }
  .map-credit { left:6px; font-size:7px; }
  .fleet-deck { padding:5px; border-radius:10px 10px 0 0; }
  .fleet-cards { gap:6px; }
  .vehicle-card { min-width:235px; max-width:280px; padding:3px 7px; grid-template-rows:minmax(0,1fr) 23px; }
  .vehicle-card:has(.vehicle-timer) { grid-template-rows:minmax(0,1fr) 22px 14px; }
  .vehicle-image img { max-height:66px; }
  .vehicle-name { gap:2px; }
  .vehicle-name>b { font-size:16px; }
  .vehicle-name small { font-size:9px; }
  .tier { font-size:10px; padding:2px 6px; }
  .vehicle-bottom { font-size:10px; }
  .panel { height:calc(100% - var(--phone-nav)); min-height:0; padding:7px 10px; gap:5px; overflow:auto; overscroll-behavior:contain; }
  .panel>* { flex-shrink:0; }
  .city-head { min-height:44px; gap:10px; }
  .city-preview { height:44px; width:25%; }
  .city-heading h2 { font-size:22px; margin-bottom:3px; }
  .city-heading p { font-size:11px; }
  .tabs button { height:44px; min-height:44px; font-size:16px; gap:6px; }
  .tabs svg { width:22px; height:22px; }
  .cargo-heading h3 { font-size:17px; margin:0; }
  .cargo-heading small,.cargo-heading>span { font-size:11px; }
  .tutorial-tip { font-size:11px; margin:0; padding:5px 7px; }
  .panel .joblist { flex:none; max-height:none; min-height:0; overflow:visible; }
  .job { grid-template-columns:42px minmax(0,1fr) 26px 65px 14px; min-height:76px; gap:4px; padding:6px; }
  .job img { width:42px; height:56px; }
  .job .jobtext>b,.job .pay,.cargo-weight { font-size:14px; }
  .job .jobtext>span { font-size:12px; }
  .job .cargo-type { font-size:10px; }
  .job .pay .coin-token { width:12px; height:10px; }
  .selection-summary { height:auto; min-height:44px; margin-bottom:4px; padding:0 8px; font-size:12px; }
  .selection-summary button,.manifest-links button { min-height:44px; }
  .journey-destination select,.fuel-option { min-height:44px; }
  .regional-panel .dispatch-button { font-size:18px; min-height:48px; }
  .sidebar,.page-shell .sidebar { left:auto; right:0; bottom:0; width:var(--panel-width); height:var(--phone-nav); display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:4px; border-radius:0; }
  .nav { width:auto; height:100%; min-height:44px; padding:3px; font-size:10px; gap:1px; }
  .nav svg { width:22px; height:22px; }
  .page-shell .content { overflow:auto; padding-bottom:calc(var(--phone-nav) + 12px); }
  .page { padding:18px; }
  .cards { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .onboarding { display:grid; grid-template-columns:1.1fr 1fr; height:100dvh; min-height:0; overflow:auto; }
  .intro { max-width:none; padding:18px 22px 30px; }
  .intro>.ltw-brand { max-width:350px; margin-bottom:12px; }
  .intro h1 { font-size:32px; }
  .intro-art { position:sticky; top:0; height:100dvh; min-height:0; }
  .intro-art>.castle { max-height:80vh; }
  .boot { height:100dvh; min-height:0; padding:12px; gap:10px; }
  .boot>.ltw-brand { max-width:440px; }
  dialog { max-height:calc(100dvh - 16px); max-width:calc(100vw - 24px); overflow:auto; padding:20px; }
  dialog>form[method="dialog"] { position:sticky; top:0; height:0; z-index:3; }
  dialog .close { top:-12px; right:-12px; min-height:44px; min-width:44px; }
  .review-art { height:90px; }
  #toast { bottom:68px; max-width:calc(100vw - 30px); font-size:12px; padding:9px 14px; }
}

/* Layout controls are independent of palette and gameplay styles. */
.city-panel-bar,.city-panel-rig,.atlas-toolbar .city-panel-toggle{display:none}
.map-expanded .atlas-toolbar .city-panel-toggle{display:block}
.map-expanded.city-panel-open .atlas-toolbar .city-panel-toggle,
.map-expanded.city-panel-open .atlas-toolbar [data-action="ui-layout"]{display:none}
.shell.map-expanded{--city-panel-width:min(var(--preferred-panel-width,340px),calc(100vw - 264px))}
.shell.map-expanded.city-panel-open .workspace>.panel{
 display:flex;position:absolute;z-index:12;top:12px;right:12px;bottom:12px;left:auto;
 width:var(--city-panel-width);max-width:none;height:auto;min-height:0;padding:10px;gap:6px;
 overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;
 background:var(--paper);box-shadow:0 8px 32px #0006;
}
.shell.map-expanded[data-panel-side="left"].city-panel-open .workspace>.panel{left:12px;right:auto}
.map-expanded.city-panel-open .panel>*{flex-shrink:0}
.map-expanded.city-panel-open .city-panel-bar{
 display:flex;position:sticky;top:-10px;z-index:4;align-items:center;gap:6px;min-height:48px;
 margin:-10px -10px 0;padding:2px 6px 2px 12px;background:var(--paper);border-bottom:1px solid var(--line);
}
.city-panel-bar strong{flex:1;min-width:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.city-panel-bar button{min-width:44px;min-height:44px;padding:7px;border-radius:8px;background:var(--midnight-raised,var(--paper));color:var(--ink);font-size:12px;font-weight:700}
.city-panel-bar .city-panel-close{font-size:26px;line-height:1}
.map-expanded.city-panel-open .city-panel-rig{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;font-size:12px;font-weight:700}
.city-panel-rig select{width:100%;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--midnight-raised,var(--paper));color:var(--ink);font:inherit}
.map-expanded.city-panel-open .panel .city-head{display:none}
.map-expanded.city-panel-open .city-preview{height:52px;width:25%}
.map-expanded.city-panel-open .city-heading h2{font-size:24px;margin-bottom:4px}
.map-expanded.city-panel-open .city-heading p{font-size:12px}
.map-expanded.city-panel-open .tabs button{font-size:16px;min-height:44px;height:44px;gap:6px}
.map-expanded.city-panel-open .tabs svg{width:22px;height:22px}
.map-expanded.city-panel-open .cargo-heading h3{font-size:18px;margin:0}
.map-expanded.city-panel-open .cargo-heading small,.map-expanded.city-panel-open .cargo-heading>span{font-size:11px}
.map-expanded.city-panel-open .tutorial-tip{font-size:11px;margin:0;padding:4px 6px}
.map-expanded.city-panel-open .panel .joblist{flex:none;max-height:none;min-height:0;overflow:visible}
.map-expanded.city-panel-open .job{grid-template-columns:40px minmax(0,1fr) 25px 60px 14px;min-height:78px;gap:4px;padding:6px}
.map-expanded.city-panel-open .job img{width:40px;height:54px}
.map-expanded.city-panel-open .job .jobtext>b,.map-expanded.city-panel-open .job .pay,.map-expanded.city-panel-open .cargo-weight{font-size:14px}
.map-expanded.city-panel-open .job .jobtext>span{font-size:12px}
.map-expanded.city-panel-open .job .cargo-type{font-size:10px}
.map-expanded.city-panel-open .job .pay .coin-token{width:12px;height:10px}
.map-expanded.city-panel-open .selection-summary{height:auto;min-height:44px;margin-bottom:5px;padding:0 8px;font-size:12px}
.map-expanded.city-panel-open .selection-summary button,.map-expanded.city-panel-open .manifest-links button{min-height:44px}
.map-expanded.city-panel-open .journey-destination select,.map-expanded.city-panel-open .fuel-option{min-height:44px}
.map-expanded.city-panel-open .dispatch-button{font-size:18px;min-height:48px}
.layout-settings{display:grid;gap:16px}
dialog:has(.layout-settings){width:calc(100vw - 24px);max-width:760px}
.layout-settings>label{display:grid;gap:7px;font-size:14px;font-weight:700}
.layout-settings select{width:100%;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--midnight-raised,var(--paper));color:var(--ink);font:inherit}
.layout-settings p{margin:0;color:var(--muted);font-size:12px;font-weight:400}
.layout-settings .layout-actions{display:flex;flex-wrap:wrap;gap:8px}
.layout-settings .layout-actions button{flex:1;margin:0}
.layout-settings [role="status"]{min-height:18px}
.map-expanded.city-panel-open .map-view-toggle{display:none}
@media(orientation:landscape){
 .map-expanded.city-panel-open .atlas-toolbar{right:calc(var(--city-panel-width) + 24px);display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:4px;max-width:360px}
 .map-expanded.city-panel-open .atlas-toolbar select{grid-column:1/-1;width:100%;max-width:none}
 .map-expanded.city-panel-open .atlas-info{margin:0}
 .map-expanded.city-panel-open .atlas-info>summary{justify-content:center}
 .map-expanded.city-panel-open .atlas-info>div{width:min(310px,calc(100vw - var(--city-panel-width) - 36px))}
 .map-expanded[data-panel-side="left"].city-panel-open .atlas-toolbar{left:calc(var(--city-panel-width) + 24px);right:12px}
 .map-expanded.city-panel-open .map-controls{right:calc(var(--city-panel-width) + 24px);bottom:24px}
 .map-expanded[data-panel-side="left"].city-panel-open .map-controls{left:calc(var(--city-panel-width) + 24px);right:12px}
 .map-expanded.city-panel-open .map-search{width:0;max-width:none;gap:4px;padding:4px}
 .map-expanded.city-panel-open .map-search>svg{display:none}
 .map-expanded[data-panel-side="left"].city-panel-open .map-credit{left:calc(var(--city-panel-width) + 24px)}
}
@media(orientation:portrait){
 .shell.map-expanded.city-panel-open .workspace>.panel,
 .shell.map-expanded[data-panel-side="left"].city-panel-open .workspace>.panel{left:12px;right:12px;top:auto;bottom:12px;width:auto;height:min(55dvh,480px)}
 .map-expanded.city-panel-open .map-controls{bottom:calc(min(55dvh,480px) + 24px)}
 .map-expanded.city-panel-open .map-credit{bottom:calc(min(55dvh,480px) + 12px)}
}
@media(orientation:landscape) and (min-width:600px){
 .layout-settings{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .layout-settings>p,.layout-settings>.layout-actions{grid-column:1/-1}
}

/* Navigation and surfaces shared by the browser and the offline game. */
.workspace-switch { display:none; }
.atlas-toolbar .full-map-menu { display:none; }
.map-expanded:not(.city-panel-open) .full-map-menu { display:block; }
.game-menu-button {
 min-height:44px; flex:none; gap:8px; padding:0 14px; border:1px solid var(--line);
 border-radius:10px; background:var(--midnight-raised); font-size:15px; font-weight:700;
}
.game-menu-button svg,.menu-links svg,.workspace-switch svg { width:20px; height:20px; flex:none; }
.topbar .header-controls { margin-left:auto; }
.game-menu { max-width:1080px; }
.menu-tiles,.menu-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.menu-tile {
 display:flex; align-items:center; gap:14px; min-width:0; min-height:90px; padding:12px;
 text-align:left; color:var(--ink); border-radius:14px; background:var(--midnight-surface); border:1px solid var(--line);
}
.menu-tile-art { display:grid; place-items:center; flex:0 0 clamp(64px,9vw,112px); }
.menu-tile-art img { width:100%; height:72px; object-fit:contain; }
.menu-tile b,.menu-tile small { display:block; }
.menu-tile b { font-size:clamp(17px,2vw,22px); }
.menu-tile small { margin-top:4px; font-size:13px; }
.menu-tile>svg { flex:none; width:16px; height:16px; margin-left:auto; color:var(--teal); }
.menu-links { margin-top:20px; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); }
.menu-links button { display:flex; align-items:center; gap:10px; text-align:left; }
.menu-links svg { color:var(--teal); }
.menu-tile:hover,.menu-tile:focus-visible { border-color:var(--teal); }
.page,.career-links { --page-gutter:clamp(14px,3vw,32px); }
.page { width:100%; padding:clamp(18px,3vw,32px) var(--page-gutter); }
.page .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(10px,1.5vw,20px); }
.page :is(.card,.stack,.split>*,.row>*,.page-header>*,.career-form label) { min-width:0; }
.page .card { padding:clamp(16px,2vw,24px); }
.card .row,.page-header,.receipt-highlight .row { flex-wrap:wrap; }
.page .pill { white-space:normal; }
.page :is(select,input),dialog :is(select,input) { max-width:100%; }
.ledger { width:100%; }
.recovery-code,.review-line,.menu-tile { overflow-wrap:anywhere; }
.career-links,.workspace-switch {
 flex-wrap:nowrap; gap:6px; overflow-x:auto; overscroll-behavior-x:contain;
 scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.career-links {
 width:100%; max-width:1400px; margin:0 auto; padding:8px var(--page-gutter);
 border-bottom:1px solid var(--line);
}
.career-links button,.workspace-switch button {
 display:flex; align-items:center; justify-content:center; flex:none; gap:7px; min-height:44px;
 padding:8px 13px; border-radius:9px; border:1px solid transparent;
 background:transparent; color:var(--muted); font-weight:700; scroll-snap-align:start;
}
.career-links [aria-current="page"],.workspace-switch [aria-pressed="true"] {
 background:var(--midnight-selected); color:var(--teal); border-color:var(--line);
}
.workspace>.panel { container-type:inline-size; }
.map-shell:not(.map-expanded) .regional-panel { overflow-y:auto; overscroll-behavior-y:contain; }
.regional-panel>* { flex-shrink:0; }
.regional-panel .joblist { flex:1 1 auto; }
.regional-panel .jobtext,.city-heading { min-width:0; overflow-wrap:anywhere; }
.city-heading h2,.cargo-heading h3 { line-height:1.12; }
.manifest-links { flex-wrap:wrap; }
.manifest-links button { text-align:start; }
/* The same cargo card can live in a narrow desktop sidebar or a wide phone pane. */
@container (max-width:470px) {
 .regional-panel .job,.map-expanded.city-panel-open .regional-panel .job {
  grid-template-columns:48px auto minmax(0,1fr) 18px;
  grid-template-areas:"art text text check" "art weight price check";
  grid-template-rows:auto auto; gap:6px 9px; padding:10px; min-height:88px;
 }
 .regional-panel .job img,.map-expanded.city-panel-open .regional-panel .job img { grid-area:art; width:48px; height:54px; }
 .regional-panel .job .jobtext { grid-area:text; align-self:end; }
 .regional-panel .job .job-check { grid-area:check; }
 .regional-panel .job .cargo-weight { grid-area:weight; align-self:start; font-size:14px; }
 .regional-panel .job .pay { grid-area:price; justify-self:end; align-self:start; padding:0; font-size:14px; }
 .regional-panel .job .jobtext>b { font-size:16px; }
 .regional-panel .job .jobtext>span { font-size:14px; }
 .regional-panel .job .cargo-type,.regional-panel .job .cargo-type em { font-size:11px; }
}
.mapviewport { container-type:size; }
@container (max-width:520px) {
 .map-shell:not(.map-expanded) .atlas-toolbar {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:4px; left:8px; right:8px; top:8px;
 }
 .map-shell:not(.map-expanded) .atlas-toolbar select { grid-column:auto; width:100%; max-width:none; min-width:0; }
 .map-shell:not(.map-expanded) .atlas-toolbar [data-action="atlas-world"] { display:none; } /* World is also an area choice. */
 .map-shell:not(.map-expanded) .atlas-info { margin:0; }
 .map-controls,.map-expanded .map-controls { flex-wrap:nowrap; gap:4px; }
 .map-search,.map-expanded .map-search { flex:1 1 0; width:0; min-width:0; max-width:none; padding:0 0 0 8px; gap:0; }
 .map-search>svg,.map-view-toggle span { display:none; }
 .map-controls .map-view-toggle { min-width:44px; justify-content:center; }
 .map-search button { min-width:44px; min-height:44px; display:grid; place-items:center; }
}
dialog { max-height:calc(100dvh - 20px); overflow:auto; overscroll-behavior:contain; }
dialog>form[method="dialog"] { position:sticky; top:0; height:0; z-index:3; }
dialog .close,dialog:has(.atlas-route-form) .close { top:-6px; right:-6px; width:44px; height:44px; }
dialog h2 { padding-right:44px; }

/* One section at a time when a split would compromise either reading or panning. */
@media (max-width:599px), (orientation:portrait) and (max-width:900px), (max-width:1000px) and (max-height:600px) {
 .shell:not(.map-expanded) {
  height:100dvh; min-height:0; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:flex; flex-direction:column; overflow:hidden; background:var(--midnight-background);
 }
 .shell>.topbar {
  flex:none; display:flex; flex-wrap:nowrap; gap:8px; width:100%; min-height:52px; height:auto; padding:4px 10px;
 }
 .topbar .brandmark { min-width:0; min-height:44px; flex:0 1 auto; }
 .topbar .ltw-brand--compact .ltw-globe { width:38px; height:38px; }
 .topbar .ltw-name>strong { font-size:16px; }
 .topbar .header-controls { flex:none; width:auto; gap:5px; }
 .header-controls .rank-chip,.header-controls .balance-chip { flex:none; min-height:44px; height:auto; padding:5px 8px; font-size:14px; gap:5px; }
 .header-controls .rank-track,.header-controls .header-icon,.balance-chip>svg { display:none; }
 .shell>.sidebar { display:none; }
 .shell:not(.map-expanded)>.content { flex:1; min-height:0; height:auto; padding:0; overflow:auto; }
 .map-shell:not(.map-expanded)>.content { display:flex; flex-direction:column; overflow:hidden; }
 .map-shell:not(.map-expanded) .notice { position:static; flex:none; margin:0; }
 .map-shell:not(.map-expanded) .workspace { flex:1; min-height:0; width:100%; display:grid; height:auto; grid-template: auto minmax(0,1fr) / minmax(0,1fr); }
 .map-shell:not(.map-expanded) .workspace-switch { display:flex; padding:4px 10px; border-bottom:1px solid var(--line); }
 .workspace-switch button { min-height:44px; font-size:14px; }
 .map-shell:not(.map-expanded) .mapzone,.map-shell:not(.map-expanded) .workspace>.panel { grid-area:2 / 1; width:100%; min-height:0; height:100%; }
 .map-shell:not(.map-expanded) .mapzone { grid-template: minmax(0,1fr) / minmax(0,1fr); }
 .map-shell:not(.map-expanded) .mapviewport { grid-area:1 / 1; height:100%; min-height:0; }
 .map-shell:not(.map-expanded) .workspace>.panel {
  visibility:hidden; overflow:auto; padding:12px max(14px,calc((100% - 740px) / 2)); gap:10px; border:0;
 }
 .map-shell:not(.map-expanded) [data-pane="cargo"]>.panel { visibility:visible; }
 .map-shell:not(.map-expanded) [data-pane="cargo"]>.mapzone,
 .map-shell:not(.map-expanded) [data-pane="trucks"] .mapviewport { visibility:hidden; }
 .map-shell:not(.map-expanded) .fleet-deck { display:none; }
 .map-shell:not(.map-expanded) [data-pane="trucks"] .fleet-deck {
  display:block; grid-area:1 / 1; width:100%; padding:12px; overflow:auto; border:0; border-radius:0;
 }
 .workspace[data-pane="trucks"] .fleet-cards { display:grid; align-content:start; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:10px; height:auto; padding:2px; overflow:visible; }
 .workspace[data-pane="trucks"] .vehicle-card { min-width:0; width:100%; max-width:none; min-height:136px; padding:8px 12px; }
 .workspace[data-pane="trucks"] .vehicle-name small,.workspace[data-pane="trucks"] .vehicle-bottom { font-size:12px; }
 .map-shell:not(.map-expanded) .panel .tabs { display:none; }
 .map-shell:not(.map-expanded) .city-panel-rig { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; order:1; }
 .map-shell:not(.map-expanded) .panel>:not(.city-head,.city-panel-bar,.city-panel-rig) { order:2; }
 .map-shell:not(.map-expanded) .panel .joblist { display:grid; flex:none; min-height:0; max-height:none; overflow:visible; gap:8px; }
 .map-shell:not(.map-expanded) .city-head { min-height:64px; gap:12px; justify-content:flex-start; }
 .map-shell:not(.map-expanded) .city-preview { width:84px; height:62px; }
 .map-shell:not(.map-expanded) .city-heading h2 { font-size:clamp(22px,5vw,30px); }
 .map-shell:not(.map-expanded) .city-heading p,.map-shell:not(.map-expanded) .tutorial-tip { font-size:13px; }
 .map-shell:not(.map-expanded) .cargo-heading h3 { margin:0; font-size:20px; }
 .map-shell:not(.map-expanded) .dispatch-button { min-height:48px; font-size:19px; }
 .map-shell:not(.map-expanded) .map-controls { left:8px; right:8px; bottom:22px; }
 .map-shell:not(.map-expanded) .map-search { max-width:300px; }
 .map-shell:not(.map-expanded) .atlas-toolbar select { max-width:280px; }
 .map-controls .zoom-control,.atlas-toolbar>button,.atlas-info>summary,.atlas-toolbar select { min-width:44px; min-height:44px; }
 .atlas-info>div { max-height:calc(100dvh - 210px); }
 .page .split { grid-template-columns:minmax(0,1fr); }
 .page-header { margin-bottom:16px; }
 .page .page-header h1 { font-size:clamp(25px,4vw,34px); }
 .menu-links { gap:8px; }
 .intro { min-width:0; }
 .intro:has(>.ltw-brand) { padding:clamp(16px,4vw,32px); }
 .intro>.ltw-brand { max-width:300px; margin-bottom:12px; }
 .intro h1 { font-size:clamp(30px,6.5vw,44px); margin-bottom:14px; }
 .intro select,.intro input,.map-search input,.career-form select { font-size:16px; }
 .starter-note { gap:8px; margin:14px 0; }
 #toast { bottom:calc(12px + env(safe-area-inset-bottom)); width:max-content; max-width:calc(100vw - 24px); }
}
@media (orientation:portrait) and (max-width:900px) {
 .onboarding { display:flex; flex-direction:column; }
 .intro { max-width:none; }
 .intro-art { height:clamp(145px,24vh,260px); min-height:0; }
}
@media (max-width:530px) {
 .topbar .ltw-name { display:none; }
 .menu-tiles { grid-template-columns:minmax(0,1fr); gap:8px; }
 .menu-tile { min-height:72px; padding:7px 12px; }
 .menu-tile-art img { height:58px; }
 .menu-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .menu-links button { padding:10px; font-size:14px; }
 .receipt-highlight .row>div { flex:1 1 90px; }
}
@media (max-width:370px) {
 .topbar .brandmark { display:none; }
 .game-menu-button { padding:0 10px; }
}

/* Search supplements the complete native starting-city list. */
#starting-city-search{width:100%;margin:8px 0 0;font-size:16px;min-height:44px}
.starting-city-results:not(:empty){display:grid;gap:0;max-height:228px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:6px;background:var(--midnight-background)}
.starting-city-results button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:11px 12px;min-height:44px;text-align:left;border:0;border-radius:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink)}
.starting-city-results button:last-child{border-bottom:0}.starting-city-results button:hover,.starting-city-results button:focus-visible{background:var(--midnight-selected)}
.starting-city-results button span{font-size:12px;color:var(--muted)}
.city-search-status{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 16px}

.onboarding .intro{padding:24px clamp(22px,3.4vw,48px);justify-content:flex-start;max-width:none}
.onboarding .intro>.ltw-brand--hero{max-width:280px;margin:0 0 16px}
.onboarding .intro h1{font-size:clamp(30px,3vw,42px);line-height:1.1;margin:10px 0 14px}
.onboarding .intro>p{margin:0 0 16px;max-width:500px;line-height:1.6;font-size:14px}
.onboarding .starter-note{margin:0 0 18px;padding:12px 0;gap:18px}
.onboarding .intro form{max-width:500px}.onboarding .intro .hint{font-size:12px;line-height:1.5}
.onboarding .intro-art{position:sticky;top:0;height:100dvh;min-height:0;isolation:isolate}
.intro-art>.starting-city-map{position:absolute;inset:0;z-index:0;cursor:default;pointer-events:none}
.onboarding .intro-art:after{content:'';position:absolute;inset:0;height:auto;z-index:1;pointer-events:none;background:linear-gradient(180deg,#122c3e12 40%,#122c3e66 68%,#122c3ef5 100%)}
.intro-art>.starter-rig,.intro-art>.location{z-index:2}
.intro-art>.location{max-width:55%}
.starting-city-marker{background:transparent;border:0}
.starting-city-pin{position:absolute;left:0;top:0;width:22px;height:22px;transform:translate(-50%,-50%);border:4px solid #fff4cb;border-radius:50%;background:#f4b94d;box-shadow:0 0 0 9px #f4b94d40,0 3px 12px #122c3e99}
.starting-city-label{position:absolute;top:23px;left:0;transform:translateX(-50%);padding:7px 13px;border:1px solid #f7d78a;border-radius:9px;background:#173344f2;box-shadow:0 4px 14px #10233244;color:#fff4d3;font:700 14px/1.3 'Segoe UI',sans-serif;white-space:nowrap}
@media(max-width:900px) and (orientation:portrait){
 .starting-city-pin{width:17px;height:17px;border-width:3px;box-shadow:0 0 0 6px #f4b94d40}
 .starting-city-label{top:17px;padding:5px 10px;font-size:12px}
 .intro-art>.starter-rig{width:34%;max-height:145px;object-fit:contain;bottom:3%;right:1%}
 .intro-art>.location{left:5%;bottom:6%;padding:10px 14px}
}
@media(max-height:500px) and (orientation:landscape){.starting-city-label{font-size:12px}.intro-art>.starter-rig{width:34%;right:0}.intro-art>.location{left:5%;bottom:5%;padding:10px 14px}}
.onboarding .intro input{min-height:44px;padding:10px 12px;margin-top:6px}
.onboarding .intro details{margin-top:14px}.onboarding .intro>p:last-child{font-size:11px;margin:14px 0 0!important}
@media(max-width:900px) and (orientation:portrait){.onboarding .intro-art{position:relative;height:280px;order:-1}.onboarding .intro>.ltw-brand--hero{max-width:210px}.onboarding .intro{padding:20px}.onboarding .intro h1{font-size:30px}}