/* Loaded after the theme styles so phone layout has a single, final owner. */
.mobile-brand-name { display:none; }
.mobile-ratio-guide { display:none; }
.city-mode-filter-options { min-width:0; }
.city-mode-filter-options > summary { display:none; }

@media (max-width:680px), (max-width:960px) and (max-height:500px) and (pointer:coarse) {
  :root {
    --mobile-viewport-height:100dvh;
    --mobile-viewport-top:0px;
    --mobile-header-top:calc(var(--mobile-viewport-top) + env(safe-area-inset-top) + 8px);
    --mobile-panel-top:calc(var(--mobile-header-top) + 60px);
    --mobile-panel-height:calc(var(--mobile-viewport-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 76px);
    --mobile-surface:#122534;
  }
  :root[data-visual-theme="light"] { --mobile-surface:#f5f8f4; }
  html body .page .topline {
    position:fixed!important;left:8px!important;right:8px!important;top:var(--mobile-header-top)!important;
    bottom:auto!important;width:auto!important;height:48px!important;display:flex!important;align-items:center;
    gap:8px;margin:0;padding:0;transform:none!important;translate:none!important;z-index:2000;
  }
  html body .page .topline .brand {
    position:relative!important;inset:auto!important;display:flex!important;flex:1;min-width:0;width:auto!important;
    height:48px!important;box-sizing:border-box;padding:0 14px;gap:0;transform:none!important;translate:none!important;
    border-radius:14px;white-space:nowrap;cursor:default;touch-action:pan-y;
  }
  .topline .brand-caption,.topline .brand-stats { display:none!important; }
  .topline .mobile-brand-name { display:block;font-size:19px;font-weight:800;letter-spacing:.06em; }
  html body .page .topline .top-actions {
    position:relative!important;inset:auto!important;display:flex;flex:0 0 auto;align-items:center;gap:6px;
    width:auto!important;height:48px!important;transform:none!important;translate:none!important;
  }
  #visualThemePicker > summary,html body .top-actions #openRouterSettingsBtn {
    box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;
    min-width:44px;min-height:48px;height:48px;padding:0 10px;font-size:12px;white-space:nowrap;border-radius:12px;
  }
  .visual-theme-menu { right:0;width:min(270px,calc(100vw - 24px));box-sizing:border-box; }
  .visual-theme-menu button { min-height:52px; }
  .visual-theme-menu strong { font-size:14px; }
  .visual-theme-menu small { font-size:11px;line-height:1.35; }
  .panel-drag-handle { cursor:default!important;touch-action:pan-y!important; }
  .city-mode-drag-grip,.airport-mode-drag-grip,.map-legend-drag-handle,.city-mode-resize-handle { display:none!important; }

  html body #cityModePanel:not([hidden]),html body #airportModePanel:not([hidden]) {
    position:fixed!important;box-sizing:border-box;left:8px!important;right:8px!important;top:var(--mobile-panel-top)!important;
    bottom:auto!important;width:auto!important;min-width:0!important;height:auto!important;
    max-height:var(--mobile-panel-height)!important;padding:0 12px 12px!important;
    transform:none!important;translate:none!important;overflow:auto!important;overscroll-behavior:contain;
    border-radius:18px;display:block!important;z-index:1500!important;scroll-padding-top:76px;
  }
  html body #cityModePanel .city-mode-heading,html body #airportModePanel .airport-mode-heading {
    position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;
    min-height:64px;margin:0 -12px 12px;padding:8px 12px;box-sizing:border-box;
    background:var(--mobile-surface)!important;border-bottom:1px solid var(--theme-border);touch-action:pan-y!important;
  }
  .city-mode-heading > div,.airport-mode-heading > div { flex:1;min-width:0; }
  #cityModePanel .city-mode-heading strong,#airportModePanel .airport-mode-heading strong { font-size:17px;letter-spacing:0; }
  #cityModePanel .city-mode-heading small,#airportModePanel .airport-mode-heading small {
    font-size:11px;line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  #cityModePanel .city-mode-heading button,#airportModePanel .airport-mode-heading button {
    flex:0 0 44px;box-sizing:border-box;width:44px;height:44px;min-width:44px;font-size:25px;border-radius:11px;
  }
  #cityModePanel .city-mode-icon,#airportModePanel .airport-mode-icon { display:none; }
  #cityModePanel .city-mode-help,#airportModePanel .airport-mode-help { display:none; }
  #cityModePanel .city-mode-search { display:grid;grid-template-columns:1fr;gap:6px;margin:0 0 10px; }
  #cityModePanel .city-mode-search > span { font-size:12px; }
  #cityModePanel .city-mode-search input,#airportModePanel input,
  .modal input:not([type="radio"]):not([type="checkbox"]),.modal textarea,.modal select,
  .openrouter-dialog input:not([type="radio"]):not([type="checkbox"]),.openrouter-dialog textarea,.openrouter-dialog select {
    box-sizing:border-box;min-width:0;width:100%;min-height:48px;font-size:16px!important;border-radius:11px;
  }
  #cityModeFilterOptions { border:1px solid var(--theme-border);border-radius:12px;margin:0 0 12px; }
  #cityModeFilterOptions > summary {
    display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;box-sizing:border-box;list-style:none;
    font-size:13px;font-weight:800;cursor:pointer;color:var(--theme-text);
  }
  #cityModeFilterOptions > summary::-webkit-details-marker { display:none; }
  #cityModeFilterOptions > summary::after { content:'＋';margin-left:auto;font-size:20px; }
  #cityModeFilterOptions[open] > summary::after { content:'−'; }
  #cityModeFilterSummary { min-width:0;font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  #cityModePanel .city-mode-filter-block { display:block;margin:12px; }
  #cityModePanel .city-mode-filter-label { display:block;margin-bottom:8px;font-size:12px; }
  #cityModePanel .city-mode-tier-filters,#cityModePanel .city-mode-minority-filters {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  }
  #cityModePanel .city-mode-tier-filters button,#cityModePanel .city-mode-minority-filters button {
    width:100%!important;max-width:none!important;min-width:0;min-height:44px;height:auto;padding:6px 2px;font-size:11px;
  }
  #cityModePanel .city-mode-tier-filters button b { font-size:11px; }
  #cityModePanel .city-mode-filter-note { display:block;margin:12px;font-size:11px;line-height:1.65; }
  #cityModePanel .city-mode-filter-note a { display:inline-block;margin-left:5px; }
  #cityModePanel .city-mode-results-heading { font-size:13px;min-height:32px; }
  #cityModePanel .city-mode-results-heading small { font-size:12px; }
  #cityModePanel .mobile-ratio-guide { display:block;font-size:11px;line-height:1.5;margin:0 0 8px;color:var(--theme-muted); }
  html body #cityModePanel .city-mode-list {
    display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:auto!important;
    flex:none!important;min-height:0;max-height:none!important;overflow:visible!important;gap:8px;padding:0;
  }
  html body #cityModePanel .city-mode-option {
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(76px,auto);grid-template-rows:auto;
    gap:8px;min-height:60px;height:auto;padding:10px 12px;box-sizing:border-box;border-radius:12px;
  }
  #cityModePanel .city-mode-option-name { width:auto;max-width:none;flex:auto;font-size:16px;line-height:1.4;letter-spacing:0; }
  #cityModePanel .city-mode-option-tier.city-rank-tag { grid-column:auto;height:30px;padding:3px 6px; }
  #cityModePanel .city-mode-option-tier.city-rank-tag b { font-size:11px;padding:3px; }
  #cityModePanel .city-mode-option-meta { display:grid;gap:3px;min-width:0;text-align:right;font-size:11px; }
  #cityModePanel .city-mode-option-meta > span:first-child { display:block;max-width:100%;font-size:10px; }
  #cityModePanel .city-mode-option-share { padding:0;border:0;margin:0;font-size:12px;line-height:1.4; }
  #cityModePanel .city-mode-note { display:block;font-size:11px;line-height:1.6;margin-top:12px; }
  #cityModePanel .city-mode-empty { font-size:14px;padding:16px 0;line-height:1.7; }

  #airportModePanel .airport-mode-tools { display:block; }
  #airportModePanel .airport-mode-search { display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:12px;font-size:12px; }
  #airportModePanel .airport-mode-filters { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px; }
  #airportModePanel .airport-mode-filters button { min-height:44px;font-size:12px; }
  #airportModePanel .airport-mode-list { display:grid;grid-template-columns:1fr;max-height:none!important;overflow:visible;gap:8px; }
  #airportModePanel .airport-mode-option { min-height:64px;padding:10px;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;border-radius:12px; }
  #airportModePanel .airport-mode-option-copy strong { font-size:15px; }
  #airportModePanel .airport-mode-option-copy small { font-size:11px; }
  #airportModePanel .airport-mode-option-count { font-size:12px; }
  #airportModePanel .airport-mode-option-code { color:#152635!important;font-size:13px;font-weight:900; }
  #airportModePanel .airport-mode-note { display:block;font-size:11px;line-height:1.6;margin-top:12px; }

  html body #railwayRoutePanel:not([hidden]),html body #railwayRoutePanel[data-collapsed="true"]:not([hidden]) {
    position:fixed!important;box-sizing:border-box;left:8px!important;right:8px!important;top:auto!important;
    bottom:calc(100dvh - var(--mobile-viewport-top) - var(--mobile-viewport-height) + env(safe-area-inset-bottom) + 8px)!important;
    width:auto!important;min-width:0!important;height:auto!important;max-height:min(70dvh,var(--mobile-panel-height))!important;
    display:block!important;padding:0 12px 12px!important;transform:none!important;translate:none!important;
    overflow:auto!important;border-radius:18px;z-index:1500!important;
  }
  html body #railwayRoutePanel > .railway-route-heading {
    display:grid!important;grid-template-columns:minmax(0,1fr) 44px 44px;grid-template-rows:auto;gap:8px;
    position:sticky;top:0;z-index:5;margin:0 -12px 12px!important;padding:10px 12px!important;
    min-height:64px!important;background:var(--mobile-surface)!important;touch-action:pan-y!important;
  }
  #railwayRoutePanel .railway-route-heading-copy { grid-column:1;grid-row:1; }
  #railwayRoutePanel .railway-route-heading-icon { display:none; }
  #railwayRoutePanel .railway-route-heading strong { font-size:17px; }
  #railwayRoutePanel .railway-route-close { grid-column:2;grid-row:1; }
  #railwayRoutePanel .railway-route-dismiss { grid-column:3;grid-row:1; }
  #railwayRoutePanel .railway-route-close,#railwayRoutePanel .railway-route-dismiss { width:44px;height:44px;min-width:44px;border-radius:11px;font-size:25px; }
  #railwayRoutePanel .railway-route-mode-buttons { grid-column:1/-1;grid-row:2;gap:6px; }
  #railwayRoutePanel .railway-route-mode { min-height:52px;padding:6px;font-size:12px; }
  #railwayRoutePanel .railway-route-mode-name { font-size:11px; }
  #railwayRoutePanel .railway-route-reset { grid-column:1/-1;grid-row:3;min-height:44px; }
  html body #railwayRoutePanel[data-collapsed="true"]:not([hidden]) { padding-bottom:0!important; }
  html body #railwayRoutePanel[data-collapsed="true"] > .railway-route-heading { margin-bottom:0!important; }
  #railwayRoutePanel button:not([hidden]),#railwayRoutePanel input,#railwayRoutePanel select { min-height:44px; }
  #railwayRoutePanel input,#railwayRoutePanel select { font-size:16px; }
  #railwayRoutePanel .railway-route-stops { display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:6px; }
  #railwayRoutePanel .railway-route-stop-name { font-size:13px;white-space:normal; }
  #railwayRoutePanel .railway-route-tabs { margin-top:8px; }

  html body #cityInfoCard:not([hidden]),html body #heritageInfoCard:not([hidden]),html body #flightFocusCard:not([hidden]) {
    position:fixed!important;box-sizing:border-box;left:8px!important;right:8px!important;top:auto!important;
    bottom:calc(100dvh - var(--mobile-viewport-top) - var(--mobile-viewport-height) + env(safe-area-inset-bottom) + 8px)!important;
    width:auto!important;height:auto!important;max-height:min(65dvh,calc(var(--mobile-panel-height) - 56px))!important;
    transform:none!important;translate:none!important;overflow:auto!important;padding:0 12px 12px;border-radius:18px;
    scroll-padding-top:72px;z-index:1600!important;
  }
  #cityInfoCard::before,#heritageInfoCard::before { display:none!important; }
  #cityInfoCard .city-info-header,#heritageInfoCard .city-info-header,#flightFocusCard > header {
    position:sticky;top:0;z-index:5;display:flex;align-items:center;min-height:64px;box-sizing:border-box;
    margin:0 -12px 12px;padding:10px 12px;background:var(--mobile-surface)!important;
  }
  #cityInfoClose,#heritageInfoClose,#flightFocusClose { min-width:44px;width:44px;height:44px;flex:0 0 44px;font-size:25px;border-radius:11px; }
  #cityInfoCard button,#heritageInfoCard button,#flightFocusCard button { min-height:44px; }
  #cityInfoCard .city-info-recommendations p,#heritageInfoCard p { font-size:13px;line-height:1.75; }
  html body #cityModeRestore,html body #airportModeRestore {
    position:fixed!important;left:8px!important;right:auto!important;top:var(--mobile-panel-top)!important;bottom:auto!important;
    transform:none!important;min-height:48px;padding:8px 14px;font-size:13px;z-index:1500;
  }
  html body .workspace .side:not(.side-minimized) {
    position:fixed!important;box-sizing:border-box;left:8px!important;right:8px!important;top:var(--mobile-panel-top)!important;
    bottom:auto!important;width:auto!important;height:auto!important;max-height:var(--mobile-panel-height)!important;
    transform:none!important;translate:none!important;overflow:auto!important;border-radius:18px;padding:12px;z-index:1500;
  }
  .side:not(.side-minimized) .side-top { position:sticky;top:-12px;background:var(--mobile-surface)!important;z-index:2;min-height:56px; }
  .side button { min-height:44px; }
  .side .place-list { grid-template-columns:1fr; }
  .side .place-item { grid-template-columns:18px minmax(0,1fr) 44px;min-height:104px;padding:8px;gap:8px; }
  .side .place-city { font-size:15px; }
  .side .place-meta,.side .place-note { font-size:12px;line-height:1.5; }
  .side .item-tools { display:grid;grid-template-columns:44px;gap:4px;align-content:start; }
  .side .item-tools button { box-sizing:border-box;min-width:44px;width:44px;min-height:44px;height:44px;font-size:18px; }
  html body .workspace .side.side-minimized {
    left:auto!important;right:8px!important;top:calc(var(--mobile-panel-top) + 120px)!important;bottom:auto!important;
    width:max-content!important;transform:none!important;translate:none!important;z-index:850;
  }
  .side .side-expand { min-height:44px!important;font-size:12px; }
  html body .map-column .leaflet-top.leaflet-right { top:var(--mobile-panel-top)!important;right:8px!important;left:8px!important; }
  html body .leaflet-control-layers.layer-control-game-menu {
    width:100%!important;max-width:none!important;box-sizing:border-box;margin:0!important;
    transform:none!important;translate:none!important;height:auto!important;min-height:56px!important;padding:6px!important;
  }
  html body .leaflet-control-layers.layer-control-detail-mode:not(.layer-control-minimized) { max-height:var(--mobile-panel-height)!important;overflow:auto!important; }
  html body .leaflet-control-layers.layer-control-game-menu.layer-control-minimized {
    width:max-content!important;min-height:48px!important;background:transparent!important;border:0!important;padding:0!important;
  }
  .leaflet-control-layers button { min-height:44px; }
  .leaflet-control-layers .layer-control-heading > strong { font-size:12px; }
  .leaflet-control-layers.layer-control-game-menu .layer-control-heading > button { flex-basis:44px;min-width:44px;min-height:44px!important;height:44px;font-size:13px; }
  .leaflet-control-layers.layer-control-game-menu .layer-control-expand { min-height:48px!important;font-size:13px;padding:8px 12px; }
  .layer-control-detail-mode .leaflet-control-layers-list { font-size:14px; }
  html body .leaflet-control-layers.layer-control-detail-mode .leaflet-control-layers-list { max-height:none;overflow:visible;width:100%; }
  .layer-control-detail-mode .leaflet-control-layers-overlays label,
  .layer-control-detail-mode .leaflet-control-layers-base label,
  .layer-control-detail-mode .map-visited-toggle label { min-height:44px;display:flex;align-items:center;gap:8px; }
  .layer-control-detail-mode .rail-guide summary { min-height:44px;display:flex;align-items:center;font-size:13px; }
  .layer-control-detail-mode .map-fill-control label { font-size:12px; }
  .layer-control-detail-mode .map-fill-control select { min-height:44px;font-size:16px; }
  html body .map-column .leaflet-control-container .leaflet-bottom.leaflet-left {
    position:fixed;left:8px;right:auto;top:auto;bottom:calc(env(safe-area-inset-bottom) + 88px);
  }
  .map-explore-preset-label,.map-layer-detail-toggle { font-size:12px; }
  html body .page .map-legend { position:fixed!important;left:8px!important;right:8px!important;top:calc(var(--mobile-panel-top) + 64px)!important;width:auto!important;max-width:none;transform:none!important;translate:none!important; }
  html body .map-column .leaflet-top.leaflet-left { top:calc(var(--mobile-panel-top) + 120px)!important;left:8px!important; }
  .leaflet-control-zoom { margin:0!important;translate:none!important; }
  .leaflet-control-zoom a { width:44px!important;height:44px!important;line-height:44px!important; }
  html body #concentrationModeLaunchers { position:fixed;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom) + 8px);width:auto;gap:6px;transform:none; }
  html body #concentrationModeLaunchers > button { min-height:72px!important;border-radius:14px!important;padding:8px 4px!important; }
  #concentrationModeLaunchers .railway-route-reopen-copy strong { font-size:12px!important; }
  #concentrationModeLaunchers .railway-route-reopen-icon { width:28px!important;height:28px!important;font-size:21px!important; }
  #concentrationModeLaunchers .railway-route-reopen-cta { display:none; }
  :root[data-mobile-focus]:not([data-mobile-focus=""]) .map-legend,
  :root[data-mobile-focus]:not([data-mobile-focus=""]) .leaflet-control-zoom,
  :root[data-mobile-focus]:not([data-mobile-focus=""]) .leaflet-control-scale,
  :root[data-mobile-focus]:not([data-mobile-focus=""]):not([data-mobile-focus="layers"]) .leaflet-control-layers,
  :root[data-mobile-focus]:not([data-mobile-focus=""]) .side.side-minimized,
  :root[data-mobile-focus]:not([data-mobile-focus=""]) #concentrationModeLaunchers { display:none!important; }
  .modal-backdrop { z-index:3000; }
  .modal { max-height:calc(var(--mobile-viewport-height) - 24px)!important; }
  .modal button,.openrouter-dialog button { min-height:44px; }
  .modal .close { min-width:44px;min-height:44px;font-size:24px; }
  .modal .place-kind label span { min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center; }
  .openrouter-dialog { max-height:calc(var(--mobile-viewport-height) - 24px)!important; }
  .openrouter-shell { max-height:calc(var(--mobile-viewport-height) - 24px)!important; }
  .toast { bottom:calc(env(safe-area-inset-bottom) + 92px);max-width:calc(100vw - 40px);font-size:12px;pointer-events:none; }
  :root[data-visual-theme="light"] #cityModePanel,
  :root[data-visual-theme="light"] #airportModePanel,
  :root[data-visual-theme="light"] #railwayRoutePanel,
  :root[data-visual-theme="light"] #cityInfoCard,
  :root[data-visual-theme="light"] #heritageInfoCard,
  :root[data-visual-theme="light"] #flightFocusCard { background:#f5f8f4!important;color:#233c49!important; }
  :root[data-visual-theme="light"] #cityModePanel .city-mode-option,
  :root[data-visual-theme="light"] #airportModePanel .airport-mode-option { background:#fff!important;color:#233c49!important; }
  :root[data-visual-theme="light"] #cityModePanel .city-mode-option-name { color:#233c49!important; }
  :root[data-visual-theme="light"] #cityModePanel .city-mode-option-meta > span,
  :root[data-visual-theme="light"] #cityModePanel .city-mode-heading small,
  :root[data-visual-theme="light"] #airportModePanel .airport-mode-heading small,
  :root[data-visual-theme="light"] #cityModePanel .city-mode-note { color:#4d6877!important; }
  :root[data-visual-theme="light"] #cityModePanel input,
  :root[data-visual-theme="light"] #airportModePanel input { background:#fff!important;color:#233c49!important; }
  :root[data-visual-theme="light"] #cityModePanel .city-mode-search > span,
  :root[data-visual-theme="light"] #cityModePanel .city-mode-results-heading,
  :root[data-visual-theme="light"] #cityModePanel .city-mode-results-heading small,
  :root[data-visual-theme="light"] #airportModePanel .airport-mode-search > span,
  :root[data-visual-theme="light"] #airportModePanel .airport-mode-option-count { color:#233c49!important; }
}

@media (max-width:960px) and (max-height:500px) and (pointer:coarse) {
  .leaflet-control-scale { display:none!important; }
  #cityModePanel .city-mode-search > span { display:none; }
  #cityModePanel .city-mode-heading small { display:none; }
  html body #cityModePanel .city-mode-heading { min-height:56px;padding-block:6px;margin-bottom:8px; }
  #cityModePanel .city-mode-search { margin-bottom:8px; }
  #cityModeFilterOptions { margin-bottom:6px; }
}

@media (max-width:360px) {
  .topline .mobile-brand-name { font-size:17px; }
  html body .page .topline .brand { padding:0 10px; }
  html body .top-actions #openRouterSettingsBtn { padding:0 7px;font-size:11px; }
  #cityModePanel .city-mode-heading small,#airportModePanel .airport-mode-heading small { font-size:10px; }
  html body #cityModePanel .city-mode-option { grid-template-columns:minmax(0,1fr) auto 70px;gap:6px;padding:10px 8px; }
  #cityModePanel .city-mode-option-name { font-size:15px; }
}