/*
 * © 2026 Dennis Deckena. All rights reserved.
 * ELYRA / ELIRA - 46-026
 * Proprietary and Confidential.
 */

body, html {
  margin: 0; padding: 0; width: 100%; height: 100%; background: #000;
}

.sci-fi-shell {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  overflow: hidden;
  font-family: sans-serif;
  color: #fff;
}

.sf-mask-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("./03_ASSETS/game_assets/ui/target-ui-mask-empty.png");
}

/* Hide brand completely since it is in the background image */
.sf-brand {
  display: none !important;
}

.sf-resources {
  position: absolute;
  left: 17%;
  top: 3.5%;
  width: 60%;
  height: 7%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

/* Paint out original resource text using the dark background */
.sci-fi-shell .hud-resource {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 40px;
}
.sci-fi-shell .hud-status-cluster {
  display: none !important; /* Hide HTML badges since they are baked into image */
}
.sci-fi-shell .resource-value {
  background: transparent;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
}
.sf-actions {
  display: none !important; /* Hide actions since they are baked in */
}

/* Sidebar adjustments */
.sf-sidebar {
  position: absolute;
  top: 12.5%;
  left: 0.7%;
  width: 17.5%;
  bottom: 1.5%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.sci-fi-shell .classic-sidebar {
  width: 100% !important;
  height: auto !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 0;
  overflow: visible !important;
}

.sci-fi-shell .sidebar-nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  margin-top: 0;
}

.sci-fi-shell .sidebar-nav button {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  color: transparent; /* Hide text */
  cursor: pointer;
}
.sci-fi-shell .sidebar-nav button:hover {
  background: rgba(0, 240, 255, 0.1);
}

.sci-fi-shell .sidebar-brand { display: none !important; }

.sci-fi-shell .sidebar-planet-switch { display: none !important; }


/* The Viewport */
.sf-viewport {
  position: absolute;
  top: 11.5%;
  left: 19%;
  right: 1.5%;
  bottom: 1.5%;
  background: #020608; /* Dark fill for the center */
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
}

/* Make sure the inner layout takes full height */
.sci-fi-shell .aurora-layout {
  height: 100%;
  width: 100%;
  display: flex;
  color: #fff;
}
.sci-fi-shell .aurora-main {
  flex: 1;
  padding: 20px;
}
.sci-fi-shell .aurora-context-panel {
  width: 300px;
  background: rgba(2, 10, 17, 0.8);
  border-left: 1px solid rgba(0, 240, 255, 0.2);
  padding: 10px;
}


.sci-fi-shell .sidebar-nav button * {
  opacity: 0 !important;
}
.sci-fi-shell .sidebar-build-button {
  display: none !important;
}

.sci-fi-shell .sidebar-nav button {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}



.sci-fi-shell .hud-identity { display: none !important; }


/* ------------------------------------------------ */
/* FINAL CASCADE OVERRIDES FOR RESOURCE BAR & TEXT  */
/* ------------------------------------------------ */

/* Only show the numbers, hide HTML labels and icons since image has them */
.sci-fi-shell .resource-topline, 
.sci-fi-shell .resource-code {
  display: none !important;
}

/* Ensure the numbers have no background and blend nicely */
.sci-fi-shell .resource-value {
  background: transparent !important;
  color: #00f0ff !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-shadow: 0 0 5px rgba(0,240,255,0.5); /* slight glow to make it readable */
}

/* Perfectly align the resources container over the steel bar */
.sf-resources {
  position: absolute !important;
  left: 29% !important; /* Move it right over the resource slots */
  top: 4% !important;   /* Move it up perfectly into the slots */
  width: 25% !important;
  height: 6% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3vw !important; /* Space them out properly */
}

/* Make sure the individual resource blocks don't have black backgrounds */
.sci-fi-shell .hud-resource {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 40px !important;
}

/* Remove all other backgrounds in the top bar */
.sci-fi-shell .top-resource-hud {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------ */
/* FIXING THE TOP BAR BLURRY SMEAR AND SIDEBAR HITS */
/* ------------------------------------------------ */

/* Remove the blurry black box from sf-resources */
.sci-fi-shell .sf-resources {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  /* Ensure it is absolutely positioned over the steel */
  position: absolute !important;
  left: 29% !important;
  top: 4% !important;
  width: 25% !important;
  height: 6% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3vw !important;
}

/* Restore sidebar planet and commander as invisible click targets */
.sci-fi-shell .sidebar-planet,
.sci-fi-shell .sidebar-commander {
  display: flex !important;
  opacity: 0 !important; /* Fully invisible so the background image shows */
  cursor: pointer !important; /* Make sure they feel like buttons */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove any hover effects from the buttons so we don't see tiles */
.sci-fi-shell .sidebar-planet:hover,
.sci-fi-shell .sidebar-planet-orb-button:hover,
.sci-fi-shell .sidebar-commander:hover,
.sci-fi-shell .sidebar-nav button:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* For sidebar nav buttons, make sure NO tiles show on hover */
.sci-fi-shell .sidebar-nav button {
  background: transparent !important;
  border: none !important;
}
.sci-fi-shell .sidebar-nav button:hover {
  background: rgba(0, 240, 255, 0.05) !important; /* Very subtle glow instead of tiles, or keep transparent */
}