/* V1.28Beta-mobile-thumb-frame-safe1
   Mobile character-select thumbnails only:
   portrait crops are allowed, but the portrait layer must stay inside the
   decorative frame opening. Large cards/codex/1v1 portraits are not affected. */
@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#characterSelect.character-select:not([hidden])
    .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.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: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;
    isolation: isolate !important;
    overflow: visible !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#characterSelect.character-select:not([hidden])
    .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.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:not(.placeholder) > span {
    overflow: hidden !important;
    contain: paint !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#characterSelect.character-select:not([hidden])
    .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.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: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;
    overflow: hidden !important;
    z-index: 1 !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#characterSelect.character-select:not([hidden])
    .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.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: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.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[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.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[data-character="Xiaocai"]
    .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-info-restore1:
   Mobile small cards: the portrait is clipped by .mini-art, not by the whole card
   content layer. This keeps title/name/skill badges visible while the art frame
   remains the fixed outer overlay. */
@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) > 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: visible !important;
    contain: none !important;
    clip-path: none !important;
    isolation: isolate !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 {
    z-index: 1 !important;
    overflow: hidden !important;
    clip-path:
      inset(
        var(--mobile-thumb-art-clip-top, 6px)
        var(--mobile-thumb-art-clip-x, 4px)
        var(--mobile-thumb-art-clip-bottom, 6px)
        var(--mobile-thumb-art-clip-x, 4px)
        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: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: 13000 !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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription,
  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 > .card-inscription.card-inscription {
    position: absolute !important;
    left: auto !important;
    right: 8.6% !important;
    top: 52% !important;
    bottom: auto !important;
    z-index: 13060 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: min(60%, 112px) !important;
    max-width: calc(100% - 17.2%) !important;
    height: auto !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) !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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > .card-inscription.card-inscription small,
  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 > .card-inscription.card-inscription strong {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    text-align: right !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .88), 0 0 8px rgba(30, 75, 120, .42) !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 > .card-inscription.card-inscription small {
    font-size: clamp(8px, calc(var(--select-card-outer-w, 170px) * .055), 11px) !important;
    line-height: 1.05 !important;
    font-weight: 850 !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 > .card-inscription.card-inscription strong {
    font-size: clamp(17px, calc(var(--select-card-outer-w, 170px) * .118), 23px) !important;
    line-height: 1 !important;
    font-weight: 950 !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]) {
    position: absolute !important;
    left: 8.4% !important;
    right: 8.4% !important;
    top: auto !important;
    bottom: 19.2% !important;
    z-index: 13055 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: var(--select-skill-h, 24px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) > span > em:not([hidden]) > b.skill-tip.skill-tip.skill-tip,
  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 > em:not([hidden]) > b.skill-tip.skill-tip.skill-tip {
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 13056 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: clamp(102px, calc(var(--select-card-w, 140px) * .75), 128px) !important;
    max-width: min(100%, 146px) !important;
    height: var(--select-skill-h, 24px) !important;
    min-height: var(--select-skill-h, 24px) !important;
    max-height: var(--select-skill-h, 24px) !important;
    margin: 0 !important;
    padding: 0 clamp(8px, calc(var(--select-card-w, 140px) * .06), 11px) 1px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
    font-size: clamp(10px, calc(var(--select-card-outer-w, 170px) * .064), 12px) !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:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option.has-special-mode:not(.placeholder) > span > em:not([hidden]) > b.mode-tip.mode-tip.mode-only-text {
    min-width: clamp(94px, calc(var(--select-card-w, 140px) * .68), 122px) !important;
    padding-left: clamp(8px, calc(var(--select-card-w, 140px) * .052), 10px) !important;
    padding-right: clamp(8px, calc(var(--select-card-w, 140px) * .052), 10px) !important;
  }
}

/* V1.28Beta-mobile-thumb-art-raise1:
   Mobile small-card standard: every portrait is raised into the decorative frame
   opening. The art moves; the frame and information overlays keep their positions. */
@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-raise-final: clamp(20px, 6.2dvw, 34px) !important;
    --mobile-thumb-art-clip-top: clamp(1px, .45dvw, 3px) !important;
    --mobile-thumb-art-clip-bottom: clamp(8px, 2.4dvw, 12px) !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 calc(var(--mobile-thumb-art-raise-final) * -1) !important;
    transform-origin: center center !important;
    z-index: 1 !important;
    clip-path:
      inset(
        var(--mobile-thumb-art-clip-top)
        var(--mobile-thumb-art-clip-x, 4px)
        var(--mobile-thumb-art-clip-bottom)
        var(--mobile-thumb-art-clip-x, 4px)
        round 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[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 calc((var(--mobile-thumb-art-raise-final) - clamp(2px, .6dvw, 4px)) * -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):not(.no-skill) > span > em:not([hidden]),
  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):not(.no-skill) > span > em:not([hidden]) {
    bottom: 20.4% !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 > em:not([hidden]) > b.skill-tip.skill-tip.skill-tip,
  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 > em:not([hidden]) > b.skill-tip.skill-tip.skill-tip {
    min-width: clamp(104px, calc(var(--select-card-w, 140px) * .78), 132px) !important;
    max-width: min(100%, 150px) !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.has-special-mode:not(.placeholder) > span > em:not([hidden]) > b.mode-tip.mode-tip.mode-only-text,
  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.has-special-mode:not(.placeholder) > span > em:not([hidden]) > b.mode-tip.mode-tip.mode-only-text {
    min-width: clamp(94px, calc(var(--select-card-w, 140px) * .7), 124px) !important;
  }
}

/* V1.28Beta-mobile-thumb-crop-frame2:
   Mobile small-card rule: the portrait crop box is the inner rectangle of the
   decorative frame. Do not translate the crop box itself; tune only the art crop
   inside it so the frame, portrait, name, and skill badges stay bound together. */
@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: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)
    #appRoot#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#characterSelect.character-select:not([hidden])
    .character-option.character-option.character-option.character-option.character-option.character-option.character-option.character-option:not(.placeholder) {
    padding: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
    --mobile-thumb-art-clip-top: 0px !important;
    --mobile-thumb-art-clip-x: 0px !important;
    --mobile-thumb-art-clip-bottom: 0px !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:not([hidden])
    .character-option.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#appRoot.app
    #characterSelect#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.character-option:not(.placeholder) > span {
    position: absolute !important;
    left: var(--select-frame-outset-x) !important;
    top: var(--select-frame-outset-y) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--select-card-w) !important;
    min-width: var(--select-card-w) !important;
    max-width: var(--select-card-w) !important;
    height: var(--select-card-h) !important;
    min-height: var(--select-card-h) !important;
    max-height: var(--select-card-h) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
    border-radius: clamp(7px, 2dvw, 12px) !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:not([hidden])
    .character-option.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#appRoot.app
    #characterSelect#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.character-option:not(.placeholder) .mini-art.mini-art.mini-art.mini-art.mini-art {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    translate: 0 0 !important;
    /* V1.28Beta-mobile-thumb-crop-frame3: crop box stays locked to the frame opening. */
    transform: none !important;
    transform-origin: center center !important;
    clip-path: inset(0 0 0 0 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#appRoot.app.character-select-app
    #characterSelect#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.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#appRoot.app
    #characterSelect#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.character-option[data-character="Xiaocai"] .mini-art.mini-art.mini-art.mini-art.mini-art {
    translate: 0 0 !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: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)
    #appRoot#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#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 {
    z-index: 13000 !important;
    pointer-events: none !important;
  }
}

/* V1.28Beta-mobile-thumb-desktop-sync1:
   Mobile thumbnails use the same scaled-frame math as desktop: the portrait crop
   rectangle is centered from outer-frame minus inner-portrait dimensions. */
@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:not([hidden])
    .character-option.character-option.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#appRoot#appRoot.app
    #characterSelect#characterSelect#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.character-option.character-option:not(.placeholder) > span {
    left: calc((var(--select-card-outer-w) - var(--select-card-w)) / 2) !important;
    top: calc((var(--select-card-outer-h) - var(--select-card-h)) / 2) !important;
    width: var(--select-card-w) !important;
    height: var(--select-card-h) !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:not([hidden])
    .character-option.character-option.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#appRoot#appRoot.app
    #characterSelect#characterSelect#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.character-option.character-option:not(.placeholder) .mini-art.mini-art.mini-art.mini-art.mini-art {
    inset: 0 !important;
    translate: 0 0 !important;
    transform: none !important;
    clip-path: inset(0 0 0 0 round 7px) !important;
  }
}

/* V1.28Beta-mobile-thumb-frame-upperleft-sync1:
   Mobile small cards now keep the same crop rectangle math as desktop. Only the
   decorative frame is pulled and expanded slightly toward the upper-left so it
   sits on top of, and wraps, the portrait edges instead of exposing them. */
@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:not([hidden])
    .character-option.character-option.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#appRoot#appRoot.app
    #characterSelect#characterSelect#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.character-option.character-option:not(.placeholder) {
    --mobile-thumb-frame-shift-x: clamp(4px, 1.15dvw, 7px) !important;
    --mobile-thumb-frame-shift-y: clamp(5px, 1.35dvw, 8px) !important;
    --mobile-thumb-frame-cover-right: clamp(2px, .55dvw, 4px) !important;
    --mobile-thumb-frame-cover-bottom: clamp(2px, .65dvw, 5px) !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:not([hidden])
    .character-option.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)
    #appRoot#appRoot#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#characterSelect#characterSelect.character-select:not([hidden])
    .character-option.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 {
    top: calc(var(--select-frame-art-bleed-y, 6px) * -1 - var(--mobile-thumb-frame-shift-y)) !important;
    left: calc(var(--select-frame-art-bleed-x, 8px) * -1 - var(--mobile-thumb-frame-shift-x)) !important;
    right: calc(var(--select-frame-art-bleed-x, 8px) * -1 - var(--mobile-thumb-frame-cover-right)) !important;
    bottom: calc(var(--select-frame-art-bleed-y, 6px) * -1 - var(--mobile-thumb-frame-cover-bottom)) !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    transform-origin: center center !important;
    z-index: 13000 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
}