/* Keep the click target, current page and shop together inside the viewport. */
@container game-shell (max-width: 1120px) {
  #main .cc-overview {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: 'landmark feed store';
  }
  #main .cc-overview > .cc-landmark { padding: 16px 8px var(--cc-dock-clearance); }
  .cc-landmark .cc-company-name { padding: 8px 16px; font-size: 14px; }
  .cc-landmark .factory-scene { height: clamp(100px, 22vw, 240px); }
  .cc-landmark .briefcase-scene { padding-inline: 0; }
  .cc-scrollbars { display: block; }
  .cc-management-nav, .cc-workspace-menu .cc-middle-tabs { grid-template-columns: minmax(0, 1fr); }
  .cc-management-nav .nav-item, .cc-middle-tabs > button {
    min-width: 0; min-height: 44px; padding: 6px 4px; white-space: normal;
  }
  .cc-feed .management-grid, .cc-feed .research-grid, .cc-feed .market-grid,
  .cc-page-metrics, .cc-legacy-map { grid-template-columns: minmax(0, 1fr); }
  .cc-feed > :is(.panel, .cc-stat-sheet, .cc-statistics, .cc-research-group, .development-page, .note-strip, .research-banner),
  .cc-feed .cc-statistics > .panel { padding: 12px 8px; }
  .cc-feed :is(.role-card, .research-card, .development-project, .development-route) { padding: 12px 8px; }
  .cc-feed :is(.section-heading, .role-card-top, .business-bottom, .office-panel, .office-action, .research-banner,
    .development-project-top, .development-project-details > div, .detail-rows > div, .cc-stat-sheet dl > div, .cc-stat-row) {
    flex-wrap: wrap; gap: 6px;
  }
  .cc-feed .office-action { margin: 0; width: 100%; }
  .cc-feed .office-panel > div:not([class]), .cc-feed .research-banner > div { min-width: 0; max-width: 100%; }
  .cc-feed .office-symbol, .cc-feed .research-big-icon { width: 36px; height: 36px; }
  .cc-feed :is(.button, .text-button) { min-width: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  #app .cc-feed :is(.button, .text-button, .nav-item, .cc-middle-tabs > button) {
    height: auto; max-height: none; min-height: 44px; white-space: normal; overflow-wrap: anywhere;
  }
  .cc-feed .button { padding: 8px 4px; }
  .cc-feed .business-bottom > *, .cc-feed .development-project-details dt { min-width: 0; }
  .cc-feed .development-project-details dt { flex-shrink: 1; }
  .cc-feed :is(h2, h3, p, small, dt, dd, strong, .badge, .role-effect, .development-project-state) { overflow-wrap: anywhere; }
  .cc-feed .badge { white-space: normal; line-height: 1.5; }
  .cc-feed .development-route .button { min-width: 0; }
  .cc-feed .development-project-art { width: 60px; max-width: 100%; height: 48px; }
  .cc-feed .development-active { padding: 12px 8px; }
  .cc-feed .development-active-copy { flex-basis: 100%; }
  .cc-feed :is(.development-slot, .development-cancel) { margin-left: 0; }
  .cc-feed .development-cancel { flex-wrap: wrap; }
  .cc-feed .development-next-target { padding: 12px 8px; flex-wrap: wrap; }
  .cc-feed .cc-legacy-map { padding: 16px 8px; }
  .cc-feed .cc-legacy-node { padding: 12px 8px; }
  .cc-feed .cc-legacy-node::before { display: none; }
  .cc-feed .cc-page-metrics > div { padding: 10px 6px; }
  .cc-feed .cc-page-metrics strong { font-size: 18px; }
  .cc-feed .cc-statistics .cc-page-metrics > div:last-child { grid-column: auto; }
  .cc-feed .cc-stat-sheet dl > div, .cc-feed .detail-rows > div { flex-direction: column; align-items: flex-start; }
  .cc-feed .cc-stat-sheet dd { text-align: left; }
  .cc-feed .cc-achievement-next { padding: 8px 6px; }
  .cc-achievement-next > div { grid-template-columns: minmax(0, 1fr); }
  .cc-achievement-next button { flex-wrap: wrap; padding: 6px; }
  .cc-achievement-controls { gap: 8px; }
  .cc-achievement-controls [role=group] { width: 100%; gap: 4px; }
  .cc-achievement-controls button { flex: 1 0 44px; min-width: 44px; padding-inline: 4px; }
  .cc-achievement-controls label { width: 100%; flex-wrap: wrap; gap: 4px; }
  .cc-achievement-controls select { width: 100%; min-width: 0; }
  .cc-achievement-group-heading { flex-wrap: wrap; gap: 4px; }
  .cc-achievement-group-heading h3 { gap: 4px; }
  .cc-achievement-group .cc-collection-grid { grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); }
  .cc-store .cc-buy-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .cc-store .cc-buy-modes > button { min-width: 44px; min-height: 44px; padding: 4px 0; }
  .cc-store .production-section .business-purchase {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'art owned' 'name name' 'price price' 'quantity quantity';
    gap: 0 4px; padding: 6px; min-height: 100px;
  }
  .cc-store .production-section .business-industry-art { width: 44px; max-width: 100%; height: 44px; }
  .cc-store .production-section .business-name { font-size: 12px; }
  .cc-store .production-section .business-cost { font-size: 12px; }
  .cc-store .production-section .business-owned strong { font-size: 18px; }
  .cc-store .production-section .business-quantity { font-size: 10px; }
}

@container game-shell (max-width: 700px) {
  .cc-landmark .cc-company-name { min-height: 44px; gap: 2px; padding-inline: 12px; font-size: 12px; }
  .cc-landmark .cc-company-name > .icon { width: 14px; height: 14px; }
  .cc-landmark .cc-company-name::after { inset-inline: 12px; }
  #app .cc-landmark .cc-company-name { height: auto; max-height: none; padding: 6px 8px; font-size: 11px; }
  #app .cc-landmark .cc-company-name > span { white-space: normal; overflow-wrap: anywhere; }
  #app .cc-landmark .cc-company-name > .icon { width: 12px; height: 12px; flex: 0 0 12px; }
  .cc-landmark .cc-click-resources { grid-template-columns: minmax(0, 1fr); margin-top: 12px; gap: 4px; }
  .cc-click-resources .resource-cash { gap: 2px; flex-wrap: wrap; }
  .cc-click-resources .resource-cash > .icon { width: 18px; height: 18px; }
  .cc-click-resources .resource-cash .resource-value { font-size: clamp(18px, 5vw, 28px); letter-spacing: 0; }
  .cc-click-resources :is(.resource-value, .resource-income .resource-value) { font-size: 12px; overflow-wrap: anywhere; }
  .cc-click-resources .resource-label { font-size: 10px; gap: 2px; flex-wrap: wrap; }
  .cc-click-resources .resource-label > .icon { width: 12px; height: 12px; }
  .cc-click-resources .resource-income { padding-top: 4px; gap: 2px; }
  .cc-click-resources .resource-amount { max-width: 100%; gap: 2px; flex-wrap: wrap; }
  .cc-factory-frame { margin-top: 12px; }
  .cc-factory-caption .badge { font-size: 9px; padding: 4px; }
  #main .cc-overview > .cc-feed { border-inline-width: 4px; }
  .cc-middle-tabs > button, .cc-management-nav .nav-item { gap: 3px; font-size: 11px; }
  .cc-middle-tabs > button > .icon, .cc-management-nav .nav-item > .icon { width: 14px; height: 14px; }
  .cc-feed :is(h2, .role-card h2, .research-card h2) { font-size: 13px; }
  .cc-feed :is(.section-heading h2, .cc-statistics-heading h2) { gap: 4px; }
  .cc-feed .cc-production-lane { grid-template-rows: auto minmax(0, 1fr); }
  .cc-lane-caption h3 { min-width: 0; flex-wrap: wrap; gap: 2px 4px; padding: 5px 10px 5px 4px; font-size: 11px; }
  .cc-lane-caption h3 > .cc-scale-capsule { min-width: 20px; padding: 0 3px; font-size: 10px; }
  .cc-feed .cc-lane-world {
    grid-template-columns: minmax(44px, 1fr) minmax(0, .3fr) minmax(44px, 1fr);
    gap: 2px; padding: 8px 2px;
  }
  .cc-lane-factory { grid-template-rows: 60px auto; gap: 4px; }
  .cc-lane-factory .cc-factory-supply, .cc-lane-machines, .cc-lane-machine { height: 60px; }
  .cc-line-loading .cc-load-button { min-height: 60px; height: 60px; }
  .warehouse-art { width: 60px; height: 60px; }
  .cc-material-stock { flex-wrap: wrap; gap: 2px; }
  .cc-material-quantity { padding: 3px; font-size: 10px; }
  .cc-feed .cc-power-world { grid-template-columns: minmax(44px, 1fr) minmax(44px, 1fr); }
  .cc-power-generator { width: 100%; height: 60px; }
  .cc-power-grid { grid-column: 1 / -1; grid-row: 2; }
  .cc-power-storage { grid-column: 2; grid-row: 1; grid-template-rows: 60px auto; min-width: 0; }
  .power-storage-art { width: 100%; height: 60px; }
  .cc-power-storage strong { white-space: normal; flex-wrap: wrap; font-size: 10px; }
  .cc-power-charge, .cc-load-capacity-track { height: 36px; }
  .cc-load-count, .cc-load-count > span:last-child { font-size: 10px; }
  .cc-lane-conveyor { margin-top: 28px; }
  .cc-material-warning, .cc-storage-warning { width: 20px; height: 20px; font-size: 14px; }
  .cc-team-scene { padding: 8px 2px; }
  .cc-team-members { padding-inline: 16px; }
  .cc-team-member .machine-art { width: 64px; height: 80px; }
}

@media (max-width: 700px) {
  :root { --cc-dock-clearance: calc(168px + env(safe-area-inset-bottom, 0px)); }
  #sidebar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); }
  #sidebar .header-actions { flex-direction: column; gap: 6px; }
  .toast-region { left: 8px; right: 8px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .toast { max-width: calc(100vw - 68px); }
}