/* Loaded last: keep mobile combat chrome out of the flight area. */
#help-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#help-screen .help-dialog {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin: auto;
  box-sizing: border-box;
  touch-action: pan-y;
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .combat-mode .masthead {flex-direction:row;flex-wrap:nowrap;padding:2px 6px;min-height:48px;gap:6px}
  .combat-mode .brand-stack {flex:none}
  .combat-mode .brand>span:not(.brand-mark) {display:none}
  .combat-mode .tools {flex:1;min-width:0;width:0;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;gap:5px}
  .combat-mode .tools>* {flex-shrink:0}
  .combat-mode .tools .tool,.combat-mode .tools select {height:40px;min-height:40px;font-size:12px}
  .combat-mode .tools .icon-only {width:40px}
  .combat-mode #pause-button {order:-10;position:sticky;left:0;background:#101b21;z-index:1}
  .combat-mode .hud {inset:10px 10px auto;grid-template-columns:1fr auto 1fr;gap:12px}
  .combat-mode .hud .eyebrow {font-size:10px;letter-spacing:1px}
  .combat-mode .score-group strong {font-size:22px;line-height:1.2;margin:3px 0}
  .combat-mode .my-score {font-size:10px;margin-top:2px}
  .combat-mode .timer {font-size:14px;margin-top:6px}
  .combat-mode .life-group {width:auto;min-width:0}
  .combat-mode #shield-label {font-size:10px;margin-top:4px}
  .combat-mode .reserve-status {font-size:10px;line-height:1.2;margin-top:3px}
  .combat-mode .hull-meter {margin-top:5px;height:4px}
  .combat-mode .location-map {top:88px;right:8px;width:88px;padding:4px}
  .combat-mode .location-map header {margin:0;font-size:8px}
  .combat-mode #location-coordinates {display:none}
  .combat-mode #scout-button {min-height:40px;font-size:10px;white-space:normal}
  .combat-mode .combat-notices {top:90px;left:8px;width:calc(100% - 114px);max-height:116px;gap:4px}
  .combat-mode .combat-notices>#honor-rail .asset-art {width:18px}
  .combat-mode .combat-notices>#field-feed {padding:5px;grid-template-columns:24px minmax(0,1fr);gap:5px}
  .combat-mode .combat-notices #feed-art {width:24px!important;min-width:24px;height:24px}
  .combat-mode .combat-notices #field-feed p {font-size:11px;line-height:1.4;margin-top:2px}
  .combat-mode .squad-roster {left:8px;right:8px;bottom:8px;gap:4px;max-width:none;height:40px}
  .combat-mode .squad-chip {flex:1;max-width:120px;width:0;padding:3px 5px}
  .combat-mode .squad-chip.empty {display:none}
  .combat-mode .squad-chip .crew-portrait,.combat-mode .squad-chip small,.combat-mode .squad-chip em {display:none}
  .combat-mode .squad-chip b {font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .combat-mode .squad-chip .crew-bar {margin-top:4px}
  .combat-mode .fire-button {right:8px;bottom:58px;min-width:104px;width:104px;height:56px;padding:6px;grid-template-columns:26px 1fr}
  .combat-mode .fire-button>span.asset-art {width:26px;height:26px}
  .combat-mode .fire-button small {display:none}
  .combat-mode .ability-button {right:8px;bottom:120px;min-width:104px;max-width:145px;height:44px;font-size:11px;gap:4px;padding:4px}
  .combat-mode .ability-button>.asset-art,.combat-mode .bomb-button>.asset-art {width:22px;height:22px}
  .combat-mode .bomb-button {right:118px;bottom:58px;height:44px;font-size:11px;padding:4px;gap:4px}
  .combat-mode .bot-command-panel {left:8px;bottom:120px;max-width:calc(100% - 168px);gap:3px}
  .combat-mode .bot-command-panel button {min-height:40px;font-size:10px}
  .combat-mode .game-shell .loadout {position:relative;display:flex;flex-wrap:nowrap;min-height:64px;padding:5px 8px 9px;gap:7px}
  .combat-mode .loadout .level-badge {width:36px;height:40px}
  .combat-mode .level-badge strong {font-size:21px}
  .combat-mode .weapon-art {width:44px;height:44px;flex:none}
  .combat-mode .weapon {min-width:0;flex:1}
  .combat-mode .weapon>.eyebrow {font-size:9px;line-height:1.2;letter-spacing:0}
  .combat-mode #weapon-tier {font-size:10px}
  .combat-mode #weapon-name {font-size:12px;line-height:1.3;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .combat-mode .weapon-growth {font-size:10px;line-height:1.3}
  /* The adjacent 44px weapon-art button opens the same picker. */
  .combat-mode #switch-weapon-button {display:none}
  .combat-mode .loadout .power-track {position:absolute;bottom:2px;left:8px;right:8px;margin:0;min-width:0;max-width:none}
  .combat-mode .power-track>div:not(.xp-meter),.combat-mode .power-track>span {display:none}
  #help-screen .help-dialog {padding:20px 16px;width:100%}
}

/* Mobile flight defaults to a compact loadout; settings expand on demand. */
#mobile-panel-button,#mobile-weapon-button {display:none}
@media (max-width:760px), (max-height:500px) and (pointer:coarse) {
  .combat-mode #mobile-panel-button {display:flex;order:-9;min-width:64px;justify-content:center}
  .combat-mode:not(.mobile-panels-open) .tools>*:not(#pause-button):not(#mobile-panel-button) {display:none!important}
  .combat-mode:not(.mobile-panels-open) .tools {justify-content:flex-end;overflow:visible}
  .combat-mode:not(.mobile-panels-open) .brand>span:not(.brand-mark) {display:inline}
  .combat-mode .masthead {min-height:44px}
  .combat-mode:not(.mobile-panels-open) .loadout {display:none}
  .combat-mode:not(.mobile-panels-open) #mobile-weapon-button {display:flex;position:absolute;bottom:max(8px,env(safe-area-inset-bottom));right:8px;z-index:4;height:44px;min-width:60px;justify-content:center;font-size:14px;background:#152c23ee;border-color:#86b75c}
  .combat-mode:not(.mobile-panels-open) .squad-roster {right:76px;bottom:max(8px,env(safe-area-inset-bottom))}
  .combat-mode .arena {padding-bottom:env(safe-area-inset-bottom)}
  .combat-mode:not(.mobile-panels-open) .my-score,
  .combat-mode:not(.mobile-panels-open) #shield-label,
  .combat-mode:not(.mobile-panels-open) #reserve-label {display:none}
  .combat-mode:not(.mobile-panels-open) .location-map {top:64px;width:76px}
  .combat-mode:not(.mobile-panels-open) .location-map header {display:none}
  .combat-mode:not(.mobile-panels-open) .combat-notices {top:64px;width:calc(100% - 102px);max-height:90px}
  .combat-mode.mobile-panels-open .tools {flex-wrap:wrap;overflow:visible;width:auto}
  .combat-mode.mobile-panels-open .masthead {align-items:flex-start}
}