html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: #c8ffcc;
  font-family: "IBM Plex Mono", "JetBrains Mono", "Courier New", monospace;
}

/* =========================
   APP LAYOUT
   ========================= */

#app-shell {
  display: flex;
  height: 100%;
}

#terminal-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 58%;
  min-width: 320px;
  height: 100%;
  border-right: 1px solid #132513;
  position: relative;
}

/* =========================
   TERMINAL
   ========================= */


#display-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  border-bottom: 1px solid #132513;
  background: linear-gradient(to bottom, rgba(8,16,9,0.95), rgba(7,14,8,0.85));
}

.hidden { display: none !important; }

#display-mode-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #9fd99f;
}

#display-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

#map-mode-toggle,
#dev-map-toggle {
  border: 1px solid #2e5532;
  background: #09130a;
  color: #b8f0bc;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  cursor: pointer;
}

#map-mode-toggle:hover,
#dev-map-toggle:hover {
  border-color: #4a8650;
}

#terminal {
  flex: 1;
  padding: 22px 24px;
  font-size: 14px;
  line-height: 1.62;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  overflow-y: auto;
  scrollbar-color: #1f3b1f #050805;
  scrollbar-width: thin;
}

#terminal::-webkit-scrollbar { width: 10px; }
#terminal::-webkit-scrollbar-track { background: #050805; }
#terminal::-webkit-scrollbar-thumb {
  background-color: #1f3b1f;
  border-radius: 8px;
  border: 2px solid #050805;
}
#terminal::-webkit-scrollbar-thumb:hover { background-color: #2c5a2c; }

.terminal-line { display: block; margin-bottom: 2px; }
.terminal-line.command { color: #ccffcf; font-weight: 600; }
.terminal-line.banner { color: #8ac28f; letter-spacing: 0.1em; }

.terminal-line.event { color: #9fd99f; }
.terminal-line.warning { color: #ffd166; font-weight: 700; }
.terminal-line.assault { color: #f0a1a1; font-weight: 600; }
.terminal-line.intent { color: #b6f3b8; }

.terminal-line.delta {
  font-weight: 600;
}

.terminal-line.heat-critical { color: #ff5a5a; }
.terminal-line.heat-damaged { color: #ff9c52; }
.terminal-line.heat-alert { color: #ffd766; }
.terminal-line.heat-unknown { color: #c7c7c7; }
.terminal-line.heat-stable { color: #76d39b; }

/* =========================
   COMMS DEGRADATION (TERMINAL)
   ========================= */

#terminal-container.comms-alert #terminal { opacity: 0.95; }
#terminal-container.comms-damaged #terminal { opacity: 0.85; }

#terminal-container.comms-compromised #terminal {
  opacity: 0.75;
  text-shadow: 0 0 6px rgba(120, 220, 140, 0.25);
}

#new-output-indicator {
  position: absolute;
  right: 24px;
  top: 60px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #b6f3b8;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
  cursor: pointer;
  border: 1px solid rgba(75, 124, 75, 0.42);
  padding: 3px 7px;
  background: rgba(6, 14, 7, 0.88);
}

#new-output-indicator.visible { opacity: 0.7; }
#new-output-indicator:hover { opacity: 0.95; }

#offline-banner {
  position: absolute;
  left: 24px;
  top: 16px;
  padding: 4px 8px;
  background: #2a0f0f;
  border: 1px solid #a83838;
  color: #ffd2d2;
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#offline-banner.visible { opacity: 0.92; }

#idle-tip {
  position: absolute;
  left: 24px;
  bottom: 86px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #9fd99f;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#idle-tip.visible { opacity: 0.6; }

#idle-tip .hint-primary {
  color: #9fd99f;
  transition: opacity 0.25s ease;
}

#idle-tip .hint-primary.faded {
  opacity: 0.35;
}

#idle-tip .hint-secondary {
  color: #baf3bf;
  opacity: 1;
}

#idle-tip .hint-sep {
  opacity: 0.5;
  margin: 0 8px;
}

#input-focus-zone {
  margin: 0 24px 8px;
  height: 26px;
  border: 1px solid #254225;
  background: linear-gradient(180deg, #0a140a, #081008);
  color: transparent;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
  cursor: text;
  opacity: 0.78;
}

#input-focus-zone:hover {
  border-color: #3a6a3d;
  opacity: 0.95;
}

/* =========================
   INPUT + STATUS
   ========================= */

#terminal-input-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px 16px;
  font-size: 14px;
  background: linear-gradient(to top, rgba(8, 16, 9, 0.96), rgba(8, 16, 9, 0.5));
  border-top: 1px solid #132513;
}

#terminal-prompt { color: #9fd99f; }

#terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #c8ffcc;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

#terminal-input:focus-visible {
  outline: 2px solid #86dd95;
  outline-offset: 2px;
}

#terminal-input-form.disabled { opacity: 0.5; }

#status-bar {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: 12px;
  border-top: 1px solid #1f3b1f;
  background: #050805;
  color: #9fd99f;
}

/* =========================
   SIDE PANEL
   ========================= */

#side-panel {
  flex: 1 1 42%;
  min-width: 260px;
  background: #050805;
  display: flex;
  flex-direction: column;
}

/* =========================
   SECTOR MAP
   ========================= */

#sector-map {
  padding: 20px;
  border-bottom: 1px solid #132513;
}

.sector-map-header {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #8ac28f;
  margin-bottom: 4px;
}

.sector-map-meta {
  font-size: 11px;
  color: #6aa56f;
  margin-bottom: 14px;
}

/* asymmetry cue */
.sector-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 62px;
  gap: 12px;
}

/* =========================
   SECTOR CARDS
   ========================= */

.sector-card {
  border: 1px solid #1a2f1a;
  padding: 10px;
  background:
    linear-gradient(180deg, #071007, #050b05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 62px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sector-name {
  font-size: 12px;
  color: #c8ffcc;
}

.sector-status {
  font-size: 11px;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.sector-role-glyph {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #7db983;
  opacity: 0.72;
}

.sector-structure-id {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #6aa56f;
  opacity: 0.75;
}

/* =========================
   SECTOR STATES
   ========================= */

.sector-card.stable { border-color: #1f3b1f; }

.sector-card.alert {
  border-color: #745b18;
  background: #120f06;
}

.sector-card.damaged {
  border-color: #6c2b2b;
  background: #140707;
}

.sector-card.compromised {
  border-color: #a83838;
  background: #1c0707;
}

.sector-card.alert .sector-status { color: #d8b66a; }
.sector-card.damaged .sector-status { color: #e39a9a; }
.sector-card.compromised .sector-status { color: #f0a1a1; }

/* =========================
   ROLES (SUBTLE, NOT LOUD)
   ========================= */

.sector-card.role-authority {
  border-width: 2px;
}

.sector-card.role-amplifier,
.sector-card.role-mitigation {
  box-shadow: inset 0 0 6px rgba(98, 180, 110, 0.15);
}

.sector-card.role-goal { opacity: 0.85; }
.sector-card.role-fabrication { opacity: 0.9; }
.sector-card.role-egress,
.sector-card.role-ingress { opacity: 0.8; }

.sector-card.recent-hit {
  border-color: #f0a1a1;
  box-shadow: 0 0 10px rgba(240, 161, 161, 0.35);
}

.sector-card.repair-active {
  box-shadow: inset 0 0 8px rgba(122, 210, 140, 0.25);
}

/* =========================
   MAP DEGRADATION
   ========================= */

.map-degraded { opacity: 0.92; }
.map-damaged { opacity: 0.8; }
.map-compromised { opacity: 0.7; }
.map-failed { opacity: 0.45; }

/* =========================
   SYSTEM DASHBOARD
   ========================= */

#system-panel {
  padding: 14px 20px 18px;
  background: linear-gradient(
    to bottom,
    rgba(6, 12, 7, 0.96),
    rgba(4, 8, 5, 0.99)
  );
  border-top: 1px solid #132513;

  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a7d9ab;
}

#system-panel::before {
  content: "SYSTEM STATUS";
  display: block;
  margin-bottom: 8px;
  padding-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: #6aa56f;
  border-bottom: 1px solid #132513;
}

.system-panel-line {
  white-space: pre;
  padding: 2px 0;
  opacity: 0.92;
}

.system-panel-line:not(:last-child) {
  border-bottom: 1px dotted rgba(30, 60, 35, 0.25);
}

/* degradation semantics */

#system-panel.panel-degraded { opacity: 0.82; }
#system-panel.panel-compromised {
  opacity: 0.65;
  text-shadow: 0 0 4px rgba(140, 220, 160, 0.25);
}
#system-panel.panel-failed {
  opacity: 0.45;
  filter: blur(0.35px) saturate(0.7);
}

/* =========================
   FX
   ========================= */

.flicker {
  animation: flicker 0.15s linear;
}

@keyframes flicker {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

@keyframes pulse {
  0% { background-color: rgba(255, 255, 255, 0.18); }
  100% { background-color: transparent; }
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {
  #app-shell { flex-direction: column; }
  #terminal-container {
    border-right: none;
    border-bottom: 1px solid #132513;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .flicker {
    animation: none !important;
  }
  .terminal-line.delta {
    animation: none !important;
  }
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


#map-mode-panel {
  flex: 1;
  min-width: 0;
  background: #030703;
  display: flex;
  flex-direction: column;
}

#map-mode-panel.hidden { display: none; }

#map-mode-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px 8px;
  border-bottom: 1px solid #132513;
  background: linear-gradient(90deg, rgba(4,10,5,0.98), rgba(3,8,4,0.95));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: #b6e7b8;
}

#map-mode-title {
  font-weight: 700;
}

#map-mode-focus {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-focus-button {
  border: 1px solid #2a4a2f;
  background: rgba(6, 16, 8, 0.9);
  color: #a7d8ab;
  font: 11px "IBM Plex Mono", monospace;
  padding: 4px 8px;
  cursor: pointer;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.map-focus-button.active {
  border-color: #7bbf86;
  color: #e1ffe6;
  background: rgba(14, 32, 16, 0.95);
  box-shadow: 0 0 10px rgba(123, 191, 134, 0.18);
}

#app-shell.map-mode #side-panel,
#app-shell.map-mode #terminal,
#app-shell.map-mode #terminal-input-form,
#app-shell.map-mode #status-bar,
#app-shell.map-mode #input-focus-zone,
#app-shell.map-mode #idle-tip,
#app-shell.map-mode #new-output-indicator,
#app-shell.map-mode #offline-banner { display: none; }

#app-shell.dev-map #side-panel { display: none; }

#app-shell.dev-map #terminal-container {
  flex: 0 0 45%;
}

#app-shell.dev-map #map-mode-panel { display: flex; }

#app-shell.map-mode #terminal-container {
  flex: 0 0 250px;
  border-right: 1px solid #132513;
}

#app-shell.map-mode #map-mode-panel { display: flex; }

#map-mode-map {
  flex: 1;
  border-bottom: 1px solid #132513;
  padding: 12px 22px 18px;
}

#map-mode-log {
  min-height: 160px;
  max-height: 230px;
  overflow-y: auto;
  padding: 10px 22px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #a9ddad;
  background: rgba(3, 8, 4, 0.96);
}

.map-mode-log-line {
  white-space: pre-wrap;
  margin: 2px 0;
  opacity: 0.92;
}

.map-mode-log-line.faded {
  opacity: 0.5;
}

.map-canvas {
  width: 100%;
  min-height: 420px;
  border: 1px solid #1a311d;
  background: radial-gradient(circle at center, rgba(11,26,13,0.9), rgba(4,9,5,0.98));
}

.map-node-label {
  font: 12px "IBM Plex Mono", monospace;
  fill: #bcefbf;
  letter-spacing: 0.08em;
}

.map-link {
  stroke: #365f3c;
  stroke-width: 2;
}

.map-link.ingress-link {
  stroke: #9d6f2d;
  stroke-dasharray: 4 4;
}

.map-link.logistics-link {
  stroke: #7bbf86;
  stroke-width: 2.4;
  stroke-dasharray: 6 5;
  opacity: 0.9;
}

.map-defense-ring {
  fill: none;
  stroke: rgba(108, 182, 122, 0.35);
  stroke-width: 2;
}

.map-overlay-text {
  font: 11px "IBM Plex Mono", monospace;
  fill: #b7e4bc;
  letter-spacing: 0.08em;
}

.map-node.status-DAMAGED circle,
.map-node.status-COMPROMISED circle {
  stroke: #bb6363;
}