/* V1.28Beta-portrait-unified2
   One portrait crop contract for codex, opened character cards, and battle cards.
   Small selection thumbnails keep their own close-up crops. */

html body:not(.maintenance-mode) {
  --portrait-crop-size-default: cover;
  --portrait-crop-position-default: center 50%;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview
  #previewArt#previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #skillInspectArt#skillInspectArt#skillInspectArt,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #battlePreviewArt#battlePreviewArt#battlePreviewArt,
html body:not(.maintenance-mode).battle-controls-active
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app
  #battle#battle#battle#battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar.avatar[data-character],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.battle-app
  #battle#battle#battle#battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar.avatar[data-character] {
  background-size: var(--portrait-crop-size, var(--portrait-crop-size-default)), cover, cover !important;
  background-position: var(--portrait-crop-position, var(--portrait-crop-position-default)), center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

html body:not(.maintenance-mode)
  #characterCodexDialog#characterCodexDialog#characterCodexDialog#characterCodexDialog#characterCodexDialog.character-codex-dialog
  .character-codex-card.character-codex-card.character-codex-card.character-codex-card
  .character-codex-art.character-codex-art.character-codex-art[data-character] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 62%, rgba(255, 255, 255, 0.28) 100%),
    var(--character-art, none) var(--portrait-crop-position, var(--portrait-crop-position-default)) / var(--portrait-crop-size, var(--portrait-crop-size-default)) no-repeat,
    radial-gradient(circle at 50% 18%, rgba(255, 239, 184, 0.25), transparent 44%),
    linear-gradient(180deg, #f8fcff 0%, #deedf6 100%) !important;
  background-position:
    center center,
    var(--portrait-crop-position, var(--portrait-crop-position-default)),
    center center,
    center center !important;
  background-size:
    auto,
    var(--portrait-crop-size, var(--portrait-crop-size-default)),
    auto,
    auto !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.identity-battle-app
  #battle#battle#battle#battle#battle#battle.battle.identity-battle:not([hidden])
  #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-art.team-art.team-art[data-character],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.team-battle-app
  #battle#battle#battle#battle#battle#battle.battle.team-mode:not([hidden])
  #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-art.team-art.team-art[data-character] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%, rgba(3, 8, 11, 0.72)),
    var(--team-art) var(--portrait-crop-position, var(--team-art-position, var(--portrait-crop-position-default))) / var(--portrait-crop-size, var(--team-art-size, var(--portrait-crop-size-default))) no-repeat !important;
  background-repeat: no-repeat, no-repeat !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview
    #previewArt#previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character] {
    background-size: var(--portrait-crop-size-mobile, var(--portrait-crop-size, var(--portrait-crop-size-default))), cover, cover !important;
    background-position: var(--portrait-crop-position-mobile, var(--portrait-crop-position, var(--portrait-crop-position-default))), center center, center center !important;
  }
}