/* V1.28Beta-mobile-thumb-art-align5
   Mobile character-select cards: keep portrait art clipped inside the frame, lift the
   portrait layer, and neutralize asymmetric frame offsets from older patches. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder),
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder) {
    isolation: isolate !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder) > span,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder) > span {
    position: relative !important;
    overflow: hidden !important;
    clip-path: inset(0 round 7px) !important;
    isolation: isolate !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder)
    .mini-art.mini-art.mini-art,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder)
    .mini-art.mini-art.mini-art {
    --mobile-thumb-art-up: clamp(14px, 4.4dvw, 24px);
    translate: 0 calc(var(--mobile-thumb-art-up) * -1) !important;
    transform-origin: center center !important;
    will-change: transform, translate !important;
    z-index: 1 !important;
    overflow: hidden !important;
    clip-path: inset(0 round 7px 7px 5px 5px) !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder) > .card-outer-frame.card-outer-frame,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option:not(.placeholder) > .card-outer-frame.card-outer-frame {
    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;
    width: auto !important;
    height: auto !important;
    z-index: 70 !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    transform: none !important;
    transform-origin: center center !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]),
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) {
    --bigcard-frame-side-grow: 0px !important;
    --bigcard-frame-left-grow: 0px !important;
    --bigcard-frame-right-grow: 0px !important;
    --bigcard-frame-top-grow: 0px !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
    #previewArt#previewArt.preview-art,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
    #previewArt#previewArt.preview-art {
    overflow: hidden !important;
    clip-path: inset(0 round 8px) !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
    > .preview-card-outer-frame.preview-card-outer-frame,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
    > .preview-card-outer-frame.preview-card-outer-frame {
    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;
    z-index: 180 !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    transform: none !important;
    transform-origin: center center !important;
    pointer-events: none !important;
  }
}

/* V1.28Beta-mobile-thumb-art-align5-final-lock
   Final mobile thumbnail lock: portraits move slightly down, remain clipped inside
   the transparent art opening, and the decorative frame stays above the painting. */
@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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder),
  html body:not(.maintenance-mode)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) {
    --mobile-thumb-art-down: clamp(3px, 1.25dvw, 7px) !important;
    --mobile-thumb-art-clip-x: clamp(3px, 1.05dvw, 5px) !important;
    --mobile-thumb-art-clip-top: clamp(5px, 1.55dvw, 8px) !important;
    --mobile-thumb-art-clip-bottom: clamp(4px, 1.25dvw, 7px) !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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span {
    overflow: hidden !important;
    contain: paint !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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder)
    .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#appRoot#appRoot#appRoot#appRoot.app
    #characterSelect#characterSelect#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:not(.placeholder)
    .mini-art.mini-art.mini-art.mini-art.mini-art {
    translate: 0 var(--mobile-thumb-art-down) !important;
    clip-path:
      inset(
        var(--mobile-thumb-art-clip-top)
        var(--mobile-thumb-art-clip-x)
        var(--mobile-thumb-art-clip-bottom)
        var(--mobile-thumb-art-clip-x)
        round 7px
      ) !important;
    overflow: hidden !important;
    z-index: 1 !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:not([hidden])
    .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.card-outer-frame,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select:not([hidden])
    .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.card-outer-frame {
    z-index: 12000 !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:not([hidden])
    .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,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select:not([hidden])
    .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 {
    translate: 0 clamp(5px, 1.65dvw, 9px) !important;
    transform: scale(1.13) !important;
  }
}

/* V1.28Beta-mobile-thumb-art-align5-frame-safe
   Mobile thumbnails are the only user-directed crop surface. The portrait may be
   shifted per-card, but its painted rectangle must stay inside the decorative frame. */
@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:not(.placeholder),
  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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) {
    --mobile-thumb-art-down: clamp(3px, 1.25dvw, 7px) !important;
    --mobile-thumb-art-clip-x: clamp(3px, 1.05dvw, 5px) !important;
    --mobile-thumb-art-clip-top: clamp(5px, 1.55dvw, 8px) !important;
    --mobile-thumb-art-clip-bottom: clamp(4px, 1.25dvw, 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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span,
  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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span {
    overflow: hidden !important;
    contain: paint !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:not(.placeholder)
    .mini-art.mini-art.mini-art.mini-art,
  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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder)
    .mini-art.mini-art.mini-art.mini-art {
    translate: 0 var(--mobile-thumb-art-down) !important;
    clip-path:
      inset(
        var(--mobile-thumb-art-clip-top)
        var(--mobile-thumb-art-clip-x)
        var(--mobile-thumb-art-clip-bottom)
        var(--mobile-thumb-art-clip-x)
        round 7px
      ) !important;
    z-index: 1 !important;
    overflow: hidden !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:not(.placeholder)
    > .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
    #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:not(.placeholder)
    > .card-outer-frame.card-outer-frame.card-outer-frame {
    z-index: 12000 !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[data-character="Xiaocai"]
    .mini-art.mini-art.mini-art.mini-art,
  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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Xiaocai"]
    .mini-art.mini-art.mini-art.mini-art {
    translate: 0 clamp(5px, 1.65dvw, 9px) !important;
    transform: scale(1.13) !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#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Xiaocai"]
    .mini-art.mini-art.mini-art.mini-art,
  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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option[data-character="Xiaocai"]
    .mini-art.mini-art.mini-art.mini-art {
    --mobile-thumb-art-up: clamp(6px, 1.8dvw, 10px) !important;
    transform: translateY(3.4%) scale(1.13) !important;
    transform-origin: center center !important;
  }
}

/* V1.28Beta-mobile-thumb-art-align3-skill-sync1
   Mobile character-select small-card rule: frame stays fixed on top; portrait and
   skill badges move up together inside it. */
@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:not(.placeholder)
    .mini-art.mini-art.mini-art.mini-art,
  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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder)
    .mini-art.mini-art.mini-art.mini-art {
    --mobile-thumb-sync-up: clamp(14px, 4.4dvw, 24px) !important;
    translate: 0 calc(var(--mobile-thumb-sync-up) * -1) !important;
    transform-origin: center center !important;
    z-index: 1 !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:not(.placeholder):not(.no-skill) > span > em:not([hidden]),
  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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder):not(.no-skill) > span > em:not([hidden]) {
    --mobile-thumb-sync-up: clamp(14px, 4.4dvw, 24px) !important;
    bottom: calc(17% + var(--mobile-thumb-sync-up)) !important;
    top: auto !important;
    transform-origin: left bottom !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#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder),
  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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) {
    --mobile-thumb-frame-x: clamp(4px, 1.25dvw, 5px) !important;
    --mobile-thumb-frame-y: clamp(6px, 1.8dvw, 8px) !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:not(.placeholder) > .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
    #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:not(.placeholder) > .card-outer-frame.card-outer-frame.card-outer-frame {
    top: calc(var(--mobile-thumb-frame-y) * -1) !important;
    right: calc(var(--mobile-thumb-frame-x) * -1) !important;
    bottom: calc(var(--mobile-thumb-frame-y) * -1) !important;
    left: calc(var(--mobile-thumb-frame-x) * -1) !important;
    width: auto !important;
    height: auto !important;
    z-index: 70 !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    transform: none !important;
    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:not([hidden])
    > .preview-card-outer-frame.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.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:not([hidden])
    > .preview-card-outer-frame.preview-card-outer-frame.preview-card-outer-frame {
    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;
    z-index: 180 !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    transform: none !important;
    transform-origin: center center !important;
    pointer-events: none !important;
  }
}