/* V1.28Beta-preview-mode-visible2: opened character cards must show and allow tapping special modes. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-copy.preview-copy {
  overflow: visible !important;
  z-index: 80 !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-skill.preview-skill {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(4px, 0.7vh, 7px) !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 82 !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill#previewModeSkill#previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  align-self: flex-start !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  order: 0 !important;
  transform: none !important;
  margin: 0 0 clamp(1px, 0.28vh, 3px) 0 !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: min(72vw, 292px) !important;
  min-height: clamp(24px, 3.4vh, 31px) !important;
  padding: 0 clamp(24px, 5.8vw, 36px) 0 clamp(13px, 3.2vw, 18px) !important;
  z-index: 84 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill#previewModeSkill#previewModeSkill.preview-mode-skill-tip:not([hidden]) > .skill-inline-text.skill-inline-text {
  display: inline-block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !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.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewSkill#previewSkill#previewSkill.preview-skill-tip {
  order: 1 !important;
  align-self: flex-start !important;
  margin: 0 !important;
}

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

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) {
    --preview-copy-drop: clamp(4px, 1.1vh, 12px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-copy.preview-copy {
    bottom: clamp(0px, 1.2vh, 10px) !important;
    transform: translateY(var(--preview-copy-drop)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewDescription#previewDescription {
    min-height: clamp(42px, 6.2vh, 58px) !important;
    max-height: clamp(46px, 7vh, 64px) !important;
  }
}

/* V1.28Beta-bigcard-skill-boxless1: big cards no longer wrap skill name and description in one white panel. */
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]) .preview-copy.preview-copy,
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]) .preview-skill.preview-skill {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !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]) #previewDescription#previewDescription {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: rgba(244, 250, 255, 0.96) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.86), 0 0 8px rgba(58, 186, 255, 0.2) !important;
}

/* V1.28Beta-frame-top-layer2: preview frame is a top-level overlay, not clipped by portrait art. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) {
  overflow: visible !important;
  isolation: isolate !important;
}

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

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

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

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

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

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

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

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

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

/* Specificity lock: older portrait CSS hides direct preview frames. This must win. */
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#characterPreview.character-preview.character-preview:not([hidden]) > .preview-card-outer-frame.preview-card-outer-frame {
  position: absolute !important;
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  z-index: 10000 !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-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#characterPreview.character-preview.character-preview[data-select-faction="luminary"] > .preview-card-outer-frame.preview-card-outer-frame,
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#characterPreview.character-preview.character-preview:not([data-select-faction]) > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#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="neutral"] > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#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 {
  background-image: url("assets/ui/character-card-frame-villain-complete-v1.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#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-character="Desire"] > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.28Beta-frame-complete-uncut1") !important;
}

/* V1.28Beta-preview-mode-visible3: opened cards live inside the transformed select layout.
   Center against that containing block, not the viewport units that double-count the layout offset. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) .character-select-layout.character-select-layout #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) .character-select-layout.character-select-layout #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]):hover,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) .character-select-layout.character-select-layout #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]):focus-within {
  transform: translate(-50%, -50%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) .character-select-layout.character-select-layout #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy {
  left: 8% !important;
  right: 5.8% !important;
  width: auto !important;
  max-width: none !important;
}

/* V1.28Beta-preview-mode-visible4: desktop selection grid shows exactly two complete rows.
   The scroll window is two card rows tall; card height shrinks only when the viewport cannot fit that. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(14px, 1.45dvh, 18px) !important;
    --select-card-outer-h: clamp(286px, min(calc(35dvh * 1.32), calc((100dvh - clamp(214px, 22dvh, 258px)) / 2)), 380px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 1070 / 1672) !important;
    --select-card-w: calc(var(--select-card-outer-w) * 914 / 1070) !important;
    --select-card-h: calc(var(--select-card-outer-h) * 1335 / 1672) !important;
    --select-frame-outset-x: calc((var(--select-card-outer-w) - var(--select-card-w)) / 2) !important;
    --select-frame-outset-y: calc((var(--select-card-outer-h) - var(--select-card-h)) / 2) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    height: min(calc(100dvh - 12px), calc(var(--character-scroll-two-rows) + clamp(92px, 9.6dvh, 118px))) !important;
    max-height: calc(100dvh - 12px) !important;
    padding-top: clamp(34px, 4.2dvh, 52px) !important;
    padding-bottom: clamp(10px, 1.5dvh, 18px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll.character-scroll {
    height: var(--character-scroll-two-rows) !important;
    min-height: var(--character-scroll-two-rows) !important;
    max-height: var(--character-scroll-two-rows) !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options.character-options {
    grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    gap: var(--select-gap) !important;
    align-content: start !important;
    padding: 0 !important;
  }
}

/* V1.28Beta-preview-mode-visible5: zoom thumbnail portraits without changing frame/card geometry. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option:not(.placeholder) .mini-art.mini-art {
  transform: scale(1.08) !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

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

/* V1.28Beta-preview-mode-visible6: character names/titles must stay visible and untruncated.
   Portrait zoom can never cover names; preview names use content width instead of a narrow ellipsis box. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
  position: absolute !important;
  left: 39% !important;
  right: 8.2% !important;
  top: 49% !important;
  bottom: auto !important;
  z-index: 920 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  pointer-events: none !important;
  text-align: center !important;
  transform: translateY(-50%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong {
  width: max-content !important;
  max-width: calc(var(--select-card-w, 180px) * 0.62) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription {
  right: 6.2% !important;
  left: auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: min(68%, 280px) !important;
  overflow: visible !important;
  text-align: right !important;
  z-index: 180 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription strong {
  width: max-content !important;
  max-width: min(68vw, 280px) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription strong {
  font-size: clamp(30px, 4.3vh, 42px) !important;
  line-height: 1.02 !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
    left: 37.5% !important;
    right: 7.8% !important;
    top: 49% !important;
  }
}

/* V1.28Beta-preview-mode-visible7: compact the select status bar and reserve a real tab gap.
   The status line is portaled to body, so this lock covers both the original node and the portal. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line.status-line,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal.character-select-status-portal,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"] {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: max(4px, env(safe-area-inset-top)) !important;
  width: min(660px, calc(100dvw - 64px)) !important;
  min-width: 0 !important;
  height: clamp(38px, 4.45dvh, 44px) !important;
  min-height: clamp(38px, 4.45dvh, 44px) !important;
  max-height: clamp(38px, 4.45dvh, 44px) !important;
  padding: 3px clamp(10px, 1.1dvw, 14px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  grid-template-columns: minmax(86px, 0.72fr) minmax(180px, 1.18fr) auto !important;
  gap: clamp(7px, 0.9dvw, 11px) !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
  border-radius: clamp(12px, 1.7dvh, 17px) !important;
  z-index: 2147483000 !important;
  box-sizing: border-box !important;
}

html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal.character-select-status-portal::before,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal.character-select-status-portal::after,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"]::before,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"]::after {
  width: 24px !important;
}

html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) > .status-line #selectRoomText,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal #selectRoomText,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"] #selectRoomText {
  font-size: clamp(10px, 0.74dvw, 12px) !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) > .status-line #selectStatusText,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal #selectStatusText,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"] #selectStatusText {
  font-size: clamp(14px, 1.08dvw, 17px) !important;
  line-height: 1.02 !important;
}

html body:not(.maintenance-mode) #characterSelect.character-select:not([hidden]) > .status-line #leaveCharacterSelect,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal #leaveCharacterSelect,
html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect {
  min-width: clamp(84px, 6.2dvw, 104px) !important;
  height: clamp(28px, 3.15dvh, 32px) !important;
  min-height: clamp(28px, 3.15dvh, 32px) !important;
  max-height: clamp(28px, 3.15dvh, 32px) !important;
  padding: 0 clamp(10px, 1dvw, 14px) !important;
  font-size: clamp(11px, 0.82dvw, 13px) !important;
  line-height: 1 !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs.character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterFactionTabs#characterFactionTabs.character-faction-tabs {
    top: clamp(44px, 5.2dvh, 50px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    height: min(calc(100dvh - 12px), calc(var(--character-scroll-two-rows) + clamp(126px, 13.2dvh, 154px))) !important;
    max-height: calc(100dvh - 12px) !important;
    padding-top: clamp(86px, 10.4dvh, 104px) !important;
    padding-bottom: clamp(8px, 1.4dvh, 16px) !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal.character-select-status-portal,
  html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"] {
    top: max(5px, env(safe-area-inset-top)) !important;
    width: min(398px, calc(100dvw - 18px)) !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 4px 8px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    border-radius: 15px !important;
  }

  html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal #selectRoomText,
  html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"] #selectRoomText {
    display: none !important;
  }

  html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal #selectStatusText,
  html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"] #selectStatusText {
    font-size: clamp(12px, 3.2dvw, 15px) !important;
  }

  html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line.character-select-status-portal #leaveCharacterSelect,
  html body:not(.maintenance-mode):has(#appRoot.app.character-select-app #characterSelect.character-select:not([hidden])) > .status-line[data-character-select-portal="true"] #leaveCharacterSelect {
    min-width: 76px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs.character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterFactionTabs#characterFactionTabs.character-faction-tabs {
    top: clamp(48px, 7.2dvh, 58px) !important;
  }
}

/* V1.28Beta-select-frame-bind-rule2:
   Rule: never stretch the portrait crop box to the decorative frame box.
   The portrait/card box stays fixed; only the top art frame may bleed outward to wrap it. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option {
  overflow: visible !important;
  isolation: isolate !important;
  --select-frame-art-bleed-x: clamp(6px, calc(var(--select-frame-outset-x, 16px) * 0.34), 9px) !important;
  --select-frame-art-bleed-y: clamp(4px, calc(var(--select-frame-outset-y, 24px) * 0.16), 6px) !important;
  --select-frame-art-scale: 1.022 !important;
  --select-frame-art-shift-x: clamp(-4px, calc(var(--select-card-outer-w, 180px) * -0.01), -2px) !important;
  --select-frame-art-shift-y: clamp(-7px, calc(var(--select-card-outer-h, 280px) * -0.018), -4px) !important;
}

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

/* V1.28Beta-preview-frame-bind-rule2: opened cards follow the same rule:
   frame expands as art only; preview portrait, name, and skill layout do not move. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --preview-frame-art-scale: 1.026 !important;
  --preview-frame-art-shift-x: clamp(-7px, -0.36dvw, -3px) !important;
  --preview-frame-art-shift-y: clamp(-13px, -0.78dvh, -7px) !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#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.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) > .preview-card-outer-frame.preview-card-outer-frame {
  transform: translate(var(--preview-frame-art-shift-x), var(--preview-frame-art-shift-y)) scale(var(--preview-frame-art-scale)) !important;
  transform-origin: center center !important;
}

/* V1.28Beta-special-skill-stack-rule1:
   Thumbnail rule: normal skill badges always share the standard card position.
   Special-mode badges sit directly above, left-aligned, and use compact text-only padding. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em {
  position: absolute !important;
  left: 10.6% !important;
  right: 10.6% !important;
  top: auto !important;
  bottom: 15.2% !important;
  z-index: 930 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: clamp(3px, calc(var(--select-card-outer-h, 280px) * 0.014), 5px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  order: 2 !important;
  align-self: flex-start !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: clamp(82px, calc(var(--select-card-w, 180px) * 0.72), 132px) !important;
  margin: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Rhasta"] > span > em > b.mode-tip.mode-tip.mode-tip.mode-only-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Lollipopz"] > span > em > b.mode-tip.mode-tip.mode-tip.mode-only-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.has-special-mode[data-character="Xiaoyang"] > span > em > b.mode-tip.mode-tip.mode-tip.mode-only-text {
  order: 1 !important;
  align-self: flex-start !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: clamp(8px, calc(var(--select-card-outer-w, 180px) * 0.052), 11px) !important;
  padding-right: clamp(10px, calc(var(--select-card-outer-w, 180px) * 0.064), 14px) !important;
  text-align: center !important;
}

/* V1.28Beta-select-thumb-name-right1: thumbnail titles/names sit on the right side and align right. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
  left: auto !important;
  right: 7.4% !important;
  width: calc(var(--select-card-w, 180px) * 0.62) !important;
  min-width: 0 !important;
  max-width: calc(100% - 14.8%) !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong {
  align-self: flex-end !important;
  text-align: right !important;
  max-width: 100% !important;
}

/* V1.28Beta-lock-layer1: lock/selected labels are controls, so they sit above decorative art frames. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.taken::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.unselectable::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option:disabled:not(.placeholder)::after {
  z-index: 12050 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.previewed::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.selected::after {
  z-index: 12040 !important;
  pointer-events: none !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #lockCharacter#lockCharacter {
  position: relative !important;
  z-index: 12120 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
    right: 7.8% !important;
    width: calc(var(--select-card-w, 150px) * 0.64) !important;
    max-width: calc(100% - 15.6%) !important;
  }
}

/* V1.28Beta-big-card-ui1:
   Big-card interface = clicked/enlarged character card. Faction tabs belong only to small cards. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) .character-faction-tabs.character-faction-tabs,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterFactionTabs#characterFactionTabs.character-faction-tabs {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  z-index: 12200 !important;
  --preview-frame-art-scale: 1.034 !important;
  --preview-frame-art-shift-x: clamp(1px, 0.14dvw, 4px) !important;
  --preview-frame-art-shift-y: clamp(-14px, -0.82dvh, -8px) !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy {
  left: 6.1% !important;
  right: 6.1% !important;
  width: auto !important;
  max-width: none !important;
  display: grid !important;
  justify-items: stretch !important;
  align-items: end !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill > #previewDescription#previewDescription {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #lockCharacter#lockCharacter {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  justify-self: center !important;
  align-self: center !important;
  width: clamp(132px, 31%, 172px) !important;
  min-width: 132px !important;
  max-width: 172px !important;
  min-height: clamp(26px, 3.1vh, 34px) !important;
  margin: clamp(4px, 0.7vh, 7px) auto 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  text-align: center !important;
}

/* V1.28Beta-lollipopz-small-card-crop1: small-card Lollipopz crop matches the supplied three-quarter portrait reference. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] .mini-art.mini-art {
  --art-size: auto 116% !important;
  --art-position: center 54% !important;
  background-size: auto 116%, cover !important;
  background-position: center 54%, center center !important;
  transform: scale(1.1) !important;
  transform-origin: center center !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] .mini-art.mini-art,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Lollipopz"] .mini-art.mini-art {
    --art-size: auto 118% !important;
    --art-position: center 56% !important;
    background-size: auto 118%, cover !important;
    background-position: center 56%, center center !important;
    transform: scale(1.1) !important;
  }
}

/* V1.28Beta-select-head-safe-name-scale1:
   Small card = thumbnail. Big card = clicked/enlarged card.
   Portrait art keeps a small top safety margin so the outer frame decoration does not cover heads. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option:not(.placeholder) .mini-art.mini-art {
  transform: translateY(1.6%) scale(1.08) !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small {
  font-size: clamp(8.5px, calc(var(--select-card-outer-w, 180px) * 0.054), 11px) !important;
  line-height: 1.02 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong {
  margin-top: 1px !important;
  font-size: clamp(19px, calc(var(--select-card-outer-w, 180px) * 0.124), 27px) !important;
  line-height: 0.98 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Jisoo"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewArt#previewArt.preview-art[data-character="Jisoo"] {
  --art-size: auto 124% !important;
  --art-position: center calc(-4% + 18px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

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

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewArt#previewArt.preview-art[data-character="Lollipopz"] {
  --art-size: auto 126% !important;
  --art-position: center calc(100% + 16px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription {
  top: 50% !important;
  right: 6.2% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: clamp(2px, 0.45vh, 5px) !important;
  text-align: right !important;
  transform: translateY(-50%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription small {
  font-size: clamp(11px, 1.28vh, 14px) !important;
  line-height: 1.02 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription strong {
  margin-top: 0 !important;
  font-size: clamp(34px, 4.85vh, 50px) !important;
  line-height: 0.96 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

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

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

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small {
    font-size: clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.054), 10.5px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong {
    font-size: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.128), 25px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewArt#previewArt.preview-art[data-character="Lollipopz"] {
    --art-position: center calc(100% + 12px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription strong,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-inscription.preview-inscription.card-inscription strong {
    font-size: clamp(30px, 4.35vh, 42px) !important;
  }
}

/* V1.28Beta-bigcard-head-safe-specificity1: outrank older portrait-standard big-card crops. */
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="Jisoo"] {
  --art-size: auto 124% !important;
  --art-position: center calc(-4% + 18px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#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 126% !important;
  --art-position: center calc(100% + 16px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

@media (max-width: 899px) {
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-position: center calc(100% + 12px) !important;
}
}

/* V1.28Beta-arong-thumb-no-top-gap1: small card Arong art must fill the top edge. */
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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Jisoo"] .mini-art.mini-art.mini-art[data-character="Jisoo"],
html body:not(.maintenance-mode) #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="Jisoo"] .mini-art.mini-art.mini-art[data-character="Jisoo"] {
  --art-size: auto 132% !important;
  --art-position: center 4% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(0) scale(1.1) !important;
  transform-origin: center top !important;
}

@media (max-width: 899px) {
  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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Jisoo"] .mini-art.mini-art.mini-art[data-character="Jisoo"],
  html body:not(.maintenance-mode) #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="Jisoo"] .mini-art.mini-art.mini-art[data-character="Jisoo"] {
    --art-size: auto 132% !important;
    --art-position: center 4% !important;
    transform: translateY(0) scale(1.1) !important;
  }
}

/* V1.28Beta-neck-leftdown1: fixed small-card head/neck anchor for characters whose source portraits drift right/up. */
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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Qizong"] .mini-art.mini-art.mini-art[data-character="Qizong"],
html body:not(.maintenance-mode) #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="Qizong"] .mini-art.mini-art.mini-art[data-character="Qizong"] {
  --art-size: auto 148% !important;
  --art-position: 57% 8% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translate(-1.8%, 2.2%) scale(1.08) !important;
  transform-origin: center center !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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Guming"] .mini-art.mini-art.mini-art[data-character="Guming"],
html body:not(.maintenance-mode) #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="Guming"] .mini-art.mini-art.mini-art[data-character="Guming"] {
  --art-size: auto 120% !important;
  --art-position: 56% 10% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translate(-2.2%, 2.6%) scale(1.08) !important;
  transform-origin: center center !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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Jiego"] .mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode) #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="Jiego"] .mini-art.mini-art.mini-art[data-character="Jiego"] {
  --art-size: auto 110% !important;
  --art-position: 56% -4% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translate(-2.4%, 2.8%) scale(1.08) !important;
  transform-origin: center center !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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Kongdu"] .mini-art.mini-art.mini-art[data-character="Kongdu"],
html body:not(.maintenance-mode) #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="Kongdu"] .mini-art.mini-art.mini-art[data-character="Kongdu"] {
  --art-size: auto 114% !important;
  --art-position: 56% 5% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translate(-2.2%, 2.6%) scale(1.08) !important;
  transform-origin: center center !important;
}

@media (max-width: 899px) {
  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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Qizong"] .mini-art.mini-art.mini-art[data-character="Qizong"],
  html body:not(.maintenance-mode) #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="Qizong"] .mini-art.mini-art.mini-art[data-character="Qizong"],
  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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Guming"] .mini-art.mini-art.mini-art[data-character="Guming"],
  html body:not(.maintenance-mode) #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="Guming"] .mini-art.mini-art.mini-art[data-character="Guming"],
  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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Jiego"] .mini-art.mini-art.mini-art[data-character="Jiego"],
  html body:not(.maintenance-mode) #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="Jiego"] .mini-art.mini-art.mini-art[data-character="Jiego"],
  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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Kongdu"] .mini-art.mini-art.mini-art[data-character="Kongdu"],
  html body:not(.maintenance-mode) #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="Kongdu"] .mini-art.mini-art.mini-art[data-character="Kongdu"] {
    transform: translate(-2%, 2.4%) scale(1.08) !important;
  }
}

/* V1.28Beta-thumbnail-crops2: final mobile select thumbnail anchors for the lower redraw rows. */
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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Jiego"] .mini-art.mini-art.mini-art[data-character="Jiego"],
html body:not(.maintenance-mode) #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="Jiego"] .mini-art.mini-art.mini-art[data-character="Jiego"] {
  --art-size: auto 114% !important;
  --art-position: center 50% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(0) scale(1.03) !important;
  transform-origin: center center !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:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Kongdu"] .mini-art.mini-art.mini-art[data-character="Kongdu"],
html body:not(.maintenance-mode) #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="Kongdu"] .mini-art.mini-art.mini-art[data-character="Kongdu"] {
  --art-size: auto 114% !important;
  --art-position: center calc(50% + 34px) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  transform: translateY(0) scale(1.03) !important;
  transform-origin: center center !important;
}