/* V1.28Beta-portrait-standard10-frame-bind-hollow2-neutral-silver1-tabs1-lollipopz-up1-rong-taige-near1: final loaded crop layer for character select portraits. */

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Maoye"] .mini-art.mini-art.mini-art.mini-art[data-character="Maoye"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Maoye"] {
  --art-size: cover !important;
  --art-position: center 53% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Rhasta"] .mini-art.mini-art.mini-art.mini-art[data-character="Rhasta"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Rhasta"] {
  --art-size: auto 112% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="\767D\6CFD"] .mini-art.mini-art.mini-art.mini-art[data-character="\767D\6CFD"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="白泽"] .mini-art.mini-art.mini-art.mini-art[data-character="白泽"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="\E7 \2122 \BD \E6 \B3 \BD"] .mini-art.mini-art.mini-art.mini-art[data-character="\E7 \2122 \BD \E6 \B3 \BD"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="\767D\6CFD"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="白泽"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="\E7 \2122 \BD \E6 \B3 \BD"] {
  --art-size: cover !important;
  --art-position: center 53% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Lollipopz"] .mini-art.mini-art.mini-art.mini-art[data-character="Lollipopz"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Lollipopz"] {
  --art-size: auto 126% !important;
  --art-position: center 100% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Jisoo"] .mini-art.mini-art.mini-art.mini-art[data-character="Jisoo"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Jisoo"] {
  --art-size: auto 124% !important;
  --art-position: center -4% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Letmetalk"] .mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Letmetalk"] {
  --art-size: auto 134% !important;
  --art-position: center 6% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Lala"] .mini-art.mini-art.mini-art.mini-art[data-character="Lala"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Lala"] {
  --art-size: auto 126% !important;
  --art-position: center 18% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Afu"] .mini-art.mini-art.mini-art.mini-art[data-character="Afu"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Afu"] {
  --art-size: auto 132% !important;
  --art-position: center 22% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Qizong"] .mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Qizong"] {
  --art-size: auto 146% !important;
  --art-position: center 12% !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#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option.character-option.character-option.character-option[data-character="Xiaocai"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option.character-option.character-option.character-option[data-character="Xiaocai"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Xiaocai"] .mini-art.mini-art.mini-art.mini-art[data-character="Xiaocai"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #characterPreview#characterPreview#characterPreview#characterPreview #previewArt#previewArt.preview-art.preview-art.preview-art[data-character="Xiaocai"] {
  --art-size: auto 116% !important;
  --art-position: center 22% !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="Rhasta"],
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Rhasta"] {
  --art-size: auto 104% !important;
  --art-position: center 58% !important;
  --duel-portrait-size: auto 104% !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]) .avatar.avatar.avatar[data-character="Qizong"],
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Qizong"] {
  --art-size: auto 148% !important;
  --art-position: center 7% !important;
  --duel-portrait-size: auto 148% !important;
  --duel-portrait-position: center 7% !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="Xiaocai"],
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar.avatar[data-character="Xiaocai"] {
  --art-size: auto 116% !important;
  --art-position: center 44% !important;
  --duel-portrait-size: auto 116% !important;
  --duel-portrait-position: center 44% !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;
  visibility: visible !important;
  opacity: 1 !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="Rhasta"] {
  --team-art-size: auto 104% !important;
  --team-art-position: center 58% !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="Qizong"] {
  --team-art-size: auto 148% !important;
  --team-art-position: center 7% !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="Xiaocai"] {
  --team-art-size: auto 116% !important;
  --team-art-position: center 44% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

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

/* V1.28Beta-preview-center-frame1: final opened-card geometry. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) .character-preview-backdrop.character-preview-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 110 !important;
  display: block !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(18, 38, 58, 0.34), rgba(2, 8, 15, 0.74) 68%),
    rgba(2, 8, 15, 0.58) !important;
  backdrop-filter: blur(3px) saturate(0.92) !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --preview-core-w: min(clamp(360px, 24dvw, 520px), calc((100dvh - 330px) * 5 / 7)) !important;
  --preview-core-h: calc(var(--preview-core-w) * 7 / 5) !important;
  --preview-frame-bind-outset-x: clamp(76px, 4.8dvw, 118px) !important;
  --preview-frame-bind-outset-y: clamp(104px, 8.6dvh, 154px) !important;
  position: fixed !important;
  left: 50dvw !important;
  top: 50dvh !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 140 !important;
  display: block !important;
  width: var(--preview-core-w) !important;
  height: var(--preview-core-h) !important;
  min-width: var(--preview-core-w) !important;
  min-height: var(--preview-core-h) !important;
  max-width: calc(100dvw - (var(--preview-frame-bind-outset-x) * 2) - 24px) !important;
  max-height: calc(100dvh - (var(--preview-frame-bind-outset-y) * 2) - 24px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 5 / 7 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(246, 215, 146, 0.36) !important;
  border-radius: 8px !important;
  overflow: visible !important;
  transform: none !important;
  background-size: var(--art-size, cover), cover, cover !important;
  background-position: var(--art-position, center top), center center, center center !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 22px 52px rgba(2, 10, 20, 0.44) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) > .preview-card-outer-frame.preview-card-outer-frame {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  position: absolute !important;
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  z-index: 12 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  filter:
    drop-shadow(0 8px 14px rgba(8, 24, 42, 0.24))
    drop-shadow(0 0 12px rgba(132, 200, 255, 0.18)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: 6.6% !important;
  z-index: 24 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription {
  z-index: 24 !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(36px, 9.2dvw, 58px) !important;
    --preview-frame-bind-outset-y: clamp(52px, 12.4dvh, 82px) !important;
    --preview-core-w: min(clamp(260px, 72dvw, 390px), calc(100dvw - (var(--preview-frame-bind-outset-x) * 2) - 16px), calc((100dvh - (var(--preview-frame-bind-outset-y) * 2) - 20px) * 5 / 7)) !important;
    --preview-core-h: calc(var(--preview-core-w) * 7 / 5) !important;
  }
}

/* V1.28Beta-frame-bind-hollow1: thumbnails and opened cards use measured hollow-frame geometry.
   Frame assets are 1070x1672; their transparent art opening is about 914x1335. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-card-outer-w: calc(var(--select-card-outer-h) * 1070 / 1672) !important;
  --select-card-w: calc(var(--select-card-outer-w) * 914 / 1070) !important;
  --select-card-h: calc(var(--select-card-outer-h) * 1335 / 1672) !important;
  --select-frame-outset-x: calc((var(--select-card-outer-w) - var(--select-card-w)) / 2) !important;
  --select-frame-outset-y: calc((var(--select-card-outer-h) - var(--select-card-h)) / 2) !important;
  --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 12px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option {
  position: relative !important;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  max-width: var(--select-card-outer-w) !important;
  max-height: var(--select-card-outer-h) !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span {
  position: absolute !important;
  left: var(--select-frame-outset-x) !important;
  right: var(--select-frame-outset-x) !important;
  top: var(--select-frame-outset-y) !important;
  bottom: var(--select-frame-outset-y) !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.16), rgba(10, 24, 42, 0.2)) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background-image: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  pointer-events: none !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(3, 10, 20, 0) 35%, rgba(1, 5, 14, 0.44) 100%),
    radial-gradient(circle at 50% 12%, rgba(126, 192, 255, 0.15), transparent 48%) !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option .mini-art.mini-art.mini-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  background-size: var(--art-size, cover), cover, cover !important;
  background-position: var(--art-position, center 53%), center center, center center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > *:not(.mini-art) {
  position: relative !important;
  z-index: 8 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > .card-outer-frame.card-outer-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  filter:
    drop-shadow(0 4px 8px rgba(6, 18, 32, 0.22))
    drop-shadow(0 0 8px rgba(128, 198, 255, 0.14)) !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-select-faction="luminary"] > .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option:not([data-select-faction]) > .card-outer-frame.card-outer-frame {
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-select-faction="neutral"] > .card-outer-frame.card-outer-frame {
  background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-select-faction="villain"] > .card-outer-frame.card-outer-frame {
  background-image: url("assets/ui/character-card-frame-villain-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Desire"] > .card-outer-frame.card-outer-frame {
  background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --preview-core-w: min(clamp(370px, 25.5dvw, 560px), calc((100dvh - 260px) * 914 / 1335), calc(100dvw - 190px)) !important;
  --preview-core-h: calc(var(--preview-core-w) * 1335 / 914) !important;
  --preview-frame-bind-outset-x: calc(var(--preview-core-w) * 78 / 914) !important;
  --preview-frame-bind-outset-y: calc(var(--preview-core-h) * 167 / 1335) !important;
  width: var(--preview-core-w) !important;
  height: var(--preview-core-h) !important;
  min-width: var(--preview-core-w) !important;
  min-height: var(--preview-core-h) !important;
  max-width: calc(100dvw - (var(--preview-frame-bind-outset-x) * 2) - 20px) !important;
  max-height: calc(100dvh - (var(--preview-frame-bind-outset-y) * 2) - 20px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 914 / 1335 !important;
  border: 0 !important;
  border-radius: 5px !important;
  overflow: visible !important;
  background-size: var(--art-size, cover), cover, cover !important;
  background-position: var(--art-position, center 53%), center center, center center !important;
  box-shadow: 0 22px 52px rgba(2, 10, 20, 0.42) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  z-index: 32 !important;
  display: block !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 8px 14px rgba(8, 24, 42, 0.24))
    drop-shadow(0 0 12px rgba(132, 200, 255, 0.18)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="luminary"] #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([data-select-faction]) #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="neutral"] #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="villain"] #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-villain-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-character="Desire"] #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --preview-core-w: min(clamp(258px, 73dvw, 392px), calc((100dvh - 150px) * 914 / 1335), calc(100dvw - 74px)) !important;
    --preview-core-h: calc(var(--preview-core-w) * 1335 / 914) !important;
    --preview-frame-bind-outset-x: calc(var(--preview-core-w) * 78 / 914) !important;
    --preview-frame-bind-outset-y: calc(var(--preview-core-h) * 167 / 1335) !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterFactionTabs {
  position: relative !important;
  z-index: 130 !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) .character-select-status-portal.character-select-status-portal {
  pointer-events: none !important;
}

html body:not(.maintenance-mode) .character-select-status-portal.character-select-status-portal button,
html body:not(.maintenance-mode) .character-select-status-portal.character-select-status-portal .return-lobby {
  pointer-events: auto !important;
}

/* V1.28Beta-frame-bind-hollow2: final thumbnail art-opening lock.
   The inner art opening is a measured rectangle, not an aspect-ratio box. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span {
  left: var(--select-frame-outset-x) !important;
  top: var(--select-frame-outset-y) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  max-width: var(--select-card-w) !important;
  max-height: var(--select-card-h) !important;
  aspect-ratio: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option .mini-art.mini-art.mini-art {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(10px, 3.2dvw, 16px) !important;
    --select-card-outer-h: min(clamp(292px, 38dvh, 344px), calc((100dvw - 18px - var(--select-gap)) * 1672 / 2140)) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 1070 / 1672) !important;
    --select-card-w: calc(var(--select-card-outer-w) * 914 / 1070) !important;
    --select-card-h: calc(var(--select-card-outer-h) * 1335 / 1672) !important;
    --select-frame-outset-x: calc((var(--select-card-outer-w) - var(--select-card-w)) / 2) !important;
    --select-frame-outset-y: calc((var(--select-card-outer-h) - var(--select-card-h)) / 2) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 12px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 18px), calc(100dvw - 4px)) !important;
    height: min(calc(var(--character-scroll-two-rows) + clamp(84px, 14dvh, 118px)), calc(100dvh - 12px)) !important;
    max-height: calc(100dvh - 12px) !important;
    display: block !important;
    grid-template-rows: none !important;
    padding: clamp(30px, 5.2dvh, 50px) 6px clamp(10px, 2.2dvh, 18px) !important;
    overflow: visible !important;
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll.character-scroll {
    width: 100% !important;
    height: var(--character-scroll-two-rows) !important;
    min-height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(104px, 16dvh, 136px)) !important;
    margin: 0 auto !important;
    padding: 0 0 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options.character-options {
    width: fit-content !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-content: start !important;
    gap: var(--select-gap) !important;
    margin: 0 auto !important;
    padding: 0 0 10px !important;
  }
}

/* V1.28Beta-frame-top-layer1: decorative frames must be the final foreground layer.
   Keep the frame above names, skill copy, lock button, and thumbnail overlays so gem tips are never covered. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option {
  isolation: isolate !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > .card-outer-frame.card-outer-frame {
  z-index: 1000 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  isolation: isolate !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art {
  z-index: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy {
  z-index: 80 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  z-index: 1000 !important;
  pointer-events: none !important;
}