/* Gate C: one container-driven adapter for the live game and UI laboratory. */

[data-ui-responsive-root] {
  position:relative;
  width:100%;
  max-width:100%;
  overflow-wrap:anywhere;
}

[data-ui-responsive-root] :where(img,canvas,svg,video) {
  max-width:100%;
}

[data-ui-responsive-root] :where(.galaxy-workspace,.map-shell,.intel-panel,.welcome-panel,.server-menu,.settings-menu,.map-page,.planet-layout-v31,.fleet-command-layout,.market-page,.vault-page,.faction-page,.service-dialog,.settings-dialog,.quick-editor-dialog) {
  min-width:0;
}

/* Access and onboarding retain their authoritative artwork and hotspot geometry.
   Only surrounding controls reflow; the artwork stage is an explicit free canvas. */
.welcome-page .welcome-topbar {
  position:absolute;
  width:min(1120px,calc(100cqi - 28px));
}

.welcome-page .welcome-panel {
  max-width:calc(100cqi - 20px);
}

@container gateward-screen (max-width:720px) {
  .login-page .server-selector {
    inset:auto 10px 10px 10px;
    width:auto;
  }

  .login-page .server-menu,
  .login-page .settings-menu {
    width:min(360px,calc(100cqi - 20px));
    max-height:min(70cqh,520px);
    overflow:auto;
  }

  .welcome-page .welcome-topbar {
    gap:10px;
    padding-inline:12px;
  }

  .welcome-page .welcome-panel {
    width:min(100% - 20px,680px);
  }

  .welcome-page .foundation-steps {
    grid-template-columns:1fr;
  }
}

@container gateward-screen (max-width:800px) {
  html[data-ui-theme="gateward-definitive"] main.galaxy-page:not(.planet-page) {
    grid-template-rows:112px 40px minmax(0,1fr) !important;
  }

  html[data-ui-theme="gateward-definitive"] main.galaxy-page:not(.planet-page) > .galaxy-topbar {
    height:112px !important;
    overflow:hidden;
  }

  html[data-ui-theme="gateward-definitive"] main.galaxy-page:not(.planet-page) .hud-resources {
    inset:62px 10px auto 10px !important;
    gap:2px;
  }

  html[data-ui-theme="gateward-definitive"] main.galaxy-page:not(.planet-page) > .planet-switcher {
    height:40px !important;
  }

  html[data-ui-theme="gateward-definitive"] main.galaxy-page:not(.planet-page) > .galaxy-workspace {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(280px,1fr) 48px minmax(220px,auto) !important;
    overflow:auto;
  }

  html[data-ui-theme="gateward-definitive"] main.galaxy-page:not(.planet-page) .intel-panel.normal-table {
    grid-column:1;
    grid-row:3;
  }
}

/* Galaxy laboratory: structural panels flow; map and solar canvases stay free. */
html[data-ui-theme="gateward-definitive"] body main.galaxy-page[data-ui-responsive-root].is-responsive-preview :where(.map-chat-dock,.bottom-nav,.main-card-nav) {
  position:absolute !important;
}

html[data-ui-theme="gateward-definitive"] body main.galaxy-page[data-ui-responsive-root].is-responsive-preview :where(#quickCommands,#quickCommandPicker) {
  position:absolute !important;
}

html[data-ui-theme="gateward-definitive"] body main.galaxy-page[data-ui-responsive-root].is-responsive-preview .map-chat-dock {
  left:calc((100vw - 100cqi) / 2 + var(--galaxy-page-gutter)) !important;
  right:auto !important;
  width:min(46cqi,340px) !important;
}

@container gateward-screen (max-width:1100px) {
  .galaxy-page .galaxy-workspace {
    grid-template-columns:minmax(0,1fr);
  }

  .galaxy-page .intel-panel {
    width:auto;
    max-width:none;
  }
}

@container gateward-screen (max-width:720px) {
  .galaxy-page .galaxy-topbar,
  .planet-page .planet-hud {
    min-width:0;
  }

  .galaxy-page .map-filters {
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }

  .galaxy-page :where(.floating-panel,.drawer-panel,.profile-menu,.skin-catalog) {
    inset:64px 8px auto 8px;
    width:auto;
    max-width:none;
    max-height:calc(100cqh - 80px);
    overflow:auto;
  }
}

/* Live game: these rules normalize only structural changes already represented
   by existing viewport breakpoints. The canonical state remains device-neutral. */
@container gateward-screen (max-width:1260px) {
  #galaxyApp .planet-layout-v31,
  #galaxyApp .fleet-command-layout {
    grid-template-columns:minmax(0,1fr) !important;
  }
}

@container gateward-screen (max-width:900px) {
  #galaxyApp .map-page,
  #galaxyApp .planet-layout-v31,
  #galaxyApp .fleet-command-layout,
  #galaxyApp .vault-page-grid,
  #galaxyApp .faction-grid,
  #galaxyApp .faction-columns {
    grid-template-columns:minmax(0,1fr) !important;
  }

  #galaxyApp .app-view {
    padding-inline:clamp(6px,1.5cqi,12px) !important;
  }

  #galaxyApp :where(.service-dialog,.settings-dialog,.quick-editor-dialog) {
    width:min(100% - 16px,1100px);
    max-height:calc(100cqh - 16px);
    overflow:auto;
  }
}

@container gateward-screen (max-width:640px) {
  #galaxyApp .planet-summary,
  #galaxyApp .vault-main-compartments,
  #galaxyApp .vault-main-grid,
  #galaxyApp .planet-primary-services,
  #galaxyApp .fleet-command-side {
    grid-template-columns:minmax(0,1fr) !important;
  }

  #galaxyApp :where(.market-hero,.vault-hero,.faction-hero) {
    padding:15px !important;
  }

  #galaxyApp #ingameChatShell.expanded {
    inset:auto 0 0 0 !important;
    width:100cqi !important;
    max-width:100cqi !important;
    height:min(70cqh,620px) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  [data-ui-responsive-root] *,
  [data-ui-responsive-root] *::before,
  [data-ui-responsive-root] *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}