/* Existing system: cyan metal, Plex/Barlow, variance 4 / motion 2 / density 4.
   Portrait: below hull/ammo. Short landscape: beside vitals, clear of announcements.
   ENERGY/counter, minimap and bottom flight dock retain their existing lanes. */
#drone-controls {
  width: min(100%, calc(112px / var(--hud-scale, 1)));
  min-width: calc(44px / var(--hud-scale, 1));
  pointer-events: none;
}
#drone-controls[hidden] { display: none !important; }
#drone-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(2px / var(--hud-scale, 1));
  width: 100%;
  min-width: calc(44px / var(--hud-scale, 1));
  min-height: calc(45px / var(--hud-scale, 1));
  padding: calc(5px / var(--hud-scale, 1)) calc(6px / var(--hud-scale, 1));
  border: 1px solid var(--line-hi);
  background: #081522ed;
  color: var(--text);
  text-align: left;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}
.drone-heading, .drone-task {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(3px / var(--hud-scale, 1));
  width: 100%;
  white-space: nowrap;
}
.drone-heading { color: #a3c5d4; font: 600 calc(10px / var(--hud-scale, 1))/1.2 var(--font-mono); }
#drone-status { color: var(--cyan); font-variant-numeric: tabular-nums; }
#drone-name { font: 700 calc(14px / var(--hud-scale, 1))/1.15 var(--font-display); letter-spacing: .015em; }
#drone-count { flex: none; color: #a3c5d4; font: 600 calc(10px / var(--hud-scale, 1))/1.2 var(--font-mono); }
.drone-meter {
  position: absolute; inset: auto 0 0;
  height: calc(2px / var(--hud-scale, 1));
  background: var(--cyan);
  transform: scaleX(var(--drone-ready, 1)); transform-origin: left;
}
#drone-btn[data-cooling=true] { border-color: #7795a866; }
#drone-btn[data-cooling=true] #drone-status { color: var(--gold); }
#drone-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (hover: hover) {
  #drone-btn[aria-disabled=false]:hover { background: #122a39; border-color: var(--cyan); }
}
.drone-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The timer owns only its digits, not the wider event label below it. */
#hud-tc #timer { width: max-content; margin-inline: auto; }
@media (max-width: 600px) {
  #drone-controls { width: min(100%, calc(80px / var(--hud-scale, 1))); }
  #drone-btn { padding-inline: calc(5px / var(--hud-scale, 1)); }
  #drone-name { font-size: calc(13px / var(--hud-scale, 1)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  #hud-tl > #drone-controls { position: absolute; top: 0; left: calc(100% + 8px / var(--hud-scale, 1)); width: calc(80px / var(--hud-scale, 1)); }
  #drone-btn { padding-inline: calc(5px / var(--hud-scale, 1)); }
  #drone-name { font-size: calc(13px / var(--hud-scale, 1)); }
}
/* Root retains the pending/retry lifecycle and accessible status. No animation. */
#pause[aria-busy=true] #p-restart { position: relative; color: transparent; cursor: progress; }
#pause[aria-busy=true] #p-restart::before {
  content: "STARTING FLIGHT";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  width: auto; height: auto; border: 0; transition: none;
  color: var(--cyan); font: 600 12px/1.25 var(--font-ui); letter-spacing: .025em; text-indent: 0;
}
#pause[aria-busy=true] #p-restart::after { content: none; }