* {
  box-sizing: border-box;
}

:root {
  --bg: #06111f;
  --panel: rgba(13, 29, 50, 0.88);
  --panel-2: rgba(18, 42, 72, 0.88);
  --panel-3: rgba(8, 23, 42, 0.74);
  --line: rgba(130, 207, 255, 0.22);
  --line-strong: rgba(130, 207, 255, 0.42);
  --text: #ecf7ff;
  --muted: #94afcc;
  --accent: #58d7ff;
  --accent-2: #8b5cff;
  --good: #6fffb0;
  --warn: #ffd36f;
  --bad: #ff6f91;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at 50% 25%, #123760 0%, #071524 45%, #020814 100%);
  color: var(--text);
  font-family: Inter, Segoe UI, system-ui, sans-serif;
  overflow: hidden;
}

button {
  font: inherit;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(4, 14, 28, 0.85);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(88, 215, 255, .5), rgba(139, 92, 255, .55));
  border: 2px solid rgba(4, 14, 28, 0.85);
  border-radius: 999px;
}

* {
  scrollbar-color: rgba(88, 215, 255, .52) rgba(4, 14, 28, 0.85);
  scrollbar-width: thin;
}

.stars,
.stars::before,
.stars::after {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(95,213,255,.45) 1px, transparent 1.6px);
  background-size: 96px 96px, 143px 143px;
  animation: drift 48s linear infinite;
  opacity: .62;
}

.stars::before {
  animation-duration: 72s;
  transform: scale(1.5);
  opacity: .35;
}

.stars::after {
  animation-duration: 36s;
  transform: scale(.75);
  opacity: .5;
}

@keyframes drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 480px 960px, -430px 860px; }
}

#app {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(6,17,31,.97), rgba(11,30,55,.9));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

.brand {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, white, transparent 22%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 28px rgba(88, 215, 255, .55);
  overflow: hidden;
}

.brand-mark i {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  animation: spin-soft 8s linear infinite;
}

@keyframes spin-soft {
  to { transform: rotate(360deg); }
}

.brand strong {
  display: block;
  font-size: 18px;
  letter-spacing: .04em;
}

.brand span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.resources {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  gap: 8px;
}

.res {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(10, 27, 48, .78);
}

.res span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.res strong {
  display: block;
  margin-top: 1px;
  font-size: 17px;
  line-height: 1.1;
}

.res em {
  display: block;
  margin-top: 3px;
  color: rgba(111, 255, 176, .78);
  font-style: normal;
  font-size: 10px;
}

.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 170px minmax(520px, 1fr) 360px;
  gap: 12px;
  padding: 12px;
}

.layout.panel-hidden {
  grid-template-columns: 170px minmax(520px, 1fr) 0;
}

.layout.panel-hidden .right-panel {
  display: none;
}

.sidebar,
.content-panel,
.right-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}

.sidebar {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.menu-btn,
.small-btn,
.primary-btn,
.secondary-btn {
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  background: rgba(16, 39, 67, .92);
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, opacity .15s;
}

.menu-btn:hover,
.small-btn:hover,
.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(88,215,255,.7);
  background: rgba(24, 59, 96, .96);
}

.menu-btn.active,
.primary-btn {
  background: linear-gradient(135deg, rgba(34,125,190,.92), rgba(97,75,210,.88));
  border-color: rgba(121, 218, 255, .8);
}

.secondary-btn {
  background: rgba(13, 35, 61, .9);
}

.side-status {
  margin-top: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 23, 42, .55);
}

.side-status span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.side-status strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

.side-actions {
  display: grid;
  gap: 8px;
}

.small-btn.danger {
  background: rgba(95, 25, 42, .8);
}

.content-panel {
  min-width: 0;
  padding: 12px;
  overflow: auto;
}

.game-page {
  display: none;
  min-height: 100%;
}

.game-page.active {
  display: block;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.page-head h1 {
  margin: 0;
  font-size: 24px;
}

.page-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.scene-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.scene-badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(111,255,176,.12);
  border: 1px solid rgba(111,255,176,.3);
  color: var(--good);
  font-size: 12px;
  white-space: nowrap;
}

.scene-badge.dim {
  color: var(--muted);
  background: rgba(88, 215, 255, .08);
  border-color: var(--line);
}

.overview-layout {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) 340px;
  gap: 12px;
}

.overview-main,
.overview-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.stat-grid div,
.overview-card,
.selected-card,
.card,
.section-block,
.summary-item {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-3);
}

.hero-card {
  min-height: 130px;
  display: grid;
  gap: 10px;
  align-content: center;
  background:
    radial-gradient(circle at 86% 30%, rgba(88, 215, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(12, 34, 60, .96), rgba(6, 18, 34, .82));
}

.stat-grid span,
.overview-card span,
.selected-card span,
.card span,
.summary-item span,
.meta {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.stat-grid strong {
  display: block;
  font-size: 22px;
  margin-top: 4px;
}

.compact-actions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 8px;
}

.section-block {
  display: grid;
  gap: 10px;
}

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.section-title h2 {
  margin: 0;
  font-size: 17px;
}

.section-title span {
  color: var(--muted);
  font-size: 12px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.summary-item {
  padding: 9px;
}

.summary-item strong {
  display: block;
  font-size: 14px;
}

.summary-item span {
  margin-top: 3px;
}

.mini-planet {
  position: relative;
  min-height: 250px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 55%, rgba(88,215,255,.24), transparent 37%),
    linear-gradient(180deg, rgba(8,24,43,.85), rgba(2,8,20,.95));
}

.mini-core {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #71e4ff, #1a527e 48%, #071a31 76%);
  box-shadow: 0 0 60px rgba(88,215,255,.25);
}

.mini-orbit {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 260px;
  height: 130px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(130,207,255,.25);
  border-radius: 50%;
  animation: spin 36s linear infinite;
}

.mini-node {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px rgba(88,215,255,.45);
}

.mini-node.n1 { left: 28%; top: 32%; }
.mini-node.n2 { right: 25%; top: 48%; }
.mini-node.n3 { left: 46%; bottom: 20%; }

.planet-scene {
  position: relative;
  min-height: calc(100vh - 132px);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(130,207,255,.18);
  background:
    radial-gradient(circle at 48% 58%, rgba(44, 153, 211, .35) 0, transparent 35%),
    radial-gradient(circle at 50% 55%, #152f4c 0, #0c2139 28%, #07172a 46%, transparent 47%),
    linear-gradient(180deg, rgba(8, 24, 43, .4), rgba(2, 8, 20, .9));
}

.deep-glow {
  position: absolute;
  left: 50%;
  top: 57%;
  width: 660px;
  height: 520px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 42% 44%, rgba(88,215,255,.25), transparent 21%),
    radial-gradient(circle at 58% 62%, rgba(111,255,176,.17), transparent 21%),
    radial-gradient(circle, rgba(25,85,130,.25), transparent 64%);
  filter: blur(2px);
  animation: pulse 4s ease-in-out infinite;
}

.planet-core {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 36% 31%, rgba(99, 223, 255, .28), transparent 19%),
    radial-gradient(circle at 58% 63%, rgba(52, 158, 216, .25), transparent 25%),
    radial-gradient(circle, rgba(21, 72, 115, .5), rgba(5, 20, 39, .2) 65%, transparent 72%);
  box-shadow: 0 0 80px rgba(88,215,255,.12);
  opacity: .9;
}

@keyframes pulse {
  0%, 100% { opacity: .58; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .92; transform: translate(-50%, -50%) scale(1.045); }
}

.orbit {
  position: absolute;
  left: 50%;
  top: 54%;
  border: 1px dashed rgba(130,207,255,.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-a {
  width: 74%;
  height: 44%;
  animation: spin 34s linear infinite;
}

.orbit-b {
  width: 86%;
  height: 56%;
  animation: spin 58s linear reverse infinite;
}

.orbit-c {
  width: 54%;
  height: 74%;
  animation: spin 76s linear infinite;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.route-line {
  position: absolute;
  width: 260px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111,255,176,.26), transparent);
  transform-origin: center;
  opacity: .7;
  animation: route-pulse 3s ease-in-out infinite;
}

.route-one {
  left: 38%;
  top: 49%;
  transform: rotate(-20deg);
}

.route-two {
  left: 42%;
  top: 65%;
  transform: rotate(22deg);
  animation-delay: 1.2s;
}

@keyframes route-pulse {
  0%, 100% { opacity: .18; }
  50% { opacity: .7; }
}

.building {
  position: absolute;
  border: 1px solid rgba(136, 222, 255, .48);
  border-radius: 18px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(89, 206, 255, .22), rgba(20, 57, 95, .94)),
    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(255,255,255,.05) 13px);
  box-shadow: 0 0 24px rgba(88,215,255,.16), inset 0 0 22px rgba(255,255,255,.06);
  min-width: 128px;
  min-height: 94px;
  padding: 9px 10px 8px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  cursor: pointer;
  overflow: hidden;
}

.building::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: rotate(25deg) translateX(-100%);
  animation: shine 5.5s ease-in-out infinite;
}

@keyframes shine {
  0%, 55% { transform: rotate(25deg) translateX(-110%); }
  75%, 100% { transform: rotate(25deg) translateX(110%); }
}

.building:hover,
.building.selected {
  border-color: rgba(111,255,176,.85);
  box-shadow: 0 0 32px rgba(111,255,176,.28), inset 0 0 28px rgba(255,255,255,.08);
}

.building.upgrading {
  border-color: rgba(255, 211, 111, .85);
  box-shadow: 0 0 36px rgba(255, 211, 111, .28), inset 0 0 28px rgba(255,255,255,.08);
}

.building span,
.building em {
  position: relative;
  z-index: 1;
  display: block;
}

.building span {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.05;
}

.building em {
  margin-top: 0;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.command { left: 42%; top: 38%; }
.mine { left: 19%; top: 53%; }
.crystal { left: 59%; top: 56%; }
.energy { left: 42%; top: 68%; }
.lab { left: 64%; top: 34%; }
.shipyard { left: 24%; top: 34%; }

.building-graphic {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 34px;
  margin-bottom: 2px;
  filter: drop-shadow(0 0 10px rgba(88, 215, 255, .28));
}

.building-graphic b,
.building-graphic i,
.building-graphic u {
  position: absolute;
  display: block;
  text-decoration: none;
}

.command-icon b {
  left: 10px;
  bottom: 3px;
  width: 22px;
  height: 24px;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(180deg, #c7f4ff, #57c9f5 55%, #286993);
  border: 1px solid rgba(255,255,255,.45);
}

.command-icon i {
  left: 18px;
  top: 0;
  width: 6px;
  height: 28px;
  border-radius: 999px;
  background: rgba(196, 244, 255, .9);
}

.command-icon u {
  left: 14px;
  top: 0;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(111, 255, 176, .8);
  border-radius: 50%;
  animation: icon-pulse 2.4s ease-in-out infinite;
}

.mine-icon b {
  left: 4px;
  bottom: 3px;
  width: 34px;
  height: 20px;
  clip-path: polygon(0 100%, 18% 30%, 38% 78%, 55% 18%, 78% 75%, 100% 100%);
  background: linear-gradient(180deg, #9bb6c8, #42586d);
}

.mine-icon i {
  left: 17px;
  top: 5px;
  width: 8px;
  height: 25px;
  background: linear-gradient(180deg, #cfe9ff, #6a8398);
  transform: rotate(36deg);
  border-radius: 3px;
}

.mine-icon u {
  left: 8px;
  top: 22px;
  width: 26px;
  height: 3px;
  background: rgba(88, 215, 255, .85);
  border-radius: 999px;
}

.crystal-icon b {
  left: 12px;
  top: 1px;
  width: 18px;
  height: 31px;
  clip-path: polygon(50% 0, 100% 30%, 76% 100%, 24% 100%, 0 30%);
  background: linear-gradient(180deg, #effcff, #84eeff 38%, #785cff);
}

.crystal-icon i {
  left: 4px;
  top: 12px;
  width: 14px;
  height: 20px;
  clip-path: polygon(50% 0, 100% 36%, 72% 100%, 28% 100%, 0 36%);
  background: linear-gradient(180deg, #baf8ff, #39b9e8);
  opacity: .82;
}

.crystal-icon u {
  left: 24px;
  top: 15px;
  width: 14px;
  height: 17px;
  clip-path: polygon(50% 0, 100% 36%, 72% 100%, 28% 100%, 0 36%);
  background: linear-gradient(180deg, #d8fdff, #8b5cff);
  opacity: .72;
}

.energy-icon b {
  left: 7px;
  top: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #f7fff4 0 18%, #6fffb0 19% 35%, #2bb2ff 36% 58%, rgba(43,178,255,.15) 59%);
  border: 1px solid rgba(111,255,176,.65);
  animation: icon-pulse 2s ease-in-out infinite;
}

.energy-icon i {
  left: 20px;
  top: -1px;
  width: 3px;
  height: 35px;
  border-radius: 999px;
  background: rgba(111, 255, 176, .9);
  transform: rotate(35deg);
}

.energy-icon u {
  left: 20px;
  top: -1px;
  width: 3px;
  height: 35px;
  border-radius: 999px;
  background: rgba(88, 215, 255, .9);
  transform: rotate(-35deg);
}

.lab-icon b {
  left: 6px;
  bottom: 3px;
  width: 30px;
  height: 22px;
  border-radius: 5px 5px 12px 12px;
  background: linear-gradient(180deg, #d8fdff, #4bbfea 60%, #214b75);
  border: 1px solid rgba(255,255,255,.42);
}

.lab-icon i {
  left: 16px;
  top: 0;
  width: 10px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, #6fffb0);
}

.lab-icon u {
  left: 11px;
  top: 8px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(111, 255, 176, .72);
  border-radius: 50%;
  animation: spin-soft 5s linear infinite;
}

.shipyard-icon b {
  left: 4px;
  top: 10px;
  width: 34px;
  height: 13px;
  clip-path: polygon(0 50%, 20% 0, 75% 0, 100% 50%, 75% 100%, 20% 100%);
  background: linear-gradient(90deg, #d7f8ff, #58d7ff 55%, #8b5cff);
}

.shipyard-icon i {
  left: 1px;
  top: 14px;
  width: 13px;
  height: 5px;
  border-radius: 999px;
  background: rgba(111, 255, 176, .85);
  box-shadow: -6px 0 13px rgba(111, 255, 176, .65);
}

.shipyard-icon u {
  right: 4px;
  top: 5px;
  width: 10px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  opacity: .7;
}

@keyframes icon-pulse {
  0%, 100% { opacity: .72; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.06); }
}

.ship {
  position: absolute;
  left: -60px;
  top: 45%;
  width: 42px;
  height: 18px;
  border-radius: 50% 14px 14px 50%;
  background: linear-gradient(90deg, #bdefff, #58d7ff 55%, #8b5cff);
  box-shadow: -14px 0 18px rgba(88,215,255,.35), 0 0 18px rgba(139,92,255,.4);
  opacity: 0;
  z-index: 3;
}

.ship.flying {
  animation: fly 2.6s ease-in-out;
}

@keyframes fly {
  0% { opacity: 0; transform: translateX(0) translateY(20px) scale(.7); }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(110vw) translateY(-120px) scale(1.08); }
}

.version-watermark {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: rgba(148, 175, 204, .62);
  font-size: 11px;
}

.right-panel {
  padding: 12px;
  overflow: auto;
  min-width: 0;
}

.panel h2 {
  margin: 0;
  font-size: 19px;
}

.panel p {
  margin: 2px 0 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 12px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.sticky-head {
  position: sticky;
  top: -12px;
  z-index: 5;
  padding: 10px 0 8px;
  background: linear-gradient(180deg, rgba(13, 29, 50, .98), rgba(13, 29, 50, .88));
  backdrop-filter: blur(12px);
}

.selected-card,
.card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-3);
  display: grid;
  gap: 7px;
}

.selected-card {
  margin-bottom: 10px;
  border-color: rgba(111,255,176,.25);
  background: linear-gradient(180deg, rgba(12, 33, 57, .9), rgba(7, 21, 39, .76));
}

.card-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.card.compact-card {
  padding: 8px 9px;
  gap: 5px;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card h3 {
  margin: 0;
  font-size: 14px;
}

.selected-card span,
.card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.level-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(88, 215, 255, .1);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.status-pill.good {
  color: var(--good);
  border-color: rgba(111,255,176,.35);
  background: rgba(111,255,176,.08);
}

.status-pill.warn {
  color: var(--warn);
  border-color: rgba(255,211,111,.35);
  background: rgba(255,211,111,.08);
}

.card-actions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  gap: 6px;
}

.card-actions button,
.selected-card button,
.card button[data-upgrade],
.card button[data-select-building] {
  padding: 5px 8px;
  min-height: 28px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(21, 55, 91, .9);
  cursor: pointer;
}

button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--good));
  transition: width .25s;
}

.icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.log-list {
  display: grid;
  gap: 7px;
}

.log-row {
  border-left: 2px solid rgba(88,215,255,.6);
  padding: 8px 10px;
  background: rgba(8, 23, 42, .58);
  border-radius: 10px;
  color: #d7ebff;
  font-size: 13px;
}

.compact-log .log-row {
  font-size: 12px;
  padding: 7px 9px;
}

.log-row:first-child {
  border-left-color: rgba(111,255,176,.8);
}

.muted {
  color: var(--muted);
}

@media (max-width: 1240px) {
  html,
  body {
    overflow: auto;
  }

  #app {
    height: auto;
    min-height: 100vh;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .brand {
    min-width: 0;
  }

  .resources {
    grid-template-columns: repeat(3, 1fr);
  }

  .layout,
  .layout.panel-hidden {
    grid-template-columns: 1fr;
  }

  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .side-status {
    margin-top: 0;
  }

  .side-actions {
    grid-template-columns: 1fr 1fr;
  }

  .overview-layout {
    grid-template-columns: 1fr;
  }

  .stat-grid,
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .planet-scene {
    min-height: 600px;
  }
}


/* v0.5: improved local SVG building artwork */
.building {
  min-width: 140px;
  min-height: 118px;
  padding: 8px 10px 9px;
}

.building-art {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 64px;
  object-fit: contain;
  display: block;
  margin: -2px auto 1px;
  filter: drop-shadow(0 0 13px rgba(88, 215, 255, .38));
  transition: transform .18s ease, filter .18s ease;
}

.building:hover .building-art,
.building.selected .building-art {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 18px rgba(111, 255, 176, .48));
}

.building.upgrading .building-art {
  filter: drop-shadow(0 0 18px rgba(255, 211, 111, .55));
}

.building span {
  font-size: 13px;
}

.building em {
  font-size: 12px;
}

.command { left: 41%; top: 35%; }
.mine { left: 17%; top: 52%; }
.crystal { left: 58%; top: 55%; }
.energy { left: 41%; top: 68%; }
.lab { left: 64%; top: 31%; }
.shipyard { left: 23%; top: 31%; }

@media (max-width: 1240px) {
  .building {
    min-width: 132px;
    min-height: 110px;
  }

  .building-art {
    width: 80px;
    height: 58px;
  }
}


/* v0.6: mission sector/radar page */
.mission-layout {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) 420px;
  gap: 12px;
  align-items: start;
}

.mission-map-panel {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(88, 215, 255, .1), transparent 46%),
    rgba(8, 23, 42, .72);
}

.sector-map {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(130, 207, 255, .2);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .18), transparent 7%),
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .07), transparent 52%),
    linear-gradient(180deg, rgba(2,8,20,.55), rgba(2,8,20,.92));
}

.sector-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(88,215,255,.32) 1px, transparent 1.5px);
  background-size: 80px 80px, 132px 132px;
  opacity: .38;
  animation: drift 58s linear infinite;
}

.sector-map.scanning {
  box-shadow: inset 0 0 44px rgba(111, 255, 176, .18), 0 0 28px rgba(88, 215, 255, .16);
}

.sector-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #dffaff, #58d7ff 34%, #143d64 68%, #06111f);
  border: 1px solid rgba(130, 207, 255, .48);
  box-shadow: 0 0 42px rgba(88,215,255,.28);
  z-index: 2;
}

.radar-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(130, 207, 255, .22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.ring-a { width: 210px; height: 210px; }
.ring-b { width: 360px; height: 360px; }
.ring-c { width: 510px; height: 510px; }

.radar-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 250px;
  transform-origin: 0 0;
  background: conic-gradient(from 270deg, rgba(111,255,176,.22), transparent 58deg);
  border-radius: 50%;
  animation: radar-spin 4s linear infinite;
  z-index: 1;
}

@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sector-grid-line {
  position: absolute;
  background: rgba(130, 207, 255, .12);
  z-index: 1;
}

.sector-grid-line.horizontal {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.sector-grid-line.vertical {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.mission-markers,
.active-flight-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.mission-marker {
  position: absolute;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(111, 255, 176, .75);
  border-radius: 50%;
  background: rgba(111, 255, 176, .14);
  box-shadow: 0 0 18px rgba(111, 255, 176, .34);
  cursor: pointer;
  padding: 0;
  z-index: 6;
}

.mission-marker span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #6fffb0;
}

.mission-marker::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(111, 255, 176, .22);
  border-radius: 50%;
  animation: marker-pulse 1.8s ease-in-out infinite;
}

.mission-marker.high {
  border-color: rgba(255, 111, 145, .85);
  background: rgba(255, 111, 145, .14);
  box-shadow: 0 0 18px rgba(255, 111, 145, .34);
}

.mission-marker.high span {
  background: #ff6f91;
}

.mission-marker.active {
  border-color: rgba(255, 211, 111, .9);
  background: rgba(255, 211, 111, .16);
  box-shadow: 0 0 20px rgba(255, 211, 111, .38);
  pointer-events: none;
}

.mission-marker.active span {
  background: #ffd36f;
}

@keyframes marker-pulse {
  0%, 100% { opacity: .3; transform: scale(.82); }
  50% { opacity: .9; transform: scale(1.08); }
}

.flight-route {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  z-index: 5;
}

.flight-route::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
  height: 1px;
  transform-origin: left center;
  transform: rotate(25deg);
  background: linear-gradient(90deg, rgba(255, 211, 111, .75), transparent);
  opacity: .55;
}

.flight-route i {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 9px;
  border-radius: 50% 10px 10px 50%;
  background: linear-gradient(90deg, #dffaff, #58d7ff, #8b5cff);
  box-shadow: 0 0 16px rgba(88,215,255,.48);
  animation: flight-move 2.8s ease-in-out infinite;
}

@keyframes flight-move {
  0% { transform: translate(0, 0) scale(.82); opacity: .5; }
  55% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: .15; }
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.available { background: #6fffb0; }
.legend-dot.active { background: #ffd36f; }
.legend-dot.high { background: #ff6f91; }

.mission-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.mission-list {
  display: grid;
  gap: 8px;
}

.mission-card button[data-mission] {
  justify-self: end;
  min-width: 68px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: rgba(21, 55, 91, .9);
  cursor: pointer;
}

.active-card {
  border-color: rgba(255, 211, 111, .25);
}

.risk-high {
  color: var(--bad);
  border-color: rgba(255,111,145,.38);
  background: rgba(255,111,145,.08);
}

@media (max-width: 1240px) {
  .mission-layout {
    grid-template-columns: 1fr;
  }

  .sector-map {
    min-height: 440px;
  }
}


/* v0.7: fleet and research mission gating */
.fleet-layout {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) 360px;
  gap: 12px;
  align-items: start;
}

.fleet-inventory {
  display: grid;
  gap: 8px;
}

.fleet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 23, 42, .72);
}

.fleet-row strong {
  display: block;
  font-size: 14px;
}

.fleet-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.fleet-row b {
  min-width: 38px;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid rgba(111,255,176,.3);
  border-radius: 999px;
  color: var(--good);
  background: rgba(111,255,176,.08);
}

.ship-card {
  position: relative;
  overflow: hidden;
}

.ship-card::before {
  content: "";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,215,255,.18), transparent 65%);
  pointer-events: none;
}

.ship-card.tier-2::before {
  background: radial-gradient(circle, rgba(255,211,111,.18), transparent 65%);
}

.ship-card.tier-3::before {
  background: radial-gradient(circle, rgba(255,111,145,.18), transparent 65%);
}

.ship-card button,
.research-card button {
  justify-self: end;
  min-width: 80px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: rgba(21, 55, 91, .9);
  cursor: pointer;
}

.research-card {
  border-color: rgba(88, 215, 255, .2);
}

@media (max-width: 1240px) {
  .fleet-layout {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* v0.8: building detail-only panel and timed research */
.building-detail-card {
  gap: 12px;
}

.detail-section {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(130, 207, 255, .18);
  border-radius: 14px;
  background: rgba(3, 13, 28, .32);
}

.detail-section h3 {
  margin: 0;
  font-size: 13px;
  color: #ecf7ff;
}

.yield-row {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid rgba(130, 207, 255, .16);
  border-radius: 12px;
  background: rgba(8, 23, 42, .55);
}

.yield-row.current {
  border-color: rgba(111, 255, 176, .35);
  background: rgba(111, 255, 176, .07);
}

.yield-row strong {
  font-size: 12px;
}

.yield-row span {
  font-size: 11px;
}

.active-research {
  border-color: rgba(255, 211, 111, .28);
  background:
    radial-gradient(circle at 88% 22%, rgba(255, 211, 111, .12), transparent 34%),
    rgba(8, 23, 42, .72);
}

.right-panel .card-list {
  display: none;
}


/* v0.9: energy balance and mission travel visualization */
.stat-grid {
  grid-template-columns: repeat(6, 1fr);
}

.flight-route {
  display: none;
}

.flight-line {
  position: absolute;
  width: 1px;
  height: 1px;
  z-index: 4;
}

.flight-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 190px;
  height: 1px;
  transform-origin: left center;
  transform: rotate(25deg);
  background: linear-gradient(90deg, rgba(255, 211, 111, .72), rgba(88,215,255,.22), transparent);
  opacity: .52;
}

.travel-ship {
  position: absolute;
  width: 28px;
  height: 13px;
  transform: translate(-50%, -50%);
  border-radius: 50% 12px 12px 50%;
  background: linear-gradient(90deg, #effcff, #58d7ff 55%, #8b5cff);
  box-shadow: 0 0 18px rgba(88, 215, 255, .55), -10px 0 16px rgba(111,255,176,.28);
  z-index: 8;
}

.travel-ship::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 4px;
  width: 13px;
  height: 4px;
  border-radius: 999px;
  background: rgba(111,255,176,.75);
  filter: blur(.2px);
}

.travel-ship.returning {
  transform: translate(-50%, -50%) scaleX(-1);
  box-shadow: 0 0 18px rgba(255, 211, 111, .55), -10px 0 16px rgba(255,211,111,.22);
}

.travel-ship.returning::before {
  background: rgba(255,211,111,.8);
}

.res:has(#energy) {
  border-color: rgba(111,255,176,.28);
}

@media (max-width: 1240px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* v1.0: sector choice, fixed radar route, defense/storage buildings */
.defense { left: 13%; top: 35%; }
.storage { left: 70%; top: 68%; }

.sector-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.sector-btn {
  text-align: left;
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: rgba(16, 39, 67, .76);
  cursor: pointer;
}

.sector-btn span {
  color: var(--muted);
  font-size: 11px;
}

.sector-btn.active {
  border-color: rgba(111,255,176,.55);
  background:
    radial-gradient(circle at 88% 20%, rgba(111,255,176,.16), transparent 34%),
    rgba(16, 55, 75, .88);
  box-shadow: inset 0 0 18px rgba(111,255,176,.07);
}

.flight-line {
  display: none;
}

.flight-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.flight-svg line {
  stroke: rgba(255, 211, 111, .66);
  stroke-width: .35;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(255,211,111,.35));
}

.travel-ship {
  transition: left .8s linear, top .8s linear;
}

@media (max-width: 1240px) {
  .sector-selector {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* v1.1: real planet and improved building alignment/art */
.planet-scene {
  min-height: calc(100vh - 138px);
  background:
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .12), transparent 38%),
    radial-gradient(circle at 50% 72%, rgba(111, 255, 176, .07), transparent 22%),
    linear-gradient(180deg, rgba(8, 24, 43, .56), rgba(2, 8, 20, .94));
}

.planet-art {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(45vw, 560px);
  height: min(45vw, 560px);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: .98;
  filter: drop-shadow(0 0 42px rgba(88, 215, 255, .22));
  pointer-events: none;
}

.planet-shadow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(46vw, 580px);
  height: min(46vw, 580px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 30%, transparent 0 42%, rgba(0, 8, 20, .10) 64%, rgba(0, 4, 14, .42) 100%);
  mix-blend-mode: multiply;
}

.planet-core {
  display: none;
}

.deep-glow {
  width: min(64vw, 820px);
  height: min(64vw, 820px);
  opacity: .74;
  z-index: 0;
}

.orbit {
  z-index: 3;
  border-color: rgba(130,207,255,.16);
}

.route-line {
  z-index: 3;
  opacity: .36;
}

.building {
  z-index: 5;
  width: 150px;
  min-width: 150px;
  height: 132px;
  min-height: 132px;
  padding: 8px 9px 9px;
  align-content: center;
  gap: 3px;
  background:
    linear-gradient(180deg, rgba(94, 207, 255, .20), rgba(17, 52, 86, .88)),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 48%);
}

.building-art {
  width: 106px;
  height: 76px;
  margin: -3px auto 0;
  object-fit: contain;
}

.building span {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.05;
  text-align: center;
}

.building em {
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

/* ring-like placement around the visible planet */
.command { left: calc(50% - 75px); top: calc(50% - 155px); }
.shipyard { left: calc(50% - 265px); top: calc(50% - 195px); }
.research, .lab { left: calc(50% + 145px); top: calc(50% - 195px); }
.mine { left: calc(50% - 340px); top: calc(50% - 32px); }
.crystal { left: calc(50% + 230px); top: calc(50% - 32px); }
.energy { left: calc(50% - 75px); top: calc(50% + 126px); }
.defense { left: calc(50% - 425px); top: calc(50% - 195px); }
.storage { left: calc(50% + 335px); top: calc(50% + 126px); }

.building:hover .building-art,
.building.selected .building-art {
  transform: translateY(-3px) scale(1.08);
}

.building.upgrading .building-art {
  transform: translateY(-2px) scale(1.05);
}

@media (max-width: 1240px) {
  .planet-art {
    width: 460px;
    height: 460px;
  }

  .planet-shadow {
    width: 470px;
    height: 470px;
  }

  .building {
    width: 132px;
    min-width: 132px;
    height: 118px;
    min-height: 118px;
  }

  .building-art {
    width: 90px;
    height: 66px;
  }

  .command { left: calc(50% - 66px); top: 18%; }
  .shipyard { left: 21%; top: 16%; }
  .lab { left: auto; right: 21%; top: 16%; }
  .mine { left: 12%; top: 42%; }
  .crystal { left: auto; right: 12%; top: 42%; }
  .energy { left: calc(50% - 66px); top: 67%; }
  .defense { left: 4%; top: 18%; }
  .storage { right: 4%; left: auto; top: 67%; }
}


/* v1.2: Galaxy Map */
.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.galaxy-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) 390px;
  gap: 12px;
  align-items: start;
}

.galaxy-map-panel {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, rgba(139, 92, 255, .11), transparent 42%),
    rgba(8, 23, 42, .72);
}

.galaxy-map {
  position: relative;
  min-height: 570px;
  border: 1px solid rgba(130, 207, 255, .2);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 2%),
    radial-gradient(circle at 50% 50%, rgba(88,215,255,.11), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(139,92,255,.09), transparent 48%),
    linear-gradient(180deg, rgba(2,8,20,.55), rgba(2,8,20,.94));
}

.galaxy-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.82) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(88,215,255,.38) 1px, transparent 1.5px);
  background-size: 84px 84px, 137px 137px;
  opacity: .42;
  animation: drift 68s linear infinite;
}

.galaxy-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 8%, #ffe9a8 9% 19%, #58d7ff 20% 40%, #8b5cff 41% 66%, transparent 67%);
  box-shadow: 0 0 60px rgba(139,92,255,.38), 0 0 28px rgba(88,215,255,.35);
  z-index: 1;
}

.galaxy-arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 180px;
  border-radius: 50%;
  transform-origin: center;
  background: radial-gradient(ellipse, rgba(88,215,255,.16), transparent 68%);
  filter: blur(1px);
  opacity: .75;
  z-index: 1;
}

.arm-a { transform: translate(-50%, -50%) rotate(18deg); }
.arm-b { transform: translate(-50%, -50%) rotate(138deg); opacity: .52; }
.arm-c { transform: translate(-50%, -50%) rotate(258deg); opacity: .42; }

.galaxy-grid {
  position: absolute;
  inset: 10%;
  border: 1px dashed rgba(130,207,255,.11);
  border-radius: 50%;
  z-index: 1;
}

.galaxy-grid::before,
.galaxy-grid::after {
  content: "";
  position: absolute;
  background: rgba(130,207,255,.09);
}

.galaxy-grid::before {
  left: -12%;
  right: -12%;
  top: 50%;
  height: 1px;
}

.galaxy-grid::after {
  top: -12%;
  bottom: -12%;
  left: 50%;
  width: 1px;
}

.galaxy-markers {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.galaxy-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(130,207,255,.5);
  background: rgba(88,215,255,.12);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 18px rgba(88,215,255,.28);
}

.galaxy-marker span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #58d7ff;
}

.galaxy-marker::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(88,215,255,.15);
  animation: marker-pulse 2.2s ease-in-out infinite;
}

.galaxy-marker.selected {
  border-color: rgba(111,255,176,.95);
  box-shadow: 0 0 26px rgba(111,255,176,.42);
}

.galaxy-marker.planet span,
.legend-dot.planet { background: #6fffb0; }

.galaxy-marker.asteroid span,
.legend-dot.asteroid { background: #ffd36f; }

.galaxy-marker.debris span,
.legend-dot.debris { background: #b9c7d8; }

.galaxy-marker.enemy span,
.legend-dot.enemy { background: #ff6f91; }

.galaxy-marker.anomaly span,
.legend-dot.anomaly { background: #8b5cff; }

.galaxy-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.galaxy-details {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(8, 23, 42, .72);
}

.galaxy-details span {
  color: var(--muted);
  font-size: 12px;
}

.galaxy-details button {
  justify-self: end;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: rgba(21, 55, 91, .9);
}

.roadmap-list {
  display: grid;
  gap: 8px;
}

.roadmap-list div {
  padding: 9px 10px;
  border: 1px solid rgba(130,207,255,.16);
  border-radius: 13px;
  background: rgba(8, 23, 42, .55);
}

.roadmap-list strong {
  display: block;
  font-size: 13px;
}

.roadmap-list span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1240px) {
  .galaxy-layout {
    grid-template-columns: 1fr;
  }

  .galaxy-map {
    min-height: 460px;
  }
}


/* v1.3: real building image assets */
.building {
  width: 188px;
  min-width: 188px;
  height: 154px;
  min-height: 154px;
  padding: 8px;
  border-radius: 19px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(12, 32, 56, .88), rgba(3, 12, 25, .95));
}

.building::before {
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 45%, rgba(0, 8, 20, .78) 100%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%);
  transform: none;
  animation: none;
  z-index: 2;
}

.building-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08) drop-shadow(0 0 12px rgba(88, 215, 255, .16));
  transition: transform .22s ease, filter .22s ease;
}

.building span,
.building em {
  z-index: 3;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

.building span {
  align-self: end;
  margin-top: 84px;
  font-size: 14px;
  font-weight: 900;
}

.building em {
  font-size: 12px;
  color: #c4dbef;
}

.building:hover .building-art,
.building.selected .building-art {
  transform: scale(1.08);
  filter: saturate(1.16) contrast(1.12) drop-shadow(0 0 18px rgba(111,255,176,.38));
}

.building.upgrading .building-art {
  filter: saturate(1.12) contrast(1.10) drop-shadow(0 0 18px rgba(255,211,111,.5));
}

.building:hover,
.building.selected {
  border-color: rgba(111,255,176,.9);
  box-shadow: 0 0 34px rgba(111,255,176,.25), inset 0 0 22px rgba(255,255,255,.05);
}

/* adjusted positions for larger image cards */
.command { left: calc(50% - 94px); top: calc(50% - 174px); }
.shipyard { left: calc(50% - 326px); top: calc(50% - 220px); }
.lab { left: calc(50% + 138px); top: calc(50% - 220px); }
.mine { left: calc(50% - 398px); top: calc(50% - 22px); }
.crystal { left: calc(50% + 210px); top: calc(50% - 22px); }
.energy { left: calc(50% - 94px); top: calc(50% + 148px); }
.defense { left: calc(50% - 506px); top: calc(50% - 220px); }
.storage { left: calc(50% + 396px); top: calc(50% + 148px); }

.detail-building-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border: 1px solid rgba(130,207,255,.22);
  border-radius: 15px;
  box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 24px rgba(88,215,255,.08);
}

@media (max-width: 1240px) {
  .building {
    width: 150px;
    min-width: 150px;
    height: 126px;
    min-height: 126px;
  }

  .building span {
    margin-top: 68px;
    font-size: 13px;
  }

  .command { left: calc(50% - 75px); top: 18%; }
  .shipyard { left: 20%; top: 16%; }
  .lab { left: auto; right: 20%; top: 16%; }
  .mine { left: 10%; top: 42%; }
  .crystal { left: auto; right: 10%; top: 42%; }
  .energy { left: calc(50% - 75px); top: 67%; }
  .defense { left: 3%; top: 18%; }
  .storage { right: 3%; left: auto; top: 67%; }

  .detail-building-image {
    height: 130px;
  }
}


/* v1.4: building management layout inspired by sci-fi storage screen */
.layout:not(.panel-hidden) {
  grid-template-columns: 170px minmax(420px, 1fr) minmax(520px, 640px);
}

.building-management-card {
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(6, 19, 34, .98), rgba(2, 9, 20, .96));
  border-color: rgba(130,207,255,.28);
}

.building-hero {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 1fr 185px;
  gap: 14px;
  padding: 20px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(130,207,255,.26);
}

.building-hero::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(130,207,255,.18);
  border-radius: 14px;
  pointer-events: none;
  box-shadow: inset 0 0 28px rgba(88,215,255,.08);
}

.building-hero-title {
  position: relative;
  z-index: 1;
  align-self: start;
  max-width: 360px;
}

.building-hero-title h3 {
  margin: 0;
  font-size: 28px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ecf7ff;
  text-shadow: 0 3px 14px rgba(0,0,0,.65);
}

.building-hero-title p {
  margin: 10px 0 0;
  color: #b7cbe0;
  line-height: 1.42;
  font-size: 14px;
}

.building-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  align-content: end;
}

.building-hero-stats > div,
.management-progress {
  padding: 10px 12px;
  border: 1px solid rgba(130,207,255,.26);
  border-radius: 12px;
  background: rgba(3, 14, 27, .72);
  box-shadow: inset 0 0 18px rgba(88,215,255,.04);
}

.building-hero-stats span,
.management-progress span {
  display: block;
  color: #9fb6cf;
  font-size: 11px;
  letter-spacing: .04em;
}

.building-hero-stats strong {
  display: block;
  margin-top: 3px;
  color: #ffd36f;
  font-size: 24px;
  line-height: 1;
}

.management-upgrade-btn {
  padding: 10px 12px;
  border: 1px solid rgba(88,215,255,.55);
  border-radius: 10px;
  color: #ecf7ff;
  background: linear-gradient(180deg, rgba(48,145,210,.92), rgba(18,68,110,.95));
  box-shadow: 0 0 22px rgba(88,215,255,.18), inset 0 0 14px rgba(255,255,255,.08);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .06em;
}

.management-upgrade-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.building-tabs {
  display: flex;
  border-bottom: 1px solid rgba(130,207,255,.2);
  background: rgba(3, 14, 27, .92);
}

.building-tabs button {
  min-width: 150px;
  padding: 12px 18px;
  border: 0;
  border-right: 1px solid rgba(130,207,255,.14);
  color: #8fa8c0;
  background: rgba(8, 23, 42, .68);
  font-size: 18px;
  letter-spacing: .08em;
  cursor: default;
}

.building-tabs button.active {
  color: #ecf7ff;
  background: linear-gradient(180deg, rgba(12,55,88,.95), rgba(5,25,44,.95));
  box-shadow: inset 0 -2px 0 #58d7ff;
}

.management-table {
  display: grid;
  border-bottom: 1px solid rgba(130,207,255,.18);
}

.management-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.35fr) .55fr .65fr minmax(130px, .95fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(130,207,255,.13);
  background: linear-gradient(90deg, rgba(8,23,42,.76), rgba(4,16,31,.76));
}

.management-row.head {
  padding: 9px 14px;
  color: #8fa8c0;
  font-size: 11px;
  letter-spacing: .08em;
  background: rgba(3, 14, 27, .9);
}

.management-row strong {
  display: block;
  font-size: 15px;
  color: #ecf7ff;
}

.management-row em {
  display: block;
  margin-top: 3px;
  color: #9fb6cf;
  font-style: normal;
  font-size: 12px;
  line-height: 1.25;
}

.management-row > span {
  color: #cfe4f7;
  font-size: 15px;
}

.usage-bar {
  position: relative;
  height: 28px;
  border: 1px solid rgba(130,207,255,.22);
  background: rgba(0,0,0,.28);
  overflow: hidden;
}

.usage-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(88,215,255,.75), rgba(111,255,176,.75));
}

.usage-bar.energy i {
  background: linear-gradient(90deg, rgba(88,215,255,.75), rgba(139,92,255,.82));
}

.usage-bar b {
  position: absolute;
  right: 8px;
  top: 5px;
  color: #dbefff;
  font-size: 12px;
}

.upgrade-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  background: rgba(2, 9, 20, .86);
}

.upgrade-panel > div {
  padding: 12px;
  border: 1px solid rgba(130,207,255,.18);
  border-radius: 13px;
  background: rgba(8, 23, 42, .55);
}

.upgrade-panel strong {
  display: block;
  margin-bottom: 6px;
  color: #ecf7ff;
}

.upgrade-panel span {
  display: block;
  color: #9fb6cf;
  font-size: 12px;
  line-height: 1.35;
}

.detail-building-image {
  display: none;
}

@media (max-width: 1240px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 1fr;
  }

  .building-hero {
    grid-template-columns: 1fr;
  }

  .management-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .management-row.head {
    display: none;
  }

  .upgrade-panel {
    grid-template-columns: 1fr;
  }
}


/* v1.5: layout refinement based on supplied reference */
.layout:not(.panel-hidden) {
  grid-template-columns: 170px minmax(560px, 1fr) minmax(560px, 720px);
  gap: 10px;
}

.content-panel,
.right-panel {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8, 24, 43, .96), rgba(3, 12, 25, .96));
  border-color: rgba(48, 156, 220, .28);
}

#buildingsPage .page-head {
  margin-bottom: 10px;
  padding: 2px 2px 0;
}

#buildingsPage .page-head h1,
#buildPanel h2 {
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#buildingsPage .page-head p,
#buildPanel p {
  color: #a7bdd4;
  font-size: 14px;
}

.planet-scene {
  min-height: calc(100vh - 142px);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 48%, rgba(88, 215, 255, .10), transparent 32%),
    linear-gradient(180deg, rgba(8, 24, 43, .55), rgba(2, 8, 20, .95));
  box-shadow: inset 0 0 0 1px rgba(88,215,255,.08), inset 0 0 70px rgba(0,0,0,.35);
}

.planet-art {
  top: 52%;
  width: min(48vw, 660px);
  height: min(48vw, 660px);
  opacity: .98;
  filter: drop-shadow(0 0 50px rgba(88,215,255,.30));
}

.planet-shadow {
  top: 52%;
  width: min(49vw, 680px);
  height: min(49vw, 680px);
}

.building {
  width: 175px;
  min-width: 175px;
  height: 136px;
  min-height: 136px;
  border-radius: 14px;
  border-color: rgba(88,215,255,.38);
  background: rgba(5, 18, 34, .85);
  box-shadow: 0 8px 24px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.04);
}

.building span {
  margin-top: 74px;
  font-size: 13px;
}

.building em {
  color: #c9dced;
}

.building.selected {
  border-color: rgba(111,255,176,.88);
  box-shadow: 0 0 34px rgba(111,255,176,.35), 0 12px 26px rgba(0,0,0,.35);
}

.command { left: calc(50% - 88px); top: calc(50% - 230px); }
.defense { left: calc(50% - 430px); top: calc(50% - 230px); }
.lab { left: calc(50% + 245px); top: calc(50% - 215px); }
.shipyard { left: calc(50% - 520px); top: calc(50% - 26px); }
.mine { left: calc(50% - 380px); top: calc(50% + 142px); }
.crystal { left: calc(50% + 305px); top: calc(50% + 34px); }
.energy { left: calc(50% - 104px); top: calc(50% + 285px); }
.storage { left: calc(50% + 245px); top: calc(50% + 285px); }

.right-panel {
  padding: 10px;
}

.panel-head.sticky-head {
  top: -10px;
  padding: 6px 0 10px;
  background: linear-gradient(180deg, rgba(8,24,43,.98), rgba(8,24,43,.90));
}

.building-management-card {
  border-radius: 16px;
  border-color: rgba(48,156,220,.32);
  background: #03101e;
}

.building-hero {
  min-height: 255px;
  grid-template-columns: 1fr 150px;
  padding: 18px;
  border-radius: 14px 14px 0 0;
  background-position: center;
}

.building-hero::after {
  inset: 10px;
  border-radius: 12px;
  border-color: rgba(48,156,220,.28);
}

.building-hero-title h3 {
  font-size: 27px;
  letter-spacing: .07em;
}

.building-hero-title p {
  font-size: 14px;
  color: #bfd0e0;
}

.building-hero-stats > div,
.management-progress {
  background: rgba(2, 12, 23, .76);
  border-color: rgba(48,156,220,.30);
  border-radius: 12px;
}

.building-hero-stats strong {
  color: #ffd36f;
  font-size: 24px;
}

.management-upgrade-btn {
  background: linear-gradient(180deg, #65d96b, #248b3c);
  border-color: rgba(111,255,176,.55);
  box-shadow: 0 0 18px rgba(111,255,176,.28), inset 0 0 12px rgba(255,255,255,.10);
}

.building-tabs button {
  min-width: 150px;
  padding: 13px 20px;
  font-size: 18px;
}

.building-tabs button.active {
  box-shadow: inset 0 -2px 0 #6fffb0;
}

.management-row {
  grid-template-columns: minmax(180px, 1.15fr) .55fr .55fr minmax(150px, .9fr);
  min-height: 66px;
  padding: 13px 16px;
  background:
    linear-gradient(90deg, rgba(7, 25, 43, .88), rgba(3, 14, 27, .86));
}

.management-row.head {
  min-height: auto;
  color: #8db4ce;
  background: rgba(3, 14, 27, .95);
}

.management-row strong {
  font-size: 14px;
}

.management-row em {
  color: #9fb6cf;
}

.management-row > span {
  color: #d4e6f6;
}

.usage-bar {
  height: 20px;
  border-color: rgba(88,215,255,.22);
  background: rgba(0, 6, 13, .55);
}

.usage-bar i {
  background: linear-gradient(90deg, #0ec4a0, #7ddcff);
}

.usage-bar.energy i {
  background: linear-gradient(90deg, #6bd3ff, #57c7a9);
}

.usage-bar b {
  top: 2px;
  font-size: 12px;
  font-weight: 800;
}

.upgrade-panel {
  padding: 14px;
  gap: 12px;
}

.upgrade-panel > div {
  border-radius: 12px;
  border-color: rgba(48,156,220,.24);
}

@media (max-width: 1500px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 150px minmax(470px, 1fr) minmax(520px, 640px);
  }

  .building {
    width: 150px;
    min-width: 150px;
    height: 120px;
    min-height: 120px;
  }

  .building span {
    margin-top: 63px;
  }

  .command { left: calc(50% - 75px); top: calc(50% - 214px); }
  .defense { left: calc(50% - 360px); top: calc(50% - 210px); }
  .lab { left: calc(50% + 205px); top: calc(50% - 202px); }
  .shipyard { left: calc(50% - 410px); top: calc(50% - 20px); }
  .mine { left: calc(50% - 315px); top: calc(50% + 132px); }
  .crystal { left: calc(50% + 235px); top: calc(50% + 25px); }
  .energy { left: calc(50% - 75px); top: calc(50% + 258px); }
  .storage { left: calc(50% + 205px); top: calc(50% + 258px); }
}

@media (max-width: 1240px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 1fr;
  }

  .building {
    width: 140px;
    min-width: 140px;
    height: 112px;
    min-height: 112px;
  }

  .building span {
    margin-top: 58px;
  }
}


/* v1.6: real visible planet fix */
.planet-scene {
  position: relative;
  min-height: calc(100vh - 142px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .10), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(111, 255, 176, .045), transparent 24%),
    linear-gradient(180deg, rgba(5, 17, 32, .62), rgba(1, 6, 15, .98));
}

.planet-art {
  left: 50%;
  top: 52%;
  width: min(56vw, 820px);
  height: min(56vw, 820px);
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  opacity: 1;
  z-index: 1;
  filter:
    drop-shadow(0 0 58px rgba(88, 215, 255, .42))
    drop-shadow(0 0 120px rgba(88, 215, 255, .18));
}

.planet-shadow {
  display: none;
}

.deep-glow {
  z-index: 0;
  opacity: .58;
}

.orbit,
.route-line {
  z-index: 2;
}

.building {
  z-index: 5;
}

.version-watermark {
  z-index: 8;
}

/* keep building cards floating around the real planet instead of covering it too much */
.command { left: calc(50% - 88px); top: calc(50% - 250px); }
.defense { left: calc(50% - 430px); top: calc(50% - 232px); }
.lab { left: calc(50% + 250px); top: calc(50% - 225px); }
.shipyard { left: calc(50% - 520px); top: calc(50% - 18px); }
.mine { left: calc(50% - 385px); top: calc(50% + 160px); }
.crystal { left: calc(50% + 308px); top: calc(50% + 42px); }
.energy { left: calc(50% - 104px); top: calc(50% + 300px); }
.storage { left: calc(50% + 248px); top: calc(50% + 300px); }

@media (max-width: 1500px) {
  .planet-art {
    width: min(62vw, 720px);
    height: min(62vw, 720px);
  }

  .command { left: calc(50% - 75px); top: calc(50% - 230px); }
  .defense { left: calc(50% - 360px); top: calc(50% - 214px); }
  .lab { left: calc(50% + 205px); top: calc(50% - 205px); }
  .shipyard { left: calc(50% - 410px); top: calc(50% - 8px); }
  .mine { left: calc(50% - 315px); top: calc(50% + 145px); }
  .crystal { left: calc(50% + 238px); top: calc(50% + 38px); }
  .energy { left: calc(50% - 75px); top: calc(50% + 270px); }
  .storage { left: calc(50% + 205px); top: calc(50% + 270px); }
}

@media (max-width: 1240px) {
  .planet-art {
    width: 620px;
    height: 620px;
  }
}


/* v1.7: user supplied planet image */
.planet-art {
  left: 50%;
  top: 52%;
  width: min(62vw, 900px);
  height: min(62vw, 900px);
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  opacity: 1;
  z-index: 1;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 62px rgba(88, 215, 255, .50))
    drop-shadow(0 0 140px rgba(88, 215, 255, .20));
}

.planet-scene {
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 220, 145, .16), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .10), transparent 34%),
    linear-gradient(180deg, rgba(5, 17, 32, .70), rgba(1, 6, 15, .98));
}

.planet-shadow {
  display: none !important;
}

.deep-glow {
  opacity: .38;
}

.orbit {
  opacity: .38;
}

.route-line {
  opacity: .22;
}

@media (max-width: 1500px) {
  .planet-art {
    width: min(66vw, 820px);
    height: min(66vw, 820px);
  }
}

@media (max-width: 1240px) {
  .planet-art {
    width: 700px;
    height: 700px;
  }
}


/* v1.8: no square planet box + defense fallback polish */
.planet-art {
  content: url("../assets/planets/homeworld-user-masked.webp");
  left: 50%;
  top: 52%;
  width: min(67vw, 980px);
  height: min(67vw, 980px);
  max-width: 104%;
  max-height: 104%;
  object-fit: contain;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 62px rgba(88, 215, 255, .52))
    drop-shadow(0 0 150px rgba(88, 215, 255, .22));
}

.planet-scene {
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 220, 145, .14), transparent 17%),
    radial-gradient(circle at 50% 51%, rgba(88, 215, 255, .13), transparent 35%),
    linear-gradient(180deg, rgba(5, 17, 32, .70), rgba(1, 6, 15, .98));
}

.deep-glow {
  opacity: .24;
}

.orbit {
  opacity: .28;
}

.route-line {
  opacity: .16;
}

.building.defense .building-art {
  object-position: center center;
}

@media (max-width: 1500px) {
  .planet-art {
    width: min(72vw, 900px);
    height: min(72vw, 900px);
  }
}

@media (max-width: 1240px) {
  .planet-art {
    width: 760px;
    height: 760px;
  }
}


/* v2.0: buildings map based on supplied reference */
#buildingsPage .page-head {
  margin-bottom: 8px;
}

.planet-scene {
  min-height: calc(100vh - 142px);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .86), rgba(2, 8, 18, .18) 22%, rgba(2, 8, 18, .10) 70%, rgba(2, 8, 18, .76)),
    linear-gradient(180deg, rgba(2, 8, 18, .12), rgba(2, 8, 18, .74)),
    url("../assets/planets/homeworld-map-background.webp") center center / cover no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(88,215,255,.12),
    inset 0 0 120px rgba(0,0,0,.44),
    0 18px 45px rgba(0,0,0,.22);
}

.planet-art,
.planet-shadow,
.deep-glow,
.orbit,
.route-line {
  display: none !important;
}

.building-links {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .86;
}

.link-line {
  fill: none;
  stroke: rgba(140, 224, 255, .78);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(88,215,255,.55));
}

.link-dot {
  fill: rgba(10, 44, 70, .86);
  stroke: rgba(178, 246, 255, .95);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(88,215,255,.78));
}

.building {
  width: 158px;
  min-width: 158px;
  height: 118px;
  min-height: 118px;
  border-radius: 12px;
  border: 1px solid rgba(88, 215, 255, .46);
  background: rgba(3, 12, 25, .78);
  box-shadow:
    0 10px 28px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 18px rgba(88,215,255,.05);
  backdrop-filter: blur(3px);
}

.building::before {
  background:
    linear-gradient(180deg, rgba(2,8,18,.04), rgba(2,8,18,.16) 35%, rgba(2,8,18,.82) 100%),
    linear-gradient(135deg, rgba(88,215,255,.13), transparent 38%);
}

.building::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(88,215,255,.9), transparent);
  z-index: 4;
  opacity: .85;
}

.building-art {
  filter: saturate(1.12) contrast(1.12);
}

.building span {
  margin-top: 62px;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 12px;
}

.building em {
  font-size: 11px;
}

.building.selected {
  border-color: rgba(111,255,176,.94);
  box-shadow:
    0 0 34px rgba(111,255,176,.38),
    0 14px 32px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(111,255,176,.16);
}

/* reference-like positions around the globe */
.command { left: 29%; top: 16%; }
.defense { left: 10%; top: 16%; }
.lab { left: 79%; top: 17%; }
.shipyard { left: 5%; top: 40%; }
.mine { left: 13%; top: 64%; }
.crystal { left: 84%; top: 41%; }
.energy { left: 45%; top: 80%; }
.storage { left: 78%; top: 78%; }

.version-watermark {
  z-index: 8;
  opacity: .5;
}

@media (max-width: 1500px) {
  .building {
    width: 140px;
    min-width: 140px;
    height: 106px;
    min-height: 106px;
  }

  .building span {
    margin-top: 54px;
    font-size: 11px;
  }

  .command { left: 30%; top: 16%; }
  .defense { left: 8%; top: 17%; }
  .lab { left: 78%; top: 18%; }
  .shipyard { left: 4%; top: 40%; }
  .mine { left: 11%; top: 64%; }
  .crystal { left: 83%; top: 42%; }
  .energy { left: 44%; top: 80%; }
  .storage { left: 77%; top: 79%; }
}

@media (max-width: 1240px) {
  .planet-scene {
    min-height: 620px;
  }

  .building-links {
    display: none;
  }
}


/* v2.1: Buildings map fit-to-screen fix */
.layout {
  min-height: 0;
  overflow: hidden;
}

.content-panel,
.right-panel {
  min-height: 0;
}

.content-panel:has(#buildingsPage.active) {
  overflow: hidden;
}

#buildingsPage.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#buildingsPage .page-head {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

#buildingsPage .page-head h1 {
  font-size: 20px;
  line-height: 1.05;
}

#buildingsPage .page-head p {
  font-size: 13px;
  margin-top: 4px;
}

#buildingsPage .scene-badge {
  padding: 6px 9px;
  font-size: 11px;
}

#buildingsPage .planet-scene {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
  border-radius: 16px;
  background-position: center center !important;
}

/* slightly smaller cards so the lower row no longer falls outside the scene */
#buildingsPage .building {
  width: 132px;
  min-width: 132px;
  height: 96px;
  min-height: 96px;
  border-radius: 11px;
}

#buildingsPage .building span {
  margin-top: 49px;
  font-size: 10.5px;
  line-height: 1.05;
}

#buildingsPage .building em {
  font-size: 10px;
}

#buildingsPage .building::after {
  left: 7px;
  right: 7px;
  top: 4px;
}

/* Repositioned in relative screen bands, not too close to the bottom edge */
#buildingsPage .command { left: 30%; top: 15%; }
#buildingsPage .defense { left: 10%; top: 15%; }
#buildingsPage .lab { left: 79%; top: 16%; }
#buildingsPage .shipyard { left: 5%; top: 38%; }
#buildingsPage .mine { left: 13%; top: 60%; }
#buildingsPage .crystal { left: 84%; top: 39%; }
#buildingsPage .energy { left: 45%; top: 76%; }
#buildingsPage .storage { left: 78%; top: 76%; }

/* Connector layer now fits the visible scene instead of forcing perceived overflow */
#buildingsPage .building-links {
  inset: 0;
  height: 100%;
  width: 100%;
}

#buildingsPage .link-line {
  stroke-width: 1.55;
  opacity: .82;
}

#buildingsPage .link-dot {
  r: 6px;
}

/* Right detail panel remains scrollable independently if its content is taller */
.layout:not(.panel-hidden) .right-panel {
  overflow: auto;
}

/* Compact variant for smaller desktop heights */
@media (max-height: 880px) {
  #buildingsPage .building {
    width: 120px;
    min-width: 120px;
    height: 88px;
    min-height: 88px;
  }

  #buildingsPage .building span {
    margin-top: 43px;
    font-size: 10px;
  }

  #buildingsPage .building em {
    font-size: 9.5px;
  }

  #buildingsPage .command { left: 31%; top: 14%; }
  #buildingsPage .defense { left: 10%; top: 14%; }
  #buildingsPage .lab { left: 79%; top: 15%; }
  #buildingsPage .shipyard { left: 5%; top: 37%; }
  #buildingsPage .mine { left: 13%; top: 58%; }
  #buildingsPage .crystal { left: 84%; top: 38%; }
  #buildingsPage .energy { left: 45%; top: 74%; }
  #buildingsPage .storage { left: 78%; top: 74%; }
}

@media (max-width: 1500px) {
  #buildingsPage .building {
    width: 118px;
    min-width: 118px;
    height: 86px;
    min-height: 86px;
  }

  #buildingsPage .building span {
    margin-top: 42px;
    font-size: 9.8px;
  }

  #buildingsPage .building em {
    font-size: 9.2px;
  }

  #buildingsPage .command { left: 31%; top: 14%; }
  #buildingsPage .defense { left: 9%; top: 15%; }
  #buildingsPage .lab { left: 78%; top: 15%; }
  #buildingsPage .shipyard { left: 4%; top: 37%; }
  #buildingsPage .mine { left: 12%; top: 59%; }
  #buildingsPage .crystal { left: 83%; top: 39%; }
  #buildingsPage .energy { left: 44%; top: 74%; }
  #buildingsPage .storage { left: 77%; top: 74%; }
}

@media (max-width: 1240px) {
  .content-panel:has(#buildingsPage.active) {
    overflow: auto;
  }

  #buildingsPage.active {
    min-height: 620px;
  }

  #buildingsPage .planet-scene {
    min-height: 560px !important;
  }

  #buildingsPage .building-links {
    display: none;
  }
}


/* v2.2: adjusted building images + new resource buildings */
#buildingsPage .building {
  width: 112px;
  min-width: 112px;
  height: 82px;
  min-height: 82px;
}

#buildingsPage .building span {
  margin-top: 39px;
  font-size: 9px;
  line-height: 1.02;
  letter-spacing: .02em;
}

#buildingsPage .building em {
  font-size: 8.5px;
}

#buildingsPage .building::after {
  left: 6px;
  right: 6px;
  top: 4px;
}

/* Existing buildings, rebalanced for more nodes */
#buildingsPage .command { left: 31%; top: 13%; }
#buildingsPage .defense { left: 9%; top: 13%; }
#buildingsPage .lab { left: 79%; top: 13%; }
#buildingsPage .shipyard { left: 4%; top: 35%; }
#buildingsPage .mine { left: 12%; top: 57%; }
#buildingsPage .crystal { left: 84%; top: 35%; }
#buildingsPage .energy { left: 42%; top: 75%; }
#buildingsPage .storage { left: 75%; top: 75%; }

/* New resource-specific buildings */
#buildingsPage .metalStorage { left: 5%; top: 75%; }
#buildingsPage .crystalStorage { left: 86%; top: 55%; }
#buildingsPage .fuelDepot { left: 20%; top: 35%; }
#buildingsPage .dataCenter { left: 64%; top: 75%; }

#buildingsPage .building.storage .building-art,
#buildingsPage .building.fuelDepot .building-art,
#buildingsPage .building.dataCenter .building-art,
#buildingsPage .building.metalStorage .building-art,
#buildingsPage .building.crystalStorage .building-art {
  object-position: center center;
}

#buildingsPage .building.storage.selected,
#buildingsPage .building.metalStorage.selected,
#buildingsPage .building.crystalStorage.selected,
#buildingsPage .building.fuelDepot.selected,
#buildingsPage .building.dataCenter.selected {
  border-color: rgba(255, 211, 111, .92);
  box-shadow:
    0 0 28px rgba(255,211,111,.32),
    0 12px 28px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,211,111,.16);
}

@media (max-height: 880px) {
  #buildingsPage .building {
    width: 104px;
    min-width: 104px;
    height: 76px;
    min-height: 76px;
  }

  #buildingsPage .building span {
    margin-top: 35px;
    font-size: 8.5px;
  }

  #buildingsPage .building em {
    font-size: 8px;
  }

  #buildingsPage .command { left: 31%; top: 12%; }
  #buildingsPage .defense { left: 9%; top: 12%; }
  #buildingsPage .lab { left: 79%; top: 12%; }
  #buildingsPage .shipyard { left: 4%; top: 34%; }
  #buildingsPage .mine { left: 12%; top: 56%; }
  #buildingsPage .crystal { left: 84%; top: 34%; }
  #buildingsPage .energy { left: 42%; top: 73%; }
  #buildingsPage .storage { left: 75%; top: 73%; }
  #buildingsPage .metalStorage { left: 5%; top: 73%; }
  #buildingsPage .crystalStorage { left: 86%; top: 53%; }
  #buildingsPage .fuelDepot { left: 20%; top: 34%; }
  #buildingsPage .dataCenter { left: 64%; top: 73%; }
}

@media (max-width: 1500px) {
  #buildingsPage .building {
    width: 96px;
    min-width: 96px;
    height: 70px;
    min-height: 70px;
  }

  #buildingsPage .building span {
    margin-top: 31px;
    font-size: 7.8px;
  }

  #buildingsPage .building em {
    font-size: 7.6px;
  }
}


/* v2.3: buildings as vertical left list; right details panel stays visible */
.layout:not(.panel-hidden) {
  grid-template-columns: 170px minmax(620px, 1fr) minmax(520px, 680px);
}

#buildingsPage.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#buildingsPage .planet-scene {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .93) 0 212px, rgba(2, 8, 18, .30) 320px, rgba(2, 8, 18, .12) 68%, rgba(2, 8, 18, .55)),
    linear-gradient(180deg, rgba(2, 8, 18, .10), rgba(2, 8, 18, .75)),
    url("../assets/planets/homeworld-map-background.webp") center center / cover no-repeat !important;
}

/* Hide connector lines in vertical-list mode; list no longer uses scattered map nodes */
#buildingsPage .building-links {
  display: none !important;
}

/* Left column cards */
#buildingsPage .building {
  left: 18px !important;
  right: auto !important;
  width: 178px;
  min-width: 178px;
  height: 52px;
  min-height: 52px;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 66px 1fr;
  grid-template-rows: 1fr 18px;
  column-gap: 8px;
  align-items: center;
  padding: 5px 7px;
  overflow: hidden;
}

#buildingsPage .building::before {
  background:
    linear-gradient(90deg, rgba(2,8,18,.12), rgba(2,8,18,.82)),
    linear-gradient(135deg, rgba(88,215,255,.16), transparent 48%);
}

#buildingsPage .building::after {
  left: 7px;
  right: 7px;
  top: 3px;
  height: 1px;
}

#buildingsPage .building-art {
  position: relative;
  grid-row: 1 / 3;
  grid-column: 1;
  inset: auto;
  width: 64px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  z-index: 3;
}

#buildingsPage .building span {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  text-align: left;
  font-size: 10.5px;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}

#buildingsPage .building em {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  text-align: left;
  font-size: 9.5px;
  line-height: 1;
}

/* Exact requested order:
   metal mine, crystal mine, energy core, command center, research lab, ship yard,
   data center, metal storage, crystal storage, credits vault, fuel depot, defense building */
#buildingsPage .mine { top: 14px !important; }
#buildingsPage .crystal { top: 72px !important; }
#buildingsPage .energy { top: 130px !important; }
#buildingsPage .command { top: 188px !important; }
#buildingsPage .lab { top: 246px !important; }
#buildingsPage .shipyard { top: 304px !important; }
#buildingsPage .dataCenter { top: 362px !important; }
#buildingsPage .metalStorage { top: 420px !important; }
#buildingsPage .crystalStorage { top: 478px !important; }
#buildingsPage .storage { top: 536px !important; }
#buildingsPage .fuelDepot { top: 594px !important; }
#buildingsPage .defense { top: 652px !important; }

/* Keep the planet visually dominant on the right side of the list */
#buildingsPage .planet-scene::after {
  content: "";
  position: absolute;
  left: 212px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(88,215,255,.34), transparent);
  z-index: 6;
  pointer-events: none;
}

#buildingsPage .planet-scene::before {
  content: "Gebouwen";
  position: absolute;
  left: 18px;
  top: 4px;
  transform: translateY(-100%);
  color: transparent;
  pointer-events: none;
}

/* Details panel placeholder without building information */
.no-building-selected {
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(130,207,255,.22);
  background:
    radial-gradient(circle at 50% 35%, rgba(88,215,255,.08), transparent 34%),
    rgba(8,23,42,.55);
}

.empty-detail-panel {
  display: grid;
  gap: 8px;
  text-align: center;
  max-width: 340px;
}

.empty-detail-panel strong {
  color: #ecf7ff;
  font-size: 18px;
}

.empty-detail-panel span {
  color: #9fb6cf;
  font-size: 13px;
  line-height: 1.35;
}

/* Fit mode for smaller heights */
@media (max-height: 880px) {
  #buildingsPage .building {
    height: 46px;
    min-height: 46px;
    width: 168px;
    min-width: 168px;
    grid-template-columns: 58px 1fr;
  }

  #buildingsPage .building-art {
    width: 56px;
    height: 36px;
  }

  #buildingsPage .building span {
    font-size: 9.7px;
  }

  #buildingsPage .building em {
    font-size: 8.8px;
  }

  #buildingsPage .mine { top: 10px !important; }
  #buildingsPage .crystal { top: 60px !important; }
  #buildingsPage .energy { top: 110px !important; }
  #buildingsPage .command { top: 160px !important; }
  #buildingsPage .lab { top: 210px !important; }
  #buildingsPage .shipyard { top: 260px !important; }
  #buildingsPage .dataCenter { top: 310px !important; }
  #buildingsPage .metalStorage { top: 360px !important; }
  #buildingsPage .crystalStorage { top: 410px !important; }
  #buildingsPage .storage { top: 460px !important; }
  #buildingsPage .fuelDepot { top: 510px !important; }
  #buildingsPage .defense { top: 560px !important; }

  #buildingsPage .planet-scene::after {
    left: 198px;
  }
}

@media (max-width: 1500px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 150px minmax(560px, 1fr) minmax(500px, 620px);
  }

  #buildingsPage .building {
    width: 154px;
    min-width: 154px;
    height: 44px;
    min-height: 44px;
    grid-template-columns: 54px 1fr;
  }

  #buildingsPage .building-art {
    width: 52px;
    height: 34px;
  }

  #buildingsPage .building span {
    font-size: 8.9px;
  }

  #buildingsPage .building em {
    font-size: 8px;
  }

  #buildingsPage .planet-scene::after {
    left: 188px;
  }
}

@media (max-width: 1240px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 1fr;
  }

  #buildingsPage .planet-scene {
    min-height: 720px !important;
    overflow: auto;
  }
}


/* v2.4: clean buildings header + wider left building list */
#buildingsPage.active {
  gap: 0;
}

#buildingsPage .page-head {
  display: none !important;
}

#buildingsPage .planet-scene {
  min-height: 0 !important;
  height: 100% !important;
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .94) 0 292px, rgba(2, 8, 18, .36) 392px, rgba(2, 8, 18, .12) 68%, rgba(2, 8, 18, .55)),
    linear-gradient(180deg, rgba(2, 8, 18, .10), rgba(2, 8, 18, .75)),
    url("../assets/planets/homeworld-map-background.webp") center center / cover no-repeat !important;
}

/* Wider building list, so names stay on one line */
#buildingsPage .building {
  left: 18px !important;
  width: 248px !important;
  min-width: 248px !important;
  height: 52px !important;
  min-height: 52px !important;
  grid-template-columns: 70px 1fr !important;
  column-gap: 10px !important;
}

#buildingsPage .building-art {
  width: 68px !important;
  height: 42px !important;
}

#buildingsPage .building span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  font-size: 10.8px !important;
  letter-spacing: .02em !important;
}

#buildingsPage .building em {
  font-size: 9.6px !important;
}

/* Divider moved to match wider list */
#buildingsPage .planet-scene::after {
  left: 284px !important;
}

/* Give the planet a little more visible center after widening the list */
#buildingsPage .mine { top: 14px !important; }
#buildingsPage .crystal { top: 72px !important; }
#buildingsPage .energy { top: 130px !important; }
#buildingsPage .command { top: 188px !important; }
#buildingsPage .lab { top: 246px !important; }
#buildingsPage .shipyard { top: 304px !important; }
#buildingsPage .dataCenter { top: 362px !important; }
#buildingsPage .metalStorage { top: 420px !important; }
#buildingsPage .crystalStorage { top: 478px !important; }
#buildingsPage .storage { top: 536px !important; }
#buildingsPage .fuelDepot { top: 594px !important; }
#buildingsPage .defense { top: 652px !important; }

@media (max-height: 880px) {
  #buildingsPage .planet-scene {
    background:
      linear-gradient(90deg, rgba(2, 8, 18, .94) 0 270px, rgba(2, 8, 18, .36) 370px, rgba(2, 8, 18, .12) 68%, rgba(2, 8, 18, .55)),
      linear-gradient(180deg, rgba(2, 8, 18, .10), rgba(2, 8, 18, .75)),
      url("../assets/planets/homeworld-map-background.webp") center center / cover no-repeat !important;
  }

  #buildingsPage .building {
    width: 232px !important;
    min-width: 232px !important;
    height: 46px !important;
    min-height: 46px !important;
    grid-template-columns: 62px 1fr !important;
  }

  #buildingsPage .building-art {
    width: 60px !important;
    height: 36px !important;
  }

  #buildingsPage .building span {
    font-size: 10px !important;
  }

  #buildingsPage .building em {
    font-size: 8.8px !important;
  }

  #buildingsPage .planet-scene::after {
    left: 266px !important;
  }
}

@media (max-width: 1500px) {
  #buildingsPage .planet-scene {
    background:
      linear-gradient(90deg, rgba(2, 8, 18, .94) 0 250px, rgba(2, 8, 18, .36) 345px, rgba(2, 8, 18, .12) 68%, rgba(2, 8, 18, .55)),
      linear-gradient(180deg, rgba(2, 8, 18, .10), rgba(2, 8, 18, .75)),
      url("../assets/planets/homeworld-map-background.webp") center center / cover no-repeat !important;
  }

  #buildingsPage .building {
    width: 212px !important;
    min-width: 212px !important;
    height: 44px !important;
    min-height: 44px !important;
    grid-template-columns: 58px 1fr !important;
  }

  #buildingsPage .building-art {
    width: 56px !important;
    height: 34px !important;
  }

  #buildingsPage .building span {
    font-size: 9.4px !important;
  }

  #buildingsPage .building em {
    font-size: 8.4px !important;
  }

  #buildingsPage .planet-scene::after {
    left: 246px !important;
  }
}

@media (max-width: 1240px) {
  #buildingsPage .page-head {
    display: none !important;
  }
}


/* v2.5: left building list gets own scrollbar; thumbnails tested at 100x100 */
#buildingsPage .planet-scene {
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .94) 0 340px, rgba(2, 8, 18, .40) 440px, rgba(2, 8, 18, .12) 68%, rgba(2, 8, 18, .55)),
    linear-gradient(180deg, rgba(2, 8, 18, .10), rgba(2, 8, 18, .75)),
    url("../assets/planets/homeworld-map-background.webp") center center / cover no-repeat !important;
}

#buildingsPage .building-list-panel {
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 318px;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
  padding: 10px 8px 10px 10px;
  border: 1px solid rgba(88, 215, 255, .26);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(4, 17, 32, .88), rgba(2, 8, 18, .72));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 16px 34px rgba(0,0,0,.22);
  scrollbar-width: thin;
  scrollbar-color: rgba(88,215,255,.68) rgba(4,17,32,.58);
}

#buildingsPage .building-list-panel::-webkit-scrollbar {
  width: 8px;
}

#buildingsPage .building-list-panel::-webkit-scrollbar-track {
  background: rgba(4,17,32,.58);
  border-radius: 999px;
}

#buildingsPage .building-list-panel::-webkit-scrollbar-thumb {
  background: rgba(88,215,255,.68);
  border-radius: 999px;
}

/* Hard reset previous absolute map placement; buttons become normal rows inside the scroll panel. */
#buildingsPage .building-list-panel .building {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 286px !important;
  min-width: 286px !important;
  height: 112px !important;
  min-height: 112px !important;
  grid-template-columns: 104px 1fr !important;
  grid-template-rows: 1fr 22px !important;
  column-gap: 11px !important;
  padding: 6px 9px !important;
  border-radius: 13px !important;
}

#buildingsPage .building-list-panel .building-art {
  position: relative !important;
  inset: auto !important;
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  z-index: 3 !important;
}

#buildingsPage .building-list-panel .building span {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  letter-spacing: .02em !important;
}

#buildingsPage .building-list-panel .building em {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  text-align: left !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}

/* Divider moved to the right edge of the wider scroll panel. */
#buildingsPage .planet-scene::after {
  left: 348px !important;
}

/* Keep planet visible by shifting visual focus slightly to the right. */
#buildingsPage .planet-scene {
  background-position: 58% center !important;
}

@media (max-height: 880px) {
  #buildingsPage .building-list-panel {
    width: 300px;
    padding: 8px 7px 8px 9px;
    gap: 7px;
  }

  #buildingsPage .building-list-panel .building {
    width: 268px !important;
    min-width: 268px !important;
    height: 104px !important;
    min-height: 104px !important;
    grid-template-columns: 100px 1fr !important;
  }

  #buildingsPage .building-list-panel .building-art {
    width: 96px !important;
    height: 96px !important;
  }

  #buildingsPage .building-list-panel .building span {
    font-size: 11.4px !important;
  }

  #buildingsPage .planet-scene::after {
    left: 326px !important;
  }
}

@media (max-width: 1500px) {
  #buildingsPage .building-list-panel {
    width: 282px;
  }

  #buildingsPage .building-list-panel .building {
    width: 250px !important;
    min-width: 250px !important;
    height: 100px !important;
    min-height: 100px !important;
    grid-template-columns: 94px 1fr !important;
  }

  #buildingsPage .building-list-panel .building-art {
    width: 90px !important;
    height: 90px !important;
  }

  #buildingsPage .building-list-panel .building span {
    font-size: 10.5px !important;
  }

  #buildingsPage .building-list-panel .building em {
    font-size: 9.8px !important;
  }

  #buildingsPage .planet-scene::after {
    left: 306px !important;
  }
}

@media (max-width: 1240px) {
  #buildingsPage .building-list-panel {
    position: absolute;
    width: 282px;
  }
}


/* v2.6: right detail panel meter alignment + active upgrade fit */
.layout:not(.panel-hidden) .right-panel {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 16px;
  scrollbar-gutter: stable;
}

/* Hero stats are kept away from the scrollbar/right border. */
.building-hero {
  grid-template-columns: minmax(0, 1fr) 178px !important;
  gap: 12px !important;
  padding-right: 24px !important;
}

.building-hero-stats {
  width: 172px;
  max-width: 172px;
  justify-self: end;
  margin-right: 6px;
}

.building-hero-stats > div,
.management-progress {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Active upgrade block was too wide/high in the hero. */
.management-progress {
  padding: 8px 10px !important;
  display: grid;
  gap: 5px;
}

.management-progress .card-head {
  display: grid;
  gap: 4px;
  align-items: start;
}

.management-progress .card-head strong {
  font-size: 11px;
  line-height: 1.05;
  letter-spacing: .04em;
  white-space: normal;
}

.management-progress .status-pill {
  justify-self: start;
  max-width: 100%;
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1;
}

.management-progress span {
  font-size: 10.5px !important;
}

.management-progress .progress {
  height: 6px;
  margin-top: 0;
}

/* In active state: make hero stat labels compact. */
.building-hero-stats strong {
  font-size: 22px;
}

.building-hero-stats span {
  font-size: 10.5px;
}

/* Table columns: fixed visual alignment for Huidig / Volgende / Gebruik. */
.management-table {
  width: 100%;
}

.management-row {
  grid-template-columns: minmax(190px, 1fr) 112px 112px 186px !important;
  column-gap: 16px !important;
  align-items: center !important;
}

.management-row.head {
  grid-template-columns: minmax(190px, 1fr) 112px 112px 186px !important;
}

.management-row > span:nth-child(2),
.management-row > span:nth-child(3) {
  justify-self: start;
  white-space: nowrap;
}

.management-row .usage-bar {
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
}

.management-row.head span:nth-child(4) {
  justify-self: start;
  padding-left: 10px;
}

.usage-bar {
  height: 20px !important;
  display: block;
  overflow: hidden;
}

.usage-bar i {
  height: 100%;
  display: block;
}

.usage-bar b {
  right: 7px;
  top: 2px;
  min-width: 34px;
  text-align: right;
}

/* Prevent the Energy/active-row bar from drifting down/right. */
.management-row .usage-bar.energy {
  justify-self: end !important;
}

/* Upgrade/action card must not overlap hero boundary. */
.management-upgrade-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 10px !important;
  font-size: 12px;
  line-height: 1.05;
}

/* Slightly tighter hero at narrow right-panel widths. */
@media (max-width: 1500px) {
  .building-hero {
    grid-template-columns: minmax(0, 1fr) 160px !important;
    padding-right: 20px !important;
  }

  .building-hero-stats {
    width: 154px;
    max-width: 154px;
    margin-right: 4px;
  }

  .building-hero-title h3 {
    font-size: 24px;
  }

  .management-row,
  .management-row.head {
    grid-template-columns: minmax(170px, 1fr) 96px 96px 160px !important;
    column-gap: 12px !important;
  }

  .management-row .usage-bar {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

@media (max-width: 1240px) {
  .building-hero {
    grid-template-columns: 1fr !important;
    padding-right: 18px !important;
  }

  .building-hero-stats {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    margin-right: 0;
  }

  .management-row,
  .management-row.head {
    grid-template-columns: 1fr !important;
  }

  .management-row .usage-bar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }
}


/* v2.7: hard right-panel alignment fix */
#rightPanel,
.right-panel {
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  padding-right: 18px !important;
}

#buildPanel {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Do not let any selected-card content exceed the right panel width. */
#selectedBuilding,
#selectedBuilding * {
  box-sizing: border-box !important;
}

#selectedBuilding {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Hero: reserve a fixed safety zone on the right so cards never touch scrollbar/rand. */
#selectedBuilding .building-hero {
  grid-template-columns: minmax(0, 1fr) 152px !important;
  padding: 16px 54px 16px 18px !important;
  gap: 12px !important;
  min-height: 236px !important;
  overflow: hidden !important;
}

#selectedBuilding .building-hero-title {
  min-width: 0 !important;
  max-width: calc(100% - 8px) !important;
}

#selectedBuilding .building-hero-title h3 {
  font-size: clamp(23px, 2.1vw, 30px) !important;
  line-height: 1.05 !important;
}

#selectedBuilding .building-hero-stats {
  width: 150px !important;
  max-width: 150px !important;
  justify-self: end !important;
  margin-right: 0 !important;
  transform: translateX(-16px) !important;
}

#selectedBuilding .building-hero-stats > div,
#selectedBuilding .management-progress {
  width: 150px !important;
  max-width: 150px !important;
  min-width: 0 !important;
  padding: 8px 9px !important;
}

#selectedBuilding .building-hero-stats strong {
  font-size: 22px !important;
  line-height: 1 !important;
}

#selectedBuilding .building-hero-stats span {
  font-size: 10px !important;
}

/* Active upgrade block: compact and never pushed against the right edge. */
#selectedBuilding .management-progress {
  gap: 4px !important;
}

#selectedBuilding .management-progress .card-head {
  display: grid !important;
  gap: 3px !important;
}

#selectedBuilding .management-progress .card-head strong {
  font-size: 11px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}

#selectedBuilding .management-progress .status-pill {
  width: fit-content !important;
  max-width: 132px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
}

#selectedBuilding .management-progress span {
  font-size: 10px !important;
}

#selectedBuilding .management-progress .progress {
  height: 6px !important;
  width: 100% !important;
}

/* Table: use flexible columns that cannot overflow. */
#selectedBuilding .management-table {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#selectedBuilding .management-row,
#selectedBuilding .management-row.head {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(78px, 0.45fr)
    minmax(86px, 0.50fr)
    minmax(116px, 0.58fr) !important;
  gap: 10px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  overflow: hidden !important;
}

#selectedBuilding .management-row > * {
  min-width: 0 !important;
}

#selectedBuilding .management-row > span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Gebruik column: the meter is always inside the column. */
#selectedBuilding .management-row .usage-bar {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 132px !important;
  justify-self: stretch !important;
  align-self: center !important;
  margin: 0 !important;
  height: 20px !important;
  overflow: hidden !important;
}

#selectedBuilding .management-row.head span:nth-child(4) {
  padding-left: 0 !important;
  justify-self: stretch !important;
}

#selectedBuilding .usage-bar i {
  height: 100% !important;
  max-width: 100% !important;
}

#selectedBuilding .usage-bar b {
  right: 5px !important;
  top: 2px !important;
  min-width: 28px !important;
  max-width: 38px !important;
  overflow: hidden !important;
  text-align: right !important;
  font-size: 11px !important;
}

/* Remove old fixed-width behavior from previous patches. */
#selectedBuilding .management-row .usage-bar.energy {
  width: 100% !important;
  max-width: 132px !important;
  justify-self: stretch !important;
}

/* Bottom cards also stay within panel width. */
#selectedBuilding .upgrade-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#selectedBuilding .upgrade-panel > div {
  min-width: 0 !important;
}

/* Narrow right panel fallback. */
@media (max-width: 1500px) {
  #selectedBuilding .building-hero {
    grid-template-columns: minmax(0, 1fr) 136px !important;
    padding-right: 46px !important;
  }

  #selectedBuilding .building-hero-stats {
    width: 134px !important;
    max-width: 134px !important;
    transform: translateX(-12px) !important;
  }

  #selectedBuilding .building-hero-stats > div,
  #selectedBuilding .management-progress {
    width: 134px !important;
    max-width: 134px !important;
  }

  #selectedBuilding .management-row,
  #selectedBuilding .management-row.head {
    grid-template-columns:
      minmax(135px, 1fr)
      minmax(68px, 0.42fr)
      minmax(76px, 0.46fr)
      minmax(104px, 0.56fr) !important;
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #selectedBuilding .management-row .usage-bar {
    max-width: 112px !important;
  }

  #selectedBuilding .management-row .usage-bar.energy {
    max-width: 112px !important;
  }
}

/* Mobile/small-width fallback: one column, no clipping. */
@media (max-width: 1240px) {
  #selectedBuilding .building-hero {
    grid-template-columns: 1fr !important;
    padding-right: 18px !important;
  }

  #selectedBuilding .building-hero-stats {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    justify-self: stretch !important;
  }

  #selectedBuilding .building-hero-stats > div,
  #selectedBuilding .management-progress {
    width: 100% !important;
    max-width: 100% !important;
  }

  #selectedBuilding .management-row,
  #selectedBuilding .management-row.head {
    grid-template-columns: 1fr !important;
  }

  #selectedBuilding .management-row .usage-bar,
  #selectedBuilding .management-row .usage-bar.energy {
    width: 100% !important;
    max-width: 100% !important;
  }

  #selectedBuilding .upgrade-panel {
    grid-template-columns: 1fr !important;
  }
}


/* v2.8: right panel hero closer to right + exact Gebruik bar alignment */

/* Hero cards were over-corrected in v2.7. Bring them closer to the right edge,
   but keep a small safety margin for the panel border/scrollbar. */
#selectedBuilding .building-hero {
  grid-template-columns: minmax(0, 1fr) 170px !important;
  padding: 16px 22px 16px 18px !important;
  gap: 12px !important;
}

#selectedBuilding .building-hero-stats {
  width: 168px !important;
  max-width: 168px !important;
  justify-self: end !important;
  margin-right: 0 !important;
  transform: none !important;
}

#selectedBuilding .building-hero-stats > div,
#selectedBuilding .management-progress {
  width: 168px !important;
  max-width: 168px !important;
}

#selectedBuilding .building-hero-stats strong {
  font-size: 23px !important;
}

#selectedBuilding .management-progress .status-pill {
  max-width: 148px !important;
}

/* Fixed 4-column table geometry.
   The Gebruik column gets a fixed track width, with every bar pinned to the same x-position. */
#selectedBuilding .management-row,
#selectedBuilding .management-row.head {
  grid-template-columns:
    minmax(170px, 1fr)
    96px
    104px
    150px !important;
  column-gap: 14px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  align-items: center !important;
}

#selectedBuilding .management-row.head span:nth-child(4) {
  justify-self: stretch !important;
  padding-left: 0 !important;
  text-align: left !important;
}

#selectedBuilding .management-row > span:nth-child(2),
#selectedBuilding .management-row > span:nth-child(3) {
  justify-self: start !important;
  text-align: left !important;
}

/* Make the entire bar track visible, not just the filled part. */
#selectedBuilding .management-row .usage-bar,
#selectedBuilding .management-row .usage-bar.energy {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  height: 20px !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 0 !important;
  border: 1px solid rgba(88, 215, 255, .34) !important;
  background: rgba(3, 14, 27, .92) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,.42) !important;
  overflow: hidden !important;
}

#selectedBuilding .usage-bar i,
#selectedBuilding .usage-bar.energy i {
  display: block !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  background: linear-gradient(90deg, #27c7b2, #73d9ee) !important;
}

#selectedBuilding .usage-bar b {
  right: 6px !important;
  top: 2px !important;
  min-width: 34px !important;
  text-align: right !important;
  color: #eef8ff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95) !important;
}

/* For very low values, keep the filled segment visible but still start from the same left edge. */
#selectedBuilding .usage-bar i[style*="width:0"],
#selectedBuilding .usage-bar.energy i[style*="width:0"] {
  min-width: 3px !important;
}

/* The bottom cards should line up with the table width. */
#selectedBuilding .upgrade-panel {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Medium right-panel width fallback. */
@media (max-width: 1500px) {
  #selectedBuilding .building-hero {
    grid-template-columns: minmax(0, 1fr) 152px !important;
    padding-right: 18px !important;
  }

  #selectedBuilding .building-hero-stats {
    width: 150px !important;
    max-width: 150px !important;
  }

  #selectedBuilding .building-hero-stats > div,
  #selectedBuilding .management-progress {
    width: 150px !important;
    max-width: 150px !important;
  }

  #selectedBuilding .management-row,
  #selectedBuilding .management-row.head {
    grid-template-columns:
      minmax(150px, 1fr)
      82px
      90px
      128px !important;
    column-gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #selectedBuilding .management-row .usage-bar,
  #selectedBuilding .management-row .usage-bar.energy {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
  }
}

/* Narrow stacked fallback. */
@media (max-width: 1240px) {
  #selectedBuilding .building-hero {
    grid-template-columns: 1fr !important;
    padding: 16px 18px !important;
  }

  #selectedBuilding .building-hero-stats,
  #selectedBuilding .building-hero-stats > div,
  #selectedBuilding .management-progress {
    width: 100% !important;
    max-width: 100% !important;
  }

  #selectedBuilding .management-row,
  #selectedBuilding .management-row.head {
    grid-template-columns: 1fr !important;
  }

  #selectedBuilding .management-row .usage-bar,
  #selectedBuilding .management-row .usage-bar.energy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* v2.9: hard usage-cell alignment fix
   Each row now has a fixed Gebruik cell; all bars share the same left and right edge. */

#selectedBuilding .management-row,
#selectedBuilding .management-row.head {
  grid-template-columns:
    minmax(170px, 1fr)
    96px
    104px
    166px !important;
  column-gap: 14px !important;
  align-items: center !important;
}

#selectedBuilding .management-row > * {
  min-width: 0 !important;
}

/* Header label aligns with the bar cell left edge. */
#selectedBuilding .management-row.head span:nth-child(4) {
  width: 166px !important;
  justify-self: start !important;
  text-align: left !important;
  padding-left: 0 !important;
}

/* New fixed cell around every progressbar. */
#selectedBuilding .usage-cell {
  width: 166px !important;
  min-width: 166px !important;
  max-width: 166px !important;
  justify-self: start !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

/* The actual visible track is fixed and identical for every row. */
#selectedBuilding .usage-cell .usage-bar,
#selectedBuilding .usage-cell .usage-bar.energy {
  position: relative !important;
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  height: 20px !important;
  margin: 0 !important;
  justify-self: start !important;
  align-self: center !important;
  border: 1px solid rgba(88, 215, 255, .34) !important;
  background: rgba(3, 14, 27, .92) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,.44) !important;
  overflow: hidden !important;
}

/* Filled section always starts from the left side of the same track. */
#selectedBuilding .usage-cell .usage-bar i,
#selectedBuilding .usage-cell .usage-bar.energy i {
  display: block !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  max-width: 100% !important;
  background: linear-gradient(90deg, #27c7b2, #73d9ee) !important;
}

/* Percent remains inside the fixed track. */
#selectedBuilding .usage-cell .usage-bar b,
#selectedBuilding .usage-cell .usage-bar.energy b {
  position: absolute !important;
  right: 6px !important;
  top: 2px !important;
  min-width: 34px !important;
  max-width: 38px !important;
  overflow: hidden !important;
  color: #eef8ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: right !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95) !important;
  pointer-events: none !important;
}

/* Kill older direct .usage-bar positioning from previous patches. */
#selectedBuilding .management-row > .usage-bar,
#selectedBuilding .management-row > .usage-bar.energy {
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  justify-self: start !important;
  margin: 0 !important;
}

/* Medium right-panel width fallback. */
@media (max-width: 1500px) {
  #selectedBuilding .management-row,
  #selectedBuilding .management-row.head {
    grid-template-columns:
      minmax(150px, 1fr)
      82px
      90px
      138px !important;
    column-gap: 10px !important;
  }

  #selectedBuilding .management-row.head span:nth-child(4),
  #selectedBuilding .usage-cell {
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
  }

  #selectedBuilding .usage-cell .usage-bar,
  #selectedBuilding .usage-cell .usage-bar.energy {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
  }
}

/* Small stacked fallback. */
@media (max-width: 1240px) {
  #selectedBuilding .management-row,
  #selectedBuilding .management-row.head {
    grid-template-columns: 1fr !important;
  }

  #selectedBuilding .management-row.head span:nth-child(4),
  #selectedBuilding .usage-cell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #selectedBuilding .usage-cell .usage-bar,
  #selectedBuilding .usage-cell .usage-bar.energy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* v3.0: final meter-cell implementation for exact Gebruik alignment */

/* Fixed table geometry. Fourth column is the same for every row. */
#selectedBuilding .management-row,
#selectedBuilding .management-row.head {
  display: grid !important;
  grid-template-columns:
    minmax(170px, 1fr)
    96px
    104px
    170px !important;
  column-gap: 14px !important;
  align-items: center !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  overflow: hidden !important;
}

#selectedBuilding .management-row > * {
  min-width: 0 !important;
}

/* Header aligns with the meter track. */
#selectedBuilding .management-row.head span:nth-child(4) {
  width: 170px !important;
  justify-self: start !important;
  text-align: left !important;
  padding-left: 0 !important;
}

/* New meter cell: this is the only alignment container. */
#selectedBuilding .meter-cell {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  height: 22px !important;
  justify-self: start !important;
  align-self: center !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The visible track. Every row uses this exact box. */
#selectedBuilding .meter-track {
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(88, 215, 255, .38) !important;
  background: rgba(3, 14, 27, .95) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,.48) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Fill always starts at exact same left edge. */
#selectedBuilding .meter-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  display: block !important;
  height: 100% !important;
  min-width: 3px !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  background: linear-gradient(90deg, #24c7b3, #78d8ed) !important;
  box-shadow: 0 0 12px rgba(39,199,178,.28) !important;
}

/* Label always stays inside the same track. */
#selectedBuilding .meter-label {
  position: absolute !important;
  right: 6px !important;
  top: 2px !important;
  z-index: 2 !important;
  min-width: 34px !important;
  color: #eef8ff !important;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 800 !important;
  text-align: right !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95) !important;
  pointer-events: none !important;
}

/* Old bars are disabled only when direct leftovers occur. */
#selectedBuilding .management-row > .usage-bar,
#selectedBuilding .management-row > .usage-bar.energy,
#selectedBuilding .management-row > .usage-cell {
  display: none !important;
}

/* Huidig/Volgende values remain fixed and do not push the meter. */
#selectedBuilding .management-row > span:nth-child(2),
#selectedBuilding .management-row > span:nth-child(3) {
  justify-self: start !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Medium right-panel width fallback. */
@media (max-width: 1500px) {
  #selectedBuilding .management-row,
  #selectedBuilding .management-row.head {
    grid-template-columns:
      minmax(150px, 1fr)
      82px
      90px
      142px !important;
    column-gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #selectedBuilding .management-row.head span:nth-child(4),
  #selectedBuilding .meter-cell {
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
  }

  #selectedBuilding .meter-track {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }
}

/* Stacked fallback. */
@media (max-width: 1240px) {
  #selectedBuilding .management-row,
  #selectedBuilding .management-row.head {
    grid-template-columns: 1fr !important;
  }

  #selectedBuilding .management-row.head span:nth-child(4),
  #selectedBuilding .meter-cell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #selectedBuilding .meter-track {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* v3.1: Basis tab visual dashboard upgrade */
.base-dashboard-v31 {
  height: 100%;
  min-height: 0;
}

.base-dashboard-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(680px, 1fr) 360px;
  gap: 12px;
}

.base-dashboard-main,
.base-dashboard-side {
  min-height: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.base-command-hero,
.base-section-card,
.base-colony-card {
  border: 1px solid rgba(88,215,255,.26);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8, 24, 43, .94), rgba(3, 12, 25, .90));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 18px 42px rgba(0,0,0,.20);
}

.base-command-hero {
  min-height: 210px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 175px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 78% 20%, rgba(88,215,255,.17), transparent 30%),
    linear-gradient(90deg, rgba(5,18,34,.98), rgba(7,27,49,.86)),
    url("../assets/planets/homeworld-map-background.webp") right center / cover no-repeat;
}

.base-command-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,8,18,.22), rgba(2,8,18,.72));
  pointer-events: none;
}

.base-command-hero > * {
  position: relative;
  z-index: 1;
}

.base-command-art {
  height: 150px;
  border: 1px solid rgba(88,215,255,.28);
  border-radius: 15px;
  overflow: hidden;
  background: rgba(3,14,27,.72);
  box-shadow: 0 0 24px rgba(88,215,255,.12);
}

.base-command-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.10);
}

.dash-kicker {
  display: block;
  margin-bottom: 6px;
  color: #9fd9ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.base-command-copy h1 {
  margin: 0;
  color: #eef8ff;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.base-command-copy p {
  max-width: 610px;
  margin: 9px 0 16px;
  color: #bfd2e5;
  line-height: 1.45;
}

.base-quick-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.base-command-status {
  display: grid;
  gap: 9px;
  justify-self: end;
  width: 155px;
}

.status-pill-v31 {
  min-height: 38px;
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 12px;
  background: rgba(3,14,27,.70);
  color: #bdd6ee;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-pill-v31 i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(141,166,190,.9);
  box-shadow: 0 0 12px rgba(141,166,190,.4);
}

.status-pill-v31.online {
  color: #6fffb0;
}

.status-pill-v31.online i {
  background: #6fffb0;
  box-shadow: 0 0 14px rgba(111,255,176,.55);
}

.base-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.base-stat-card {
  min-height: 72px;
  padding: 12px 13px;
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 15px;
  background:
    radial-gradient(circle at 18% 30%, rgba(88,215,255,.12), transparent 34%),
    rgba(8,23,42,.78);
}

.base-stat-card span {
  display: block;
  color: #8fb0cc;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.base-stat-card strong {
  display: block;
  margin-top: 5px;
  color: #eef8ff;
  font-size: 22px;
  line-height: 1;
}

.base-section-card {
  padding: 14px;
}

.base-building-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.base-building-card {
  min-height: 92px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 13px;
  background: rgba(5,18,34,.72);
  color: #eef8ff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.base-building-card:hover {
  border-color: rgba(88,215,255,.50);
  box-shadow: 0 0 18px rgba(88,215,255,.13);
}

.base-building-card img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  filter: saturate(1.08) contrast(1.08);
}

.base-building-card strong {
  display: block;
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
}

.base-building-card span {
  display: block;
  margin-top: 4px;
  color: #b7cce0;
  font-size: 12px;
}

.base-building-card em {
  display: block;
  margin-top: 5px;
  color: #6fffb0;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.base-building-card.busy {
  border-color: rgba(255,211,111,.35);
}

.base-building-card.busy em {
  color: #ffd36f;
}

.mini-progress {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 7px;
  background: rgba(3,14,27,.95);
  border-radius: 999px;
  overflow: hidden;
}

.mini-progress b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #24c7b3, #ffd36f);
}

.base-colony-card {
  padding: 14px;
  text-align: center;
}

.base-colony-visual {
  position: relative;
  height: 230px;
  margin: 8px 0 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.base-colony-visual img {
  width: 178px;
  height: 178px;
  object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(88,215,255,.42));
  z-index: 2;
}

.orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(130,207,255,.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-ring.r1 {
  width: 215px;
  height: 145px;
}

.orbit-ring.r2 {
  width: 265px;
  height: 185px;
  opacity: .55;
}

.colony-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #d8f5ff;
  border-radius: 50%;
  background: rgba(8,23,42,.90);
  box-shadow: 0 0 12px rgba(88,215,255,.55);
  z-index: 3;
}

.colony-node.a { left: 18%; top: 28%; }
.colony-node.b { right: 16%; top: 31%; }
.colony-node.c { left: 23%; bottom: 27%; }
.colony-node.d { right: 24%; bottom: 24%; }

.colony-core-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(88,215,255,.72);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 4;
  box-shadow: 0 0 18px rgba(88,215,255,.44);
}

.base-colony-card > strong {
  display: block;
  margin-top: 4px;
  color: #eef8ff;
  letter-spacing: .06em;
}

.base-colony-card > span {
  display: block;
  margin-top: 3px;
  color: #9fb6cf;
  font-size: 12px;
}

.latest-actions-dashboard {
  min-height: 330px;
}

.base-log-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgba(88,215,255,.14);
  border-radius: 12px;
  background: rgba(5,18,34,.60);
  color: #cfe4f7;
  font-size: 12px;
  line-height: 1.35;
}

.base-log-row i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(111,255,176,.80), rgba(39,199,178,.22));
  box-shadow: 0 0 16px rgba(111,255,176,.20);
}

.base-log-row:nth-child(2n) i {
  background:
    radial-gradient(circle, rgba(88,215,255,.85), rgba(88,215,255,.18));
}

.base-log-row:nth-child(3n) i {
  background:
    radial-gradient(circle, rgba(139,92,255,.85), rgba(139,92,255,.18));
}

@media (max-width: 1500px) {
  .base-dashboard-layout {
    grid-template-columns: minmax(600px, 1fr) 320px;
  }

  .base-command-hero {
    grid-template-columns: 190px minmax(0, 1fr) 145px;
  }

  .base-building-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .base-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  .base-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .base-command-hero {
    grid-template-columns: 1fr;
  }

  .base-command-status {
    width: 100%;
    justify-self: stretch;
    grid-template-columns: repeat(2, 1fr);
  }

  .base-stat-grid,
  .base-building-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v3.2: Kolonie overzicht = main planet + 9 future colonies */
.colony-overview-v32 {
  text-align: left;
}

.colony-overview-v32 .section-title {
  margin-bottom: 8px;
}

.colony-hub-v32 {
  height: 180px;
  margin: 4px 0 8px;
}

.colony-hub-v32 img {
  width: 142px;
  height: 142px;
}

.colony-hub-v32 .orbit-ring.r1 {
  width: 180px;
  height: 118px;
}

.colony-hub-v32 .orbit-ring.r2 {
  width: 220px;
  height: 150px;
}

.main-colony-label {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 12px;
  background: rgba(5,18,34,.62);
  text-align: center;
}

.main-colony-label strong {
  color: #eef8ff;
  letter-spacing: .07em;
  font-size: 14px;
}

.main-colony-label span {
  color: #9fb6cf;
  font-size: 11px;
}

.main-colony-label small {
  color: #6fffb0;
  font-size: 11px;
}

.colony-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.colony-slot {
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0 7px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 11px;
  background:
    radial-gradient(circle at 18% 35%, rgba(88,215,255,.10), transparent 34%),
    rgba(3,14,27,.68);
  color: #eef8ff;
  text-align: left;
  cursor: default;
}

.colony-slot span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(88,215,255,.32);
  border-radius: 50%;
  color: #9fd9ff;
  background: rgba(8,23,42,.84);
  font-size: 10px;
  font-weight: 900;
}

.colony-slot strong {
  align-self: end;
  font-size: 10.5px;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.colony-slot em {
  align-self: start;
  color: #7e98b1;
  font-style: normal;
  font-size: 9.5px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.colony-slot.active {
  border-color: rgba(111,255,176,.58);
  background:
    radial-gradient(circle at 18% 35%, rgba(111,255,176,.16), transparent 36%),
    rgba(4,22,31,.76);
  box-shadow: 0 0 18px rgba(111,255,176,.10);
}

.colony-slot.active span {
  border-color: rgba(111,255,176,.68);
  color: #6fffb0;
  box-shadow: 0 0 12px rgba(111,255,176,.25);
}

.colony-slot.active em {
  color: #6fffb0;
  font-weight: 800;
}

.colony-slot.empty {
  opacity: .82;
}

.colony-slot.empty span {
  opacity: .62;
}

.colony-future-note {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px dashed rgba(88,215,255,.20);
  border-radius: 11px;
  color: #8fa8c0;
  background: rgba(3,14,27,.45);
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 1500px) {
  .colony-hub-v32 {
    height: 150px;
  }

  .colony-hub-v32 img {
    width: 118px;
    height: 118px;
  }

  .colony-slots-grid {
    gap: 6px;
  }

  .colony-slot {
    min-height: 52px;
    padding: 7px;
  }

  .colony-slot strong {
    font-size: 9.8px;
  }

  .colony-slot em {
    font-size: 8.8px;
  }
}

@media (max-width: 1240px) {
  .colony-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v3.3: topbar resource icons */
.resources {
  gap: 9px;
}

.res {
  position: relative;
  min-height: 58px;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 18px 24px 14px;
  align-items: center;
  column-gap: 10px;
  padding: 8px 12px 7px 10px !important;
  overflow: hidden;
}

.res .resource-icon {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 36px;
  height: 36px;
  object-fit: contain;
  align-self: center;
  justify-self: center;
  filter:
    drop-shadow(0 0 8px rgba(88,215,255,.25))
    drop-shadow(0 0 14px rgba(0,0,0,.35));
}

.res .resource-icon-credits {
  filter:
    drop-shadow(0 0 8px rgba(255,180,64,.34))
    drop-shadow(0 0 16px rgba(255,180,64,.12));
}

.res .resource-icon-crystal {
  filter:
    drop-shadow(0 0 8px rgba(71,214,255,.38))
    drop-shadow(0 0 16px rgba(71,214,255,.16));
}

.res .resource-icon-metal {
  filter:
    drop-shadow(0 0 8px rgba(160,205,255,.28))
    drop-shadow(0 0 16px rgba(160,205,255,.10));
}

.res span,
.res b,
.res small {
  grid-column: 2;
  min-width: 0;
}

.res span {
  align-self: end;
  font-size: 11px !important;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.res b {
  align-self: center;
  font-size: 19px !important;
  line-height: 1;
}

.res small {
  align-self: start;
  font-size: 11px !important;
  line-height: 1;
}

/* Slightly smaller topbar icons on narrower screens. */
@media (max-width: 1500px) {
  .res {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 54px;
    column-gap: 8px;
    padding-left: 8px !important;
  }

  .res .resource-icon {
    width: 31px;
    height: 31px;
  }

  .res b {
    font-size: 17px !important;
  }

  .res span,
  .res small {
    font-size: 10px !important;
  }
}

@media (max-width: 1240px) {
  .resources {
    grid-template-columns: repeat(3, minmax(130px, 1fr)) !important;
  }
}


/* v3.4: resource icons back to normal visible size */
.res {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  min-height: 68px !important;
  column-gap: 12px !important;
  padding: 8px 14px 8px 12px !important;
}

.res .resource-icon {
  width: 50px !important;
  height: 50px !important;
  justify-self: center !important;
  align-self: center !important;
  object-fit: contain !important;
}

.res span {
  font-size: 11px !important;
}

.res b {
  font-size: 20px !important;
}

.res small {
  font-size: 11px !important;
}

@media (max-width: 1500px) {
  .res {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 64px !important;
    column-gap: 10px !important;
  }

  .res .resource-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .res b {
    font-size: 18px !important;
  }
}

@media (max-width: 1240px) {
  .res {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  .res .resource-icon {
    width: 40px !important;
    height: 40px !important;
  }
}


/* v3.5: Fleet tab visual dashboard upgrade */
.fleet-dashboard-v35 {
  height: 100%;
  min-height: 0;
}

.fleet-v35-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 360px;
  gap: 12px;
}

.fleet-v35-main,
.fleet-v35-side {
  min-height: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.fleet-command-hero {
  min-height: 225px;
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(88,215,255,.26);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 72% 28%, rgba(88,215,255,.16), transparent 32%),
    linear-gradient(90deg, rgba(4,15,29,.98), rgba(6,24,44,.84)),
    url("../assets/buildings/real/shipyard.webp") right center / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 18px 42px rgba(0,0,0,.20);
}

.fleet-command-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,8,18,.16), rgba(2,8,18,.76));
  pointer-events: none;
}

.fleet-command-hero > * {
  position: relative;
  z-index: 1;
}

.fleet-command-art {
  height: 160px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(3,14,27,.72);
  box-shadow: 0 0 24px rgba(88,215,255,.13);
}

.fleet-command-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.14) contrast(1.12);
}

.fleet-command-copy h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.fleet-command-copy p {
  max-width: 620px;
  margin: 10px 0 16px;
  color: #bdd2e5;
  line-height: 1.45;
}

.fleet-hero-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.fleet-command-stats {
  display: grid;
  gap: 9px;
}

.fleet-command-stats > div,
.fleet-mini-stat {
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 13px;
  background: rgba(3,14,27,.70);
  padding: 10px 12px;
}

.fleet-command-stats span,
.fleet-mini-stat span {
  display: block;
  color: #8fb0cc;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.fleet-command-stats strong,
.fleet-mini-stat strong {
  display: block;
  margin-top: 5px;
  color: #eef8ff;
  font-size: 23px;
  line-height: 1;
}

.fleet-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.fleet-mini-stat {
  min-height: 66px;
  background:
    radial-gradient(circle at 12% 30%, rgba(88,215,255,.11), transparent 36%),
    rgba(8,23,42,.72);
}

.fleet-mini-stat strong {
  font-size: 19px;
}

.fleet-build-v35,
.fleet-hangar-v35,
.fleet-queue-v35 {
  padding: 14px;
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8,24,43,.94), rgba(3,12,25,.90));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.fleet-design-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fleet-design-card-v35 {
  min-height: 360px;
  display: grid;
  grid-template-rows: 132px minmax(0, 1fr);
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 8%, rgba(88,215,255,.12), transparent 34%),
    rgba(5,18,34,.74);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.fleet-design-card-v35.tier-2 {
  border-color: rgba(255,211,111,.24);
}

.fleet-design-card-v35.tier-3 {
  border-color: rgba(255,111,145,.24);
}

.fleet-design-card-v35.locked {
  opacity: .62;
}

.fleet-ship-visual {
  position: relative;
  overflow: hidden;
  background: rgba(1,6,15,.86);
}

.fleet-ship-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.10);
}

.ship-tier-badge {
  position: absolute;
  right: 9px;
  top: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 999px;
  background: rgba(3,14,27,.78);
  color: #b7d8ef;
  font-size: 11px;
  font-weight: 800;
}

.fleet-design-body {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.fleet-design-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.fleet-design-title h3 {
  margin: 0;
  color: #eef8ff;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.fleet-design-title span {
  color: #9fd9ff;
  font-size: 11px;
  white-space: nowrap;
}

.fleet-design-body p {
  margin: 0;
  color: #aec6dc;
  font-size: 12px;
  line-height: 1.35;
}

.fleet-req-grid {
  display: grid;
  gap: 5px;
}

.fleet-req-grid span {
  display: block;
  padding: 6px 8px;
  border: 1px solid rgba(88,215,255,.16);
  border-radius: 10px;
  color: #a9bed3;
  background: rgba(3,14,27,.46);
  font-size: 11px;
}

.fleet-req-grid .ok {
  color: #6fffb0;
  border-color: rgba(111,255,176,.22);
}

.fleet-req-grid .warn {
  color: #ffd36f;
  border-color: rgba(255,211,111,.25);
}

.fleet-cost-line {
  color: #d5e9fa;
  font-size: 11px;
  line-height: 1.35;
}

.fleet-build-progress {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255,211,111,.18);
  border-radius: 11px;
  background: rgba(255,211,111,.06);
}

.fleet-build-progress div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #ffd36f;
  font-size: 11px;
}

.fleet-build-progress i,
.fleet-queue-row-v35 i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.fleet-build-progress b,
.fleet-queue-row-v35 b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #24c7b3, #ffd36f);
}

.fleet-design-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: auto;
}

.fleet-design-footer span {
  color: #9fb6cf;
  font-size: 11px;
}

.fleet-design-footer button {
  min-width: 86px;
  padding: 8px 12px;
  border-radius: 10px;
}

.fleet-inventory-v35,
.fleet-queue-list-v35 {
  display: grid;
  gap: 9px;
}

.fleet-hangar-row-v35,
.fleet-queue-row-v35 {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 13px;
  background: rgba(5,18,34,.72);
}

.fleet-queue-row-v35 {
  grid-template-columns: 58px minmax(0, 1fr);
}

.fleet-hangar-row-v35 img,
.fleet-queue-row-v35 img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid rgba(88,215,255,.16);
}

.fleet-queue-row-v35 img {
  width: 56px;
  height: 42px;
}

.fleet-hangar-row-v35 strong,
.fleet-queue-row-v35 strong {
  display: block;
  color: #eef8ff;
  font-size: 13px;
  text-transform: uppercase;
}

.fleet-hangar-row-v35 span,
.fleet-queue-row-v35 span {
  display: block;
  margin-top: 3px;
  color: #9fb6cf;
  font-size: 11px;
}

.fleet-hangar-row-v35 b {
  min-width: 38px;
  text-align: center;
  padding: 8px 9px;
  border: 1px solid rgba(111,255,176,.32);
  border-radius: 999px;
  color: #6fffb0;
  background: rgba(111,255,176,.08);
}

.fleet-hangar-row-v35.empty {
  opacity: .68;
}

.empty-fleet-queue {
  padding: 14px;
  border: 1px dashed rgba(88,215,255,.22);
  border-radius: 13px;
  color: #9fb6cf;
  text-align: center;
  background: rgba(5,18,34,.50);
}

@media (max-width: 1500px) {
  .fleet-v35-layout {
    grid-template-columns: minmax(620px, 1fr) 320px;
  }

  .fleet-command-hero {
    grid-template-columns: 220px minmax(0, 1fr) 150px;
  }

  .fleet-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fleet-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  .fleet-v35-layout {
    grid-template-columns: 1fr;
  }

  .fleet-command-hero {
    grid-template-columns: 1fr;
  }

  .fleet-command-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fleet-design-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.6: Research tab visual dashboard upgrade */
.research-dashboard-v36 {
  height: 100%;
  min-height: 0;
}

.research-v36-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 360px;
  gap: 12px;
}

.research-v36-main,
.research-v36-side {
  min-height: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.research-command-hero,
.research-tech-v36,
.research-queue-v36,
.research-unlocks-v36 {
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8,24,43,.94), rgba(3,12,25,.90));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 42px rgba(0,0,0,.18);
}

.research-command-hero {
  min-height: 225px;
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 72% 28%, rgba(88,215,255,.17), transparent 32%),
    linear-gradient(90deg, rgba(4,15,29,.98), rgba(6,24,44,.84)),
    url("../assets/buildings/real/research-lab.webp") right center / cover no-repeat;
}

.research-command-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,8,18,.18), rgba(2,8,18,.76));
  pointer-events: none;
}

.research-command-hero > * {
  position: relative;
  z-index: 1;
}

.research-command-art {
  height: 160px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(3,14,27,.72);
  box-shadow: 0 0 24px rgba(88,215,255,.13);
}

.research-command-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.14) contrast(1.12);
}

.research-command-copy h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.research-command-copy p {
  max-width: 660px;
  margin: 10px 0 16px;
  color: #bdd2e5;
  line-height: 1.45;
}

.research-hero-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.research-command-stats {
  display: grid;
  gap: 9px;
}

.research-command-stats > div,
.research-mini-stat {
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 13px;
  background: rgba(3,14,27,.70);
  padding: 10px 12px;
}

.research-command-stats span,
.research-mini-stat span {
  display: block;
  color: #8fb0cc;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.research-command-stats strong,
.research-mini-stat strong {
  display: block;
  margin-top: 5px;
  color: #eef8ff;
  font-size: 23px;
  line-height: 1;
}

.research-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.research-mini-stat {
  min-height: 66px;
  background:
    radial-gradient(circle at 12% 30%, rgba(88,215,255,.11), transparent 36%),
    rgba(8,23,42,.72);
}

.research-mini-stat strong {
  font-size: 19px;
}

.research-tech-v36,
.research-queue-v36,
.research-unlocks-v36 {
  padding: 14px;
}

.research-tech-grid-v36 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.research-card-v36 {
  min-height: 405px;
  display: grid;
  grid-template-rows: 136px minmax(0, 1fr);
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 8%, rgba(88,215,255,.12), transparent 34%),
    rgba(5,18,34,.74);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.research-card-v36.locked {
  opacity: .62;
}

.research-card-v36.maxed {
  border-color: rgba(111,255,176,.36);
}

.research-card-v36.active {
  border-color: rgba(255,211,111,.38);
  box-shadow: 0 0 22px rgba(255,211,111,.10);
}

.research-visual-v36 {
  position: relative;
  overflow: hidden;
  background: rgba(1,6,15,.86);
}

.research-visual-v36 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.10);
}

.research-level-badge {
  position: absolute;
  right: 9px;
  top: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 999px;
  background: rgba(3,14,27,.78);
  color: #b7d8ef;
  font-size: 11px;
  font-weight: 800;
}

.research-body-v36 {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.research-title-v36 {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.research-title-v36 h3 {
  margin: 0;
  color: #eef8ff;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.1;
}

.research-title-v36 span {
  color: #9fd9ff;
  font-size: 11px;
  white-space: nowrap;
}

.research-body-v36 p {
  margin: 0;
  color: #aec6dc;
  font-size: 12px;
  line-height: 1.35;
}

.research-effect-list-v36,
.research-req-cost-v36 {
  display: grid;
  gap: 5px;
}

.research-effect-list-v36 span,
.research-req-cost-v36 span {
  display: block;
  padding: 6px 8px;
  border: 1px solid rgba(88,215,255,.16);
  border-radius: 10px;
  color: #a9bed3;
  background: rgba(3,14,27,.46);
  font-size: 11px;
  line-height: 1.25;
}

.research-effect-list-v36 span {
  color: #d5e9fa;
}

.research-req-cost-v36 .ok {
  color: #6fffb0;
  border-color: rgba(111,255,176,.22);
}

.research-req-cost-v36 .warn {
  color: #ffd36f;
  border-color: rgba(255,211,111,.25);
}

.research-progress-v36 {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255,211,111,.18);
  border-radius: 11px;
  background: rgba(255,211,111,.06);
}

.research-progress-v36 div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #ffd36f;
  font-size: 11px;
}

.research-progress-v36 i,
.research-queue-row-v36 i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.research-progress-v36 b,
.research-queue-row-v36 b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #24c7b3, #ffd36f);
}

.research-footer-v36 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: auto;
}

.research-footer-v36 span {
  color: #9fb6cf;
  font-size: 11px;
}

.research-footer-v36 button {
  min-width: 96px;
  padding: 8px 12px;
  border-radius: 10px;
}

.research-queue-list-v36,
.research-unlock-list-v36 {
  display: grid;
  gap: 9px;
}

.research-queue-row-v36 {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 13px;
  background: rgba(5,18,34,.72);
}

.research-queue-row-v36 img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid rgba(88,215,255,.16);
}

.research-queue-row-v36 strong {
  display: block;
  color: #eef8ff;
  font-size: 12px;
  text-transform: uppercase;
}

.research-queue-row-v36 span {
  display: block;
  margin-top: 3px;
  color: #9fb6cf;
  font-size: 11px;
}

.research-queue-row-v36 i {
  margin-top: 7px;
}

.empty-research-queue {
  padding: 14px;
  border: 1px dashed rgba(88,215,255,.22);
  border-radius: 13px;
  color: #9fb6cf;
  text-align: center;
  background: rgba(5,18,34,.50);
}

.research-unlock-row-v36 {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px 48px 10px 11px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 13px;
  background:
    radial-gradient(circle at 12% 30%, rgba(88,215,255,.09), transparent 36%),
    rgba(5,18,34,.68);
}

.research-unlock-row-v36 strong {
  color: #eef8ff;
  font-size: 12px;
  text-transform: uppercase;
}

.research-unlock-row-v36 span {
  color: #9fb6cf;
  font-size: 11px;
  line-height: 1.3;
}

.research-unlock-row-v36 b {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #6fffb0;
  font-size: 12px;
}

@media (max-width: 1500px) {
  .research-v36-layout {
    grid-template-columns: minmax(620px, 1fr) 320px;
  }

  .research-command-hero {
    grid-template-columns: 220px minmax(0, 1fr) 150px;
  }

  .research-tech-grid-v36 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  .research-v36-layout {
    grid-template-columns: 1fr;
  }

  .research-command-hero {
    grid-template-columns: 1fr;
  }

  .research-command-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .research-tech-grid-v36 {
    grid-template-columns: 1fr;
  }
}


/* v3.7: Defense tab visual dashboard + buildable defense systems */
.defense-dashboard-v37 {
  height: 100%;
  min-height: 0;
}

.defense-v37-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 360px;
  gap: 12px;
}

.defense-v37-main,
.defense-v37-side {
  min-height: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.defense-command-hero,
.defense-build-v37,
.defense-arsenal-v37,
.defense-queue-v37,
.defense-note-v37 {
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8,24,43,.94), rgba(3,12,25,.90));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 42px rgba(0,0,0,.18);
}

.defense-command-hero {
  min-height: 225px;
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 72% 28%, rgba(88,215,255,.17), transparent 32%),
    linear-gradient(90deg, rgba(4,15,29,.98), rgba(6,24,44,.84)),
    url("../assets/buildings/real/defense-grid.webp") right center / cover no-repeat;
}

.defense-command-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,8,18,.18), rgba(2,8,18,.76));
  pointer-events: none;
}

.defense-command-hero > * {
  position: relative;
  z-index: 1;
}

.defense-command-art {
  height: 160px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(3,14,27,.72);
  box-shadow: 0 0 24px rgba(88,215,255,.13);
}

.defense-command-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.10);
}

.defense-command-copy h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.defense-command-copy p {
  max-width: 690px;
  margin: 10px 0 16px;
  color: #bdd2e5;
  line-height: 1.45;
}

.defense-hero-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.defense-command-stats {
  display: grid;
  gap: 9px;
}

.defense-command-stats > div,
.defense-mini-stat {
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 13px;
  background: rgba(3,14,27,.70);
  padding: 10px 12px;
}

.defense-command-stats span,
.defense-mini-stat span {
  display: block;
  color: #8fb0cc;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.defense-command-stats strong,
.defense-mini-stat strong {
  display: block;
  margin-top: 5px;
  color: #eef8ff;
  font-size: 23px;
  line-height: 1;
}

.defense-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.defense-mini-stat {
  min-height: 66px;
  background:
    radial-gradient(circle at 12% 30%, rgba(88,215,255,.11), transparent 36%),
    rgba(8,23,42,.72);
}

.defense-mini-stat strong {
  font-size: 19px;
}

.defense-build-v37,
.defense-arsenal-v37,
.defense-queue-v37,
.defense-note-v37 {
  padding: 14px;
}

.defense-design-grid-v37 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.defense-design-card-v37 {
  min-height: 410px;
  display: grid;
  grid-template-rows: 136px minmax(0, 1fr);
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 8%, rgba(88,215,255,.12), transparent 34%),
    rgba(5,18,34,.74);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.defense-design-card-v37.tier-2 {
  border-color: rgba(255,211,111,.25);
}

.defense-design-card-v37.tier-3 {
  border-color: rgba(255,111,145,.25);
}

.defense-design-card-v37.locked {
  opacity: .62;
}

.defense-design-card-v37.active {
  border-color: rgba(255,211,111,.38);
  box-shadow: 0 0 22px rgba(255,211,111,.10);
}

.defense-system-visual {
  position: relative;
  overflow: hidden;
  background: rgba(1,6,15,.86);
}

.defense-system-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.10);
}

.defense-tier-badge {
  position: absolute;
  right: 9px;
  top: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 999px;
  background: rgba(3,14,27,.78);
  color: #b7d8ef;
  font-size: 11px;
  font-weight: 800;
}

.defense-design-body {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.defense-design-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.defense-design-title h3 {
  margin: 0;
  color: #eef8ff;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.1;
}

.defense-design-title span {
  color: #9fd9ff;
  font-size: 11px;
  white-space: nowrap;
}

.defense-design-body p {
  margin: 0;
  color: #aec6dc;
  font-size: 12px;
  line-height: 1.35;
}

.defense-req-grid,
.defense-effect-list {
  display: grid;
  gap: 5px;
}

.defense-req-grid span,
.defense-effect-list span {
  display: block;
  padding: 6px 8px;
  border: 1px solid rgba(88,215,255,.16);
  border-radius: 10px;
  color: #a9bed3;
  background: rgba(3,14,27,.46);
  font-size: 11px;
  line-height: 1.25;
}

.defense-req-grid .ok {
  color: #6fffb0;
  border-color: rgba(111,255,176,.22);
}

.defense-req-grid .warn {
  color: #ffd36f;
  border-color: rgba(255,211,111,.25);
}

.defense-cost-line {
  color: #d5e9fa;
  font-size: 11px;
  line-height: 1.35;
}

.defense-build-progress {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255,211,111,.18);
  border-radius: 11px;
  background: rgba(255,211,111,.06);
}

.defense-build-progress div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #ffd36f;
  font-size: 11px;
}

.defense-build-progress i,
.defense-queue-row-v37 i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.defense-build-progress b,
.defense-queue-row-v37 b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #24c7b3, #ffd36f);
}

.defense-design-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: auto;
}

.defense-design-footer span {
  color: #9fb6cf;
  font-size: 11px;
}

.defense-design-footer button {
  min-width: 88px;
  padding: 8px 12px;
  border-radius: 10px;
}

.defense-inventory-v37,
.defense-queue-list-v37,
.defense-future-list {
  display: grid;
  gap: 9px;
}

.defense-arsenal-row-v37,
.defense-queue-row-v37 {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 13px;
  background: rgba(5,18,34,.72);
}

.defense-queue-row-v37 {
  grid-template-columns: 58px minmax(0, 1fr);
}

.defense-arsenal-row-v37 img,
.defense-queue-row-v37 img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid rgba(88,215,255,.16);
}

.defense-queue-row-v37 img {
  width: 56px;
  height: 42px;
}

.defense-arsenal-row-v37 strong,
.defense-queue-row-v37 strong {
  display: block;
  color: #eef8ff;
  font-size: 12px;
  text-transform: uppercase;
}

.defense-arsenal-row-v37 span,
.defense-queue-row-v37 span {
  display: block;
  margin-top: 3px;
  color: #9fb6cf;
  font-size: 11px;
}

.defense-arsenal-row-v37 b {
  min-width: 38px;
  text-align: center;
  padding: 8px 9px;
  border: 1px solid rgba(111,255,176,.32);
  border-radius: 999px;
  color: #6fffb0;
  background: rgba(111,255,176,.08);
}

.defense-arsenal-row-v37.empty {
  opacity: .68;
}

.empty-defense-queue {
  padding: 14px;
  border: 1px dashed rgba(88,215,255,.22);
  border-radius: 13px;
  color: #9fb6cf;
  text-align: center;
  background: rgba(5,18,34,.50);
}

.defense-future-list span {
  display: block;
  padding: 9px 10px;
  border: 1px solid rgba(88,215,255,.15);
  border-radius: 11px;
  color: #aac2d8;
  background: rgba(5,18,34,.58);
  font-size: 11px;
}

@media (max-width: 1650px) {
  .defense-design-grid-v37 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1500px) {
  .defense-v37-layout {
    grid-template-columns: minmax(620px, 1fr) 320px;
  }

  .defense-command-hero {
    grid-template-columns: 220px minmax(0, 1fr) 150px;
  }

  .defense-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  .defense-v37-layout {
    grid-template-columns: 1fr;
  }

  .defense-command-hero {
    grid-template-columns: 1fr;
  }

  .defense-command-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .defense-design-grid-v37 {
    grid-template-columns: 1fr;
  }
}


/* v3.8: Missions visual dashboard upgrade */
.missions-dashboard-v38 {
  height: 100%;
  min-height: 0;
}

.missions-v38-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 380px;
  gap: 12px;
}

.missions-v38-main,
.missions-v38-side {
  min-height: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.missions-command-hero,
.mission-readiness-v38,
.mission-available-v38,
.mission-active-v38,
.mission-route-v38,
.mission-radar-panel-v38 {
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8,24,43,.94), rgba(3,12,25,.90));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 42px rgba(0,0,0,.18);
}

.missions-command-hero {
  min-height: 225px;
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 72% 28%, rgba(88,215,255,.17), transparent 32%),
    linear-gradient(90deg, rgba(4,15,29,.98), rgba(6,24,44,.84)),
    url("../assets/missions/mission-command.svg") right center / cover no-repeat;
}

.missions-command-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,8,18,.12), rgba(2,8,18,.70));
  pointer-events: none;
}

.missions-command-hero > * {
  position: relative;
  z-index: 1;
}

.missions-command-art {
  height: 160px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(3,14,27,.72);
  box-shadow: 0 0 24px rgba(88,215,255,.13);
}

.missions-command-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.15) contrast(1.10);
}

.missions-command-copy h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.missions-command-copy p {
  max-width: 700px;
  margin: 10px 0 16px;
  color: #bdd2e5;
  line-height: 1.45;
}

.missions-hero-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.missions-command-stats {
  display: grid;
  gap: 9px;
}

.missions-command-stats > div {
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 13px;
  background: rgba(3,14,27,.70);
  padding: 10px 12px;
}

.missions-command-stats span {
  display: block;
  color: #8fb0cc;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.missions-command-stats strong {
  display: block;
  margin-top: 5px;
  color: #eef8ff;
  font-size: 23px;
  line-height: 1;
}

.mission-sector-board-v38 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.sector-card-v38 {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  padding: 11px 12px !important;
  border-radius: 15px !important;
}

.sector-card-v38 strong {
  color: #eef8ff;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .04em;
}

.sector-card-v38 span {
  grid-column: 1 / 3;
  color: #9fb6cf;
  font-size: 11px;
}

.sector-card-v38 em {
  justify-self: end;
  align-self: start;
  color: #6fffb0;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
}

.mission-radar-grid-v38 {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) 280px;
  gap: 12px;
  align-items: stretch;
}

.mission-radar-panel-v38 {
  padding: 14px;
}

.mission-sector-map-v38 {
  min-height: 480px;
  background:
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .18), transparent 7%),
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .07), transparent 52%),
    linear-gradient(180deg, rgba(2,8,20,.55), rgba(2,8,20,.92)) !important;
}

.mission-sector-map-v38::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 72%, rgba(255,211,111,.10), transparent 9%),
    radial-gradient(circle at 74% 24%, rgba(139,92,255,.10), transparent 11%),
    radial-gradient(circle at 62% 66%, rgba(111,255,176,.08), transparent 10%);
  pointer-events: none;
}

.mission-map-legend-v38 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mission-map-legend-v38 #missionSelectedSectorText {
  margin-left: auto;
  color: #9fd9ff;
}

.mission-readiness-v38,
.mission-available-v38,
.mission-active-v38,
.mission-route-v38 {
  padding: 14px;
}

.mission-readiness-grid-v38 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.mission-readiness-grid-v38 > div {
  min-height: 68px;
  padding: 10px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 13px;
  background:
    radial-gradient(circle at 12% 30%, rgba(88,215,255,.11), transparent 36%),
    rgba(5,18,34,.68);
}

.mission-readiness-grid-v38 span {
  display: block;
  color: #8fb0cc;
  font-size: 10px;
  text-transform: uppercase;
}

.mission-readiness-grid-v38 strong {
  display: block;
  margin-top: 5px;
  color: #eef8ff;
  font-size: 20px;
}

.mission-readiness-note-v38,
.mission-route-list-v38 span {
  display: block;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(88,215,255,.20);
  border-radius: 11px;
  color: #9fb6cf;
  background: rgba(3,14,27,.46);
  font-size: 11px;
  line-height: 1.35;
}

.mission-list-v38 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mission-card-v38 {
  min-height: 245px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(88,215,255,.23);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 8%, rgba(88,215,255,.12), transparent 34%),
    rgba(5,18,34,.74);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.mission-card-v38.risk-normal {
  border-color: rgba(255,211,111,.26);
}

.mission-card-v38.risk-high {
  border-color: rgba(255,111,145,.38);
}

.mission-card-visual-v38 {
  position: relative;
  min-height: 100%;
  background: rgba(1,6,15,.86);
  overflow: hidden;
}

.mission-card-visual-v38 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.10);
}

.mission-card-visual-v38 span {
  position: absolute;
  left: 9px;
  top: 9px;
  padding: 5px 8px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 999px;
  background: rgba(3,14,27,.78);
  color: #b7d8ef;
  font-size: 10px;
  font-weight: 800;
}

.risk-high .mission-card-visual-v38 span {
  color: #ff8fa9;
  border-color: rgba(255,111,145,.38);
}

.mission-card-body-v38 {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.mission-card-title-v38 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.mission-card-title-v38 h3 {
  margin: 0;
  color: #eef8ff;
  font-size: 15px;
  line-height: 1.1;
  text-transform: uppercase;
}

.mission-card-title-v38 span {
  color: #9fd9ff;
  font-size: 11px;
  white-space: nowrap;
}

.mission-route-meta-v38,
.mission-reward-grid-v38 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.mission-reward-grid-v38 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mission-route-meta-v38 span,
.mission-reward-grid-v38 span,
.mission-requirement-v38 {
  display: block;
  padding: 6px 8px;
  border: 1px solid rgba(88,215,255,.15);
  border-radius: 10px;
  color: #a9bed3;
  background: rgba(3,14,27,.48);
  font-size: 11px;
  line-height: 1.25;
}

.mission-reward-grid-v38 b {
  color: #eef8ff;
}

.mission-requirement-v38.ok {
  color: #6fffb0;
  border-color: rgba(111,255,176,.24);
}

.mission-requirement-v38.warn {
  color: #ffd36f;
  border-color: rgba(255,211,111,.24);
}

.mission-card-footer-v38 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: auto;
}

.mission-card-footer-v38 span {
  color: #9fb6cf;
  font-size: 11px;
}

.mission-card-footer-v38 button {
  min-width: 110px;
  padding: 8px 12px;
  border-radius: 10px;
}

.active-mission-list-v38 {
  display: grid;
  gap: 10px;
}

.active-mission-card-v38 {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(255,211,111,.25);
  border-radius: 15px;
  overflow: hidden;
  background: rgba(5,18,34,.72);
}

.active-mission-visual-v38 {
  position: relative;
  background: rgba(1,6,15,.86);
}

.active-mission-visual-v38 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.16) contrast(1.08);
}

.active-mission-visual-v38 span {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 4px 6px;
  border-radius: 999px;
  color: #ffd36f;
  background: rgba(3,14,27,.78);
  font-size: 9.5px;
  font-weight: 800;
}

.active-mission-body-v38 {
  display: grid;
  gap: 5px;
  padding: 10px;
}

.active-mission-body-v38 h3 {
  margin: 0;
  font-size: 13px;
}

.active-mission-body-v38 > span {
  color: #a9bed3;
  font-size: 11px;
  line-height: 1.25;
}

.mission-progress-v38 {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}

.mission-progress-v38 i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #24c7b3, #ffd36f);
}

.mission-route-list-v38 {
  display: grid;
  gap: 8px;
}

.mission-route-list-v38 span {
  margin-top: 0;
}

.mission-empty-v38 {
  padding: 14px;
  border: 1px dashed rgba(88,215,255,.22);
  border-radius: 13px;
  color: #9fb6cf;
  text-align: center;
  background: rgba(5,18,34,.50);
}

.mission-empty-v38.large {
  grid-column: 1 / -1;
  min-height: 120px;
  display: grid;
  place-items: center;
}

/* Keep existing radar markers but make them stronger in the upgraded page. */
.missions-dashboard-v38 .mission-marker {
  z-index: 8;
}

.missions-dashboard-v38 .travel-ship {
  z-index: 10;
  box-shadow: 0 0 16px rgba(111,255,176,.55);
}

@media (max-width: 1500px) {
  .missions-v38-layout {
    grid-template-columns: minmax(620px, 1fr) 330px;
  }

  .missions-command-hero {
    grid-template-columns: 220px minmax(0, 1fr) 150px;
  }

  .mission-sector-board-v38 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mission-radar-grid-v38 {
    grid-template-columns: 1fr;
  }

  .mission-list-v38 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1240px) {
  .missions-v38-layout {
    grid-template-columns: 1fr;
  }

  .missions-command-hero {
    grid-template-columns: 1fr;
  }

  .missions-command-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mission-sector-board-v38 {
    grid-template-columns: 1fr;
  }

  .mission-sector-map-v38 {
    min-height: 420px;
  }
}


/* v3.9: corrected mission radar geometry
   - rings are contained in the map
   - scan cone rotates from center without clipping
   - sector markers are displayed on clean distance bands
*/

.missions-dashboard-v38 .mission-radar-panel-v38 {
  overflow: hidden !important;
}

.missions-dashboard-v38 .mission-sector-map-v38 {
  height: clamp(360px, 42vh, 470px) !important;
  min-height: 360px !important;
  max-height: 470px !important;
  aspect-ratio: auto !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .14), transparent 5%),
    radial-gradient(circle at 50% 50%, rgba(88, 215, 255, .06), transparent 42%),
    linear-gradient(180deg, rgba(2,8,20,.58), rgba(2,8,20,.94)) !important;
}

.missions-dashboard-v38 .mission-sector-map-v38::before {
  background-size: 80px 80px, 132px 132px !important;
  opacity: .30 !important;
}

.missions-dashboard-v38 .sector-core {
  width: 66px !important;
  height: 66px !important;
  z-index: 5 !important;
  box-shadow:
    0 0 34px rgba(88,215,255,.34),
    0 0 72px rgba(88,215,255,.10) !important;
}

/* Fixed contained radar ring sizes. Previous 510px ring could be clipped. */
.missions-dashboard-v38 .radar-ring {
  z-index: 2 !important;
  opacity: .92 !important;
}

.missions-dashboard-v38 .ring-a {
  width: min(26%, 170px) !important;
  height: min(42%, 170px) !important;
}

.missions-dashboard-v38 .ring-b {
  width: min(42%, 290px) !important;
  height: min(66%, 290px) !important;
}

.missions-dashboard-v38 .ring-c {
  width: min(58%, 405px) !important;
  height: min(88%, 405px) !important;
}

/* New centered sweep. It no longer starts as an offset half-disc. */
.missions-dashboard-v38 .radar-sweep {
  left: 50% !important;
  top: 50% !important;
  width: min(58%, 405px) !important;
  height: min(88%, 405px) !important;
  transform-origin: center center !important;
  transform: translate(-50%, -50%) rotate(0deg) !important;
  border-radius: 50% !important;
  background:
    conic-gradient(
      from 305deg,
      rgba(111,255,176,.28) 0deg,
      rgba(88,215,255,.12) 32deg,
      transparent 62deg,
      transparent 360deg
    ) !important;
  clip-path: circle(50% at 50% 50%) !important;
  animation: radar-v39-spin 5s linear infinite !important;
  mix-blend-mode: screen;
  z-index: 3 !important;
}

@keyframes radar-v39-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.missions-dashboard-v38 .sector-grid-line {
  z-index: 2 !important;
  background: rgba(130,207,255,.10) !important;
}

.missions-dashboard-v38 .mission-markers,
.missions-dashboard-v38 .active-flight-layer {
  z-index: 7 !important;
}

.missions-dashboard-v38 .flight-svg {
  z-index: 7 !important;
}

.missions-dashboard-v38 .flight-svg line {
  stroke-width: .42 !important;
  stroke: rgba(255,211,111,.62) !important;
}

.missions-dashboard-v38 .mission-marker {
  width: 24px !important;
  height: 24px !important;
  z-index: 9 !important;
}

.missions-dashboard-v38 .mission-marker::after {
  inset: -6px !important;
}

.missions-dashboard-v38 .travel-ship {
  width: 24px !important;
  height: 11px !important;
  z-index: 10 !important;
}

.missions-dashboard-v38 .map-legend,
.missions-dashboard-v38 .mission-map-legend-v38 {
  align-items: center !important;
  min-height: 22px !important;
  padding-top: 2px !important;
}

/* A little less height on smaller screens so the radar never pushes out of the page. */
@media (max-width: 1500px) {
  .missions-dashboard-v38 .mission-sector-map-v38 {
    height: clamp(330px, 38vh, 430px) !important;
    min-height: 330px !important;
    max-height: 430px !important;
  }

  .missions-dashboard-v38 .ring-c,
  .missions-dashboard-v38 .radar-sweep {
    width: min(58%, 360px) !important;
    height: min(86%, 360px) !important;
  }
}

@media (max-width: 1240px) {
  .missions-dashboard-v38 .mission-sector-map-v38 {
    height: 360px !important;
  }

  .missions-dashboard-v38 .ring-c,
  .missions-dashboard-v38 .radar-sweep {
    width: min(70%, 320px) !important;
    height: min(80%, 320px) !important;
  }
}


/* v3.10: radar sweep animation fix
   v3.9 used a fixed transform with !important on .radar-sweep.
   That kept the sweep centered, but it also prevented the keyframe rotation
   from taking effect. The parent now only positions the sweep. The rotating
   conic layer is moved to ::before.
*/

.missions-dashboard-v38 .radar-sweep {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(58%, 405px) !important;
  height: min(88%, 405px) !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  border-radius: 50% !important;
  background: transparent !important;
  clip-path: none !important;
  animation: none !important;
  overflow: hidden !important;
  mix-blend-mode: screen;
  z-index: 3 !important;
  pointer-events: none !important;
}

.missions-dashboard-v38 .radar-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 305deg,
      rgba(111,255,176,.30) 0deg,
      rgba(88,215,255,.13) 34deg,
      rgba(88,215,255,.04) 54deg,
      transparent 72deg,
      transparent 360deg
    );
  clip-path: circle(50% at 50% 50%);
  transform-origin: center center;
  animation: radar-v310-spin 4.8s linear infinite;
  will-change: transform;
}

.missions-dashboard-v38 .radar-sweep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  transform-origin: left center;
  transform: rotate(305deg);
  background: linear-gradient(90deg, rgba(111,255,176,.40), transparent);
  animation: radar-v310-line 4.8s linear infinite;
  will-change: transform;
}

@keyframes radar-v310-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes radar-v310-line {
  from { transform: rotate(305deg); }
  to { transform: rotate(665deg); }
}

@media (max-width: 1500px) {
  .missions-dashboard-v38 .radar-sweep {
    width: min(58%, 360px) !important;
    height: min(86%, 360px) !important;
  }
}

@media (max-width: 1240px) {
  .missions-dashboard-v38 .radar-sweep {
    width: min(70%, 320px) !important;
    height: min(80%, 320px) !important;
  }
}


/* v3.11: round mission radar sweep
   The previous sweep/rings were still using different width/height values,
   which made the radar look oval and the rotation visually uneven.
   This override makes the radar system a true circle.
*/

.missions-dashboard-v38 .mission-sector-map-v38 {
  --radar-outer-size: clamp(265px, 34vh, 370px);
  --radar-mid-size: calc(var(--radar-outer-size) * .64);
  --radar-inner-size: calc(var(--radar-outer-size) * .34);
  overflow: hidden !important;
}

/* True circular rings. */
.missions-dashboard-v38 .ring-a,
.missions-dashboard-v38 .ring-b,
.missions-dashboard-v38 .ring-c {
  left: 50% !important;
  top: 50% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.missions-dashboard-v38 .ring-a {
  width: var(--radar-inner-size) !important;
}

.missions-dashboard-v38 .ring-b {
  width: var(--radar-mid-size) !important;
}

.missions-dashboard-v38 .ring-c {
  width: var(--radar-outer-size) !important;
}

/* Parent is a square circle layer. It only positions the sweep. */
.missions-dashboard-v38 .radar-sweep {
  left: 50% !important;
  top: 50% !important;
  width: var(--radar-outer-size) !important;
  height: var(--radar-outer-size) !important;
  aspect-ratio: 1 / 1 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  border-radius: 50% !important;
  background: transparent !important;
  clip-path: circle(50% at 50% 50%) !important;
  animation: none !important;
  overflow: hidden !important;
  mix-blend-mode: screen;
  pointer-events: none !important;
}

/* Rotate the whole circular sweep layer internally. */
.missions-dashboard-v38 .radar-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: center center;
  animation: radar-v311-spin 5.2s linear infinite;
  will-change: transform;
  background:
    conic-gradient(
      from -12deg,
      rgba(111,255,176,.00) 0deg,
      rgba(111,255,176,.06) 6deg,
      rgba(111,255,176,.22) 18deg,
      rgba(88,215,255,.14) 32deg,
      rgba(88,215,255,.05) 46deg,
      rgba(88,215,255,.00) 58deg,
      transparent 360deg
    );
  -webkit-mask:
    radial-gradient(circle at center, transparent 0 11%, #000 12% 100%);
  mask:
    radial-gradient(circle at center, transparent 0 11%, #000 12% 100%);
}

/* Thin rotating scan line, starting at the centre and ending at the outer ring. */
.missions-dashboard-v38 .radar-sweep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  border-radius: 999px;
  transform-origin: left center;
  transform: rotate(-12deg);
  animation: radar-v311-line 5.2s linear infinite;
  will-change: transform;
  background:
    linear-gradient(
      90deg,
      rgba(111,255,176,.92),
      rgba(88,215,255,.42) 55%,
      rgba(88,215,255,0)
    );
  box-shadow: 0 0 10px rgba(88,215,255,.35);
}

@keyframes radar-v311-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes radar-v311-line {
  from { transform: rotate(-12deg); }
  to { transform: rotate(348deg); }
}

/* Center object stays clean and above the scan layer. */
.missions-dashboard-v38 .sector-core {
  z-index: 6 !important;
}

.missions-dashboard-v38 .mission-marker,
.missions-dashboard-v38 .travel-ship {
  z-index: 10 !important;
}

@media (max-width: 1500px) {
  .missions-dashboard-v38 .mission-sector-map-v38 {
    --radar-outer-size: clamp(245px, 32vh, 340px);
  }
}

@media (max-width: 1240px) {
  .missions-dashboard-v38 .mission-sector-map-v38 {
    --radar-outer-size: 300px;
  }
}


/* v3.12: Fuel Pump + production settings page */
.settings-dashboard-v312 {
  height: 100%;
  min-height: 0;
}

.settings-v312-layout {
  display: grid;
  gap: 12px;
  height: 100%;
  min-height: 0;
  align-content: start;
}

.settings-hero-v312,
.settings-production-v312,
.settings-notes-v312 {
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8,24,43,.94), rgba(3,12,25,.90));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 42px rgba(0,0,0,.18);
}

.settings-hero-v312 {
  min-height: 160px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  align-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,179,90,.12), transparent 34%),
    radial-gradient(circle at 22% 40%, rgba(88,215,255,.10), transparent 35%),
    linear-gradient(180deg, rgba(8,24,43,.95), rgba(3,12,25,.90));
}

.settings-hero-v312 h1 {
  margin: 4px 0 8px;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
}

.settings-hero-v312 p {
  max-width: 760px;
  margin: 0;
  color: #bdd2e5;
  line-height: 1.45;
}

.settings-hero-stats-v312 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.settings-hero-stats-v312 > div {
  min-height: 74px;
  padding: 11px;
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 13px;
  background: rgba(3,14,27,.70);
}

.settings-hero-stats-v312 span {
  display: block;
  color: #8fb0cc;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.settings-hero-stats-v312 strong {
  display: block;
  margin-top: 7px;
  color: #eef8ff;
  font-size: 22px;
}

.settings-production-v312,
.settings-notes-v312 {
  padding: 14px;
}

.settings-production-grid-v312 {
  display: grid;
  gap: 9px;
  max-height: calc(100vh - 355px);
  overflow: auto;
  padding-right: 4px;
}

.settings-building-card-v312 {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 118px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 15px;
  background:
    radial-gradient(circle at 12% 34%, rgba(88,215,255,.08), transparent 35%),
    rgba(5,18,34,.72);
  overflow: hidden;
}

.settings-building-card-v312 img {
  width: 116px;
  height: 118px;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.08);
}

.settings-building-main-v312 {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 11px 12px 11px 0;
}

.settings-building-head-v312 {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.settings-building-head-v312 strong {
  display: block;
  color: #eef8ff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.settings-building-head-v312 span {
  color: #9fb6cf;
  font-size: 11px;
}

.settings-building-head-v312 em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(111,255,176,.28);
  border-radius: 999px;
  color: #6fffb0;
  background: rgba(111,255,176,.07);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.settings-building-gridline-v312 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr 1fr 1.2fr;
  gap: 7px;
}

.settings-building-gridline-v312 span {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid rgba(88,215,255,.14);
  border-radius: 10px;
  color: #d7e8f8;
  background: rgba(3,14,27,.44);
  font-size: 11px;
  line-height: 1.25;
}

.settings-building-gridline-v312 b {
  color: #8fb0cc;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.settings-note-list-v312 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.settings-note-list-v312 span {
  display: block;
  min-height: 70px;
  padding: 10px 11px;
  border: 1px solid rgba(88,215,255,.16);
  border-radius: 12px;
  color: #a9bed3;
  background: rgba(5,18,34,.60);
  font-size: 12px;
  line-height: 1.35;
}

.settings-note-list-v312 strong {
  color: #eef8ff;
}

.building-list-panel .building.fuelPump {
  border-color: rgba(255,179,90,.36);
}

.building-list-panel .building.fuelPump.selected {
  box-shadow: 0 0 22px rgba(255,179,90,.18);
}

@media (max-width: 1500px) {
  .settings-hero-v312 {
    grid-template-columns: 1fr;
  }

  .settings-building-gridline-v312 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-note-list-v312 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .settings-building-card-v312 {
    grid-template-columns: 1fr;
  }

  .settings-building-card-v312 img {
    width: 100%;
    height: 150px;
  }

  .settings-building-main-v312 {
    padding: 0 12px 12px;
  }

  .settings-building-gridline-v312,
  .settings-hero-stats-v312,
  .settings-note-list-v312 {
    grid-template-columns: 1fr;
  }
}


/* v3.13: Building details resource rows + research-based upgrades */
.building-tabs-v313 button {
  cursor: pointer;
}

.building-detail-tab-v313 {
  display: none;
}

.building-detail-tab-v313.active {
  display: block;
}

.management-row-v313.production div:first-child strong {
  color: #7de8ff;
}

.management-row-v313.energy div:first-child strong {
  color: #ffd36f;
}

.management-row-v313.storage div:first-child strong {
  color: #b7d8ef;
}

.management-row-v313.utility div:first-child strong {
  color: #d7e8f8;
}

.no-usage {
  color: #6e8aa7;
  font-size: 13px;
}

.building-upgrade-info-v313 {
  min-height: 235px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  margin: 12px;
  border: 1px dashed rgba(88,215,255,.22);
  border-radius: 14px;
  background: rgba(5,18,34,.55);
  text-align: center;
}

.building-upgrade-info-v313 strong {
  color: #eef8ff;
  font-size: 18px;
  text-transform: uppercase;
}

.building-upgrade-info-v313 span {
  max-width: 540px;
  color: #9fb6cf;
  line-height: 1.45;
}

.building-upgrade-grid-v313 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}

.building-upgrade-card-v313 {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 355px;
  padding: 14px;
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 80% 10%, rgba(88,215,255,.12), transparent 35%),
    rgba(5,18,34,.72);
}

.building-upgrade-card-v313.research {
  border-color: rgba(125,232,255,.26);
}

.building-upgrade-card-v313.bonus {
  border-color: rgba(111,255,176,.25);
}

.upgrade-card-head-v313 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.upgrade-card-head-v313 strong {
  display: block;
  color: #eef8ff;
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.upgrade-card-head-v313 span {
  display: block;
  margin-top: 4px;
  color: #9fb6cf;
  font-size: 12px;
}

.upgrade-card-head-v313 em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(88,215,255,.26);
  border-radius: 999px;
  color: #9fd9ff;
  background: rgba(88,215,255,.07);
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
}

.building-upgrade-card-v313 p {
  margin: 0;
  color: #b8cce0;
  line-height: 1.4;
  font-size: 13px;
}

.upgrade-stat-grid-v313 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.upgrade-stat-grid-v313 span {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid rgba(88,215,255,.15);
  border-radius: 10px;
  background: rgba(3,14,27,.46);
  color: #d6e8f8;
  font-size: 11px;
  line-height: 1.25;
}

.upgrade-stat-grid-v313 b {
  color: #8fb0cc;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.upgrade-progress-v313 {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255,211,111,.20);
  border-radius: 11px;
  background: rgba(255,211,111,.06);
}

.upgrade-progress-v313 div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #ffd36f;
  font-size: 11px;
}

.upgrade-progress-v313 i {
  display: block;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}

.upgrade-progress-v313 b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #24c7b3, #ffd36f);
}

.building-upgrade-card-v313 button {
  margin-top: auto;
  min-height: 38px;
  border-radius: 10px;
}

@media (max-width: 1450px) {
  .building-upgrade-grid-v313 {
    grid-template-columns: 1fr;
  }

  .building-upgrade-card-v313 {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .upgrade-stat-grid-v313 {
    grid-template-columns: 1fr;
  }
}


/* v3.14: resource availability + ETA for next building upgrade */
.upgrade-cost-summary-v314 {
  gap: 9px !important;
}

.resource-cost-list-v314 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 1px;
}

.resource-cost-chip-v314 {
  min-width: 116px;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 10px;
  background: rgba(3,14,27,.50);
  line-height: 1.15;
}

.resource-cost-chip-v314 b {
  color: #8fb0cc;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.resource-cost-chip-v314 em {
  color: #eaf6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.resource-cost-chip-v314.ok {
  border-color: rgba(111,255,176,.38);
  background: rgba(111,255,176,.075);
}

.resource-cost-chip-v314.ok em {
  color: #6fffb0;
}

.resource-cost-chip-v314.missing {
  border-color: rgba(255,111,145,.48);
  background: rgba(255,111,145,.085);
}

.resource-cost-chip-v314.missing em {
  color: #ff8fa9;
}

.resource-cost-chip-v314.blocked {
  border-color: rgba(255,211,111,.48);
  background: rgba(255,211,111,.085);
}

.resource-cost-chip-v314.blocked em {
  color: #ffd36f;
}

.resource-eta-v314 {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(88,215,255,.16);
  background: rgba(3,14,27,.50);
}

.resource-eta-v314 strong {
  color: #eef8ff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.resource-eta-v314 span {
  color: #a9bed3;
  font-size: 11px;
  line-height: 1.25;
}

.resource-eta-v314.ok {
  border-color: rgba(111,255,176,.34);
  background: rgba(111,255,176,.07);
}

.resource-eta-v314.ok strong {
  color: #6fffb0;
}

.resource-eta-v314.missing {
  border-color: rgba(255,111,145,.42);
  background: rgba(255,111,145,.07);
}

.resource-eta-v314.missing strong {
  color: #ff8fa9;
}

.resource-eta-v314.blocked {
  border-color: rgba(255,211,111,.42);
  background: rgba(255,211,111,.07);
}

.resource-eta-v314.blocked strong {
  color: #ffd36f;
}

@media (max-width: 980px) {
  .resource-cost-chip-v314 {
    min-width: 100%;
  }
}


/* v3.15: Galaxy Map visual dashboard upgrade */
.galaxy-dashboard-v315 {
  height: 100%;
  min-height: 0;
}

.galaxy-v315-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 400px;
  gap: 12px;
}

.galaxy-v315-main,
.galaxy-v315-side {
  min-height: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.galaxy-command-hero-v315,
.galaxy-map-panel-v315,
.galaxy-detail-v315,
.galaxy-object-list-panel-v315,
.galaxy-roadmap-v315 {
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8,24,43,.94), rgba(3,12,25,.90));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 42px rgba(0,0,0,.18);
}

.galaxy-command-hero-v315 {
  min-height: 210px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 172px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 78% 25%, rgba(139,92,255,.18), transparent 32%),
    radial-gradient(circle at 22% 58%, rgba(88,215,255,.13), transparent 36%),
    linear-gradient(90deg, rgba(4,15,29,.98), rgba(6,24,44,.84));
}

.galaxy-command-hero-v315::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,8,18,.04), rgba(2,8,18,.38));
  pointer-events: none;
}

.galaxy-command-hero-v315 > * {
  position: relative;
  z-index: 1;
}

.galaxy-command-art-v315 {
  height: 150px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(3,14,27,.72);
  box-shadow: 0 0 24px rgba(88,215,255,.13);
}

.galaxy-command-art-v315 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.16) contrast(1.08);
}

.galaxy-command-copy-v315 h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.galaxy-command-copy-v315 p {
  max-width: 760px;
  margin: 10px 0 16px;
  color: #bdd2e5;
  line-height: 1.45;
}

.galaxy-hero-actions-v315 {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.galaxy-hero-stats-v315 {
  display: grid;
  gap: 9px;
}

.galaxy-hero-stats-v315 > div {
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 13px;
  background: rgba(3,14,27,.70);
  padding: 10px 12px;
}

.galaxy-hero-stats-v315 span,
.galaxy-stats-strip-v315 span {
  display: block;
  color: #8fb0cc;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.galaxy-hero-stats-v315 strong {
  display: block;
  margin-top: 5px;
  color: #eef8ff;
  font-size: 23px;
  line-height: 1;
}

.galaxy-stats-strip-v315 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.galaxy-stats-strip-v315 > div {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(88,215,255,.20);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 35%, rgba(88,215,255,.10), transparent 36%),
    rgba(5,18,34,.68);
}

.galaxy-stats-strip-v315 strong {
  color: #eef8ff;
  font-size: 22px;
}

.galaxy-map-panel-v315 {
  padding: 12px;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 40%, rgba(139,92,255,.12), transparent 45%),
    rgba(8,23,42,.72);
}

.galaxy-map-v315 {
  min-height: clamp(470px, 50vh, 610px);
  border-radius: 22px;
  border: 1px solid rgba(130,207,255,.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,233,168,.15), transparent 3%),
    radial-gradient(circle at 50% 50%, rgba(88,215,255,.13), transparent 18%),
    radial-gradient(circle at 38% 48%, rgba(139,92,255,.13), transparent 38%),
    radial-gradient(circle at 67% 40%, rgba(39,199,178,.08), transparent 36%),
    linear-gradient(180deg, rgba(2,8,20,.56), rgba(2,8,20,.96));
}

.galaxy-map-v315::before {
  background-size: 76px 76px, 128px 128px;
  opacity: .40;
}

.galaxy-nebula-layer-v315 {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 48% 50%, rgba(139,92,255,.23), transparent 44%),
    radial-gradient(ellipse at 40% 55%, rgba(88,215,255,.16), transparent 30%),
    radial-gradient(ellipse at 63% 44%, rgba(39,199,178,.10), transparent 34%);
  filter: blur(1px);
  animation: galaxy-nebula-drift-v315 22s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

@keyframes galaxy-nebula-drift-v315 {
  from { transform: translate3d(-1%, -.5%, 0) scale(1); opacity: .74; }
  to { transform: translate3d(1%, .7%, 0) scale(1.035); opacity: .96; }
}

.galaxy-dashboard-v315 .galaxy-core {
  width: 104px;
  height: 104px;
  z-index: 3;
  animation: galaxy-core-pulse-v315 3.8s ease-in-out infinite;
}

@keyframes galaxy-core-pulse-v315 {
  0%, 100% { box-shadow: 0 0 55px rgba(139,92,255,.36), 0 0 28px rgba(88,215,255,.32); }
  50% { box-shadow: 0 0 78px rgba(139,92,255,.48), 0 0 44px rgba(88,215,255,.42); }
}

.galaxy-dashboard-v315 .galaxy-arm {
  width: min(74%, 820px);
  height: min(31%, 220px);
  z-index: 2;
}

.galaxy-orbit-v315 {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(130,207,255,.14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.galaxy-orbit-v315.orbit-1 {
  width: min(28%, 330px);
  height: min(35%, 210px);
}

.galaxy-orbit-v315.orbit-2 {
  width: min(50%, 620px);
  height: min(55%, 335px);
}

.galaxy-orbit-v315.orbit-3 {
  width: min(72%, 900px);
  height: min(78%, 475px);
}

.galaxy-dashboard-v315 .galaxy-grid {
  inset: 8%;
  z-index: 2;
}

.galaxy-route-layer-v315 {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.galaxy-route-svg-v315 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.galaxy-route-svg-v315 line {
  stroke: rgba(125,232,255,.65);
  stroke-width: .35;
  stroke-dasharray: 2 1.6;
  filter: drop-shadow(0 0 5px rgba(88,215,255,.55));
}

.galaxy-dashboard-v315 .galaxy-markers {
  z-index: 6;
}

.galaxy-marker-v315 {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(130,207,255,.48);
  background: rgba(3,14,27,.62);
  overflow: visible;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.galaxy-marker-v315:hover,
.galaxy-marker-v315.selected {
  transform: translate(-50%, -50%) scale(1.16);
  border-color: rgba(111,255,176,.95);
  box-shadow: 0 0 32px rgba(111,255,176,.34);
  z-index: 10;
}

.galaxy-marker-v315 img {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(88,215,255,.36));
  z-index: 2;
}

.galaxy-marker-v315 span {
  width: 7px;
  height: 7px;
  right: -2px;
  top: -2px;
  left: auto;
  transform: none;
  z-index: 3;
}

.galaxy-marker-v315 em {
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  padding: 2px 5px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 999px;
  color: #9fb6cf;
  background: rgba(3,14,27,.78);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  opacity: .0;
  transition: opacity .18s ease;
  white-space: nowrap;
}

.galaxy-marker-v315:hover em,
.galaxy-marker-v315.selected em {
  opacity: 1;
}

.galaxy-marker-v315.planet { border-color: rgba(111,255,176,.52); }
.galaxy-marker-v315.asteroid { border-color: rgba(255,211,111,.55); }
.galaxy-marker-v315.debris { border-color: rgba(185,199,216,.50); }
.galaxy-marker-v315.enemy { border-color: rgba(255,111,145,.58); }
.galaxy-marker-v315.anomaly { border-color: rgba(139,92,255,.70); }

.galaxy-legend-v315 {
  justify-content: space-between;
}

.galaxy-v315-side .section-block {
  padding: 12px;
}

.galaxy-details-v315 {
  min-height: 255px;
  border-color: rgba(88,215,255,.20);
}

.galaxy-empty-v315 {
  min-height: 190px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.galaxy-empty-v315 strong {
  color: #eef8ff;
  text-transform: uppercase;
}

.galaxy-empty-v315 span {
  max-width: 260px;
  color: #9fb6cf;
}

.galaxy-detail-hero-v315 {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(88,215,255,.16);
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 45%, rgba(88,215,255,.14), transparent 40%),
    rgba(3,14,27,.54);
}

.galaxy-detail-hero-v315 img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(88,215,255,.34));
}

.galaxy-detail-hero-v315 span {
  color: #8fb0cc;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.galaxy-detail-hero-v315 strong {
  display: block;
  margin-top: 4px;
  color: #eef8ff;
  font-size: 18px;
  line-height: 1.12;
  text-transform: uppercase;
}

.galaxy-detail-stats-v315 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.galaxy-detail-stats-v315 span {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(88,215,255,.14);
  border-radius: 10px;
  background: rgba(3,14,27,.44);
  color: #d6e8f8;
  font-size: 13px;
}

.galaxy-detail-stats-v315 b {
  color: #8fb0cc;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.galaxy-action-v315 {
  border-radius: 12px;
}

.galaxy-object-list-panel-v315 {
  min-height: 260px;
}

.galaxy-object-list-v315 {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding-right: 3px;
}

.galaxy-object-row-v315 {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 62px;
  padding: 8px;
  border: 1px solid rgba(88,215,255,.15);
  border-radius: 13px;
  background: rgba(5,18,34,.60);
  text-align: left;
}

.galaxy-object-row-v315:hover,
.galaxy-object-row-v315.selected {
  border-color: rgba(111,255,176,.45);
  background: rgba(111,255,176,.07);
}

.galaxy-object-row-v315 img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.galaxy-object-row-v315 strong {
  display: block;
  color: #eef8ff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.galaxy-object-row-v315 span {
  display: block;
  margin-top: 3px;
  color: #9fb6cf;
  font-size: 11px;
  line-height: 1.25;
}

.galaxy-object-row-v315 em {
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(88,215,255,.18);
  color: #9fd9ff;
  background: rgba(3,14,27,.60);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.galaxy-roadmap-v315 .roadmap-list {
  max-height: 270px;
  overflow: auto;
  padding-right: 3px;
}

@media (max-width: 1500px) {
  .galaxy-v315-layout {
    grid-template-columns: minmax(620px, 1fr) 350px;
  }

  .galaxy-command-hero-v315 {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .galaxy-hero-stats-v315 {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .galaxy-map-v315 {
    min-height: 500px;
  }
}

@media (max-width: 1240px) {
  .galaxy-v315-layout {
    grid-template-columns: 1fr;
  }

  .galaxy-command-hero-v315 {
    grid-template-columns: 1fr;
  }

  .galaxy-stats-strip-v315 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .galaxy-map-v315 {
    min-height: 430px;
  }
}


/* v3.16: integrated fleet/research filters */
.fleet-inline-tools {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(180px, 1fr) minmax(140px, 190px);
  gap: 10px;
  margin: 0 0 14px;
}
.research-inline-tools {
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px);
}
.fleet-inline-tools input,
.fleet-inline-tools select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(8, 23, 42, .82);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
.fleet-inline-tools input:focus,
.fleet-inline-tools select:focus {
  border-color: rgba(88,215,255,.75);
}
.fleet-stats-later-note {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: -2px 0 6px;
  padding: 5px 8px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 999px;
  color: rgba(184, 219, 255, .74);
  background: rgba(4, 15, 30, .36);
  font-size: 11px;
}
@media (max-width: 820px) {
  .fleet-inline-tools,
  .research-inline-tools {
    grid-template-columns: 1fr;
  }
}

/* v3.18: tijdelijke game-speed multiplier voor testfase */
.side-speed-v318 {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid rgba(63, 190, 255, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15, 42, 72, 0.72), rgba(4, 12, 24, 0.86));
  box-shadow: inset 0 0 24px rgba(0, 170, 255, 0.06);
  display: grid;
  gap: 7px;
}

.side-speed-v318 span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(185, 229, 255, 0.78);
}

.side-speed-v318 select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(73, 199, 255, 0.34);
  border-radius: 11px;
  background: rgba(2, 11, 22, 0.92);
  color: #dff7ff;
  font-weight: 800;
  outline: none;
  padding: 0 9px;
}

.side-speed-v318 em {
  font-style: normal;
  color: #6fd8ff;
  font-size: 0.74rem;
  font-weight: 800;
}


/* v3.19 strength points */
.side-score-v319 {
  margin-top: 8px;
  border-color: rgba(88, 215, 255, .34);
  background:
    radial-gradient(circle at 15% 25%, rgba(88,215,255,.14), transparent 40%),
    rgba(8, 23, 42, .70);
}

.side-score-v319 em {
  display: block;
  margin-top: 3px;
  color: #8fb0cc;
  font-size: 10px;
  font-style: normal;
}

.score-highlight-v319,
.score-mini-v319 {
  border-color: rgba(88, 215, 255, .46) !important;
  background:
    radial-gradient(circle at 18% 25%, rgba(88,215,255,.18), transparent 38%),
    linear-gradient(135deg, rgba(16, 49, 88, .84), rgba(8, 23, 42, .78)) !important;
}

.score-analysis-v319 {
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(6,18,36,.86), rgba(8,23,42,.58)),
    radial-gradient(circle at 12% 20%, rgba(88,215,255,.12), transparent 36%);
}

.score-breakdown-grid-v319 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.score-breakdown-card-v319 {
  min-height: 92px;
  padding: 11px;
  border: 1px solid rgba(88,215,255,.20);
  border-radius: 14px;
  background: rgba(5,18,34,.70);
}

.score-breakdown-card-v319 div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.score-breakdown-card-v319 span {
  color: #8fb0cc;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.score-breakdown-card-v319 strong {
  color: #eef8ff;
  font-size: 23px;
  line-height: 1;
}

.score-breakdown-card-v319 em {
  display: block;
  min-height: 28px;
  margin-top: 8px;
  color: #9fbad4;
  font-size: 11px;
  font-style: normal;
}

.score-breakdown-card-v319 i {
  display: block;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(88,215,255,.10);
}

.score-breakdown-card-v319 i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(88,215,255,.65), rgba(116,93,255,.84));
}

.base-stat-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.fleet-stats-strip,
.research-stats-strip,
.defense-stats-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1320px) {
  .base-stat-grid,
  .fleet-stats-strip,
  .research-stats-strip,
  .defense-stats-strip,
  .score-breakdown-grid-v319 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v3.20: storage protects against plundering instead of capping resources */
.plunder-protection-v320 {
  border-color: rgba(88, 215, 255, .20);
}

.plunder-note-v320 {
  margin-bottom: 10px;
  color: #9fb7cd;
  font-size: 12px;
  line-height: 1.35;
}

.plunder-grid-v320 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.plunder-row-v320 {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(88, 215, 255, .16);
  border-radius: 12px;
  background: rgba(4, 17, 32, .62);
}

.plunder-row-v320.exposed {
  border-color: rgba(255, 179, 90, .38);
  background: linear-gradient(180deg, rgba(57, 32, 9, .34), rgba(4, 17, 32, .62));
}

.plunder-row-v320 strong,
.plunder-row-v320 span,
.plunder-row-v320 em {
  display: block;
}

.plunder-row-v320 strong {
  color: #eef8ff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.plunder-row-v320 span {
  margin-top: 4px;
  color: #a9bed3;
  font-size: 11px;
  line-height: 1.25;
}

.plunder-row-v320 em {
  margin-top: 8px;
  color: #58d7ff;
  font-size: 11px;
  font-style: normal;
}

.plunder-row-v320 i {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.plunder-row-v320 i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(88,215,255,.75), rgba(255,211,111,.78));
}

#buildingsPage .building-list-panel .building.dataSafe {
  border-color: rgba(88, 215, 255, .34);
}

#buildingsPage .building-list-panel .building.dataSafe.selected {
  box-shadow: 0 0 24px rgba(88, 215, 255, .20);
}

@media (max-width: 1500px) {
  .plunder-grid-v320 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v3.21: temporary building balance editor */
.settings-actions-v321 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.settings-building-card-v321 {
  grid-template-columns: 120px minmax(0, 1fr);
}

.settings-editor-v321 {
  display: grid;
  grid-template-columns: repeat(7, minmax(95px, 1fr));
  gap: 7px;
  padding-top: 2px;
}

.settings-editor-v321 label,
.settings-cost-editor-v321 label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-editor-v321 span,
.settings-cost-editor-v321 span {
  color: #8fb0cc;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.settings-editor-v321 input,
.settings-cost-editor-v321 input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 6px 7px;
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 9px;
  color: #eef8ff;
  background: rgba(2,10,22,.72);
  outline: none;
  font-size: 12px;
}

.settings-editor-v321 input:focus,
.settings-cost-editor-v321 input:focus {
  border-color: rgba(88,215,255,.62);
  box-shadow: 0 0 0 2px rgba(88,215,255,.10);
}

.settings-cost-editor-v321 {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(88,215,255,.14);
  border-radius: 12px;
  background: rgba(3,14,27,.36);
}

.settings-cost-editor-v321 > strong {
  color: #d9efff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.settings-cost-editor-v321 > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(86px, 1fr));
  gap: 7px;
}

.settings-row-actions-v321 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.settings-row-actions-v321 .secondary-btn {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 11px;
}

@media (max-width: 1500px) {
  .settings-editor-v321 {
    grid-template-columns: repeat(4, minmax(95px, 1fr));
  }

  .settings-cost-editor-v321 > div {
    grid-template-columns: repeat(3, minmax(86px, 1fr));
  }
}

@media (max-width: 980px) {
  .settings-editor-v321,
  .settings-cost-editor-v321 > div {
    grid-template-columns: 1fr 1fr;
  }
}


/* v3.22: settings editor visibility + no scroll jump while the game ticks */
.settings-production-grid-v312 {
  overflow-anchor: none;
  scroll-behavior: auto;
}

.settings-building-card-v321 {
  min-height: 0 !important;
  overflow: visible !important;
  align-items: start !important;
}

.settings-building-card-v321 > img {
  min-height: 118px;
  border-bottom-left-radius: 14px;
}

.settings-building-card-v321 .settings-building-main-v312 {
  align-content: start;
  overflow: visible !important;
}

.settings-edit-panel-v322 {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(88,215,255,.16);
  border-radius: 13px;
  background: rgba(2,10,22,.38);
}

.settings-edit-panel-v322[open] {
  display: grid;
}

.settings-edit-panel-v322 summary {
  cursor: pointer;
  color: #d9efff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  list-style: none;
}

.settings-edit-panel-v322 summary::-webkit-details-marker {
  display: none;
}

.settings-edit-panel-v322 summary::after {
  content: " open";
  margin-left: 8px;
  color: #58d7ff;
  font-size: 10px;
  font-weight: 800;
}

.settings-edit-panel-v322:not([open]) summary::after {
  content: " openen";
}

.settings-edit-panel-v322 .settings-editor-v321,
.settings-edit-panel-v322 .settings-cost-editor-v321,
.settings-edit-panel-v322 .settings-cost-editor-v321 > div {
  visibility: visible !important;
  opacity: 1 !important;
}

.settings-editor-v321 input,
.settings-cost-editor-v321 input {
  pointer-events: auto !important;
  user-select: auto !important;
}

@media (max-width: 1500px) {
  .settings-building-card-v321 {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .settings-building-card-v321 > img {
    width: 110px;
  }
}

/* v3.23: settings balance editor alignment fix */
.settings-production-grid-v312 {
  grid-auto-rows: auto !important;
  align-items: start !important;
}

.settings-building-card-v323 {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 118px !important;
  overflow: hidden !important;
  align-items: start !important;
}

.settings-building-card-v323 > img {
  width: 112px !important;
  height: 118px !important;
  min-height: 118px !important;
  align-self: start !important;
  border-radius: 0 0 12px 0;
}

.settings-building-card-v323 .settings-building-main-v312 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 9px !important;
  padding: 10px 12px 12px 0 !important;
  overflow: visible !important;
}

.settings-building-card-v323 .settings-building-gridline-v312 {
  position: relative !important;
  z-index: 1 !important;
}

.settings-edit-panel-v323 {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 2px !important;
  padding: 0 !important;
  border: 1px solid rgba(88,215,255,.18) !important;
  border-radius: 12px !important;
  background: rgba(2,10,22,.72) !important;
  overflow: hidden !important;
}

.settings-edit-panel-v323 summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 34px !important;
  padding: 9px 11px !important;
  background: linear-gradient(90deg, rgba(88,215,255,.10), rgba(5,18,34,.34)) !important;
  border-bottom: 0 !important;
}

.settings-edit-panel-v323[open] summary {
  border-bottom: 1px solid rgba(88,215,255,.14) !important;
}

.settings-edit-panel-v323 > .settings-edit-body-v323 {
  display: none !important;
}

.settings-edit-panel-v323[open] > .settings-edit-body-v323 {
  display: grid !important;
  gap: 10px !important;
  padding: 10px !important;
  background: rgba(1,8,18,.62) !important;
}

.settings-edit-body-v323 .settings-editor-v321 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
}

.settings-edit-body-v323 .settings-cost-editor-v321 {
  display: grid !important;
  gap: 8px !important;
  padding: 9px !important;
  background: rgba(3,14,27,.70) !important;
}

.settings-edit-body-v323 .settings-cost-editor-v321 > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important;
  gap: 8px !important;
}

.settings-edit-body-v323 label {
  min-width: 0 !important;
}

.settings-edit-body-v323 input {
  position: relative !important;
  z-index: 3 !important;
  height: 34px !important;
  background: rgba(2,10,22,.94) !important;
}

.settings-row-actions-v321 {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 980px) {
  .settings-building-card-v323 {
    grid-template-columns: 1fr !important;
  }

  .settings-building-card-v323 > img {
    width: 100% !important;
    height: 140px !important;
    border-radius: 0 !important;
  }

  .settings-building-card-v323 .settings-building-main-v312 {
    padding: 0 12px 12px !important;
  }
}

/* v3.24: settings editor single detail panel - prevents overlapping open rows */
.settings-production-grid-v312 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: start !important;
  grid-auto-rows: auto !important;
}

.settings-editor-empty-v324,
.settings-balance-editor-panel-v324 {
  grid-column: 1 / -1 !important;
  position: relative !important;
  z-index: 8 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.settings-editor-empty-v324 {
  padding: 11px 13px;
  border: 1px dashed rgba(88,215,255,.22);
  border-radius: 14px;
  color: #9fb6cf;
  background: rgba(2,10,22,.46);
  font-size: 12px;
}

.settings-editor-empty-v324 strong {
  color: #dff7ff;
}

.settings-balance-editor-panel-v324 {
  display: grid !important;
  gap: 12px !important;
  padding: 13px !important;
  border: 1px solid rgba(88,215,255,.36) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(12,42,70,.94), rgba(2,10,22,.98)),
    rgba(2,10,22,.96) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(88,215,255,.05) inset !important;
  overflow: visible !important;
}

.settings-balance-editor-head-v324 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(88,215,255,.18);
}

.settings-balance-editor-head-v324 span {
  display: block;
  margin-bottom: 4px;
  color: #58d7ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.settings-balance-editor-head-v324 strong {
  display: block;
  color: #f2fbff;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.settings-balance-editor-head-v324 p {
  margin: 5px 0 0;
  color: #9fb6cf;
  font-size: 12px;
  line-height: 1.35;
}

.settings-balance-editor-actions-v324 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.settings-edit-body-v324 {
  display: grid !important;
  gap: 11px !important;
  padding: 0 !important;
  background: transparent !important;
}

.settings-edit-body-v324 .settings-editor-v321 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 9px !important;
  padding: 0 !important;
}

.settings-edit-body-v324 .settings-cost-editor-v321 {
  display: grid !important;
  gap: 9px !important;
  padding: 10px !important;
  border-color: rgba(88,215,255,.22) !important;
  background: rgba(1,8,18,.62) !important;
}

.settings-edit-body-v324 .settings-cost-editor-v321 > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  gap: 9px !important;
}

.settings-edit-body-v324 label {
  min-width: 0 !important;
}

.settings-edit-body-v324 input {
  height: 36px !important;
  position: relative !important;
  z-index: 10 !important;
  background: rgba(2,10,22,.98) !important;
}

.settings-building-card-v324 {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  min-height: 118px !important;
  height: auto !important;
  overflow: hidden !important;
}

.settings-building-card-v324.settings-building-card-active-v324 {
  border-color: rgba(88,215,255,.42) !important;
  box-shadow: 0 0 0 1px rgba(88,215,255,.08) inset, 0 0 22px rgba(88,215,255,.10) !important;
}

.settings-building-card-v324 .settings-building-main-v312 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 9px !important;
  align-content: start !important;
}

.settings-building-card-v324 .settings-row-actions-v324 {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-top: 1px !important;
}

.settings-open-editor-v324.active {
  border-color: rgba(88,215,255,.48) !important;
  color: #dff7ff !important;
  background: rgba(88,215,255,.14) !important;
}

@media (max-width: 980px) {
  .settings-balance-editor-head-v324 {
    display: grid;
  }

  .settings-balance-editor-actions-v324 {
    justify-content: flex-start;
  }

  .settings-building-card-v324 {
    grid-template-columns: 1fr !important;
  }
}


/* v3.25: settings editor is outside the scrollable building list */
.settings-production-v312 {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
}

.settings-balance-editor-host-v325 {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}

.settings-balance-editor-host-v325:empty {
  display: none !important;
}

.settings-balance-editor-host-v325 .settings-editor-empty-v324,
.settings-balance-editor-host-v325 .settings-balance-editor-panel-v324 {
  margin: 0 !important;
}

.settings-balance-editor-host-v325 .settings-balance-editor-panel-v324 {
  max-height: none !important;
  overflow: visible !important;
}

.settings-building-list-v325 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  min-height: 280px !important;
  max-height: calc(100vh - 470px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 5px 6px 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.settings-building-list-v325 .settings-building-card-v324 {
  margin: 0 !important;
  flex: none !important;
}

.settings-building-list-v325 .settings-row-actions-v324 {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-height: 850px) {
  .settings-building-list-v325 {
    max-height: calc(100vh - 430px) !important;
  }

  .settings-balance-editor-head-v324 p {
    display: none !important;
  }

  .settings-edit-body-v324 .settings-editor-v321 {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  }
}

/* v3.26-v3.28: fleet batch build controls */
.fleet-build-controls-v326 {
  display: grid;
  gap: 5px;
  padding: 6px 7px;
  border: 1px solid rgba(88,215,255,.16);
  border-radius: 10px;
  background: rgba(3,14,27,.36);
}

.fleet-amount-row-v326 {
  display: grid;
  grid-template-columns: 50px minmax(58px, 1fr) 38px;
  gap: 5px;
  align-items: center;
}

.fleet-amount-row-v326 label {
  color: #c7d8e8;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.fleet-amount-row-v326 input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 8px;
  background: rgba(1,8,18,.86);
  color: #eef8ff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  outline: none;
}

.fleet-amount-row-v326 input:focus {
  border-color: rgba(88,215,255,.60);
  box-shadow: 0 0 0 2px rgba(88,215,255,.12);
}

.fleet-build-controls-v326 .fleet-amount-row-v326 button[data-ship-build-max] {
  min-width: 0;
  width: 38px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid rgba(88,215,255,.30);
  border-radius: 8px;
  background: rgba(13,37,62,.92);
  color: #dff8ff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.fleet-total-cost-v326 {
  color: #bcd4ea;
  font-size: 11.5px;
  line-height: 1.25;
}

.fleet-total-cost-v326 strong {
  color: #eef8ff;
  font-weight: 600;
}

.fleet-design-footer {
  gap: 6px;
  margin-top: 6px;
}

.fleet-design-footer span {
  font-size: 10.5px;
}

.fleet-design-footer button[data-build-ship] {
  min-width: 72px;
  min-height: 28px;
  height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(88,215,255,.32);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(17,55,88,.95), rgba(8,28,48,.95));
  color: #eef8ff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.fleet-design-footer button[data-build-ship]:not(:disabled):hover,
.fleet-build-controls-v326 .fleet-amount-row-v326 button[data-ship-build-max]:not(:disabled):hover {
  border-color: rgba(111,255,176,.45);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(88,215,255,.10);
}

@media (max-width: 1100px) {
  .fleet-amount-row-v326 {
    grid-template-columns: 46px minmax(58px, 1fr) 36px;
  }
}

/* v3.29: upgradeable Warp Gate and Defense Station */
.fleet-mega-card-v329 {
  border-color: rgba(111, 202, 255, .42);
  background:
    radial-gradient(circle at 86% 9%, rgba(88, 215, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(5, 21, 40, .90), rgba(3, 12, 25, .94));
}

.fleet-mega-card-v329 .ship-tier-badge {
  color: #dbf7ff;
  border-color: rgba(111, 255, 176, .36);
  background: rgba(2, 28, 35, .78);
}

.mega-effect-list-v329 {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(88, 215, 255, .16);
  border-radius: 10px;
  background: rgba(4, 17, 31, .50);
}

.mega-effect-list-v329 span {
  color: #c3d7e9;
  font-size: 11.5px;
  line-height: 1.25;
}

.defense-station-modules-v329 {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255, 211, 111, .18);
  border-radius: 12px;
  background: rgba(20, 18, 9, .24);
}

.defense-station-modules-v329 > strong {
  color: #fff0bd;
  font-size: 11.5px;
  font-weight: 700;
}

.defense-station-module-row-v329 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(88, 215, 255, .12);
  border-radius: 9px;
  background: rgba(3, 14, 27, .42);
}

.defense-station-module-row-v329.locked {
  opacity: .58;
}

.defense-station-module-row-v329 div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.defense-station-module-row-v329 span {
  color: #eef8ff;
  font-size: 11.5px;
  font-weight: 600;
}

.defense-station-module-row-v329 em,
.defense-station-module-row-v329 small {
  color: #9eb5c9;
  font-size: 10.5px;
  font-style: normal;
}

.defense-station-module-row-v329 i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.defense-station-module-row-v329 i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #58d7ff, #6fffb0);
}

.defense-station-module-row-v329 button,
.fleet-design-footer button[data-upgrade-mega-structure] {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(88, 215, 255, .30);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(17,55,88,.95), rgba(8,28,48,.95));
  color: #eef8ff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.defense-station-module-row-v329 button:disabled,
.fleet-design-footer button[data-upgrade-mega-structure]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.fleet-hangar-row-v35.mega {
  border-color: rgba(111, 255, 176, .18);
  background: rgba(5, 31, 38, .42);
}

.fleet-queue-row-v35.mega {
  border-color: rgba(255, 211, 111, .24);
}

/* v3.30: 1920x1080 fit mode for Fleet page
   Goal: use the available width, reduce vertical chrome, and keep upgradeable structures readable. */
@media (min-width: 1500px) and (max-width: 2200px) {
  .fleet-v35-layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .fleet-v35-side {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .fleet-design-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .fleet-mega-card-v329 {
    grid-column: span 2 !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
  }

  .fleet-mega-card-v329 .fleet-ship-visual {
    min-height: 100% !important;
  }

  .fleet-mega-card-v329 .fleet-design-body {
    align-content: start !important;
  }

  .defense-station-modules-v329 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .defense-station-modules-v329 > strong {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 1300px) and (max-height: 950px) {
  .topbar {
    min-height: 58px !important;
    padding: 6px 10px !important;
    gap: 10px !important;
  }

  .brand {
    min-width: 208px !important;
    gap: 9px !important;
  }

  .brand-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
  }

  .brand strong {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  .brand span {
    font-size: 10px !important;
  }

  .resources {
    gap: 7px !important;
  }

  .res {
    min-height: 54px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: 14px 20px 12px !important;
    column-gap: 8px !important;
    padding: 6px 9px 5px 8px !important;
    border-radius: 12px !important;
  }

  .res .resource-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .res span {
    font-size: 9px !important;
  }

  .res b,
  .res strong {
    font-size: 17px !important;
  }

  .res small,
  .res em {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .layout,
  .layout.panel-hidden {
    grid-template-columns: 150px minmax(0, 1fr) 0 !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .sidebar {
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 18px !important;
  }

  .menu-btn,
  .small-btn,
  .primary-btn,
  .secondary-btn {
    padding: 8px 9px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  .side-status,
  .side-speed-v318 {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .side-status strong {
    font-size: 13px !important;
  }

  .content-panel {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  .fleet-v35-main {
    gap: 8px !important;
  }

  .fleet-command-hero {
    min-height: 138px !important;
    grid-template-columns: 180px minmax(0, 1fr) 130px !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  .fleet-command-art {
    height: 106px !important;
    border-radius: 12px !important;
  }

  .fleet-command-copy h1 {
    font-size: 25px !important;
  }

  .fleet-command-copy p {
    max-width: 720px !important;
    margin: 6px 0 9px !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
  }

  .fleet-hero-actions {
    gap: 6px !important;
  }

  .fleet-command-stats {
    gap: 6px !important;
  }

  .fleet-command-stats > div,
  .fleet-mini-stat {
    padding: 7px 9px !important;
    border-radius: 11px !important;
  }

  .fleet-command-stats strong,
  .fleet-mini-stat strong {
    font-size: 18px !important;
    margin-top: 3px !important;
  }

  .fleet-command-stats span,
  .fleet-mini-stat span {
    font-size: 9px !important;
  }

  .fleet-stats-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .fleet-mini-stat {
    min-height: 49px !important;
  }

  .fleet-build-v35,
  .fleet-hangar-v35,
  .fleet-queue-v35 {
    padding: 10px !important;
    border-radius: 15px !important;
  }

  .section-title {
    margin-bottom: 8px !important;
  }

  .section-title h2 {
    font-size: 16px !important;
  }

  .fleet-inline-tools {
    margin: 0 0 9px !important;
    gap: 7px !important;
  }

  .fleet-inline-tools input,
  .fleet-inline-tools select {
    padding: 8px 10px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  .fleet-design-card-v35 {
    min-height: 0 !important;
    grid-template-rows: 102px minmax(0, 1fr) !important;
    border-radius: 13px !important;
  }

  .fleet-design-body {
    gap: 6px !important;
    padding: 9px !important;
  }

  .fleet-design-title h3 {
    font-size: 14px !important;
    line-height: 1.16 !important;
    letter-spacing: .02em !important;
  }

  .fleet-design-title span {
    font-size: 10px !important;
  }

  .fleet-design-body p {
    font-size: 11px !important;
    line-height: 1.28 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .fleet-stats-later-note {
    margin: 0 !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
  }

  .fleet-req-grid {
    gap: 4px !important;
  }

  .fleet-req-grid span {
    padding: 5px 7px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  .fleet-cost-line,
  .fleet-total-cost-v326,
  .fleet-design-footer span {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .fleet-build-controls-v326 {
    gap: 4px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
  }

  .fleet-amount-row-v326 {
    grid-template-columns: 44px minmax(50px, 1fr) 34px !important;
    gap: 4px !important;
  }

  .fleet-amount-row-v326 label {
    font-size: 10.5px !important;
  }

  .fleet-amount-row-v326 input,
  .fleet-build-controls-v326 .fleet-amount-row-v326 button[data-ship-build-max] {
    height: 24px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }

  .fleet-design-footer {
    margin-top: 4px !important;
    gap: 5px !important;
  }

  .fleet-design-footer button[data-build-ship],
  .fleet-design-footer button[data-upgrade-mega-structure] {
    min-width: 64px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }

  .mega-effect-list-v329,
  .defense-station-modules-v329 {
    gap: 4px !important;
    padding: 5px !important;
    border-radius: 9px !important;
  }

  .mega-effect-list-v329 span,
  .defense-station-module-row-v329 span,
  .defense-station-module-row-v329 em,
  .defense-station-module-row-v329 small {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }

  .defense-station-module-row-v329 {
    padding: 5px !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }

  .defense-station-module-row-v329 button {
    min-height: 22px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
  }
}

@media (max-width: 1499px) {
  .fleet-mega-card-v329 {
    grid-column: span 1 !important;
  }
}

/* v3.31: stable Fleet layout rollback/fix for 1920x1080
   Fixes v3.30 overlap where Hangar/Bouwrij could render on top of ship cards. */
#fleetPage.fleet-dashboard-v35,
#fleetPage.game-page.active {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#fleetPage .fleet-v35-layout {
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  gap: 12px !important;
}

#fleetPage .fleet-v35-main,
#fleetPage .fleet-v35-side {
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
  overflow: visible !important;
}

#fleetPage .fleet-build-v35,
#fleetPage .fleet-hangar-v35,
#fleetPage .fleet-queue-v35 {
  position: relative !important;
  z-index: auto !important;
  overflow: visible !important;
}

#fleetPage .fleet-v35-side {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

#fleetPage .fleet-design-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#fleetPage .fleet-design-card-v35 {
  grid-column: span 2 !important;
  min-height: 350px !important;
}

#fleetPage .fleet-mega-card-v329 {
  grid-column: span 3 !important;
  min-height: 250px !important;
  display: grid !important;
  grid-template-columns: 210px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  overflow: hidden !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-ship-visual {
  min-height: 100% !important;
  height: auto !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-design-body {
  min-width: 0 !important;
  align-content: start !important;
}

#fleetPage .defense-station-modules-v329 {
  grid-template-columns: 1fr !important;
}

#fleetPage .fleet-inventory-v35,
#fleetPage .fleet-queue-list-v35 {
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 1600px) {
  #fleetPage .fleet-design-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #fleetPage .fleet-design-card-v35,
  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 2 !important;
  }

  #fleetPage .fleet-mega-card-v329 {
    grid-template-columns: 180px minmax(0, 1fr) !important;
  }
}

@media (max-width: 1180px) {
  #fleetPage .fleet-v35-side {
    grid-template-columns: 1fr !important;
  }

  #fleetPage .fleet-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #fleetPage .fleet-design-card-v35,
  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 2 !important;
  }

  #fleetPage .fleet-mega-card-v329 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #fleetPage .fleet-design-grid {
    grid-template-columns: 1fr !important;
  }

  #fleetPage .fleet-design-card-v35,
  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 1 !important;
  }
}


/* v3.32: Fleet 1080p stable density fix
   Keeps v3.31 stable flow, but uses the available 1920px width better.
   No absolute overlays; Hangar and Bouwrij remain normal sections below the shipyard. */
#fleetPage .fleet-command-hero {
  min-height: 138px !important;
  padding: 18px !important;
}

#fleetPage .fleet-command-art {
  width: 170px !important;
  height: 110px !important;
}

#fleetPage .fleet-command-copy h1 {
  font-size: 30px !important;
  line-height: 1 !important;
}

#fleetPage .fleet-command-copy p {
  font-size: 14px !important;
  margin-bottom: 10px !important;
}

#fleetPage .fleet-command-stats {
  right: 16px !important;
  top: 16px !important;
  gap: 8px !important;
}

#fleetPage .fleet-command-stats > div {
  min-height: 54px !important;
  padding: 9px 11px !important;
}

#fleetPage .fleet-stats-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#fleetPage .fleet-mini-stat {
  min-height: 58px !important;
  padding: 9px 12px !important;
}

#fleetPage .fleet-build-v35 {
  padding: 12px !important;
}

#fleetPage .fleet-inline-tools {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

#fleetPage .fleet-inline-tools input,
#fleetPage .fleet-inline-tools select {
  min-height: 36px !important;
  padding: 8px 12px !important;
}

#fleetPage .fleet-design-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#fleetPage .fleet-design-card-v35 {
  grid-column: span 1 !important;
  min-height: 318px !important;
  grid-template-rows: 108px minmax(0, 1fr) !important;
  border-radius: 14px !important;
}

#fleetPage .fleet-ship-visual {
  min-height: 108px !important;
}

#fleetPage .fleet-design-body {
  gap: 7px !important;
  padding: 10px !important;
}

#fleetPage .fleet-design-title {
  gap: 6px !important;
}

#fleetPage .fleet-design-title h3 {
  font-size: 14px !important;
  line-height: 1.12 !important;
}

#fleetPage .fleet-design-title span,
#fleetPage .fleet-design-body p,
#fleetPage .fleet-cost-line,
#fleetPage .fleet-req-grid span,
#fleetPage .fleet-stats-later-note,
#fleetPage .fleet-total-cost-v326,
#fleetPage .fleet-design-footer span {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

#fleetPage .fleet-stats-later-note,
#fleetPage .fleet-req-grid span {
  padding: 5px 7px !important;
  border-radius: 9px !important;
}

#fleetPage .fleet-build-controls-v326 {
  gap: 5px !important;
  padding: 7px !important;
  border-radius: 10px !important;
}

#fleetPage .fleet-amount-row-v326 {
  grid-template-columns: 48px minmax(0, 1fr) 40px !important;
  gap: 6px !important;
}

#fleetPage .fleet-amount-row-v326 label {
  font-size: 10px !important;
}

#fleetPage .fleet-amount-row-v326 input {
  min-height: 29px !important;
  height: 29px !important;
  font-size: 12px !important;
}

#fleetPage .fleet-build-controls-v326 .fleet-amount-row-v326 button[data-ship-build-max] {
  min-width: 38px !important;
  height: 29px !important;
  min-height: 29px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

#fleetPage .fleet-design-footer button[data-build-ship],
#fleetPage .fleet-design-footer button[data-upgrade-mega-structure] {
  min-height: 30px !important;
  min-width: 70px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

#fleetPage .fleet-mega-card-v329 {
  grid-column: span 2 !important;
  min-height: 155px !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-ship-visual {
  min-height: 155px !important;
  height: auto !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-design-body {
  padding: 10px !important;
  gap: 6px !important;
}

#fleetPage .fleet-hangar-v35,
#fleetPage .fleet-queue-v35 {
  padding: 12px !important;
}

#fleetPage .fleet-v35-side {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#fleetPage .fleet-inventory-v35,
#fleetPage .fleet-queue-list-v35 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#fleetPage .fleet-hangar-row-v35,
#fleetPage .fleet-queue-row-v35 {
  min-height: 50px !important;
  padding: 7px !important;
  gap: 8px !important;
}

#fleetPage .fleet-hangar-row-v35 img,
#fleetPage .fleet-queue-row-v35 img {
  width: 54px !important;
  height: 38px !important;
}

@media (max-width: 1680px) {
  #fleetPage .fleet-design-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 3 !important;
  }
}

@media (max-width: 1320px) {
  #fleetPage .fleet-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #fleetPage .fleet-design-card-v35,
  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 1 !important;
  }

  #fleetPage .fleet-mega-card-v329 {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }

  #fleetPage .fleet-stats-strip,
  #fleetPage .fleet-v35-side,
  #fleetPage .fleet-inventory-v35,
  #fleetPage .fleet-queue-list-v35 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #fleetPage .fleet-design-grid,
  #fleetPage .fleet-stats-strip,
  #fleetPage .fleet-v35-side,
  #fleetPage .fleet-inventory-v35,
  #fleetPage .fleet-queue-list-v35 {
    grid-template-columns: 1fr !important;
  }

  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 1 !important;
    grid-template-columns: 1fr !important;
  }

  #fleetPage .fleet-command-art {
    width: 100% !important;
  }
}

/* v3.33: Fleet structure - build queue on the right, Hangar as a separate page.
   Purpose: keep Shipyard focused on building, and prepare Hangar for manual fleet movements. */
#fleetPage .fleet-v35-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 12px !important;
  align-items: start !important;
}

#fleetPage .fleet-v35-main {
  min-width: 0 !important;
}

#fleetPage .fleet-build-queue-side-v333 {
  display: block !important;
  min-width: 0 !important;
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
}

#fleetPage .fleet-queue-sticky-v333 {
  min-height: 260px !important;
  max-height: calc(100vh - 118px) !important;
  overflow: hidden !important;
}

#fleetPage .fleet-queue-sticky-v333 .section-title {
  margin-bottom: 10px !important;
}

#fleetPage .fleet-queue-list-v35 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  max-height: calc(100vh - 185px) !important;
  overflow: auto !important;
  padding-right: 2px !important;
}

#fleetPage .fleet-queue-row-v35 {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  min-height: 52px !important;
}

#fleetPage .fleet-queue-row-v35 img {
  width: 50px !important;
  height: 36px !important;
}

#fleetPage .fleet-design-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#fleetPage .fleet-mega-card-v329 {
  grid-column: span 3 !important;
  min-height: 160px !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
}

#fleetPage .fleet-command-hero {
  min-height: 126px !important;
}

#fleetPage .fleet-command-art {
  width: 160px !important;
  height: 100px !important;
}

#fleetPage .fleet-stats-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.hangar-dashboard-v333 {
  min-height: 0 !important;
}

.hangar-v333-layout {
  display: grid;
  gap: 12px;
}

.hangar-command-hero-v333 {
  min-height: 150px !important;
  background:
    radial-gradient(circle at 74% 28%, rgba(111,255,176,.12), transparent 34%),
    linear-gradient(90deg, rgba(4,15,29,.98), rgba(6,24,44,.84)),
    url("../assets/buildings/real/shipyard.webp") right center / cover no-repeat !important;
}

.hangar-command-stats-v333 strong {
  font-size: 18px !important;
}

.hangar-actions-v333,
.hangar-inventory-v333 {
  padding: 14px;
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,24,43,.94), rgba(3,12,25,.90));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.hangar-action-grid-v333 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hangar-action-card-v333 {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 116px;
  padding: 12px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 80% 8%, rgba(88,215,255,.10), transparent 34%),
    rgba(5,18,34,.72);
}

.hangar-action-card-v333 strong {
  color: #eef8ff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hangar-action-card-v333 span {
  color: #9fb6cf;
  font-size: 12px;
  line-height: 1.35;
}

.hangar-action-card-v333 button {
  justify-self: start;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(88,215,255,.20);
  border-radius: 9px;
  background: rgba(16,39,67,.55);
  color: #8fb0cc;
}

#hangarPage .fleet-inventory-v35 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

#hangarPage .fleet-hangar-row-v35 {
  min-height: 64px !important;
}

@media (min-width: 1800px) {
  #fleetPage .fleet-v35-layout {
    grid-template-columns: minmax(0, 1fr) 360px !important;
  }

  #fleetPage .fleet-design-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1500px) {
  #fleetPage .fleet-v35-layout {
    grid-template-columns: 1fr !important;
  }

  #fleetPage .fleet-build-queue-side-v333 {
    position: relative !important;
    top: auto !important;
  }

  #fleetPage .fleet-queue-sticky-v333,
  #fleetPage .fleet-queue-list-v35 {
    max-height: none !important;
    overflow: visible !important;
  }

  #fleetPage .fleet-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 2 !important;
  }

  .hangar-action-grid-v333,
  #hangarPage .fleet-inventory-v35 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #fleetPage .fleet-design-grid,
  .hangar-action-grid-v333,
  #hangarPage .fleet-inventory-v35 {
    grid-template-columns: 1fr !important;
  }

  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 1 !important;
    grid-template-columns: 1fr !important;
  }
}


/* v3.34: Fleet right queue + compact megastructure repair for 1920x1080.
   Fixes oversized Defense Station card/image and keeps Bouwrij as a normal right column. */
#fleetPage .fleet-v35-layout {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 10px !important;
  overflow: visible !important;
}

#fleetPage .fleet-build-queue-side-v333 {
  width: 320px !important;
  max-width: 320px !important;
  align-self: start !important;
}

#fleetPage .fleet-queue-sticky-v333 {
  min-height: 220px !important;
  max-height: calc(100vh - 122px) !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

#fleetPage .fleet-queue-list-v35 {
  max-height: calc(100vh - 190px) !important;
}

#fleetPage .empty-fleet-queue {
  min-height: 108px !important;
  padding: 22px 18px !important;
  font-size: 13px !important;
}

#fleetPage .fleet-design-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-items: start !important;
}

#fleetPage .fleet-design-card-v35 {
  min-height: 300px !important;
}

#fleetPage .fleet-mega-card-v329 {
  grid-column: span 3 !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 142px minmax(0, 1fr) !important;
  align-items: start !important;
  overflow: hidden !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-ship-visual {
  align-self: start !important;
  width: 142px !important;
  min-height: 0 !important;
  height: 132px !important;
  max-height: 132px !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-ship-visual img {
  height: 100% !important;
  object-fit: cover !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-design-body {
  min-height: 0 !important;
  padding: 9px 10px !important;
  gap: 5px !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-design-title h3 {
  font-size: 14px !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-design-body p,
#fleetPage .fleet-mega-card-v329 .fleet-stats-later-note,
#fleetPage .fleet-mega-card-v329 .fleet-req-grid span,
#fleetPage .fleet-mega-card-v329 .fleet-cost-line,
#fleetPage .mega-effect-list-v329 span {
  font-size: 10px !important;
  line-height: 1.18 !important;
}

#fleetPage .mega-effect-list-v329 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#fleetPage .mega-effect-list-v329 span {
  padding: 5px 7px !important;
  min-height: 0 !important;
}

#fleetPage .defense-station-modules-v329 {
  margin-top: 4px !important;
  padding: 7px !important;
  border-radius: 10px !important;
  max-height: none !important;
  overflow: visible !important;
}

#fleetPage .defense-station-modules-v329 > strong {
  margin-bottom: 5px !important;
  font-size: 11px !important;
}

#fleetPage .defense-module-grid-v334 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#fleetPage .defense-station-module-row-v329 {
  min-height: 32px !important;
  padding: 5px 6px !important;
  gap: 6px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  border-radius: 8px !important;
}

#fleetPage .defense-station-module-row-v329 div {
  gap: 1px !important;
}

#fleetPage .defense-station-module-row-v329 span,
#fleetPage .defense-station-module-row-v329 em {
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#fleetPage .defense-station-module-row-v329 small {
  display: none !important;
}

#fleetPage .defense-station-module-row-v329 i {
  height: 4px !important;
  margin-top: 2px !important;
}

#fleetPage .defense-station-module-row-v329 button {
  min-height: 22px !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  border-radius: 7px !important;
}

#fleetPage .fleet-mega-card-v329 .fleet-design-footer {
  margin-top: 1px !important;
  padding-top: 4px !important;
}

@media (min-width: 1800px) {
  #fleetPage .fleet-v35-layout {
    grid-template-columns: minmax(0, 1fr) 330px !important;
  }
  #fleetPage .fleet-build-queue-side-v333 {
    width: 330px !important;
    max-width: 330px !important;
  }
  #fleetPage .fleet-design-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 2 !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }
  #fleetPage .fleet-mega-card-v329 .fleet-ship-visual {
    width: 132px !important;
    height: 128px !important;
    max-height: 128px !important;
  }
  #fleetPage .mega-effect-list-v329 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1500px) {
  #fleetPage .fleet-v35-layout {
    grid-template-columns: 1fr !important;
  }
  #fleetPage .fleet-build-queue-side-v333 {
    width: auto !important;
    max-width: none !important;
  }
  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 2 !important;
  }
}

@media (max-width: 900px) {
  #fleetPage .fleet-mega-card-v329 {
    grid-column: span 1 !important;
    grid-template-columns: 1fr !important;
  }
  #fleetPage .fleet-mega-card-v329 .fleet-ship-visual {
    width: 100% !important;
    height: 118px !important;
  }
  #fleetPage .mega-effect-list-v329,
  #fleetPage .defense-module-grid-v334 {
    grid-template-columns: 1fr !important;
  }
}

/* v3.35: Galaxy coordinates, hidden-by-probe system visibility and zoomable 3D map */
.galaxy-coordinate-tools-v335,
.hangar-coordinate-panel-v335 {
  padding: 12px;
  border: 1px solid rgba(88,215,255,.24);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8,24,43,.94), rgba(3,12,25,.90));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.galaxy-coordinate-grid-v335,
.hangar-coordinate-grid-v335 {
  display: grid;
  grid-template-columns: 130px 130px 130px auto minmax(220px, 1fr);
  gap: 9px;
  align-items: end;
}

.hangar-coordinate-grid-v335 {
  grid-template-columns: minmax(220px, 420px) auto minmax(280px, 1fr);
}

.galaxy-coordinate-grid-v335 label,
.hangar-coordinate-grid-v335 label {
  display: grid;
  gap: 5px;
}

.galaxy-coordinate-grid-v335 label span,
.hangar-coordinate-grid-v335 label span {
  color: #8fb0cc;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 800;
}

.galaxy-coordinate-grid-v335 input,
.hangar-coordinate-grid-v335 input {
  min-height: 34px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(88,215,255,.22);
  border-radius: 10px;
  background: rgba(2,11,22,.78);
  color: #eef8ff;
  outline: none;
}

.galaxy-coordinate-grid-v335 input:focus,
.hangar-coordinate-grid-v335 input:focus {
  border-color: rgba(125,232,255,.78);
  box-shadow: 0 0 0 2px rgba(88,215,255,.13);
}

.galaxy-zoom-control-v335 {
  min-width: 220px;
}

.galaxy-zoom-control-v335 input[type="range"] {
  padding: 0;
  min-height: 34px;
  accent-color: #58d7ff;
}

.hangar-probe-status-v335 {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(88,215,255,.14);
  border-radius: 10px;
  background: rgba(3,14,27,.52);
  color: #9fb6cf;
  font-size: 12px;
}

.galaxy-map-v335 {
  position: relative;
  overflow: hidden;
  perspective: 980px;
  transform-style: preserve-3d;
}

.galaxy-3d-plane-v335 {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform: rotateX(52deg) rotateZ(-9deg) scale(var(--galaxyZoom, 1));
  transform-style: preserve-3d;
  transition: transform .18s ease;
}

.galaxy-3d-plane-v335 .galaxy-nebula-layer-v315,
.galaxy-3d-plane-v335 .galaxy-core,
.galaxy-3d-plane-v335 .galaxy-arm,
.galaxy-3d-plane-v335 .galaxy-orbit-v315,
.galaxy-3d-plane-v335 .galaxy-grid,
.galaxy-3d-plane-v335 .galaxy-route-layer-v315,
.galaxy-3d-plane-v335 .galaxy-markers {
  transform-style: preserve-3d;
}

.galaxy-3d-plane-v335 .galaxy-marker-v315 {
  transform: translate(-50%, -50%) translateZ(var(--galaxyZ, 0px));
}

.galaxy-3d-plane-v335 .galaxy-marker-v315:hover,
.galaxy-3d-plane-v335 .galaxy-marker-v315.selected {
  transform: translate(-50%, -50%) translateZ(calc(var(--galaxyZ, 0px) + 18px)) scale(1.14);
}

.galaxy-marker-unknown-v335 {
  border-style: dashed !important;
  border-color: rgba(130,207,255,.26) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(88,215,255,.20), transparent 36%),
    rgba(3,14,27,.38) !important;
  opacity: .54;
  cursor: default;
}

.galaxy-marker-unknown-v335::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(214,232,248,.72);
  font-weight: 900;
  font-size: 18px;
}

.galaxy-marker-unknown-v335 em {
  opacity: .72;
}

.galaxy-scan-lock-v335 {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9;
  pointer-events: none;
}

.galaxy-scan-lock-v335 > div {
  width: min(520px, calc(100vw - 80px));
  padding: 12px 14px;
  border: 1px solid rgba(255,211,111,.28);
  border-radius: 14px;
  background: rgba(3,14,27,.82);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  text-align: center;
}

.galaxy-scan-lock-v335 strong {
  display: block;
  color: #ffd36f;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
}

.galaxy-scan-lock-v335 span {
  display: block;
  margin-top: 5px;
  color: #bdd2e5;
  font-size: 12px;
  line-height: 1.35;
}

.galaxy-scan-required-v335 {
  min-height: 170px;
}

.galaxy-map-v335.unscanned-v335 .galaxy-core,
.galaxy-map-v335.unscanned-v335 .galaxy-arm,
.galaxy-map-v335.unscanned-v335 .galaxy-orbit-v315 {
  opacity: .45;
  filter: grayscale(.4) brightness(.85);
}

@media (max-width: 1500px) {
  .galaxy-coordinate-grid-v335 {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }

  .galaxy-zoom-control-v335,
  .galaxy-coordinate-grid-v335 button {
    grid-column: span 3;
  }

  .hangar-coordinate-grid-v335 {
    grid-template-columns: 1fr auto;
  }

  .hangar-probe-status-v335 {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .galaxy-coordinate-grid-v335,
  .hangar-coordinate-grid-v335 {
    grid-template-columns: 1fr;
  }

  .galaxy-zoom-control-v335,
  .galaxy-coordinate-grid-v335 button,
  .hangar-probe-status-v335 {
    grid-column: auto;
  }
}


/* v3.36: Buildings right-panel restore for compact 1080p mode.
   v3.30 compact height rules forced the third grid column to 0px on every page.
   That made Gebouwdetails invisible on 1920x1080 when a building was selected.
   Keep the compact mode for normal pages, but restore the right panel whenever
   the layout is not panel-hidden, especially for Gebouwen. */
@media (min-width: 1300px) and (max-height: 950px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 150px minmax(0, 1fr) minmax(500px, 620px) !important;
  }

  .layout:not(.panel-hidden) .right-panel,
  #mainLayout:not(.panel-hidden) #rightPanel {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #buildingsPage.active + .right-panel,
  #rightPanel {
    min-height: 0 !important;
  }

  #buildingsPage.active .planet-scene {
    min-width: 0 !important;
  }

  #selectedBuilding {
    min-width: 0 !important;
  }
}

@media (min-width: 1300px) and (max-height: 950px) and (max-width: 1720px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 150px minmax(0, 1fr) minmax(450px, 520px) !important;
  }
}


/* v3.37: wider building detail panel on 1920x1080.
   The v3.36 restore made the panel visible again, but at 1920x1080 it was
   still too narrow for the Resources/Upgrades detail table. Give the right
   panel priority on normal desktop width and let the planet canvas shrink. */
@media (min-width: 1721px) and (max-height: 950px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 150px minmax(0, 1fr) minmax(700px, 760px) !important;
    gap: 10px !important;
  }

  #buildingsPage.active .planet-scene {
    min-width: 0 !important;
    background-position: 54% center !important;
  }

  .layout:not(.panel-hidden) .right-panel,
  #mainLayout:not(.panel-hidden) #rightPanel {
    min-width: 700px !important;
    max-width: 760px !important;
  }

  #selectedBuilding,
  .building-management,
  .management-table,
  .upgrade-grid,
  .building-hero {
    min-width: 0 !important;
  }
}

@media (min-width: 1300px) and (max-width: 1720px) and (max-height: 950px) {
  .layout:not(.panel-hidden) {
    grid-template-columns: 150px minmax(0, 1fr) minmax(560px, 620px) !important;
  }

  .layout:not(.panel-hidden) .right-panel,
  #mainLayout:not(.panel-hidden) #rightPanel {
    min-width: 560px !important;
    max-width: 620px !important;
  }
}

@media (min-width: 1300px) and (max-width: 1600px) and (max-height: 950px) {
  .management-row,
  .management-row.head {
    grid-template-columns: minmax(160px, 1fr) 92px 92px 148px !important;
    column-gap: 10px !important;
  }

  .management-row .usage-bar {
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
  }

  .building-hero {
    grid-template-columns: minmax(0, 1fr) 150px !important;
  }

  .building-hero-stats {
    width: 146px !important;
    max-width: 146px !important;
  }
}

/* v3.38: remove unintended Fuel Pump orange highlight in buildings list.
   Building cards should only use the active green border when selected. */
#buildingsPage .building-list-panel .building.fuelPump {
  border-color: rgba(88, 215, 255, .46) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 18px rgba(88,215,255,.05) !important;
}

#buildingsPage .building-list-panel .building.fuelPump.selected {
  border-color: rgba(111,255,176,.94) !important;
  box-shadow:
    0 0 34px rgba(111,255,176,.38),
    0 14px 32px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(111,255,176,.16) !important;
}

/* v3.39: standardized building card states.
   Default = neutral blue, hover = green, selected = orange, upgrading = purple. */
#buildingsPage .building-list-panel .building {
  border-color: rgba(88, 215, 255, .46) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 18px rgba(88,215,255,.05) !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease !important;
}

#buildingsPage .building-list-panel .building:hover:not(.selected):not(.upgrading) {
  border-color: rgba(111, 255, 176, .96) !important;
  box-shadow:
    0 0 26px rgba(111,255,176,.28),
    0 12px 30px rgba(0,0,0,.44),
    inset 0 0 0 1px rgba(111,255,176,.16) !important;
}

#buildingsPage .building-list-panel .building.selected {
  border-color: rgba(255, 169, 74, .98) !important;
  box-shadow:
    0 0 30px rgba(255,169,74,.34),
    0 14px 34px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,169,74,.18) !important;
}

#buildingsPage .building-list-panel .building.upgrading,
#buildingsPage .building-list-panel .building.selected.upgrading {
  border-color: rgba(194, 126, 255, .98) !important;
  box-shadow:
    0 0 34px rgba(194,126,255,.36),
    0 14px 34px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(194,126,255,.20) !important;
}

#buildingsPage .building-list-panel .building .building-art {
  border-color: rgba(88,215,255,.34) !important;
}

#buildingsPage .building-list-panel .building:hover:not(.selected):not(.upgrading) .building-art {
  border-color: rgba(111,255,176,.65) !important;
}

#buildingsPage .building-list-panel .building.selected .building-art {
  border-color: rgba(255,169,74,.72) !important;
}

#buildingsPage .building-list-panel .building.upgrading .building-art,
#buildingsPage .building-list-panel .building.selected.upgrading .building-art {
  border-color: rgba(194,126,255,.76) !important;
}

.base-building-eta-v339 {
  display: block;
  margin-top: 2px;
  color: #d4b7ff;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
}

.galaxy-sun-v339 {
  position: absolute;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%) translateZ(var(--galaxyZ, 0px));
  z-index: 5;
  pointer-events: none;
}

.galaxy-sun-v339 span {
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fff8ba 0%, #ffd36f 34%, #ff8a2a 68%, rgba(255,122,42,.05) 100%);
  box-shadow: 0 0 26px rgba(255, 188, 74, .85), 0 0 64px rgba(255, 116, 42, .38);
}

.galaxy-sun-v339::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 211, 111, .24);
  animation: sunPulseV339 3.8s ease-in-out infinite;
}

.galaxy-sun-v339 em {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  color: rgba(255,226,162,.86);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.galaxy-marker.homeworld span,
.galaxy-object-row-v315.homeworld em {
  background: rgba(111,255,176,.22);
  color: #6fffb0;
}

.galaxy-marker.homeworld {
  filter: drop-shadow(0 0 16px rgba(111,255,176,.45));
}

@keyframes sunPulseV339 {
  0%, 100% { transform: scale(.92); opacity: .55; }
  50% { transform: scale(1.12); opacity: .92; }
}

/* v3.40: next upgrade resources readable rows + settings two-column editor */
.resource-cost-list-v340 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin: 4px 0 3px !important;
}

.resource-cost-row-v340 {
  display: grid !important;
  grid-template-columns: minmax(90px, .7fr) minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(88,215,255,.18) !important;
  border-radius: 11px !important;
  background: rgba(3,14,27,.54) !important;
  line-height: 1.15 !important;
}

.resource-cost-row-v340 span {
  color: #9fb6cf !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.resource-cost-row-v340 strong {
  justify-self: end !important;
  color: #eaf6ff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.resource-cost-row-v340.ok {
  border-color: rgba(111,255,176,.38) !important;
  background: rgba(42,205,135,.10) !important;
}

.resource-cost-row-v340.ok strong {
  color: #6fffb0 !important;
}

.resource-cost-row-v340.missing {
  border-color: rgba(255,111,145,.52) !important;
  background: rgba(255,111,145,.085) !important;
}

.resource-cost-row-v340.missing strong {
  color: #ff8fa9 !important;
}

.resource-cost-row-v340.blocked {
  border-color: rgba(255,211,111,.52) !important;
  background: rgba(255,211,111,.085) !important;
}

.resource-cost-row-v340.blocked strong {
  color: #ffd36f !important;
}

.settings-balance-two-column-v340 {
  display: grid !important;
  grid-template-columns: minmax(520px, 1.12fr) minmax(420px, .88fr) !important;
  gap: 12px !important;
  min-height: 0 !important;
  align-items: start !important;
}

.settings-balance-list-column-v340,
.settings-balance-edit-column-v340 {
  min-width: 0 !important;
  min-height: 0 !important;
}

.settings-balance-edit-column-v340 {
  position: sticky !important;
  top: 8px !important;
  align-self: start !important;
}

.settings-balance-two-column-v340 .settings-building-list-v325 {
  max-height: calc(100vh - 355px) !important;
  min-height: 430px !important;
  padding-right: 6px !important;
}

.settings-balance-two-column-v340 .settings-balance-editor-host-v325 {
  position: relative !important;
  z-index: 4 !important;
}

.settings-balance-two-column-v340 .settings-balance-editor-panel-v324 {
  min-height: 430px !important;
}

.settings-balance-two-column-v340 .settings-edit-body-v324 {
  grid-template-columns: 1fr !important;
}

.settings-balance-two-column-v340 .settings-edit-body-v324 .settings-editor-v321 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.settings-balance-two-column-v340 .settings-edit-body-v324 .settings-cost-editor-v321 > div {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.settings-balance-two-column-v340 .settings-building-gridline-v312 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.settings-balance-two-column-v340 .settings-building-card-v324 {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  min-height: 104px !important;
}

.settings-balance-two-column-v340 .settings-building-card-v324 > img {
  width: 92px !important;
}

@media (min-width: 1750px) and (max-width: 2050px) and (max-height: 1120px) {
  .settings-balance-two-column-v340 {
    grid-template-columns: minmax(560px, 1fr) minmax(500px, .86fr) !important;
  }
  .settings-balance-two-column-v340 .settings-building-list-v325 {
    max-height: calc(100vh - 330px) !important;
  }
}

@media (max-width: 1320px) {
  .settings-balance-two-column-v340 {
    grid-template-columns: 1fr !important;
  }
  .settings-balance-edit-column-v340 {
    position: static !important;
  }
  .settings-balance-two-column-v340 .settings-building-list-v325 {
    max-height: none !important;
  }
}

@media (max-width: 640px) {
  .resource-cost-row-v340,
  .settings-balance-two-column-v340 .settings-edit-body-v324 .settings-editor-v321,
  .settings-balance-two-column-v340 .settings-edit-body-v324 .settings-cost-editor-v321 > div,
  .settings-balance-two-column-v340 .settings-building-gridline-v312 {
    grid-template-columns: 1fr !important;
  }
  .resource-cost-row-v340 strong {
    justify-self: start !important;
    text-align: left !important;
  }
}

/* v3.41: compact page headers / hero panels across all main pages.
   Goal: recover vertical space on 1920x1080 without changing gameplay. */
:root {
  --page-hero-pad-v341: 12px;
  --page-hero-gap-v341: 12px;
  --page-hero-art-w-v341: 172px;
  --page-hero-art-h-v341: 104px;
  --page-hero-stat-w-v341: 150px;
}

/* Generic old page header, used by Gebouwen and simple pages. */
.page-head {
  margin-bottom: 8px !important;
  gap: 8px !important;
}

.page-head h1 {
  font-size: 21px !important;
  line-height: 1.08 !important;
}

.page-head p {
  margin-top: 3px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.scene-tools,
.compact-actions,
.base-quick-actions,
.fleet-hero-actions,
.hangar-command-hero-v333 .fleet-hero-actions,
.defense-hero-actions,
.missions-hero-actions,
.research-hero-actions,
.galaxy-hero-actions-v315,
.settings-actions-v321 {
  gap: 7px !important;
}

.primary-btn,
.secondary-btn,
.small-btn,
.scene-badge,
.base-quick-actions button,
.fleet-hero-actions button,
.defense-hero-actions button,
.missions-hero-actions button,
.research-hero-actions button,
.galaxy-hero-actions-v315 button,
.settings-actions-v321 button {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.dash-kicker {
  margin-bottom: 4px !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  letter-spacing: .105em !important;
}

/* Shared modern hero panels. */
.base-command-hero,
.fleet-command-hero,
.defense-command-hero,
.missions-command-hero,
.research-command-hero,
.galaxy-command-hero-v315 {
  min-height: 138px !important;
  grid-template-columns: var(--page-hero-art-w-v341) minmax(0, 1fr) var(--page-hero-stat-w-v341) !important;
  gap: var(--page-hero-gap-v341) !important;
  padding: var(--page-hero-pad-v341) !important;
  border-radius: 15px !important;
}

/* Settings header has no image but should use comparable height. */
.settings-hero-v312 {
  min-height: 116px !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px) !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-radius: 15px !important;
}

.base-command-art,
.fleet-command-art,
.defense-command-art,
.missions-command-art,
.research-command-art,
.galaxy-command-art-v315 {
  width: var(--page-hero-art-w-v341) !important;
  height: var(--page-hero-art-h-v341) !important;
  border-radius: 13px !important;
}

.base-command-copy h1,
.fleet-command-copy h1,
.defense-command-copy h1,
.missions-command-copy h1,
.research-command-copy h1,
.galaxy-command-copy-v315 h1,
.settings-hero-v312 h1 {
  margin: 0 0 5px !important;
  font-size: 24px !important;
  line-height: 1.03 !important;
  letter-spacing: .028em !important;
}

.base-command-copy p,
.fleet-command-copy p,
.defense-command-copy p,
.missions-command-copy p,
.research-command-copy p,
.galaxy-command-copy-v315 p,
.settings-hero-v312 p {
  max-width: 760px !important;
  margin: 5px 0 9px !important;
  font-size: 13.5px !important;
  line-height: 1.28 !important;
}

.base-command-status,
.fleet-command-stats,
.defense-command-stats,
.missions-command-stats,
.research-command-stats,
.galaxy-hero-stats-v315,
.hangar-command-stats-v333 {
  gap: 6px !important;
}

.base-command-status > div,
.fleet-command-stats > div,
.defense-command-stats > div,
.missions-command-stats > div,
.research-command-stats > div,
.galaxy-hero-stats-v315 > div,
.settings-hero-stats-v312 > div {
  min-height: 0 !important;
  padding: 7px 9px !important;
  border-radius: 11px !important;
}

.base-command-status span,
.fleet-command-stats span,
.defense-command-stats span,
.missions-command-stats span,
.research-command-stats span,
.galaxy-hero-stats-v315 span,
.settings-hero-stats-v312 span {
  font-size: 9.5px !important;
  line-height: 1.1 !important;
}

.base-command-status strong,
.fleet-command-stats strong,
.defense-command-stats strong,
.missions-command-stats strong,
.research-command-stats strong,
.galaxy-hero-stats-v315 strong,
.settings-hero-stats-v312 strong {
  margin-top: 3px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.settings-hero-stats-v312 {
  gap: 7px !important;
}

/* Compact the stat strips below hero panels as well. */
.fleet-stats-strip,
.defense-stats-strip,
.research-stats-strip,
.galaxy-stats-strip-v315,
.stat-grid {
  gap: 7px !important;
}

.fleet-mini-stat,
.defense-mini-stat,
.research-mini-stat,
.galaxy-stats-strip-v315 > div,
.stat-grid div {
  min-height: 50px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}

.fleet-mini-stat span,
.defense-mini-stat span,
.research-mini-stat span,
.galaxy-stats-strip-v315 span,
.stat-grid span {
  font-size: 9.5px !important;
}

.fleet-mini-stat strong,
.defense-mini-stat strong,
.research-mini-stat strong,
.galaxy-stats-strip-v315 strong,
.stat-grid strong {
  margin-top: 3px !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

/* Section titles should not become page-header sized. */
.section-title h2 {
  font-size: 15.5px !important;
}

.section-title span {
  font-size: 11px !important;
}

/* Keep the Fleet 1080p layout that was accepted in v3.34, but with the shorter hero. */
#fleetPage .fleet-command-hero,
#hangarPage .fleet-command-hero {
  min-height: 130px !important;
}

#fleetPage .fleet-command-art,
#hangarPage .fleet-command-art {
  height: 92px !important;
}

#fleetPage .fleet-command-stats > div,
#hangarPage .fleet-command-stats > div {
  padding: 6px 8px !important;
}

/* Basis page: compact header without harming the right colony panel. */
.base-command-hero {
  grid-template-columns: 190px minmax(0, 1fr) 145px !important;
}

.base-command-art {
  width: 190px !important;
  height: 104px !important;
}

/* Galaxy/Hangar coordinate panels: less vertical overhead below compact heroes. */
.galaxy-coordinate-tools-v335,
.hangar-coordinate-panel-v335,
.hangar-actions-v333 {
  padding: 10px !important;
  border-radius: 14px !important;
}

.galaxy-coordinate-grid-v335 input,
.hangar-coordinate-grid-v335 input {
  min-height: 31px !important;
  padding: 6px 9px !important;
}

.hangar-probe-status-v335 {
  min-height: 31px !important;
  padding: 6px 9px !important;
}

/* 1920x1080 and similar: recover even more vertical space. */
@media (min-width: 1300px) and (max-height: 950px) {
  :root {
    --page-hero-art-w-v341: 156px;
    --page-hero-art-h-v341: 88px;
    --page-hero-stat-w-v341: 138px;
  }

  .content-panel {
    padding: 9px !important;
  }

  .base-dashboard-main,
  .base-dashboard-side,
  .fleet-v35-main,
  .fleet-v35-side,
  .defense-v37-main,
  .defense-v37-side,
  .missions-v38-main,
  .missions-v38-side,
  .research-v36-main,
  .research-v36-side,
  .galaxy-v315-main,
  .galaxy-v315-side,
  .settings-v312-layout,
  .hangar-v333-layout {
    gap: 9px !important;
  }

  .base-command-hero,
  .fleet-command-hero,
  .defense-command-hero,
  .missions-command-hero,
  .research-command-hero,
  .galaxy-command-hero-v315 {
    min-height: 116px !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  .base-command-hero {
    grid-template-columns: 160px minmax(0, 1fr) 134px !important;
  }

  .base-command-art {
    width: 160px !important;
    height: 88px !important;
  }

  .fleet-command-copy h1,
  .defense-command-copy h1,
  .missions-command-copy h1,
  .research-command-copy h1,
  .galaxy-command-copy-v315 h1,
  .base-command-copy h1,
  .settings-hero-v312 h1 {
    font-size: 22px !important;
  }

  .fleet-command-copy p,
  .defense-command-copy p,
  .missions-command-copy p,
  .research-command-copy p,
  .galaxy-command-copy-v315 p,
  .base-command-copy p,
  .settings-hero-v312 p {
    font-size: 12.5px !important;
    line-height: 1.22 !important;
    margin-bottom: 7px !important;
  }

  .settings-hero-v312 {
    min-height: 96px !important;
    padding: 11px 12px !important;
  }

  .settings-hero-stats-v312 > div {
    padding: 6px 8px !important;
  }

  .primary-btn,
  .secondary-btn,
  .small-btn,
  .base-quick-actions button,
  .fleet-hero-actions button,
  .defense-hero-actions button,
  .missions-hero-actions button,
  .research-hero-actions button,
  .galaxy-hero-actions-v315 button,
  .settings-actions-v321 button {
    min-height: 31px !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
  }

  .fleet-mini-stat,
  .defense-mini-stat,
  .research-mini-stat,
  .galaxy-stats-strip-v315 > div,
  .stat-grid div {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }

  .fleet-mini-stat strong,
  .defense-mini-stat strong,
  .research-mini-stat strong,
  .galaxy-stats-strip-v315 strong,
  .stat-grid strong {
    font-size: 16px !important;
  }
}

@media (max-width: 900px) {
  .base-command-hero,
  .fleet-command-hero,
  .defense-command-hero,
  .missions-command-hero,
  .research-command-hero,
  .galaxy-command-hero-v315,
  .settings-hero-v312 {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .base-command-art,
  .fleet-command-art,
  .defense-command-art,
  .missions-command-art,
  .research-command-art,
  .galaxy-command-art-v315 {
    width: 100% !important;
    height: 110px !important;
  }
}

/* v3.42: Fleet page header parity with the compact Mission/Galaxy/Research headers.
   Only changes layout density. Keeps v3.34 accepted Fleet structure: Bouwrij right side,
   Hangar as separate page, compact megastructure cards and no overlays. */
#fleetPage .fleet-command-hero {
  min-height: 112px !important;
  grid-template-columns: 142px minmax(0, 1fr) 132px !important;
  gap: 10px !important;
  padding: 10px 11px !important;
  border-radius: 15px !important;
  align-items: center !important;
}

#fleetPage .fleet-command-art {
  width: 142px !important;
  height: 82px !important;
  border-radius: 12px !important;
}

#fleetPage .fleet-command-copy {
  min-width: 0 !important;
}

#fleetPage .fleet-command-copy .dash-kicker {
  margin-bottom: 3px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

#fleetPage .fleet-command-copy h1 {
  margin: 0 0 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
}

#fleetPage .fleet-command-copy p {
  max-width: 780px !important;
  margin: 0 0 7px !important;
  font-size: 12.5px !important;
  line-height: 1.24 !important;
}

#fleetPage .fleet-hero-actions {
  gap: 6px !important;
}

#fleetPage .fleet-hero-actions button {
  min-height: 29px !important;
  padding: 5px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

#fleetPage .fleet-command-stats {
  gap: 5px !important;
}

#fleetPage .fleet-command-stats > div {
  min-height: 0 !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

#fleetPage .fleet-command-stats span {
  font-size: 9px !important;
  line-height: 1 !important;
}

#fleetPage .fleet-command-stats strong {
  margin-top: 2px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#fleetPage .fleet-stats-strip {
  gap: 6px !important;
  margin-top: 0 !important;
}

#fleetPage .fleet-mini-stat {
  min-height: 42px !important;
  padding: 6px 9px !important;
  border-radius: 11px !important;
}

#fleetPage .fleet-mini-stat span {
  font-size: 9px !important;
  line-height: 1 !important;
}

#fleetPage .fleet-mini-stat strong {
  margin-top: 2px !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#fleetPage .fleet-build-v35 {
  padding-top: 10px !important;
}

#fleetPage .fleet-inline-tools {
  margin-bottom: 9px !important;
}

@media (min-width: 1300px) and (max-height: 950px) {
  #fleetPage .fleet-command-hero {
    min-height: 96px !important;
    grid-template-columns: 124px minmax(0, 1fr) 122px !important;
    padding: 8px 10px !important;
    gap: 9px !important;
  }

  #fleetPage .fleet-command-art {
    width: 124px !important;
    height: 70px !important;
  }

  #fleetPage .fleet-command-copy h1 {
    font-size: 20px !important;
  }

  #fleetPage .fleet-command-copy p {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  #fleetPage .fleet-command-stats > div {
    padding: 5px 7px !important;
  }

  #fleetPage .fleet-command-stats strong {
    font-size: 15px !important;
  }

  #fleetPage .fleet-mini-stat {
    min-height: 38px !important;
    padding: 5px 8px !important;
  }

  #fleetPage .fleet-mini-stat strong {
    font-size: 14px !important;
  }
}

@media (max-width: 900px) {
  #fleetPage .fleet-command-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #fleetPage .fleet-command-art {
    width: 100% !important;
    height: 96px !important;
  }
}

/* v3.43: unified compact command-header stat panels.
   Fixes Fleet/Missions/Galaxy/Research right-side header panels overflowing or clipping
   on 1920x1080. All major command pages now use the same compact header metric model. */
:root {
  --command-hero-art-w-v343: 132px;
  --command-hero-art-h-v343: 78px;
  --command-hero-stats-w-v343: clamp(330px, 24vw, 430px);
  --command-hero-pad-v343: 9px;
  --command-hero-gap-v343: 10px;
}

#fleetPage .fleet-command-hero,
#hangarPage .fleet-command-hero,
#missionsPage .missions-command-hero,
#galaxyPage .galaxy-command-hero-v315,
#researchPage .research-command-hero,
#defensePage .defense-command-hero {
  display: grid !important;
  grid-template-columns: var(--command-hero-art-w-v343) minmax(0, 1fr) var(--command-hero-stats-w-v343) !important;
  align-items: center !important;
  gap: var(--command-hero-gap-v343) !important;
  min-height: 104px !important;
  padding: var(--command-hero-pad-v343) 11px !important;
  overflow: hidden !important;
}

#fleetPage .fleet-command-art,
#hangarPage .fleet-command-art,
#missionsPage .missions-command-art,
#galaxyPage .galaxy-command-art-v315,
#researchPage .research-command-art,
#defensePage .defense-command-art {
  width: var(--command-hero-art-w-v343) !important;
  height: var(--command-hero-art-h-v343) !important;
  min-width: var(--command-hero-art-w-v343) !important;
  border-radius: 12px !important;
}

#fleetPage .fleet-command-copy,
#hangarPage .fleet-command-copy,
#missionsPage .missions-command-copy,
#galaxyPage .galaxy-command-copy-v315,
#researchPage .research-command-copy,
#defensePage .defense-command-copy {
  min-width: 0 !important;
  align-self: center !important;
}

#fleetPage .fleet-command-copy h1,
#hangarPage .fleet-command-copy h1,
#missionsPage .missions-command-copy h1,
#galaxyPage .galaxy-command-copy-v315 h1,
#researchPage .research-command-copy h1,
#defensePage .defense-command-copy h1 {
  margin: 0 0 3px !important;
  font-size: 20px !important;
  line-height: 1.02 !important;
}

#fleetPage .fleet-command-copy p,
#hangarPage .fleet-command-copy p,
#missionsPage .missions-command-copy p,
#galaxyPage .galaxy-command-copy-v315 p,
#researchPage .research-command-copy p,
#defensePage .defense-command-copy p {
  max-width: 920px !important;
  margin: 0 0 6px !important;
  font-size: 12px !important;
  line-height: 1.22 !important;
}

#fleetPage .fleet-hero-actions,
#hangarPage .fleet-hero-actions,
#missionsPage .missions-hero-actions,
#galaxyPage .galaxy-hero-actions-v315,
#researchPage .research-hero-actions,
#defensePage .defense-hero-actions {
  gap: 6px !important;
  flex-wrap: wrap !important;
}

#fleetPage .fleet-hero-actions button,
#hangarPage .fleet-hero-actions button,
#missionsPage .missions-hero-actions button,
#galaxyPage .galaxy-hero-actions-v315 button,
#researchPage .research-hero-actions button,
#defensePage .defense-hero-actions button {
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

#fleetPage .fleet-command-stats,
#hangarPage .fleet-command-stats,
#missionsPage .missions-command-stats,
#galaxyPage .galaxy-hero-stats-v315,
#researchPage .research-command-stats,
#defensePage .defense-command-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-self: center !important;
  width: 100% !important;
  max-width: none !important;
  gap: 6px !important;
}

#fleetPage .fleet-command-stats > div,
#hangarPage .fleet-command-stats > div,
#missionsPage .missions-command-stats > div,
#galaxyPage .galaxy-hero-stats-v315 > div,
#researchPage .research-command-stats > div,
#defensePage .defense-command-stats > div {
  min-height: 46px !important;
  padding: 7px 8px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}

#fleetPage .fleet-command-stats span,
#hangarPage .fleet-command-stats span,
#missionsPage .missions-command-stats span,
#galaxyPage .galaxy-hero-stats-v315 span,
#researchPage .research-command-stats span,
#defensePage .defense-command-stats span {
  display: block !important;
  font-size: 8.8px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#fleetPage .fleet-command-stats strong,
#hangarPage .fleet-command-stats strong,
#missionsPage .missions-command-stats strong,
#galaxyPage .galaxy-hero-stats-v315 strong,
#researchPage .research-command-stats strong,
#defensePage .defense-command-stats strong {
  display: block !important;
  margin-top: 3px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* One shared compact strip style directly below command headers. */
#fleetPage .fleet-stats-strip,
#missionsPage .mission-sector-board-v38,
#galaxyPage .galaxy-stats-strip-v315,
#researchPage .research-stats-strip,
#defensePage .defense-stats-strip {
  margin-top: 8px !important;
}

#fleetPage .fleet-mini-stat,
#galaxyPage .galaxy-stats-strip-v315 > div,
#researchPage .research-mini-stat,
#defensePage .defense-mini-stat {
  min-height: 40px !important;
  padding: 6px 8px !important;
}

/* 1920x1080 specific guardrail: never stack 3 right-side header stats vertically. */
@media (min-width: 1300px) and (max-height: 950px) {
  :root {
    --command-hero-art-w-v343: 126px;
    --command-hero-art-h-v343: 72px;
    --command-hero-stats-w-v343: clamp(315px, 23vw, 410px);
  }

  #fleetPage .fleet-command-hero,
  #hangarPage .fleet-command-hero,
  #missionsPage .missions-command-hero,
  #galaxyPage .galaxy-command-hero-v315,
  #researchPage .research-command-hero,
  #defensePage .defense-command-hero {
    min-height: 94px !important;
    padding: 8px 10px !important;
  }

  #fleetPage .fleet-command-stats > div,
  #hangarPage .fleet-command-stats > div,
  #missionsPage .missions-command-stats > div,
  #galaxyPage .galaxy-hero-stats-v315 > div,
  #researchPage .research-command-stats > div,
  #defensePage .defense-command-stats > div {
    min-height: 42px !important;
    padding: 6px 7px !important;
  }

  #fleetPage .fleet-command-stats strong,
  #hangarPage .fleet-command-stats strong,
  #missionsPage .missions-command-stats strong,
  #galaxyPage .galaxy-hero-stats-v315 strong,
  #researchPage .research-command-stats strong,
  #defensePage .defense-command-stats strong {
    font-size: 15px !important;
  }
}

@media (max-width: 1280px) {
  #fleetPage .fleet-command-hero,
  #hangarPage .fleet-command-hero,
  #missionsPage .missions-command-hero,
  #galaxyPage .galaxy-command-hero-v315,
  #researchPage .research-command-hero,
  #defensePage .defense-command-hero {
    grid-template-columns: var(--command-hero-art-w-v343) minmax(0, 1fr) !important;
  }

  #fleetPage .fleet-command-stats,
  #hangarPage .fleet-command-stats,
  #missionsPage .missions-command-stats,
  #galaxyPage .galaxy-hero-stats-v315,
  #researchPage .research-command-stats,
  #defensePage .defense-command-stats {
    grid-column: 1 / -1 !important;
  }
}

/* v3.45 - AI factions */
.factions-dashboard-v345 {
  display: none;
  gap: 12px;
}
.factions-dashboard-v345.active { display: block; }
.faction-command-hero-v345 {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) clamp(315px, 23vw, 410px);
  gap: 10px;
  align-items: center;
  min-height: 112px;
  padding: 10px 12px;
  border: 1px solid rgba(86, 202, 255, 0.28);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(8, 27, 44, 0.94), rgba(7, 17, 31, 0.94));
  box-shadow: inset 0 0 32px rgba(36, 176, 255, 0.08);
  overflow: hidden;
  margin-bottom: 12px;
}
.faction-command-art-v345 {
  width: 132px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(86, 202, 255, 0.28);
  border-radius: 14px;
  background: radial-gradient(circle at center, rgba(93, 255, 189, 0.18), rgba(9, 19, 33, 0.9));
}
.faction-orb-v345 {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(101, 225, 255, 0.45);
  box-shadow: 0 0 26px rgba(84, 205, 255, 0.28);
}
.faction-orb-v345 i,
.faction-orb-v345 b,
.faction-orb-v345 em {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  content: "";
  display: block;
}
.faction-orb-v345 i { left: 12px; top: 18px; background: #5cffaa; box-shadow: 0 0 18px #5cffaa; }
.faction-orb-v345 b { right: 12px; top: 18px; background: #ffd45c; box-shadow: 0 0 18px #ffd45c; }
.faction-orb-v345 em { left: 29px; bottom: 12px; background: #9a75ff; box-shadow: 0 0 18px #9a75ff; }
.faction-command-copy-v345 h1 {
  margin: 0 0 4px;
  font-size: clamp(1.55rem, 1.75vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
}
.faction-command-copy-v345 p {
  margin: 0 0 8px;
  color: rgba(218, 236, 255, 0.78);
  max-width: 920px;
  line-height: 1.35;
}
.faction-hero-actions-v345 { display: flex; gap: 8px; flex-wrap: wrap; }
.faction-hero-stats-v345 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.faction-hero-stats-v345 > div {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(92, 199, 255, 0.25);
  border-radius: 13px;
  background: rgba(4, 15, 28, 0.82);
}
.faction-hero-stats-v345 span,
.faction-card-head-v345 span,
.faction-meta-v345 span {
  display: block;
  color: rgba(173, 203, 229, 0.82);
}
.faction-hero-stats-v345 span,
.faction-card-head-v345 span {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.faction-hero-stats-v345 strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
}
.faction-overview-panel-v345,
.faction-attacks-panel-v345 { margin-bottom: 12px; }
.faction-grid-v345 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.faction-card-v345 {
  border: 1px solid rgba(92, 199, 255, 0.22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(5, 16, 30, 0.94), rgba(8, 29, 49, 0.82));
  padding: 13px;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.faction-card-v345.blue { box-shadow: inset 0 0 34px rgba(62, 164, 255, 0.08); }
.faction-card-v345.gold { box-shadow: inset 0 0 34px rgba(255, 188, 66, 0.08); }
.faction-card-v345.green { box-shadow: inset 0 0 34px rgba(80, 255, 168, 0.08); }
.faction-card-v345.purple { box-shadow: inset 0 0 34px rgba(158, 108, 255, 0.1); }
.faction-card-v345.danger,
.faction-card-v345.hostile { border-color: rgba(255, 104, 132, 0.58); }
.faction-card-v345.warn { border-color: rgba(255, 197, 88, 0.42); }
.faction-card-v345.good,
.faction-card-v345.ally { border-color: rgba(90, 255, 176, 0.42); }
.faction-card-head-v345 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.faction-card-head-v345 h3 {
  margin: 3px 0 0;
  font-size: 1.02rem;
  text-transform: uppercase;
}
.faction-card-head-v345 strong {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(99, 255, 184, 0.45);
  background: rgba(33, 116, 93, 0.22);
  color: #72ffc1;
  font-size: 1.25rem;
}
.faction-card-v345 p {
  margin: 0;
  color: rgba(203, 224, 244, 0.76);
  line-height: 1.35;
  min-height: 58px;
}
.faction-repbar-v345 {
  height: 9px;
  border-radius: 999px;
  background: rgba(6, 12, 23, 0.92);
  border: 1px solid rgba(92, 199, 255, 0.18);
  overflow: hidden;
}
.faction-repbar-v345 i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff5c82, #ffd45c, #64ffb0);
}
.faction-meta-v345 {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
}
.faction-meta-v345 b { color: #eaf6ff; }

.faction-specialty-bonus-v347 {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid rgba(99, 255, 184, 0.20);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(31, 109, 86, 0.16), rgba(7, 21, 39, 0.72));
  color: rgba(211, 238, 255, 0.86);
  font-size: 0.78rem;
}
.faction-specialty-bonus-v347 strong {
  color: #70ffc0;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.faction-specialty-bonus-v347 span {
  display: block;
  color: rgba(210, 231, 248, 0.82);
}

.faction-mission-types-v345 {
  margin-top: auto;
  padding: 7px 9px;
  border: 1px solid rgba(92, 199, 255, 0.16);
  border-radius: 10px;
  color: #9fdcff;
  background: rgba(4, 14, 27, 0.68);
  font-size: 0.8rem;
}
.faction-actions-v345 {
  display: flex;
  gap: 8px;
}
.faction-actions-v345 button {
  border: 1px solid rgba(92, 199, 255, 0.35);
  border-radius: 10px;
  background: rgba(19, 59, 94, 0.78);
  color: #eaf6ff;
  padding: 7px 10px;
  cursor: pointer;
}
.faction-actions-v345 button:hover { border-color: rgba(93, 255, 176, 0.75); }
.faction-rules-v345 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.faction-rules-v345 span {
  border: 1px solid rgba(92, 199, 255, 0.16);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(4, 14, 27, 0.72);
  color: rgba(209, 229, 247, 0.76);
  font-size: 0.82rem;
}
.faction-attack-list-v345 { display: grid; gap: 8px; }
.faction-attack-row-v345 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 115, 150, 0.34);
  border-radius: 13px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(60, 13, 31, 0.55), rgba(5, 18, 33, 0.8));
}
.faction-attack-row-v345 strong { display: block; color: #ffd0dc; text-transform: uppercase; }
.faction-attack-row-v345 span { display: block; color: rgba(219, 235, 248, 0.76); font-size: 0.82rem; margin-top: 3px; }
.faction-attack-progress-v345 {
  height: 10px;
  border-radius: 999px;
  background: rgba(5, 12, 24, 0.9);
  border: 1px solid rgba(255, 115, 150, 0.25);
  overflow: hidden;
}
.faction-attack-progress-v345 i { display: block; height: 100%; background: linear-gradient(90deg, #ff5c82, #ffb45c); }
.mission-faction-impact-v345 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.mission-faction-impact-v345 span {
  border: 1px solid rgba(92, 199, 255, 0.18);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(2, 14, 27, 0.72);
  color: rgba(205, 229, 247, 0.82);
  font-size: 0.76rem;
}
@media (max-width: 1500px) {
  .faction-command-hero-v345 { grid-template-columns: 120px minmax(0, 1fr); }
  .faction-hero-stats-v345 { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faction-grid-v345 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faction-rules-v345 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .faction-command-hero-v345,
  .faction-grid-v345,
  .faction-rules-v345,
  .faction-attack-row-v345 { grid-template-columns: 1fr; }
}


/* v3.46: final building card state override.
   Fuel Pump had a more specific older selected rule, so selected must explicitly remain orange. */
#buildingsPage .building-list-panel .building.selected,
#buildingsPage .building-list-panel .building.fuelPump.selected {
  border-color: rgba(255, 169, 74, .98) !important;
  box-shadow:
    0 0 30px rgba(255,169,74,.34),
    0 14px 34px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,169,74,.18) !important;
}

#buildingsPage .building-list-panel .building.selected .building-art,
#buildingsPage .building-list-panel .building.fuelPump.selected .building-art {
  border-color: rgba(255,169,74,.72) !important;
}

#buildingsPage .building-list-panel .building.upgrading,
#buildingsPage .building-list-panel .building.selected.upgrading,
#buildingsPage .building-list-panel .building.fuelPump.selected.upgrading {
  border-color: rgba(194, 126, 255, .98) !important;
  box-shadow:
    0 0 34px rgba(194,126,255,.36),
    0 14px 34px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(194,126,255,.20) !important;
}


/* v3.49 - actieve scheepsstats in vlootkaarten */
#fleetPage .fleet-statline-v349 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 6px;
}

#fleetPage .fleet-statline-v349 span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid rgba(88,215,255,.18);
  border-radius: 8px;
  background: rgba(4, 15, 30, .36);
  color: rgba(184, 219, 255, .75);
  font-size: 9.5px;
  line-height: 1.15;
}

#fleetPage .fleet-statline-v349 b {
  color: rgba(235, 248, 255, .94);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  #fleetPage .fleet-statline-v349 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v3.51: Galaxy 2D map, one-line coordinate tools and asteroid mining */
.galaxy-coordinate-tools-v335 {
  padding: 9px 10px !important;
}

.galaxy-coordinate-tools-v335 .section-title {
  margin-bottom: 7px !important;
}

.galaxy-coordinate-tools-v335 .section-title h2 {
  font-size: 16px !important;
}

.galaxy-coordinate-grid-v335 {
  grid-template-columns: minmax(100px, 150px) minmax(100px, 150px) minmax(100px, 150px) max-content !important;
  gap: 8px !important;
  align-items: end !important;
}

.galaxy-coordinate-grid-v335 label {
  gap: 4px !important;
}

.galaxy-coordinate-grid-v335 input {
  min-height: 32px !important;
  padding: 6px 9px !important;
}

.galaxy-coordinate-grid-v335 button {
  min-height: 32px !important;
  padding: 7px 13px !important;
  align-self: end !important;
  white-space: nowrap !important;
}

.galaxy-zoom-control-v335 {
  display: none !important;
}

.galaxy-map-v335 {
  perspective: none !important;
  transform-style: flat !important;
}

.galaxy-3d-plane-v335 {
  transform: none !important;
  transform-style: flat !important;
  transition: none !important;
}

.galaxy-3d-plane-v335 .galaxy-nebula-layer-v315,
.galaxy-3d-plane-v335 .galaxy-core,
.galaxy-3d-plane-v335 .galaxy-arm,
.galaxy-3d-plane-v335 .galaxy-orbit-v315,
.galaxy-3d-plane-v335 .galaxy-grid,
.galaxy-3d-plane-v335 .galaxy-route-layer-v315,
.galaxy-3d-plane-v335 .galaxy-markers {
  transform-style: flat !important;
}

.galaxy-3d-plane-v335 .galaxy-marker-v315 {
  transform: translate(-50%, -50%) !important;
}

.galaxy-3d-plane-v335 .galaxy-marker-v315:hover,
.galaxy-3d-plane-v335 .galaxy-marker-v315.selected {
  transform: translate(-50%, -50%) scale(1.14) !important;
}

.asteroid-mining-info-v351 {
  display: block;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 211, 111, .22);
  border-radius: 10px;
  background: rgba(255, 211, 111, .06);
  color: #d9c98f !important;
  font-size: 12px;
  line-height: 1.35;
}

.galaxy-action-v315 button.primary-btn[data-mine-asteroid] {
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .galaxy-coordinate-grid-v335 {
    grid-template-columns: repeat(3, minmax(90px, 1fr)) !important;
  }
  .galaxy-coordinate-grid-v335 button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* v3.52 - Asteroid mining opdrachten */
.asteroid-mining-info-v352,
.asteroid-mining-active-v352 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.asteroid-mining-info-v352 span,
.asteroid-mining-active-v352 span {
  border: 1px solid rgba(88, 215, 255, .20);
  background: rgba(5, 18, 31, .58);
  border-radius: 10px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: .84rem;
}

.asteroid-mining-info-v352 b,
.asteroid-mining-active-v352 b {
  display: block;
  color: var(--text);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}

@media (max-width: 1100px) {
  .asteroid-mining-info-v352,
  .asteroid-mining-active-v352 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}