/* Existing cyan metal HUD. Variance 4 / motion 2 / density 4.
   Anchor below upper-right status; keep the four-skill/ultimate dock untouched.
   Physical control dimensions stay readable at 80–130% HUD zoom. */
#pilot-controls {
  position: absolute;
  top: calc(76px + env(safe-area-inset-top));
  right: calc(18px + env(safe-area-inset-right));
  width: calc(112px / var(--hud-scale, 1));
  display: flex;
  flex-direction: column;
  gap: calc(4px / var(--hud-scale, 1));
  pointer-events: none;
}
#hud-tr > #pilot-controls { top: calc(100% + 6px / var(--hud-scale, 1)); right: 0; }
#pilot-controls[hidden], #pilot-controls [hidden] { display: none !important; }
#energy-btn {
  position: relative;
  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(7px / var(--hud-scale, 1));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(2px / var(--hud-scale, 1));
  border: 1px solid var(--line-hi, #77b9cf88);
  background: #081522ed;
  color: var(--text, #cfe6f5);
  text-align: left;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}
.energy-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(4px / var(--hud-scale, 1));
  width: 100%;
  color: #a3c5d4;
  font: 600 calc(10px / var(--hud-scale, 1))/1.2 var(--font-mono);
  white-space: nowrap;
}
#energy-status { color: var(--cyan, #55f6ff); font-variant-numeric: tabular-nums; }
#energy-name {
  color: #e5f6ff;
  font: 700 calc(14px / var(--hud-scale, 1))/1.15 var(--font-display);
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.energy-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(2px / var(--hud-scale, 1));
  background: var(--cyan, #55f6ff);
  transform: scaleX(var(--energy-ready, 1));
  transform-origin: left;
}
#energy-btn.cooling #energy-status { color: var(--gold, #ffd166); }
#energy-btn.cooling { border-color: #7795a866; }
#energy-btn:focus-visible { outline: 2px solid var(--cyan, #55f6ff); outline-offset: 3px; }
@media (hover: hover) {
  #energy-btn[aria-disabled="false"]:hover { background: #122a39; border-color: var(--cyan, #55f6ff); }
}
#counter-ready {
  display: flex;
  flex-direction: column;
  gap: calc(2px / var(--hud-scale, 1));
  padding: calc(4px / var(--hud-scale, 1)) 0;
  border-top: 1px solid #ffd16699;
  background: #081522e8;
  color: var(--gold, #ffd166);
  text-align: center;
  white-space: nowrap;
  font: 600 calc(10px / var(--hud-scale, 1))/1.15 var(--font-mono);
}
.counter-remaining {
  color: #e5f6ff;
  font: 600 calc(11px / var(--hud-scale, 1))/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.pilot-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#pause {
  overflow-y: auto;
  align-items: flex-start;
  padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom));
}
#pause .panel.slim { margin: auto; flex-shrink: 0; background: #080f19fa; }
#pause .pilot-pause-help, #pause #pause-pilot-help {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: #aac1cd;
  font: 400 13px/1.45 var(--font-ui);
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  #pilot-controls { width: calc(84px / var(--hud-scale, 1)); }
  #energy-btn { padding-inline: calc(5px / var(--hud-scale, 1)); }
  #energy-name { font-size: calc(13px / var(--hud-scale, 1)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  #pilot-controls { width: calc(96px / var(--hud-scale, 1)); }
  #pause .panel.slim { padding: 14px; gap: 8px 20px; }
  #pause-ship-role { grid-row: 3; }
  #pause .col-buttons { grid-row: 3 / 5; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: start; }
  #pause .col-buttons .mbtn { min-height: 44px; padding: 8px 4px; font-size: 12px; }
  #pause #pause-pilot-help { grid-column: 1; grid-row: 4; margin: 0; font-size: 12px; line-height: 1.4; }
}
@media (orientation: portrait) and (max-height: 650px) {
  #pause .panel.slim { width: calc(100vw - 24px); padding: 14px; }
  #pause h2 { margin: 0 0 8px; font-size: 22px; }
  #pause .run-mini { margin: 0; padding-block: 0; font-size: 12px; line-height: 1.35; }
  #pause-ship-role { margin: 8px 0; font-size: 13px; line-height: 1.35; }
  #pause .fire-control { margin: 8px 0; }
  #pause .fire-control .set-row { margin: 0; }
  #pause-fire-help { margin: 4px 0; font-size: 11px; line-height: 1.35; }
  #pause .col-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #pause .col-buttons .mbtn { min-height: 44px; padding: 8px 4px; font-size: 11px; }
  #pause #pause-pilot-help { margin: 8px 0 0; font-size: 12px; line-height: 1.35; }
}