/* Resource frames: main = 128px / 32px slices; button = 24px / 6px slices.
   Main shadow preserves every source shape, black at 25% opacity, offset 4px.
   Separate decoration layers keep shadows independent of text and scrolling. */
:root {
  --game-ui-text: #222222;
  --game-ui-button-color: #000000;
  --game-ui-button-bg: rgba(0, 0, 0, 0.25);
  --game-ui-button-filter: none;
}
:root[data-environment-mode="dark"] {
  --game-ui-text: #ffffff;
  --game-ui-button-color: #ffffff;
  --game-ui-button-bg: rgba(255, 255, 255, 0.25);
  --game-ui-button-filter: invert(1);
}

:root[data-environment-mode] :is(.object-list-panel, .player-popup-panel, .minimap-panel,
  .ship-info-panel, .ship-fitting-panel, .fitting-compatible-panel,
  .fitting-item-info-panel, .object-detail-popup, .target-panel) {
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 8px;
  /* White resource surface and the game's light palette in both environments. */
  color-scheme: light;
  --panel: rgba(246, 251, 255, 0.74);
  --panel-strong: #ffffff;
  --line: rgba(43, 98, 140, 0.22);
  --text: #133047;
  --muted: #537083;
  --primary: #8288ff;
  --primary-text: #111560;
  --accent: #0083ff;
  --svg-default-color: #6975a0;
  --ui_color: #6975a0;
  --ui_target_color: #7373ff;
  --bg: #ffffff;
  --selection-bg: rgba(246, 251, 255, 0.82);
  --selection-border: rgba(43, 98, 140, 0.26);
  --selection-hover-border: rgba(43, 98, 140, 0.44);
  --selection-hover-bg: rgba(246, 251, 255, 0.94);
  --selection-active-bg: rgba(200, 238, 255, 0.92);
  --bubble-bg: #ffffff;
  --bubble-border: rgba(43, 98, 140, 0.16);
  --bubble-button-bg: #ffffff;
  --row-hover-bg: rgba(255, 255, 255, 0.45);
  --row-active-bg: rgba(229, 246, 255, 0.78);
  --row-active-shadow: rgba(99, 210, 255, 0.78);
  --navigate-border: rgba(99, 210, 255, 0.62);
  --navigate-bg: rgba(99, 210, 255, 0.18);
  --btn-active-bg: rgba(206, 238, 255, 0.85);
  --list-inner: rgba(0, 0, 255, 0.45);
  --game-ui-text: #222222;
  --game-ui-button-color: #000000;
  --game-ui-button-bg: rgba(0, 0, 0, 0.25);
  --game-ui-button-filter: none;
  color: var(--text);
}
/* These legacy rules used root theme selectors instead of inherited tokens. */
:root[data-environment-mode] .target-panel input {
  background: rgba(255, 255, 255, 0.58);
}
:root[data-environment-mode] .object-list-sort-button {
  background: rgba(255, 255, 255, 0.42);
}
:root[data-environment-mode] .object-list-sort-menu {
  background: rgba(246, 251, 255, 0.98);
  box-shadow: 0 1vh 2.6vh rgba(66, 139, 190, 0.2);
}
:is(.ship-info-panel, .ship-fitting-panel, .fitting-compatible-panel,
  .fitting-item-info-panel) {
  position: relative;
}
:is(.object-list-panel, .player-popup-panel, .minimap-panel,
  .ship-info-panel, .ship-fitting-panel, .fitting-compatible-panel,
  .fitting-item-info-panel, .object-detail-popup, .target-panel)::before,
:is(.object-list-panel, .player-popup-panel, .minimap-panel,
  .ship-info-panel, .ship-fitting-panel, .fitting-compatible-panel,
  .fitting-item-info-panel, .object-detail-popup, .target-panel)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 32px solid transparent;
  border-image: url("./rss/svg/9slice-box_main1.svg") 32 fill / 32px / 0 stretch;
  z-index: -1;
}
:is(.object-list-panel, .player-popup-panel, .minimap-panel,
  .ship-info-panel, .ship-fitting-panel, .fitting-compatible-panel,
  .fitting-item-info-panel, .object-detail-popup, .target-panel)::before {
  border-image-source: url("./rss/svg/9slice-box_main1_shadow.svg");
  transform: translate(4px, 4px);
  opacity: 0.25;
  z-index: -2;
}

:root[data-environment-mode] .object-detail-popup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.object-detail-popup-header { flex-shrink: 0; }
.object-detail-popup-body {
  display: grid;
  gap: 1.1vh;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
:is(.player-popup-body, .ship-info-body, .ship-fitting-body,
  .fitting-compatible-body, .fitting-item-info-body) {
  min-height: 0;
  overscroll-behavior: contain;
}
:is(.object-list-title, .player-popup-title, .minimap-title, .ship-info-title,
  .ship-fitting-title, .fitting-compatible-title, .fitting-item-info-title) {
  color: var(--text);
  font-weight: 800;
}

/* The 6px resource corners overlay a 25% theme-colored surface.
   White popups keep their fixed light palette, including their buttons. */
:root[data-environment-mode] :is(.readout, .selection-summary, .docking-undock-button,
  .object-bubble-button, .object-navigate-button) {
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: var(--game-ui-button-bg);
  box-shadow: none;
  backdrop-filter: none;
  color: var(--game-ui-button-color);
  min-height: 36px;
}
:is(.object-bubble-button, .object-navigate-button) { position: relative; }
:root :is(.readout, .selection-summary) { padding: 12px 16px; }
:root :is(.object-bubble-button, .object-navigate-button) { padding-inline: 16px; }
:is(.readout, .selection-summary, .docking-undock-button,
  .object-bubble-button, .object-navigate-button)::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 6px solid transparent;
  border-image: url("./rss/svg/9slice-box_button1.svg") 6 fill / 6px / 0 stretch;
  pointer-events: none;
  z-index: -1;
  filter: var(--game-ui-button-filter);
}
:root :is(.readout, .selection-summary, .docking-undock-button,
  .object-bubble-button, .object-navigate-button):is(:disabled, [aria-disabled="true"]) {
  opacity: 0.3;
}
:root :is(.readout, .selection-summary, .docking-undock-button,
  .object-bubble-button, .object-navigate-button):focus-visible {
  outline: 2px solid var(--game-ui-button-color) !important;
  outline-offset: 6px;
}
:is(.readout, .selection-summary) :is(.readout-row, .readout-axis, .readout-value,
  .readout-location, .selection-clear, .selection-focus) { color: inherit; }

.object-detail-bubble.selection-detail-bubble {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* All existing static and dynamically created close icons share this mask. */
:root .svg-icon-close {
  --svg-icon-source: url("./rss/svg/btn_pop_close.svg");
  color: var(--game-ui-button-color);
}
:root :is(.object-list-close, .object-detail-popup-close, .selection-clear) {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--game-ui-button-color);
  transition: transform 80ms ease;
}
:root :is(.object-list-close, .object-detail-popup-close, .selection-clear):active:not(:disabled):not([aria-disabled="true"]) {
  background: transparent;
  transform: translateY(2px);
}
:root :is(.object-list-close, .object-detail-popup-close) .svg-icon-close {
  width: 24px;
  height: 24px;
}

/* Notifications share a top stack: no panel, hit area, shadow or button states. */
.toast-stack {
  position: fixed;
  z-index: 1000;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 32px));
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
:root :is(.toast, .error-toast) {
  position: static;
  inset: auto;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--game-ui-text);
  font-size: clamp(14px, 1.7vh, 20px);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  transform: translateY(-4px);
  pointer-events: none;
}
:root :is(.toast, .error-toast).visible { transform: none; }
.toast:not(.visible), .error-toast[hidden] { display: none; }