/* V1.27Beta-select-final1: final visible layer for character select controls. */

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .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 > button[data-select-faction-tab] {
  border: 1px solid rgba(214, 228, 238, 0.78) !important;
  color: rgba(39, 58, 72, 0.82) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(225, 237, 246, 0.68)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), rgba(184, 204, 218, 0.2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 7px 16px rgba(37, 61, 76, 0.12) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

/* V1.27Beta-select-final31: richer faction frames, left-shifted names, and clean standalone faction tabs. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs {
  padding: 0 !important;
  gap: clamp(8px, 1.2vw, 12px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  outline: 0 !important;
  background-clip: padding-box !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"] {
  border-color: rgba(225, 197, 116, 0.58) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 48%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 246, 213, 0.88) 42%, rgba(225, 242, 255, 0.78) 72%, rgba(144, 205, 255, 0.62) 100%) !important;
  box-shadow:
    0 7px 15px rgba(78, 117, 150, 0.11),
    0 0 12px rgba(216, 180, 86, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  color: #4f3a10 !important;
  -webkit-text-fill-color: #4f3a10 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"] {
  border-color: rgba(200, 211, 221, 0.72) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 48%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 251, 0.9) 46%, rgba(222, 230, 238, 0.82) 100%) !important;
  box-shadow:
    0 7px 15px rgba(65, 78, 92, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  color: #34485c !important;
  -webkit-text-fill-color: #34485c !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"] {
  border-color: rgba(171, 38, 55, 0.68) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 96, 112, 0.42), transparent 48%),
    linear-gradient(102deg, rgba(38, 6, 10, 0.96) 0%, rgba(83, 12, 20, 0.9) 46%, rgba(16, 6, 9, 0.94) 100%) !important;
  box-shadow:
    0 7px 16px rgba(34, 3, 7, 0.22),
    0 0 13px rgba(190, 36, 56, 0.18),
    inset 0 1px 0 rgba(255, 126, 140, 0.22) !important;
  color: #ffe6e9 !important;
  -webkit-text-fill-color: #ffe6e9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected {
  border-color: rgba(213, 170, 62, 0.82) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 46%),
    linear-gradient(102deg, #fffef8 0%, #ffe9a7 45%, #d6f1ff 72%, #78bfff 100%) !important;
  box-shadow:
    0 8px 18px rgba(91, 128, 160, 0.16),
    0 0 17px rgba(217, 178, 72, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  color: #44300b !important;
  -webkit-text-fill-color: #44300b !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected {
  border-color: rgba(184, 197, 209, 0.9) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 46%),
    linear-gradient(102deg, #ffffff 0%, #f3f6f8 46%, #d9e1e8 100%) !important;
  box-shadow:
    0 8px 18px rgba(65, 78, 92, 0.13),
    0 0 14px rgba(221, 228, 236, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  color: #2e4358 !important;
  -webkit-text-fill-color: #2e4358 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"].selected {
  border-color: rgba(246, 64, 82, 0.88) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 146, 155, 0.62), transparent 46%),
    linear-gradient(102deg, #2b070d 0%, #a5162a 54%, #120407 100%) !important;
  box-shadow:
    0 8px 18px rgba(50, 3, 8, 0.25),
    0 0 18px rgba(232, 38, 58, 0.28),
    inset 0 1px 0 rgba(255, 148, 154, 0.32) !important;
  color: #fff1f2 !important;
  -webkit-text-fill-color: #fff1f2 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] {
  --character-title-color: #f2c15a !important;
  --card-title-ink: #c69a34 !important;
  --card-name-line: rgba(218, 176, 78, 0.62) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] {
  --character-title-color: #ff7c84 !important;
  --card-name-bg: rgba(35, 8, 12, 0.9) !important;
  --card-name-line: rgba(218, 52, 68, 0.7) !important;
  --card-name-ink: #fff2f2 !important;
  --card-title-ink: #ff9098 !important;
  --skill-plaque-text: #fff1f2 !important;
  --soft-faction-chip-text: #fff1f2 !important;
  --soft-faction-chip-line: rgba(224, 54, 70, 0.76) !important;
  --soft-faction-chip-edge: rgba(120, 12, 22, 0.82) !important;
  --soft-faction-chip-glow: rgba(224, 54, 70, 0.26) !important;
  --soft-faction-chip-bg:
    radial-gradient(circle at 18% 0%, rgba(255, 132, 142, 0.38), transparent 45%),
    linear-gradient(102deg, rgba(48, 8, 12, 0.96) 0%, rgba(120, 18, 28, 0.9) 58%, rgba(22, 5, 8, 0.95) 100%) !important;
  --soft-faction-icon-bg:
    radial-gradient(circle at 35% 22%, rgba(255, 116, 128, 0.82), rgba(132, 18, 30, 0.9) 58%, rgba(35, 7, 11, 0.94) 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"]) .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"]) .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"]) > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"]) > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"])::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]:not([data-character="Desire"])::before {
  background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.27Beta-select-final31-luminary-oldframe1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 3px 7px rgba(86, 61, 16, 0.18))
    drop-shadow(0 0 11px rgba(84, 177, 255, 0.22))
    drop-shadow(0 0 8px rgba(231, 181, 66, 0.16)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"]::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="villain"]::before {
  background: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.27Beta-select-final31-villain-blackred1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 3px 8px rgba(36, 4, 8, 0.32))
    drop-shadow(0 0 12px rgba(214, 36, 54, 0.28)) !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
  left: 40.2% !important;
  right: 11.2% !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .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 > button[data-select-faction-tab="luminary"].selected {
  border-color: rgba(220, 169, 58, 0.96) !important;
  color: #5f4212 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.98), transparent 46%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 251, 243, 0.96) 58%, rgba(236, 198, 91, 0.94) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(255, 236, 154, 0.28),
    0 9px 18px rgba(178, 137, 40, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .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 > button[data-select-faction-tab="neutral"].selected {
  border-color: rgba(78, 199, 184, 0.96) !important;
  color: #0d4b53 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(237, 255, 250, 0.98), transparent 46%),
    linear-gradient(90deg, rgba(231, 255, 249, 0.98) 0%, rgba(103, 212, 214, 0.9) 52%, rgba(68, 160, 232, 0.9) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 0 1px rgba(111, 232, 218, 0.26),
    0 9px 18px rgba(24, 121, 150, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .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 > button[data-select-faction-tab="villain"].selected {
  border-color: rgba(255, 87, 80, 0.98) !important;
  color: #fff0ed !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 110, 94, 0.72), transparent 43%),
    linear-gradient(90deg, rgba(72, 14, 20, 0.98) 0%, rgba(164, 28, 39, 0.96) 54%, rgba(20, 14, 18, 0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 176, 154, 0.38),
    0 0 0 1px rgba(255, 78, 64, 0.26),
    0 9px 18px rgba(72, 10, 16, 0.3) !important;
  text-shadow: 0 1px 3px rgba(24, 5, 8, 0.86) !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;
  }
}

/* V1.27Beta-select-final29: beat data-skill-name-size rules for every mobile normal skill chip. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] {
    box-sizing: border-box !important;
    display: inline-grid !important;
    grid-template-columns: auto minmax(0, max-content) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, calc(var(--select-card-outer-w, 150px) * 0.032), 6px) !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: clamp(7px, calc(var(--select-card-outer-w, 150px) * 0.052), 10px) !important;
    padding-right: clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.072), 14px) !important;
    font-size: clamp(11px, calc(var(--select-card-outer-w, 150px) * 0.078), 13.5px) !important;
    line-height: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] > .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] > .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] > .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] > .skill-inline-icon.skill-inline-icon {
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    height: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    min-width: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    min-height: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    max-width: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    max-height: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] > .skill-inline-text.skill-inline-text,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] > .skill-inline-text.skill-inline-text,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] > .skill-inline-text.skill-inline-text,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size] > .skill-inline-text.skill-inline-text {
    font-size: inherit !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,
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.6% !important;
  right: 10.6% !important;
  bottom: 15.2% !important;
  z-index: 130 !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;
  height: auto !important;
  min-height: clamp(26px, calc(var(--select-card-outer-h) * 0.09), 34px) !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: 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,
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;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: clamp(26px, calc(var(--select-card-outer-h) * 0.092), 34px) !important;
  min-height: clamp(26px, calc(var(--select-card-outer-h) * 0.092), 34px) !important;
  max-height: clamp(26px, calc(var(--select-card-outer-h) * 0.092), 34px) !important;
  margin: 0 !important;
  padding: 0 clamp(8px, calc(var(--select-card-outer-w) * 0.056), 11px) 1px !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%) !important;
  font-size: clamp(9px, calc(var(--select-card-outer-w) * 0.067), 11.6px) !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;
  isolation: isolate !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 #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 {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(5px, calc(var(--select-card-outer-w, 120px) * 0.044), 8px) !important;
  border: 1px solid rgba(232, 196, 103, 0.95) !important;
  border-left: 3px solid rgba(199, 151, 42, 0.98) !important;
  color: #243542 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.98), transparent 44%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 253, 255, 0.97) 55%, rgba(235, 243, 247, 0.96) 80%, rgba(235, 195, 83, 0.96) 100%) !important;
  box-shadow:
    0 7px 14px rgba(65, 76, 84, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 10px 0 18px rgba(255, 244, 202, 0.2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !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) {
  order: 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.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;
  align-content: 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,
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 {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
  width: 1.36em !important;
  height: 1.36em !important;
  min-width: 1.36em !important;
  min-height: 1.36em !important;
  max-width: 1.36em !important;
  max-height: 1.36em !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 1px 1px 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 > 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,
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;
  justify-self: center !important;
  align-self: 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;
  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 #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-select-final2: beat older high-specificity select rules. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab] {
  border: 1px solid rgba(214, 228, 238, 0.78) !important;
  color: rgba(39, 58, 72, 0.82) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(225, 237, 246, 0.68)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), rgba(184, 204, 218, 0.2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 7px 16px rgba(37, 61, 76, 0.12) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected {
  border-color: rgba(220, 169, 58, 0.96) !important;
  color: #5f4212 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.98), transparent 46%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 251, 243, 0.96) 58%, rgba(236, 198, 91, 0.94) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(255, 236, 154, 0.28),
    0 9px 18px rgba(178, 137, 40, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected {
  border-color: rgba(78, 199, 184, 0.96) !important;
  color: #0d4b53 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(237, 255, 250, 0.98), transparent 46%),
    linear-gradient(90deg, rgba(231, 255, 249, 0.98) 0%, rgba(103, 212, 214, 0.9) 52%, rgba(68, 160, 232, 0.9) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 0 1px rgba(111, 232, 218, 0.26),
    0 9px 18px rgba(24, 121, 150, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="villain"].selected {
  border-color: rgba(255, 87, 80, 0.98) !important;
  color: #fff0ed !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 110, 94, 0.72), transparent 43%),
    linear-gradient(90deg, rgba(72, 14, 20, 0.98) 0%, rgba(164, 28, 39, 0.96) 54%, rgba(20, 14, 18, 0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 176, 154, 0.38),
    0 0 0 1px rgba(255, 78, 64, 0.26),
    0 9px 18px rgba(72, 10, 16, 0.3) !important;
  text-shadow: 0 1px 3px rgba(24, 5, 8, 0.86) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill.preview-skill-tip {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(5px, calc(var(--select-card-outer-w, 120px) * 0.044), 8px) !important;
  border: 1px solid rgba(232, 196, 103, 0.95) !important;
  border-left: 3px solid rgba(199, 151, 42, 0.98) !important;
  color: #243542 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.98), transparent 44%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 253, 255, 0.97) 55%, rgba(235, 243, 247, 0.96) 80%, rgba(235, 195, 83, 0.96) 100%) !important;
  box-shadow:
    0 7px 14px rgba(65, 76, 84, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 10px 0 18px rgba(255, 244, 202, 0.2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill.preview-skill-tip > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill.preview-skill-tip > .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;
  justify-self: center !important;
  align-self: 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;
  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;
}

/* V1.27Beta-select-final3: preview skill must match even before JS restores classes. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill {
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(5px, 0.65vh, 8px) !important;
  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;
  border: 1px solid rgba(232, 196, 103, 0.95) !important;
  border-left: 3px solid rgba(199, 151, 42, 0.98) !important;
  color: #243542 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.98), transparent 44%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 253, 255, 0.97) 55%, rgba(235, 243, 247, 0.96) 80%, rgba(235, 195, 83, 0.96) 100%) !important;
  box-shadow:
    0 7px 14px rgba(65, 76, 84, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 10px 0 18px rgba(255, 244, 202, 0.2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* V1.27Beta-select-final4: keep icon readable while giving text the remaining chip width. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill {
  grid-template-columns: auto minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(4px, calc(var(--select-card-outer-w, 120px) * 0.034), 6px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  padding-left: clamp(7px, calc(var(--select-card-outer-w) * 0.048), 10px) !important;
  padding-right: clamp(7px, calc(var(--select-card-outer-w) * 0.048), 10px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill > .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill > .skill-inline-icon.skill-inline-icon {
  justify-self: end !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;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill > .skill-inline-text.skill-inline-text {
  justify-self: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: left !important;
}

/* V1.27Beta-select-final5: tighter mobile thumb chip spacing for readable skill names. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  gap: clamp(3px, calc(var(--select-card-outer-w, 120px) * 0.028), 5px) !important;
  padding-left: clamp(5px, calc(var(--select-card-outer-w) * 0.038), 8px) !important;
  padding-right: clamp(6px, calc(var(--select-card-outer-w) * 0.04), 8px) !important;
}

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

/* V1.27Beta-select-final6: last mobile thumb text breathing room. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  gap: clamp(3px, calc(var(--select-card-outer-w, 120px) * 0.024), 4px) !important;
  padding-left: clamp(4px, calc(var(--select-card-outer-w) * 0.032), 7px) !important;
  padding-right: clamp(5px, calc(var(--select-card-outer-w) * 0.036), 7px) !important;
}

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

/* V1.27Beta-select-final7: content-fit desktop chips and softer champagne-gold skill glow. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill {
  border-color: rgba(224, 195, 126, 0.86) !important;
  border-left-color: rgba(197, 161, 74, 0.9) !important;
  color: #263744 !important;
  background:
    radial-gradient(ellipse at 14% -16%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.66) 36%, transparent 64%),
    linear-gradient(103deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 253, 249, 0.98) 43%, rgba(247, 242, 228, 0.97) 68%, rgba(237, 221, 177, 0.94) 88%, rgba(222, 187, 100, 0.88) 100%) !important;
  box-shadow:
    0 7px 14px rgba(66, 73, 78, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 9px 0 18px rgba(255, 248, 226, 0.28),
    inset -10px 0 18px rgba(222, 187, 100, 0.12) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected {
  border-color: rgba(219, 185, 102, 0.94) !important;
  color: #62491a !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.99), transparent 48%),
    linear-gradient(96deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 250, 239, 0.97) 52%, rgba(239, 222, 174, 0.94) 80%, rgba(219, 181, 90, 0.88) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 1px rgba(255, 242, 194, 0.24),
    0 9px 18px rgba(160, 128, 58, 0.18) !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em {
    align-items: flex-start !important;
    gap: clamp(5px, calc(var(--select-card-outer-h, 280px) * 0.018), 8px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip {
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(92%, 190px) !important;
    height: clamp(32px, calc(var(--select-card-outer-h, 280px) * 0.105), 40px) !important;
    min-height: clamp(32px, calc(var(--select-card-outer-h, 280px) * 0.105), 40px) !important;
    max-height: clamp(32px, calc(var(--select-card-outer-h, 280px) * 0.105), 40px) !important;
    padding: 0 clamp(12px, calc(var(--select-card-outer-w, 150px) * 0.075), 16px) 1px clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.064), 14px) !important;
    font-size: clamp(13.5px, calc(var(--select-card-outer-w, 150px) * 0.086), 17px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
    grid-template-columns: auto auto !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: clamp(6px, calc(var(--select-card-outer-w, 150px) * 0.04), 8px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip.mode-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip.mode-tip {
    grid-template-columns: auto !important;
    justify-content: center !important;
    justify-items: center !important;
    padding-right: clamp(14px, calc(var(--select-card-outer-w, 150px) * 0.086), 18px) !important;
    padding-left: clamp(13px, calc(var(--select-card-outer-w, 150px) * 0.08), 17px) !important;
  }

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

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

/* V1.27Beta-select-final8: calmer free-hero faction color. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected {
  border-color: rgba(140, 215, 205, 0.86) !important;
  color: #255263 !important;
  background:
    radial-gradient(circle at 17% 0%, rgba(255, 255, 255, 0.98), transparent 48%),
    linear-gradient(96deg, rgba(250, 255, 255, 0.98) 0%, rgba(232, 250, 255, 0.96) 45%, rgba(199, 235, 244, 0.93) 72%, rgba(176, 228, 207, 0.88) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(222, 255, 248, 0.24),
    0 9px 18px rgba(77, 137, 150, 0.16) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

/* V1.27Beta-select-final9: larger, truly centered faction tab labels. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab] {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  min-height: clamp(30px, 3.4vh, 42px) !important;
  padding: 0 clamp(14px, 2vw, 28px) !important;
  font-size: clamp(14px, 1.05vw, 18px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab] {
    min-height: clamp(36px, 3.8vh, 48px) !important;
    font-size: clamp(16px, 1.05vw, 20px) !important;
    padding: 0 clamp(22px, 2.4vw, 38px) !important;
  }
}

/* V1.27Beta-select-final10: opportunity/artifact card descriptions are no longer grey. */
html body:not(.maintenance-mode) .opportunity-card .opportunity-copy small,
html body:not(.maintenance-mode) .artifact-card .opportunity-copy small,
html body:not(.maintenance-mode) .artifact-card .artifact-copy small,
html body:not(.maintenance-mode) .artifact-preview-description,
html body:not(.maintenance-mode) #opportunityDescription,
html body:not(.maintenance-mode) #artifactDescription {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.86),
    0 0 10px rgba(255, 255, 255, 0.18) !important;
}

html body:not(.maintenance-mode) .opportunity-library-note {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
  opacity: 1 !important;
}

/* V1.27Beta-select-final11: faction tabs and normal skill chips share faction palettes. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected {
  border-color: rgba(229, 194, 91, 0.94) !important;
  color: #24405b !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.99), transparent 48%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 253, 242, 0.98) 33%, rgba(241, 218, 146, 0.94) 62%, rgba(211, 235, 255, 0.92) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 1px rgba(255, 242, 194, 0.3),
    0 9px 18px rgba(74, 122, 166, 0.16),
    0 0 16px rgba(229, 194, 91, 0.18) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected {
  border-color: rgba(181, 194, 204, 0.94) !important;
  color: #334554 !important;
  background:
    radial-gradient(circle at 17% 0%, rgba(255, 255, 255, 1), transparent 48%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 249, 251, 0.98) 44%, rgba(225, 232, 238, 0.94) 72%, rgba(188, 200, 211, 0.9) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 9px 18px rgba(79, 94, 106, 0.15),
    0 0 14px rgba(214, 225, 234, 0.18) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill {
  border-color: rgba(224, 188, 82, 0.94) !important;
  border-left-color: rgba(98, 177, 232, 0.96) !important;
  color: #243d54 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.99), transparent 43%),
    linear-gradient(103deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 253, 244, 0.98) 34%, rgba(242, 221, 153, 0.94) 64%, rgba(214, 238, 255, 0.92) 100%) !important;
  box-shadow:
    0 8px 16px rgba(54, 92, 124, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 10px 0 18px rgba(218, 239, 255, 0.2),
    inset -10px 0 18px rgba(238, 210, 130, 0.18) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewSkill#previewSkill#previewSkill {
  border-color: rgba(177, 190, 201, 0.92) !important;
  border-left-color: rgba(137, 153, 166, 0.96) !important;
  color: #334654 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 1), transparent 43%),
    linear-gradient(103deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.98) 42%, rgba(228, 235, 240, 0.94) 72%, rgba(194, 207, 218, 0.9) 100%) !important;
  box-shadow:
    0 8px 16px rgba(68, 84, 98, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 9px 0 18px rgba(255, 255, 255, 0.22),
    inset -10px 0 18px rgba(181, 194, 204, 0.16) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* V1.27Beta-select-final12: skill-name chips size from content, with slant-safe symmetric spacing. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip {
  --select-skill-chip-slant: clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.07), 14px);
  --select-skill-chip-pad-x: clamp(12px, calc(var(--select-card-outer-w, 150px) * 0.086), 18px);
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 4px) !important;
  padding-left: var(--select-skill-chip-pad-x) !important;
  padding-right: calc(var(--select-skill-chip-pad-x) + var(--select-skill-chip-slant)) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--select-skill-chip-slant)) 100%, 0 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  grid-template-columns: auto minmax(0, max-content) !important;
  gap: clamp(6px, calc(var(--select-card-outer-w, 150px) * 0.045), 9px) !important;
  justify-content: center !important;
  justify-items: center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill {
  --preview-skill-chip-slant: 14px;
  --preview-skill-chip-pad-x: clamp(15px, 1.4vw, 22px);
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(82vw, 280px) !important;
  padding-left: var(--preview-skill-chip-pad-x) !important;
  padding-right: calc(var(--preview-skill-chip-pad-x) + var(--preview-skill-chip-slant)) !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--preview-skill-chip-slant)) 100%, 0 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview #previewSkill#previewSkill#previewSkill:not([hidden]) {
  grid-template-columns: auto minmax(0, max-content) !important;
  gap: clamp(7px, 0.7vw, 10px) !important;
}

/* V1.27Beta-select-final13: Desire uses the same fitted frame box, and desktop names/titles read larger. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Desire"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Desire"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Desire"] > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Desire"] > span::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.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;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  background: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.27Beta-select-final14-desire-frame-samebbox1") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview .preview-title.preview-title,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview .preview-title.preview-title,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview .preview-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview .preview-inscription.card-inscription small {
  color: var(--preview-title-color, var(--character-title-color, #f2c15a)) !important;
  -webkit-text-fill-color: var(--preview-title-color, var(--character-title-color, #f2c15a)) !important;
  border-color: var(--preview-title-color, var(--character-title-color, rgba(246, 200, 95, 0.95))) !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small {
    font-size: clamp(12px, calc(var(--select-card-outer-w, 170px) * 0.084), 16px) !important;
    line-height: 1.06 !important;
    padding: clamp(3px, calc(var(--select-card-outer-h, 300px) * 0.012), 5px) clamp(7px, calc(var(--select-card-outer-w, 170px) * 0.056), 11px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong {
    font-size: clamp(23px, calc(var(--select-card-outer-w, 170px) * 0.18), 34px) !important;
    line-height: 0.96 !important;
  }
}

/* V1.27Beta-select-final18: mobile Desire keeps the hybrid frame; Luminary normal skills are white-first. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill {
  border-color: rgba(222, 188, 90, 0.92) !important;
  border-left-color: rgba(246, 221, 145, 0.96) !important;
  color: #2f3440 !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 1), transparent 46%),
    linear-gradient(103deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 252, 0.99) 42%, rgba(252, 248, 235, 0.98) 75%, rgba(241, 220, 154, 0.9) 100%) !important;
  box-shadow:
    0 8px 16px rgba(58, 63, 75, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 9px 0 16px rgba(255, 255, 255, 0.26),
    inset -9px 0 16px rgba(223, 188, 90, 0.14),
    0 0 12px rgba(239, 210, 132, 0.15) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

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

/* V1.27Beta-select-final16: mobile thumbnail skill chips reserve enough room for text and the slanted edge. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em {
    left: 8.2% !important;
    right: auto !important;
    width: calc(100% - 16.4%) !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip {
    --select-skill-chip-slant: clamp(9px, calc(var(--select-card-outer-w, 150px) * 0.062), 13px);
    --select-skill-chip-pad-x: clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.074), 15px);
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: calc(var(--select-card-outer-w, 150px) * 0.88) !important;
    padding-left: var(--select-skill-chip-pad-x) !important;
    padding-right: calc(var(--select-skill-chip-pad-x) + var(--select-skill-chip-slant) + 5px) !important;
    overflow: visible !important;
  }

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip.mode-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.mode-tip.mode-tip.mode-tip.mode-tip {
    grid-template-columns: max-content !important;
    padding-left: clamp(11px, calc(var(--select-card-outer-w, 150px) * 0.08), 16px) !important;
    padding-right: clamp(22px, calc(var(--select-card-outer-w, 150px) * 0.15), 30px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text {
    display: block !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* V1.27Beta-select-final17: mobile expanded-card mode skill aligns with the normal skill chip. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-skill.preview-skill,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-skill.preview-skill {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    justify-items: start !important;
    gap: clamp(5px, 0.72vh, 8px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill#previewModeSkill.preview-mode-skill-tip:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill#previewModeSkill.preview-mode-skill-tip:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewSkill#previewSkill.preview-skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewSkill#previewSkill.preview-skill-tip {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    align-self: flex-start !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    max-width: min(78vw, 286px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill#previewModeSkill.preview-mode-skill-tip:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill#previewModeSkill.preview-mode-skill-tip:not([hidden]) {
    order: 1 !important;
    display: inline-grid !important;
    visibility: visible !important;
    width: max-content !important;
    min-width: 0 !important;
    padding-left: clamp(13px, 3.4vw, 18px) !important;
    padding-right: clamp(26px, 7vw, 36px) !important;
    overflow: visible !important;
    text-overflow: clip !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%) !important;
  }

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

/* V1.27Beta-select-final19: mobile profession codex keeps class art visible and shifted left. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card {
    --profession-bg-position: 62% top !important;
    --profession-bg-size: 146% auto !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card[data-profession="shaman"] {
    --profession-bg-position: 60% top !important;
    --profession-bg-size: 142% auto !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card[data-profession="spellbreaker"] {
    --profession-bg-position: 63% top !important;
    --profession-bg-size: 144% auto !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card .profession-codex-bg {
    background:
      linear-gradient(90deg, rgba(2, 5, 11, 0.72) 0%, rgba(2, 5, 11, 0.38) 45%, rgba(2, 5, 11, 0.08) 100%),
      linear-gradient(180deg, rgba(3, 6, 12, 0), rgba(3, 6, 12, 0.58)),
      var(--profession-bg) var(--profession-bg-position) / var(--profession-bg-size) no-repeat,
      rgba(5, 9, 16, 0.96) !important;
  }
}

/* V1.27Beta-select-final20: mobile thumbnail names sit lower; skill chips fit short and long names. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
    bottom: 18.4% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
    width: max-content !important;
    min-width: max-content !important;
    max-width: calc(var(--select-card-outer-w, 150px) * 0.98) !important;
    padding-left: clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.072), 15px) !important;
    padding-right: clamp(22px, calc(var(--select-card-outer-w, 150px) * 0.15), 30px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="short"],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="short"] {
    padding-right: clamp(26px, calc(var(--select-card-outer-w, 150px) * 0.18), 36px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="long"],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="long"] {
    gap: clamp(4px, calc(var(--select-card-outer-w, 150px) * 0.028), 6px) !important;
    padding-left: clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.058), 12px) !important;
    padding-right: clamp(23px, calc(var(--select-card-outer-w, 150px) * 0.152), 31px) !important;
    font-size: clamp(11px, calc(var(--select-card-outer-w, 150px) * 0.078), 14.5px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text {
    display: inline-block !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* V1.27Beta-select-final21: thumbnail names use real lower placement; skill-name chips reserve exact room. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
  top: auto !important;
  bottom: clamp(38px, calc(var(--select-card-outer-h, 280px) * 0.154), 58px) !important;
  transform: none !important;
  align-content: end !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  --select-skill-chip-slant: clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.068), 15px);
  --select-skill-chip-pad-x: clamp(11px, calc(var(--select-card-outer-w, 150px) * 0.074), 16px);
  display: inline-grid !important;
  grid-template-columns: auto max-content !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: calc(var(--select-card-outer-w, 150px) * 1.08) !important;
  padding-left: var(--select-skill-chip-pad-x) !important;
  padding-right: calc(var(--select-skill-chip-pad-x) + var(--select-skill-chip-slant) + 4px) !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="short"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="short"] {
  padding-right: calc(var(--select-skill-chip-pad-x) + var(--select-skill-chip-slant) + 0.9em) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-length="4"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-length="4"] {
  max-width: calc(var(--select-card-outer-w, 150px) * 1.14) !important;
  padding-right: calc(var(--select-skill-chip-pad-x) + var(--select-skill-chip-slant) + 6px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="long"]:not([data-skill-name-length="4"]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="long"]:not([data-skill-name-length="4"]) {
  gap: clamp(4px, calc(var(--select-card-outer-w, 150px) * 0.026), 6px) !important;
  max-width: calc(var(--select-card-outer-w, 150px) * 1.18) !important;
  padding-left: clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.052), 12px) !important;
  padding-right: clamp(24px, calc(var(--select-card-outer-w, 150px) * 0.16), 33px) !important;
  font-size: clamp(10.5px, calc(var(--select-card-outer-w, 150px) * 0.073), 14px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text {
  display: inline-block !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: pre !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
    bottom: clamp(33px, calc(var(--select-card-outer-h, 260px) * 0.142), 48px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
    max-width: calc(var(--select-card-outer-w, 150px) * 1.12) !important;
  }
}

/* V1.27Beta-select-final22: thumbnail title/name return to the right middle; normal skill chip is smaller. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
  left: 43% !important;
  right: 8.4% !important;
  top: 50% !important;
  bottom: auto !important;
  display: grid !important;
  align-content: center !important;
  justify-items: end !important;
  gap: clamp(7px, calc(var(--select-card-outer-h, 280px) * 0.028), 11px) !important;
  transform: translateY(-50%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription strong {
  justify-self: end !important;
  margin: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  --select-skill-chip-slant: clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.054), 12px);
  --select-skill-chip-pad-x: clamp(8px, calc(var(--select-card-outer-w, 150px) * 0.056), 12px);
  grid-template-columns: auto max-content !important;
  gap: clamp(3px, calc(var(--select-card-outer-w, 150px) * 0.026), 5px) !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: calc(var(--select-card-outer-w, 150px) * 0.98) !important;
  height: clamp(20px, calc(var(--select-card-outer-h, 280px) * 0.07), 28px) !important;
  min-height: clamp(20px, calc(var(--select-card-outer-h, 280px) * 0.07), 28px) !important;
  max-height: clamp(20px, calc(var(--select-card-outer-h, 280px) * 0.07), 28px) !important;
  padding-left: var(--select-skill-chip-pad-x) !important;
  padding-right: calc(var(--select-skill-chip-pad-x) + var(--select-skill-chip-slant) + 2px) !important;
  font-size: clamp(8.5px, calc(var(--select-card-outer-w, 150px) * 0.062), 12.5px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="short"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="short"] {
  padding-right: calc(var(--select-skill-chip-pad-x) + var(--select-skill-chip-slant) + 0.72em) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="long"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip)[data-skill-name-size="long"] {
  max-width: calc(var(--select-card-outer-w, 150px) * 1.04) !important;
  padding-left: clamp(7px, calc(var(--select-card-outer-w, 150px) * 0.048), 10px) !important;
  padding-right: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.122), 26px) !important;
  font-size: clamp(8.1px, calc(var(--select-card-outer-w, 150px) * 0.058), 11.8px) !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) > .skill-inline-text.skill-inline-text {
  font-size: inherit !important;
  line-height: 1 !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > .card-inscription.card-inscription {
    left: 42.4% !important;
    right: 7.8% !important;
    top: 49.2% !important;
    gap: clamp(6px, calc(var(--select-card-outer-h, 260px) * 0.026), 9px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
    max-width: calc(var(--select-card-outer-w, 150px) * 1.02) !important;
  }
}

/* V1.27Beta-select-final23: Desire frame is shifted down/right and enlarged proportionally. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame {
  transform: translate(2.1%, 2.8%) scale(1.055) !important;
  transform-origin: 50% 50% !important;
  background: url("assets/ui/character-card-frame-desire-hybrid-complete-v2.png?v=V1.27Beta-select-final23-desire-frame-shift-scale1") center / 100% 100% no-repeat !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame {
    transform: translate(2.5%, 3.1%) scale(1.07) !important;
  }
}

/* V1.27Beta-select-final24: soft faction palettes and matching special-mode chips. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] {
  --character-title-color: #c8f1ff !important;
  --card-frame-primary: rgba(223, 248, 255, 0.98) !important;
  --card-frame-secondary: rgba(153, 219, 247, 0.84) !important;
  --card-frame-main: #dff8ff !important;
  --card-frame-soft: rgba(160, 225, 250, 0.78) !important;
  --card-frame-dark: rgba(70, 120, 150, 0.52) !important;
  --card-frame-gem: #b7eeff !important;
  --card-frame-shadow: rgba(94, 182, 226, 0.2) !important;
  --card-name-bg: rgba(235, 250, 255, 0.9) !important;
  --card-name-line: rgba(153, 218, 246, 0.62) !important;
  --card-name-ink: #123c5a !important;
  --card-title-ink: #5daed0 !important;
  --skill-plaque-text: #123b5a !important;
  --soft-faction-chip-text: #123b5a !important;
  --soft-faction-chip-line: rgba(176, 229, 252, 0.86) !important;
  --soft-faction-chip-edge: rgba(101, 184, 229, 0.78) !important;
  --soft-faction-chip-glow: rgba(112, 199, 242, 0.22) !important;
  --soft-faction-chip-bg:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 45%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 251, 255, 0.96) 42%, rgba(207, 239, 255, 0.9) 72%, rgba(166, 221, 249, 0.86) 100%) !important;
  --soft-faction-icon-bg:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.98), rgba(224, 246, 255, 0.86) 54%, rgba(150, 218, 249, 0.82) 100%) !important;
  --soft-faction-frame-filter:
    drop-shadow(0 3px 7px rgba(29, 82, 118, 0.18))
    drop-shadow(0 0 10px rgba(143, 224, 255, 0.24))
    hue-rotate(174deg)
    saturate(0.64)
    brightness(1.14) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] {
  --character-title-color: #f3d5e7 !important;
  --card-frame-primary: rgba(255, 235, 247, 0.98) !important;
  --card-frame-secondary: rgba(219, 225, 235, 0.9) !important;
  --card-frame-main: #ffe4f1 !important;
  --card-frame-soft: rgba(225, 229, 238, 0.86) !important;
  --card-frame-dark: rgba(126, 85, 110, 0.42) !important;
  --card-frame-gem: #f8d7e8 !important;
  --card-frame-shadow: rgba(215, 135, 181, 0.18) !important;
  --card-name-bg: rgba(255, 241, 249, 0.9) !important;
  --card-name-line: rgba(215, 177, 203, 0.64) !important;
  --card-name-ink: #5d314b !important;
  --card-title-ink: #a66a89 !important;
  --skill-plaque-text: #5d314b !important;
  --soft-faction-chip-text: #5d314b !important;
  --soft-faction-chip-line: rgba(226, 198, 216, 0.88) !important;
  --soft-faction-chip-edge: rgba(188, 151, 176, 0.76) !important;
  --soft-faction-chip-glow: rgba(212, 142, 184, 0.18) !important;
  --soft-faction-chip-bg:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 45%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 241, 249, 0.96) 42%, rgba(238, 225, 235, 0.92) 72%, rgba(213, 218, 229, 0.9) 100%) !important;
  --soft-faction-icon-bg:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.99), rgba(255, 232, 246, 0.86) 52%, rgba(214, 219, 229, 0.86) 100%) !important;
  --soft-faction-frame-filter:
    drop-shadow(0 3px 7px rgba(80, 47, 68, 0.15))
    drop-shadow(0 0 10px rgba(236, 189, 216, 0.22))
    hue-rotate(300deg)
    saturate(0.56)
    brightness(1.13) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"] {
  color: rgba(31, 87, 118, 0.78) !important;
  -webkit-text-fill-color: rgba(31, 87, 118, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"] {
  color: rgba(127, 77, 104, 0.78) !important;
  -webkit-text-fill-color: rgba(127, 77, 104, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"].selected {
  border-color: rgba(174, 227, 250, 0.9) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 1), transparent 48%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.99) 0%, rgba(236, 250, 255, 0.96) 42%, rgba(204, 237, 253, 0.9) 72%, rgba(165, 221, 249, 0.86) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(210, 244, 255, 0.58),
    0 8px 18px rgba(68, 150, 198, 0.14),
    0 0 16px rgba(139, 221, 255, 0.22) !important;
  color: #123b5a !important;
  -webkit-text-fill-color: #123b5a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"].selected {
  border-color: rgba(225, 196, 215, 0.9) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 1), transparent 48%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 240, 248, 0.96) 42%, rgba(238, 226, 236, 0.92) 72%, rgba(213, 218, 229, 0.9) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 0 1px rgba(255, 241, 249, 0.56),
    0 8px 18px rgba(132, 87, 113, 0.12),
    0 0 15px rgba(229, 186, 213, 0.2) !important;
  color: #5d314b !important;
  -webkit-text-fill-color: #5d314b !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span {
  box-shadow:
    0 14px 24px rgba(12, 36, 58, 0.16),
    0 0 13px var(--card-frame-shadow),
    inset 0 0 0 1px var(--card-name-line) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"]::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"]::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] .card-outer-frame.card-outer-frame {
  filter: var(--soft-faction-frame-filter) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 32%, rgba(218, 244, 255, 0.18) 64%, rgba(17, 58, 87, 0.58) 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 32%, rgba(255, 231, 245, 0.18) 64%, rgba(88, 47, 70, 0.54) 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewSkill#previewSkill#previewSkill {
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, max-content) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, calc(var(--select-card-outer-w, 150px) * 0.04), 8px) !important;
  min-width: 0 !important;
  min-height: clamp(23px, calc(var(--select-card-outer-h, 260px) * 0.092), 28px) !important;
  height: auto !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-color: var(--soft-faction-chip-line) !important;
  border-left-color: var(--soft-faction-chip-edge) !important;
  background: var(--soft-faction-chip-bg) !important;
  color: var(--soft-faction-chip-text) !important;
  -webkit-text-fill-color: var(--soft-faction-chip-text) !important;
  box-shadow:
    0 7px 14px rgba(26, 52, 76, 0.12),
    0 0 12px var(--soft-faction-chip-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 9px 0 16px rgba(255, 255, 255, 0.18) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip {
  flex: 0 1 auto !important;
  width: max-content !important;
  max-width: min(48%, calc(100% - 4px)) !important;
  padding-left: clamp(9px, calc(var(--select-card-outer-w, 150px) * 0.06), 13px) !important;
  padding-right: clamp(12px, calc(var(--select-card-outer-w, 150px) * 0.078), 17px) !important;
  border-radius: 6px !important;
  font-size: clamp(8.5px, calc(var(--select-card-outer-h, 260px) * 0.04), 11px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  clip-path: polygon(0 0, 100% 0, calc(100% - clamp(9px, calc(var(--select-card-outer-w, 150px) * 0.062), 13px)) 100%, 0 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.enabled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip.enabled {
  box-shadow:
    0 8px 16px rgba(26, 52, 76, 0.15),
    0 0 16px var(--soft-faction-chip-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
  flex: 1 1 auto !important;
}

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewSkill#previewSkill#previewSkill .skill-inline-icon.skill-inline-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewSkill#previewSkill#previewSkill .skill-inline-icon.skill-inline-icon {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(14px, calc(var(--select-card-outer-w, 150px) * 0.105), 18px) !important;
  height: clamp(14px, calc(var(--select-card-outer-w, 150px) * 0.105), 18px) !important;
  min-width: clamp(14px, calc(var(--select-card-outer-w, 150px) * 0.105), 18px) !important;
  min-height: clamp(14px, calc(var(--select-card-outer-w, 150px) * 0.105), 18px) !important;
  max-width: clamp(14px, calc(var(--select-card-outer-w, 150px) * 0.105), 18px) !important;
  max-height: clamp(14px, calc(var(--select-card-outer-w, 150px) * 0.105), 18px) !important;
  margin: 0 !important;
  padding: 1px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--soft-faction-chip-line) !important;
  border-radius: 999px !important;
  background: var(--soft-faction-icon-bg) !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 5px var(--soft-faction-chip-glow))
    saturate(0.92)
    brightness(1.08) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip {
    max-width: 46% !important;
    min-height: 23px !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
    font-size: clamp(8px, 2.25vw, 10px) !important;
  }
}

/* V1.27Beta-select-final25: beat older :not(.mode-tip) gold chips for normal skills. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="luminary"] #previewSkill#previewSkill#previewSkill {
  border-color: rgba(176, 229, 252, 0.86) !important;
  border-left-color: rgba(101, 184, 229, 0.78) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 45%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 251, 255, 0.96) 42%, rgba(207, 239, 255, 0.9) 72%, rgba(166, 221, 249, 0.86) 100%) !important;
  color: #123b5a !important;
  -webkit-text-fill-color: #123b5a !important;
  box-shadow:
    0 7px 14px rgba(26, 52, 76, 0.12),
    0 0 12px rgba(112, 199, 242, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 9px 0 16px rgba(255, 255, 255, 0.18) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewSkill#previewSkill#previewSkill,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview.character-preview[data-select-faction="neutral"] #previewSkill#previewSkill#previewSkill {
  border-color: rgba(226, 198, 216, 0.88) !important;
  border-left-color: rgba(188, 151, 176, 0.76) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 1), transparent 45%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 241, 249, 0.96) 42%, rgba(238, 225, 235, 0.92) 72%, rgba(213, 218, 229, 0.9) 100%) !important;
  color: #5d314b !important;
  -webkit-text-fill-color: #5d314b !important;
  box-shadow:
    0 7px 14px rgba(66, 45, 58, 0.1),
    0 0 12px rgba(212, 142, 184, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 9px 0 16px rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* V1.27Beta-select-final26: real soft-blue and pink-silver card frame assets. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="luminary"]::before {
  background: url("assets/ui/character-card-frame-luminary-soft-blue-v1.png?v=V1.27Beta-select-final26-frame-blue1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 3px 7px rgba(29, 82, 118, 0.18))
    drop-shadow(0 0 11px rgba(143, 224, 255, 0.25)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] .card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"]::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.character-option.character-option[data-select-faction="neutral"]::before {
  background: url("assets/ui/character-card-frame-neutral-soft-pink-silver-v1.png?v=V1.27Beta-select-final26-frame-pinksilver1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 3px 7px rgba(80, 47, 68, 0.14))
    drop-shadow(0 0 11px rgba(236, 189, 216, 0.23)) !important;
}

/* V1.27Beta-select-final27: unselected faction tabs also carry their faction color. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"]:not(.selected),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="luminary"]:not(.selected) {
  border-color: rgba(194, 232, 248, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(232, 248, 255, 0.7)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.44), rgba(174, 221, 245, 0.24)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 6px 14px rgba(50, 116, 154, 0.09) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"]:not(.selected),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs.character-faction-tabs.character-faction-tabs > button[data-select-faction-tab="neutral"]:not(.selected) {
  border-color: rgba(226, 200, 217, 0.74) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 239, 248, 0.72)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.46), rgba(210, 216, 228, 0.24)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 6px 14px rgba(132, 86, 112, 0.08) !important;
  opacity: 0.9 !important;
}

/* V1.27Beta-select-final28: mobile character thumbs use one chip scale for normal and special skills. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em {
    left: 7.2% !important;
    right: 7.2% !important;
    bottom: 5.7% !important;
    gap: clamp(4px, calc(var(--select-card-outer-w, 150px) * 0.034), 6px) !important;
    height: clamp(28px, calc(var(--select-card-outer-h, 260px) * 0.106), 34px) !important;
    min-height: clamp(28px, calc(var(--select-card-outer-h, 260px) * 0.106), 34px) !important;
    max-height: clamp(28px, calc(var(--select-card-outer-h, 260px) * 0.106), 34px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.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.skill-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.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.skill-tip {
    box-sizing: border-box !important;
    display: inline-grid !important;
    grid-template-columns: auto minmax(0, max-content) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, calc(var(--select-card-outer-w, 150px) * 0.032), 6px) !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: clamp(7px, calc(var(--select-card-outer-w, 150px) * 0.052), 10px) !important;
    padding-right: clamp(10px, calc(var(--select-card-outer-w, 150px) * 0.072), 14px) !important;
    font-size: clamp(11px, calc(var(--select-card-outer-w, 150px) * 0.078), 13.5px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip.mode-tip {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(11px, calc(var(--select-card-outer-w, 150px) * 0.078), 13.5px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip:not(.mode-tip) {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.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.skill-tip > .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.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.skill-tip > .skill-inline-icon.skill-inline-icon {
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    height: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    min-width: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    min-height: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    max-width: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    max-height: clamp(18px, calc(var(--select-card-outer-w, 150px) * 0.135), 23px) !important;
    aspect-ratio: 1 / 1 !important;
    padding: 1px !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option > span > em > b.skill-tip.skill-tip.skill-tip.skill-tip > .skill-inline-text.skill-inline-text {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: inherit !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}