:root {
  /* HUD text color is driven by a single hue. The pause-menu slider rewrites
     this var; index.html / main.js also load the saved value from localStorage
     on startup. Saturation/lightness are baked per-element below. */
  --hud-hue: 195;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #030310;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: #cfe;
}

/* Generic utility — anything with .hidden goes away. Several specific
   selectors below also use this class with extra rules; they're now
   redundant but harmless. */
.hidden { display: none !important; }

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: grab;
}

#game.dragging {
  cursor: grabbing;
}

#hud {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 10;
  user-select: none;
  pointer-events: none;
  line-height: 1.5;
}

#title {
  font-size: 17px;
  font-weight: bold;
  color: hsl(var(--hud-hue), 90%, 75%);
  letter-spacing: 2px;
  text-shadow: 0 0 10px hsla(var(--hud-hue), 100%, 60%, 0.6);
}

#subtitle {
  font-size: 11px;
  color: hsl(var(--hud-hue), 30%, 60%);
  margin-top: 2px;
}

#credit {
  font-size: 10px;
  color: hsl(var(--hud-hue), 25%, 50%);
  margin-top: 1px;
  letter-spacing: 0.04em;
  font-style: italic;
}

#coords {
  font-size: 12px;
  margin-top: 8px;
  color: hsl(var(--hud-hue), 40%, 72%);
}

#controls {
  font-size: 11px;
  margin-top: 4px;
  color: hsl(var(--hud-hue), 18%, 50%);
}

#controls b {
  color: hsl(var(--hud-hue), 50%, 70%);
  font-weight: bold;
}

/* inventory panel (top-right) */
#inventory {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 10;
  user-select: none;
  pointer-events: none;   /* default: pass clicks through; rows below opt back in */
  background: rgba(8, 12, 24, 0.78);
  border: 1px solid #1a2a40;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  color: #9ac;
  min-width: 180px;
}

.inv-row.clickable {
  pointer-events: auto;
  cursor: pointer;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 2px;
}

.inv-row.clickable:hover {
  background: rgba(80, 120, 170, 0.25);
  color: #eff;
}

.panel-title {
  color: #7fd6ff;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}

/* Bottom-right stack: drone button on top, ore-tier legend below.
   The wrapper owns the absolute positioning; the children flow
   vertically so neither has to know about the other's height. */
#br-stack {
  position: absolute;
  bottom: 12px;
  right: 14px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  /* Don't intercept canvas clicks anywhere except where children opt
     back in (drone button via cursor:pointer; legend rows that toggle
     auto-mine selection). */
  pointer-events: none;
}

/* legend (now sits inside #br-stack, below the drone button) */
#legend {
  user-select: none;
  pointer-events: none;
  background: rgba(8, 12, 24, 0.75);
  border: 1px solid #1a2a40;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  color: #9ac;
  min-width: 160px;
}

.legend-title {
  color: #7fd6ff;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-size: 10px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 2px;
}

/* Toggleable rows opt back into pointer-events (their parent #legend has
   pointer-events:none so clicks still pass through to the canvas). */
.legend-row.clickable {
  pointer-events: auto;
  cursor: pointer;
}

.legend-row.clickable:hover {
  background: rgba(80, 120, 170, 0.20);
  color: #eff;
}

.legend-row.selected {
  background: rgba(95, 160, 95, 0.22);
  border: 1px solid rgba(127, 220, 127, 0.6);
  margin: -1px -5px;
  padding: 1px 3px;
  color: #d8ffd8;
}

.legend-row.selected .legend-check {
  visibility: visible;
}

.legend-check {
  margin-left: auto;
  color: #7fdc7f;
  font-weight: bold;
  visibility: hidden;
  font-size: 12px;
}

.legend-swatch {
  width: 12px;
  height: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* overlays (pause / build menus) */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 18, 0.65);
  backdrop-filter: blur(2px);
}

.overlay.hidden,
#inventory.hidden,
#placement-banner.hidden {
  display: none;
}

.menu {
  background: rgba(12, 18, 32, 0.95);
  border: 1px solid #2a4060;
  border-radius: 6px;
  padding: 22px 26px;
  min-width: 280px;
  /* Cap the menu to the viewport so long upgrade lists (drill panel,
     refinery, etc.) never spill above the top of the page. The body
     scrolls vertically inside the menu when there's more content than
     fits. 90vh / 90vw leaves a comfortable gap to the edges. */
  max-height: 90vh;
  max-width:  90vw;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 0 30px rgba(0, 180, 255, 0.15);
  text-align: center;
}
/* Slim, themed scrollbar for menus so the scroll affordance reads as
   part of the panel rather than a default browser bar. WebKit only;
   Firefox falls back to its native bar. */
.menu::-webkit-scrollbar { width: 8px; }
.menu::-webkit-scrollbar-track { background: rgba(20, 30, 50, 0.6); border-radius: 4px; }
.menu::-webkit-scrollbar-thumb { background: rgba(80, 130, 180, 0.55); border-radius: 4px; }
.menu::-webkit-scrollbar-thumb:hover { background: rgba(120, 170, 220, 0.75); }

.menu-title {
  color: #7fd6ff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-shadow: 0 0 8px rgba(0, 180, 255, 0.5);
}

.menu button {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 10px 14px;
  background: rgba(40, 60, 90, 0.8);
  border: 1px solid #3a5878;
  color: #cfe;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}

.menu button:hover {
  background: rgba(60, 100, 150, 0.9);
  border-color: #5a88b8;
}

.menu-hint {
  margin-top: 12px;
  font-size: 10px;
  color: #567;
  letter-spacing: 1px;
}

#build-list {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.build-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin: 5px 0;
  background: rgba(40, 60, 90, 0.8);
  border: 1px solid #3a5878;
  color: #cfe;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
}

.build-item:hover {
  background: rgba(60, 100, 150, 0.9);
}

.build-item .name {
  color: #7fd6ff;
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

.build-item .desc {
  color: #8aa;
  font-size: 11px;
}

/* placement banner (top-center while placing) */
#placement-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(12, 18, 32, 0.9);
  border: 1px solid #3a5878;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 12px;
  color: #cfe;
  pointer-events: none;
}

#placement-banner b {
  color: #7fd6ff;
}

.inv-row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
  font-size: 11px;
}

.inv-row .sw {
  display: inline-block;
  width: 10px;
  height: 8px;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.15);
}

.panel-subtitle {
  color: #8aa;
  font-size: 9px;
  letter-spacing: 1px;
  margin-top: 6px;
  margin-bottom: 2px;
  text-transform: uppercase;
}

/* Hotbar along the bottom */
#hotbar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
  user-select: none;
}

.hotbar-slot {
  width: 60px;
  height: 60px;
  background: rgba(12, 20, 36, 0.85);
  border: 2px solid #3a5878;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cfe;
  font-size: 11px;
  cursor: pointer;
  position: relative;
  transition: background 0.1s, border-color 0.1s;
}

.hotbar-slot:hover {
  background: rgba(40, 60, 100, 0.9);
}

.hotbar-slot.selected {
  border-color: #7fd6ff;
  background: rgba(30, 50, 90, 0.9);
  box-shadow: 0 0 14px rgba(100, 200, 255, 0.45);
}

.hotbar-slot.empty .slot-name {
  color: #567;
}

.slot-key {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 9px;
  color: #7a92a8;
  font-weight: bold;
}

.slot-name {
  font-size: 11px;
  color: #cfe;
}

.slot-count {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 12px;
  color: #ffd060;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0,0,0,0.8);
}

/* Right-click building context menu */
#building-ctx {
  position: absolute;
  z-index: 50;
  background: rgba(12, 18, 32, 0.96);
  border: 1px solid #3a5878;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

#building-ctx.hidden { display: none; }

#building-ctx button {
  background: rgba(40, 60, 90, 0.9);
  border: 1px solid #3a5878;
  color: #cfe;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
  display: block;
  width: 100%;
  text-align: left;
}

#building-ctx button:hover {
  background: rgba(80, 120, 170, 0.95);
}

#building-ctx button.hidden { display: none; }

/* Withdraw panel rows (one per resource type stored in the silo) */
#withdraw-overlay.hidden { display: none; }

#withdraw-list {
  margin: 6px 0 10px;
  max-height: 50vh;
  overflow-y: auto;
  text-align: left;
}

.wd-row {
  display: grid;
  /* name (with swatch) | stored/cargo stat | [MAX-] | [-] | qty input | [+] | [MAX+] */
  grid-template-columns: 1fr auto 38px 28px 50px 28px 38px;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(60, 90, 130, 0.25);
  font-size: 12px;
}

.wd-row:last-child { border-bottom: none; }

.wd-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cfe;
}

.wd-row .sw {
  display: inline-block;
  width: 12px;
  height: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
}

.wd-stat {
  color: #9bd0a8;
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}
.wd-stat .wd-stat-cargo { color: #ffd060; }
.wd-stat .wd-sep        { color: #567; padding: 0 3px; }

.wd-input {
  background: rgba(8, 14, 28, 0.9);
  border: 1px solid #3a5878;
  color: #cfe;
  font-family: inherit;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 3px;
  width: 100%;
  text-align: right;
  -moz-appearance: textfield;
}
.wd-input::-webkit-outer-spin-button,
.wd-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wd-btn {
  background: rgba(40, 60, 90, 0.85);
  border: 1px solid #3a5878;
  color: #cfe;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  padding: 3px 0;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
}

.wd-btn:hover:not(:disabled) {
  background: rgba(80, 120, 170, 0.95);
  border-color: #5a88b8;
}

.wd-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wd-btn.wd-minus { color: #f8a; }
.wd-btn.wd-plus  { color: #afe; }

/* MAX buttons (per-resource withdraw-max / deposit-max). Smaller text,
   color matches the corresponding +/- button so the player can read
   "left side = withdraw" / "right side = deposit" at a glance. */
.wd-btn.wd-max {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 4px 0;
}
.wd-btn.wd-max-minus { color: #f8a; }
.wd-btn.wd-max-plus  { color: #afe; }

/* Bulk action row (Withdraw all / Deposit all) at the bottom of the panel */
.storage-bulk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 6px 0 4px;
}

/* Auto Drill panel — storage rows + upgrade rows. */
#drill-panel-overlay.hidden { display: none; }

#drill-storage-list, #drill-upgrade-list {
  margin: 4px 0 8px;
  text-align: left;
}

.dp-storage-row {
  display: grid;
  grid-template-columns: 1fr 60px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(60, 90, 130, 0.25);
  font-size: 12px;
}
.dp-storage-row:last-child { border-bottom: none; }
.dp-storage-row .sw {
  display: inline-block;
  width: 12px;
  height: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  margin-right: 6px;
  vertical-align: middle;
}
.dp-storage-row .qty {
  color: #ffd060;
  font-weight: bold;
  text-align: right;
}
.dp-empty {
  color: #567;
  padding: 6px 8px;
  font-style: italic;
}

.dp-upgrade-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 4px;
  border: 1px solid rgba(60, 90, 130, 0.35);
  border-radius: 4px;
  background: rgba(8, 12, 24, 0.5);
}
.dp-upgrade-row .dp-up-name {
  font-weight: bold;
  color: #cfe;
  margin-bottom: 2px;
}
.dp-upgrade-row .dp-up-meta {
  color: #8aa;
  font-size: 11px;
  line-height: 1.4;
}
.dp-upgrade-row .dp-up-cost { color: #ffd060; }
.dp-upgrade-row.maxed { background: rgba(50, 100, 70, 0.4); border-color: #6a8; }
.dp-upgrade-row.locked { background: rgba(60, 60, 60, 0.3); border-color: #555; opacity: 0.7; }

/* Index / wiki panel — tabs at the top, scrollable entry list under. */
#index-overlay.hidden { display: none; }
.index-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 10px;
  flex-wrap: wrap;
}
.index-tabs .idx-tab {
  flex: 0 1 auto;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  background: rgba(40, 60, 90, 0.6);
  color: #bcd;
  border: 1px solid #2a4060;
  border-radius: 4px;
  cursor: pointer;
}
.index-tabs .idx-tab:hover { background: rgba(60, 90, 130, 0.8); }
.index-tabs .idx-tab.active {
  background: rgba(80, 130, 180, 0.85);
  color: #fff;
  border-color: #5a8bc4;
}
#index-body {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.idx-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border: 1px solid rgba(60, 90, 130, 0.35);
  border-radius: 4px;
  align-items: start;
}
.idx-entry .idx-sw {
  width: 18px;
  height: 18px;
  border: 1px solid #000;
  border-radius: 3px;
  flex-shrink: 0;
}
.idx-entry .idx-name {
  font-weight: bold;
  color: #cfe;
  margin-bottom: 2px;
}
.idx-entry .idx-meta {
  color: #9ab;
  font-size: 11px;
  line-height: 1.45;
}
.idx-entry .idx-cost { color: #ffd060; }
.idx-entry .idx-tag {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  font-size: 10px;
  background: rgba(80, 110, 150, 0.45);
  border-radius: 3px;
  color: #cde;
}
.idx-entry-collapsible:hover {
  background: rgba(70, 100, 140, 0.18);
}
.idx-arrow {
  display: inline-block;
  width: 14px;
  color: #88a;
  font-size: 11px;
  margin-right: 2px;
}
.idx-upgrades.hidden { display: none; }
.idx-upgrades {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(20, 30, 50, 0.4);
  border-left: 2px solid rgba(80, 130, 180, 0.6);
  border-radius: 3px;
}
.idx-upgrade-sub {
  margin-bottom: 6px;
}
.idx-upgrade-sub:last-child {
  margin-bottom: 0;
}
.idx-upgrade-sub .idx-name { color: #ace; }
.idx-upgrade-sub .idx-meta { padding-left: 4px; }

/* Demand rows in the Auto Drill panel — same shape as upgrade rows so
   the player gets one consistent grid layout for "deposit something". */
.dp-demand-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 4px;
  border: 1px solid rgba(60, 90, 130, 0.35);
  border-radius: 4px;
}
.dp-demand-row .dp-up-name { font-weight: bold; color: #cfe; margin-bottom: 2px; }
.dp-demand-row .dp-up-meta { color: #8aa; font-size: 11px; line-height: 1.4; }

/* Carrier-bot status block — sits between the demand list and the bottom
   button row when the drill has the Carrier Bot upgrade. Renders status
   text plus a progress bar showing how far along the current haul the
   bot is (0% = at drill, 100% = at silo). */
.dp-carrier-status {
  margin: 8px 0 6px;
  padding: 8px 10px;
  border: 1px solid rgba(80, 130, 90, 0.5);
  border-radius: 4px;
  background: rgba(40, 70, 50, 0.35);
  color: #cfe;
  font-size: 12px;
  line-height: 1.4;
}
.dp-carrier-status.hidden { display: none; }
.dp-carrier-status .dp-carrier-line { display: flex; justify-content: space-between; align-items: center; }
.dp-carrier-status .dp-carrier-bar {
  margin-top: 4px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.dp-carrier-status .dp-carrier-fill {
  height: 100%;
  background: #6fd07a;
  transition: width 0.18s ease;
}

.dp-up-btn {
  background: rgba(40, 60, 90, 0.85);
  border: 1px solid #3a5878;
  color: #cfe;
  font-family: inherit;
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
}
.dp-up-btn:hover:not(:disabled) {
  background: rgba(80, 120, 170, 0.95);
  border-color: #5a88b8;
}
.dp-up-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Silo-designation panel rows (one per discovered ore tier) */
#silo-designate-overlay.hidden { display: none; }

#silo-designate-list {
  margin: 6px 0 10px;
  max-height: 50vh;
  overflow-y: auto;
  text-align: left;
}

.sd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(60, 90, 130, 0.25);
  font-size: 12px;
  color: #cfe;
  cursor: pointer;
  background: rgba(8, 14, 28, 0.4);
}

.sd-row:last-child { border-bottom: none; }

.sd-row:hover {
  background: rgba(40, 60, 90, 0.85);
}

.sd-row.selected {
  background: rgba(60, 110, 80, 0.85);
  border-color: #6a8;
}

.sd-row .sw {
  display: inline-block;
  width: 14px;
  height: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
}

.sd-name {
  flex: 1;
  color: #cfe;
}

.sd-status {
  color: #ffd060;
  font-weight: bold;
  font-size: 11px;
}

#silo-designate-status {
  margin-bottom: 4px;
  color: #8aa;
}

#withdraw-cap {
  margin-bottom: 4px;
  color: #8aa;
}

/* Pause-menu HUD-color slider */
.settings-row {
  display: grid;
  grid-template-columns: auto 1fr 22px;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 8px 10px;
  background: rgba(20, 30, 50, 0.55);
  border: 1px solid #2a4060;
  border-radius: 4px;
  text-align: left;
}

.settings-row label {
  font-size: 11px;
  color: #9ac;
  letter-spacing: 1px;
}

.settings-row input[type="range"] {
  /* Rainbow track so the slider position previews the resulting hue. */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    hsl(0,80%,60%),
    hsl(60,80%,60%),
    hsl(120,80%,60%),
    hsl(180,80%,60%),
    hsl(240,80%,60%),
    hsl(300,80%,60%),
    hsl(360,80%,60%));
  outline: none;
  cursor: pointer;
}

.settings-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2a4060;
  cursor: pointer;
}

.settings-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2a4060;
  cursor: pointer;
}

.hue-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: hsl(var(--hud-hue), 80%, 70%);
}

/* HUD color extremes. Slider value 0 collapses every HUD element to white;
   slider value 360 collapses everything to black. Activated by adding
   .hud-mono / .hud-mono-dark to <html>. The middle of the slider keeps
   the existing hsl() rules untouched. */
html.hud-mono #title,
html.hud-mono #coords,
html.hud-mono #controls b,
html.hud-mono .auto-title,
html.hud-mono .hue-swatch { color: #ffffff; }
html.hud-mono #title { text-shadow: 0 0 10px rgba(255,255,255,0.55); }
html.hud-mono #subtitle { color: rgba(255,255,255,0.65); }
html.hud-mono #credit   { color: rgba(255,255,255,0.50); }
html.hud-mono #controls { color: rgba(255,255,255,0.55); }
html.hud-mono .hue-swatch { background: #ffffff; }

html.hud-mono-dark #title,
html.hud-mono-dark #coords,
html.hud-mono-dark #controls b,
html.hud-mono-dark .auto-title { color: #0a0a0a; }
html.hud-mono-dark #title { text-shadow: 0 0 10px rgba(0,0,0,0.45); }
html.hud-mono-dark #subtitle { color: rgba(0,0,0,0.7); }
html.hud-mono-dark #credit   { color: rgba(0,0,0,0.55); }
html.hud-mono-dark #controls { color: rgba(0,0,0,0.6); }
html.hud-mono-dark .hue-swatch { background: #0a0a0a; }

/* ---------- Research panel ---------- */
#research-overlay.hidden { display: none; }

#research-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 4px;
  border-bottom: 1px solid #2a4060;
}
#research-tabs .r-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 4px;
  margin: 0;
  color: #8aa;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
#research-tabs .r-tab.selected {
  color: #7fd6ff;
  border-bottom-color: #7fd6ff;
}
#research-tabs .r-tab:hover { color: #cfe; }

/* Auto-queue checkbox row — sits between the tabs and the list. Only shown
   once collector_bot research is unlocked (toggled via .hidden in JS). */
#research-autoqueue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 2px 4px;
  padding: 6px 8px;
  background: rgba(20, 60, 100, 0.18);
  border: 1px solid #294860;
  border-radius: 4px;
  color: #aee;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
#research-autoqueue-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: #7fd6ff;
}
#research-autoqueue-row.hidden { display: none; }

#research-list {
  margin: 6px 0 10px;
  max-height: 50vh;
  overflow-y: auto;
}

.research-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 8px 10px;
  margin: 6px 0;
  background: rgba(40, 60, 90, 0.6);
  border: 1px solid #3a5878;
  border-radius: 4px;
  font-size: 12px;
}

.research-row.locked    { opacity: 0.55; }
.research-row.unlocked  { border-color: #5fa05f; background: rgba(40, 80, 60, 0.45); }
.research-row.active    { border-color: #ffd060; }

/* The active row's "ready" sub-state — demand met, awaiting Start. We
   want this to scream "click me!" so the player isn't left wondering.
   Detected via a child .r-section.r-ready (set by _researchRowDom). */
.research-row.active:has(.r-section.r-ready) {
  border-color: #7fdc7f;
  background: rgba(60, 120, 70, 0.30);
  box-shadow: 0 0 12px rgba(127, 220, 127, 0.55), inset 0 0 18px rgba(127, 220, 127, 0.12);
  animation: research-ready-pulse 1.6s ease-in-out infinite;
}

.research-row.active:has(.r-section.r-ready) .r-begin {
  background: rgba(95, 180, 95, 0.85);
  border-color: #7fdc7f;
  color: #f6fff0;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(127, 220, 127, 0.6);
}

.research-row.active:has(.r-section.r-ready) .r-begin:hover {
  background: rgba(120, 210, 120, 0.95);
  border-color: #aef0ae;
  box-shadow: 0 0 12px rgba(170, 255, 170, 0.8);
}

@keyframes research-ready-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(127, 220, 127, 0.45), inset 0 0 14px rgba(127, 220, 127, 0.10); }
  50%      { box-shadow: 0 0 18px rgba(127, 220, 127, 0.85), inset 0 0 22px rgba(127, 220, 127, 0.20); }
}

.research-row .r-name {
  color: #7fd6ff;
  font-weight: bold;
  font-size: 13px;
}

.research-row .r-branch {
  color: #8aa;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: right;
}

.research-row .r-desc {
  color: #cfe;
  grid-column: 1 / -1;
  margin-top: 2px;
  line-height: 1.3;
}

.research-row .r-meta {
  color: #caa764;
  font-size: 11px;
  grid-column: 1 / -1;
}

.research-row .r-bar {
  grid-column: 1 / -1;
  height: 5px;
  background: rgba(20, 30, 50, 0.7);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.research-row .r-bar > div {
  height: 100%;
  background: #ffd060;
  width: 0%;
  transition: width 0.2s;
}

.research-row .r-section {
  grid-column: 1 / -1;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8aa;
  margin-top: 6px;
}

/* "Ready to start" callout — demand is satisfied, waiting on the player. */
.research-row .r-section.r-ready {
  color: #7fdc7f;
  font-weight: bold;
}

.research-row .r-deliver-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 14px 1fr 60px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 6px;
  margin-top: 2px;
  font-size: 11px;
  color: #cfe;
}
.research-row .r-deliver-row .sw {
  display: inline-block;
  width: 14px;
  height: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  grid-row: 1 / 3;
  align-self: center;
  padding: 0;
}

.research-row .r-deliver-row .r-deliver-sw {
  /* button-styled swatch: clickable, but visually still just the brick */
  cursor: pointer;
  outline: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
.research-row .r-deliver-row .r-deliver-sw[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.4);
}
.research-row .r-deliver-row .r-deliver-sw.clickable:hover {
  transform: scale(1.25);
  box-shadow: 0 0 6px rgba(255, 208, 96, 0.6);
}
.research-row .r-deliver-row .r-deliver-sw:active {
  transform: scale(1.05);
}
.research-row .r-deliver-row .r-deliver-name {
  grid-row: 1;
  grid-column: 2;
}
.research-row .r-deliver-row .r-deliver-qty {
  grid-row: 1;
  grid-column: 3;
  text-align: right;
  color: #ffd060;
  font-weight: bold;
}
.research-row .r-deliver-row .r-deliver-bar {
  grid-row: 2;
  grid-column: 2 / -1;
  height: 4px;
  background: rgba(20, 30, 50, 0.7);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
}
.research-row .r-deliver-row .r-deliver-bar > div {
  height: 100%;
  width: 0%;
  transition: width 0.2s;
}

.research-row .r-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}
.research-row .r-actions button {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
  background: rgba(40, 60, 90, 0.85);
  border: 1px solid #3a5878;
  color: #cfe;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.research-row .r-actions button:hover {
  background: rgba(80, 120, 170, 0.95);
  border-color: #5a88b8;
}
.research-row .r-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#research-status { margin-bottom: 6px; }

/* ---------- Automation HUD widget ---------- */
#auto-hud {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 10;
  background: rgba(8, 12, 24, 0.85);
  border: 1px solid #2a4060;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  color: #9ac;
  min-width: 170px;
  user-select: none;
}

/* "Drone" button — sits at the top of the bottom-right stack, above the
   ore-tier legend. Click takes control of the operator drone (centers
   viewport, drone-perspective rotation, hotbar shown). Mirrors the F
   hotkey. Turns green-ish when the drone is currently selected. */
#drone-btn {
  /* positioning comes from #br-stack; this one is interactive so it
     opts back into pointer-events. */
  pointer-events: auto;
  background: rgba(8, 12, 24, 0.85);
  border: 1px solid #2a4060;
  border-radius: 4px;
  padding: 6px 12px;
  color: #cfe;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background 0.1s, border-color 0.1s, transform 0.1s;
}

#drone-btn:hover {
  background: rgba(40, 60, 100, 0.95);
  border-color: #4a78a8;
  transform: translateY(-1px);
}

#drone-btn:active {
  transform: translateY(0);
}

#drone-btn.selected {
  background: rgba(50, 100, 70, 0.9);
  border-color: #6a8;
  color: #cfe;
}

#drone-btn.selected:hover {
  background: rgba(70, 130, 90, 0.95);
}

.drone-btn-label {
  font-weight: bold;
  letter-spacing: 1.5px;
}

#auto-hud.hidden { display: none; }

.auto-title {
  color: hsl(var(--hud-hue), 90%, 75%);
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-size: 10px;
  text-transform: uppercase;
}

.auto-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
}

.auto-val {
  color: #ffd060;
  font-weight: bold;
}

.auto-btn {
  background: rgba(40, 60, 90, 0.85);
  border: 1px solid #3a5878;
  color: #cfe;
  font-family: inherit;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  border-radius: 3px;
  min-width: 48px;
  text-align: center;
}

.auto-btn:hover { background: rgba(80, 120, 170, 0.95); }

.auto-btn.on {
  background: rgba(60, 130, 80, 0.85);
  border-color: #5fa05f;
  color: #d8ffd8;
}

.auto-btn.armed {
  background: rgba(150, 110, 30, 0.85);
  border-color: #c89030;
  color: #fff0c0;
}

.auto-clear {
  flex: 1;
}

/* Hide / Clear queue row sits below the Status line. Both buttons share
   the row's width so they look like a paired action set. */
.queue-actions {
  gap: 6px;
  margin-top: 6px;
}
.queue-actions .auto-btn { flex: 1; }

/* Designator tool switcher (Paint / Layer) — sits directly under the
   Designate row in the Drone Automation widget. */
.designate-tools {
  gap: 6px;
}

.tool-btn {
  flex: 1;
  min-width: 0;
}

.tool-btn.selected {
  background: rgba(60, 110, 160, 0.85);
  border-color: #7fd6ff;
  color: #d8f3ff;
  box-shadow: 0 0 6px rgba(127, 214, 255, 0.4);
}

.auto-status            { font-size: 11px; }
.auto-status.st-mining    { color: #7fdc7f; }
.auto-status.st-unloading { color: #7fd6ff; }
.auto-status.st-stuck     { color: #ff8060; }
.auto-status.st-off       { color: #8aa; }
.auto-status.st-manual    { color: #ffd060; }

.auto-val.cargo-full {
  color: #ff8060;
}

/* ---------- Designate banner ---------- */
#designate-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  background: rgba(60, 50, 10, 0.92);
  border: 1px solid #c89030;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff0c0;
  pointer-events: none;
}

#designate-banner.hidden { display: none; }

#designate-banner b { color: #ffd060; }

/* ---------- Login overlay (Google sign-in) ---------- */
.auth-menu {
  min-width: 320px;
  max-width: 90vw;
  text-align: center;
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin: 6px 0;
  background: #ffffff;
  color: #202428;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s, box-shadow 0.1s;
}

.google-btn:hover {
  background: #f6f6f6;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.google-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.google-icon {
  width: 16px;
  height: 16px;
}

.auth-error {
  background: rgba(120, 30, 30, 0.7);
  border: 1px solid #a04040;
  color: #ffd0d0;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 11px;
  margin-top: 8px;
  text-align: left;
}

.auth-error.hidden { display: none; }

#auth-hint #auth-server {
  color: #9ad;
  word-break: break-all;
}