/* V1.28Beta-thumb-bigcard-sync1
   Baize and Qizong small cards follow their opened-card portrait crops. */

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"] {
  --art-size: auto 128% !important;
  --art-position: 50% clamp(10px, 1.55dvh, 20px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="白泽"]
  .mini-art.mini-art.mini-art.mini-art.mini-art,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="\767D\6CFD"]
  .mini-art.mini-art.mini-art.mini-art.mini-art,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="白泽"]
  .mini-art.mini-art.mini-art.mini-art.mini-art,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="\767D\6CFD"]
  .mini-art.mini-art.mini-art.mini-art.mini-art {
  --art-size: contain !important;
  --art-position: center center !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"] {
    --art-size: auto 126% !important;
    --art-position: 50% clamp(7px, 2.1dvw, 13px) !important;
  }
}

/* V1.28Beta-select-card-unified-frame-crop1:
   Small card and big card use the same portrait/frame relationship.
   Character-specific rules may change crop size/position, but not the frame box logic. */
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option:not(.placeholder) {
  --select-frame-art-bleed-x: clamp(7px, calc(var(--select-frame-outset-x, 16px) * 0.42), 11px) !important;
  --select-frame-art-bleed-y: clamp(5px, calc(var(--select-frame-outset-y, 24px) * 0.2), 8px) !important;
  --select-frame-art-scale: 1.035 !important;
  --select-frame-art-shift-x: -1.45% !important;
  --select-frame-art-shift-y: -2% !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option:not(.placeholder)
  > .card-outer-frame.card-outer-frame {
  display: block !important;
  top: calc(var(--select-frame-art-bleed-y) * -1) !important;
  right: calc(var(--select-frame-art-bleed-x) * -1) !important;
  bottom: calc(var(--select-frame-art-bleed-y) * -1) !important;
  left: calc(var(--select-frame-art-bleed-x) * -1) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(var(--select-frame-art-shift-x), var(--select-frame-art-shift-y)) scale(var(--select-frame-art-scale)) !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --preview-frame-art-scale: 1.035 !important;
  --preview-frame-art-shift-x: -1.45% !important;
  --preview-frame-art-shift-y: -2% !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame {
  display: block !important;
  top: calc(var(--preview-frame-bind-outset-y, 10px) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x, 10px) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y, 10px) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x, 10px) * -1) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(var(--preview-frame-art-shift-x), var(--preview-frame-art-shift-y)) scale(var(--preview-frame-art-scale)) !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option:not(.placeholder)
  .mini-art.mini-art {
  --select-art-transform: translateY(1.6%) scale(1.08) !important;
  --select-art-transform-origin: center center !important;
  transform: var(--select-art-transform) !important;
  transform-origin: var(--select-art-transform-origin) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option[data-character="Lollipopz"]
  .mini-art.mini-art[data-character="Lollipopz"] {
  --art-size: auto 126% !important;
  --art-position: center calc(54% + 14px) !important;
  --select-art-transform: translateY(4.2%) scale(1.1) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option[data-character="Iso"]
  .mini-art.mini-art[data-character="Iso"] {
  --art-size: cover !important;
  --art-position: center 60% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option[data-character="Jisoo"]
  .mini-art.mini-art[data-character="Jisoo"] {
  --select-art-transform: translateY(0) scale(1.1) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option:is([data-character="Jiego"], [data-character="Kongdu"])
  .mini-art.mini-art {
  --select-art-transform: translateY(0) scale(1.03) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option:not(.placeholder)
    .mini-art.mini-art {
    --select-art-transform: translateY(1.4%) scale(1.07) !important;
  }

  html body:not(.maintenance-mode)
    #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option[data-character="Lollipopz"]
    .mini-art.mini-art[data-character="Lollipopz"] {
    --art-size: auto 126% !important;
    --art-position: center calc(56% + 12px) !important;
    --select-art-transform: translateY(4%) scale(1.1) !important;
  }
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option[data-character="Desire"]
  > span::before,
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option[data-character="Desire"]
  > span::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-desire-hybrid-unified-frame1") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* V1.28Beta-select-card-crop-sync2
   Character select crop contract: small cards and opened big cards use one crop
   family. Do not reuse these values for codex, duel battle, or multiplayer crops. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#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[data-character="Qizong"] {
  --art-size: auto 128% !important;
  --art-position: 50% clamp(10px, 1.55dvh, 20px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#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[data-character="Qizong"] {
    --art-size: auto 126% !important;
    --art-position: 50% clamp(7px, 2.1dvw, 13px) !important;
  }
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#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[data-character="Jiego"] {
  --art-size: auto 116% !important;
  --art-position: center calc(50% + 14px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Kongdu"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Kongdu"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Kongdu"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Kongdu"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#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[data-character="Kongdu"] {
  --art-size: auto 114% !important;
  --art-position: center calc(50% + 24px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Desire"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Desire"] {
  --art-size: auto 112% !important;
  --art-position: calc(50% - 14px) calc(7% + 8px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame {
  --desire-thumb-frame-grow: clamp(15px, calc(var(--select-card-outer-w, 180px) * .078), 22px) !important;
  top: calc(var(--select-frame-art-bleed-y, 6px) * -1 - var(--desire-thumb-frame-grow)) !important;
  right: calc(var(--select-frame-art-bleed-x, 8px) * -1 - var(--desire-thumb-frame-grow) * 1.3) !important;
  bottom: calc(var(--select-frame-art-bleed-y, 6px) * -1 - var(--desire-thumb-frame-grow)) !important;
  left: calc(var(--select-frame-art-bleed-x, 8px) * -1 - var(--desire-thumb-frame-grow) * .4) !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Duang"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Duang"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Duang"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Duang"] {
  --art-size: auto 118% !important;
  --art-position: center calc(50% + 28px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* V1.28Beta-thumb-preview-sync-final1: final select-card crops. The opened card
   copies these values at runtime, so the thumbnail is the source of truth. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Lala"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Lala"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Lala"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Lala"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#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[data-character="Lala"] {
  --art-size: auto 114% !important;
  --art-position: center calc(50% + 36px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* V1.28Beta-taige-qizong-crop1:
   Taige's opened card follows the raised thumbnail crop; Qizong grows in both
   thumbnail and opened-card views. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#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[data-character="Letmetalk"] {
  --art-size: auto 136% !important;
  --art-position: center 24% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#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[data-character="Qizong"] {
  --art-size: auto 136% !important;
  --art-position: 50% clamp(4px, 1dvh, 12px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#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[data-character="Qizong"] {
    --art-size: auto 134% !important;
    --art-position: 50% clamp(3px, 1.4dvw, 9px) !important;
  }
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Krieg"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Krieg"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Krieg"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Krieg"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#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[data-character="Krieg"] {
  --art-size: auto 116% !important;
  --art-position: center -2% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#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[data-character="Jiego"] {
  --art-size: auto 116% !important;
  --art-position: center calc(50% + 28px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* V1.28Beta-desire-luminary-frame-final1: Desire uses the ordinary Luminary frame. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame {
  --desire-thumb-frame-grow: 0px !important;
  --desire-thumb-frame-right-grow: 0px !important;
  --desire-thumb-frame-y-grow: 0px !important;
  --desire-thumb-frame-shift: 0px !important;
  top: calc(var(--select-frame-fit-outset-y, 10px) * -1) !important;
  right: calc(var(--select-frame-fit-outset-x, 8px) * -1) !important;
  bottom: calc(var(--select-frame-fit-outset-y, 10px) * -1) !important;
  left: calc(var(--select-frame-fit-outset-x, 8px) * -1) !important;
  width: auto !important;
  height: auto !important;
  background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-luminary-frame-final1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 3px 7px rgba(86, 61, 16, 0.18))
    drop-shadow(0 0 11px rgba(84, 177, 255, 0.22))
    drop-shadow(0 0 8px rgba(231, 181, 66, 0.16)) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  #previewArt#previewArt#previewArt.preview-art.preview-art
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  #previewArt#previewArt#previewArt.preview-art.preview-art
  > .preview-card-outer-frame.preview-card-outer-frame {
  --desire-preview-frame-extra-x: 0px !important;
  --desire-preview-frame-extra-y: 0px !important;
  top: calc(var(--preview-frame-bind-outset-y, 10px) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x, 10px) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y, 10px) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x, 10px) * -1) !important;
  width: auto !important;
  height: auto !important;
  background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-luminary-frame-final1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 5px 12px rgba(8, 24, 42, 0.22))
    drop-shadow(0 0 10px rgba(96, 184, 255, 0.18)) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  transform-origin: center center !important;
  z-index: 12140 !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  #previewArt#previewArt#previewArt.preview-art.preview-art::before,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  #previewArt#previewArt#previewArt.preview-art.preview-art::before {
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-luminary-frame-final1") !important;
  filter:
    drop-shadow(0 5px 12px rgba(8, 24, 42, 0.22))
    drop-shadow(0 0 10px rgba(96, 184, 255, 0.18)) !important;
}

/* V1.28Beta-select-preview-crop-sync5:
   Small card is the source of truth for character-select opened cards. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Lollipopz"]:not([data-mode-key])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Lollipopz"] {
  --art-size: auto 118% !important;
  --art-position: center 84% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Lollipopz"][data-mode-key="magic-assassin"]
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Lollipopz"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Lollipopz"][data-mode-active="magic-assassin"]
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Lollipopz"] {
  --art-size: auto 116% !important;
  --art-position: center 62% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Qizong"] {
  --art-size: auto 128% !important;
  --art-position: 50% clamp(10px, 1.55dvh, 20px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Jiego"] {
  --art-size: auto 116% !important;
  --art-position: center calc(50% + 40px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Lollipopz"][data-mode-key="magic-assassin"]
    #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Lollipopz"],
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Lollipopz"][data-mode-active="magic-assassin"]
    #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Lollipopz"] {
    --art-size: auto 114% !important;
    --art-position: center 60% !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Qizong"] {
    --art-size: auto 126% !important;
    --art-position: 50% clamp(7px, 2.1dvw, 13px) !important;
  }
}

/* V1.28Beta-special-mode-detail-frame1:
   Special-mode text keeps the existing template; this only frames the
   description/story/prompt group, leaving title, skill label, and buttons alone. */
html body:not(.maintenance-mode)
  #modeDialog#modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"]) {
  --special-copy-frame-border: rgba(235, 245, 255, 0.58);
  --special-copy-frame-inner: rgba(255, 255, 255, 0.16);
  --special-copy-frame-fill-a: rgba(12, 20, 34, 0.34);
  --special-copy-frame-fill-b: rgba(7, 10, 18, 0.28);
  --special-copy-frame-glow: rgba(126, 210, 255, 0.22);
}

html body:not(.maintenance-mode)
  #modeDialog#modeDialog.mode-dialog[data-mode="storm"] {
  --special-copy-frame-border: rgba(135, 236, 255, 0.66);
  --special-copy-frame-inner: rgba(255, 255, 255, 0.18);
  --special-copy-frame-fill-a: rgba(8, 22, 36, 0.48);
  --special-copy-frame-fill-b: rgba(6, 10, 20, 0.36);
  --special-copy-frame-glow: rgba(99, 223, 255, 0.32);
}

html body:not(.maintenance-mode)
  #modeDialog#modeDialog.mode-dialog[data-mode="magic-assassin"] {
  --special-copy-frame-border: rgba(255, 188, 227, 0.7);
  --special-copy-frame-inner: rgba(255, 255, 255, 0.28);
  --special-copy-frame-fill-a: rgba(255, 245, 253, 0.22);
  --special-copy-frame-fill-b: rgba(255, 202, 233, 0.16);
  --special-copy-frame-glow: rgba(255, 145, 213, 0.28);
}

html body:not(.maintenance-mode)
  #modeDialog#modeDialog.mode-dialog[data-mode="devour-world"] {
  --special-copy-frame-border: rgba(232, 198, 104, 0.72);
  --special-copy-frame-inner: rgba(255, 250, 224, 0.32);
  --special-copy-frame-fill-a: rgba(255, 244, 205, 0.2);
  --special-copy-frame-fill-b: rgba(52, 94, 67, 0.14);
  --special-copy-frame-glow: rgba(220, 164, 54, 0.24);
}

html body:not(.maintenance-mode)
  #modeDialog#modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"])
  .mode-dialog-detail-frame.mode-dialog-detail-frame {
  box-sizing: border-box !important;
  display: block !important;
  min-width: 0 !important;
  padding: clamp(9px, 1.4vw, 14px) clamp(10px, 1.65vw, 16px) !important;
  border: 1.5px solid var(--special-copy-frame-border) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(135deg, var(--special-copy-frame-fill-a), transparent 48%, var(--special-copy-frame-fill-b)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%) !important;
  box-shadow:
    inset 0 0 0 1px var(--special-copy-frame-inner),
    0 0 20px var(--special-copy-frame-glow),
    0 12px 28px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode)
  #modeDialog#modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"])
  .mode-dialog-detail-frame.mode-dialog-detail-frame > * {
  margin: 0 !important;
}

html body:not(.maintenance-mode)
  #modeDialog#modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"])
  .mode-dialog-detail-frame.mode-dialog-detail-frame #modeDialogDescription {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode)
  #modeDialog#modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"])
  .mode-dialog-detail-frame.mode-dialog-detail-frame > * + * {
  margin-top: clamp(6px, 1vw, 10px) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode)
    #modeDialog#modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"])
    .mode-dialog-detail-frame.mode-dialog-detail-frame {
    padding: 7px 8px !important;
    border-radius: 7px !important;
  }

  html body:not(.maintenance-mode)
    #modeDialog#modeDialog.mode-dialog:is([data-mode="storm"], [data-mode="magic-assassin"], [data-mode="devour-world"])
    .mode-dialog-detail-frame.mode-dialog-detail-frame > * + * {
    margin-top: 5px !important;
  }
}

/* V1.28Beta-taige-qizong-crop2:
   Final crop layer for the select screen after all preview-card overrides. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Letmetalk"] {
  --art-size: auto 136% !important;
  --art-position: center 24% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Qizong"] {
  --art-size: auto 136% !important;
  --art-position: 50% clamp(4px, 1dvh, 12px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Qizong"] {
    --art-size: auto 134% !important;
    --art-position: 50% clamp(3px, 1.4dvw, 9px) !important;
  }
}

/* V1.28Beta-taige-qizong-crop3:
   Direct select-screen selectors so the crop applies even when the select layer
   is mounted outside #appRoot. */
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"],
html body:not(.maintenance-mode)
  #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#previewArt#previewArt.preview-art.preview-art[data-character="Letmetalk"] {
  --art-size: auto 136% !important;
  --art-position: center 24% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #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#previewArt#previewArt.preview-art.preview-art[data-character="Qizong"] {
  --art-size: auto 136% !important;
  --art-position: 50% clamp(4px, 1dvh, 12px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
    .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode)
    #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#previewArt#previewArt.preview-art.preview-art[data-character="Qizong"] {
    --art-size: auto 134% !important;
    --art-position: 50% clamp(3px, 1.4dvw, 9px) !important;
  }
}

/* V1.28Beta-select-card-unified-frame-final1:
   Final loaded rule: small card and big card share one crop/frame model. */
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option:not(.placeholder) {
  --select-frame-art-bleed-x: clamp(7px, calc(var(--select-frame-outset-x, 16px) * 0.42), 11px) !important;
  --select-frame-art-bleed-y: clamp(5px, calc(var(--select-frame-outset-y, 24px) * 0.2), 8px) !important;
  --select-frame-art-scale: 1.035 !important;
  --select-frame-art-shift-x: -1.45% !important;
  --select-frame-art-shift-y: -2% !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option:not(.placeholder)
  > .card-outer-frame.card-outer-frame {
  display: block !important;
  top: calc(var(--select-frame-art-bleed-y) * -1) !important;
  right: calc(var(--select-frame-art-bleed-x) * -1) !important;
  bottom: calc(var(--select-frame-art-bleed-y) * -1) !important;
  left: calc(var(--select-frame-art-bleed-x) * -1) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(var(--select-frame-art-shift-x), var(--select-frame-art-shift-y)) scale(var(--select-frame-art-scale)) !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --preview-frame-art-scale: 1.035 !important;
  --preview-frame-art-shift-x: -1.45% !important;
  --preview-frame-art-shift-y: -2% !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame {
  display: block !important;
  top: calc(var(--preview-frame-bind-outset-y, 10px) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x, 10px) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y, 10px) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x, 10px) * -1) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(var(--preview-frame-art-shift-x), var(--preview-frame-art-shift-y)) scale(var(--preview-frame-art-scale)) !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option:not(.placeholder)
  .mini-art.mini-art {
  --select-art-transform: translateY(1.6%) scale(1.08) !important;
  --select-art-transform-origin: center center !important;
  transform: var(--select-art-transform) !important;
  transform-origin: var(--select-art-transform-origin) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option[data-character="Lollipopz"]
  .mini-art.mini-art[data-character="Lollipopz"] {
  --art-size: auto 126% !important;
  --art-position: center calc(54% + 14px) !important;
  --select-art-transform: translateY(4.2%) scale(1.1) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option[data-character="Iso"]
  .mini-art.mini-art[data-character="Iso"] {
  --art-size: cover !important;
  --art-position: center 60% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option[data-character="Jisoo"]
  .mini-art.mini-art[data-character="Jisoo"] {
  --select-art-transform: translateY(0) scale(1.1) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option:is([data-character="Jiego"], [data-character="Kongdu"])
  .mini-art.mini-art {
  --select-art-transform: translateY(0) scale(1.03) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder)
    .mini-art.mini-art {
    --select-art-transform: translateY(1.4%) scale(1.07) !important;
  }

  html body:not(.maintenance-mode)
    #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option[data-character="Lollipopz"]
    .mini-art.mini-art[data-character="Lollipopz"] {
    --art-size: auto 126% !important;
    --art-position: center calc(56% + 12px) !important;
    --select-art-transform: translateY(4%) scale(1.1) !important;
  }
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option[data-character="Desire"]
  > span::before,
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option[data-character="Desire"]
  > span::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-desire-hybrid-unified-frame1") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* V1.28Beta-select-card-unified-frame-final2:
   Character-select contract: small card and big card use the same portrait crop
   and frame expansion model. Codex/battle/multiplayer crops stay separate. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder),
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) {
  --select-frame-art-bleed-x: clamp(7px, calc(var(--select-frame-outset-x, 16px) * 0.42), 11px) !important;
  --select-frame-art-bleed-y: clamp(5px, calc(var(--select-frame-outset-y, 24px) * 0.2), 8px) !important;
  --select-frame-art-scale: 1.04 !important;
  --select-frame-art-shift-x: -1.75% !important;
  --select-frame-art-shift-y: -2.35% !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder)
  > .card-outer-frame.card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder)
  > .card-outer-frame.card-outer-frame.card-outer-frame {
  display: block !important;
  top: calc(var(--select-frame-art-bleed-y) * -1) !important;
  right: calc(var(--select-frame-art-bleed-x) * -1) !important;
  bottom: calc(var(--select-frame-art-bleed-y) * -1) !important;
  left: calc(var(--select-frame-art-bleed-x) * -1) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(var(--select-frame-art-shift-x), var(--select-frame-art-shift-y)) scale(var(--select-frame-art-scale)) !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --preview-frame-art-scale: var(--select-frame-art-scale, 1.04) !important;
  --preview-frame-art-shift-x: var(--select-frame-art-shift-x, -1.75%) !important;
  --preview-frame-art-shift-y: var(--select-frame-art-shift-y, -2.35%) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame {
  display: block !important;
  top: calc(var(--preview-frame-bind-outset-y, 10px) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x, 10px) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y, 10px) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x, 10px) * -1) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(var(--preview-frame-art-shift-x), var(--preview-frame-art-shift-y)) scale(var(--preview-frame-art-scale)) !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
  overflow: visible !important;
  pointer-events: none !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > span::before,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > span::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-desire-hybrid-unified-frame2") !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

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

/* V1.28Beta-preview-thumb-scale-final5:
   Opened character cards keep their original text UI, while portrait art and the
   decorative frame are the thumbnail geometry scaled up from the live small card.
   The lock button is pinned under the decorative frame's lower-left half center. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art {
  overflow: hidden !important;
  transform: none !important;
  translate: 0 0 !important;
  background-image:
    linear-gradient(180deg, rgba(236, 248, 255, 0.98), rgba(163, 198, 220, 0.92)) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art
  > .preview-mini-art.preview-mini-art.mini-art,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art
  > .preview-mini-art.preview-mini-art.mini-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-image:
    var(--character-art, none),
    linear-gradient(180deg, rgba(236, 248, 255, 0.98), rgba(163, 198, 220, 0.92)) !important;
  background-size: var(--art-size, cover), cover !important;
  background-position: var(--art-position, center 52%), center center !important;
  background-repeat: no-repeat, no-repeat !important;
  transform-origin: var(--select-art-transform-origin, center center) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame {
  position: absolute !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  z-index: 13000 !important;
  overflow: visible !important;
  pointer-events: none !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
  .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame.card-outer-frame {
  --desire-thumb-frame-grow: 0px !important;
  --desire-thumb-frame-right-grow: 0px !important;
  --desire-thumb-frame-y-grow: 0px !important;
  top: calc(var(--select-frame-art-bleed-y, 6px) * -1) !important;
  right: calc(var(--select-frame-art-bleed-x, 8px) * -1) !important;
  bottom: calc(var(--select-frame-art-bleed-y, 6px) * -1) !important;
  left: calc(var(--select-frame-art-bleed-x, 8px) * -1) !important;
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-luminary-size-final2") !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: translate(var(--select-frame-art-shift-x, -1.75%), var(--select-frame-art-shift-y, -2.35%)) scale(var(--select-frame-art-scale, 1.04)) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"]
  > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-luminary-size-final2") !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > #lockCharacter#lockCharacter#lockCharacter,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > #lockCharacter#lockCharacter#lockCharacter {
  position: absolute !important;
  left: var(--preview-lock-center-x, 25%) !important;
  right: auto !important;
  top: var(
    --preview-lock-top,
    calc(100% + var(--preview-frame-bottom-outset, var(--preview-frame-bind-outset-y, 54px)) + clamp(8px, 1.2dvh, 16px))
  ) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-self: auto !important;
  align-self: auto !important;
  margin: 0 !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    > #lockCharacter#lockCharacter#lockCharacter {
    top: var(
      --preview-lock-top,
      calc(100% + var(--preview-frame-bottom-outset, var(--preview-frame-bind-outset-y, 52px)) + clamp(6px, 2dvw, 12px))
    ) !important;
  }
}

/* V1.28Beta-select-crop-legacy-final:
   Final select crop nudges. The opened card copies these live thumbnail values. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jisoo"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jisoo"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jisoo"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jisoo"] {
  --art-size: auto 136% !important;
  --art-position: center calc(-12% - 30px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(-4.2%) scale(1.1) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"] {
  --art-size: auto 136% !important;
  --art-position: 50% clamp(4px, 1dvh, 12px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translate(-5%, -1.4%) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Guming"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Guming"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Guming"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Guming"] {
  --art-size: auto 136% !important;
  --art-position: 56% 12% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translate(1.2%, -1.2%) scale(1.1) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Lala"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Lala"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Lala"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Lala"] {
  --art-size: auto 122% !important;
  --art-position: center calc(50% + 12px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(-3.8%) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"] {
  --art-size: auto 130% !important;
  --art-position: center calc(50% + 10px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(-8%) scale(1.08) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Afu"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Afu"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Afu"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Afu"] {
  --art-size: auto 126% !important;
  --art-position: center 24% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateX(-3%) scale(1.03) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Mike"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Mike"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Mike"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Mike"] {
  --art-size: auto 122% !important;
  --art-position: center calc(50% + 38px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(-2%) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"] {
  --art-size: auto 136% !important;
  --art-position: center 24% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(2.6%) !important;
  transform-origin: center center !important;
}

/* V1.28Beta-select-crop-final6:
   Big-card hard rule: portrait art is clipped inside the opened card frame,
   the frame stays above portrait art, and UI sits above the frame. The lock
   button anchors to the lower center sapphire, not the old left-half center. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --preview-ui-layer: 2147483200;
  --preview-frame-layer: 50000;
  --preview-art-layer: 1;
  --preview-art-clip-x: clamp(5px, 1.25%, 11px);
  --preview-art-clip-y: clamp(6px, 1.45%, 13px);
}

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

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art
  > .preview-mini-art.preview-mini-art.mini-art,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art
  > .preview-mini-art.preview-mini-art.mini-art {
  z-index: 1 !important;
  clip-path: inset(
    var(--preview-art-clip-y)
    var(--preview-art-clip-x)
    var(--preview-art-clip-y)
    var(--preview-art-clip-x)
    round 7px
  ) !important;
}

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

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-copy.preview-copy,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-copy.preview-copy {
  z-index: var(--preview-ui-layer) !important;
  overflow: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill {
  position: relative !important;
  z-index: calc(var(--preview-ui-layer) + 10) !important;
  padding: clamp(9px, 1.15dvh, 12px) clamp(10px, 1.45dvh, 14px) !important;
  border: 1px solid rgba(137, 210, 255, 0.68) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(216, 237, 252, 0.76) 54%, rgba(234, 245, 255, 0.92)),
    linear-gradient(135deg, rgba(79, 180, 255, 0.2), rgba(246, 200, 95, 0.14)) !important;
  box-shadow:
    0 12px 26px rgba(7, 30, 54, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 -10px 20px rgba(89, 169, 223, 0.1) inset !important;
  color: #163650 !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill > strong,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill > strong {
  color: #0f3c61 !important;
  -webkit-text-fill-color: #0f3c61 !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(144, 216, 255, 0.62), rgba(246, 200, 95, 0.28)) !important;
  border-left-color: rgba(37, 145, 217, 0.92) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill > span,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  .preview-skill.preview-skill > span {
  color: #173650 !important;
  max-height: clamp(62px, 9.2dvh, 94px) !important;
  padding-right: 6px !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > #lockCharacter#lockCharacter#lockCharacter,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  > #lockCharacter#lockCharacter#lockCharacter {
  left: var(--preview-lock-center-x, 50%) !important;
  z-index: calc(var(--preview-ui-layer) + 20) !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Iso"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Iso"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Iso"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Iso"] {
  --art-size: auto 116% !important;
  --art-position: center 56% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Krieg"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Krieg"],
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Krieg"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Krieg"] {
  --art-size: auto 116% !important;
  --art-position: center calc(-2% + 12px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* V1.28Beta-select-crop-final7:
   Mike opened-card distance is the baseline for select thumbnails and opened
   cards. Big cards copy these exact thumbnail values at runtime, so every
   character keeps one camera-distance rule across both sizes. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character]:not([data-mode-active]),
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character]:not([data-mode-active]) {
  --art-size: auto 122% !important;
  --art-position: center calc(50% + 28px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Maoye"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Maoye"]:not([data-mode-active]) {
  --art-position: center calc(50% + 20px) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Rhasta"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Rhasta"]:not([data-mode-active]) {
  --art-position: center calc(50% + 18px) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jisoo"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jisoo"]:not([data-mode-active]) {
  --art-position: center calc(50% - 26px) !important;
  transform: translateY(-2%) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"]:not([data-mode-active]) {
  --art-position: center calc(50% + 36px) !important;
  transform: translateY(2%) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Xiaofan"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Xiaofan"]:not([data-mode-active]) {
  --art-position: center calc(50% + 12px) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Xiaocai"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Xiaocai"]:not([data-mode-active]) {
  --art-position: center calc(50% + 18px) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option:is([data-character="白泽"], [data-character="\767D\6CFD"])
  .mini-art.mini-art.mini-art.mini-art.mini-art:is([data-character="白泽"], [data-character="\767D\6CFD"]) {
  --art-position: center calc(50% + 18px) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Qizong"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Qizong"]:not([data-mode-active]) {
  --art-position: 47% calc(50% - 10px) !important;
  transform: translate(-2.5%, -1.2%) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Lollipopz"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Lollipopz"]:not([data-mode-active]) {
  --art-position: center calc(50% + 30px) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Guming"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Guming"]:not([data-mode-active]) {
  --art-position: 56% calc(50% + 4px) !important;
  transform: translate(1.2%, -1%) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Lala"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Lala"]:not([data-mode-active]) {
  --art-position: center calc(50% + 12px) !important;
  transform: translateY(-3.8%) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Jiego"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Jiego"]:not([data-mode-active]) {
  --art-position: center calc(50% + 4px) !important;
  transform: translateY(-4%) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Afu"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Afu"]:not([data-mode-active]) {
  --art-position: center calc(50% + 24px) !important;
  transform: translateX(-3%) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Mike"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Mike"]:not([data-mode-active]) {
  --art-position: center calc(50% + 38px) !important;
  transform: translateY(-2%) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Iso"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Iso"]:not([data-mode-active]) {
  --art-position: center calc(50% + 26px) !important;
}

html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Krieg"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Krieg"]:not([data-mode-active]) {
  --art-position: center calc(50% + 18px) !important;
}

/* V1.28Beta-taige-down1:
   Move Taige's select thumbnail down and keep the opened big card in the same
   crop family. The opened preview copies thumbnail crop at runtime, and these
   direct preview selectors keep the first rendered frame consistent too. */
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Letmetalk"]
  .mini-art.mini-art.mini-art.mini-art.mini-art[data-character="Letmetalk"]:not([data-mode-active]),
html body:not(.maintenance-mode)
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Letmetalk"],
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Letmetalk"],
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Letmetalk"]
  > .preview-mini-art.preview-mini-art.mini-art[data-character="Letmetalk"] {
  --art-size: auto 136% !important;
  --art-position: center calc(50% + 54px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(3.8%) !important;
  transform-origin: center center !important;
}

/* V1.28Beta-mobile-thumb-skill-lower2-lock-center1:
   Small mobile cards need their skill chip lower, and the opened preview lock
   button must stay centered no matter which runtime host owns the button. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder):not(.no-skill) > span > em:not([hidden]),
  html body:not(.maintenance-mode)
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder):not(.no-skill) > span > em:not([hidden]) {
    bottom: 16.6% !important;
    top: auto !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    > #lockCharacter#lockCharacter#lockCharacter,
  html body:not(.maintenance-mode)
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    > #lockCharacter#lockCharacter#lockCharacter,
  html body:not(.maintenance-mode)
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #lockCharacter#lockCharacter#lockCharacter {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: var(
      --preview-lock-top,
      calc(100% + var(--preview-frame-bottom-outset, var(--preview-frame-bind-outset-y, 52px)) + clamp(6px, 2dvw, 12px))
    ) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: auto !important;
    align-self: auto !important;
    text-align: center !important;
  }
}