/* V1.28Beta-mobile-action-ratio-lock2: keep mobile battle action art at the source 16:9 ratio. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active
  #battle:not(#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock).battle:not([hidden]):not(.team-mode):not(.identity-battle) {
    --mobile-battle-action-gap: clamp(4px, 1.3vw, 6px) !important;
    --mobile-action-button-w: calc((100vw - 12px - var(--mobile-battle-action-gap) * 2) / 3) !important;
    --mobile-action-button-h: calc(var(--mobile-action-button-w) * 9 / 16) !important;
    --duel-mobile-action-h: var(--mobile-action-button-h) !important;
    --mobile-battle-stage-bottom: calc(var(--mobile-battle-action-bottom, calc(max(6px, env(safe-area-inset-bottom)) + clamp(38px, 10.4vw, 42px) + 8px)) + var(--mobile-action-button-h) + 12px) !important;
    --duel-mobile-stage-bottom: var(--mobile-battle-stage-bottom) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #battle:not(#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock).battle:not([hidden]):not(.team-mode):not(.identity-battle)
  #cards:not(#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock).cards {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: var(--mobile-battle-action-gap) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #battle:not(#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock).battle:not([hidden]):not(.team-mode):not(.identity-battle)
  #cards:not(#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock#mobile-action-ratio-lock).cards
  > button.action-card.action-card.action-card {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    box-sizing: border-box !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) {
    --mobile-battle-action-gap: clamp(4px, 1.3vw, 6px) !important;
    --mobile-action-button-w: calc((100vw - 12px - var(--mobile-battle-action-gap) * 2) / 3) !important;
    --mobile-action-button-h: calc(var(--mobile-action-button-w) * 9 / 16) !important;
    --duel-mobile-action-h: var(--mobile-action-button-h) !important;
    --mobile-equipment-slot-h: clamp(32px, 8.2vw, 40px) !important;
    --mobile-battle-stage-bottom: calc(var(--mobile-battle-action-bottom, calc(max(6px, env(safe-area-inset-bottom)) + clamp(38px, 10.4vw, 42px) + 8px)) + var(--mobile-action-button-h) + 12px) !important;
    --duel-mobile-stage-bottom: var(--mobile-battle-stage-bottom) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards {
    height: var(--mobile-action-button-h) !important;
    min-height: var(--mobile-action-button-h) !important;
    max-height: var(--mobile-action-button-h) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: var(--mobile-battle-action-gap) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  #cards#cards#cards#cards#cards#cards#cards#cards#cards#cards.cards.cards
  > button.action-card.action-card.action-card.action-card {
    width: 100% !important;
    height: var(--mobile-action-button-h) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: var(--mobile-action-button-h) !important;
    aspect-ratio: 16 / 9 !important;
    box-sizing: border-box !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .fighter-panel.fighter-panel.fighter-panel.fighter-panel.fighter-panel .equipment-slots.equipment-slots {
    flex: 0 0 var(--mobile-equipment-slot-h) !important;
    height: var(--mobile-equipment-slot-h) !important;
    min-height: var(--mobile-equipment-slot-h) !important;
    max-height: var(--mobile-equipment-slot-h) !important;
    padding: 2px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .fighter-panel.fighter-panel.fighter-panel.fighter-panel.fighter-panel .equipment-slot.equipment-slot {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .fighter-panel.fighter-panel.fighter-panel.fighter-panel.fighter-panel .equipment-slot.filled::before {
    inset: 2px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* V1.28Beta-mobile-portrait-fill1: phone battle portraits must crop past narrow side gutters. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Lollipopz"] {
    --art-size: 121% auto !important;
    --art-position: center 46% !important;
    --duel-portrait-size: 121% auto !important;
    --duel-portrait-position: center 46% !important;
    background-repeat: no-repeat !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Lollipopz"][data-mode-active="magic-assassin"] {
    --art-size: 116% auto !important;
    --art-position: center 42% !important;
    --duel-portrait-size: 116% auto !important;
    --duel-portrait-position: center 42% !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Xiaocai"] {
    --art-size: 114% auto !important;
    --art-position: center 44% !important;
    --duel-portrait-size: 114% auto !important;
    --duel-portrait-position: center 44% !important;
    background-repeat: no-repeat !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Xiaocai"][data-mode-active="dual-phase-chaos"],
  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Xiaocai"][data-mode-active="dual-phase-extinction"] {
    --art-size: 116% auto !important;
    --art-position: center 45% !important;
    --duel-portrait-size: 116% auto !important;
    --duel-portrait-position: center 45% !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Jisoo"],
  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Guming"] {
    --art-size: 119% auto !important;
    --art-position: center 47% !important;
    --duel-portrait-size: 119% auto !important;
    --duel-portrait-position: center 47% !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Lala"],
  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Jiego"],
  html body:not(.maintenance-mode).battle-controls-active
  #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#battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  .avatar.avatar.avatar.avatar.avatar[data-character="Duang"] {
    --art-size: 113% auto !important;
    --art-position: center 48% !important;
    --duel-portrait-size: 113% auto !important;
    --duel-portrait-position: center 48% !important;
  }
}