/* stage: clarifying the flight instruments */
#combatHud{
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:0;
  padding:12px var(--gutter);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#111e2e,#0f1928);
  font-variant-numeric:tabular-nums;
}
.instrument{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  min-width:0;
}
.instrument+.instrument{
  padding-left:20px;
  border-left:1px solid #94b4d31a;
}
.instrument>span{
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.13em;
}
.instrument strong{
  font-family:var(--mono);
  font-size:25px;
  font-weight:650;
  line-height:1.12;
  letter-spacing:-.025em;
}
.instrument strong small{
  margin-left:2px;
  color:#90a5be;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
}
#rescued{color:var(--gold)}
.hullInstrument{align-items:center;padding-right:20px}
#telemetry{
  color:var(--accent);
  font-family:system-ui,sans-serif;
  font-size:19px;
  font-weight:600;
  line-height:1.48;
  letter-spacing:.07em;
  white-space:nowrap;
  text-shadow:0 0 12px #86f3d814;
}
#telemetry.critical{color:#ff9ab1;text-shadow:0 0 12px #ff759721}
.scoreInstrument{text-align:right;align-items:flex-end}
#score{color:#f0f5ff;font-family:var(--mono);letter-spacing:.035em}
#bestScore{
  display:inline-block;
  margin-left:10px;
  color:#94a9c2;
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:0;
}
.scanner{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:0;
  padding:6px var(--gutter);
  border-bottom:1px solid #2c4154;
  background:#0a1320;
  box-shadow:inset 0 1px 0 #00000030;
}
.radarLabel{
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
  color:#91abc3;
  font-family:var(--mono);
  font-size:8px;
  font-weight:600;
  letter-spacing:.13em;
}
.radarLabel::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px #86f3d833;
}
#slices{flex:1;min-width:0;border-radius:3px}
.statusline{
  position:absolute;
  top:14px;
  left:var(--gutter);
  right:var(--gutter);
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  color:#bad2e6;
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.045em;
  text-shadow:0 2px 6px #000;
  pointer-events:none;
}
#mission,#streak{
  padding:5px 8px;
  border:1px solid #aac5df1f;
  border-radius:5px;
  background:#07101fc7;
  box-shadow:0 2px 8px #00000018;
}
#mission{color:var(--gold);border-color:#ffdb8326}
#mission.carrying{color:var(--accent);border-color:#86f3d83b}
#streak{color:#b0c2d8;white-space:nowrap;flex-shrink:0}
#battleCallout{
  position:absolute;
  top:57px;
  left:50%;
  z-index:2;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  padding:10px 16px;
  border:1px solid #86f3d84d;
  border-radius:9px;
  background:#102331f5;
  color:#baffed;
  font-size:11px;
  font-weight:650;
  line-height:1.55;
  letter-spacing:.025em;
  text-align:center;
  box-shadow:0 8px 28px #00000038,inset 0 1px 0 #ffffff06;
  pointer-events:none;
}
#battleCallout[data-tone="danger"]{
  background:#2b1724f5;
  color:#ffbecd;
  border-color:#ff759766;
}
#battleCallout[data-tone="gold"]{
  background:#282319f5;
  color:#ffe3a4;
  border-color:#ffdb8366;
}

/* stage: polishing the mission briefing */
#briefing{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  overflow:auto;
  padding:24px;
  background:radial-gradient(ellipse at 50% 40%,#142c3e94,#050b16df 85%);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  scrollbar-width:thin;
  scrollbar-color:#405970 #0c1522;
}
.briefingPanel{
  position:relative;
  flex-shrink:0;
  width:min(100%,540px);
  margin:auto;
  padding:28px 30px 24px;
  border:1px solid #65829a4d;
  border-radius:18px;
  background:linear-gradient(150deg,#192d40ed,#0e1a2aef 65%);
  box-shadow:0 24px 70px #00000055,inset 0 1px 0 #d1f8ff0d;
  text-align:center;
}
.briefingPanel::before{
  content:"";
  position:absolute;
  top:-1px;
  left:24%;
  right:24%;
  height:1px;
  background:linear-gradient(90deg,transparent,#86f3d8b3,transparent);
  pointer-events:none;
}
.briefingPanel .eyebrow{
  color:#a8e6d9;
  font-size:9px;
  line-height:1.6;
  letter-spacing:.12em;
}
.briefingPanel h2{
  margin:10px 0;
  color:#effff9;
  font-size:clamp(29px,4.6vw,43px);
  font-weight:750;
  line-height:1.08;
  letter-spacing:-.045em;
  text-wrap:balance;
}
#overlaySummary{
  margin:0;
  color:#bccde0;
  font-size:13px;
  line-height:1.65;
  text-wrap:balance;
}
#briefingSteps{
  display:grid;
  gap:8px;
  margin:22px 0 20px;
  text-align:left;
}
#briefingSteps p{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:11px 14px;
  border:1px solid #7695b128;
  border-radius:9px;
  background:#08152266;
  color:#b4c7da;
  font-size:12px;
  line-height:1.6;
  box-shadow:inset 0 1px 0 #ffffff03;
}
#briefingSteps strong{color:#eef6ff;font-weight:650}
#briefingSteps p:nth-child(1) strong{color:var(--gold)}
#briefingSteps p:nth-child(2) strong{color:var(--accent)}
.legend{
  position:relative;
  display:block;
  width:15px;
  height:15px;
  flex-shrink:0;
}
.personLegend{
  border:2px solid var(--gold);
  border-radius:8px 8px 4px 4px;
  background:#ffdb830a;
  transform:scale(.65,1);
}
.baseLegend{
  border:1px solid var(--accent);
  border-bottom-width:3px;
  border-radius:2px 2px 0 0;
  background:#86f3d81f;
}
.laserLegend{
  height:3px;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 9px #86f3d855;
}
#launchCombat{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  min-width:226px;
  min-height:48px;
  margin-top:2px;
  padding:10px 15px 10px 20px;
  border-color:#a8ffe6;
  border-radius:10px;
  background:linear-gradient(180deg,#a5fae4,#86f3d8);
  color:#0b2b25;
  font-size:13px;
  font-weight:750;
  letter-spacing:.015em;
  box-shadow:inset 0 1px 0 #ffffff4d,0 6px 20px #00000026;
}
#launchCombat span{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid #0c36252e;
  border-radius:5px;
  background:#0c36250a;
  color:#26594a;
  font-family:var(--mono);
  font-size:16px;
  line-height:1;
}
#overlayHelp{
  margin:14px 0 0;
  color:#9cb3ca;
  font-size:11px;
  line-height:1.65;
}
#pulse{
  display:flex;
  align-items:center;
  gap:18px;
  flex-shrink:0;
  min-height:46px;
  padding:8px 10px 8px 14px;
  border-color:#baa7ee66;
  border-radius:9px;
  background:linear-gradient(180deg,#2c2946,#221f36);
  color:#e3d7ff;
  font-size:10px;
  letter-spacing:.06em;
}
#pulse span{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
#pulse small{
  color:#b5a7d3;
  font-family:var(--mono);
  font-size:8px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.07em;
}
#pulse b{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid #c5b5ff40;
  border-radius:6px;
  background:#c5b5ff12;
  color:#f1eaff;
  font-family:var(--mono);
  font-size:16px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}
.is-ready .statusline,.is-ended .statusline,.is-paused .statusline{visibility:hidden}

@media(hover:hover){
  #launchCombat:not(:disabled):hover{
    border-color:#d5fff3;
    background:#baffec;
    color:#072821;
    box-shadow:0 0 0 3px #86f3d812,0 8px 26px #86f3d81a;
  }
  #pulse:not(:disabled):hover{
    border-color:#cdb8ff;
    background:#40345b;
    color:#fff;
    box-shadow:0 0 0 3px #baa7ee0a,0 4px 16px #0000002b;
  }
}

/* stage: refining campaign log surfaces */
body.combat #flightLog{
  margin:20px 0;
  padding:16px;
  min-width:0;
  border:1px solid #91b4c342;
  border-radius:12px;
  background:linear-gradient(135deg,#102332e8,#0c1726ed);
  text-align:left;
  box-shadow:inset 0 1px 0 #ffffff08;
}
body.combat .flightLogHeading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 12px;
}
body.combat #flightLogTitle{
  margin:0;
  color:#d6fff0;
  font:650 13px/1.5 var(--ui-sans,system-ui);
  letter-spacing:-.01em;
  text-transform:none;
}
body.combat #flightLogProgress{
  padding:3px 7px;
  border:1px solid #c6adff38;
  border-radius:5px;
  background:#bba0ff0c;
  color:#e0d0ff;
  font:500 9px/1.5 var(--mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.combat #flightLogSummary{
  margin:6px 0 12px;
  color:#becfe1;
  font:12px/1.6 system-ui,sans-serif;
  text-wrap:pretty;
}
body.combat .flightLogTable{
  width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:#58778c #091622;
  border:1px solid #91b4c324;
  border-radius:7px;
  background:#07121c66;
  touch-action:pan-x pan-y;
}
body.combat .flightLogTable:focus-visible{
  outline:2px solid #c0ffe9;
  outline-offset:3px;
}
body.combat #flightLog table{
  width:100%;
  min-width:365px;
  border-collapse:collapse;
  font:500 10px/1.5 var(--mono);
  font-variant-numeric:tabular-nums;
}
body.combat #flightLog caption{
  padding:8px 10px;
  color:#a9bbd0;
  font:10px/1.5 system-ui,sans-serif;
  text-align:left;
  border-bottom:1px solid #91b4c31c;
}
body.combat #flightLog th,
body.combat #flightLog td{
  padding:9px 8px;
  border-bottom:1px solid #91b4c31c;
  text-align:right;
  vertical-align:middle;
  white-space:nowrap;
}
body.combat #flightLog thead th{
  color:#a4b9d0;
  background:#1626386b;
  font-size:8px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
}
body.combat #flightLog th:first-child{
  width:42%;
  padding-left:10px;
  text-align:left;
  white-space:normal;
}
body.combat #flightLog tbody th{font-weight:500}
body.combat #flightLog tbody td{color:#e2edfb}
body.combat #flightLog tbody td:nth-child(3){color:#ffe4a6}
body.combat #flightLog tbody tr:last-child>*{border-bottom:0}
body.combat #flightLog .flightLogSector strong{
  display:block;
  color:#e9f2ff;
  font:650 11px/1.5 var(--ui-sans,system-ui);
  letter-spacing:.015em;
}
body.combat #flightLog .flightLogSector span{
  display:block;
  margin-top:3px;
  color:#a7bdd2;
  font-size:8px;
  line-height:1.4;
  letter-spacing:.045em;
}
/* stage: improving record scanning contrast */
body.combat #flightLog tbody tr:nth-child(even){background:#bad8ff04}
body.combat #flightLog tr[data-state="cleared"] .flightLogSector span{color:#a8f5da}
body.combat #flightLog tr[data-state="active"]{background:#bba0ff12}
body.combat #flightLog tr[data-state="active"] th:first-child{box-shadow:inset 2px 0 0 #cbb0ff}
body.combat #flightLog tr[data-state="active"] .flightLogSector span{color:#e0caff}
body.combat #flightLog tr[data-state="failed"] .flightLogSector span{color:#ffb9cb}
body.combat #flightLog tr[data-state="standby"] :is(td,.flightLogSector strong,.flightLogSector span){color:#9aafc7}
@media(hover:hover){
  body.combat #flightLog tbody tr:hover{background:#b4d8ff0e}
  body.combat #flightLog tr[data-state="active"]:hover{background:#bba0ff1c}
}
body.combat .flightLogTable:focus-visible{
  outline:2px solid #defff1;
  outline-offset:3px;
  box-shadow:0 0 0 5px #85f3d521;
}
body.combat #flightLog .flightLogNote{
  margin:10px 0 0;
  color:#9bafc6;
  font:10px/1.5 system-ui,sans-serif;
}
@media(max-width:560px){
  body.combat #flightLog{padding:11px;margin:15px 0}
  body.combat #flightLogSummary{font-size:11px;margin-bottom:10px}
  body.combat #flightLog th,body.combat #flightLog td{padding-block:8px}
}
@media(max-height:500px) and (min-width:561px){
  body.combat #flightLog{margin:12px 0;padding:11px 13px}
  body.combat #flightLog th,body.combat #flightLog td{padding-block:6px}
}