/* V1.286Beta: compositor budget without changing authored art or layout. */
.targeting-trajectory-layer:not(.is-active):not(.is-committing) .targeting-trajectory-flow,
.targeting-trajectory-layer:not(.is-active):not(.is-committing) .targeting-trajectory-node-target,
.ui-ux-fx-layer:not(.ui-action-pending) .ui-action-busy-rail > i {
  animation: none !important;
}

@media (min-width: 721px) {
  /* Keep every command-state sentence in a real track instead of floating the
     readiness/receipt pill over the detail copy. */
  html body:not(.maintenance-mode).battle-controls-active
  #appRoot#appRoot.app.battle-app.duel-battle-app
  #battle#battle.battle:not([hidden])
  #battleCommandState#battleCommandState.battle-command-state {
    grid-template-columns: 36px minmax(190px, 0.82fr) minmax(220px, 1.18fr) minmax(146px, auto) !important;
    grid-template-areas:
      "emblem copy detail status"
      "progress progress progress progress" !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #battle#battle.battle:not([hidden])
  #battleCommandState#battleCommandState.battle-command-state > em {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #battle#battle.battle:not([hidden])
  #battleCommandState#battleCommandState.battle-command-state
  :is(.battle-command-state-latency, .battle-command-state-readiness, .battle-command-state-receipt) {
    grid-area: status !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: center !important;
    justify-self: end !important;
  }

  /* One status owner at a time: a receipt includes its own RTT, readiness is
     next, and the bare latency pill is the fallback. */
  html body:not(.maintenance-mode).battle-controls-active
  #battleCommandState#battleCommandState.battle-command-state:has(.battle-command-state-receipt:not([hidden]))
  :is(.battle-command-state-latency, .battle-command-state-readiness),
  html body:not(.maintenance-mode).battle-controls-active
  #battleCommandState#battleCommandState.battle-command-state:not(:has(.battle-command-state-receipt:not([hidden]))):has(.battle-command-state-readiness:not([hidden]))
  .battle-command-state-latency {
    display: none !important;
  }

  /* A legacy translate and the newer negative top offset were both lifting the
     player name strips. Keep the strips on the card rim, below the command HUD. */
  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  )
  #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
  #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .fighter-head.fighter-head.fighter-head {
    top: 20px !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  )
  #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
  #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .fighter-head.fighter-head > :is(.fighter-side, strong) {
    color: #18344d !important;
    -webkit-text-fill-color: #18344d !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  /* Toasts are short-lived primary feedback and own the top-centre slot. */
  html body:not(.maintenance-mode).battle-controls-active.toast-visible
  #battle#battle.battle:not([hidden])
  #battleCommandState#battleCommandState.battle-command-state {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Connectivity stays readable without colliding with the battle status. */
  html body:not(.maintenance-mode).battle-controls-active
  #networkStatusIndicator#networkStatusIndicator.network-status-indicator {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(112px, calc(env(safe-area-inset-right) + 112px)) !important;
    min-width: 76px !important;
    min-height: 28px !important;
    grid-template-rows: auto !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #networkStatusIndicator#networkStatusIndicator.network-status-indicator > i {
    grid-row: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #networkStatusIndicator#networkStatusIndicator.network-status-indicator > small {
    display: none !important;
  }

  /* Older desktop layout locks may still assign geometry to hidden control UI. */
  html body:not(.maintenance-mode).battle-controls-active
  #appRoot#appRoot.app.battle-app.duel-battle-app
  #battle#battle.battle:not([hidden])
  #controlBanner#controlBanner.control-banner[hidden] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  /* Match the legacy specificity locks so only one full-screen wallpaper paints. */
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden])) {
    background: #07121a !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app),
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) > .arena {
    background: transparent !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) > .arena,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) {
    background-attachment: scroll !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel#sidePanel#sidePanel#sidePanel#sidePanel.side:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel#sidePanel#sidePanel#sidePanel#sidePanel.side:not([hidden]) > section,
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel#sidePanel#sidePanel#sidePanel#sidePanel.side:not([hidden]) > .log,
  html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle#battle#battle#battle.battle:not([hidden]) .fighter-panel,
  html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle#battle#battle#battle.battle:not([hidden]) .action-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle#battle#battle#battle.battle:not([hidden]) .action-card:not(:disabled),
  html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle#battle#battle#battle.battle:not([hidden]) .inline-skill-action:not(:disabled) {
    animation: none !important;
  }

  /* Hidden control copy was force-painted by an older !important grid rule. */
  html body:not(.maintenance-mode).battle-controls-active
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app
  #battle#battle#battle#battle#battle#battle.battle:not([hidden])
  #controlBanner#controlBanner.control-banner[hidden] {
    display: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* The command-state rail already carries this status on mobile. */
  html body:not(.maintenance-mode).battle-controls-active
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app
  #sidePanel#sidePanel#sidePanel#sidePanel#sidePanel#sidePanel.side:not([hidden])
  .battle-status.status-line.battle-status.status-line {
    display: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* When control is genuinely active, let its banner own the same top slot. */
  html body:not(.maintenance-mode).battle-controls-active
  #battle#battle#battle.battle:not([hidden]):has(#controlBanner.control-banner:not([hidden]))
  #battleCommandState#battleCommandState.battle-command-state {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* A queued toast uses the same reserved rail area instead of painting over it. */
  html body:not(.maintenance-mode).battle-controls-active.toast-visible
  #battle#battle#battle.battle:not([hidden])
  #battleCommandState#battleCommandState.battle-command-state {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect .mini-art,
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect .character-option-art,
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect .character-option::before {
    will-change: auto !important;
  }
}