/* V1.28Beta-duel-action-center1: align 1v1 action buttons to the duel stage center, not the full viewport. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode).battle-controls-active #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) #cards#cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden])) #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) #cards#cards#cards.cards.cards {
    left: calc((100vw - var(--battle-log-width-final, 236px) - var(--battle-stage-edge-final, 16px)) / 2) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(env(safe-area-inset-bottom) + clamp(118px, 11.5dvh, 160px)) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active.battle-log-collapsed #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) #cards#cards#cards.cards.cards {
    left: 50% !important;
  }
}

/* V1.28Beta-control-banner-top1: the controlled-round warning is a top-level prompt, never under battle cards. */
html body:not(.maintenance-mode).battle-controls-active #controlBanner#controlBanner.control-banner:not([hidden]),
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #controlBanner#controlBanner.control-banner:not([hidden]) {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: calc(max(12px, env(safe-area-inset-top)) + clamp(10px, 2.2dvh, 26px)) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 2147483000 !important;
  width: min(520px, calc(100vw - 28px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  min-height: clamp(42px, 6.5dvh, 62px) !important;
  max-height: none !important;
  display: grid !important;
  place-items: center !important;
  gap: 3px !important;
  padding: clamp(8px, 1.2dvh, 12px) clamp(14px, 2.4vw, 22px) !important;
  overflow: visible !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

html body:not(.maintenance-mode).battle-controls-active #controlBanner#controlBanner.control-banner:not([hidden]) *,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #controlBanner#controlBanner.control-banner:not([hidden]) * {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body:not(.maintenance-mode) #controlDialog#controlDialog:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482500 !important;
}

/* V1.28Beta-affliction-action-fix1: Affliction warlock action buttons use clean 16:9 art without legacy icon piles. */
html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] {
  --action-attack-panel-art: url("assets/ui/warlock-redraw-preview/warlock-affliction-attack-button-redraw-v1.png?v=V1.27Beta-affliction-redraw1") !important;
  --action-defend-panel-art: url("assets/ui/warlock-redraw-preview/warlock-affliction-defense-button-redraw-v1.png?v=V1.27Beta-affliction-redraw1") !important;
  --action-charge-panel-art: url("assets/ui/warlock-redraw-preview/warlock-affliction-charge-button-redraw-v1.png?v=V1.27Beta-affliction-redraw1") !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.action-card {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  display: grid !important;
  place-items: end center !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: var(--action-panel-art) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.attack {
  --action-panel-art: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.defend {
  --action-panel-art: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.charge {
  --action-panel-art: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.action-card::after,
html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.action-card .action-icon {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.action-card > span {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: clamp(8px, 1.4dvh, 13px) !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  display: block !important;
  max-width: 82% !important;
  color: #f4ecff !important;
  -webkit-text-fill-color: #f4ecff !important;
  font-size: clamp(13px, 1.55dvw, 18px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .85), 0 0 10px rgba(123, 75, 255, .72) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active #controlBanner#controlBanner.control-banner:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #controlBanner#controlBanner.control-banner:not([hidden]) {
    top: calc(max(8px, env(safe-area-inset-top)) + 8px) !important;
    width: min(380px, calc(100vw - 18px)) !important;
    min-height: clamp(36px, 9.6vw, 48px) !important;
    padding: 8px 12px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards[data-attack-style="affliction-warlock"] > .action-card.action-card > span {
    bottom: clamp(5px, 1.7vw, 8px) !important;
    font-size: clamp(11px, 3.1vw, 14px) !important;
  }
}
