/* Web release overrides: keep the HUD usable on phones. */
@media (max-width:760px){
  /* Without min-width:0 the long objective text pushes the mission timer off screen. */
  .hud-metrics>div{min-width:0}
  .hud-metrics{gap:7px}
  .hud-metrics strong{font-size:20px}
  .objective small{white-space:normal;line-height:1.4}
  .hud-heading>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hud-heading>span:last-child{font-size:9px;text-align:right}
  .timer{flex:0 0 auto}
  .controls-hint{flex-wrap:wrap;gap:4px}
  .gate-choices{gap:5px}
  .gate-choice small{display:none}
  .modal{padding:16px}
  .upgrade-cards{grid-template-columns:1fr}
  .upgrade-card{min-height:0}
  .upgrade-card p{font-size:10px}
}
/* The prototype hides the whole battlefield behind an opaque "loading" panel.
   The release turns it into a slim progress strip so the briefing and the
   deploy screen are readable while the assets stream in. */
#loading{position:absolute;left:0;right:0;top:0;bottom:auto;inset:0 0 auto 0;z-index:9;
  display:block;height:auto;background:linear-gradient(180deg,#0b1117f5,#0b1117c4);
  border-bottom:1px solid #a8916140;color:#c4b58b;text-align:center;
  padding:7px 12px 9px;font:10px/1.6 ui-monospace,monospace;letter-spacing:.04em;
  overflow:hidden;pointer-events:none}
#loading::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:42%;
  background:linear-gradient(90deg,transparent,#d4bb7e,transparent);
  animation:barLoadStrip 1.15s linear infinite}
@keyframes barLoadStrip{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){#loading::after{animation:none;width:100%;opacity:.5}}
/* Placeholder look for portraits that have not arrived yet (the deploy screen is
   readable while the bundle is still streaming). */
.pilot img,.commander-strip>img,.roster-tile img,.upgrade-card img{background:#16242d}
img:not([src]),img[src=""]{color:transparent;border-color:#31424a}
/* Touch comfort on tablets and phones. */
#battle{touch-action:none}
button,select,a{-webkit-tap-highlight-color:rgba(212,187,126,.18)}
html{overscroll-behavior:none}
