/* V1.28Beta-bigcard-fullart-thumbcrop1: big cards show full portraits; thumbnails keep custom crops. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --bigcard-skill-drop: clamp(16px, 2.4dvh, 28px);
  --bigcard-lock-gem-offset: clamp(126px, 15.4dvh, 176px);
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy {
  bottom: 1.2% !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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]) #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art {
  --art-size: cover !important;
  --art-position: center 50% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

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

/* V1.28Beta-preview-crop-standard1:
   Character-select crop rule:
   1. Big cards and thumbnails must fill the inner portrait rectangle; never use contain if it leaves side gutters.
   2. Camera distance is judged by face size. Lollipopz/Rhasta are the baseline.
   3. Character-specific values may enlarge/reposition art, but the head must stay below the top frame ornaments. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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]) #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art {
  background-size: var(--art-size, cover), cover, cover !important;
  background-position: var(--art-position, center 50%), center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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]) #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Lollipopz"] {
  --art-size: auto 132% !important;
  --art-position: center 88% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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]) #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Qizong"] {
  --art-size: auto 112% !important;
  --art-position: center 49% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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]) #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art[data-character="Guming"] {
  --art-size: auto 144% !important;
  --art-position: center 49% !important;
}

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

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

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

/* V1.28Beta-desire-thumb-frame-rightdown2:
   Desire small-card rule: keep his hybrid frame, keep the portrait fixed, and let only the top
   decorative frame expand proportionally toward the lower-right until it wraps the portrait. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .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.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Desire"] > .card-outer-frame.card-outer-frame {
  --desire-thumb-frame-grow: clamp(12px, calc(var(--select-card-outer-w, 180px) * 0.066), 18px) !important;
  --desire-thumb-frame-shift: clamp(1px, calc(var(--select-card-outer-w, 180px) * 0.008), 2px) !important;
  top: calc(var(--select-frame-art-bleed-y, 6px) * -1 - var(--desire-thumb-frame-grow) * 0.18) !important;
  right: calc(var(--select-frame-art-bleed-x, 8px) * -1 - var(--desire-thumb-frame-grow) * 1.35) !important;
  bottom: calc(var(--select-frame-art-bleed-y, 6px) * -1 - var(--desire-thumb-frame-grow) * 1.35) !important;
  left: calc(var(--select-frame-art-bleed-x, 8px) * -1 - var(--desire-thumb-frame-grow) * 0.18) !important;
  width: auto !important;
  height: auto !important;
  background: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-desire-thumb-frame-rightdown2") center / 100% 100% no-repeat !important;
  transform: translate(var(--desire-thumb-frame-shift), var(--desire-thumb-frame-shift)) scale(1.034) !important;
  transform-origin: left top !important;
  z-index: 10020 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* V1.28Beta-villain-blackred-frame1:
   Abyssal Scions use the black-red frame on both thumbnail cards and opened big cards. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-select-faction="villain"] > .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-select-faction="villain"] > .card-outer-frame.card-outer-frame {
  background: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-villain-blackred-frame1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 4px 9px rgba(8, 4, 6, 0.36))
    drop-shadow(0 0 14px rgba(220, 38, 58, 0.28)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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[data-select-faction="villain"] > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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[data-select-faction="villain"] #previewArt#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.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="villain"] > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="villain"] #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  background: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-villain-blackred-frame1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 8px 16px rgba(8, 4, 6, 0.42))
    drop-shadow(0 0 18px rgba(220, 38, 58, 0.32)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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[data-select-faction="villain"] #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview[data-select-faction="villain"] #previewArt#previewArt#previewArt#previewArt.preview-art.preview-art::before {
  background-image: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-villain-blackred-frame1") !important;
}

/* V1.28Beta-thumb-skill-align1:
   Small-card skill rule: normal skill badges share the same baseline as Lollipopz/Rhasta/Xiaoyang.
   If a card has a special-mode badge, the special and normal badges keep their stack spacing. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option:not(.placeholder):not(.no-skill):not(.has-special-mode) > span > em:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option:not(.placeholder):not(.no-skill):not(.has-special-mode) > span > em:not([hidden]) {
  --select-thumb-skill-drop: clamp(5px, calc(var(--select-card-outer-h, 300px) * 0.018), 8px) !important;
  bottom: calc(15.2% - var(--select-thumb-skill-drop)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option.has-special-mode:not(.placeholder):not(.no-skill) > span > em:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option.has-special-mode:not(.placeholder):not(.no-skill) > span > em:not([hidden]) {
  --select-thumb-skill-drop: clamp(5px, calc(var(--select-card-outer-h, 300px) * 0.018), 8px) !important;
  bottom: calc(15.2% - var(--select-thumb-skill-drop)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill {
  position: relative !important;
  z-index: 12130 !important;
  transform: translateY(var(--bigcard-skill-drop)) !important;
  will-change: transform !important;
}

/* V1.28Beta-bigcard-lock-gem-center1: anchor the large-card lock button to the lower sapphire. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #lockCharacter#lockCharacter {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(0px - var(--bigcard-lock-gem-offset)) !important;
  z-index: 12170 !important;
  width: clamp(156px, 35%, 208px) !important;
  min-width: 156px !important;
  max-width: 208px !important;
  min-height: clamp(32px, 3.8dvh, 42px) !important;
  padding: 0 clamp(18px, 3.2%, 26px) !important;
  box-sizing: border-box !important;
  font-size: clamp(13px, 1.25dvh, 15px) !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --bigcard-skill-drop: clamp(10px, 3.4dvw, 18px);
    --bigcard-lock-gem-offset: clamp(96px, 24dvw, 138px);
  }

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Jisoo"] .mini-art.mini-art {
    --art-size: auto 136% !important;
    --art-position: center -10% !important;
    transform: translateY(0.2%) scale(1.09) !important;
  }

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #lockCharacter#lockCharacter {
    width: clamp(140px, 42%, 184px) !important;
    min-width: 140px !important;
    max-width: 184px !important;
    min-height: clamp(32px, 8dvw, 38px) !important;
    font-size: clamp(12px, 3.4dvw, 14px) !important;
  }
}

/* V1.28Beta-desire-frame-grow3:
   Desire keeps the hybrid frame. Expand only the decorative frame slightly toward
   the right/top/bottom so it wraps the portrait like the standard card 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.character-select:not([hidden]) .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.character-select:not([hidden]) .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;
  --desire-thumb-frame-right-grow: calc(var(--desire-thumb-frame-grow) * 1.58) !important;
  --desire-thumb-frame-y-grow: calc(var(--desire-thumb-frame-grow) * .72) !important;
  top: calc(var(--select-frame-art-bleed-y, 6px) * -1 - var(--desire-thumb-frame-y-grow)) !important;
  right: calc(var(--select-frame-art-bleed-x, 8px) * -1 - var(--desire-thumb-frame-right-grow)) !important;
  bottom: calc(var(--select-frame-art-bleed-y, 6px) * -1 - var(--desire-thumb-frame-y-grow)) !important;
  left: calc(var(--select-frame-art-bleed-x, 8px) * -1 - var(--desire-thumb-frame-grow) * .12) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(clamp(1px, .45vw, 3px), 0) scale(1.028) !important;
  transform-origin: left center !important;
  z-index: 13000 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #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.app.character-select-app #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: clamp(8px, 1.1dvw, 15px) !important;
  --desire-preview-frame-extra-y: clamp(6px, .9dvw, 12px) !important;
  top: calc(var(--preview-frame-bind-outset-y, 10px) * -1 - var(--desire-preview-frame-extra-y)) !important;
  right: calc(var(--preview-frame-bind-outset-x, 10px) * -1 - var(--desire-preview-frame-extra-x) * 1.3) !important;
  bottom: calc(var(--preview-frame-bind-outset-y, 10px) * -1 - var(--desire-preview-frame-extra-y)) !important;
  left: calc(var(--preview-frame-bind-outset-x, 10px) * -1 - var(--desire-preview-frame-extra-x) * .4) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(clamp(2px, .35dvw, 5px), 0) scale(1.018) !important;
  transform-origin: left center !important;
  z-index: 12140 !important;
}

/* V1.28Beta-mobile-bigcard-lock-skill-down1:
   Mobile big-card rule: lock button stays above all card art/frame layers and
   sits lower on the bottom sapphire; the skill panel follows it downward. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --bigcard-skill-drop: clamp(22px, 6.2dvw, 34px) !important;
    --bigcard-lock-extra-drop: clamp(9px, 3.1dvw, 16px) !important;
  }

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

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    .preview-skill.preview-skill {
    transform: translateY(var(--bigcard-skill-drop)) !important;
    z-index: 12270 !important;
    will-change: transform !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #lockCharacter#lockCharacter {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(0px - var(--bigcard-lock-gem-offset) - var(--bigcard-lock-extra-drop)) !important;
    z-index: 2147482000 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* V1.28Beta-mobile-bigcard-lock-skill-down2:
   Higher-specificity final pass for mobile big cards. Keep the copy stack above
   the decorative frame, lower the skill panel, and lower the lock button without
   changing the selected portrait crop. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --bigcard-skill-drop: clamp(24px, 6.8dvw, 38px) !important;
    --bigcard-lock-extra-drop: clamp(10px, 3.2dvw, 17px) !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    .preview-copy.preview-copy {
    z-index: 2147480000 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    .preview-skill.preview-skill {
    transform: translateY(var(--bigcard-skill-drop)) !important;
    z-index: 2147480100 !important;
    will-change: transform !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #lockCharacter#lockCharacter#lockCharacter {
    position: relative !important;
    z-index: 2147480200 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: clamp(5px, 1.6dvw, 8px) !important;
    transform: translateY(var(--bigcard-lock-extra-drop)) !important;
    pointer-events: auto !important;
  }
}

/* V1.28Beta-mobile-bigcard-frame-cover1:
   Mobile big-card rule: the decorative art frame is the top cover for the
   portrait rectangle. Grow it mostly toward left/top and slightly toward
   right/top so portrait edges cannot leak beside the frame. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#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#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --mobile-bigcard-frame-grow: clamp(9px, 2.7dvw, 15px) !important;
    --mobile-bigcard-frame-grow-left: calc(var(--mobile-bigcard-frame-grow) * 1.18) !important;
    --mobile-bigcard-frame-grow-right: calc(var(--mobile-bigcard-frame-grow) * .58) !important;
    --mobile-bigcard-frame-grow-top: calc(var(--mobile-bigcard-frame-grow) * 1.1) !important;
    --mobile-bigcard-frame-grow-bottom: calc(var(--mobile-bigcard-frame-grow) * .72) !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#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#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    > .preview-card-outer-frame.preview-card-outer-frame,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#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#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
    top: calc(var(--preview-frame-bind-outset-y, 52px) * -1 - var(--mobile-bigcard-frame-grow-top)) !important;
    right: calc(var(--preview-frame-bind-outset-x, 34px) * -1 - var(--mobile-bigcard-frame-grow-right)) !important;
    bottom: calc(var(--preview-frame-bind-outset-y, 52px) * -1 - var(--mobile-bigcard-frame-grow-bottom)) !important;
    left: calc(var(--preview-frame-bind-outset-x, 34px) * -1 - var(--mobile-bigcard-frame-grow-left)) !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    transform-origin: center center !important;
    z-index: 12140 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
}

/* V1.28Beta-mobile-bigcard-desktop-frame-sync1:
   Mobile big card follows the same frame/crop contract as desktop: portrait crop
   stays fixed, the art frame is the top layer, and only the frame expands toward
   the upper-left with a small right-side cover so portrait edges do not leak. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#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#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --mobile-bigcard-frame-sync-left: clamp(8px, 2.25dvw, 13px) !important;
    --mobile-bigcard-frame-sync-top: clamp(9px, 2.55dvw, 15px) !important;
    --mobile-bigcard-frame-sync-right: clamp(4px, 1.15dvw, 7px) !important;
    --mobile-bigcard-frame-sync-bottom: clamp(3px, .9dvw, 6px) !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#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#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    > .preview-card-outer-frame.preview-card-outer-frame,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#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#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
    top: calc(var(--preview-frame-bind-outset-y, 52px) * -1 - var(--mobile-bigcard-frame-sync-top)) !important;
    left: calc(var(--preview-frame-bind-outset-x, 34px) * -1 - var(--mobile-bigcard-frame-sync-left)) !important;
    right: calc(var(--preview-frame-bind-outset-x, 34px) * -1 - var(--mobile-bigcard-frame-sync-right)) !important;
    bottom: calc(var(--preview-frame-bind-outset-y, 52px) * -1 - var(--mobile-bigcard-frame-sync-bottom)) !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    transform-origin: center center !important;
    z-index: 2147479000 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
}