/* V1.27Beta-restore-preview-icons3: final layer loaded after the large hotfix file. */
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-restore-preview-icons3") 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-restore-preview-icons3") !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-restore-preview-icons3") !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-restore-preview-icons3") 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;
  margin: 0 !important;
  padding: 0 !important;
  border: 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;
  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-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 #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-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-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;
}

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;
}

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;
}

/* V1.27Beta-restore-preview-icons4: beat older high-specificity white thumb labels. */
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 small,
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 small {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !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;
  text-align: right !important;
  opacity: 1 !important;
}

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 strong,
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 strong {
  color: #fff3c2 !important;
  -webkit-text-fill-color: #fff3c2 !important;
  font-size: clamp(18px, calc(var(--select-card-outer-w) * 0.155), 25px) !important;
  text-align: right !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  border: 1px solid rgba(251, 215, 112, 0.92) !important;
  border-left: 3px solid rgba(18, 12, 6, 0.95) !important;
  color: #15110a !important;
  -webkit-text-fill-color: currentColor !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;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
  text-shadow: 0 1px 0 rgba(255, 243, 178, 0.5) !important;
}

/* V1.27Beta-restore-preview-icons5: mobile thumb fit and single preview mode button. */
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(7px, calc(var(--select-card-outer-w) * 0.052), 15px) !important;
  --select-frame-fit-outset-y: clamp(10px, calc(var(--select-card-outer-h) * 0.048), 22px) !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;
  background:
    url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.27Beta-restore-preview-icons5") 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-restore-preview-icons5") !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-restore-preview-icons5") !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-restore-preview-icons5") 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 {
  left: 39.5% !important;
  right: 7.8% !important;
  top: 49% !important;
  gap: clamp(5px, calc(var(--select-card-outer-h) * 0.03), 9px) !important;
}

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 small,
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 small {
  padding: clamp(3px, calc(var(--select-card-outer-h) * 0.015), 5px) clamp(7px, calc(var(--select-card-outer-w) * 0.06), 10px) !important;
  font-size: clamp(10px, calc(var(--select-card-outer-w) * 0.088), 14px) !important;
  line-height: 1.04 !important;
}

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 strong,
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 strong {
  font-size: clamp(20px, calc(var(--select-card-outer-w) * 0.18), 30px) !important;
  line-height: 0.96 !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 {
  bottom: 10.1% !important;
  height: clamp(24px, calc(var(--select-card-outer-h) * 0.082), 31px) !important;
  min-height: clamp(24px, calc(var(--select-card-outer-h) * 0.082), 31px) !important;
  max-height: clamp(24px, calc(var(--select-card-outer-h) * 0.082), 31px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill {
  display: none !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]) {
  left: 7px !important;
  top: 0 !important;
  padding: 3px 8px 4px 7px !important;
  font-size: clamp(12px, 1.55vh, 14px) !important;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%) !important;
  transform: translateY(calc(-100% - 7px)) !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-frame-fit-outset-x: clamp(8px, calc(var(--select-card-outer-w) * 0.058), 18px) !important;
    --select-frame-fit-outset-y: clamp(12px, calc(var(--select-card-outer-h) * 0.052), 24px) !important;
  }
}

/* V1.27Beta-restore-preview-icons9: one button system for select skills, mode entries, and preview skill names. */
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 {
  --skill-chip-blue-a: rgba(237, 250, 255, 0.98);
  --skill-chip-blue-b: rgba(91, 188, 244, 0.94);
  --skill-chip-blue-c: rgba(33, 126, 197, 0.96);
  --skill-chip-gold: rgba(237, 195, 88, 0.96);
  --skill-chip-ink: #0f2c43;
  --skill-chip-border: rgba(141, 214, 255, 0.96);
  --skill-chip-left: rgba(51, 143, 214, 0.98);
  --skill-chip-shadow: rgba(18, 68, 112, 0.2);
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"],
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"] {
  --skill-chip-blue-a: rgba(255, 255, 255, 0.98);
  --skill-chip-blue-b: rgba(219, 236, 247, 0.94);
  --skill-chip-blue-c: rgba(160, 197, 222, 0.94);
  --skill-chip-gold: rgba(233, 197, 94, 0.92);
  --skill-chip-ink: #24394a;
  --skill-chip-border: rgba(220, 238, 250, 0.96);
  --skill-chip-left: rgba(137, 177, 206, 0.98);
  --skill-chip-shadow: rgba(82, 122, 148, 0.18);
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"],
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"] {
  --skill-chip-blue-a: rgba(232, 226, 255, 0.96);
  --skill-chip-blue-b: rgba(112, 88, 216, 0.94);
  --skill-chip-blue-c: rgba(42, 27, 93, 0.98);
  --skill-chip-gold: rgba(225, 96, 117, 0.92);
  --skill-chip-ink: #f7f1ff;
  --skill-chip-border: rgba(184, 153, 255, 0.92);
  --skill-chip-left: rgba(122, 78, 232, 0.98);
  --skill-chip-shadow: rgba(50, 20, 103, 0.28);
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview {
  --skill-chip-blue-a: rgba(237, 250, 255, 0.98);
  --skill-chip-blue-b: rgba(91, 188, 244, 0.94);
  --skill-chip-blue-c: rgba(33, 126, 197, 0.96);
  --skill-chip-gold: rgba(237, 195, 88, 0.96);
  --skill-chip-ink: #0f2c43;
  --skill-chip-border: rgba(141, 214, 255, 0.96);
  --skill-chip-left: rgba(51, 143, 214, 0.98);
  --skill-chip-shadow: rgba(18, 68, 112, 0.2);
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="neutral"] {
  --skill-chip-blue-a: rgba(255, 255, 255, 0.98);
  --skill-chip-blue-b: rgba(219, 236, 247, 0.94);
  --skill-chip-blue-c: rgba(160, 197, 222, 0.94);
  --skill-chip-gold: rgba(233, 197, 94, 0.92);
  --skill-chip-ink: #24394a;
  --skill-chip-border: rgba(220, 238, 250, 0.96);
  --skill-chip-left: rgba(137, 177, 206, 0.98);
  --skill-chip-shadow: rgba(82, 122, 148, 0.18);
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-select-faction="villain"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-select-faction="villain"] {
  --skill-chip-blue-a: rgba(232, 226, 255, 0.96);
  --skill-chip-blue-b: rgba(112, 88, 216, 0.94);
  --skill-chip-blue-c: rgba(42, 27, 93, 0.98);
  --skill-chip-gold: rgba(225, 96, 117, 0.92);
  --skill-chip-ink: #f7f1ff;
  --skill-chip-border: rgba(184, 153, 255, 0.92);
  --skill-chip-left: rgba(122, 78, 232, 0.98);
  --skill-chip-shadow: rgba(50, 20, 103, 0.28);
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  box-sizing: border-box !important;
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(4px, 0.55vh, 6px) !important;
  width: auto !important;
  min-width: clamp(86px, calc(var(--select-card-outer-w, 140px) * 0.64), 126px) !important;
  max-width: min(100%, 168px) !important;
  height: clamp(25px, calc(var(--select-card-outer-h, 260px) * 0.086), 32px) !important;
  min-height: clamp(25px, calc(var(--select-card-outer-h, 260px) * 0.086), 32px) !important;
  max-height: clamp(25px, calc(var(--select-card-outer-h, 260px) * 0.086), 32px) !important;
  margin: 0 !important;
  padding: 0 clamp(9px, 1.2vh, 13px) 1px clamp(8px, 1vh, 11px) !important;
  border: 1px solid var(--skill-chip-border) !important;
  border-left: 3px solid var(--skill-chip-left) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important;
  color: var(--skill-chip-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(90deg,
      var(--skill-chip-blue-a) 0%,
      var(--skill-chip-blue-b) 30%,
      var(--skill-chip-blue-c) 78%,
      var(--skill-chip-gold) 100%) !important;
  box-shadow:
    0 7px 15px var(--skill-chip-shadow),
    0 0 12px rgba(99, 200, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  font-size: clamp(8.5px, calc(var(--select-card-outer-w, 140px) * 0.064), 12px) !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.54) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name {
  min-width: clamp(112px, 9vw, 148px) !important;
  height: clamp(30px, 3.25vh, 36px) !important;
  min-height: clamp(30px, 3.25vh, 36px) !important;
  max-height: clamp(30px, 3.25vh, 36px) !important;
  font-size: clamp(12px, 1vw, 14px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  position: absolute !important;
  left: 7px !important;
  top: 0 !important;
  z-index: 14 !important;
  min-width: clamp(90px, 8vw, 130px) !important;
  transform: translateY(calc(-100% - 7px)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name .skill-inline-icon {
  position: static !important;
  display: block !important;
  width: 1.15em !important;
  height: 1.15em !important;
  min-width: 1.15em !important;
  min-height: 1.15em !important;
  max-width: 1.15em !important;
  max-height: 1.15em !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip .skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip .skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name .skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name .skill-inline-text {
  box-sizing: border-box !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: inherit !important;
  transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Lollipopz"] span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Lollipopz"] span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Lollipopz"] #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  --skill-chip-ink: #f08fc4;
  --skill-chip-border: rgba(255, 184, 220, 0.92);
  --skill-chip-left: rgba(255, 142, 198, 0.98);
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.98), transparent 44%),
    linear-gradient(90deg, rgba(255, 244, 251, 0.98) 0%, rgba(255, 190, 225, 0.92) 66%, rgba(189, 228, 255, 0.86) 100%) !important;
  color: #f08fc4 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Rhasta"] span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Rhasta"] span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Rhasta"] #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  --skill-chip-ink: #fffbe8;
  --skill-chip-border: rgba(255, 214, 120, 0.96);
  --skill-chip-left: rgba(72, 188, 116, 0.98);
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 250, 218, 0.8), transparent 44%),
    linear-gradient(90deg, rgba(88, 198, 121, 0.98) 0%, rgba(235, 181, 68, 0.94) 68%, rgba(20, 70, 43, 0.98) 100%) !important;
  color: #fffbe8 !important;
  text-shadow:
    0 1px 3px rgba(22, 58, 28, 0.8),
    0 0 9px rgba(255, 226, 126, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Xiaoyang"] span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Xiaoyang"] span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview[data-character="Xiaoyang"] #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  --skill-chip-ink: #e9fbff;
  --skill-chip-border: rgba(104, 213, 255, 0.94);
  --skill-chip-left: rgba(78, 153, 255, 0.98);
  background:
    radial-gradient(circle at 15% 0%, rgba(240, 253, 255, 0.72), transparent 44%),
    linear-gradient(90deg, rgba(55, 104, 210, 0.96) 0%, rgba(89, 216, 255, 0.92) 68%, rgba(33, 46, 111, 0.98) 100%) !important;
  color: #e9fbff !important;
  text-shadow:
    0 1px 3px rgba(16, 35, 78, 0.8),
    0 0 10px rgba(106, 226, 255, 0.36) !important;
}

/* V1.27Beta-restore-preview-icons10: mode button stacks above normal skill, same size and left edge. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  left: 10.8% !important;
  right: 10.8% !important;
  bottom: 15.15% !important;
  width: auto !important;
  height: auto !important;
  min-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  max-height: none !important;
  gap: clamp(3px, calc(var(--select-card-outer-h) * 0.014), 5px) !important;
  z-index: 112 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  min-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  max-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip {
  order: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  order: 1 !important;
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(4px, calc(var(--select-card-outer-w, 140px) * 0.032), 6px) !important;
  padding-right: clamp(7px, calc(var(--select-card-outer-w, 140px) * 0.052), 10px) !important;
  padding-left: clamp(7px, calc(var(--select-card-outer-w, 140px) * 0.052), 10px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name {
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(5px, 0.65vh, 7px) !important;
  padding-right: clamp(10px, 1.25vh, 14px) !important;
  padding-left: clamp(10px, 1.25vh, 14px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  width: clamp(112px, 9vw, 148px) !important;
  min-width: clamp(112px, 9vw, 148px) !important;
  max-width: clamp(112px, 9vw, 148px) !important;
  height: clamp(30px, 3.25vh, 36px) !important;
  min-height: clamp(30px, 3.25vh, 36px) !important;
  max-height: clamp(30px, 3.25vh, 36px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  left: 0 !important;
  top: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  transform: translateY(calc(-100% - 7px)) !important;
}

/* V1.27Beta-restore-preview-icons14-final: final normal skill chip white/gold and mobile icon/text alignment. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name {
  border: 1px solid rgba(237, 205, 116, 0.9) !important;
  border-left: 3px solid rgba(206, 157, 49, 0.98) !important;
  color: #233647 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.98), transparent 45%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 251, 255, 0.96) 58%, rgba(231, 241, 248, 0.92) 78%, rgba(236, 196, 82, 0.96) 100%) !important;
  box-shadow:
    0 7px 15px rgba(53, 82, 108, 0.16),
    0 0 14px rgba(237, 205, 116, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset -12px 0 18px rgba(236, 196, 82, 0.14) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(5px, calc(var(--select-card-outer-w) * 0.038), 7px) !important;
  padding-right: clamp(7px, calc(var(--select-card-outer-w) * 0.052), 10px) !important;
  padding-left: clamp(7px, calc(var(--select-card-outer-w) * 0.052), 10px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-icon.skill-inline-icon {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  width: 1.38em !important;
  height: 1.38em !important;
  min-width: 1.38em !important;
  min-height: 1.38em !important;
  max-width: 1.38em !important;
  max-height: 1.38em !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  object-fit: contain !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name > .skill-inline-text.skill-inline-text {
  position: relative !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 1em !important;
  min-height: 1em !important;
  max-height: 1em !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;
  transform: none !important;
}

/* V1.27Beta-restore-preview-icons14: normal skills use white body with a gold accent; mobile thumb icon/text are locked inside the chip. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name {
  border: 1px solid rgba(237, 205, 116, 0.9) !important;
  border-left: 3px solid rgba(206, 157, 49, 0.98) !important;
  color: #233647 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.98), transparent 45%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(245, 251, 255, 0.96) 58%,
      rgba(231, 241, 248, 0.92) 78%,
      rgba(236, 196, 82, 0.96) 100%) !important;
  box-shadow:
    0 7px 15px rgba(53, 82, 108, 0.16),
    0 0 14px rgba(237, 205, 116, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset -12px 0 18px rgba(236, 196, 82, 0.14) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-icon.skill-inline-icon {
  position: relative !important;
  z-index: 3 !important;
  width: 1.32em !important;
  height: 1.32em !important;
  min-width: 1.32em !important;
  min-height: 1.32em !important;
  max-width: 1.32em !important;
  max-height: 1.32em !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  object-fit: contain !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name > .skill-inline-text.skill-inline-text {
  position: relative !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 1em !important;
  min-height: 1em !important;
  max-height: 1em !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;
  transform: 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:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
    gap: clamp(5px, calc(var(--select-card-outer-w) * 0.038), 7px) !important;
    padding-right: clamp(7px, calc(var(--select-card-outer-w) * 0.052), 10px) !important;
    padding-left: clamp(7px, calc(var(--select-card-outer-w) * 0.052), 10px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-icon.skill-inline-icon {
    width: 1.38em !important;
    height: 1.38em !important;
    min-width: 1.38em !important;
    min-height: 1.38em !important;
    max-width: 1.38em !important;
    max-height: 1.38em !important;
  }
}

/* V1.27Beta-restore-preview-icons13: mobile faction bar position and selected faction colors. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab] {
  border-color: rgba(224, 238, 248, 0.72) !important;
  color: rgba(47, 69, 86, 0.78) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(222, 236, 246, 0.52)),
    rgba(235, 245, 252, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 4px 10px rgba(37, 72, 104, 0.08) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected {
  border-color: rgba(238, 195, 83, 0.98) !important;
  color: #5a3b08 !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.96), transparent 45%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 236, 185, 0.94) 56%, rgba(226, 178, 64, 0.92) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.72) inset,
    0 5px 14px rgba(169, 117, 20, 0.22),
    0 0 18px rgba(238, 195, 83, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected {
  border-color: rgba(80, 215, 180, 0.96) !important;
  color: #0b4f5b !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(243, 255, 252, 0.9), transparent 45%),
    linear-gradient(90deg, rgba(220, 249, 255, 0.98) 0%, rgba(85, 190, 235, 0.88) 48%, rgba(67, 211, 151, 0.92) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(236, 255, 250, 0.64) inset,
    0 5px 14px rgba(20, 128, 145, 0.2),
    0 0 18px rgba(67, 211, 151, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"].selected {
  border-color: rgba(255, 68, 78, 0.96) !important;
  color: #ffe9e9 !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 141, 122, 0.54), transparent 44%),
    linear-gradient(90deg, rgba(123, 8, 16, 0.98) 0%, rgba(42, 9, 15, 0.98) 56%, rgba(8, 8, 12, 0.98) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 128, 128, 0.28) inset,
    0 5px 14px rgba(90, 0, 9, 0.32),
    0 0 18px rgba(255, 38, 55, 0.28) !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.82),
    0 0 9px rgba(255, 38, 55, 0.35) !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 .character-faction-tabs.character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs {
    transform: translateY(6px) !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip > .skill-inline-text.skill-inline-text {
  justify-self: center !important;
  text-align: center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name > .skill-inline-text.skill-inline-text {
  justify-self: center !important;
  text-align: center !important;
  align-self: center !important;
  max-width: 100% !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name > .skill-inline-icon.skill-inline-icon {
  justify-self: center !important;
  align-self: center !important;
  width: 1.12em !important;
  height: 1.12em !important;
  min-width: 1.12em !important;
  min-height: 1.12em !important;
  max-width: 1.12em !important;
  max-height: 1.12em !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:not([hidden]) .character-option.character-option.character-option > span > em,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em {
    bottom: 15.65% !important;
  }
}

/* V1.27Beta-restore-preview-icons8: override older ultra-specific thumbnail skill/name rules. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em {
  left: 10.8% !important;
  right: 10.8% !important;
  bottom: 15.15% !important;
  z-index: 112 !important;
  height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  min-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  max-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(3px, calc(var(--select-card-outer-w) * 0.026), 5px) !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 clamp(8px, calc(var(--select-card-outer-w) * 0.058), 12px) 1px clamp(7px, calc(var(--select-card-outer-w) * 0.05), 10px) !important;
  font-size: clamp(8px, calc(var(--select-card-outer-w) * 0.059), 10.5px) !important;
  line-height: 1 !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option:is([data-character="Rhasta"], [data-character="Lollipopz"], [data-character="Xiaoyang"]) span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  border: 1px solid rgba(164, 221, 255, 0.96) !important;
  border-left: 3px solid rgba(70, 154, 218, 0.98) !important;
  color: #153047 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.98), transparent 48%),
    linear-gradient(90deg, rgba(244, 251, 255, 0.98), rgba(133, 211, 255, 0.9) 48%, rgba(233, 198, 97, 0.94)) !important;
  box-shadow:
    0 7px 15px rgba(18, 68, 112, 0.2),
    0 0 14px rgba(99, 200, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon {
  position: static !important;
  display: block !important;
  width: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  height: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  min-width: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  min-height: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  max-width: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  max-height: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option span > em > b.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text {
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: inherit !important;
  transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.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:not([hidden]) .character-option.character-option.character-option > span > .card-inscription.card-inscription {
  left: 41.5% !important;
  right: 8.8% !important;
  bottom: 20.6% !important;
  z-index: 74 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > .card-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > .card-inscription.card-inscription small {
  height: auto !important;
  min-height: clamp(13px, calc(var(--select-card-outer-h) * 0.052), 17px) !important;
  max-height: none !important;
  font-size: clamp(8px, calc(var(--select-card-outer-w) * 0.064), 10.5px) !important;
  line-height: 1.05 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > .card-inscription.card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > .card-inscription.card-inscription strong {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(15px, calc(var(--select-card-outer-w) * 0.132), 22px) !important;
  line-height: 0.98 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !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:not([hidden]) .character-option.character-option.character-option > span > em,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em {
    bottom: 16.15% !important;
    z-index: 112 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.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:not([hidden]) .character-option.character-option.character-option > span > .card-inscription.card-inscription {
    bottom: 21.9% !important;
  }
}

/* V1.27Beta-restore-preview-icons6: preview mode lives only in the outer slanted button. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeSkill#previewModeSkill.preview-mode-skill-tip.preview-skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeSkill#previewModeSkill.preview-mode-skill-tip.preview-skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill#previewModeSkill.preview-mode-skill-tip.preview-skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton:not([hidden]) + .preview-skill > #previewModeSkill#previewModeSkill.preview-mode-skill-tip.preview-skill-tip.inline-skill-name {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* V1.27Beta-restore-preview-icons7: final selector-card fit, three tabs, and thumbnail skill label polish. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  visibility: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.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.character-faction-tabs > button[hidden],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button.empty,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs > button.empty {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 0.76 !important;
  pointer-events: auto !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: 11.55% 8.85% 9.25% !important;
  background-position: center 52% !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 {
  left: 41.5% !important;
  right: 8.8% !important;
  bottom: 20.6% !important;
  z-index: 74 !important;
  gap: clamp(2px, calc(var(--select-card-outer-h) * 0.011), 4px) !important;
  overflow: visible !important;
}

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 small,
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 small {
  width: auto !important;
  max-width: 100% !important;
  min-height: clamp(13px, calc(var(--select-card-outer-h) * 0.052), 17px) !important;
  padding: clamp(2px, calc(var(--select-card-outer-h) * 0.009), 3px) clamp(5px, calc(var(--select-card-outer-w) * 0.043), 7px) !important;
  font-size: clamp(8px, calc(var(--select-card-outer-w) * 0.064), 10.5px) !important;
  line-height: 1.05 !important;
  color: var(--character-title-color, #f2c15a) !important;
  -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

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 strong,
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 strong {
  width: auto !important;
  max-width: 100% !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(15px, calc(var(--select-card-outer-w) * 0.132), 22px) !important;
  line-height: 0.98 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.96),
    0 0 10px rgba(0, 0, 0, 0.44) !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: 10.8% !important;
  right: 10.8% !important;
  bottom: 15.15% !important;
  z-index: 88 !important;
  height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  min-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  max-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  gap: clamp(4px, calc(var(--select-card-outer-w) * 0.032), 6px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option span > em > b.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option span > em > b.skill-tip.skill-tip {
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(3px, calc(var(--select-card-outer-w) * 0.026), 5px) !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 clamp(8px, calc(var(--select-card-outer-w) * 0.058), 12px) 1px clamp(7px, calc(var(--select-card-outer-w) * 0.05), 10px) !important;
  font-size: clamp(8px, calc(var(--select-card-outer-w) * 0.059), 10.5px) !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option span > em > b.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option span > em > b.skill-tip.skill-tip:not(.mode-tip) {
  border: 1px solid rgba(164, 221, 255, 0.96) !important;
  border-left: 3px solid rgba(70, 154, 218, 0.98) !important;
  color: #153047 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.98), transparent 48%),
    linear-gradient(90deg, rgba(244, 251, 255, 0.98), rgba(133, 211, 255, 0.9) 48%, rgba(233, 198, 97, 0.94)) !important;
  box-shadow:
    0 7px 15px rgba(18, 68, 112, 0.2),
    0 0 14px rgba(99, 200, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option span > em > b.skill-tip.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 span > em > b.skill-tip.skill-tip .skill-inline-icon {
  display: block !important;
  width: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  height: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  min-width: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  min-height: clamp(12px, calc(var(--select-card-outer-w) * 0.095), 17px) !important;
  object-fit: contain !important;
  align-self: center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option span > em > b.skill-tip.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 span > em > b.skill-tip.skill-tip .skill-inline-text {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1 !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-inscription.card-inscription small {
  font-size: clamp(12px, 1.65vh, 14px) !important;
  line-height: 1.05 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview .preview-inscription.card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview .preview-inscription.card-inscription strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(23px, 3.25vh, 28px) !important;
  line-height: 0.98 !important;
  transform: 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 .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: 11.7% 8.7% 8.8% !important;
    background-position: center 53% !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 {
    bottom: 16.15% !important;
    z-index: 90 !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 {
    bottom: 21.9% !important;
    left: 41% !important;
    right: 8.4% !important;
  }

  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 strong,
  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 strong {
    font-size: clamp(14px, calc(var(--select-card-outer-w) * 0.122), 19px) !important;
  }
}

/* V1.27Beta-restore-preview-icons12-final: final skill button geometry and color contract. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em {
  position: absolute !important;
  left: 10.8% !important;
  right: 10.8% !important;
  bottom: 15.65% !important;
  z-index: 120 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: clamp(3px, calc(var(--select-card-outer-h) * 0.014), 5px) !important;
  width: auto !important;
  height: auto !important;
  min-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  min-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  max-height: clamp(25px, calc(var(--select-card-outer-h) * 0.086), 32px) !important;
  margin: 0 !important;
  padding: 0 clamp(7px, calc(var(--select-card-outer-w) * 0.052), 10px) 1px !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important;
  font-size: clamp(8.5px, calc(var(--select-card-outer-w) * 0.064), 11px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !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:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  order: 1 !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(4px, calc(var(--select-card-outer-w) * 0.032), 6px) !important;
  border: 1px solid rgba(132, 210, 255, 0.96) !important;
  border-left: 3px solid rgba(46, 137, 213, 0.98) !important;
  color: #0f2c43 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(90deg, rgba(224, 248, 255, 0.98) 0%, rgba(76, 183, 244, 0.96) 32%, rgba(24, 112, 190, 0.98) 82%, rgba(237, 195, 88, 0.96) 100%) !important;
  box-shadow:
    0 7px 15px rgba(18, 68, 112, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  border-color: rgba(220, 238, 250, 0.96) !important;
  border-left-color: rgba(137, 177, 206, 0.98) !important;
  color: #24394a !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.96), transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(219, 236, 247, 0.94) 34%, rgba(160, 197, 222, 0.94) 82%, rgba(233, 197, 94, 0.92) 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-select-faction="villain"] > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-select-faction="villain"] > span > em > b.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  border-color: rgba(184, 153, 255, 0.92) !important;
  border-left-color: rgba(122, 78, 232, 0.98) !important;
  color: #f7f1ff !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(90deg, rgba(232, 226, 255, 0.96) 0%, rgba(112, 88, 216, 0.94) 34%, rgba(42, 27, 93, 0.98) 82%, rgba(225, 96, 117, 0.92) 100%) !important;
  text-shadow: 0 1px 3px rgba(18, 10, 42, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip {
  order: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon {
  position: static !important;
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
  width: 1.12em !important;
  height: 1.12em !important;
  min-width: 1.12em !important;
  min-height: 1.12em !important;
  max-width: 1.12em !important;
  max-height: 1.12em !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text {
  position: static !important;
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: inherit !important;
  transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Lollipopz"] > span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Lollipopz"] > span > em > b.mode-tip.mode-tip.mode-tip {
  border-color: rgba(255, 184, 220, 0.92) !important;
  border-left-color: rgba(255, 142, 198, 0.98) !important;
  color: #f08fc4 !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.98), transparent 44%),
    linear-gradient(90deg, rgba(255, 244, 251, 0.98) 0%, rgba(255, 190, 225, 0.92) 66%, rgba(189, 228, 255, 0.86) 100%) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Rhasta"] > span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Rhasta"] > span > em > b.mode-tip.mode-tip.mode-tip {
  border-color: rgba(255, 214, 120, 0.96) !important;
  border-left-color: rgba(72, 188, 116, 0.98) !important;
  color: #fffbe8 !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 250, 218, 0.8), transparent 44%),
    linear-gradient(90deg, rgba(88, 198, 121, 0.98) 0%, rgba(235, 181, 68, 0.94) 68%, rgba(20, 70, 43, 0.98) 100%) !important;
  text-shadow:
    0 1px 3px rgba(22, 58, 28, 0.8),
    0 0 9px rgba(255, 226, 126, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.mode-tip.mode-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option[data-character="Xiaoyang"] > span > em > b.mode-tip.mode-tip.mode-tip {
  border-color: rgba(104, 213, 255, 0.94) !important;
  border-left-color: rgba(78, 153, 255, 0.98) !important;
  color: #e9fbff !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(240, 253, 255, 0.72), transparent 44%),
    linear-gradient(90deg, rgba(55, 104, 210, 0.96) 0%, rgba(89, 216, 255, 0.92) 68%, rgba(33, 46, 111, 0.98) 100%) !important;
  text-shadow:
    0 1px 3px rgba(16, 35, 78, 0.8),
    0 0 10px rgba(106, 226, 255, 0.36) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewSkill#previewSkill.preview-skill-tip.skill-tip.inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  width: clamp(112px, 9vw, 148px) !important;
  min-width: clamp(112px, 9vw, 148px) !important;
  max-width: clamp(112px, 9vw, 148px) !important;
  height: clamp(30px, 3.25vh, 36px) !important;
  min-height: clamp(30px, 3.25vh, 36px) !important;
  max-height: clamp(30px, 3.25vh, 36px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview.character-preview #previewModeButton#previewModeButton.preview-mode-button:not([hidden]) {
  left: 0 !important;
  top: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  transform: translateY(calc(-100% - 7px)) !important;
}