html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #sidePanel,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #sidePanel[hidden],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #sidePanel .battle-status {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #maintenanceCover,
html body:not(.maintenance-mode) #maintenanceCover.maintenance-cover,
#maintenanceCover[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-gap: clamp(14px, 1.35vw, 18px) !important;
  --select-card-outer-h: clamp(282px, 40dvh, 304px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
  width: min(1120px, calc(100vw - 44px)) !important;
  height: min(672px, calc(100dvh - 64px)) !important;
  max-width: calc(100vw - 44px) !important;
  max-height: calc(100dvh - 64px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(6px, 1dvh, 9px) !important;
  padding:
    clamp(10px, 2dvh, 16px)
    clamp(48px, 5vw, 70px)
    clamp(18px, 3dvh, 28px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
  width: min(620px, 100%) !important;
  height: clamp(32px, 4.8dvh, 36px) !important;
  margin: 0 auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
  width: 100% !important;
  height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 10px) !important;
  max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 10px) !important;
  padding: 0 0 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .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;
  padding: 0 0 10px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
  inset: 4.5% 4.4% 5% !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(8px, 1vw, 10px) !important;
    --select-card-outer-h: clamp(262px, 42dvh, 306px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-card-w: var(--select-card-outer-w) !important;
    padding: 44px 4px 4px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    width: min(390px, calc(100vw - 6px)) !important;
    height: min(798px, calc(100dvh - 48px)) !important;
    max-width: calc(100vw - 6px) !important;
    max-height: calc(100dvh - 48px) !important;
    grid-template-rows: 32px minmax(0, auto) !important;
    gap: 0 !important;
    padding: 2px clamp(12px, 4vw, 18px) clamp(18px, 3.2dvh, 24px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs {
    width: min(330px, 100%) !important;
    height: 32px !important;
    margin: 0 auto !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: min(366px, 100%) !important;
    height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 8px) !important;
    max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 8px) !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
  }

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .mini-art.mini-art,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span::after {
    inset: 4.8% 4.8% 5.2% !important;
  }
}

/* V1.27Beta-hotfix-visible4: lock select panel/card frame ratios and layer order. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-panel-h: min(710px, calc((100vw - 28px) * 2 / 3), calc(100dvh - 10px)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    width: calc(var(--select-panel-h) * 3 / 2) !important;
    height: var(--select-panel-h) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 10px) !important;
    aspect-ratio: 3 / 2 !important;
    background-size: 100% 100% !important;
    padding:
      clamp(18px, 3.2dvh, 30px)
      clamp(54px, 6vw, 86px)
      clamp(20px, 3.4dvh, 32px) !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-panel-w: min(390px, calc(100vw - 6px), calc((100dvh - 48px) * 941 / 1672)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    width: var(--select-panel-w) !important;
    height: calc(var(--select-panel-w) * 1672 / 941) !important;
    max-width: calc(100vw - 6px) !important;
    max-height: calc(100dvh - 48px) !important;
    aspect-ratio: 941 / 1672 !important;
    background-size: 100% 100% !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  aspect-ratio: 941 / 1672 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .card-outer-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 60 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-frame-ratio-lock1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 3px 7px rgba(13, 35, 62, 0.16))
    drop-shadow(0 0 7px rgba(94, 183, 255, 0.12)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Desire"] .card-outer-frame {
  background:
    url("assets/ui/character-card-desire-luminary-neutral-frame-v1.png?v=V1.27Beta-frame-ratio-lock1") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(230, 243, 253, 0.94)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(150, 185, 213, 0.18),
    inset 0 0 18px rgba(255, 255, 255, 0.36) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .mini-art.mini-art {
  position: absolute !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 5px !important;
  clip-path: inset(0 round 5px) !important;
  background-position: center var(--portrait-y, 14%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > em {
  z-index: 70 !important;
}

/* V1.27Beta-hotfix-visible5: match the live select DOM even when the section keeps its hidden attribute. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select {
    --select-panel-h: min(710px, calc((100vw - 28px) * 2 / 3), calc(100dvh - 10px)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    width: calc(var(--select-panel-h) * 3 / 2) !important;
    height: var(--select-panel-h) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 10px) !important;
    aspect-ratio: 3 / 2 !important;
    background-size: 100% 100% !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select {
    --select-panel-w: min(390px, calc(100vw - 6px), calc((100dvh - 48px) * 941 / 1672)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    width: var(--select-panel-w) !important;
    height: calc(var(--select-panel-w) * 1672 / 941) !important;
    max-width: calc(100vw - 6px) !important;
    max-height: calc(100dvh - 48px) !important;
    aspect-ratio: 941 / 1672 !important;
    background-size: 100% 100% !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option {
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  aspect-ratio: 941 / 1672 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 60 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-frame-ratio-lock2") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 3px 7px rgba(13, 35, 62, 0.16))
    drop-shadow(0 0 7px rgba(94, 183, 255, 0.12)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
  display: block !important;
  background:
    url("assets/ui/character-card-desire-luminary-neutral-frame-v1.png?v=V1.27Beta-frame-ratio-lock2") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  inset: 4.5% 4.4% 5% !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
    inset: 4.8% 4.8% 5.2% !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
  z-index: 70 !important;
}

/* V1.27Beta-hotfix-visible6: override the older character-select-app Desire/frame specificity exactly. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
  padding: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 60 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  background:
    url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-frame-ratio-lock3") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
  background:
    url("assets/ui/character-card-desire-luminary-neutral-frame-v1.png?v=V1.27Beta-frame-ratio-lock3") center / 100% 100% no-repeat !important;
}

/* V1.27Beta-hotfix-visible7: enlarged, wider cards; the frame, white backing, and portrait scale as one unit. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-card-ratio: 0.64 !important;
    --select-gap: clamp(12px, 1.15vw, 16px) !important;
    --select-card-outer-h: clamp(360px, 54dvh, 400px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * var(--select-card-ratio)) !important;
    --select-matrix-w: calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3) !important;
    --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout {
    width: min(calc(100vw - 12px), calc(var(--select-matrix-w) + clamp(96px, 8vw, 136px))) !important;
    height: min(calc(100dvh - 8px), calc(var(--select-card-outer-h) * 2 + var(--select-gap) + clamp(64px, 9dvh, 92px))) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 8px) !important;
    padding:
      clamp(4px, 1dvh, 8px)
      clamp(42px, 4.8vw, 64px)
      clamp(14px, 2dvh, 22px) !important;
    grid-template-rows: 30px minmax(0, 1fr) !important;
    gap: clamp(2px, 0.6dvh, 6px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    height: 30px !important;
    margin: 0 auto !important;
    transform: translateY(-8px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    width: min(100%, calc(var(--select-matrix-w) + 8px)) !important;
    height: min(calc(var(--select-matrix-h) + 10px), calc(100dvh - 54px)) !important;
    max-height: min(calc(var(--select-matrix-h) + 10px), calc(100dvh - 54px)) !important;
    margin: 0 auto !important;
    padding: 0 4px 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-options,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    width: var(--select-matrix-w) !important;
    max-width: var(--select-matrix-w) !important;
    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;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-card-ratio: 0.64 !important;
    --select-gap: 8px !important;
    --select-card-outer-w: min(184px, calc((100vw - 26px) / 2)) !important;
    --select-card-outer-h: calc(var(--select-card-outer-w) * 1.5625) !important;
    --select-card-w: var(--select-card-outer-w) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    padding-top: 34px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout {
    padding: 0 clamp(8px, 2.2vw, 12px) clamp(14px, 2.4dvh, 20px) !important;
    grid-template-rows: 28px minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    height: 28px !important;
    transform: translateY(-10px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    width: min(100%, calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 8px)) !important;
    height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 8px), calc(100dvh - 86px)) !important;
    max-height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 8px), calc(100dvh - 86px)) !important;
    padding: 0 4px 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-options,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    gap: var(--select-gap) !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option {
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  max-width: var(--select-card-outer-w) !important;
  max-height: var(--select-card-outer-h) !important;
  aspect-ratio: var(--select-card-ratio) / 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  inset: 5.2% 6.8% 5.4% !important;
}

/* V1.27Beta-hotfix-visible8: restore the large white selector frame and bind every card layer to the same measured wide-frame ratio. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-card-ratio: 0.64 !important;
  --select-gap: clamp(10px, 1.05vw, 14px) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button[hidden],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button[hidden] {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  z-index: 80 !important;
  background:
    url("assets/ui/character-card-whitegold-frame-wide-v1.png?v=V1.27Beta-visible8-wide-frame1") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
  background:
    url("assets/ui/character-card-desire-luminary-neutral-frame-wide-v1.png?v=V1.27Beta-visible8-wide-frame1") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  max-width: var(--select-card-outer-w) !important;
  max-height: var(--select-card-outer-h) !important;
  aspect-ratio: var(--select-card-ratio) / 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  inset: 7.2% 6.7% 8.8% !important;
  border-radius: 5px !important;
}

@media (min-width: 900px), (orientation: landscape) and (min-width: 680px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-panel-w: min(calc(100vw - 8px), calc((100dvh - 8px) * 3 / 2), 1380px) !important;
    --select-panel-h: calc(var(--select-panel-w) * 2 / 3) !important;
    --select-panel-pad-x: clamp(40px, 5.4vw, 72px) !important;
    --select-panel-pad-top: clamp(6px, 1.2dvh, 12px) !important;
    --select-panel-pad-bottom: clamp(14px, 2.2dvh, 24px) !important;
    --select-tab-h: clamp(28px, 3.6dvh, 34px) !important;
    --select-card-outer-h: calc((var(--select-panel-h) - var(--select-panel-pad-top) - var(--select-panel-pad-bottom) - var(--select-tab-h) - var(--select-gap) - 8px) / 2) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * var(--select-card-ratio)) !important;
    --select-matrix-w: calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3) !important;
    --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important;
    place-items: start center !important;
    padding: clamp(8px, 1.2dvh, 16px) 0 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-rows: var(--select-tab-h) minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: center !important;
    align-self: start !important;
    justify-self: center !important;
    align-content: start !important;
    width: var(--select-panel-w) !important;
    height: var(--select-panel-h) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: var(--select-panel-w) !important;
    max-height: var(--select-panel-h) !important;
    margin: 0 auto !important;
    padding: var(--select-panel-pad-top) var(--select-panel-pad-x) var(--select-panel-pad-bottom) !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    filter:
      drop-shadow(0 18px 32px rgba(13, 34, 54, 0.22))
      drop-shadow(0 0 18px rgba(92, 178, 255, 0.12)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta-visible8-large-white-frame1") center / 100% 100% no-repeat !important;
    opacity: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
    content: "" !important;
    position: absolute !important;
    inset: 8.8% 6.4% 5.8% !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    border: 1px solid rgba(176, 215, 246, 0.24) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(224, 242, 255, 0.08)) !important;
    box-shadow:
      inset 0 0 28px rgba(255, 255, 255, 0.24),
      inset 0 0 46px rgba(58, 154, 230, 0.1) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: start !important;
    width: min(620px, 100%) !important;
    height: var(--select-tab-h) !important;
    min-height: var(--select-tab-h) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: clamp(8px, 1vw, 12px) !important;
    transform: translateY(-14px) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    flex: 0 1 190px !important;
    height: var(--select-tab-h) !important;
    min-width: min(190px, 100%) !important;
    max-width: 220px !important;
    padding: 0 18px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    position: relative !important;
    z-index: 2 !important;
    width: min(100%, var(--select-matrix-w)) !important;
    height: min(var(--select-matrix-h), calc(var(--select-panel-h) - var(--select-panel-pad-top) - var(--select-panel-pad-bottom) - var(--select-tab-h) - 4px)) !important;
    max-width: var(--select-matrix-w) !important;
    max-height: min(var(--select-matrix-h), calc(var(--select-panel-h) - var(--select-panel-pad-top) - var(--select-panel-pad-bottom) - var(--select-tab-h) - 4px)) !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable both-edges !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-options,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    justify-content: center !important;
    align-content: start !important;
    width: var(--select-matrix-w) !important;
    max-width: var(--select-matrix-w) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
    gap: var(--select-gap) !important;
    overflow: visible !important;
  }
}

@media (max-width: 899px) and (orientation: portrait), (max-width: 679px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-panel-w: min(calc(100vw - 4px), calc((100dvh - 20px) * 941 / 1672), 430px) !important;
    --select-panel-h: calc(var(--select-panel-w) * 1672 / 941) !important;
    --select-gap: clamp(8px, 2.2vw, 10px) !important;
    --select-card-outer-w: calc((var(--select-panel-w) - clamp(32px, 8.5vw, 42px) * 2 - var(--select-gap)) / 2) !important;
    --select-card-outer-h: calc(var(--select-card-outer-w) / var(--select-card-ratio)) !important;
    --select-matrix-w: calc(var(--select-card-outer-w) * 2 + var(--select-gap)) !important;
    --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important;
    place-items: start center !important;
    padding: clamp(6px, 1dvh, 10px) 0 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-rows: 28px minmax(0, 1fr) !important;
    justify-items: center !important;
    align-self: start !important;
    justify-self: center !important;
    align-content: start !important;
    width: var(--select-panel-w) !important;
    height: min(var(--select-panel-h), calc(100dvh - 8px)) !important;
    max-width: var(--select-panel-w) !important;
    max-height: calc(100dvh - 8px) !important;
    margin: 0 auto !important;
    padding: 0 clamp(32px, 8.5vw, 42px) clamp(22px, 3dvh, 30px) !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-visible8-large-white-frame1") center / 100% 100% no-repeat !important;
    opacity: 1 !important;
    filter:
      drop-shadow(0 14px 22px rgba(8, 28, 58, 0.24))
      drop-shadow(0 0 16px rgba(68, 166, 255, 0.18)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
    content: "" !important;
    position: absolute !important;
    inset: 7.4% 8.2% 5.6% !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    border: 1px solid rgba(176, 215, 246, 0.24) !important;
    background:
      linear-gradient(180deg, rgba(247, 252, 255, 0.18), rgba(214, 238, 255, 0.08)) !important;
    box-shadow:
      inset 0 0 22px rgba(255, 255, 255, 0.2),
      inset 0 0 46px rgba(58, 154, 230, 0.1) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: min(286px, 100%) !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 6px !important;
    transform: translateY(-8px) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    flex: 0 1 184px !important;
    height: 28px !important;
    min-width: min(184px, 100%) !important;
    max-width: 210px !important;
    padding: 0 14px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    position: relative !important;
    z-index: 2 !important;
    width: var(--select-matrix-w) !important;
    max-width: var(--select-matrix-w) !important;
    height: min(var(--select-matrix-h), calc(100dvh - 58px)) !important;
    max-height: min(var(--select-matrix-h), calc(100dvh - 58px)) !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable both-edges !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-options,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    justify-content: center !important;
    align-content: start !important;
    width: var(--select-matrix-w) !important;
    max-width: var(--select-matrix-w) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
    gap: var(--select-gap) !important;
    overflow: visible !important;
  }
}

/* V1.27Beta-hotfix-visible12: replace the transparent sticker + rectangular backing with a real shaped card shell. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("assets/ui/character-card-whitegold-shell-wide-v2.png?v=V1.27Beta-visible12-card-shell1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] > span::before {
  background:
    url("assets/ui/character-card-desire-shell-wide-v2.png?v=V1.27Beta-visible12-card-shell1") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
  content: none !important;
  display: none !important;
}

/* V1.27Beta-hotfix-visible13: bevel the portrait window so the art no longer reads as a hard cropped rectangle. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  inset: 8.6% 8.1% 10.2% !important;
  border-radius: 12px !important;
  clip-path: polygon(7% 0, 93% 0, 100% 4.5%, 100% 95.5%, 93% 100%, 7% 100%, 0 95.5%, 0 4.5%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 0 16px rgba(4, 18, 40, 0.22) !important;
}

/* V1.27Beta-hotfix-visible14: reserve safe space so the thumbnail frame's top and bottom ornaments are fully visible. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-frame-bleed-y: clamp(12px, calc(var(--select-card-outer-h) * 0.058), 18px) !important;
  --select-frame-bleed-x: clamp(5px, calc(var(--select-card-outer-w) * 0.035), 8px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  top: calc(var(--select-frame-bleed-y) * -1) !important;
  right: calc(var(--select-frame-bleed-x) * -1) !important;
  bottom: calc(var(--select-frame-bleed-y) * -1) !important;
  left: calc(var(--select-frame-bleed-x) * -1) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  inset: 12.6% 9.6% 13.2% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-options,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
  padding:
    var(--select-frame-bleed-y)
    0
    calc(var(--select-frame-bleed-y) + 8px) !important;
  row-gap: calc(var(--select-gap) + var(--select-frame-bleed-y)) !important;
  column-gap: var(--select-gap) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
  height: min(calc(var(--select-matrix-h) + var(--select-frame-bleed-y) * 3 + 8px), calc(100dvh - 48px)) !important;
  max-height: min(calc(var(--select-matrix-h) + var(--select-frame-bleed-y) * 3 + 8px), calc(100dvh - 48px)) !important;
}

/* V1.27Beta-hotfix-visible15: recenter the selector group and enlarge the cards without pushing the faction bar into the top prompt area. */
@media (min-width: 900px), (orientation: landscape) and (min-width: 680px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-gap: clamp(14px, 1.08vw, 18px) !important;
    --select-panel-w: min(calc(100vw - 10px), calc((100dvh - 10px) * 1502 / 1120), 1460px) !important;
    --select-panel-h: min(calc(var(--select-panel-w) * 1120 / 1502), calc(100dvh - 10px)) !important;
    --select-tab-h: clamp(32px, 4.2dvh, 38px) !important;
    --select-panel-pad-x: clamp(34px, 3.8vw, 56px) !important;
    --select-panel-pad-top: clamp(22px, 3.2dvh, 34px) !important;
    --select-panel-pad-bottom: clamp(12px, 2dvh, 22px) !important;
    --select-card-outer-h: min(
      clamp(322px, 46dvh, 418px),
      calc((var(--select-panel-h) - var(--select-panel-pad-top) - var(--select-panel-pad-bottom) - var(--select-tab-h) - var(--select-gap) - 32px) / 2)
    ) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * var(--select-card-ratio)) !important;
    --select-matrix-w: calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3) !important;
    --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important;
    place-items: center center !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    grid-template-rows: var(--select-tab-h) auto !important;
    align-content: center !important;
    align-items: start !important;
    align-self: center !important;
    justify-items: center !important;
    justify-self: center !important;
    width: var(--select-panel-w) !important;
    height: var(--select-panel-h) !important;
    max-width: calc(100vw - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    padding:
      var(--select-panel-pad-top)
      var(--select-panel-pad-x)
      var(--select-panel-pad-bottom) !important;
    gap: clamp(10px, 1.45dvh, 14px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    align-self: end !important;
    width: min(660px, calc(var(--select-matrix-w) - 24px), 100%) !important;
    height: var(--select-tab-h) !important;
    min-height: var(--select-tab-h) !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    height: var(--select-tab-h) !important;
    min-width: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before {
    background:
      url("assets/ui/character-select-panel-crystal-frame-two-row-v1.png?v=V1.27Beta-visible15-center-scale1") center / 100% 100% no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    align-self: start !important;
    width: min(100%, calc(var(--select-matrix-w) + var(--select-frame-bleed-x) * 2 + 8px)) !important;
    max-width: calc(var(--select-matrix-w) + var(--select-frame-bleed-x) * 2 + 8px) !important;
    height: min(
      calc(var(--select-matrix-h) + var(--select-frame-bleed-y) * 3 + 10px),
      calc(var(--select-panel-h) - var(--select-panel-pad-top) - var(--select-panel-pad-bottom) - var(--select-tab-h) - 14px)
    ) !important;
    max-height: min(
      calc(var(--select-matrix-h) + var(--select-frame-bleed-y) * 3 + 10px),
      calc(var(--select-panel-h) - var(--select-panel-pad-top) - var(--select-panel-pad-bottom) - var(--select-tab-h) - 14px)
    ) !important;
    margin: 0 auto !important;
    padding: 0 4px 10px !important;
  }
}

/* V1.27Beta-hotfix-visible20: final EOF lock for preview-gradient restore and selector thumbnail badges. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-frame-fit-outset-x: clamp(5px, calc(var(--select-card-outer-w) * 0.038), 11px) !important;
  --select-frame-fit-outset-y: clamp(7px, calc(var(--select-card-outer-h) * 0.034), 16px) !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  z-index: 20 !important;
  inset: 11.1% 9.1% 12.2% !important;
  border-radius: 10px !important;
  clip-path: polygon(6% 0, 94% 0, 100% 4.2%, 100% 95.8%, 94% 100%, 6% 100%, 0 95.8%, 0 4.2%) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  top: calc(var(--select-frame-fit-outset-y) * -1) !important;
  right: calc(var(--select-frame-fit-outset-x) * -1) !important;
  bottom: calc(var(--select-frame-fit-outset-y) * -1) !important;
  left: calc(var(--select-frame-fit-outset-x) * -1) !important;
  z-index: 96 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  background:
    url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.27Beta-visible20-restore-preview-icons2") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 3px 6px rgba(10, 27, 45, 0.18))
    drop-shadow(0 0 7px rgba(96, 184, 255, 0.14)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] .card-outer-frame {
  background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.27Beta-visible20-restore-preview-icons2") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] .card-outer-frame {
  background-image: url("assets/ui/character-card-frame-villain-complete-v1.png?v=V1.27Beta-visible20-restore-preview-icons2") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
  background:
    url("assets/ui/character-card-frame-desire-hybrid-complete-v1.png?v=V1.27Beta-visible20-restore-preview-icons2") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
  position: absolute !important;
  left: 43% !important;
  right: 9.5% !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 82 !important;
  display: grid !important;
  justify-items: end !important;
  align-content: center !important;
  gap: clamp(4px, calc(var(--select-card-outer-h) * 0.025), 8px) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff3c2 !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: right !important;
  font-style: normal !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription small {
  display: block !important;
  max-width: 100% !important;
  padding: clamp(2px, calc(var(--select-card-outer-h) * 0.012), 4px) clamp(6px, calc(var(--select-card-outer-w) * 0.054), 9px) !important;
  border: 0 !important;
  border-right: 2px solid var(--character-title-color, rgba(246, 200, 95, 0.95)) !important;
  border-radius: 5px 0 0 5px !important;
  background:
    linear-gradient(90deg, rgba(9, 11, 16, 0.82), rgba(9, 11, 16, 0.94)),
    rgba(9, 11, 16, 0.9) !important;
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 244, 207, 0.04) !important;
  color: var(--character-title-color, #f2c15a) !important;
  -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important;
  font-size: clamp(9px, calc(var(--select-card-outer-w) * 0.076), 12px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription strong {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff3c2 !important;
  -webkit-text-fill-color: #fff3c2 !important;
  font-size: clamp(18px, calc(var(--select-card-outer-w) * 0.155), 25px) !important;
  font-weight: 950 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(0, 0, 0, 0.36) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  bottom: 6.9% !important;
  z-index: 84 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(3px, calc(var(--select-card-outer-w) * 0.03), 5px) !important;
  height: clamp(23px, calc(var(--select-card-outer-h) * 0.077), 29px) !important;
  min-height: clamp(23px, calc(var(--select-card-outer-h) * 0.077), 29px) !important;
  max-height: clamp(23px, calc(var(--select-card-outer-h) * 0.077), 29px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  padding: 0 clamp(9px, calc(var(--select-card-outer-w) * 0.07), 13px) 1px clamp(7px, calc(var(--select-card-outer-w) * 0.055), 10px) !important;
  border: 1px solid rgba(251, 215, 112, 0.92) !important;
  border-left: 3px solid rgba(18, 12, 6, 0.95) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
  background:
    linear-gradient(90deg, rgba(255, 229, 124, 0.98), rgba(246, 200, 95, 0.94) 58%, rgba(37, 25, 12, 0.96)) !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 248, 199, 0.64) !important;
  color: #15110a !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important;
  font-size: clamp(8.5px, calc(var(--select-card-outer-w) * 0.071), 11.5px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 243, 178, 0.5) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip {
  color: #f6fff5 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(135, 227, 173, 0.9) !important;
  border-left-color: rgba(55, 166, 107, 0.98) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 246, 197, 0.5), transparent 46%),
    linear-gradient(90deg, rgba(75, 173, 111, 0.96), rgba(29, 109, 80, 0.94) 54%, rgba(15, 44, 35, 0.96)) !important;
  box-shadow:
    0 7px 16px rgba(18, 92, 54, 0.28),
    0 0 14px rgba(88, 214, 141, 0.2),
    inset 0 1px 0 rgba(255, 242, 184, 0.34) !important;
  text-shadow:
    0 1px 3px rgba(10, 39, 28, 0.84),
    0 0 10px rgba(148, 244, 183, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip .skill-inline-icon {
  display: inline-block !important;
  width: 1.06em !important;
  height: 1.06em !important;
  min-width: 1.06em !important;
  min-height: 1.06em !important;
  object-fit: contain !important;
  margin: 0 2px 0 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-skill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-skill {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, max-content)) !important;
  align-items: start !important;
  justify-content: start !important;
  gap: 4px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: clamp(106px, 9vw, 136px) !important;
  min-width: clamp(106px, 9vw, 136px) !important;
  max-width: clamp(106px, 9vw, 136px) !important;
  height: clamp(30px, 3.25vh, 36px) !important;
  min-height: clamp(30px, 3.25vh, 36px) !important;
  max-height: clamp(30px, 3.25vh, 36px) !important;
  padding: 0 12px 2px !important;
  border: 1px solid rgba(251, 215, 112, 0.92) !important;
  border-left: 3px solid rgba(18, 12, 6, 0.95) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !important;
  background:
    linear-gradient(90deg, rgba(255, 229, 124, 0.98), rgba(246, 200, 95, 0.94) 58%, rgba(37, 25, 12, 0.96)) !important;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 248, 199, 0.64) !important;
  color: #15110a !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 243, 178, 0.5) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  order: 1 !important;
  justify-self: start !important;
  margin: 0 0 5px !important;
  color: #f6fff5 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(135, 227, 173, 0.9) !important;
  border-left-color: rgba(55, 166, 107, 0.98) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 246, 197, 0.5), transparent 46%),
    linear-gradient(90deg, rgba(75, 173, 111, 0.96), rgba(29, 109, 80, 0.94) 54%, rgba(15, 44, 35, 0.96)) !important;
  box-shadow:
    0 8px 20px rgba(18, 92, 54, 0.28),
    0 0 18px rgba(88, 214, 141, 0.22),
    inset 0 1px 0 rgba(255, 242, 184, 0.34) !important;
  text-shadow:
    0 1px 3px rgba(10, 39, 28, 0.84),
    0 0 10px rgba(148, 244, 183, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip .skill-inline-icon {
  display: inline-block !important;
  width: 1.18em !important;
  height: 1.18em !important;
  min-width: 18px !important;
  min-height: 18px !important;
  object-fit: contain !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]) {
  position: absolute !important;
  left: 7px !important;
  top: 0 !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(78%, 260px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 4px 10px 5px 8px !important;
  border: 0 !important;
  border-left: 2px solid rgba(255, 96, 96, 0.96) !important;
  border-radius: 0 !important;
  color: #ffe1e1 !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important;
  font-size: clamp(12px, 1.55vh, 14px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 91, 91, 0.34), rgba(74, 6, 12, 0.9) 72%),
    linear-gradient(180deg, rgba(255, 224, 224, 0.2), rgba(110, 11, 21, 0.3)) !important;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important;
  box-shadow: none !important;
  text-align: left !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 9px rgba(255, 75, 84, 0.34) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: translateY(calc(-100% - 7px)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]).enabled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]).enabled {
  border-left-color: rgba(255, 211, 118, 0.98) !important;
  color: #fff7dc !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(90deg, rgba(255, 188, 104, 0.34), rgba(114, 12, 18, 0.92) 74%),
    linear-gradient(180deg, rgba(255, 238, 194, 0.24), rgba(137, 18, 25, 0.34)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Lollipopz"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Lollipopz"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  color: #f08fc4 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(255, 184, 220, 0.9) !important;
  border-left-color: rgba(255, 142, 198, 0.96) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 48%),
    linear-gradient(90deg, rgba(255, 244, 251, 0.96), rgba(255, 202, 229, 0.78) 52%, rgba(219, 237, 255, 0.58)) !important;
  box-shadow:
    0 7px 18px rgba(170, 60, 120, 0.16),
    0 0 18px rgba(255, 178, 220, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 10px rgba(255, 188, 224, 0.42) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Rhasta"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Rhasta"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  color: #fffbe8 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(255, 210, 120, 0.96) !important;
  border-left-color: rgba(75, 188, 116, 0.98) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 248, 210, 0.62), transparent 46%),
    linear-gradient(90deg, rgba(88, 198, 121, 0.98), rgba(235, 181, 68, 0.94) 52%, rgba(18, 62, 40, 0.98)) !important;
  box-shadow:
    0 9px 24px rgba(22, 100, 62, 0.34),
    0 0 24px rgba(123, 231, 148, 0.3),
    inset 0 1px 0 rgba(255, 238, 194, 0.42) !important;
  text-shadow:
    0 1px 3px rgba(25, 47, 20, 0.74),
    0 0 10px rgba(255, 221, 112, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Xiaoyang"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Xiaoyang"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  color: #e9fbff !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(104, 213, 255, 0.9) !important;
  border-left-color: rgba(78, 153, 255, 0.98) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(240, 253, 255, 0.62), transparent 46%),
    linear-gradient(90deg, rgba(55, 104, 210, 0.94), rgba(89, 216, 255, 0.9) 52%, rgba(33, 46, 111, 0.98)) !important;
  box-shadow:
    0 8px 20px rgba(25, 68, 126, 0.28),
    0 0 18px rgba(101, 222, 255, 0.24),
    inset 0 1px 0 rgba(244, 253, 255, 0.42) !important;
  text-shadow:
    0 1px 3px rgba(8, 30, 76, 0.76),
    0 0 10px rgba(118, 224, 255, 0.32) !important;
}

/* V1.27Beta-hotfix-visible19: restore enlarged preview badges; only thumbnails copy that treatment. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-frame-fit-outset-x: clamp(5px, calc(var(--select-card-outer-w) * 0.038), 11px) !important;
  --select-frame-fit-outset-y: clamp(7px, calc(var(--select-card-outer-h) * 0.034), 16px) !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  z-index: 20 !important;
  inset: 11.1% 9.1% 12.2% !important;
  border-radius: 10px !important;
  clip-path: polygon(6% 0, 94% 0, 100% 4.2%, 100% 95.8%, 94% 100%, 6% 100%, 0 95.8%, 0 4.2%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -24px 32px rgba(3, 9, 18, 0.22) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  top: calc(var(--select-frame-fit-outset-y) * -1) !important;
  right: calc(var(--select-frame-fit-outset-x) * -1) !important;
  bottom: calc(var(--select-frame-fit-outset-y) * -1) !important;
  left: calc(var(--select-frame-fit-outset-x) * -1) !important;
  z-index: 96 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  background:
    url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.27Beta-visible19-restore-preview-icons1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 3px 6px rgba(10, 27, 45, 0.18))
    drop-shadow(0 0 7px rgba(96, 184, 255, 0.14)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] .card-outer-frame {
  background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.27Beta-visible19-restore-preview-icons1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] .card-outer-frame {
  background-image: url("assets/ui/character-card-frame-villain-complete-v1.png?v=V1.27Beta-visible19-restore-preview-icons1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
  background:
    url("assets/ui/character-card-frame-desire-hybrid-complete-v1.png?v=V1.27Beta-visible19-restore-preview-icons1") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
  position: absolute !important;
  left: 43% !important;
  right: 9.5% !important;
  top: 50% !important;
  bottom: auto !important;
  z-index: 82 !important;
  display: grid !important;
  justify-items: end !important;
  align-content: center !important;
  gap: clamp(4px, calc(var(--select-card-outer-h) * 0.025), 8px) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff3c2 !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: right !important;
  font-style: normal !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription small {
  display: block !important;
  max-width: 100% !important;
  padding: clamp(2px, calc(var(--select-card-outer-h) * 0.012), 4px) clamp(6px, calc(var(--select-card-outer-w) * 0.054), 9px) !important;
  border: 0 !important;
  border-right: 2px solid var(--character-title-color, rgba(246, 200, 95, 0.95)) !important;
  border-radius: 5px 0 0 5px !important;
  background:
    linear-gradient(90deg, rgba(9, 11, 16, 0.82), rgba(9, 11, 16, 0.94)),
    rgba(9, 11, 16, 0.9) !important;
  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 244, 207, 0.04) !important;
  color: var(--character-title-color, #f2c15a) !important;
  -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important;
  font-size: clamp(9px, calc(var(--select-card-outer-w) * 0.076), 12px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription strong {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff3c2 !important;
  -webkit-text-fill-color: #fff3c2 !important;
  font-size: clamp(18px, calc(var(--select-card-outer-w) * 0.155), 25px) !important;
  font-weight: 950 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(0, 0, 0, 0.36) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  bottom: 6.9% !important;
  z-index: 84 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(3px, calc(var(--select-card-outer-w) * 0.03), 5px) !important;
  height: clamp(23px, calc(var(--select-card-outer-h) * 0.077), 29px) !important;
  min-height: clamp(23px, calc(var(--select-card-outer-h) * 0.077), 29px) !important;
  max-height: clamp(23px, calc(var(--select-card-outer-h) * 0.077), 29px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  padding: 0 clamp(9px, calc(var(--select-card-outer-w) * 0.07), 13px) 1px clamp(7px, calc(var(--select-card-outer-w) * 0.055), 10px) !important;
  border: 1px solid rgba(251, 215, 112, 0.92) !important;
  border-left: 3px solid rgba(18, 12, 6, 0.95) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
  background:
    linear-gradient(90deg, rgba(255, 229, 124, 0.98), rgba(246, 200, 95, 0.94) 58%, rgba(37, 25, 12, 0.96)) !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 248, 199, 0.64) !important;
  color: #15110a !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important;
  font-size: clamp(8.5px, calc(var(--select-card-outer-w) * 0.071), 11.5px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 243, 178, 0.5) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip {
  color: #f6fff5 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(135, 227, 173, 0.9) !important;
  border-left-color: rgba(55, 166, 107, 0.98) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 246, 197, 0.5), transparent 46%),
    linear-gradient(90deg, rgba(75, 173, 111, 0.96), rgba(29, 109, 80, 0.94) 54%, rgba(15, 44, 35, 0.96)) !important;
  box-shadow:
    0 7px 16px rgba(18, 92, 54, 0.28),
    0 0 14px rgba(88, 214, 141, 0.2),
    inset 0 1px 0 rgba(255, 242, 184, 0.34) !important;
  text-shadow:
    0 1px 3px rgba(10, 39, 28, 0.84),
    0 0 10px rgba(148, 244, 183, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip .skill-inline-icon {
  display: inline-block !important;
  width: 1.06em !important;
  height: 1.06em !important;
  min-width: 1.06em !important;
  min-height: 1.06em !important;
  object-fit: contain !important;
  margin: 0 2px 0 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip .skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip .skill-inline-text {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-skill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-skill {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, max-content)) !important;
  align-items: start !important;
  justify-content: start !important;
  gap: 4px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: clamp(106px, 9vw, 136px) !important;
  min-width: clamp(106px, 9vw, 136px) !important;
  max-width: clamp(106px, 9vw, 136px) !important;
  height: clamp(30px, 3.25vh, 36px) !important;
  min-height: clamp(30px, 3.25vh, 36px) !important;
  max-height: clamp(30px, 3.25vh, 36px) !important;
  padding: 0 12px 2px !important;
  border: 1px solid rgba(251, 215, 112, 0.92) !important;
  border-left: 3px solid rgba(18, 12, 6, 0.95) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%) !important;
  background:
    linear-gradient(90deg, rgba(255, 229, 124, 0.98), rgba(246, 200, 95, 0.94) 58%, rgba(37, 25, 12, 0.96)) !important;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 248, 199, 0.64) !important;
  color: #15110a !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 243, 178, 0.5) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  order: 1 !important;
  justify-self: start !important;
  margin: 0 0 5px !important;
  color: #f6fff5 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(135, 227, 173, 0.9) !important;
  border-left-color: rgba(55, 166, 107, 0.98) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 246, 197, 0.5), transparent 46%),
    linear-gradient(90deg, rgba(75, 173, 111, 0.96), rgba(29, 109, 80, 0.94) 54%, rgba(15, 44, 35, 0.96)) !important;
  box-shadow:
    0 8px 20px rgba(18, 92, 54, 0.28),
    0 0 18px rgba(88, 214, 141, 0.22),
    inset 0 1px 0 rgba(255, 242, 184, 0.34) !important;
  text-shadow:
    0 1px 3px rgba(10, 39, 28, 0.84),
    0 0 10px rgba(148, 244, 183, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip {
  order: 2 !important;
  justify-self: start !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill)::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill)::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill)::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill)::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip .skill-inline-icon {
  display: inline-block !important;
  width: 1.18em !important;
  height: 1.18em !important;
  min-width: 18px !important;
  min-height: 18px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 5px rgba(78, 205, 196, 0.18)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill) .skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill) .skill-inline-text {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  line-height: 1.12 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]) {
  position: absolute !important;
  left: 7px !important;
  top: 0 !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(78%, 260px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 4px 10px 5px 8px !important;
  border: 0 !important;
  border-left: 2px solid rgba(255, 96, 96, 0.96) !important;
  border-radius: 0 !important;
  color: #ffe1e1 !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Arial Black", sans-serif !important;
  font-size: clamp(12px, 1.55vh, 14px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 91, 91, 0.34), rgba(74, 6, 12, 0.9) 72%),
    linear-gradient(180deg, rgba(255, 224, 224, 0.2), rgba(110, 11, 21, 0.3)) !important;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important;
  box-shadow: none !important;
  text-align: left !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 9px rgba(255, 75, 84, 0.34) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: translateY(calc(-100% - 7px)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]).enabled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]).enabled {
  border-left-color: rgba(255, 211, 118, 0.98) !important;
  color: #fff7dc !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(90deg, rgba(255, 188, 104, 0.34), rgba(114, 12, 18, 0.92) 74%),
    linear-gradient(180deg, rgba(255, 238, 194, 0.24), rgba(137, 18, 25, 0.34)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewDescription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewDescription {
  grid-column: 1 / -1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Lollipopz"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Lollipopz"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  color: #f08fc4 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(255, 184, 220, 0.9) !important;
  border-left-color: rgba(255, 142, 198, 0.96) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 48%),
    linear-gradient(90deg, rgba(255, 244, 251, 0.96), rgba(255, 202, 229, 0.78) 52%, rgba(219, 237, 255, 0.58)) !important;
  box-shadow:
    0 7px 18px rgba(170, 60, 120, 0.16),
    0 0 18px rgba(255, 178, 220, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 10px rgba(255, 188, 224, 0.42) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Rhasta"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Rhasta"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  color: #fffbe8 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(255, 210, 120, 0.96) !important;
  border-left-color: rgba(75, 188, 116, 0.98) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 248, 210, 0.62), transparent 46%),
    linear-gradient(90deg, rgba(88, 198, 121, 0.98), rgba(235, 181, 68, 0.94) 52%, rgba(18, 62, 40, 0.98)) !important;
  box-shadow:
    0 9px 24px rgba(22, 100, 62, 0.34),
    0 0 24px rgba(123, 231, 148, 0.3),
    inset 0 1px 0 rgba(255, 238, 194, 0.42) !important;
  text-shadow:
    0 1px 3px rgba(25, 47, 20, 0.74),
    0 0 10px rgba(255, 221, 112, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Xiaoyang"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Xiaoyang"] .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  color: #e9fbff !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgba(104, 213, 255, 0.9) !important;
  border-left-color: rgba(78, 153, 255, 0.98) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(240, 253, 255, 0.62), transparent 46%),
    linear-gradient(90deg, rgba(55, 104, 210, 0.94), rgba(89, 216, 255, 0.9) 52%, rgba(33, 46, 111, 0.98)) !important;
  box-shadow:
    0 8px 20px rgba(25, 68, 126, 0.28),
    0 0 18px rgba(101, 222, 255, 0.24),
    inset 0 1px 0 rgba(244, 253, 255, 0.42) !important;
  text-shadow:
    0 1px 3px rgba(8, 30, 76, 0.76),
    0 0 10px rgba(118, 224, 255, 0.32) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
    width: clamp(84px, 24vw, 104px) !important;
    min-width: clamp(84px, 24vw, 104px) !important;
    max-width: clamp(84px, 24vw, 104px) !important;
    height: clamp(25px, 6.6vw, 31px) !important;
    min-height: clamp(25px, 6.6vw, 31px) !important;
    max-height: clamp(25px, 6.6vw, 31px) !important;
    padding: 0 8px 1px !important;
    font-size: clamp(10px, 2.75vw, 12px) !important;
  }
}

/* V1.27Beta-hotfix-visible18: no backing plate, slightly oversize hollow frames so portrait edges never leak outside the border. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-frame-fit-outset-x: clamp(4px, calc(var(--select-card-outer-w) * 0.032), 9px) !important;
  --select-frame-fit-outset-y: clamp(6px, calc(var(--select-card-outer-h) * 0.028), 13px) !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  z-index: 20 !important;
  inset: 11.2% 9.2% 12.4% !important;
  border-radius: 10px !important;
  clip-path: polygon(6% 0, 94% 0, 100% 4.2%, 100% 95.8%, 94% 100%, 6% 100%, 0 95.8%, 0 4.2%) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  top: calc(var(--select-frame-fit-outset-y) * -1) !important;
  right: calc(var(--select-frame-fit-outset-x) * -1) !important;
  bottom: calc(var(--select-frame-fit-outset-y) * -1) !important;
  left: calc(var(--select-frame-fit-outset-x) * -1) !important;
  z-index: 96 !important;
  background:
    url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.27Beta-visible18-no-board-framefit1") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] .card-outer-frame {
  background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.27Beta-visible18-no-board-framefit1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] .card-outer-frame {
  background-image: url("assets/ui/character-card-frame-villain-complete-v1.png?v=V1.27Beta-visible18-no-board-framefit1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
  background:
    url("assets/ui/character-card-frame-desire-hybrid-complete-v1.png?v=V1.27Beta-visible18-no-board-framefit1") center / 100% 100% no-repeat !important;
}

/* V1.27Beta-hotfix-visible16: true layered select cards and unified skill/mode chips. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("assets/ui/character-card-base-board-dark-v1.png?v=V1.27Beta-visible16-layered-card1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  z-index: 20 !important;
  inset: 10.6% 8.5% 11.6% !important;
  border-radius: 10px !important;
  clip-path: polygon(6% 0, 94% 0, 100% 4.2%, 100% 95.8%, 94% 100%, 6% 100%, 0 95.8%, 0 4.2%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 -26px 34px rgba(3, 9, 18, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  inset: 0 !important;
  z-index: 96 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  background:
    url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.27Beta-visible17-complete-frame1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 3px 6px rgba(10, 27, 45, 0.18))
    drop-shadow(0 0 7px rgba(96, 184, 255, 0.14)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] .card-outer-frame {
  background-image: url("assets/ui/character-card-frame-neutral-complete-v1.png?v=V1.27Beta-visible17-complete-frame1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] .card-outer-frame {
  background-image: url("assets/ui/character-card-frame-villain-complete-v1.png?v=V1.27Beta-visible17-complete-frame1") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
  background:
    url("assets/ui/character-card-frame-desire-hybrid-complete-v1.png?v=V1.27Beta-visible17-complete-frame1") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
  z-index: 110 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
  left: 9.6% !important;
  right: 9.6% !important;
  bottom: 6.8% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: auto !important;
  min-height: 24px !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  border: 1px solid rgba(196, 221, 238, 0.92) !important;
  border-left: 3px solid rgba(87, 148, 190, 0.95) !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.96), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(228, 243, 252, 0.94) 56%, rgba(215, 231, 238, 0.9)) !important;
  color: #17334d !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 5px 12px rgba(10, 28, 48, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  clip-path: none !important;
  transform: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: clamp(22px, calc(var(--select-card-outer-h) * 0.078), 27px) !important;
  min-height: clamp(22px, calc(var(--select-card-outer-h) * 0.078), 27px) !important;
  max-height: clamp(22px, calc(var(--select-card-outer-h) * 0.078), 27px) !important;
  padding: 0 8px !important;
  font-size: clamp(9px, calc(var(--select-card-outer-w) * 0.075), 12px) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill, #previewModeButton)::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill, #previewModeButton)::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill, #previewModeButton)::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill, #previewModeButton)::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip .skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip .skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill) .skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview :is(#previewSkill, #previewModeSkill) .skill-inline-text {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-inline-icon {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]).enabled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]).enabled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip.enabled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]).enabled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]).enabled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip.enabled {
  border-color: rgba(216, 185, 93, 0.92) !important;
  border-left-color: rgba(190, 133, 39, 0.98) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.98), transparent 52%),
    linear-gradient(180deg, rgba(255, 253, 238, 0.98), rgba(248, 231, 174, 0.92) 56%, rgba(229, 209, 142, 0.9)) !important;
  color: #4f3710 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-skill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-skill {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, max-content)) !important;
  align-items: start !important;
  justify-content: start !important;
  gap: 6px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
  width: clamp(112px, 10vw, 148px) !important;
  min-width: clamp(112px, 10vw, 148px) !important;
  max-width: clamp(112px, 10vw, 148px) !important;
  height: clamp(30px, 3.4dvh, 36px) !important;
  min-height: clamp(30px, 3.4dvh, 36px) !important;
  max-height: clamp(30px, 3.4dvh, 36px) !important;
  padding: 0 12px !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  margin: 0 !important;
  justify-self: start !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]) {
  width: min(100%, 168px) !important;
  min-width: 132px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewDescription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewDescription {
  grid-column: 1 / -1 !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    gap: 3px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: clamp(8.5px, calc(var(--select-card-outer-w) * 0.07), 10.5px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill.preview-skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
    width: clamp(96px, 26vw, 116px) !important;
    min-width: clamp(96px, 26vw, 116px) !important;
    max-width: clamp(96px, 26vw, 116px) !important;
    height: clamp(27px, 6.4vw, 31px) !important;
    min-height: clamp(27px, 6.4vw, 31px) !important;
    max-height: clamp(27px, 6.4vw, 31px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: clamp(10px, 2.75vw, 12px) !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-outer-frame {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 899px) and (orientation: portrait), (max-width: 679px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-panel-w: min(calc(100vw - 4px), calc((100dvh - 12px) * 941 / 1672), 444px) !important;
    --select-panel-h: min(calc(var(--select-panel-w) * 1672 / 941), calc(100dvh - 6px)) !important;
    --select-gap: clamp(8px, 2.1vw, 10px) !important;
    --select-tab-h: clamp(30px, 4dvh, 34px) !important;
    --select-panel-pad-x: clamp(18px, 5.2vw, 24px) !important;
    --select-panel-pad-top: clamp(20px, 3dvh, 28px) !important;
    --select-panel-pad-bottom: clamp(16px, 2.6dvh, 24px) !important;
    --select-card-outer-w: min(
      198px,
      calc((var(--select-panel-w) - var(--select-panel-pad-x) * 2 - var(--select-gap)) / 2)
    ) !important;
    --select-card-outer-h: calc(var(--select-card-outer-w) / var(--select-card-ratio)) !important;
    --select-matrix-w: calc(var(--select-card-outer-w) * 2 + var(--select-gap)) !important;
    --select-matrix-h: calc(var(--select-card-outer-h) * 2 + var(--select-gap)) !important;
    place-items: center center !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    grid-template-rows: var(--select-tab-h) auto !important;
    align-content: center !important;
    align-items: start !important;
    align-self: center !important;
    justify-items: center !important;
    justify-self: center !important;
    width: var(--select-panel-w) !important;
    height: var(--select-panel-h) !important;
    max-width: calc(100vw - 4px) !important;
    max-height: calc(100dvh - 6px) !important;
    padding:
      var(--select-panel-pad-top)
      var(--select-panel-pad-x)
      var(--select-panel-pad-bottom) !important;
    gap: clamp(9px, 1.35dvh, 12px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    align-self: end !important;
    width: min(calc(var(--select-matrix-w) + 4px), 100%) !important;
    height: var(--select-tab-h) !important;
    min-height: var(--select-tab-h) !important;
    margin: 0 auto !important;
    gap: 6px !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    flex: 1 1 0 !important;
    height: var(--select-tab-h) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 clamp(8px, 2.2vw, 12px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    align-self: start !important;
    width: min(100%, calc(var(--select-matrix-w) + var(--select-frame-bleed-x) * 2 + 8px)) !important;
    max-width: calc(var(--select-matrix-w) + var(--select-frame-bleed-x) * 2 + 8px) !important;
    height: min(
      calc(var(--select-matrix-h) + var(--select-frame-bleed-y) * 3 + 10px),
      calc(var(--select-panel-h) - var(--select-panel-pad-top) - var(--select-panel-pad-bottom) - var(--select-tab-h) - 12px)
    ) !important;
    max-height: min(
      calc(var(--select-matrix-h) + var(--select-frame-bleed-y) * 3 + 10px),
      calc(var(--select-panel-h) - var(--select-panel-pad-top) - var(--select-panel-pad-bottom) - var(--select-tab-h) - 12px)
    ) !important;
    margin: 0 auto !important;
    padding: 0 4px 10px !important;
  }
}