@import './telemetry_overlay.19c6133b835f1262.css';

:root {
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --bg-metal:#111317;
  --graphite:#1a1d24;
  --steel:#2e3440;
  --hazard-amber:#ffb703;
  --orange:#fb8500;
  --lockdown-red:#e63946;
  --white:#eceff4;
  --cobalt:#4a6fa5;
  --muted:#9299a5;
  --line:#363b44;
  color-scheme:dark;
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,'Courier New',monospace;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  padding:0;
  height:100dvh;
  width:100vw;
  background-color:#0b0d10;
  background-image:radial-gradient(#31353b60 .65px,transparent .65px);
  background-size:7px 7px;
  color:var(--white);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation
}

button,input {
  font:inherit
}

button {
  cursor:pointer;
  color:inherit;
  -webkit-tap-highlight-color:transparent
}

button:focus-visible,input:focus-visible,.file-button:focus-within {
  outline:2px solid var(--hazard-amber);
  outline-offset:3px
}

button:active:not(:disabled),.file-button:active {
  transform:translateY(3px)
}

button:disabled {
  cursor:default
}

button,dialog,.signal-panel {
  border-radius:0
}

button {
  touch-action:manipulation
}

button svg {
  pointer-events:none
}

button[hidden],[hidden] {
  display:none!important
}

#viewport-container {
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  max-width:440px;
  margin:0 auto;
  box-sizing:border-box;
  padding-top:var(--sat);
  padding-bottom:var(--sab);
  background:var(--bg-metal);
  border-inline:1px solid #333840;
  box-shadow:0 0 100px #0008;
  isolation:isolate
}

#viewport-container:before,#viewport-container:after {
  content:'';
  position:absolute;
  z-index:9;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--hazard-amber)
}

#viewport-container:after {
  top:auto;
  bottom:0;
  height:4px;
  background:repeating-linear-gradient(135deg,var(--hazard-amber) 0 7px,#111317 7px 14px)
}

.telemetry {
  padding:14px 20px 12px;
  flex:0 0 18%;
  min-height:157px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(110deg,#20242a,#15171c 60%)
}

.identity-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}

.eyebrow {
  display:block;
  font-size:8px;
  letter-spacing:2px;
  color:var(--muted);
  font-weight:700
}

.brand h1 {
  font-family:Impact,'Arial Narrow',sans-serif;
  font-stretch:condensed;
  letter-spacing:1px;
  font-size:27px;
  line-height:1;
  margin:5px 0 0;
  display:flex;
  gap:5px;
  align-items:center;
  font-weight:900
}

.brand h1>span {
  color:var(--hazard-amber)
}

.brand-cross {
  font:22px monospace;
  color:var(--hazard-amber);
  margin-left:4px
}

.system-controls {
  display:flex;
  gap:3px
}

.icon-button {
  background:transparent;
  border:1px solid transparent;
  min-width:52px;
  min-height:52px;
  font-size:19px;
  color:#b4bbc6
}

.icon-button:hover {
  border-color:var(--line);
  background:#252a31
}

.telemetry-divider {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff16;
  padding:8px 0 7px;
  color:#7e8693;
  font-size:7px;
  letter-spacing:1px
}

.telemetry-divider b {
  font-weight:500;
  color:#c2c6cf
}

.live-led {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--hazard-amber);
  margin-right:4px;
  box-shadow:0 0 7px #ffb70344
}

.gauge-row+.gauge-row {
  margin-top:8px
}

.gauge-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:5px;
  font-size:8px;
  letter-spacing:1px
}

.gauge-label strong {
  font-size:12px;
  letter-spacing:0
}

.gauge-label small {
  font-size:9px;
  font-weight:400;
  color:var(--muted)
}

.segmented-track {
  height:7px;
  background:#0b0d11;
  position:relative
}

.segmented-track:after {
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 3px),#171a20 calc(10% - 3px),#171a20 10%)
}

.segmented-track>div {
  height:100%;
  width:100%;
  background:var(--white)
}

.thermal .gauge-label {
  color:var(--muted)
}

.thermal strong,.heat-symbol {
  color:var(--hazard-amber)
}

.heat-track {
  height:5px;
  position:relative;
  background:repeating-linear-gradient(90deg,#343941 0 3px,transparent 3px 5px)
}

.heat-track>div {
  height:100%;
  width:0;
  background:var(--hazard-amber)
}

.heat-track>i {
  position:absolute;
  left:75%;
  top:-2px;
  height:9px;
  border-left:1px solid var(--orange)
}

.thermal-warning .heat-track>div {
  background:var(--lockdown-red)
}

.thermal-warning #heat-value {
  color:var(--lockdown-red)
}

.staging {
  padding:17px 20px 12px;
  flex:1 1 52%;
  display:flex;
  flex-direction:column;
  min-height:0;
  position:relative;
  background:linear-gradient(90deg,#191c221f 1px,transparent 1px),linear-gradient(#191c221f 1px,transparent 1px);
  background-size:16px 16px
}

.stage-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0
}

.stage-heading .eyebrow {
  font-size:7px;
  letter-spacing:1.5px;
  color:var(--hazard-amber)
}

.stage-heading h2 {
  font-family:Impact,'Arial Narrow',sans-serif;
  font-size:30px;
  letter-spacing:1.2px;
  font-weight:800;
  margin:3px 0 0;
  line-height:1.1
}

.sector-badge {
  display:flex;
  align-items:center;
  gap:9px;
  position:relative;
  padding-left:12px;
  border-left:1px solid var(--line)
}

.sector-badge span {
  font-size:7px;
  letter-spacing:1px;
  writing-mode:vertical-rl
}

.sector-badge b {
  font-family:Impact,'Arial Narrow',sans-serif;
  font-size:42px;
  line-height:1;
  color:#555e6a;
  font-weight:400
}

.stage-meta {
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  font-size:7px;
  letter-spacing:.7px;
  color:var(--muted);
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  flex-shrink:0
}

.scan-mark {
  display:inline-block;
  width:6px;
  height:6px;
  border:1px solid var(--hazard-amber);
  margin-right:4px
}

.key-ready {
  color:var(--hazard-amber)!important
}

.traversal-view {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding-top:8px;
  justify-content:center
}

.grid-axis {
  color:#5d6672;
  font-size:7px
}

.top-axis {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin:0 0 5px 17px;
  text-align:center
}

.grid-surround {
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  max-height:300px
}

.side-axis {
  display:grid;
  grid-template-rows:repeat(5,1fr);
  width:17px;
  flex-shrink:0;
  align-items:center
}

.side-axis span {
  transform:rotate(-90deg);
  font-size:6px
}

.sector-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(5,1fr);
  gap:5px;
  flex:1;
  min-height:0
}

.node {
  position:relative;
  min-height:52px;
  min-width:0;
  border:1px solid #373e48;
  border-top-color:#48505d;
  border-bottom:3px solid #0a0c10;
  background:linear-gradient(145deg,#292e37,#1b1f26);
  box-shadow:inset 1px 1px #ffffff06,0 2px #0007;
  color:#656f7e;
  padding:3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:transform 90ms cubic-bezier(.2,.9,.3,1)
}

.node:before,.node:after {
  content:'';
  position:absolute;
  width:3px;
  height:3px;
  background:#505866;
  top:4px;
  left:4px
}

.node:after {
  top:auto;
  left:auto;
  bottom:5px;
  right:4px;
  background:#353c47
}

.node:not(:disabled):hover {
  border-color:#7a7f87;
  background:#343a44
}

.node svg {
  width:23px;
  height:23px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5
}

.node .node-code {
  position:absolute;
  bottom:4px;
  left:5px;
  font-size:5px;
  letter-spacing:.5px;
  opacity:.65
}

.node .unknown-mark {
  font-size:17px;
  font-weight:400;
  color:#6d7787
}

.node.revealed {
  background:#161a20;
  border-color:#282e37;
  border-bottom-color:#0a0c10
}

.node.empty svg {
  color:#596473;
  width:16px;
  height:16px
}

.node.start {
  border-color:var(--hazard-amber);
  color:var(--hazard-amber);
  background:linear-gradient(135deg,#332b17,#1e201f)
}

.node.start svg {
  width:26px;
  height:26px
}

.node.coolant {
  color:#86a4cc
}

.node.cache,.node.keycard {
  color:var(--hazard-amber)
}

.node.gateway {
  color:#dce2eb
}

.node.enemy {
  color:var(--lockdown-red);
  border-color:#73373d;
  background:linear-gradient(135deg,#361f25,#211b21)
}

.node.defeated {
  color:#535c67;
  background:#121519;
  border-color:#242a33
}

.node.locked {
  border-color:#8d701f!important;
  cursor:not-allowed
}

.node.locked:before,.node.locked:after {
  left:0;
  right:0;
  top:5px;
  width:auto;
  height:7px;
  background:repeating-linear-gradient(45deg,#ffb703 0 5px,#111317 5px 10px);
  border-block:1px solid #050608;
  box-shadow:0 2px 3px #0009;
  z-index:1
}

.node.locked:after {
  top:auto;
  bottom:6px
}

.node.reveal-plate {
  animation:plate-lock 220ms cubic-bezier(.1,.85,.25,1)
}

@keyframes plate-lock {
  0% {
    transform:translateY(-7px)
  }
  75% {
    transform:translateY(2px)
  }
  100% {
    transform:translateY(0)
  }
}

.grid-footer {
  display:flex;
  justify-content:space-between;
  padding:8px 0 8px 17px;
  font-size:7px;
  letter-spacing:.5px;
  color:#747f90;
  flex-shrink:0
}

.grid-footer>span:last-child {
  color:#b67a64
}

.signal-panel {
  display:flex;
  align-items:flex-start;
  gap:9px;
  background:#20242a;
  border:1px solid #363d47;
  border-left:2px solid var(--hazard-amber);
  padding:10px 9px;
  min-height:54px;
  flex-shrink:0;
  position:relative
}

.signal-chevron {
  font-size:23px;
  color:var(--hazard-amber);
  line-height:1
}

.signal-panel>div {
  flex:1
}

.signal-panel b {
  font-size:8px;
  letter-spacing:1px;
  color:var(--hazard-amber);
  font-weight:500;
  display:block;
  margin-bottom:4px
}

.signal-panel p {
  margin:0;
  font-size:8px;
  line-height:1.5;
  color:#aab2bf;
  max-width:285px
}

.signal-index {
  font-size:7px;
  line-height:1.6;
  color:#596372;
  padding-left:7px;
  border-left:1px solid #3c434d
}

.signal-panel.alert {
  border-left-color:var(--lockdown-red)
}

.signal-panel.alert b,.signal-panel.alert .signal-chevron {
  color:var(--lockdown-red)
}

.action-dock {
  flex:0 0 30%;
  min-height:238px;
  border-top:1px solid #4c515b;
  background:linear-gradient(150deg,#282c33,#1a1d23 55%);
  padding:13px 20px 8px;
  position:relative;
  box-shadow:0 -4px #080a0d55
}

.action-dock:before,.action-dock:after {
  content:'⊕';
  position:absolute;
  top:7px;
  left:6px;
  font-size:9px;
  color:#626975
}

.action-dock:after {
  left:auto;
  right:6px
}

.dock-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  letter-spacing:.8px
}

.dock-heading strong {
  font-size:15px;
  color:var(--hazard-amber);
  letter-spacing:0
}

.dock-heading small {
  font-size:9px;
  color:#818a98;
  font-weight:400
}

.tiny-square {
  width:5px;
  height:5px;
  display:inline-block;
  background:var(--hazard-amber);
  margin-right:4px
}

.charge-track {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  height:22px;
  margin-top:8px;
  background:#0e1115;
  border:1px solid #444b56;
  position:relative;
  padding:2px;
  gap:3px;
  isolation:isolate;
  overflow:hidden
}

.charge-track>div {
  position:absolute;
  top:2px;
  left:2px;
  bottom:2px;
  background:linear-gradient(0deg,#b8810b,#ffb703);
  z-index:-1;
  width:0
}

.charge-track>span {
  position:relative;
  border-right:3px solid #12151a;
  margin-right:-3px;
  padding-right:3px;
  color:#818895;
  font-size:8px;
  text-align:right;
  line-height:16px
}

.charge-track>span:last-child {
  border:0
}

.charge-caption {
  display:flex;
  justify-content:space-between;
  margin:6px 0 11px;
  font-size:6px;
  letter-spacing:.6px;
  color:#929ca9
}

.protocol-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px
}

.protocol {
  border:1px solid #555d69;
  border-bottom:3px solid #080a0d;
  background:linear-gradient(#303641,#252a33);
  position:relative;
  padding:9px 10px 8px;
  text-align:left;
  min-height:62px;
  box-shadow:inset 0 1px #ffffff09;
  transition:transform 80ms
}

.protocol:before {
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  background:#616b7b
}

.protocol-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:4px
}

.protocol-number {
  font-size:7px;
  color:#8f99a8;
  display:flex;
  align-items:center;
  gap:6px
}

.protocol-number svg {
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}

.protocol-cost {
  font-size:11px;
  color:#bbc4d0;
  font-weight:700
}

.protocol-name {
  font-size:10px;
  letter-spacing:.1px;
  display:block;
  font-weight:700;
  margin:5px 0 4px
}

.protocol-sub {
  font-size:6px;
  letter-spacing:.15px;
  color:#9ba5b3;
  display:flex;
  justify-content:space-between;
  gap:3px
}

.protocol-sub>span:last-child {
  color:#b59357
}

.protocol[aria-disabled=true] {
  color:#85909e
}

.protocol[aria-disabled=true] .protocol-cost {
  color:#808b9c
}

.protocol.ready {
  border-color:#af852c;
  background:linear-gradient(#3a3426,#29271f);
  color:var(--white)
}

.protocol.ready:before {
  background:var(--hazard-amber)
}

.protocol.ready .protocol-cost {
  color:var(--hazard-amber)
}

.protocol.heavy.ready {
  border-color:var(--orange)
}

.console-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  gap:5px;
  font-size:5.5px;
  letter-spacing:.3px;
  color:#828b99
}

.console-footer .live-led {
  height:4px;
  width:4px;
  margin-right:2px
}

.console-footer button {
  background:none;
  border:0;
  color:#a0a9b8;
  font-size:6px;
  padding:0;
  min-height:22px;
  position:relative
}

.console-footer button:after {
  content:'';
  position:absolute;
  inset:-15px 0
}

.outer-mark {
  position:absolute;
  left:calc(50% - 335px);
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  color:#535b68;
  font-size:8px;
  letter-spacing:3px;
  display:flex;
  align-items:center;
  gap:25px
}

.outer-mark span {
  color:#a9afb9
}

.outer-mark i {
  height:80px;
  border-left:1px solid #343a43
}

.right-mark {
  left:auto;
  right:calc(50% - 335px);
  transform:translateY(-50%) rotate(180deg)
}

.combat-view {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding-top:9px;
  padding-bottom:9px
}

.enemy-header {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.5px;
  color:var(--lockdown-red);
  flex-shrink:0
}

.enemy-header>b {
  font-size:8px;
  color:#a2aab6
}

.enemy-health {
  height:3px;
  background:#41232b;
  margin-top:5px;
  flex-shrink:0
}

.enemy-health>div {
  height:100%;
  background:var(--lockdown-red)
}

.mech-stage {
  position:relative;
  flex:1;
  min-height:90px
}

.mech-svg, .mech-svg > svg {
  width:100%;
  height:100%;
  display:block
}

.mech-svg { position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 19px, #20242c 20px),repeating-linear-gradient(90deg, #111317 0 19px, #20242c 20px) }
.player-cutaway { position:absolute; bottom:20px; left:3px; width:78px; height:98px; border:1px solid #4a6fa566; background:#111317e8; pointer-events:none }
.player-cutaway > span { display:block; text-align:center; color:#8b98a8; font:6px monospace; letter-spacing:1px; padding-top:3px }
.player-cutaway > div { width:100%; height:84px }
.player-cutaway svg { display:block; width:100%; height:100% }

.chassis-id {
  position:absolute;
  bottom:7px;
  left:0;
  width:100%;
  text-align:center;
  font-size:5px;
  letter-spacing:1.5px;
  color:#747c8a
}

.intent-panel {
  padding:8px 9px;
  background:#241b1f;
  border:1px solid #5b3039;
  position:relative;
  flex-shrink:0
}

.intent-panel>div:first-child {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:8px;
  color:#ed7c83;
  letter-spacing:.5px
}

.intent-panel strong {
  font-size:14px;
  color:#eceff4
}

.intent-track {
  height:4px;
  background:#482a31;
  margin:6px 0
}

.intent-track i {
  display:block;
  height:100%;
  background:var(--lockdown-red)
}

.intent-panel>small {
  font-size:6px;
  color:#a77c83
}

.intent-panel>#barrier-status {
  float:right;
  font-size:6px;
  color:#91acd3
}

.combat-float {
  position:absolute;
  top:40%;
  left:0;
  width:100%;
  font-family:Impact,'Arial Narrow',sans-serif;
  font-size:27px;
  text-align:center;
  letter-spacing:2px;
  color:var(--hazard-amber);
  text-shadow:0 2px 5px #000;
  pointer-events:none
}

.recoil {
  animation:recoil 180ms steps(1)
}

@keyframes recoil {
  0%,40% {
    transform:translate(2px,2px)
  }
  20%,60% {
    transform:translate(-2px,-2px)
  }
  80% {
    transform:translate(2px,-2px)
  }
}

.lockdown-flash:after {
  content:'';
  position:absolute;
  inset:0;
  border:6px solid var(--lockdown-red);
  z-index:20;
  pointer-events:none;
  animation:lockdown-flash 600ms steps(2) 2
}

@keyframes lockdown-flash {
  0%,60% {
    background:#e6394626
  }
  30%,100% {
    background:transparent
  }
}

.system-dialog {
  background:#1a1d24;
  border:1px solid #666153;
  border-top:4px solid var(--hazard-amber);
  color:var(--white);
  width:calc(100% - 32px);
  max-width:400px;
  padding:20px;
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  box-shadow:0 18px 0 -12px #3c3b31,0 35px 80px #000b
}

.system-dialog[open] {
  animation:panel-lock 220ms cubic-bezier(.16,.8,.3,1)
}

@keyframes panel-lock {
  0% {
    transform:translateY(-35px)
  }
  80% {
    transform:translateY(3px)
  }
  100% {
    transform:translateY(0)
  }
}

.system-dialog::backdrop {
  background:#07090de6;
  backdrop-filter:blur(3px)
}

.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:-10px
}

.modal-head .icon-button {
  margin-right:-11px
}

.system-dialog h2 {
  font-family:Impact,'Arial Narrow',sans-serif;
  font-size:32px;
  line-height:1.1;
  letter-spacing:1px;
  font-weight:600;
  margin:8px 0 12px
}

.modal-copy {
  font-size:11px;
  line-height:1.7;
  color:#a9b1be;
  margin:12px 0 20px
}

.primary-button,.secondary-button,.install-button {
  width:100%;
  min-height:52px;
  padding:13px;
  font-weight:700;
  font-size:11px;
  letter-spacing:.5px;
  text-align:left;
  border:1px solid #dba526;
  border-bottom:4px solid #8b630a;
  background:var(--hazard-amber);
  color:#17191c;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.primary-button>span {
  font-size:20px
}

.secondary-button,.install-button {
  background:#282d37;
  border:1px solid #4e5867;
  border-bottom:3px solid #080b10;
  color:var(--white);
  margin-top:12px;
  justify-content:center
}

.settings-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:52px;
  border-bottom:1px solid #343b47;
  font-size:9px;
  gap:8px
}

.settings-line input {
  width:22px;
  height:22px;
  accent-color:var(--hazard-amber);
  cursor:pointer
}

.save-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:17px
}

.save-actions button,.file-button {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  font-size:10px;
  background:#282e38;
  border:1px solid #495262;
  cursor:pointer
}

.file-button input {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}

.small-copy {
  font-size:9px;
  line-height:1.7;
  color:#969fad;
  margin:9px 0 14px
}

.seed-form {
  margin-top:20px;
  border-top:1px solid #454d58;
  padding-top:17px
}

.seed-form>label {
  font-size:8px;
  color:var(--hazard-amber);
  letter-spacing:.8px;
  display:block;
  margin-bottom:8px
}

.seed-form>div {
  display:flex;
  gap:6px
}

.seed-form input {
  min-width:0;
  flex:1;
  padding:10px;
  background:#11151b;
  border:1px solid #4d5662;
  color:var(--white);
  font-size:13px;
  user-select:text
}

.seed-form button {
  min-height:52px;
  font-size:9px;
  padding:9px;
  background:#36292a;
  border:1px solid #80504c;
  color:#ed9e8c
}

.guide-list {
  padding-left:20px;
  margin:23px 0 15px
}

.guide-list li {
  color:var(--hazard-amber);
  padding-left:4px;
  margin-bottom:18px;
  font-size:10px
}

.guide-list li b {
  font-size:10px;
  letter-spacing:.8px
}

.guide-list p {
  font-size:10px;
  line-height:1.7;
  color:#b1bac8;
  margin:6px 0 0
}

.guide-legend {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  font-size:9px;
  padding:17px 0;
  border-block:1px solid #3c4552
}

.defeat-dialog {
  border-top-color:var(--lockdown-red)
}

.defeat-dialog .eyebrow {
  color:var(--lockdown-red);
  margin:10px 0 20px
}

.defeat-dialog h2 {
  font-size:40px
}

.hazard-rule {
  height:7px;
  background:repeating-linear-gradient(135deg,#e63946 0 7px,#111317 7px 14px);
  margin:20px 0
}

#landscape-notice {
  display:none
}

.noscript {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:#111317;
  padding:30px;
  color:#ffb703;
  z-index:100
}

.motion-reduced * {
  animation:none!important;
  transition:none!important
}

@media(min-height:900px) {
  .telemetry {
    padding-top:20px
  }
  .identity-row {
    margin-bottom:13px
  }
  .gauge-row+.gauge-row {
    margin-top:11px
  }
  .staging {
    padding-top:22px
  }
  .grid-surround {
    max-height:340px
  }
  .protocol {
    min-height:76px
  }
  .protocol-name {
    font-size:11px;
    margin-block:7px
  }
  .protocol-sub {
    font-size:7px
  }
  .console-footer {
    margin-top:15px
  }
  .action-dock {
    padding-top:18px
  }
  .charge-track {
    height:28px
  }
  .charge-track>span {
    line-height:22px
  }
}

@media(max-height:760px) {
  .telemetry {
    min-height:140px;
    padding-top:8px;
    padding-bottom:8px
  }
  .identity-row {
    margin-bottom:1px
  }
  .brand h1 {
    font-size:25px
  }
  .telemetry-divider {
    padding:5px 0
  }
  .gauge-row+.gauge-row {
    margin-top:6px
  }
  .staging {
    padding-top:10px;
    padding-bottom:8px
  }
  .stage-heading h2 {
    font-size:25px
  }
  .sector-badge b {
    font-size:33px
  }
  .stage-meta {
    margin-top:7px;
    padding-bottom:6px
  }
  .action-dock {
    min-height:222px;
    padding-top:10px
  }
  .protocol {
    min-height:60px
  }
  .signal-panel {
    padding:7px;
    min-height:46px
  }
  .signal-panel p {
    font-size:7px
  }
  .grid-footer {
    padding-block:6px
  }
  .charge-caption {
    margin-bottom:8px
  }
}

@media(max-height:700px) and (orientation:portrait) {
  .telemetry {
    min-height:126px;
    padding-top:4px
  }
  .identity-row {
    height:40px
  }
  .telemetry-divider {
    font-size:6px
  }
  .gauge-label {
    margin-bottom:3px
  }
  .gauge-label strong {
    font-size:10px
  }
  .staging {
    padding-top:8px;
    padding-bottom:7px
  }
  .stage-heading h2 {
    font-size:22px
  }
  .stage-heading .eyebrow {
    font-size:6px
  }
  .sector-badge b {
    font-size:28px
  }
  .stage-meta {
    margin-top:5px;
    font-size:6px;
    padding-bottom:4px
  }
  .traversal-view {
    padding-top:4px
  }
  .top-axis {
    margin-bottom:3px
  }
  .grid-surround {
    min-height:280px
  }
  .sector-grid {
    gap:4px
  }
  .signal-panel {
    min-height:36px;
    padding:5px;
    margin-top:0
  }
  .signal-panel b {
    font-size:7px;
    margin-bottom:2px
  }
  .signal-panel p {
    font-size:6px
  }
  .signal-index {
    font-size:6px
  }
  .signal-chevron {
    font-size:18px
  }
  .action-dock {
    min-height:199px;
    padding-top:8px;
    padding-bottom:4px
  }
  .charge-caption {
    margin-block:4px 6px
  }
  .charge-track {
    height:18px;
    margin-top:5px
  }
  .charge-track>span {
    line-height:12px
  }
  .protocol {
    min-height:53px;
    padding:6px 8px
  }
  .protocol-name {
    font-size:9px;
    margin-block:3px
  }
  .protocol-sub {
    font-size:5px
  }
  .console-footer {
    margin-top:4px
  }
  .protocol-buttons {
    gap:5px
  }
  .grid-footer {
    font-size:6px;
    padding-block:4px
  }
}

@media(max-width:700px) {
  .outer-mark {
    display:none
  }
  #viewport-container {
    border:0
  }
}

@media(max-width:360px) {
  .telemetry,.staging,.action-dock {
    padding-left:14px;
    padding-right:14px
  }
  .brand h1 {
    font-size:23px
  }
  .system-controls {
    gap:0
  }
  .icon-button {
    min-width:46px
  }
  .node {
    min-height:52px
  }
  .node svg {
    width:20px;
    height:20px
  }
  .protocol-name {
    font-size:9px
  }
}

@media(max-height:640px) and (orientation:portrait) {
  #viewport-container {
    overflow-y:auto
  }
  .staging {
    flex:0 0 390px
  }
  .telemetry {
    flex-basis:130px
  }
  .action-dock {
    flex-basis:214px
  }
  .console-footer button {
    min-height:36px
  }
}

@media(orientation:landscape) and (max-height:550px) and (pointer:coarse) {
  #landscape-notice {
    position:fixed;
    inset:0;
    z-index:100;
    background:#111317;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:25px;
    text-align:center;
    border-block:5px solid var(--hazard-amber)
  }
  #landscape-notice .rotate-icon {
    font-size:60px;
    color:var(--hazard-amber)
  }
  #landscape-notice b {
    letter-spacing:2px
  }
  #landscape-notice p {
    font-size:11px;
    line-height:1.7;
    color:var(--muted)
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* Keep the five 52px tile rows inside their allotted bay. */ .telemetry {
  min-height:150px
}

.staging {
  padding-top:12px;
  padding-bottom:8px
}

.stage-heading {
  height:38px
}

.stage-heading h2 {
  font-size:26px;
  line-height:1
}

.sector-badge b {
  font-size:34px
}

.stage-meta {
  margin-top:7px;
  padding-bottom:6px;
  line-height:9px
}

.traversal-view {
  padding-top:6px;
  min-height:318px
}

.top-axis {
  height:8px;
  line-height:8px;
  margin-bottom:4px
}

.grid-surround {
  min-height:280px;
  max-height:none
}

.grid-footer {
  font-size:7px;
  line-height:8px;
  padding-block:6px
}

.signal-panel {
  padding:7px;
  min-height:48px
}

.signal-panel b {
  line-height:9px
}

.signal-panel p {
  font-size:8px;
  line-height:11px
}

.action-dock {
  flex-basis:28%;
  min-height:236px
}

.console-footer {
  min-height:15px;
  margin-top:9px;
  font-size:6px
}

.system-dialog .secondary-button {
  min-height:52px
}

@media(min-height:900px) {
  .telemetry {
    min-height:162px
  }
  .action-dock {
    flex-basis:30%;
    min-height:268px
  }
  .staging {
    padding-top:18px
  }
  .stage-heading {
    height:45px
  }
  .stage-heading h2 {
    font-size:30px
  }
}

@media(max-height:800px) {
  .telemetry {
    flex:0 0 128px;
    min-height:128px;
    padding-top:4px;
    padding-bottom:7px
  }
  .identity-row {
    height:42px;
    margin-bottom:2px
  }
  .brand h1 {
    font-size:25px
  }
  .telemetry-divider {
    padding:4px 0;
    font-size:6px
  }
  .gauge-label {
    margin-bottom:3px;
    font-size:7px
  }
  .gauge-label strong {
    font-size:10px
  }
  .gauge-row+.gauge-row {
    margin-top:5px
  }
  .staging {
    padding-top:7px;
    padding-bottom:7px
  }
  .stage-heading {
    height:29px
  }
  .stage-heading .eyebrow {
    font-size:6px;
    line-height:7px
  }
  .stage-heading h2 {
    font-size:22px;
    margin-top:3px
  }
  .sector-badge b {
    font-size:28px
  }
  .stage-meta {
    margin-top:5px;
    padding-bottom:4px;
    font-size:6px;
    line-height:8px
  }
  .traversal-view {
    padding-top:4px;
    min-height:296px
  }
  .top-axis {
    height:7px;
    line-height:7px;
    margin-bottom:3px
  }
  .grid-surround {
    min-height:272px
  }
  .sector-grid {
    gap:3px
  }
  .grid-footer {
    font-size:6px;
    line-height:6px;
    padding-block:4px
  }
  .signal-panel {
    padding:5px;
    min-height:34px
  }
  .signal-panel b {
    font-size:7px;
    line-height:8px;
    margin-bottom:3px
  }
  .signal-panel p {
    font-size:7px;
    line-height:9px
  }
  .signal-index {
    font-size:6px
  }
  .action-dock {
    flex:0 0 204px;
    min-height:204px;
    padding-top:8px;
    padding-bottom:5px
  }
  .charge-track {
    height:18px;
    margin-top:5px
  }
  .charge-track>span {
    line-height:12px
  }
  .charge-caption {
    margin:5px 0 7px
  }
  .protocol-buttons {
    gap:5px
  }
  .protocol {
    min-height:55px;
    padding:6px 8px
  }
  .protocol-name {
    font-size:9px;
    margin:3px 0
  }
  .protocol-sub {
    font-size:5.5px
  }
  .console-footer {
    margin-top:6px;
    min-height:12px
  }
}

@media(max-height:735px) {
  #viewport-container {
    overflow-y:auto
  }
  .staging {
    flex:1 0 397px
  }
  .telemetry {
    flex-basis:124px;
    min-height:124px
  }
  .action-dock {
    flex-basis:204px
  }
}

@media(max-width:360px) {
  .signal-panel p {
    font-size:7px
  }
  .stage-meta {
    letter-spacing:.2px
  }
}

.clamp-overview {
  position:absolute;
  right:0;
  top:9px;
  padding:5px;
  background:#111317d9;
  border:1px solid #303640;
  pointer-events:none
}

.clamp-overview>span {
  display:block;
  font-size:5px;
  letter-spacing:1px;
  color:#9c854e;
  margin-bottom:4px
}

#clamp-map {
  display:grid;
  grid-template-columns:repeat(5,9px);
  grid-template-rows:repeat(5,9px);
  gap:2px
}

#clamp-map>i {
  background:#20252e;
  border:1px solid #343c48
}

#clamp-map>i.clamped {
  background:repeating-linear-gradient(135deg,#b88a19 0 2px,#181a1f 2px 4px);
  border-color:#b88a19
}

#clamp-map>i.hostile {
  background:#e63946;
  border-color:#e63946
}

.combat-view:not([hidden]),.traversal-view:not([hidden]) {
  animation:stage-lock 180ms cubic-bezier(.15,.8,.25,1)
}

@keyframes stage-lock {
  0% {
    transform:translateX(12px)
  }
  75% {
    transform:translateX(-2px)
  }
  100% {
    transform:translateX(0)
  }
}

/* Opposing steel panels keep one shared bay; inert hides the inactive controls. */ .stage-bay {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  flex: 1;
  min-height: 318px;
  overflow: clip;
  position: relative;
}

.stage-bay > .traversal-view, .stage-bay > .combat-view {
  grid-area: 1 / 1;
  min-height: 0;
  margin: 0;
  animation: none;
  transition: transform 320ms cubic-bezier(.2, .8, .25, 1), visibility 0s 320ms;
  will-change: transform;
}

.stage-bay > .combat-view {
  transform: translateX(110%);
  visibility: hidden;
  pointer-events: none;
}

.stage-bay[data-mode='combat'] > .traversal-view {
  transform: translateX(-110%);
  visibility: hidden;
  pointer-events: none;
}

.stage-bay[data-mode='combat'] > .combat-view, .stage-bay[data-mode='traversal'] > .traversal-view {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 320ms cubic-bezier(.2, .8, .25, 1), visibility 0s;
}

/* Readable operational labels; the tiny lettering is reserved for decoration. */ .gauge-label {
  font-size: 9px;
  letter-spacing: .4px;
}

.stage-meta {
  font-size: 8px;
  letter-spacing: .25px;
}

.protocol-name {
  font-size: 11px;
}

.protocol-cost {
  font-size: 12px;
}

.protocol-sub {
  font-size: 7px;
  line-height: 10px;
  flex-wrap: wrap;
  column-gap: 6px;
}

.protocol-number {
  font-size: 8px;
}

.charge-caption {
  font-size: 7px;
  letter-spacing: .2px;
}

.signal-panel p {
  font-size: 9px;
  line-height: 12px;
}

.signal-panel b {
  font-size: 9px;
  line-height: 11px;
}

.signal-panel {
  min-height: 50px;
}

.enemy-header, .enemy-header > b {
  font-size: 10px;
}

.intent-panel > div:first-child {
  font-size: 10px;
}

.intent-panel > small {
  font-size: 8px;
}

.intent-panel > #barrier-status {
  display: block;
  float: none;
  font-size: 8px;
  margin-top: 4px;
}

.intent-panel {
  border-left: 3px solid #e63946;
}

.intent-panel.interruptible {
  border-color: #ffb703;
}

.stagger-window {
  display: block;
  margin-top: 7px;
  font-size: 8px;
  letter-spacing: .6px;
  color: #a68b8f;
}

.stagger-window.open {
  color: #ffb703;
  font-weight: bold;
}

.node .node-code {
  font-size: 7px;
  color: #a0aabb;
  opacity: 1;
}

.chassis-id {
  font-size: 6px;
}

.protocol {
  min-height: 68px;
}

.action-dock {
  min-height: 246px;
}

.console-footer {
  font-size: 7px;
  letter-spacing: 0;
}

.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after {
  animation: none !important;
  transition: none !important;
}

@media (max-height: 800px) {
  .stage-bay {
    min-height: 296px;
  }
  .staging {
    min-height: 421px;
  }
  .action-dock {
    flex-basis: 222px;
    min-height: 222px;
  }
  .protocol {
    min-height: 63px;
  }
  .protocol-name {
    font-size: 10px;
  }
  .signal-panel p {
    font-size: 8px;
    line-height: 11px;
  }
  .signal-panel b {
    font-size: 8px;
  }
  .stage-meta {
    font-size: 7px;
  }
  #viewport-container {
    overflow-y: auto;
  }
}

@media (max-width: 360px) {
  .protocol-sub {
    font-size: 7px;
  }
  .protocol-name {
    font-size: 10px;
  }
  .charge-caption {
    font-size: 6.5px;
  }
  .stage-meta {
    font-size: 7px;
  }
}
/* Leave room for the larger action labels without clipping the footer. */
#viewport-container {
  overflow-y: auto;
}
@media (min-height: 801px) {
  .staging { padding-top: 8px; }
  .stage-meta { margin-top: 5px; padding-bottom: 4px; }
  .signal-panel { padding: 5px; }
  .action-dock { min-height: 254px; }
}