:root {
  --bg: #080805;
  --surface: #11100b;
  --surface-raised: #17150d;
  --line: #5e5127;
  --line-bright: #aa8a2d;
  --text: #f1ddb0;
  --muted: #9a8b68;
  --accent: #f2b632;
  --accent-soft: #8d6716;
  --good: #70d987;
  --bad: #ff665e;
  --cyan: #5cd5dd;
  --violet: #b892ff;
  --shadow: rgba(242, 182, 50, .08);
  font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  color: var(--text);
  background: var(--bg);
}

:root[data-theme="green"] {
  --bg: #050a07; --surface: #09110c; --surface-raised: #0d1811; --line: #28573a;
  --line-bright: #3b9f5d; --text: #c9f4d4; --muted: #78a987; --accent: #42dc73;
  --accent-soft: #187a38; --shadow: rgba(66, 220, 115, .08);
}

:root[data-theme="blue"] {
  --bg: #05080c; --surface: #09101a; --surface-raised: #0d1724; --line: #294c73;
  --line-bright: #3d82c6; --text: #d3e9ff; --muted: #7c9dbd; --accent: #55aaff;
  --accent-soft: #24639f; --shadow: rgba(85, 170, 255, .09);
}
:root[data-theme="contrast"] {
  --bg: #000; --surface: #050505; --surface-raised: #101010; --line: #8b8b8b;
  --line-bright: #fff; --text: #fff; --muted: #d0d0d0; --accent: #ffe600;
  --accent-soft: #8a7c00; --good: #43ff75; --bad: #ff4b4b; --cyan: #39f6ff;
  --violet: #d6a8ff; --shadow: rgba(255,230,0,.12);
}
:root[data-text-size="large"] { font-size: 18px; }
:root[data-text-size="large"] .panel-heading h2,
:root[data-text-size="large"] .button,
:root[data-text-size="large"] select { font-size: 12px; }
:root[data-text-size="large"] .metric strong,
:root[data-text-size="large"] .resource-amount { font-size: 14px; }

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 50% -20%, var(--shadow), transparent 42%),
    var(--bg);
  background-size: 100% 4px, auto, auto;
}
button, select, input { font: inherit; }
button, select { color: var(--text); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.topbar {
  min-height: 86px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 16px clamp(16px, 3vw, 42px);
  border-bottom: 1px solid var(--line-bright);
  background: rgba(8, 8, 5, .9);
}
.eyebrow { margin: 0 0 3px; color: var(--muted); font-size: 10px; letter-spacing: .24em; }
h1 { margin: 0; font: 700 clamp(22px, 3vw, 34px)/1 system-ui, sans-serif; letter-spacing: -.04em; }
h1 span { color: var(--accent); font-weight: 400; }
.topbar-readouts { display: flex; align-items: stretch; gap: 8px; }
.entrance-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 11px;
  color: var(--accent);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
}
.entrance-link:hover { border-color: var(--line-bright); background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised)); }
.entrance-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.readout, .connection { min-width: 118px; padding: 9px 12px; border-left: 1px solid var(--line); }
.readout span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .13em; }
.readout strong { display: block; margin-top: 4px; font-size: 15px; color: var(--text); }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.signal { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.connection.online { color: var(--good); }
.connection.offline { color: var(--bad); }

.commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(16px, 3vw, 42px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.control-group { display: flex; align-items: center; gap: 8px; }
.button, .segmented button, select {
  min-height: 34px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  padding: 7px 11px;
  font-size: 10px;
  letter-spacing: .08em;
  cursor: pointer;
}
.button:hover, .segmented button:hover, select:hover { border-color: var(--line-bright); }
.button:disabled, .segmented button:disabled { opacity: .42; cursor: not-allowed; }
.button.primary, .segmented button.active { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.button.danger { color: var(--bad); }
.button.compact { min-height: 28px; padding: 5px 8px; }
.segmented { display: flex; }
.segmented button + button { border-left: 0; }
.select-label { color: var(--muted); font-size: 9px; letter-spacing: .12em; }

.alert-strip {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px clamp(16px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  color: var(--good);
  background: color-mix(in srgb, var(--good) 7%, var(--bg));
  font-size: 11px;
  letter-spacing: .06em;
}
.alert-strip.warning { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.alert-strip.critical { color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, var(--bg)); }
.alert-code { padding-right: 12px; border-right: 1px solid currentColor; font-weight: 700; }

.dashboard {
  width: min(1800px, 100%);
  margin: 0 auto;
  padding: 14px clamp(12px, 2vw, 28px) 32px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.panel { min-width: 0; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-raised), var(--surface)); }
.station-panel { grid-column: span 4; align-self: start; }
.resources-panel { grid-column: span 8; }
.construction-panel { grid-column: span 4; }
.reactor-panel { grid-column: span 8; }
.modules-panel { grid-column: span 8; }
.events-panel { grid-column: span 4; }
.continent-panel { grid-column: span 8; }
.force-panel { grid-column: span 4; }
.divisions-panel { grid-column: span 8; }
.combat-panel { grid-column: span 4; }
.space-panel { grid-column: span 12; }
.weather-panel { grid-column: span 8; }
.engineering-panel { grid-column: span 4; }
.upgrades-panel { grid-column: span 8; }
.panel-heading {
  min-height: 39px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.015);
}
.panel-heading > div { display: flex; align-items: center; gap: 10px; }
.panel-index { color: var(--accent); font-size: 10px; }
h2 { margin: 0; font-size: 11px; letter-spacing: .12em; }
.panel-note { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.badge { padding: 3px 6px; border: 1px solid var(--line); color: var(--good); font-size: 9px; }
.badge.warning { color: var(--accent); }
.badge.critical { color: var(--bad); }

.station-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.metric { min-width: 0; padding: 13px 12px; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.metric strong { display: block; margin-top: 7px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.control-stack { padding: 12px; display: grid; gap: 12px; }
.field-row, .power-control { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.field-row > span, .power-copy { min-width: 130px; }
.field-row strong, .power-copy strong { display: block; font-size: 10px; letter-spacing: .05em; }
.field-row small, .power-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.power-input { flex: 1; min-width: 90px; display: grid; grid-template-columns: 1fr 48px; align-items: center; gap: 8px; }
.power-input output { color: var(--accent); text-align: right; font-size: 11px; }
input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }

.resource-grid { display: grid; grid-template-columns: 1fr 1fr; }
.resource-card { --resource-color: var(--accent); --resource-secondary: var(--cyan); min-width: 0; padding: 12px; border-bottom: 1px solid var(--line); }
.resource-card:nth-child(odd) { border-right: 1px solid var(--line); }
.resource-card:last-child { border-right: 0; border-bottom: 0; }
.resource-top, .resource-rate { display: flex; justify-content: space-between; gap: 10px; }
.resource-name { font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.resource-amount { font-size: 12px; }
.bar { display: block; width: 100%; height: 4px; margin: 9px 0; border: 0; appearance: none; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.bar::-webkit-progress-bar { background: color-mix(in srgb, var(--line) 70%, transparent); }
.resource-card .bar::-webkit-progress-value { background: var(--resource-color); }
.resource-card .bar::-moz-progress-bar { background: var(--resource-color); }
.resource-rate { font-size: 9px; color: var(--muted); }
.resource-rate .positive { color: var(--good); }
.resource-rate .negative { color: var(--bad); }
.resource-chart-shell { padding: 11px 12px 12px; border-top: 1px solid var(--line); background: rgba(0,0,0,.1); }
.resource-chart-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 8px; letter-spacing: .08em; }
.resource-chart-heading strong { color: var(--text); }
.resource-chart-heading span { color: var(--muted); }
.resource-chart-key { gap: 8px 14px; margin-bottom: 7px; }
.resource-chart-key span { display: inline-flex; align-items: center; gap: 4px; }
.resource-chart-key span strong { color: currentColor; font-size: 7px; }
.chart-ore { color: #d69b55; }.chart-uranium { color: #70d987; }.chart-refined { color: #53e6ff; }.chart-bio { color: #b7f06d; }.chart-oil { color: #b58ae8; }.chart-fuel { color: #ff834a; }.chart-alloy { color: #e9f8ff; }
#resource-chart { display: block; width: 100%; height: 240px; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); background: linear-gradient(rgba(4,10,12,.74), rgba(0,0,0,.42)); }

.resource-ore { --resource-color: #d69b55; --resource-secondary: #ffd08a; }
.resource-uranium { --resource-color: #70d987; --resource-secondary: #c8ff76; }
.resource-refinedUranium { --resource-color: #a8ffca; --resource-secondary: #53e6ff; }
.resource-bio { --resource-color: #7fe66b; --resource-secondary: #d5ff8a; }
.resource-oil { --resource-color: #9b78c9; --resource-secondary: #e2a7ff; }
.resource-fuel { --resource-color: #ff9b42; --resource-secondary: #ffe06b; }
.resource-alloy { --resource-color: #8ed8e2; --resource-secondary: #f4fbff; }
.resource-visual { --resource-level: 50%; --resource-cycle: 2s; position: relative; height: 108px; margin: 10px 0 7px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--resource-color) 45%, var(--line)); background: radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--resource-color) 24%, transparent), transparent 66%), rgba(0,0,0,.24); box-shadow: inset 0 0 30px rgba(0,0,0,.32), 0 0 12px color-mix(in srgb, var(--resource-color) 8%, transparent); }
.resource-visual::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 19px, color-mix(in srgb, var(--resource-color) 7%, transparent) 19px 20px); }
.resource-visual::after { content: ""; position: absolute; z-index: 10; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--resource-secondary), transparent); box-shadow: 0 0 8px var(--resource-color); opacity: .48; animation: resource-chamber-scan calc(var(--resource-cycle) * 1.8) linear infinite; }
.resource-flow-label { position: absolute; z-index: 12; top: 7px; right: 8px; color: color-mix(in srgb, var(--resource-color) 72%, white); font-size: 7px; letter-spacing: .09em; }
.flow-negative .resource-motion { animation-direction: reverse; }
.flow-idle .resource-visual, .storage-full .resource-visual { --resource-cycle: 4.8s !important; }
.flow-idle .resource-motion, .storage-full .resource-motion { opacity: .72; }
.storage-full .resource-visual { box-shadow: inset 0 0 18px color-mix(in srgb, var(--resource-color) 20%, transparent); }
.storage-low .resource-visual { border-color: color-mix(in srgb, var(--bad) 65%, var(--line)); }
@keyframes resource-chamber-scan { from { transform: translateY(0); } to { transform: translateY(107px); } }

.ore-vein { position: absolute; left: 5%; right: 5%; bottom: 20px; height: 15px; border-radius: 50%; background: color-mix(in srgb, var(--resource-color) 30%, #16110c); box-shadow: 0 3px 0 color-mix(in srgb, var(--resource-color) 55%, black), 0 0 18px color-mix(in srgb, var(--resource-color) 20%, transparent); }
.ore-fragment { position: absolute; z-index: 2; left: -20px; bottom: 29px; width: 18px; height: 16px; background: linear-gradient(135deg, var(--resource-secondary), var(--resource-color) 58%, #6f4526); clip-path: polygon(20% 0, 100% 17%, 83% 100%, 7% 78%); animation: resource-ore-transport var(--resource-cycle) linear infinite; }
.ore-fragment:nth-of-type(3) { animation-delay: calc(var(--resource-cycle) * -.2); transform: scale(.72); }.ore-fragment:nth-of-type(4) { animation-delay: calc(var(--resource-cycle) * -.4); }.ore-fragment:nth-of-type(5) { animation-delay: calc(var(--resource-cycle) * -.6); transform: scale(.82); }.ore-fragment:nth-of-type(6) { animation-delay: calc(var(--resource-cycle) * -.8); transform: scale(.65); }.ore-fragment:nth-of-type(7) { animation-delay: var(--resource-cycle); transform: scale(.88); }
@keyframes resource-ore-transport { 0% { left: -20px; rotate: 0deg; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: calc(100% + 2px); rotate: 270deg; opacity: 0; } }

.uranium-core { position: absolute; left: 50%; top: 52%; width: 24px; height: 24px; border-radius: 50%; background: var(--resource-secondary); box-shadow: 0 0 10px var(--resource-secondary), 0 0 30px var(--resource-color); transform: translate(-50%, -50%); animation: resource-uranium-pulse var(--resource-cycle) ease-in-out infinite; }
.uranium-orbit { position: absolute; left: 50%; top: 52%; width: 112px; height: 42px; border: 2px solid color-mix(in srgb, var(--resource-color) 65%, transparent); border-radius: 50%; transform: translate(-50%, -50%); animation: resource-uranium-orbit calc(var(--resource-cycle) * 1.6) linear infinite; }
.uranium-orbit::after { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--resource-secondary); box-shadow: 0 0 10px var(--resource-color); }
.uranium-orbit.orbit-2 { width: 92px; transform: translate(-50%, -50%) rotate(60deg); animation-delay: calc(var(--resource-cycle) * -.45); }.uranium-orbit.orbit-3 { width: 98px; transform: translate(-50%, -50%) rotate(120deg); animation-delay: calc(var(--resource-cycle) * -.9); }
@keyframes resource-uranium-pulse { 50% { scale: 1.35; filter: brightness(1.35); } }
@keyframes resource-uranium-orbit { to { rotate: 360deg; } }

.refined-rack { position: absolute; left: 50%; bottom: 13px; display: flex; align-items: end; gap: 10px; height: 78px; transform: translateX(-50%); }
.refined-rod { display: block; width: 13px; height: 55px; border: 2px solid var(--resource-secondary); background: linear-gradient(90deg, color-mix(in srgb, var(--resource-color) 22%, black), var(--resource-color), color-mix(in srgb, var(--resource-color) 20%, black)); box-shadow: 0 0 12px color-mix(in srgb, var(--resource-color) 50%, transparent); transform-origin: center bottom; animation: resource-refined-charge var(--resource-cycle) ease-in-out infinite alternate; }
.refined-rod:nth-child(2) { height: 68px; animation-delay: calc(var(--resource-cycle) * -.2); }.refined-rod:nth-child(3) { height: 78px; animation-delay: calc(var(--resource-cycle) * -.4); }.refined-rod:nth-child(4) { height: 68px; animation-delay: calc(var(--resource-cycle) * -.6); }.refined-rod:nth-child(5) { animation-delay: calc(var(--resource-cycle) * -.8); }
.refined-scan { position: absolute; z-index: 4; left: 0; top: 12px; width: 25%; height: 2px; background: linear-gradient(90deg, transparent, var(--resource-secondary), transparent); box-shadow: 0 0 10px var(--resource-color); animation: resource-refined-scan calc(var(--resource-cycle) * 1.4) linear infinite; }
@keyframes resource-refined-charge { from { scale: 1 .55; opacity: .48; } to { scale: 1 1; opacity: 1; } }
@keyframes resource-refined-scan { from { translate: -100% 0; } to { translate: 500% 78px; } }

.bio-stem { position: absolute; left: calc(50% - 3px); bottom: 5px; width: 7px; height: 76px; border-radius: 7px; background: var(--resource-color); transform-origin: center bottom; animation: resource-bio-grow calc(var(--resource-cycle) * 1.5) ease-in-out infinite alternate; }
.bio-leaf { position: absolute; left: 50%; bottom: 42px; width: 35px; height: 19px; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, var(--resource-secondary), var(--resource-color)); transform-origin: left bottom; animation: resource-bio-sway calc(var(--resource-cycle) * 1.5) ease-in-out infinite alternate; }.bio-leaf.leaf-left { margin-left: -33px; transform: scaleX(-1) rotate(-12deg); }.bio-leaf.leaf-right { bottom: 65px; transform: rotate(-10deg); animation-delay: calc(var(--resource-cycle) * -.5); }
.bio-spore { position: absolute; left: 28%; bottom: -7px; width: 7px; height: 7px; border-radius: 50%; background: var(--resource-secondary); box-shadow: 0 0 8px var(--resource-color); animation: resource-bio-spore calc(var(--resource-cycle) * 1.7) linear infinite; }.bio-spore:nth-of-type(6) { left: 42%; animation-delay: calc(var(--resource-cycle) * -.4); }.bio-spore:nth-of-type(7) { left: 62%; animation-delay: calc(var(--resource-cycle) * -.8); }.bio-spore:nth-of-type(8) { left: 74%; animation-delay: calc(var(--resource-cycle) * -1.2); }
@keyframes resource-bio-grow { from { scale: 1 .76; filter: brightness(.75); } to { scale: 1 1; filter: brightness(1.25); } }
@keyframes resource-bio-sway { to { rotate: 12deg; } }
@keyframes resource-bio-spore { 0% { translate: 0 0; opacity: 0; } 15% { opacity: .9; } 100% { translate: 18px -115px; opacity: 0; } }

.oil-reservoir { position: absolute; left: 0; right: 0; bottom: 0; height: var(--resource-level); max-height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--resource-secondary) 26%, #17101f), #08060c); opacity: .78; transition: height .45s ease; }
.oil-surface { position: absolute; z-index: 2; left: -8%; bottom: calc(var(--resource-level) - 2px); width: 116%; height: 4px; border-radius: 50%; background: var(--resource-secondary); box-shadow: 0 0 8px var(--resource-color); animation: resource-oil-slosh calc(var(--resource-cycle) * 1.4) ease-in-out infinite alternate; }
.oil-bubble { position: absolute; z-index: 3; bottom: -11px; width: 10px; height: 10px; border: 2px solid var(--resource-secondary); border-radius: 50%; animation: resource-oil-bubble calc(var(--resource-cycle) * 1.7) linear infinite; }.oil-bubble:nth-of-type(4) { left: 20%; animation-delay: calc(var(--resource-cycle) * -.3); }.oil-bubble:nth-of-type(5) { left: 37%; animation-delay: calc(var(--resource-cycle) * -.6); }.oil-bubble:nth-of-type(6) { left: 56%; animation-delay: calc(var(--resource-cycle) * -.9); }.oil-bubble:nth-of-type(7) { left: 76%; animation-delay: calc(var(--resource-cycle) * -1.2); }.oil-bubble:nth-of-type(8) { left: 88%; animation-delay: calc(var(--resource-cycle) * -1.5); }
@keyframes resource-oil-slosh { from { transform: skewY(-1.5deg) translateX(-2%); } to { transform: skewY(1.5deg) translateX(2%); } }
@keyframes resource-oil-bubble { 0% { translate: 0 0; opacity: 0; } 15% { opacity: .75; } 100% { translate: 10px -116px; opacity: 0; } }

.fuel-nozzle { position: absolute; left: calc(50% - 25px); bottom: 7px; width: 50px; height: 13px; border: 2px solid var(--resource-color); background: color-mix(in srgb, var(--resource-color) 22%, black); }
.fuel-flame { position: absolute; left: 50%; bottom: 19px; border-radius: 54% 46% 58% 42% / 70% 60% 40% 30%; transform-origin: center bottom; rotate: 45deg; animation: resource-fuel-burn calc(var(--resource-cycle) * .65) ease-in-out infinite alternate; }.flame-outer { width: 52px; height: 52px; margin-left: -26px; background: linear-gradient(135deg, var(--resource-secondary), var(--resource-color) 48%, #ff5542); box-shadow: 0 0 28px var(--resource-color); }.flame-inner { width: 25px; height: 25px; margin-left: -12px; bottom: 22px; background: #fff5b0; animation-delay: calc(var(--resource-cycle) * -.35); }
.fuel-spark { position: absolute; left: 48%; bottom: 44px; width: 6px; height: 6px; border-radius: 50%; background: var(--resource-secondary); box-shadow: 0 0 8px var(--resource-color); animation: resource-fuel-spark var(--resource-cycle) linear infinite; }
@keyframes resource-fuel-burn { from { scale: .78 1; translate: -2px 2px; } to { scale: 1.08 1.22; translate: 2px -2px; filter: brightness(1.24); } }
@keyframes resource-fuel-spark { 0% { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 100% { translate: 30px -55px; opacity: 0; } }

.alloy-press { position: absolute; z-index: 3; left: calc(50% - 47px); top: 12px; width: 94px; height: 16px; border: 2px solid var(--resource-secondary); background: linear-gradient(90deg, #39464b, var(--resource-color), #39464b); box-shadow: 0 0 13px color-mix(in srgb, var(--resource-color) 55%, transparent); animation: resource-alloy-press var(--resource-cycle) cubic-bezier(.25,.8,.25,1) infinite; }
.alloy-press::before { content: ""; position: absolute; left: 39px; top: -14px; width: 13px; height: 13px; background: var(--resource-secondary); }
.alloy-ingot { position: absolute; left: calc(50% - 56px); bottom: 12px; width: 112px; height: 27px; background: linear-gradient(155deg, var(--resource-secondary), var(--resource-color) 45%, #43585d); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); box-shadow: 0 0 15px var(--resource-color); }
.alloy-glint { position: absolute; z-index: 5; left: 29%; bottom: 19px; width: 14px; height: 2px; background: white; box-shadow: 0 0 10px white; rotate: -12deg; animation: resource-alloy-glint calc(var(--resource-cycle) * 1.25) linear infinite; }
@keyframes resource-alloy-press { 0%, 56%, 100% { translate: 0 0; } 70%, 82% { translate: 0 49px; } 76% { filter: brightness(1.7); } }
@keyframes resource-alloy-glint { from { translate: -50px 0; opacity: 0; } 25%, 70% { opacity: 1; } to { translate: 122px 0; opacity: 0; } }

.build-grid { display: grid; grid-template-columns: 1fr 1fr; }
.build-card { min-height: 94px; padding: 11px; border-bottom: 1px solid var(--line); }
.build-card:nth-child(odd) { border-right: 1px solid var(--line); }
.build-card h3 { margin: 0 0 7px; font-size: 10px; }
.cost { min-height: 27px; margin: 0 0 8px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.build-card button { width: 100%; }
.upgrade-slot { padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.upgrade-slot strong { font-size: 10px; }
.upgrade-slot small { color: var(--muted); font-size: 8px; }

.switch-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 9px; letter-spacing: .05em; }
.reactor-actions { display: flex; align-items: center; gap: 9px; }
.alarm-toggle { padding: 0 5px; }
.switch-label input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 28px; height: 14px; border: 1px solid var(--line-bright); position: relative; }
.switch::after { content: ""; position: absolute; width: 8px; height: 8px; left: 2px; top: 2px; background: var(--muted); transition: transform .16s ease; }
.switch-label input:checked + .switch::after { transform: translateX(14px); background: var(--accent); }
.switch-label input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.reactor-metrics { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.reactor-metrics .metric { position: relative; min-height: 78px; overflow: hidden; text-align: center; isolation: isolate; }
.reactor-metrics .metric:first-child { text-align: left; }
.reactor-metric > span, .reactor-metric > strong { position: relative; z-index: 3; }
.reactor-stat-visual { position: absolute !important; z-index: 1 !important; inset: 0; pointer-events: none; opacity: .48; }
.reactor-stat-visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--stat-level); max-height: 100%; opacity: .12; background: linear-gradient(0deg, var(--reactor-stat-color), transparent); transition: height .5s ease; }
.reactor-stat-visual i { position: absolute; display: block; background: var(--reactor-stat-color); box-shadow: 0 0 8px var(--reactor-stat-color); }
.metric-output { --reactor-stat-color: var(--accent); }.metric-demand { --reactor-stat-color: var(--bad); }.metric-allocation { --reactor-stat-color: var(--cyan); }.metric-stability { --reactor-stat-color: var(--violet); }.metric-fuel { --reactor-stat-color: #ff9b42; }
.metric-output .reactor-stat-visual i { bottom: 8px; left: calc(12% + var(--bar-index, 0) * 17%); width: 5px; height: 22px; transform-origin: center bottom; animation: reactor-output-bars 1.15s ease-in-out infinite alternate; }
.metric-output .reactor-stat-visual i:nth-child(1) { --bar-index: 0; animation-delay: -.8s; }.metric-output .reactor-stat-visual i:nth-child(2) { --bar-index: 1; animation-delay: -.6s; }.metric-output .reactor-stat-visual i:nth-child(3) { --bar-index: 2; animation-delay: -.4s; }.metric-output .reactor-stat-visual i:nth-child(4) { --bar-index: 3; animation-delay: -.2s; }.metric-output .reactor-stat-visual i:nth-child(5) { --bar-index: 4; }
.metric-demand .reactor-stat-visual i { top: 48px; left: 48%; width: 7px; height: 7px; border-radius: 50%; animation: reactor-demand-pulse 1.8s ease-out infinite; }.metric-demand .reactor-stat-visual i:nth-child(2) { animation-delay: -.36s; }.metric-demand .reactor-stat-visual i:nth-child(3) { animation-delay: -.72s; }.metric-demand .reactor-stat-visual i:nth-child(4) { animation-delay: -1.08s; }.metric-demand .reactor-stat-visual i:nth-child(5) { animation-delay: -1.44s; }
.metric-allocation .reactor-stat-visual i { top: 0; bottom: 0; width: 2px; opacity: .75; animation: reactor-allocation-scan 2.2s linear infinite; }.metric-allocation .reactor-stat-visual i:nth-child(2) { animation-delay: -.44s; }.metric-allocation .reactor-stat-visual i:nth-child(3) { animation-delay: -.88s; }.metric-allocation .reactor-stat-visual i:nth-child(4) { animation-delay: -1.32s; }.metric-allocation .reactor-stat-visual i:nth-child(5) { animation-delay: -1.76s; }
.metric-stability .reactor-stat-visual i { left: calc(8% + var(--wave-index, 0) * 20%); bottom: 14px; width: 5px; height: 5px; border-radius: 50%; animation: reactor-stability-wave 1.7s ease-in-out infinite; }.metric-stability .reactor-stat-visual i:nth-child(1) { --wave-index: 0; }.metric-stability .reactor-stat-visual i:nth-child(2) { --wave-index: 1; animation-delay: -.25s; }.metric-stability .reactor-stat-visual i:nth-child(3) { --wave-index: 2; animation-delay: -.5s; }.metric-stability .reactor-stat-visual i:nth-child(4) { --wave-index: 3; animation-delay: -.75s; }.metric-stability .reactor-stat-visual i:nth-child(5) { --wave-index: 4; animation-delay: -1s; }
.metric-fuel .reactor-stat-visual i { right: -8px; bottom: 12px; width: 9px; height: 9px; border-radius: 65% 35% 60% 40%; rotate: 45deg; animation: reactor-fuel-flow 2.4s linear infinite; }.metric-fuel .reactor-stat-visual i:nth-child(2) { animation-delay: -.48s; }.metric-fuel .reactor-stat-visual i:nth-child(3) { animation-delay: -.96s; }.metric-fuel .reactor-stat-visual i:nth-child(4) { animation-delay: -1.44s; }.metric-fuel .reactor-stat-visual i:nth-child(5) { animation-delay: -1.92s; }
.reactor-stat-warning { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)) !important; }.reactor-stat-critical { border-color: var(--bad) !important; background: color-mix(in srgb, var(--bad) 7%, transparent); }
@keyframes reactor-output-bars { from { scale: 1 .25; opacity: .35; } to { scale: 1 1; opacity: 1; } }
@keyframes reactor-demand-pulse { from { scale: .2; opacity: .8; } to { scale: 7; opacity: 0; } }
@keyframes reactor-allocation-scan { from { left: -5%; opacity: 0; } 20%, 80% { opacity: .75; } to { left: 105%; opacity: 0; } }
@keyframes reactor-stability-wave { 50% { translate: 0 -18px; filter: brightness(1.6); } }
@keyframes reactor-fuel-flow { from { right: -8px; opacity: 0; } 15%, 85% { opacity: .8; } to { right: 105%; opacity: 0; } }
.core-controls { display: grid; grid-template-columns: 1fr 1fr; }
.core-card { position: relative; padding: 13px; overflow: hidden; transition: box-shadow .3s ease; }
.core-card.core-active { box-shadow: inset 0 0 24px color-mix(in srgb, var(--accent) 5%, transparent); }.core-card.core-hot { box-shadow: inset 0 0 32px color-mix(in srgb, var(--bad) 18%, transparent); }.core-card.core-damaged { border-bottom-color: var(--bad); }
.core-card + .core-card { border-left: 1px solid var(--line); }
.core-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.core-title h3 { margin: 0; font-size: 10px; }
.core-title span { color: var(--muted); font-size: 9px; }
.core-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; }
.core-stat { --core-stat-color: var(--cyan); position: relative; min-height: 48px; padding: 6px; overflow: hidden; border: 1px solid var(--line); isolation: isolate; }
.core-stat > span, .core-stat > strong { position: relative; z-index: 3; }
.core-stat span { display: block; color: var(--muted); font-size: 7px; }
.core-stat strong { display: block; margin-top: 4px; font-size: 10px; }
.core-stat-control { --core-stat-color: var(--cyan); }.core-stat-heat { --core-stat-color: #ff9b42; }.core-stat-damage { --core-stat-color: var(--bad); }
.core-stat-visual { position: absolute !important; z-index: 1 !important; inset: 0; pointer-events: none; opacity: .5; }
.core-stat-visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--stat-level); max-height: 100%; background: linear-gradient(0deg, color-mix(in srgb, var(--core-stat-color) 28%, transparent), transparent); transition: height .5s ease; }
.core-stat-visual i { position: absolute; display: block; background: var(--core-stat-color); box-shadow: 0 0 7px var(--core-stat-color); }
.core-stat-control .core-stat-visual i { bottom: 5px; left: calc(9% + var(--core-index, 0) * 20%); width: 3px; height: 17px; transform-origin: bottom; animation: reactor-core-control 1.25s ease-in-out infinite alternate; }.core-stat-control .core-stat-visual i:nth-child(1) { --core-index: 0; }.core-stat-control .core-stat-visual i:nth-child(2) { --core-index: 1; animation-delay: -.2s; }.core-stat-control .core-stat-visual i:nth-child(3) { --core-index: 2; animation-delay: -.4s; }.core-stat-control .core-stat-visual i:nth-child(4) { --core-index: 3; animation-delay: -.6s; }.core-stat-control .core-stat-visual i:nth-child(5) { --core-index: 4; animation-delay: -.8s; }
.core-stat-heat .core-stat-visual i { left: calc(10% + var(--heat-index, 0) * 20%); bottom: -7px; width: 6px; height: 6px; border-radius: 50%; animation: reactor-core-heat 1.8s ease-out infinite; }.core-stat-heat .core-stat-visual i:nth-child(1) { --heat-index: 0; }.core-stat-heat .core-stat-visual i:nth-child(2) { --heat-index: 1; animation-delay: -.35s; }.core-stat-heat .core-stat-visual i:nth-child(3) { --heat-index: 2; animation-delay: -.7s; }.core-stat-heat .core-stat-visual i:nth-child(4) { --heat-index: 3; animation-delay: -1.05s; }.core-stat-heat .core-stat-visual i:nth-child(5) { --heat-index: 4; animation-delay: -1.4s; }
.core-stat-damage .core-stat-visual i { width: 2px; height: 15px; left: calc(8% + var(--damage-index, 0) * 21%); top: 30px; rotate: 38deg; animation: reactor-core-damage 2.1s steps(2, end) infinite; }.core-stat-damage .core-stat-visual i:nth-child(1) { --damage-index: 0; }.core-stat-damage .core-stat-visual i:nth-child(2) { --damage-index: 1; animation-delay: -.42s; }.core-stat-damage .core-stat-visual i:nth-child(3) { --damage-index: 2; animation-delay: -.84s; }.core-stat-damage .core-stat-visual i:nth-child(4) { --damage-index: 3; animation-delay: -1.26s; }.core-stat-damage .core-stat-visual i:nth-child(5) { --damage-index: 4; animation-delay: -1.68s; }
.core-stat-warning { border-color: color-mix(in srgb, var(--core-stat-color) 70%, var(--line)); }.core-stat-critical { animation: reactor-stat-alarm 1s ease-in-out infinite alternate; }
@keyframes reactor-core-control { from { scale: 1 .25; opacity: .25; } to { scale: 1 1; opacity: .9; } }
@keyframes reactor-core-heat { from { translate: 0 0; opacity: 0; } 18% { opacity: .8; } to { translate: 3px -52px; opacity: 0; scale: 2; } }
@keyframes reactor-core-damage { 0%, 72%, 100% { opacity: .08; translate: 0 0; } 76% { opacity: .9; translate: 4px -5px; } 82% { opacity: .25; translate: -3px 2px; } }
@keyframes reactor-stat-alarm { to { box-shadow: inset 0 0 18px color-mix(in srgb, var(--bad) 35%, transparent), 0 0 8px color-mix(in srgb, var(--bad) 25%, transparent); } }
.chart-shell { padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.chart-key { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; font-size: 8px; }
.chart-key span::before { content: ""; display: inline-block; width: 12px; height: 2px; margin: 0 5px 2px 0; background: currentColor; }
.key-output { color: var(--accent); }.key-demand { color: var(--bad); }.key-heat1 { color: var(--cyan); }.key-heat2 { color: var(--good); }.key-stability { color: var(--violet); }
#reactor-chart { display: block; width: 100%; height: 220px; background: rgba(0,0,0,.18); }

.continent-layout { display: grid; grid-template-columns: minmax(320px, 1.45fr) minmax(220px, .55fr); min-height: 360px; }
.radar-canvas-shell { position: relative; min-width: 0; overflow: hidden; }
.radar-canvas-shell::after { content: ""; position: absolute; pointer-events: none; left: 50%; top: 50%; width: min(42%, 185px); height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 80%, transparent), transparent); transform-origin: left center; animation: radar-sweep 5s linear infinite; opacity: .55; }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
#continent-map { display: block; width: 100%; height: 430px; background: #010808; border-right: 1px solid var(--line); }
.threat-list { max-height: 360px; overflow: auto; }
.threat-card, .division-card { padding: 11px; border-bottom: 1px solid var(--line); }
.threat-card h3, .division-card h3 { margin: 0; font-size: 10px; color: var(--bad); }
.threat-card.engaged { animation: contact-pulse 1.8s ease-in-out infinite; }
@keyframes contact-pulse { 50% { box-shadow: inset 3px 0 0 var(--bad); background: color-mix(in srgb, var(--bad) 7%, transparent); } }
.threat-card .threat-meta, .division-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.threat-card progress { margin-top: 8px; }
.unit-grid { display: grid; grid-template-columns: 1fr 1fr; }
.unit-card { padding: 11px; border-bottom: 1px solid var(--line); }
.unit-card:nth-child(odd) { border-right: 1px solid var(--line); }
.unit-card h3 { margin: 0; font-size: 10px; }
.unit-card p { min-height: 28px; margin: 7px 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.military-sustain { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--amber) 3%, transparent); }
.sustain-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); font-size: 8px; letter-spacing: .08em; }
.sustain-heading span { color: var(--muted); text-align: right; }
.sustain-resource { padding: 10px 11px; }
.sustain-resource + .sustain-resource { border-left: 1px solid var(--line); }
.sustain-resource strong { display: block; color: var(--cyan); font-size: 11px; }
.sustain-resource span { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.sustain-resource.critical strong, .sustain-resource.critical span { color: var(--red); }
.sustain-order { grid-column: 1 / -1; padding: 8px 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 7px; letter-spacing: .05em; }
.unit-source { display: block; color: var(--accent); font-size: 7px; letter-spacing: .08em; }
.unit-controls { display: grid; grid-template-columns: 54px 1fr; gap: 6px; }
input[type="number"] { width: 100%; min-height: 30px; color: var(--text); border: 1px solid var(--line); background: var(--bg); padding: 5px; }
.force-actions { padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.force-actions span { color: var(--muted); font-size: 8px; }
.division-list { display: grid; grid-template-columns: 1fr 1fr; }
.division-assignment-note { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; letter-spacing: .06em; }
.division-card:nth-child(odd) { border-right: 1px solid var(--line); }
.division-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.division-card-header h3 { color: var(--accent); }
.division-card-header span { color: var(--muted); font-size: 8px; }
.division-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.division-fields label { color: var(--muted); font-size: 7px; }
.division-fields input, .division-fields select { display: block; width: 100%; margin-top: 4px; }
.division-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.combat-panel .event-log { max-height: 430px; }
.space-layout { display: grid; grid-template-columns: minmax(420px, 1.6fr) minmax(230px, .4fr); min-height: 480px; }
.radar-canvas-shell { min-width: 0; overflow: hidden; background: #020509; }
#space-map { display: block; width: 100%; height: 480px; border-right: 1px solid var(--line); background: radial-gradient(circle, #0b1720, #030506 72%); }
.space-panel .threat-list { max-height: 480px; overflow: auto; }
.weather-layout { display: grid; grid-template-columns: minmax(390px, 1.5fr) minmax(230px, .5fr); min-height: 400px; }
.weather-map-shell { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--line); }
.weather-map-shell::after { content: ""; position: absolute; pointer-events: none; left: 50%; top: 50%; width: min(42%, 172px); height: 1px; opacity: .38; background: linear-gradient(90deg, rgba(120,230,255,.85), transparent); transform-origin: left center; animation: radar-sweep 7s linear infinite; }
#weather-map { display: block; width: 100%; height: 400px; background: #010808; }
.weather-legend { position: absolute; left: 10px; bottom: 9px; display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.16); background: rgba(3,9,12,.82); font-size: 7px; letter-spacing: .08em; }
.weather-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 4px -1px 0; border-radius: 50%; background: currentColor; }
.rain-key { color: #3b82f6; }.acid-key { color: #42dc73; }.storm-key { color: #f2f2e8; }.heat-key { color: #ff665e; }
.weather-forecast { max-height: 400px; overflow: auto; }
.forecast-row, .damage-row, .repair-bot-row { padding: 9px 11px; border-bottom: 1px solid var(--line); font-size: 9px; }
.forecast-row { display: grid; gap: 5px; }
.forecast-row strong { color: var(--text); }
.forecast-row small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.forecast-row span, .damage-row span, .repair-bot-row span { color: var(--muted); }
.repair-bots, .damage-targets { display: grid; }
.repair-bot-row { display: grid; grid-template-columns: 1fr minmax(130px, 1.2fr); align-items: center; gap: 8px; }
.repair-bot-row select { width: 100%; }
.damage-row { display: flex; justify-content: space-between; gap: 8px; }
.upgrade-groups { display: grid; grid-template-columns: repeat(3, 1fr); }
.upgrade-group { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.upgrade-group h3 { margin: 0; padding: 9px 10px; color: var(--accent); border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .1em; }
.upgrade-card { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.upgrade-card:last-child { border-bottom: 0; }
.upgrade-card strong { display: block; font-size: 9px; }
.upgrade-card p { min-height: 28px; margin: 5px 0 8px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.upgrade-card .button { width: 100%; }
.tutorial-panel { position: fixed; z-index: 12; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 36px)); padding: 15px; border: 1px solid var(--accent); background: var(--surface-raised); box-shadow: 0 14px 48px rgba(0,0,0,.62); }
.tutorial-panel.hidden { display: none; }
.tutorial-panel strong { display: block; margin-top: 5px; color: var(--accent); font-size: 12px; }
.tutorial-panel p { color: var(--text); font-size: 10px; line-height: 1.55; }
.tutorial-actions { display: flex; gap: 7px; }
.game-over { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.82); }
.game-over[hidden] { display: none; }
.game-over-card { width: min(520px, 100%); padding: 28px; border: 1px solid var(--bad); background: var(--surface-raised); text-align: center; }
.game-over-card h2 { margin: 10px 0; color: var(--bad); font-size: 22px; }
.game-over-card p { color: var(--muted); font-size: 10px; line-height: 1.5; }

.module-list { display: grid; grid-template-columns: 1fr 1fr; }
.empty-state { grid-column: 1 / -1; padding: 34px 18px; text-align: center; color: var(--muted); font-size: 10px; }
.module-card { min-width: 0; padding: 12px; border-bottom: 1px solid var(--line); }
.module-card:nth-child(odd) { border-right: 1px solid var(--line); }
.module-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 11px; }
.module-card-header h3 { margin: 0; font-size: 10px; }
.module-card-header span { color: var(--muted); font-size: 8px; }
.module-visual { --cycle-scale: 1; --module-glow: var(--accent); --module-secondary: var(--cyan); position: relative; height: 108px; margin: 0 0 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--module-glow) 35%, var(--line)); background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--module-glow) 13%, transparent), transparent 58%), rgba(0,0,0,.24); }
.power-high .module-visual { --cycle-scale: .62; }
.power-low .module-visual { --cycle-scale: 1.8; }
.mode-uranium .module-visual, .mode-refinedUranium .module-visual { --module-glow: #70d987; --module-secondary: var(--violet); }
.mode-ore .module-visual { --module-glow: var(--accent); --module-secondary: #b58b55; }
.mode-alloy .module-visual { --module-glow: var(--cyan); --module-secondary: var(--accent); }
.mode-fuel .module-visual { --module-glow: #f2b632; --module-secondary: #ff7b42; }
.module-batteryBank .module-visual { --module-glow: #5cd5dd; --module-secondary: #70d987; }
.module-recruitmentModule .module-visual { --module-glow: #8ed8e2; --module-secondary: #f2b632; }
.module-visual-state { position: absolute; z-index: 8; right: 7px; top: 6px; color: color-mix(in srgb, var(--module-glow) 78%, white); font-size: 7px; letter-spacing: .08em; }
.module-idle .module-visual { filter: grayscale(.8); opacity: .56; }
.module-damaged .module-visual { animation: module-fault calc(1.2s * var(--cycle-scale)) steps(2, end) infinite; }
.module-idle .module-visual *, .module-idle .module-visual::before, .module-idle .module-visual::after { animation-play-state: paused !important; }
@keyframes module-fault { 78%, 86% { opacity: 1; } 82% { opacity: .58; } }

.hydro-chamber { position: absolute; inset: 24px 12px 19px; display: flex; justify-content: space-around; align-items: flex-end; border-bottom: 3px solid color-mix(in srgb, var(--module-secondary) 70%, transparent); }
.hydro-chamber::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 23%, color-mix(in srgb, var(--module-glow) 12%, transparent) 24% 25%); }
.hydro-plant { position: relative; width: 3px; height: 39px; border-radius: 3px; background: var(--module-glow); transform-origin: center bottom; animation: hydro-grow calc(2.7s * var(--cycle-scale)) ease-in-out infinite alternate; }
.hydro-plant::before, .hydro-plant::after { content: ""; position: absolute; width: 13px; height: 7px; top: 10px; border: 2px solid var(--module-glow); border-radius: 100% 0 100% 0; }
.hydro-plant::before { right: 1px; transform: rotate(22deg); }.hydro-plant::after { left: 1px; top: 23px; transform: scaleX(-1) rotate(22deg); }
.hydro-plant:nth-child(2) { height: 51px; animation-delay: -.8s; }.hydro-plant:nth-child(3) { height: 44px; animation-delay: -1.6s; }.hydro-plant:nth-child(4) { height: 34px; animation-delay: -2.1s; }
.hydro-circulation { position: absolute; inset: 0; }
.hydro-bubble { position: absolute; bottom: 8px; width: 5px; height: 5px; border: 1px solid var(--module-secondary); border-radius: 50%; animation: hydro-bubble calc(2.2s * var(--cycle-scale)) linear infinite; }
.hydro-bubble:nth-child(1) { left: 9%; }.hydro-bubble:nth-child(2) { left: 28%; animation-delay: -.5s; }.hydro-bubble:nth-child(3) { left: 51%; animation-delay: -1.1s; }.hydro-bubble:nth-child(4) { left: 72%; animation-delay: -1.7s; }.hydro-bubble:nth-child(5) { left: 89%; animation-delay: -.9s; }
@keyframes hydro-grow { from { transform: scaleY(.76) rotate(-2deg); filter: brightness(.72); } to { transform: scaleY(1) rotate(2deg); filter: brightness(1.3); } }
@keyframes hydro-bubble { from { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: .8; } to { transform: translateY(-82px) scale(1.3); opacity: 0; } }

.extractor-rig { position: absolute; left: 19%; top: 20px; width: 62%; height: 67px; border-left: 2px solid var(--module-glow); border-right: 2px solid var(--module-glow); }
.extractor-rig::before { content: ""; position: absolute; left: -7px; right: -7px; top: 0; height: 4px; background: var(--module-glow); }
.extractor-cable { position: absolute; width: 2px; height: 27px; left: calc(50% - 1px); top: 4px; background: var(--module-secondary); animation: extractor-feed calc(1.5s * var(--cycle-scale)) ease-in-out infinite alternate; }
.extractor-head { position: absolute; left: calc(50% - 18px); top: 31px; width: 36px; height: 12px; border: 2px solid var(--module-glow); background: color-mix(in srgb, var(--module-glow) 20%, black); animation: extractor-hammer calc(.55s * var(--cycle-scale)) cubic-bezier(.2,.8,.3,1) infinite; }
.extractor-bit { position: absolute; left: calc(50% - 6px); top: 43px; width: 12px; height: 23px; border-left: 5px double var(--module-secondary); border-right: 5px double var(--module-secondary); animation: extractor-spin calc(.42s * var(--cycle-scale)) linear infinite; }
.extractor-belt { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 10px; border-top: 2px solid var(--module-glow); }
.ore-chunk { position: absolute; top: -8px; width: 8px; height: 7px; background: var(--module-secondary); clip-path: polygon(20% 0,100% 18%,80% 100%,0 75%); animation: ore-belt calc(2.4s * var(--cycle-scale)) linear infinite; }
.ore-chunk:nth-child(2) { animation-delay: -.6s; }.ore-chunk:nth-child(3) { animation-delay: -1.2s; }.ore-chunk:nth-child(4) { animation-delay: -1.8s; }
@keyframes extractor-feed { to { height: 34px; } }
@keyframes extractor-hammer { 0%, 62% { transform: translateY(0); } 74% { transform: translateY(7px); } 100% { transform: translateY(0); } }
@keyframes extractor-spin { to { transform: rotateY(180deg); } }
@keyframes ore-belt { from { left: -4%; opacity: 0; } 12%, 88% { opacity: 1; } to { left: 98%; opacity: 0; } }

.refinery-vessel { position: absolute; left: 14px; top: 18px; width: 76px; height: 76px; border: 2px solid var(--module-glow); border-radius: 50%; }
.refinery-core { position: absolute; inset: 25px; border-radius: 50%; background: var(--module-secondary); box-shadow: 0 0 16px var(--module-glow); animation: refinery-pulse calc(1.4s * var(--cycle-scale)) ease-in-out infinite; }
.refinery-ring { position: absolute; inset: 8px; border: 2px dashed var(--module-glow); border-radius: 50%; animation: refinery-spin calc(3s * var(--cycle-scale)) linear infinite; }
.refinery-ring.ring-two { inset: 16px; border-style: dotted; animation-direction: reverse; animation-duration: calc(2s * var(--cycle-scale)); }
.refinery-flow { position: absolute; left: 102px; right: 12px; top: 50%; height: 2px; background: color-mix(in srgb, var(--module-glow) 45%, transparent); }
.refinery-particle { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--module-secondary); box-shadow: 0 0 8px var(--module-glow); animation: refinery-output calc(1.8s * var(--cycle-scale)) linear infinite; }
.refinery-particle:nth-child(2) { animation-delay: -.36s; }.refinery-particle:nth-child(3) { animation-delay: -.72s; }.refinery-particle:nth-child(4) { animation-delay: -1.08s; }.refinery-particle:nth-child(5) { animation-delay: -1.44s; }
@keyframes refinery-spin { to { transform: rotate(360deg); } }
@keyframes refinery-pulse { 50% { transform: scale(1.35); filter: brightness(1.45); } }
@keyframes refinery-output { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 7px); opacity: 0; } }

.strata-bore { position: absolute; left: 20%; top: 10px; width: 54px; height: 91px; border-bottom: 3px solid var(--module-secondary); }
.strata-shaft { position: absolute; left: 25px; top: 0; width: 4px; height: 68px; background: repeating-linear-gradient(0deg, var(--module-glow) 0 4px, transparent 4px 8px); animation: strata-drive calc(1.1s * var(--cycle-scale)) ease-in-out infinite alternate; }
.strata-bit { position: absolute; left: 18px; top: 61px; width: 18px; height: 23px; background: var(--module-glow); clip-path: polygon(50% 100%,0 0,100% 0); animation: strata-vibrate calc(.18s * var(--cycle-scale)) linear infinite alternate; }
.strata-scan { position: absolute; left: 53%; top: 14px; width: 90px; height: 82px; overflow: hidden; }
.seismic-wave { position: absolute; left: 0; top: 31px; width: 14px; height: 14px; border: 2px solid var(--module-secondary); border-radius: 50%; animation: seismic-scan calc(2.5s * var(--cycle-scale)) ease-out infinite; }
.seismic-wave.wave-two { animation-delay: -.83s; }.seismic-wave.wave-three { animation-delay: -1.66s; }
@keyframes strata-drive { to { transform: translateY(8px); } }
@keyframes strata-vibrate { to { transform: translateX(3px); filter: brightness(1.4); } }
@keyframes seismic-scan { from { transform: scale(.2); opacity: .9; } to { transform: scale(7); opacity: 0; } }
.battery-bank { position: absolute; left: 17px; right: 17px; top: 27px; height: 57px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.battery-cell { position: relative; border: 2px solid var(--module-glow); background: color-mix(in srgb, var(--module-glow) 12%, transparent); overflow: hidden; }
.battery-cell::before { content: ""; position: absolute; inset: auto 3px 3px; height: 72%; background: linear-gradient(0deg, var(--module-secondary), var(--module-glow)); transform-origin: center bottom; animation: battery-charge calc(1.8s * var(--cycle-scale)) ease-in-out infinite alternate; box-shadow: 0 0 10px var(--module-glow); }
.battery-cell:nth-child(2)::before { animation-delay: -.3s; }.battery-cell:nth-child(3)::before { animation-delay: -.6s; }.battery-cell:nth-child(4)::before { animation-delay: -.9s; }.battery-cell:nth-child(5)::before { animation-delay: -1.2s; }.battery-cell:nth-child(6)::before { animation-delay: -1.5s; }
.battery-conduit { position: absolute; left: 10%; right: 10%; bottom: 12px; height: 2px; background: color-mix(in srgb, var(--module-glow) 35%, transparent); }
.battery-pulse { position: absolute; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--module-secondary); box-shadow: 0 0 8px var(--module-glow); animation: battery-flow calc(1.5s * var(--cycle-scale)) linear infinite; }
.battery-pulse:nth-child(2) { animation-delay: -.375s; }.battery-pulse:nth-child(3) { animation-delay: -.75s; }.battery-pulse:nth-child(4) { animation-delay: -1.125s; }
@keyframes battery-charge { from { transform: scaleY(.25); opacity: .55; } to { transform: scaleY(1); opacity: 1; } }
@keyframes battery-flow { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 6px); opacity: 0; } }
.recruitment-chamber { position: absolute; left: calc(50% - 38px); top: 17px; width: 76px; height: 74px; border: 1px solid var(--module-glow); border-radius: 38px 38px 8px 8px; overflow: hidden; background: color-mix(in srgb, var(--module-glow) 7%, transparent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--module-glow) 16%, transparent); }
.recruitment-silhouette { position: absolute; left: calc(50% - 11px); bottom: 4px; width: 22px; height: 38px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--module-secondary) 0 18%, var(--module-glow) 19% 100%); clip-path: polygon(28% 0,72% 0,80% 20%,100% 40%,84% 100%,16% 100%,0 40%,20% 20%); animation: recruitment-materialize calc(2.1s * var(--cycle-scale)) ease-in-out infinite alternate; }
.recruitment-scan { position: absolute; z-index: 3; left: 5px; right: 5px; top: 10px; height: 2px; background: var(--module-secondary); box-shadow: 0 0 9px var(--module-secondary); animation: recruitment-scan calc(1.5s * var(--cycle-scale)) ease-in-out infinite alternate; }
.recruitment-assembly { position: absolute; left: 11px; right: 11px; bottom: 7px; height: 3px; display: flex; gap: 5px; }
.recruitment-step { flex: 1; background: var(--module-glow); box-shadow: 0 0 5px var(--module-glow); animation: recruitment-step calc(1.7s * var(--cycle-scale)) ease-in-out infinite; }.recruitment-step:nth-child(2) { animation-delay: -.34s; }.recruitment-step:nth-child(3) { animation-delay: -.68s; }.recruitment-step:nth-child(4) { animation-delay: -1.02s; }.recruitment-step:nth-child(5) { animation-delay: -1.36s; }
@keyframes recruitment-materialize { from { opacity: .28; filter: blur(1px); transform: scale(.92); } to { opacity: 1; filter: brightness(1.25); transform: scale(1); } }
@keyframes recruitment-scan { from { transform: translateY(0); } to { transform: translateY(52px); } }
@keyframes recruitment-step { 0%, 55%, 100% { opacity: .2; } 25% { opacity: 1; } }
.module-controls { display: grid; gap: 10px; }
.battery-readout { padding: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--cyan) 4%, transparent); }
.battery-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 8px; }
.battery-copy span { color: var(--muted); }
.battery-meter { margin-bottom: 0; }
.recruitment-readout { padding: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--cyan) 4%, transparent); }
.recruitment-copy { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; }
.recruitment-copy span { color: var(--muted); text-align: right; }
.recruitment-meter { margin-bottom: 8px; }
.recruitment-order-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.recruitment-auto-state { display: flex; align-items: center; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--cyan) 55%, var(--line)); color: var(--cyan); font-size: 7px; letter-spacing: .08em; white-space: nowrap; }
.recruitment-auto-state.paused { border-color: var(--amber); color: var(--amber); }
.module-power-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.module-power-row .power-control { min-width: 0; }
.module-bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.module-status { color: var(--muted); font-size: 8px; line-height: 1.5; }

.event-log { list-style: none; margin: 0; padding: 0; max-height: 386px; overflow: auto; }
.event-log li { display: grid; grid-template-columns: 54px 1fr; gap: 9px; padding: 8px 11px; border-bottom: 1px solid var(--line); font-size: 9px; line-height: 1.35; }
.event-log time { color: var(--muted); }
.event-log strong { display: block; margin-bottom: 2px; color: var(--accent); font-size: 8px; }
.event-log li.impact-event { border-left: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 6%, transparent); }

.toast { position: fixed; right: 18px; bottom: 18px; max-width: min(380px, calc(100vw - 36px)); padding: 11px 14px; border: 1px solid var(--line-bright); background: var(--surface-raised); box-shadow: 0 10px 30px rgba(0,0,0,.38); font-size: 10px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { border-color: var(--bad); color: var(--bad); }
noscript { display: block; padding: 2rem; color: var(--bad); }

@media (max-width: 1080px) {
  .station-panel, .construction-panel, .events-panel, .force-panel, .combat-panel, .engineering-panel { grid-column: span 5; }
  .resources-panel, .reactor-panel, .modules-panel, .continent-panel, .divisions-panel, .weather-panel, .upgrades-panel { grid-column: span 7; }
  .space-panel { grid-column: span 12; }
  .reactor-metrics { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .topbar, .commandbar { align-items: flex-start; flex-direction: column; }
  .topbar-readouts { width: 100%; overflow-x: auto; }
  .readout, .connection { flex: 1; min-width: 105px; }
  .commandbar .right { width: 100%; }
  .dashboard { display: block; padding: 10px; }
  .panel { margin-bottom: 10px; }
  .resource-grid, .module-list, .core-controls, .continent-layout, .division-list, .space-layout, .weather-layout, .upgrade-groups { grid-template-columns: 1fr; }
  #continent-map { border-right: 0; border-bottom: 1px solid var(--line); }
  #space-map { border-right: 0; border-bottom: 1px solid var(--line); }
  .weather-map-shell { border-right: 0; border-bottom: 1px solid var(--line); }
  .resource-card, .resource-card:nth-child(odd), .module-card, .module-card:nth-child(odd), .core-card + .core-card { border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .resource-card:last-child, .module-card:last-child { border-bottom: 0; }
  .reactor-metrics { grid-template-columns: 1fr 1fr; }
  .station-summary { grid-template-columns: 1fr; }
  .division-fields { grid-template-columns: 1fr 1fr; }
  .metric + .metric { border-left: 0; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}