.convoy-mode .mission-dialog::before { content: 'Operation 02 · Convoy Ambush'; }
.convoy-status { position: absolute; left: 28px; top: 346px; width: 238px; z-index: 5; padding: 14px 16px; background: #101a22ed; border-left: 3px solid #f79032; color: #e8edf1; font-size: 12px; line-height: 1.5; }
.convoy-status strong { display: block; margin-bottom: 8px; font-size: 14px; color: #ffb460; }
.convoy-status .health { height: 5px; background: #34404b; margin: 5px 0 9px; }
.convoy-status .health i { display: block; height: 100%; background: #e4a959; }
.convoy-status .engine i { background: #68bed8; }
.convoy-status button { margin-top: 8px; min-height: 34px; padding: 7px 12px; border: 1px solid #db9047; background: #d46a16; color: white; font: 700 13px Arial,sans-serif; cursor: pointer; }
.convoy-status button:hover { background: #ee8529; }
@media(max-width:700px) {
  .convoy-status { left: 14px; top: 250px; width: calc(50% - 28px); padding: 10px 11px; font-size: 12px; }
  .convoy-status strong { font-size: 13px; }
  .convoy-mode .mission-hud { width: min(185px,calc(100% - 150px)); font-size: 12px; }
  .convoy-mode .mission-hud > strong { font-size: 13px; }
  .convoy-mode #mission-hp, .convoy-mode #mission-shields { font-size: 11px; }
  .convoy-mode .status-line { font-size: 11px; }
  .convoy-mode .mission-notice { display: none; }
}
@media(max-height:650px) and (min-width:701px) {
  .convoy-status { left: 290px; top: 100px; width: 210px; }
}
/* Keep map, status and touch controls in separate regions on landscape phones. */
@media(min-width:600px) and (max-height:500px) {
  .convoy-mode .speedo, .convoy-mode .d-title, .convoy-mode .mission-notice { display: none; }
  .convoy-mode .mission-hud { top: 8px; left: 14px; width: 200px; padding: 8px; }
  .convoy-mode .mission-hud .health { height: 4px; margin: 3px 0 5px; }
  .convoy-mode .mission-hud .mission-route { margin-top: 4px; padding-top: 4px; }
  .convoy-mode .mission-hud > strong, .convoy-mode .mission-hud .status-line { display: none; }
  .convoy-mode #mission-hp, .convoy-mode #mission-shields { font-size: 10px; }
  .convoy-mode .convoy-status { top: 108px; left: 14px; width: 200px; padding: 6px 10px; font-size: 11px; }
  .convoy-mode .convoy-status .health { height: 4px; margin: 3px 0; }
  .convoy-mode .convoy-status .engine { display: none; }
  .convoy-mode .convoy-status strong { font-size: 12px; margin-bottom: 4px; }
  .convoy-mode .convoy-status button { position: absolute; left: calc(100% + 12px); top: 0; width: 110px; margin: 0; font-size: 11px; padding: 6px 8px; }
  .convoy-mode .mission-map-frame { top: 8px; right: 14px; padding: 6px; }
  .convoy-mode .map-heading { display: none; }
  .convoy-mode .mission-map { width: 100px; height: 100px; }
  .convoy-mode .mission-pause, .convoy-mode .sound { left: 230px; right: auto; max-width: 80px; font-size: 10px; }
  .convoy-mode .mission-pause { top: 8px; }
  .convoy-mode .sound { top: 48px; }
  .convoy-mode .wbar { left: 14px; right: auto; width: calc(100% - 200px); max-width: none; transform: none; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
  .convoy-mode .wslot, .convoy-mode .wslot.ability { width: auto; min-width: 0; grid-column: auto; }
}
@media(min-width:600px) and (max-height:350px) {
  .convoy-mode .mission-map-frame { top: 4px; padding: 4px; }
  .convoy-mode .mission-map { width: 80px; height: 80px; }
}
@media(max-width:360px) {
  .convoy-mode #convoy-start { position: absolute; left: calc(100% + 48px); top: 60px; width: 112px; margin: 0; }
}