/* In-run HUD, overlays and touch controls. */

.game-screen{padding:0;background:#03080d;overflow:hidden;touch-action:none}

#gameCanvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  touch-action:none;display:block;
}

.hud{
  pointer-events:none;
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(14px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  z-index:4;
}

/* Two explicit rows. Row one is vitals / timer / tally; row two is the
   objective stack and the radio traffic beside it, which puts the codec
   directly under the timer. Everything here is a real grid item placed by
   area, so no two panels can end up on top of each other at any width — which
   they previously did on a phone.

   The middle track is a fixed width rather than `auto`. Sizing it to content
   would mean the side panels resized every time a line of radio traffic came
   in and went out again. */
.hud-top{
  display:grid;
  grid-template-columns:minmax(190px,1fr) min(520px,38vw) minmax(150px,1fr);
  grid-template-rows:auto auto auto;
  gap:10px;align-items:start;
}
.vitals{grid-area:1/1}
.mission{grid-area:1/2}
.tally{grid-area:1/3}
.hud-top-left{grid-area:2/1/-1/2}
/* The signature's health sits between the clock and the radio traffic, in the
   same column, as a row of the stack. It used to be positioned absolutely at a
   fixed 96px and printed straight over the codec panel underneath it. */
.boss-bar{grid-area:2/2}
.codec{grid-area:3/2}

.hud-panel{
  background:linear-gradient(180deg,rgba(4,13,19,.88),rgba(3,10,14,.7));
  border:1px solid rgba(118,231,212,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.03),0 10px 28px rgba(0,0,0,.3);
  backdrop-filter:blur(6px);
  padding:9px 11px;
  font-size:11px;
}

/* ---- Vitals ------------------------------------------------------------- */

.vitals{max-width:400px}
.vital-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.op-tag{
  font-size:10px;letter-spacing:.18em;color:var(--op,#76e7d4);
  border-left:2px solid var(--op,#76e7d4);padding-left:6px;
}
.hp-text{font-size:12px}
.hp-text b{font-size:14px;color:#eafffc}
.hp-text i{font-style:normal;opacity:.4;margin:0 2px}
.hp-text span{color:var(--muted)}

.bar.hp{height:7px;position:relative}
.bar.hp>i{
  background:linear-gradient(90deg,#ff5f57,#ffb185);
  position:relative;z-index:2;
}
.bar.hp>i.critical{animation:hp-pulse .7s ease-in-out infinite}
.bar.hp>u{
  position:absolute;top:0;left:0;height:100%;
  background:rgba(255,120,110,.28);z-index:1;
  display:block;transition:width .35s ease .1s;
}
@keyframes hp-pulse{50%{filter:brightness(1.6)}}

.xp-row{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:9.5px}
.xp-row .lvl{color:var(--muted);white-space:nowrap}
.xp-row .lvl b{color:var(--accent);font-size:11px}
.xp-row .bar{flex:1;height:4px;margin:0}
.xp-row .bar>i{background:linear-gradient(90deg,#7db2ff,#cfe3ff)}
.xp-text{color:var(--muted);white-space:nowrap;font-size:9px}

/* ---- Campaign objective ------------------------------------------------- */

.mission-objective[hidden]{display:none}
.mission-objective{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  max-width:400px;padding:7px 11px;
  border-color:rgba(143,216,255,.5);
  box-shadow:inset 0 0 0 1px rgba(143,216,255,.08),0 10px 28px rgba(0,0,0,.3);
}
.mission-objective-label{font-size:9px;letter-spacing:.2em;color:#8fd8ff}
.mission-objective-value{font-size:13px;color:#eafffc;font-variant-numeric:tabular-nums}
.mission-objective.done{border-color:rgba(139,255,155,.55)}
.mission-objective.done .mission-objective-label,
.mission-objective.done .mission-objective-value{color:#8bff9b}

/* ---- Field objectives --------------------------------------------------- */

.hud-column{display:flex;flex-direction:column;gap:8px;min-width:0}
.objectives{max-width:400px;padding:6px 9px}
.objectives-head{
  display:flex;align-items:center;gap:8px;
  font-size:8.5px;letter-spacing:.2em;color:var(--muted);
}
.objectives-head b{color:var(--gold);font-size:10px;letter-spacing:.08em;margin-left:auto}
/* The whole set's progress, so the collapsed header still says how far along
   the contract is without spending three rows saying it. */
.objectives-bar{
  flex:0 0 46px;height:2px;background:rgba(118,231,212,.16);
  display:block;overflow:hidden;
}
.objectives-bar u{display:block;height:100%;background:var(--accent);
  opacity:.75;width:0;transition:width .3s linear}
.objectives.all-done .objectives-bar u{background:#8bff9b}
.objectives.all-done .objectives-head b{color:#8bff9b}
/* Closed by default; `open` is added for a few seconds whenever a count moves.
   Height rather than display, so it slides instead of jumping. */
.objective-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .22s ease,opacity .18s ease,margin-top .22s ease;
}
.objectives.open .objective-list{max-height:180px;opacity:1;margin-top:6px}
@media(prefers-reduced-motion:reduce){
  .objective-list{transition:none}
}
.objective{
  position:relative;display:grid;
  grid-template-columns:12px 1fr auto;align-items:center;gap:6px;
  padding:3px 5px;font-size:9.5px;overflow:hidden;
  background:rgba(118,231,212,.05);
  border-left:2px solid rgba(118,231,212,.3);
}
.objective-mark{color:var(--muted);font-size:9px;line-height:1}
.objective-text{color:#cfe3e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.objective-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:9px}
.objective-fill{
  position:absolute;left:0;bottom:0;height:1.5px;
  background:var(--accent);opacity:.65;transition:width .3s linear;
}
.objective.done{border-left-color:#8bff9b;background:rgba(139,255,155,.1)}
.objective.done .objective-mark{color:#8bff9b}
.objective.done .objective-text{color:#8bff9b;text-decoration:line-through;opacity:.8}
.objective.done .objective-fill{background:#8bff9b;opacity:1}

/* ---- Mission ------------------------------------------------------------ */

.mission{text-align:center;justify-self:center;min-width:230px;max-width:100%}
.mission-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:10px;letter-spacing:.1em}
.timer-group{display:flex;flex-direction:column;gap:2px;align-items:center}
.mission-head #timerValue{font-size:17px;color:#eafffc;font-variant-numeric:tabular-nums}
.mission-head #timerValue.urgent{color:var(--gold);animation:timer-pulse 1s ease-in-out infinite}
.extraction-label{font-size:9px;color:var(--gold);letter-spacing:.1em;font-weight:normal}
.extraction-label b{font-size:13px;font-variant-numeric:tabular-nums;animation:timer-pulse 1s ease-in-out infinite}
@keyframes timer-pulse{50%{opacity:.55}}
.phase{margin-top:4px;font-size:8.5px;letter-spacing:.22em;color:#86aaa9}
.mission-bar{height:2px;background:rgba(118,231,212,.12);margin-top:6px}
.mission-bar>i{display:block;height:100%;background:var(--accent);transition:width .4s linear}

/* ---- Tally -------------------------------------------------------------- */

.tally{justify-self:end;display:flex;flex-direction:column;gap:2px;min-width:110px}
.tally-row{display:flex;justify-content:space-between;gap:12px;font-size:10px}
.tally-row span{color:var(--muted);letter-spacing:.1em}
.tally-row b{color:#eafffc;font-variant-numeric:tabular-nums}
.combo{
  margin-top:4px;text-align:right;font-size:13px;
  color:var(--gold);letter-spacing:.06em;min-height:16px;
}
.combo.hot{color:#ff8a4c;text-shadow:0 0 12px rgba(255,138,76,.6)}

/* ---- Boss bar ----------------------------------------------------------- */

.boss-bar{
  width:100%;text-align:center;pointer-events:none;
}
.boss-name{display:flex;justify-content:center;gap:10px;align-items:baseline;margin-bottom:4px}
.boss-name span{font-size:11px;letter-spacing:.16em;color:#ffc0ba}
.boss-name em{font-style:normal;font-size:9px;letter-spacing:.2em;color:var(--gold)}
.bar.boss{height:9px;background:#25080a;border:1px solid rgba(255,112,104,.45)}
.bar.boss>i{background:linear-gradient(90deg,#9f1d29,#ff7068);box-shadow:0 0 14px rgba(255,80,80,.4)}
.boss-bar.shielded .bar.boss{border-color:#8fd8ff;box-shadow:0 0 18px rgba(143,216,255,.35)}

/* ---- Bottom bar --------------------------------------------------------- */

.hud-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}

.loadout{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:62vw}
.slot{
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,rgba(4,12,18,.9),rgba(7,26,29,.78));
  border:1px solid rgba(118,231,212,.22);
  padding:5px 8px;position:relative;overflow:hidden;
}
.slot.weapon{min-width:132px}
.slot.weapon::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.slot.evolved{border-color:var(--gold)}
.slot.evolved::after{background:linear-gradient(90deg,var(--gold),transparent)}

.slot-icon{
  width:28px;height:28px;flex-shrink:0;
  display:grid;place-items:center;
  border:1px solid rgba(118,231,212,.22);
  background:rgba(118,231,212,.07);
  color:#8ffff0;font-size:9px;letter-spacing:.03em;
}
.slot-icon.small{font-size:15px;width:24px;height:24px}
.slot-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.slot-meta b{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.slot-meta i{font-style:normal;font-size:8.5px;color:#7ec7c1}
.slot-level{display:none}
.slot.passive{padding:4px 6px}
.slot-rank{font-size:9px;color:var(--accent)}
.slot-divider{width:1px;height:26px;background:rgba(118,231,212,.2);margin:0 2px}

.hud-actions{display:flex;gap:8px;align-items:flex-end;pointer-events:auto}

.ability-btn,.dash-btn{
  position:relative;overflow:hidden;
  border:1px solid rgba(118,231,212,.28);
  background:rgba(4,12,18,.86);
  color:var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:border-color .16s,box-shadow .16s;
}
.ability-btn{min-width:110px;height:56px;padding:6px 10px}
.dash-btn{min-width:70px;height:56px;padding:6px 8px;font-size:9px;letter-spacing:.14em}
.ability-name{font-size:9px;letter-spacing:.12em;text-align:center;line-height:1.15}
.ability-state{font-size:11px;color:var(--accent);font-variant-numeric:tabular-nums}
.ability-fill,.dash-fill{
  position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:var(--accent);transform-origin:left center;
  transform:scaleX(0);transition:transform .1s linear;
}
.ability-btn.ready,.dash-btn.ready{
  border-color:var(--accent);
  box-shadow:0 0 22px rgba(118,231,212,.22);
}
.ability-btn.ready .ability-state{color:#d8fff8}

.icon-btn{
  width:48px;height:48px;padding:0;
  display:grid;place-items:center;font-size:14px;
  border:1px solid rgba(118,231,212,.24);
  background:rgba(4,12,18,.86);color:var(--ink);cursor:pointer;
}
.icon-btn:hover{border-color:var(--accent)}

/* ---- Turret kit button -------------------------------------------------- */

.turret-btn{position:relative;min-width:78px}
.turret-count{
  font-style:normal;font-size:11px;letter-spacing:.06em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.turret-btn.ready .turret-count{color:var(--gold)}
/* All slots standing: the button is inert until one falls, so say so. */
.turret-btn.maxed{opacity:.6}
.turret-btn.maxed .turret-count{color:var(--accent)}
/* The armed kit tints the button, so the three read apart without being read.
   The fallback keeps the button on the house accent if the HUD ever renders
   before the engine has set a kit. */
.turret-btn{border-color:color-mix(in srgb,var(--kit-color,var(--accent)) 40%,transparent)}
.turret-btn.ready{
  border-color:var(--kit-color,var(--accent));
  box-shadow:0 0 22px color-mix(in srgb,var(--kit-color,var(--accent)) 26%,transparent);
}
.turret-btn .dash-fill{background:var(--kit-color,var(--accent))}

/* Kit cycle. Deliberately small and adjacent: it changes what the next plant
   is, never plants anything, so it must not be mistakable for the deploy. */
.kit-btn{
  width:30px;height:56px;font-size:13px;
  border-color:color-mix(in srgb,var(--kit-color,var(--accent)) 30%,transparent);
  align-self:flex-end;
}

/* ---- Replay badge -------------------------------------------------------
   Only present while watching a recording, and deliberately in the theatre's
   warning colour rather than its accent: the point is that what is on screen
   is not a contract in progress. */
.replay-badge{
  grid-area:2/3;justify-self:end;
  display:flex;align-items:center;gap:7px;
  padding:6px 10px;
  font-size:9px;letter-spacing:.2em;color:#ffd166;
  border:1px solid rgba(255,209,102,.4);
  background:rgba(26,18,4,.82);
  backdrop-filter:blur(6px);
}
.replay-badge em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.replay-dot{
  width:7px;height:7px;border-radius:50%;
  background:#ff7068;box-shadow:0 0 8px rgba(255,112,104,.9);
  animation:replay-pulse 1.6s ease-in-out infinite;
}
@keyframes replay-pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* Nobody is driving, so the action buttons are readouts rather than controls. */
.replaying .hud-actions{opacity:.45}
@media(prefers-reduced-motion:reduce){.replay-dot{animation:none}}

/* ---- Status strip ------------------------------------------------------- */

.status-strip{
  position:absolute;left:50%;bottom:86px;transform:translateX(-50%);
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
  pointer-events:none;max-width:80vw;
}
.status-pill{
  border:1px solid var(--c,var(--accent));
  background:rgba(4,12,18,.8);
  color:var(--c,var(--accent));
  padding:3px 9px;font-size:9px;letter-spacing:.12em;
}

/* ---- Overlays ----------------------------------------------------------- */

.overlay{
  position:absolute;inset:0;z-index:20;
  pointer-events:auto;touch-action:manipulation;
  display:flex;align-items:center;justify-content:center;
  background:rgba(1,6,9,.82);
  backdrop-filter:blur(4px);
  padding:20px;
  animation:overlay-in .16s ease;
}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}

/* ---- Adaptation (level-up) ---------------------------------------------- */

.adapt-panel{
  width:min(1080px,96vw);max-height:92vh;overflow:auto;
  background:linear-gradient(160deg,rgba(7,18,26,.98),rgba(4,10,15,.98));
  border:1px solid var(--accent);
  box-shadow:0 0 90px rgba(118,231,212,.16);
  padding:26px;
}
.adapt-head{text-align:center;margin-bottom:20px}
.adapt-head h2{font-family:var(--font);font-size:34px;margin:6px 0;letter-spacing:-.03em}
.adapt-queue{font-size:10px;color:var(--muted);letter-spacing:.14em}

.adapt-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.adapt-card{
  position:relative;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:7px;
  border:1px solid var(--rarity,var(--line));
  border-top:3px solid var(--rarity,var(--accent));
  background:rgba(6,17,24,.85);
  padding:18px 16px 16px;
  color:var(--ink);
  transition:transform .14s,box-shadow .14s,background .14s;
  min-height:210px;
}
.adapt-card:hover,.adapt-card:focus-visible{
  transform:translateY(-4px);
  background:rgba(12,32,40,.92);
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 30px color-mix(in srgb,var(--rarity) 25%,transparent);
  outline:none;
}
.adapt-rarity{font-size:8.5px;letter-spacing:.22em;color:var(--rarity)}
.adapt-icon{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--rarity);background:rgba(255,255,255,.03);
  color:var(--rarity);font-size:13px;letter-spacing:.04em;
}
.adapt-card h3{font-size:15px}
.adapt-headline{font-size:10px;letter-spacing:.16em;color:var(--rarity)}
.adapt-desc{font-size:12px;line-height:1.55;color:#dcecee}
.adapt-sub{font-size:10px;line-height:1.5;color:var(--muted);margin-top:auto}
.adapt-key{
  position:absolute;top:10px;right:12px;
  font-size:10px;color:var(--muted);
  border:1px solid var(--line);padding:1px 6px;
}
.evolution-flag{
  position:absolute;top:-1px;left:-1px;right:-1px;
  background:var(--gold);color:#1a1206;
  font-size:8.5px;letter-spacing:.14em;padding:3px 8px;text-align:center;
}
.adapt-card:has(.evolution-flag){padding-top:30px}
.banish-btn{
  position:absolute;bottom:8px;right:10px;
  font-size:11px;color:var(--muted);
  border:1px solid var(--line);padding:1px 6px;cursor:pointer;
}
.banish-btn:hover{color:var(--warn);border-color:var(--warn)}

.adapt-tools{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.tool-btn{
  border:1px solid var(--line);background:rgba(6,17,24,.8);
  color:var(--ink);padding:9px 15px;font-size:10px;letter-spacing:.14em;cursor:pointer;
}
.tool-btn:hover:not(:disabled){border-color:var(--accent)}
.tool-btn:disabled{opacity:.35;cursor:not-allowed}
.tool-btn b{color:var(--accent);margin-left:5px}
.tool-btn.ghost{background:transparent;color:var(--muted)}
.adapt-hint{font-size:9.5px;color:var(--muted);letter-spacing:.1em}

/* ---- Pause -------------------------------------------------------------- */

.pause-panel{
  width:min(1000px,96vw);max-height:92vh;overflow:auto;
  background:linear-gradient(160deg,rgba(7,18,26,.98),rgba(4,10,15,.98));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  padding:26px;
}
.pause-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.pause-head h2{font-size:22px;margin-top:6px;font-family:var(--font)}
.pause-timer{text-align:right}
.pause-timer b{display:block;font-size:26px;color:#eafffc;font-variant-numeric:tabular-nums}
.pause-timer span{font-size:9px;letter-spacing:.16em;color:var(--muted)}

.pause-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pause-list{display:grid;gap:5px}
.pause-list hr{border:none;border-top:1px solid var(--line);margin:6px 0}
.pause-item{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);background:rgba(6,17,24,.55);
  padding:9px 11px;
}
.pause-item.evolved{border-left:2px solid var(--gold)}
.pause-glyph{
  width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(118,231,212,.06);
  color:var(--accent);font-size:9.5px;
}
.pause-glyph.small{font-size:16px}
.pause-item b{display:block;font-size:12px}
.pause-item i{font-style:normal;font-size:9.5px;color:var(--muted)}

.pause-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

/* ---- Touch controls ----------------------------------------------------- */

.stick{
  position:absolute;
  width:calc(124px * var(--touch-scale));
  height:calc(124px * var(--touch-scale));
  border-radius:50%;
  pointer-events:none;touch-action:none;
  opacity:0;transform:scale(.85);
  transition:opacity .1s ease,transform .1s ease;
  z-index:8;display:none;
}
.stick-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(118,231,212,.3);
  background:radial-gradient(circle,rgba(118,231,212,.09),rgba(8,24,30,.2) 58%,transparent);
  box-shadow:inset 0 0 26px rgba(118,231,212,.05);
}
.stick-knob{
  position:absolute;left:50%;top:50%;
  width:calc(46px * var(--touch-scale));
  height:calc(46px * var(--touch-scale));
  margin-left:calc(-23px * var(--touch-scale));
  margin-top:calc(-23px * var(--touch-scale));
  border-radius:50%;
  background:rgba(118,231,212,.3);
  border:1px solid var(--accent);
  box-shadow:0 0 20px rgba(118,231,212,.16);
}
.stick.active{opacity:1;transform:scale(1)}

.touch .stick{display:block}
.touch .stick-aim{
  right:calc(22px + env(safe-area-inset-right));
  bottom:calc(120px + env(safe-area-inset-bottom));
  opacity:.5;
  /* This stick is its own touch zone; without this it never receives a
     single touch and the aim control is inert. */
  pointer-events:auto;
}
.touch .stick-aim .stick-knob{background:rgba(255,179,92,.3);border-color:var(--gold)}
.left-handed.touch .stick-aim{
  right:auto;
  left:calc(22px + env(safe-area-inset-left));
}

/* ---- Codec --------------------------------------------------------------
   Radio traffic, under the mission timer at the top of the screen. Never
   interactive: it sits over the play area, so the panel must let every touch
   and click straight through to what is behind it. */
.codec{
  display:flex;align-items:stretch;gap:0;
  min-width:0;
  pointer-events:none;
  border:1px solid var(--c,var(--accent));
  border-left:3px solid var(--c,var(--accent));
  background:linear-gradient(100deg,rgba(3,10,14,.94),rgba(4,16,20,.86));
  box-shadow:0 0 34px rgba(0,0,0,.6);
}
.codec.open{animation:codec-in .26s cubic-bezier(.2,.9,.3,1) both}
/* Drops in from behind the mission panel it hangs under. */
@keyframes codec-in{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:none}
}

.codec-portrait{
  position:relative;flex:0 0 auto;
  width:64px;height:64px;overflow:hidden;
  border-right:1px solid var(--c,var(--accent));
  background:#050b0d;
}
.codec-portrait img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* The roster crop is head and shoulders; at 64px the face needs to be most
     of the frame, so it is pushed in and up to sit on the eyes. */
  object-position:50% 26%;
  transform:scale(1.3);
  filter:saturate(.6) contrast(1.15) brightness(1.05);
}
/* The scanline wash is what makes a still photograph read as a live feed. */
.codec-scan{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--c,#76e7d4) 22%,transparent));
  mix-blend-mode:screen;opacity:.55;
}

.codec-body{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:9px 14px;min-width:0}
.codec-head{display:flex;align-items:baseline;gap:8px}
.codec-head b{font-size:13px;letter-spacing:.16em;color:var(--c,var(--accent))}
.codec-head span{font-size:10px;letter-spacing:.14em;color:var(--muted)}
/* Radio traffic is dialogue, and dialogue that cannot be read during a
   firefight may as well not have been written. This was 11px, and 10px on a
   phone — the size of a footnote, on the screen this game is actually played
   on, competing with everything else happening. The line height and the shadow
   matter as much as the size: the panel sits over the play area, so the text
   has to hold up against whatever is moving behind it. */
.codec-text{
  font-size:15px;line-height:1.45;color:var(--ink);
  font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  overflow-wrap:break-word;
}

/* The phone layout for the whole top row lives in responsive.css with the rest
   of it; this is only the type scale that goes with it. */
@media(max-width:760px){
  /* Held at arm's length rather than sat in front of, so the type goes up on a
     phone rather than down. The portrait shrinks a little to pay for it. */
  .codec-portrait{width:52px;height:52px}
  .codec-body{padding:8px 11px;gap:3px}
  .codec-head b{font-size:12px}
  .codec-head span{font-size:9px}
  .codec-text{font-size:15px;line-height:1.38}
}
/* Narrow phones in portrait: the panel spans the full width there (see
   responsive.css), so there is room for the type to stay large. */
@media(max-width:430px){
  .codec-portrait{width:46px;height:46px}
  .codec-text{font-size:14.5px}
}

/* The panel is the flash, so reduced-flashing keeps the wash but drops the
   slide; reduced-motion is already handled globally. */
.reduced-flashing .codec-scan{opacity:.34}

/* ---- Squad strip --------------------------------------------------------
   The second operative's condition, under the tally on the right so it does
   not compete with the objective list. Never interactive. */
.squad-strip{
  position:absolute;right:0;top:132px;
  display:flex;flex-direction:column;gap:5px;align-items:flex-end;
  pointer-events:none;
}
.squad-chip{
  min-width:104px;
  padding:5px 8px 6px;
  border:1px solid var(--c,var(--accent));
  border-right-width:3px;
  background:rgba(4,12,18,.82);
}
.squad-chip b{
  display:block;
  font-size:9.5px;letter-spacing:.16em;color:var(--c,var(--accent));
  margin-bottom:4px;
}
.squad-chip .bar{height:3px}
.squad-chip .bar>i{background:var(--c,var(--accent));box-shadow:none}
.squad-chip.down{border-color:var(--warn);background:rgba(30,8,10,.82)}
.squad-chip.down b{color:var(--warn)}
.squad-chip.down .bar>i{background:var(--good)}
.squad-state{
  display:block;font-size:8px;letter-spacing:.2em;color:var(--warn);
  margin-bottom:3px;
  animation:squad-pulse 1.1s ease-in-out infinite;
}
@keyframes squad-pulse{0%,100%{opacity:.45}50%{opacity:1}}

@media(max-width:760px){
  .squad-strip{top:auto;bottom:150px;gap:4px}
  .squad-chip{min-width:84px;padding:4px 6px 5px}
  .squad-chip b{font-size:8.5px}
}