/* V1.28Beta battle hotfix: compact phone status column, visible Xiaocai fel rail, stable skill buttons. */

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle .combatant:has(.xiaocai-fel-rail),
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle .fighter:has(> .xiaocai-fel-rail) {
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle .xiaocai-fel-rail {
  z-index: 340 !important;
  pointer-events: none !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle .xiaocai-fel-rail[data-side="outer-right"] {
    right: -34px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle .xiaocai-fel-rail[data-side="outer-left"] {
    left: -34px !important;
    right: auto !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters.fighters,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .combatant.combatant,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter.fighter {
    overflow: visible !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant.you-combatant,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant.opponent-combatant {
    grid-template-columns: minmax(74px, 0.27fr) minmax(0, 0.73fr) !important;
    gap: clamp(5px, 1.4vw, 8px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-panel.you-panel,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-panel.opponent-panel {
    order: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #youCard#youCard,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #opponentCard#opponentCard {
    order: 2 !important;
    min-width: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel {
    padding: 3px !important;
    gap: 2px !important;
    grid-template-rows: minmax(12px, auto) minmax(14px, auto) minmax(22px, auto) minmax(23px, auto) minmax(49px, auto) minmax(14px, 1fr) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel .energy,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel .fatigue,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel .laziness {
    width: 100% !important;
    min-width: 0 !important;
    height: 23px !important;
    min-height: 23px !important;
    padding: 2px 3px !important;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 3px !important;
    border-radius: 8px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel .fatigue-row {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(2, 23px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel .stat-label,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel .stat-value {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .role-card.role-card {
    z-index: 260 !important;
    min-height: 38px !important;
    max-height: 64px !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .role-card.role-card > span {
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .inline-skill-action.inline-skill-action,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .inline-skill-name.inline-skill-name {
    min-width: 78px !important;
    max-width: min(45vw, 146px) !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 3px 9px 3px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .inline-skill-action .skill-inline-icon,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .inline-skill-name .skill-inline-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .xiaocai-fel-rail[data-side],
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .xiaocai-fel-rail[data-side="outer-left"] {
    left: auto !important;
    right: -30px !important;
    top: 42px !important;
    transform: none !important;
  }
}

/* V1.28Beta-xiaocai-battle-form-art1: desktop fel value lives outside the character frame, always on the right edge. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) :is(.fighter.fighter, .seat-fighter.seat-fighter):has(> .xiaocai-fel-rail) {
  position: relative !important;
  overflow: visible !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .fighter.fighter > .xiaocai-fel-rail.xiaocai-fel-rail[data-side],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) #youCard#youCard > .xiaocai-fel-rail.xiaocai-fel-rail[data-side],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) #opponentCard#opponentCard > .xiaocai-fel-rail.xiaocai-fel-rail[data-side],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .fighter.fighter > .xiaocai-fel-rail.xiaocai-fel-rail[data-side="outer-left"],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) #opponentCard#opponentCard > .xiaocai-fel-rail.xiaocai-fel-rail[data-side="outer-left"] {
    position: absolute !important;
    left: auto !important;
    right: clamp(-44px, -2.4vw, -30px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 2px !important;
    z-index: 999 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-label.xiaocai-fel-label {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-value.xiaocai-fel-value {
    display: block !important;
    min-width: 28px !important;
    color: #efffb7 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow:
      0 0 7px rgba(86, 255, 104, 0.88),
      0 1px 2px rgba(0, 0, 0, 0.96) !important;
    white-space: nowrap !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-stack.xiaocai-fel-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    justify-items: center !important;
    align-items: center !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-stack.xiaocai-fel-stack i {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 0.88 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-stack.xiaocai-fel-stack i.filled {
    opacity: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="chaos"] .xiaocai-fel-stack i,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail:not([data-form]) .xiaocai-fel-stack i {
    background: url("assets/icons/status/xiaocai-fel-chaos-empty-v2.png?v=V1.28Beta-xiaocai-fel-icons2") center / contain no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="chaos"] .xiaocai-fel-stack i.filled,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail:not([data-form]) .xiaocai-fel-stack i.filled {
    background: url("assets/icons/status/xiaocai-fel-chaos-filled-v2.png?v=V1.28Beta-xiaocai-fel-icons2") center / contain no-repeat !important;
    filter: drop-shadow(0 0 5px rgba(96, 255, 74, 0.82)) drop-shadow(0 0 8px rgba(63, 226, 255, 0.48)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="void"] .xiaocai-fel-stack i {
    background: url("assets/icons/status/xiaocai-fel-void-empty-v2.png?v=V1.28Beta-xiaocai-fel-icons2") center / contain no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="void"] .xiaocai-fel-stack i.filled {
    background: url("assets/icons/status/xiaocai-fel-void-filled-v2.png?v=V1.28Beta-xiaocai-fel-icons2") center / contain no-repeat !important;
    filter: drop-shadow(0 0 5px rgba(184, 74, 255, 0.84)) drop-shadow(0 0 8px rgba(92, 55, 255, 0.46)) !important;
  }
}