:root {
  --bg: #060814;
  --bg-2: #0b1122;
  --panel: #111a2e;
  --panel-2: #16223d;
  --panel-3: #203157;
  --line: #2d4c73;
  --line-2: #40689a;
  --text: #eef8ff;
  --muted: #9eb8d8;
  --cyan: #70f0ff;
  --blue: #67aaff;
  --green: #8cffb2;
  --amber: #ffd37a;
  --violet: #c6a7ff;
  --red: #ff8ea2;
  --black: #04060c;
  --shadow: 0 10px 0 rgba(0,0,0,.24), 0 20px 30px rgba(0,0,0,.28);
  --cut: polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px));
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font-family: "Courier New", Courier, monospace;
  background:
    radial-gradient(circle at 12% 12%, rgba(91,145,255,.16), transparent 20%),
    radial-gradient(circle at 88% 10%, rgba(198,167,255,.12), transparent 18%),
    radial-gradient(circle at 50% 110%, rgba(112,240,255,.12), transparent 26%),
    linear-gradient(180deg, #050814 0%, #081021 45%, #060915 100%);
  image-rendering: pixelated;
  overflow-x: hidden;
}
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.space-haze,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.space-haze {
  background-image:
    radial-gradient(circle at 8% 15%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 32% 74%, rgba(165,228,255,.75) 0 1px, transparent 1.8px),
    radial-gradient(circle at 77% 21%, rgba(255,243,196,.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 89% 81%, rgba(255,255,255,.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 17% 88%, rgba(255,255,255,.72) 0 1px, transparent 1.8px);
  background-size: 180px 170px, 250px 220px, 230px 210px, 340px 260px, 300px 320px;
  opacity: .42;
}
.scanlines {
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  opacity: .16;
}

.game-frame {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 310px;
  grid-template-rows: 90px minmax(0, 1fr) 34px;
  position: relative;
  z-index: 1;
}

.bridge-header {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(14,22,42,.96), rgba(10,17,31,.94));
  border-bottom: 2px solid var(--line);
  box-shadow: 0 8px 0 rgba(0,0,0,.25);
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand-lockup { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-emblem {
  width: 58px;
  height: 58px;
  clip-path: var(--cut);
  border: 2px solid var(--line-2);
  background: linear-gradient(180deg, #1a2b4e, #0e1730);
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
}
.emblem-core,
.emblem-ring { position: absolute; inset: 0; margin: auto; }
.emblem-core {
  width: 12px;
  height: 12px;
  background: var(--amber);
  box-shadow: 0 0 0 3px #1a2940, 0 0 12px rgba(255,211,122,.45);
}
.emblem-ring {
  width: 30px;
  height: 30px;
  border: 2px solid var(--cyan);
  transform: rotate(45deg);
}
.micro-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin: 0;
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  line-height: 1;
  letter-spacing: .12em;
}
h1 b { color: var(--amber); }
h2 { margin-bottom: 0; font-size: clamp(1.05rem, 2vw, 1.45rem); }
h3 { margin-bottom: 6px; font-size: .92rem; }

.bridge-status-box,
.time-cluster,
.holo-panel,
.bridge-card,
.resource-rack,
.toast,
.event-terminal {
  clip-path: var(--cut);
}
.bridge-status-box,
.time-cluster {
  border: 2px solid var(--line);
  background: linear-gradient(180deg, #172645, #0e1830);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.03);
}
.bridge-status-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  padding: 11px 14px;
}
.status-lamp {
  width: 12px;
  height: 12px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(140,255,178,.65);
  animation: blink 1.4s steps(2) infinite;
}
.bridge-status-box small,
.time-readout small { display: block; color: var(--muted); font-size: .62rem; }
.bridge-status-box strong { color: var(--green); font-size: .84rem; }
.time-cluster { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.time-readout { min-width: 100px; text-align: right; }
.time-readout strong { color: var(--amber); letter-spacing: .08em; }
.time-buttons { display: flex; gap: 8px; }

.command-key {
  min-height: 38px;
  padding: 9px 12px;
  border: 2px solid var(--line);
  clip-path: var(--cut);
  background: linear-gradient(180deg, #27406a, #17284a);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .67rem;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(0,0,0,.22);
}
.command-key:hover { border-color: var(--cyan); filter: brightness(1.08); }
.command-key:active { transform: translateY(1px); box-shadow: 0 3px 0 rgba(0,0,0,.22); }
.command-key.hot { background: linear-gradient(180deg, #6a4f21, #3b2a11); border-color: #9a7640; color: #fff3d5; }
.command-key.ghost { background: linear-gradient(180deg, #22365a, #13213e); }
.command-key.danger { background: linear-gradient(180deg, #6a2639, #3b1520); border-color: #8e4054; }
.command-key:disabled { opacity: .45; filter: grayscale(.2); cursor: not-allowed; }

.command-rail {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 90px;
  height: calc(100vh - 124px);
  padding: 12px 10px;
  background: linear-gradient(180deg, rgba(11,18,34,.94), rgba(9,15,28,.94));
  border-right: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rail-cap {
  color: var(--muted);
  text-align: center;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.rail-spacer { flex: 1; }
.rail-button {
  min-height: 70px;
  border: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--muted);
  position: relative;
}
.rail-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 34px;
  height: 3px;
  transform: translateX(-50%);
  background: transparent;
}
.rail-button:hover { background: rgba(255,255,255,.03); color: var(--text); border-color: rgba(255,255,255,.06); }
.rail-button.active { background: linear-gradient(180deg, #1f3154, #162440); color: #fff; border-color: var(--line); }
.rail-button.active::before { background: var(--cyan); }
.rail-button.utility { min-height: 52px; }
.rail-button.danger { color: #ffb0bc; }
.rail-glyph { font-size: 1.3rem; line-height: 1; }
.rail-button em { font-style: normal; font-size: .56rem; text-transform: uppercase; letter-spacing: .08em; }

.command-deck {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 16px;
  overflow: auto;
}
.deck-view { display: none; }
.deck-view.active { display: block; animation: fadeIn .18s ease; }

.resource-bus {
  grid-column: 3;
  grid-row: 2;
  position: sticky;
  top: 90px;
  height: calc(100vh - 124px);
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(10,17,31,.96), rgba(8,14,26,.96));
  border-left: 2px solid var(--line);
}
.holo-panel,
.bridge-card,
.resource-rack {
  position: relative;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255,255,255,.03);
}
.holo-panel { padding: 16px; }
.holo-panel::after,
.bridge-card::after,
.resource-rack::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 12px;
  width: 34px;
  height: 3px;
  background: rgba(112,240,255,.34);
}
.humanity-card,
.bank-card,
.resource-rack { padding: 14px; }
.humanity-number { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 12px; }
.humanity-number strong { font-size: 2rem; line-height: 1; }
.humanity-number span { color: var(--muted); font-size: .72rem; }
.hope-meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.hope-meter > span { color: var(--muted); font-size: .62rem; }
.hope-meter > div {
  grid-column: 1 / 3;
  height: 10px;
  padding: 1px;
  background: #070b14;
  border: 1px solid var(--line);
}
.hope-meter i {
  display: block;
  width: 72%;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--green) 0 10px, var(--cyan) 10px 12px, transparent 12px 14px);
}
.hope-meter b { color: var(--green); font-size: .7rem; }
.rack-title { margin-bottom: 10px; color: var(--muted); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.resource-stack { display: grid; gap: 8px; }
.resource-cell {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.resource-symbol {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #21365d, #172848);
  color: var(--cyan);
  font-size: .74rem;
  font-weight: 700;
}
.resource-cell span { display: block; color: var(--muted); font-size: .60rem; text-transform: uppercase; }
.resource-bar { height: 5px; margin-top: 5px; background: #050811; }
.resource-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.resource-cell strong { font-size: .82rem; }
.bank-card { display: grid; grid-template-columns: 1fr auto; gap: 3px; }
.bank-card span { color: var(--muted); font-size: .62rem; }
.bank-card strong { color: var(--amber); }
.bank-card.data strong { color: var(--violet); }
.bank-card small { grid-column: 1 / 3; color: rgba(238,248,255,.55); font-size: .55rem; }

.status-strip {
  grid-column: 1 / 4;
  grid-row: 3;
  display: flex;
  gap: 2px;
  background: #04060c;
  border-top: 2px solid var(--line);
}
.status-cell {
  padding: 7px 10px;
  font-size: .63rem;
  color: var(--muted);
  background: rgba(255,255,255,.02);
  white-space: nowrap;
}
.status-cell b { color: var(--cyan); }
.status-cell.grow { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.panel-cap,
.sub-cap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-cap.compact { margin-bottom: 10px; }
.panel-code,
.research-bank,
.classification,
.risk-tag,
.status-badge,
.tech-cost,
.tech-lock {
  font-size: .67rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.panel-code,
.research-bank {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--amber);
}
.research-bank span { display: block; font-size: 1.05rem; color: var(--violet); }

.bridge-room-layout,
.colony-command-grid,
.fleet-layout { display: grid; gap: 16px; }
.bridge-room-layout,
.colony-command-grid { grid-template-columns: minmax(0, 1.45fr) 360px; }
.fleet-layout { grid-template-columns: 1fr 1fr; }
.viewport-panel,
.briefing-panel,
.colony-world-panel { min-height: 560px; }

.star-window {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 2px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  background:
    radial-gradient(circle at 50% 48%, rgba(103,170,255,.14), transparent 25%),
    linear-gradient(180deg, #0b1328, #0c1731 50%, #09121f);
}
.star-window::before,
.star-window::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.star-window::before { inset: 12px; border: 1px solid rgba(255,255,255,.05); }
.star-window::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.05), transparent);
}
.window-stars,
.window-crosshair,
.window-sweep,
.flight-network,
.ship-sprites { position: absolute; inset: 0; }
.window-stars {
  background-image:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.84) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 11%, rgba(255,242,199,.85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 80% 28%, rgba(186,234,255,.84) 0 1px, transparent 1.6px),
    radial-gradient(circle at 34% 77%, rgba(255,255,255,.84) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 71%, rgba(255,255,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 19% 70%, rgba(205,244,255,.84) 0 1px, transparent 1.6px);
  background-size: 180px 180px, 280px 210px, 230px 200px, 250px 260px, 190px 200px, 310px 260px;
  opacity: .82;
}
.window-crosshair {
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .30;
}
.window-sweep {
  width: 540px;
  height: 540px;
  left: calc(50% - 270px);
  top: calc(50% - 270px);
  border-radius: 50%;
  background: conic-gradient(from 40deg, transparent 0 338deg, rgba(112,240,255,.08) 338deg 352deg, rgba(112,240,255,.24));
  animation: radar 14s linear infinite;
}
.flight-network path { fill: none; stroke: rgba(112,240,255,.24); stroke-width: 1.5; stroke-dasharray: 7 8; }
.celestial-node {
  position: absolute;
  width: 126px;
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--text);
  z-index: 5;
}
.celestial-node strong { font-size: .78rem; letter-spacing: .05em; text-shadow: 0 0 10px rgba(4,6,12,.9); }
.celestial-node small { font-size: .58rem; color: rgba(238,248,255,.78); }
.celestial-node.locked { opacity: .42; filter: grayscale(.2); }
.target-brackets {
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(255,211,122,.65);
  opacity: 0;
}
.celestial-node.selected .target-brackets { opacity: 1; }
.pixel-planet {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 5px rgba(255,255,255,.03), 0 0 20px rgba(255,255,255,.07);
}
.pixel-planet.earth { background: linear-gradient(135deg, #3c70ff, #2fb5d8 34%, #83f18b 68%, #eefef2); }
.pixel-planet.kepler { background: linear-gradient(135deg, #8c4f37, #d67f5d 48%, #f0c49a); }
.pixel-planet.arkon { background: linear-gradient(135deg, #325b81, #6e99b4 50%, #c1cad5); }
.pixel-planet.eden { background: linear-gradient(135deg, #20638a, #22c88d 52%, #dcffd4); }
.pixel-planet.nox { background: linear-gradient(135deg, #2f3360, #745eb6 52%, #bcb0ea); }
.earth-node { left: calc(50% - 63px); top: calc(50% - 54px); }
.kepler-node { left: 9%; top: 17%; }
.arkon-node { right: 8%; top: 16%; }
.eden-node { right: 10%; bottom: 11%; }
.nox-node { left: 11%; bottom: 12%; }
.ship-sprite {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--amber);
  font-size: 1rem;
  text-shadow: 0 0 10px rgba(255,211,122,.58);
}
.sector-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  color: var(--muted);
  font-size: .7rem;
}
.legend-pip { width: 10px; height: 10px; display: inline-block; margin-right: 6px; }
.legend-pip.home { background: var(--amber); }
.legend-pip.scanned { background: var(--green); }
.legend-pip.unknown { background: #6d82a4; }
.ticker { flex: 1; min-width: 180px; color: var(--text); }

.briefing-panel { display: flex; flex-direction: column; }
.dossier-visual {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  margin-bottom: 14px;
}
.planet-portrait {
  height: 160px;
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), transparent 44%), #101932;
}
.planet-portrait::before {
  content: "";
  position: absolute;
  width: 112px;
  height: 112px;
  left: calc(50% - 56px);
  top: calc(50% - 56px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 7px rgba(255,255,255,.03);
}
.earth-portrait::before { background: linear-gradient(135deg, #3c70ff, #2fb5d8 34%, #83f18b 68%, #effff2); }
.kepler-portrait::before { background: linear-gradient(135deg, #8c4f37, #d67f5d 48%, #f0c49a); }
.arkon-portrait::before { background: linear-gradient(135deg, #325b81, #6e99b4 50%, #c1cad5); }
.eden-portrait::before { background: linear-gradient(135deg, #20638a, #22c88d 52%, #dcffd4); }
.nox-portrait::before { background: linear-gradient(135deg, #2f3360, #745eb6 52%, #bcb0ea); }
.portrait-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  animation: scan 4s linear infinite;
}
.classification {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(112,240,255,.22);
  background: rgba(112,240,255,.08);
  color: var(--cyan);
}
.risk-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.risk-tag.safe { color: var(--green); }
.risk-tag.warn { color: var(--amber); }
.risk-tag.danger { color: var(--red); }
.dossier-copy { color: #dbe8f6; line-height: 1.48; font-size: .92rem; }
.dossier-facts { display: grid; gap: 8px; margin-bottom: 14px; }
.fact-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.fact-line span { color: var(--muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .05em; }
.fact-line strong { font-size: .84rem; }
.dossier-actions { display: grid; gap: 10px; margin-top: auto; }
.action-block {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.action-block p,
.action-note { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }

.selector-wrap { display: grid; gap: 6px; min-width: 150px; }
.selector-wrap label { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
select {
  min-height: 40px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, #15213b, #101a30);
}
.vital-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.vital-card {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.vital-card span { display: block; color: var(--muted); font-size: .64rem; text-transform: uppercase; }
.vital-card strong { font-size: .96rem; }
.vital-card.critical { border-color: rgba(255,142,162,.35); }

.colony-landscape {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, var(--colony-sky, #20345a), #13223f 58%, #10192d);
}
.colony-landscape.no-colony { --colony-sky: #2b335d; }
.landscape-sky,
.landscape-mountains,
.landscape-ground,
.colony-grid,
.empty-colony-message { position: absolute; left: 0; right: 0; }
.landscape-sky { top: 0; height: 60%; }
.tiny-sun {
  position: absolute;
  top: 18px;
  right: 32px;
  width: 22px;
  height: 22px;
  background: var(--amber);
  box-shadow: 0 0 18px rgba(255,211,122,.42);
}
.tiny-star { position: absolute; width: 4px; height: 4px; background: rgba(255,255,255,.78); }
.tiny-star.s1 { left: 14%; top: 18%; }
.tiny-star.s2 { left: 28%; top: 10%; }
.tiny-star.s3 { left: 72%; top: 18%; }
.landscape-mountains {
  bottom: 112px;
  height: 120px;
  background: linear-gradient(180deg, rgba(65,82,120,.86), rgba(26,36,56,.96));
  clip-path: polygon(0 100%, 0 64%, 12% 34%, 25% 66%, 40% 21%, 54% 67%, 67% 32%, 80% 73%, 100% 42%, 100% 100%);
}
.landscape-ground {
  bottom: 0;
  height: 122px;
  background:
    linear-gradient(180deg, rgba(34,48,74,.96), rgba(15,23,39,.98)),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.03) 30px 31px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.colony-grid {
  left: 16px;
  right: 16px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.colony-tile {
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.colony-tile.empty {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-style: dashed;
}
.colony-building {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
}
.colony-building.habitat { background: linear-gradient(180deg, #f0f5ff, #a8c2ff); }
.colony-building.greenhouse { background: linear-gradient(180deg, #8dffb0, #2a8d5e); }
.colony-building.power { background: linear-gradient(180deg, #ffe292, #c5842f); }
.colony-building.water { background: linear-gradient(180deg, #9fe8ff, #3d8fcd); }
.colony-building.lab { background: linear-gradient(180deg, #e1c6ff, #8d67da); }
.colony-building.mine { background: linear-gradient(180deg, #cbd3e4, #69758a); }
.building-name { font-size: .54rem; color: var(--muted); text-transform: uppercase; text-align: center; padding: 0 2px; }
.empty-colony-message {
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
}
.beacon-icon { font-size: 2rem; color: var(--amber); }
.colony-overview,
.policy-selector,
.module-catalog,
.ship-blueprints,
.fleet-manifest,
.research-matrix,
.command-log { display: grid; gap: 10px; }
.control-section { margin-top: 14px; }
.sub-cap span { color: var(--muted); font-size: .7rem; }
.overview-cell,
.module-item,
.blueprint-card,
.manifest-row,
.tech-node,
.log-row,
.system-console {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  padding: 12px;
}
.overview-cell span { display: block; color: var(--muted); font-size: .64rem; text-transform: uppercase; }
.overview-cell strong { font-size: .92rem; }
.policy-option {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  text-align: left;
  display: grid;
  gap: 4px;
}
.policy-option.active { background: linear-gradient(180deg, rgba(112,240,255,.16), rgba(67,170,255,.10)); border-color: rgba(112,240,255,.26); }
.policy-option strong { font-size: .88rem; }
.policy-option span { color: var(--muted); font-size: .76rem; }
.module-item,
.blueprint-card,
.tech-node { display: grid; gap: 10px; }
.cost-line { display: flex; flex-wrap: wrap; gap: 6px; }
.cost-chip {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .62rem;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.status-badge.ready { color: var(--green); }
.status-badge.flight { color: var(--amber); }
.ship-blueprints,
.research-matrix { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ship-silhouette,
.tech-symbol,
.ship-id-badge {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #223863, #172848);
}
.ship-silhouette { font-size: 1.5rem; color: var(--cyan); }
.tech-symbol { font-size: 1.25rem; color: var(--violet); }
.tech-lock { color: var(--red); }
.manifest-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
}
.ship-id-badge { font-size: 1.15rem; color: var(--amber); }
.cargo-controls {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cargo-controls select { flex: 1; min-width: 160px; }
.tech-node.available { border-color: rgba(255,211,122,.24); }
.tech-node.unlocked { background: linear-gradient(180deg, rgba(140,255,178,.12), rgba(36,87,67,.18)); border-color: rgba(140,255,178,.24); }
.tech-node.locked { opacity: .78; }
.tech-cost { color: var(--amber); }
.system-console {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.system-console > div { flex: 1; min-width: 180px; }
.command-log { max-height: 60vh; overflow: auto; }
.log-row { display: grid; grid-template-columns: 92px 12px 1fr; gap: 10px; align-items: center; }
.log-row time { color: var(--muted); font-size: .66rem; }
.log-pip { width: 10px; height: 10px; background: #7a91b0; }
.log-row.success .log-pip { background: var(--green); }
.log-row.warning .log-pip { background: var(--amber); }
.log-row.danger .log-pip { background: var(--red); }
.log-row p { margin: 0; line-height: 1.45; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 44px;
  z-index: 100;
  min-width: min(360px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, #20355f, #132344);
  box-shadow: var(--shadow);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(3,8,16,.74);
}
.modal-backdrop.hidden { display: none; }
.event-terminal {
  width: min(760px, 100%);
  border: 2px solid var(--line);
  background: linear-gradient(180deg, #172645, #101b31);
  box-shadow: var(--shadow);
}
.event-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,142,162,.20), rgba(108,29,47,.24));
}
.alarm-light {
  width: 12px;
  height: 12px;
  background: var(--red);
  box-shadow: 0 0 10px rgba(255,142,162,.52);
  animation: blink 1.1s steps(2) infinite;
}
.event-body { padding: 16px; }
.event-body p { line-height: 1.45; }
.event-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

@keyframes blink { 50% { opacity: .45; } }
@keyframes radar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes fadeIn { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .game-frame {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: 94px minmax(0, auto) auto 34px;
  }
  .bridge-header { grid-column: 1 / 3; grid-template-columns: 1fr; }
  .command-rail { top: 94px; height: auto; }
  .resource-bus {
    grid-column: 1 / 3;
    grid-row: 3;
    position: static;
    height: auto;
    border-left: 0;
    border-top: 2px solid var(--line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
  .command-deck { grid-column: 2; }
  .status-strip { grid-column: 1 / 3; grid-row: 4; }
  .bridge-room-layout,
  .colony-command-grid,
  .fleet-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .game-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 34px;
  }
  .bridge-header,
  .status-strip,
  .resource-bus { grid-column: 1; }

  .bridge-header {
    position: static;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
  }
  .brand-lockup {
    grid-column: 1 / -1;
    gap: 12px;
    align-items: center;
  }
  .brand-emblem {
    width: 48px;
    height: 48px;
  }
  .bridge-status-box,
  .time-cluster {
    min-width: 0;
    width: 100%;
    padding: 10px;
  }
  .time-cluster {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .time-readout {
    text-align: left;
    min-width: 0;
  }
  .time-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .command-rail {
    grid-column: 1;
    grid-row: auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 0;
    border-top: 2px solid var(--line);
    background: linear-gradient(180deg, rgba(11,18,34,.98), rgba(9,15,28,.98));
    z-index: 60;
    box-shadow: 0 -8px 20px rgba(0,0,0,.35);
  }
  .rail-cap,
  .rail-spacer,
  .rail-button.utility { display: none; }
  .rail-button {
    min-height: 56px;
    flex: 1 1 20%;
    gap: 3px;
  }
  .rail-button::before { display: none; }
  .rail-glyph { font-size: 1.1rem; }
  .rail-button em { font-size: .50rem; }

  .command-deck {
    grid-column: 1;
    grid-row: 2;
    padding: 12px;
    padding-bottom: 88px;
  }
  .resource-bus {
    grid-row: 3;
    padding: 12px;
    padding-bottom: 88px;
  }
  .status-strip {
    grid-row: 4;
    overflow: auto;
    padding-bottom: calc(env(safe-area-inset-bottom) + 72px);
  }

  .viewport-panel,
  .briefing-panel,
  .colony-world-panel { min-height: auto; }
  .star-window,
  .colony-landscape { min-height: 320px; }
  .earth-node { left: calc(50% - 58px); top: calc(50% - 52px); }
  .kepler-node { left: 2%; top: 14%; }
  .arkon-node { right: 1%; top: 14%; }
  .eden-node { right: 4%; bottom: 9%; }
  .nox-node { left: 4%; bottom: 9%; }
  .celestial-node { width: 112px; }
  .colony-grid { left: 10px; right: 10px; gap: 8px; }
  .manifest-row { grid-template-columns: 50px 1fr; }
  .manifest-row .status-badge { grid-column: 2; justify-self: start; }
  .cargo-controls { grid-column: 1 / -1; }
  .log-row { grid-template-columns: 1fr; }

  .holo-panel,
  .bridge-card,
  .resource-rack,
  .overview-cell,
  .module-item,
  .blueprint-card,
  .manifest-row,
  .tech-node,
  .log-row,
  .system-console,
  .policy-option,
  .vital-card,
  .fact-line,
  .action-block {
    padding: 10px;
  }
  .ship-blueprints,
  .research-matrix { grid-template-columns: 1fr; }
}