/* V1.28Beta-portrait-lower1: final crop overrides for Krieg, Lala, and Jiego. */

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Krieg"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Krieg"] .mini-art.mini-art,
html body:not(.maintenance-mode) #characterPreview#characterPreview.character-preview:not([hidden]) .preview-art.preview-art[data-character="Krieg"] {
  --art-size: auto 106% !important;
  --art-position: center -2% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Lala"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Lala"] .mini-art.mini-art,
html body:not(.maintenance-mode) #characterPreview#characterPreview.character-preview:not([hidden]) .preview-art.preview-art[data-character="Lala"] {
  --art-position: center 3% !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Jiego"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Jiego"] .mini-art.mini-art,
html body:not(.maintenance-mode) #characterPreview#characterPreview.character-preview:not([hidden]) .preview-art.preview-art[data-character="Jiego"] {
  --art-size: auto 106% !important;
  --art-position: center -2% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Krieg"] {
  --art-size: auto 106% !important;
  --art-position: center -2% !important;
  --duel-portrait-size: auto 106% !important;
  --duel-portrait-position: center -2% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Lala"] {
  --art-position: center 3% !important;
  --duel-portrait-position: center 3% !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Jiego"] {
  --art-position: center 18% !important;
  --duel-portrait-position: center 18% !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Krieg"] {
  --team-art-size: auto 106% !important;
  --team-art-position: center -2% !important;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 11, 0.76)),
    var(--team-art) var(--team-art-position) / var(--team-art-size) no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Lala"] {
  --team-art-position: center 2% !important;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 11, 0.76)),
    var(--team-art) var(--team-art-position) / var(--team-art-size, cover) no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Jiego"] {
  --team-art-position: center 18% !important;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 11, 0.76)),
    var(--team-art) var(--team-art-position) / var(--team-art-size, cover) no-repeat !important;
}

html body:not(.maintenance-mode) .character-codex-card[data-character="Krieg"] .character-codex-art {
  background:
    linear-gradient(180deg, transparent 68%, rgba(5, 7, 12, 0.72)),
    var(--character-art, none) center -2% / auto 106% no-repeat,
    radial-gradient(circle at 50% 20%, rgba(130, 232, 255, 0.12), transparent 48%),
    #050811 !important;
}

html body:not(.maintenance-mode) .character-codex-card[data-character="Lala"] .character-codex-art {
  background:
    linear-gradient(180deg, transparent 68%, rgba(5, 7, 12, 0.72)),
    var(--character-art, none) center 3% / cover no-repeat,
    radial-gradient(circle at 50% 20%, rgba(130, 232, 255, 0.12), transparent 48%),
    #050811 !important;
}

html body:not(.maintenance-mode) .character-codex-card[data-character="Jiego"] .character-codex-art {
  background:
    linear-gradient(180deg, transparent 68%, rgba(5, 7, 12, 0.72)),
    var(--character-art, none) center 18% / cover no-repeat,
    radial-gradient(circle at 50% 20%, rgba(130, 232, 255, 0.12), transparent 48%),
    #050811 !important;
}

/* V1.28Beta-taige-battle-lower3: move Taige's battle portrait further down. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Letmetalk"] {
  --art-position: center 42% !important;
  --duel-portrait-position: center 42% !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Letmetalk"] {
  --team-art-position: center 42% !important;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 11, 0.76)),
    var(--team-art) var(--team-art-position) / var(--team-art-size, cover) no-repeat !important;
}

/* V1.28Beta-battle-headline-align1: align low battle portraits closer to Maoye/Xiaofan head clearance. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Saoge"] {
  --art-size: auto 128% !important;
  --duel-portrait-size: auto 128% !important;
  --art-position: center 72% !important;
  --duel-portrait-position: center 72% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Mike"] {
  --art-size: auto 116% !important;
  --duel-portrait-size: auto 116% !important;
  --art-position: center 62% !important;
  --duel-portrait-position: center 62% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="TY"] {
  --art-size: auto 110% !important;
  --duel-portrait-size: auto 110% !important;
  --art-position: center 54% !important;
  --duel-portrait-position: center 54% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Anai"] {
  --art-size: auto 118% !important;
  --duel-portrait-size: auto 118% !important;
  --art-position: center 70% !important;
  --duel-portrait-position: center 70% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Liuzheng"] {
  --art-size: auto 114% !important;
  --duel-portrait-size: auto 114% !important;
  --art-position: center 62% !important;
  --duel-portrait-position: center 62% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="SanjiangCorpseHound"] {
  --art-size: auto 122% !important;
  --duel-portrait-size: auto 122% !important;
  --art-position: center 68% !important;
  --duel-portrait-position: center 68% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art:is([data-character="Saoge"], [data-character="Mike"], [data-character="TY"], [data-character="Anai"], [data-character="Liuzheng"], [data-character="SanjiangCorpseHound"]) {
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 11, 0.76)),
    var(--team-art) var(--team-art-position, center 62%) / var(--team-art-size, auto 116%) no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Saoge"] {
  --team-art-size: auto 128% !important;
  --team-art-position: center 72% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Mike"] {
  --team-art-size: auto 116% !important;
  --team-art-position: center 62% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="TY"] {
  --team-art-size: auto 110% !important;
  --team-art-position: center 54% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Anai"] {
  --team-art-size: auto 118% !important;
  --team-art-position: center 70% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Liuzheng"] {
  --team-art-size: auto 114% !important;
  --team-art-position: center 62% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="SanjiangCorpseHound"] {
  --team-art-size: auto 122% !important;
  --team-art-position: center 68% !important;
}

/* V1.28Beta-jisoo-taige-thumbcrop2: lower Arong and Taige only in select thumbnails. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Letmetalk"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Letmetalk"] .mini-art.mini-art {
  background-position: 50% 47%, center center, center center !important;
}

/* V1.28Beta-jisoo-taige-thumbcrop3: apply before the select panel is opened too. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Letmetalk"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Letmetalk"] .mini-art.mini-art {
  background-position: 50% 47%, center center, center center !important;
}

/* V1.28Beta-arong-battle-lower1: recapture Arong/Jisoo portraits slightly lower in select/preview and battle cards. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #characterPreview#characterPreview.character-preview:not([hidden]) .preview-art.preview-art[data-character="Jisoo"] {
  --art-size: auto 106% !important;
  --art-position: center 52% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Jisoo"] {
  --art-size: auto 106% !important;
  --duel-portrait-size: auto 106% !important;
  --art-position: center 58% !important;
  --duel-portrait-position: center 58% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art[data-character="Jisoo"] {
  --team-art-size: auto 106% !important;
  --team-art-position: center 58% !important;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 11, 0.76)),
    var(--team-art) var(--team-art-position) / var(--team-art-size, cover) no-repeat !important;
}

/* V1.28Beta-arong-taige-head-down1: lower Arong and Taige heads across select, preview, and battle portraits. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-art.preview-art[data-character="Jisoo"] {
  --art-size: auto 106% !important;
  --art-position: center 46% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Letmetalk"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Letmetalk"] .mini-art.mini-art,
html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-art.preview-art[data-character="Letmetalk"] {
  --art-size: auto 108% !important;
  --art-position: center 40% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar.avatar[data-character="Jisoo"],
html body:not(.maintenance-mode) #battle#battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar.avatar[data-character="Jisoo"] {
  --art-size: auto 106% !important;
  --duel-portrait-size: auto 106% !important;
  --art-position: center 52% !important;
  --duel-portrait-position: center 52% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art.team-art[data-character="Jisoo"],
html body:not(.maintenance-mode) #battle#battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art.team-art[data-character="Jisoo"] {
  --team-art-size: auto 106% !important;
  --team-art-position: center 52% !important;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 11, 0.76)),
    var(--team-art) var(--team-art-position) / var(--team-art-size, cover) no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar.avatar[data-character="Letmetalk"],
html body:not(.maintenance-mode) #battle#battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar.avatar[data-character="Letmetalk"] {
  --art-size: auto 108% !important;
  --duel-portrait-size: auto 108% !important;
  --art-position: center 36% !important;
  --duel-portrait-position: center 36% !important;
  background-size: var(--duel-portrait-size, var(--art-size)), cover, cover !important;
  background-position: var(--duel-portrait-position, var(--art-position)), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art.team-art[data-character="Letmetalk"],
html body:not(.maintenance-mode) #battle#battle#battle#battle.battle:not([hidden]) .team-art.team-art.team-art.team-art[data-character="Letmetalk"] {
  --team-art-size: auto 108% !important;
  --team-art-position: center 36% !important;
  background:
    linear-gradient(180deg, transparent 52%, rgba(5, 7, 11, 0.76)),
    var(--team-art) var(--team-art-position) / var(--team-art-size, cover) no-repeat !important;
}

html body:not(.maintenance-mode) .character-codex-card.character-codex-card[data-character="Jisoo"] .character-codex-art.character-codex-art {
  background:
    linear-gradient(180deg, transparent 68%, rgba(5, 7, 12, 0.72)),
    var(--character-art, none) center 46% / auto 106% no-repeat,
    radial-gradient(circle at 50% 20%, rgba(130, 232, 255, 0.12), transparent 48%),
    #050811 !important;
}

html body:not(.maintenance-mode) .character-codex-card.character-codex-card[data-character="Letmetalk"] .character-codex-art.character-codex-art {
  background:
    linear-gradient(180deg, transparent 68%, rgba(5, 7, 12, 0.72)),
    var(--character-art, none) center 40% / auto 108% no-repeat,
    radial-gradient(circle at 50% 20%, rgba(130, 232, 255, 0.12), transparent 48%),
    #050811 !important;
}
