/* V1.28Beta-select-stable2
   Character select thumbnail format:
   - normal skill button always uses the same bottom-left anchor on every card;
   - special-mode button is an extra same-width button directly above it;
   - special-mode button has text only, while normal skill keeps icon + text.
*/

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) {
  --select-gap: clamp(12px, 1.8vh, 18px) !important;
  --select-frame-outset-x: clamp(14px, 2.1vh, 20px) !important;
  --select-frame-outset-y: clamp(22px, 3.7vh, 32px) !important;
  --select-card-h: clamp(206px, calc((100dvh - 206px) / 2), 282px) !important;
  --select-card-w: calc(var(--select-card-h) * 5 / 7) !important;
  --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
  --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  --select-skill-h: clamp(22px, calc(var(--select-card-outer-h) * 0.078), 28px) !important;
  --select-skill-gap: clamp(4px, calc(var(--select-card-outer-h) * 0.016), 6px) !important;
  display: block !important;
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* V1.28Beta-select-final-scale-lock2: enforce 2-row full visibility and larger preview/frame parity for selection/inspect view. */
body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-gap: clamp(14px, 1.9vh, 20px) !important;
  --select-frame-outset-x: clamp(14px, 2.1vw, 22px) !important;
  --select-frame-outset-y: clamp(24px, 3.1vh, 34px) !important;
  --select-card-outer-h: clamp(320px, 34dvh, 390px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
  --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
  --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
  --select-skill-h: clamp(22px, calc(var(--select-card-outer-h) * 0.072), 32px) !important;
  --select-skill-gap: clamp(5px, calc(var(--select-card-outer-h) * 0.014), 8px) !important;
  --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 12px) !important;
  --preview-card-frame-x: clamp(44px, 7vw, 72px) !important;
  --preview-card-frame-y: clamp(68px, 11vw, 96px) !important;
}

@media (min-width: 900px) {
  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-frame-outset-x: clamp(16px, 2.2vw, 26px) !important;
    --select-frame-outset-y: clamp(26px, 3.9vh, 38px) !important;
    --select-card-outer-h: clamp(320px, 34dvh, 390px) !important;
    --select-gap: clamp(14px, 1.8vh, 20px) !important;
    --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
    --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 12px) !important;
    --preview-card-frame-x: clamp(52px, 6.6vw, 84px) !important;
    --preview-card-frame-y: clamp(76px, 10vw, 112px) !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(52px, 4.6vw, 72px)), min(calc(100dvw - 12px), 2050px)) !important;
    height: min(calc(var(--character-scroll-two-rows) + clamp(102px, 11vh, 136px)), calc(100dvh - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: clamp(42px, 4.9dvh, 64px) clamp(34px, 3.5vw, 56px) clamp(16px, 2.1vh, 24px) !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    display: block !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: 100% !important;
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(102px, 11vh, 136px)) !important;
    margin: 0 auto !important;
    padding: 0 0 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
    grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: var(--select-gap) !important;
    margin: 0 auto !important;
  }

  body:not(.maintenance-mode) #characterSelect.preview-open .character-preview-backdrop {
    z-index: 70 !important;
    display: block !important;
    inset: calc(-4px) 0 !important;
    background: radial-gradient(circle at center, rgb(4 12 20 / 0.5) 0%, rgb(4 12 20 / 0.74) 48%, rgb(2 4 7 / 0.86) 100%) !important;
    backdrop-filter: blur(2.5px) !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(clamp(560px, 58vw, 900px), calc(100dvw - 36px)) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 92 !important;
    --preview-frame-bind-outset-x: clamp(52px, 6.6vw, 84px) !important;
    --preview-frame-bind-outset-y: clamp(76px, 10vw, 112px) !important;
    --preview-copy-drop: clamp(20px, 2.8vh, 30px) !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art {
    width: 100% !important;
    aspect-ratio: 5 / 7 !important;
  }
}

@media (max-width: 899px) {
  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-frame-outset-x: clamp(12px, 3.4vw, 16px) !important;
    --select-frame-outset-y: clamp(18px, 4.3vw, 24px) !important;
    --select-card-outer-h: clamp(230px, 42dvh, 292px) !important;
    --select-gap: clamp(10px, 3vw, 16px) !important;
    --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
    --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 10px) !important;
    --preview-card-frame-x: clamp(34px, 11vw, 58px) !important;
    --preview-card-frame-y: clamp(52px, 18vw, 80px) !important;
    --select-skill-h: clamp(20px, calc(var(--select-card-outer-h) * 0.072), 28px) !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 18px), calc(100dvw - 6px)) !important;
    height: min(calc(100dvh - 12px), calc(var(--character-scroll-two-rows) + clamp(84px, 14vh, 122px))) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: clamp(28px, 4.9dvh, 52px) 6px clamp(10px, 2.2vh, 18px) !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    display: block !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: 100% !important;
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(74px, 13vh, 110px)) !important;
    margin: 0 auto !important;
    padding: 0 0 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: var(--select-gap) !important;
    margin: 0 auto !important;
  }

  body:not(.maintenance-mode) #characterSelect.preview-open .character-preview-backdrop {
    z-index: 70 !important;
    display: block !important;
    inset: calc(-4px) 0 !important;
    background: radial-gradient(circle at center, rgb(4 12 20 / 0.52) 0%, rgb(4 12 20 / 0.78) 52%, rgb(2 4 7 / 0.9) 100%) !important;
    backdrop-filter: blur(2px) !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(90vw, 486px) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 92 !important;
    --preview-frame-bind-outset-x: clamp(34px, 11vw, 58px) !important;
    --preview-frame-bind-outset-y: clamp(52px, 18vw, 80px) !important;
    --preview-copy-drop: clamp(14px, 4.2vw, 20px) !important;
  }

  body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art {
    width: 100% !important;
    aspect-ratio: 5 / 7 !important;
  }
}

body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
  z-index: 92 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  transform: translate(-50%, -50%) !important;
  --preview-frame-bind-outset-x: var(--preview-card-frame-x) !important;
  --preview-frame-bind-outset-y: var(--preview-card-frame-y) !important;
}

body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) .preview-card-outer-frame.preview-card-outer-frame,
body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  z-index: 18 !important;
  position: absolute !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art::before,
body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art::after {
  content: none !important;
  background: none !important;
  display: none !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body:not(.maintenance-mode) .character-preview::before,
body:not(.maintenance-mode) .character-preview::after,
body:not(.maintenance-mode) #characterSelect.preview-open .character-scroll::before,
body:not(.maintenance-mode) #characterSelect.preview-open .character-scroll::after {
  content: none !important;
  background: none !important;
  inset: 0 !important;
  display: none !important;
  opacity: 0 !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) > .status-line {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 36000 !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) > .status-line > *:not(#leaveCharacterSelect) {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) > .status-line #leaveCharacterSelect {
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-select-layout {
  position: absolute !important;
  left: 50% !important;
  top: clamp(30px, 5.2vh, 48px) !important;
  z-index: 10 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: min(calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(78px, 7vw, 118px)), calc(100vw - 18px)) !important;
  height: auto !important;
  max-height: calc(100dvh - clamp(42px, 7vh, 72px)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(56px, 7.2vh, 76px) clamp(34px, 4.2vw, 58px) clamp(24px, 4vh, 44px) !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
  background: var(--character-select-desktop-frame-art, transparent) center center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

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

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-faction-tabs {
  position: absolute !important;
  left: 50% !important;
  top: clamp(15px, 2.8vh, 24px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: min(560px, calc(100% - clamp(52px, 8vw, 96px))) !important;
  height: clamp(34px, 4.2vh, 42px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(8px, 1.1vw, 14px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-faction-tabs > button[data-select-faction-tab] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 clamp(12px, 1.4vw, 18px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-scroll {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 6px), calc(100dvh - clamp(126px, 17vh, 160px))) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}

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

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  max-width: var(--select-card-outer-w) !important;
  max-height: var(--select-card-outer-h) !important;
  padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden])[data-active-faction="luminary"] .character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden])[data-active-faction="neutral"] .character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden])[data-active-faction="villain"] .character-option:not([data-select-faction="villain"]) {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option > span {
  position: relative !important;
  display: block !important;
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  max-width: var(--select-card-w) !important;
  max-height: var(--select-card-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option .mini-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-image:
    var(--character-art, none),
    linear-gradient(180deg, rgba(236, 248, 255, 0.98), rgba(163, 198, 220, 0.92)) !important;
  background-size: var(--art-size, cover), cover !important;
  background-position: var(--art-position, center 52%), center center !important;
  background-repeat: no-repeat !important;
}

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

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option > span > em {
  position: absolute !important;
  left: 8.6% !important;
  right: auto !important;
  bottom: 6.8% !important;
  z-index: 86 !important;
  display: block !important;
  width: clamp(82px, calc(var(--select-card-w) * 0.72), 132px) !important;
  min-width: clamp(82px, calc(var(--select-card-w) * 0.72), 132px) !important;
  max-width: calc(100% - 17.2%) !important;
  height: calc(var(--select-skill-h) * 2 + var(--select-skill-gap)) !important;
  min-height: calc(var(--select-skill-h) * 2 + var(--select-skill-gap)) !important;
  max-height: calc(var(--select-skill-h) * 2 + var(--select-skill-gap)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option .skill-tip {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: var(--select-skill-h) !important;
  min-height: var(--select-skill-h) !important;
  max-height: var(--select-skill-h) !important;
  margin: 0 !important;
  font-size: clamp(9px, calc(var(--select-card-outer-w) * 0.066), 12px) !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.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option .skill-tip:not(.mode-tip) {
  bottom: 0 !important;
  gap: clamp(3px, calc(var(--select-card-w) * 0.024), 5px) !important;
  padding: 0 clamp(8px, calc(var(--select-card-w) * 0.07), 12px) 1px !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option .mode-tip {
  bottom: calc(var(--select-skill-h) + var(--select-skill-gap)) !important;
  gap: 0 !important;
  padding: 0 clamp(7px, calc(var(--select-card-w) * 0.058), 11px) 1px !important;
}

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

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option .skill-tip:not(.mode-tip) .skill-inline-icon {
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 1.08em !important;
  height: 1.08em !important;
  min-width: 1.08em !important;
  min-height: 1.08em !important;
  margin: 0 !important;
  object-fit: contain !important;
}

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

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(10px, 2.6vw, 13px) !important;
    --select-frame-outset-x: clamp(10px, 3.2vw, 14px) !important;
    --select-frame-outset-y: clamp(16px, 4.5vw, 22px) !important;
    --select-card-outer-w: min(46vw, 168px) !important;
    --select-card-w: calc(var(--select-card-outer-w) - var(--select-frame-outset-x) * 2) !important;
    --select-card-h: calc(var(--select-card-w) * 7 / 5) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
    --select-skill-h: clamp(19px, calc(var(--select-card-outer-h) * 0.082), 24px) !important;
    --select-skill-gap: 4px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-select-layout {
    top: clamp(58px, 8.5vh, 76px) !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 26px), calc(100vw - 10px)) !important;
    max-height: calc(100dvh - clamp(64px, 10vh, 86px)) !important;
    padding: clamp(44px, 6.6vh, 58px) 8px clamp(14px, 3vh, 24px) !important;
    background: transparent !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-faction-tabs {
    top: 0 !important;
    width: min(348px, calc(100vw - 28px)) !important;
    height: 34px !important;
    gap: 7px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-scroll {
    max-height: calc(100dvh - clamp(126px, 18vh, 156px)) !important;
    overflow-y: auto !important;
  }

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

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option > span > em {
    left: 8.4% !important;
    bottom: 7% !important;
    min-width: clamp(74px, calc(var(--select-card-w) * 0.7), 104px) !important;
    max-width: calc(100% - 16.8%) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-option .skill-tip {
    font-size: clamp(8.2px, calc(var(--select-card-outer-w) * 0.062), 10.5px) !important;
  }
}

/* V1.28Beta-select-stable3
   Final character-select lock:
   - apply even when the runtime appRoot state class is late/missing;
   - keep faction tabs near the top and cards immediately below them;
   - normal skill button stays bottom-left, special button same width directly above it.
*/

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-gap: clamp(12px, 1.7vh, 18px) !important;
  --select-frame-outset-x: clamp(14px, 2.1vh, 20px) !important;
  --select-frame-outset-y: clamp(22px, 3.4vh, 30px) !important;
  --select-card-h: clamp(206px, calc((100dvh - 206px) / 2), 282px) !important;
  --select-card-w: calc(var(--select-card-h) * 5 / 7) !important;
  --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
  --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  --select-skill-h: clamp(22px, calc(var(--select-card-outer-h) * 0.078), 28px) !important;
  --select-skill-gap: clamp(4px, calc(var(--select-card-outer-h) * 0.016), 6px) !important;
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line {
  position: fixed !important;
  left: 50% !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 36000 !important;
  width: min(920px, calc(100vw - 28px)) !important;
  transform: translateX(-50%) !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout {
  position: absolute !important;
  left: 50% !important;
  top: clamp(74px, 8.2vh, 96px) !important;
  z-index: 10 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: min(calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(74px, 6vw, 110px)), calc(100vw - 18px)) !important;
  height: auto !important;
  max-height: calc(100dvh - clamp(86px, 10vh, 112px)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(48px, 5.4vh, 64px) clamp(30px, 3.8vw, 54px) clamp(20px, 3.4vh, 38px) !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
  background: var(--character-select-desktop-frame-art, transparent) center center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

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

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs {
  position: absolute !important;
  left: 50% !important;
  top: clamp(8px, 1.2vh, 14px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: min(560px, calc(100% - clamp(48px, 8vw, 90px))) !important;
  height: clamp(36px, 4vh, 42px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(8px, 1.1vw, 14px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs > button[data-select-faction-tab] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 clamp(12px, 1.4vw, 18px) !important;
  font-size: clamp(13px, 1.05vw, 16px) !important;
  line-height: 1 !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 6px), calc(100dvh - clamp(140px, 16vh, 180px))) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
  grid-auto-rows: var(--select-card-outer-h) !important;
  justify-content: center !important;
  align-content: start !important;
  justify-items: center !important;
  gap: var(--select-gap) !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  max-width: var(--select-card-outer-w) !important;
  max-height: var(--select-card-outer-h) !important;
  padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])[data-active-faction="luminary"] .character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])[data-active-faction="neutral"] .character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden])[data-active-faction="villain"] .character-option:not([data-select-faction="villain"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.placeholder {
  display: none !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option > span {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  max-width: var(--select-card-w) !important;
  max-height: var(--select-card-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .mini-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-image:
    var(--character-art, none),
    linear-gradient(180deg, rgba(236, 248, 255, 0.98), rgba(163, 198, 220, 0.92)) !important;
  background-size: var(--art-size, cover), cover !important;
  background-position: var(--art-position, center 52%), center center !important;
  background-repeat: no-repeat !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option[data-character="Lollipopz"] .mini-art {
  --art-size: auto 126% !important;
  --art-position: center 100% !important;
  background-size: var(--art-size), cover !important;
  background-position: var(--art-position), center center !important;
}

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

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .card-inscription {
  position: absolute !important;
  left: 8.6% !important;
  right: 8.6% !important;
  bottom: calc(6.8% + var(--select-skill-h) + 7px) !important;
  z-index: 84 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-align: left !important;
  pointer-events: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .card-inscription small,
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .card-inscription strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82) !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .card-inscription small {
  font-size: clamp(9px, calc(var(--select-card-outer-w) * 0.06), 12px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .card-inscription strong {
  margin-top: 2px !important;
  font-size: clamp(17px, calc(var(--select-card-outer-w) * 0.112), 24px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option > span > em {
  position: absolute !important;
  left: 8.6% !important;
  right: auto !important;
  bottom: 6.8% !important;
  z-index: 86 !important;
  display: block !important;
  width: clamp(82px, calc(var(--select-card-w) * 0.72), 132px) !important;
  min-width: clamp(82px, calc(var(--select-card-w) * 0.72), 132px) !important;
  max-width: calc(100% - 17.2%) !important;
  height: calc(var(--select-skill-h) * 2 + var(--select-skill-gap)) !important;
  min-height: calc(var(--select-skill-h) * 2 + var(--select-skill-gap)) !important;
  max-height: calc(var(--select-skill-h) * 2 + var(--select-skill-gap)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .skill-tip {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: var(--select-skill-h) !important;
  min-height: var(--select-skill-h) !important;
  max-height: var(--select-skill-h) !important;
  margin: 0 !important;
  font-size: clamp(9px, calc(var(--select-card-outer-w) * 0.066), 12px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .skill-tip:not(.mode-tip) {
  bottom: 0 !important;
  gap: clamp(3px, calc(var(--select-card-w) * 0.024), 5px) !important;
  padding: 0 clamp(8px, calc(var(--select-card-w) * 0.07), 12px) 1px !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .mode-tip {
  bottom: calc(var(--select-skill-h) + var(--select-skill-gap)) !important;
  gap: 0 !important;
  padding: 0 clamp(7px, calc(var(--select-card-w) * 0.058), 11px) 1px !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .mode-tip .skill-inline-icon {
  display: none !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .skill-tip:not(.mode-tip) .skill-inline-icon {
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 1.08em !important;
  height: 1.08em !important;
  min-width: 1.08em !important;
  min-height: 1.08em !important;
  margin: 0 !important;
  object-fit: contain !important;
}

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

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(10px, 2.6vw, 13px) !important;
    --select-frame-outset-x: clamp(10px, 3.2vw, 14px) !important;
    --select-frame-outset-y: clamp(16px, 4.5vw, 22px) !important;
    --select-card-outer-w: min(46vw, 168px) !important;
    --select-card-w: calc(var(--select-card-outer-w) - var(--select-frame-outset-x) * 2) !important;
    --select-card-h: calc(var(--select-card-w) * 7 / 5) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
    --select-skill-h: clamp(19px, calc(var(--select-card-outer-h) * 0.082), 24px) !important;
    --select-skill-gap: 4px !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .status-line {
    top: max(8px, env(safe-area-inset-top)) !important;
    width: min(430px, calc(100vw - 18px)) !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout {
    top: clamp(54px, 7.4vh, 70px) !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 26px), calc(100vw - 10px)) !important;
    max-height: calc(100dvh - clamp(64px, 10vh, 86px)) !important;
    padding: clamp(38px, 5.8vh, 52px) 8px clamp(14px, 3vh, 24px) !important;
    background: transparent !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs {
    top: 0 !important;
    width: min(348px, calc(100vw - 28px)) !important;
    height: 34px !important;
    gap: 7px !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    max-height: calc(100dvh - clamp(126px, 18vh, 156px)) !important;
    overflow-y: auto !important;
  }

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

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .card-inscription {
    left: 8.4% !important;
    right: 8.4% !important;
    bottom: calc(7% + var(--select-skill-h) + 7px) !important;
  }

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

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .card-inscription strong {
    font-size: clamp(15px, calc(var(--select-card-outer-w) * 0.104), 20px) !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option > span > em {
    left: 8.4% !important;
    bottom: 7% !important;
    min-width: clamp(74px, calc(var(--select-card-w) * 0.7), 104px) !important;
    max-width: calc(100% - 16.8%) !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option .skill-tip {
    font-size: clamp(8.2px, calc(var(--select-card-outer-w) * 0.062), 10.5px) !important;
  }
}

/* V1.28Beta-desire-shared-frame1: Desire uses the regular Luminary frame. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.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#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Desire"] .card-outer-frame.card-outer-frame {
  --desire-frame-extra-x: 0px !important;
  --desire-frame-extra-y: 0px !important;
  top: calc(var(--select-frame-fit-outset-y, 10px) * -1) !important;
  right: calc(var(--select-frame-fit-outset-x, 8px) * -1) !important;
  bottom: calc(var(--select-frame-fit-outset-y, 10px) * -1) !important;
  left: calc(var(--select-frame-fit-outset-x, 8px) * -1) !important;
  background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-shared-frame1") 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#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Desire"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Desire"] > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Desire"]::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option.character-option.character-option.character-option[data-character="Desire"]::before {
  background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-shared-frame1") 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#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] #previewArt#previewArt#previewArt.preview-art.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-shared-frame1") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 5px 12px rgba(8, 24, 42, 0.22))
    drop-shadow(0 0 10px rgba(96, 184, 255, 0.18)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] #previewArt#previewArt#previewArt.preview-art.preview-art::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] #previewArt#previewArt#previewArt.preview-art.preview-art::before {
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-shared-frame1") !important;
  filter:
    drop-shadow(0 5px 12px rgba(8, 24, 42, 0.22))
    drop-shadow(0 0 10px rgba(96, 184, 255, 0.18)) !important;
}

/* V1.28Beta-character-select-lift2: keep desktop character cards in the upper playable area. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(10px, 1.25vh, 14px) !important;
    --select-card-outer-h: clamp(228px, 32dvh, 252px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-card-w: var(--select-card-outer-w) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50vw !important;
    top: clamp(96px, 13.5dvh, 110px) !important;
    width: min(1040px, calc(100vw - 44px)) !important;
    height: min(592px, calc(100dvh - 124px)) !important;
    max-height: calc(100dvh - 124px) !important;
    padding: clamp(38px, 5.6dvh, 48px) clamp(42px, 4.6vw, 64px) clamp(8px, 1.4dvh, 12px) !important;
    display: block !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
  }

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

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

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

/* V1.28Beta-preview-frame-bind1: bind enlarged art, frame, title, and skill box to one card geometry. */
html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
  --preview-frame-bind-outset-x: clamp(36px, 8.4%, 54px) !important;
  --preview-frame-bind-outset-y: clamp(54px, 9.2%, 76px) !important;
  --preview-copy-drop: clamp(14px, 2.2vh, 24px) !important;
  width: min(clamp(350px, 29vw, 470px), calc(100vw - 28px)) !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 5 / 7 !important;
  overflow: visible !important;
  isolation: isolate !important;
  border-radius: 8px !important;
  background-size: cover !important;
  background-position: var(--art-position, center 52%) !important;
  background-repeat: no-repeat !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art::before,
html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  content: "" !important;
  position: absolute !important;
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  z-index: 18 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  filter:
    drop-shadow(0 8px 16px rgba(8, 24, 42, 0.26))
    drop-shadow(0 0 12px rgba(96, 184, 255, 0.22))
    drop-shadow(0 0 10px rgba(230, 180, 58, 0.18)) !important;
}

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

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

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-select-faction="villain"] #previewArt#previewArt.preview-art::before,
html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-select-faction="villain"] #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-villain-blackred-v1.png?v=V1.28Beta-preview-frame-bind1") !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] #previewArt#previewArt.preview-art::before,
html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])[data-character="Desire"] #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  background-image: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-preview-frame-bind1") !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art::after {
  z-index: 2 !important;
  inset: 0 !important;
  border-radius: 8px !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art > .preview-inscription.preview-inscription {
  position: absolute !important;
  top: 49% !important;
  right: 5.8% !important;
  z-index: 20 !important;
  transform: translateY(-50%) !important;
  max-width: 42% !important;
  text-align: right !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art > .preview-inscription.preview-inscription small,
html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art > .preview-inscription.preview-inscription strong {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art > .preview-inscription.preview-inscription small {
  font-size: clamp(11px, 1.45vh, 14px) !important;
  line-height: 1.05 !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art > .preview-inscription.preview-inscription strong {
  margin-top: 4px !important;
  font-size: clamp(28px, 3.8vh, 36px) !important;
  line-height: 0.96 !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy {
  left: clamp(24px, 6.3%, 32px) !important;
  right: clamp(24px, 6.3%, 32px) !important;
  bottom: clamp(-16px, -1.6vh, -8px) !important;
  z-index: 22 !important;
  display: grid !important;
  align-content: end !important;
  gap: clamp(5px, 0.8vh, 8px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateY(var(--preview-copy-drop)) !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill {
  gap: clamp(4px, 0.7vh, 6px) !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewSkill#previewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-skill.preview-skill > strong {
  min-height: clamp(25px, 3.5vh, 31px) !important;
  padding: 0 clamp(12px, 3.1%, 18px) !important;
  font-size: clamp(12px, 2.1vh, 15px) !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewDescription#previewDescription {
  min-height: clamp(54px, 8.2vh, 68px) !important;
  max-height: clamp(62px, 9.2vh, 78px) !important;
  overflow: auto !important;
}

html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #lockCharacter#lockCharacter {
  justify-self: center !important;
  margin-top: clamp(2px, 0.5vh, 5px) !important;
  min-height: clamp(29px, 4vh, 35px) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(34px, 8.8vw, 48px) !important;
    --preview-frame-bind-outset-y: clamp(52px, 12.5vw, 70px) !important;
    --preview-copy-drop: clamp(18px, 3vh, 28px) !important;
    width: min(76vw, 386px) !important;
  }

  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-copy.preview-copy {
    left: clamp(22px, 6.2%, 30px) !important;
    right: clamp(22px, 6.2%, 30px) !important;
    bottom: clamp(-18px, -2.2vh, -10px) !important;
  }

  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewDescription#previewDescription {
    min-height: clamp(52px, 7.6vh, 64px) !important;
    max-height: clamp(58px, 8.8vh, 72px) !important;
  }
}

/* V1.28Beta-lollipopz-crop-up5: final thumbnail crop after frame and preview overrides. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Lollipopz"] .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Lollipopz"] .mini-art.mini-art {
  --art-size: auto 126% !important;
  --art-position: center 100% !important;
  background-size: auto 126%, cover !important;
  background-position: center 100%, center center !important;
}

/* V1.28Beta-select-center-scale4: enlarge and truly center the character-select card field. */
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-gap: clamp(12px, 1.45dvh, 18px) !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-card-outer-h: clamp(268px, 31dvh, 326px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-card-w: var(--select-card-outer-w) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    width: min(1180px, calc(100vw - 36px)) !important;
    height: min(820px, calc(100dvh - 56px)) !important;
    max-height: calc(100dvh - 56px) !important;
    padding: clamp(58px, 6.4dvh, 78px) clamp(52px, 5.2vw, 78px) clamp(24px, 3.2dvh, 38px) !important;
    display: block !important;
    overflow: visible !important;
    transform: translate(-50%, -50%) !important;
  }

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

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

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

  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    width: min(clamp(390px, 32vw, 540px), calc(100vw - 30px)) !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(11px, 2.8vw, 15px) !important;
    --select-frame-outset-x: clamp(10px, 3vw, 14px) !important;
    --select-frame-outset-y: clamp(16px, 4.4vw, 22px) !important;
    --select-card-outer-w: min(48vw, 184px) !important;
    --select-card-w: calc(var(--select-card-outer-w) - var(--select-frame-outset-x) * 2) !important;
    --select-card-h: calc(var(--select-card-w) * 7 / 5) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 30px), calc(100vw - 8px)) !important;
    height: min(92dvh, calc(100dvh - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    padding: clamp(44px, 6.2dvh, 60px) 8px clamp(16px, 2.8dvh, 26px) !important;
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-scroll,
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    height: calc(100% - clamp(42px, 6dvh, 56px)) !important;
    max-height: calc(100% - clamp(42px, 6dvh, 56px)) !important;
    margin: 0 auto !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select:not([hidden]) .character-options,
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    justify-content: center !important;
    justify-items: center !important;
    margin: 0 auto !important;
  }

  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    width: min(82vw, 420px) !important;
  }
}

/* V1.28Beta-select-center-scale5: specificity lock above legacy repeated-ID rules. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(12px, 1.45dvh, 18px) !important;
    --select-card-outer-h: clamp(268px, 31dvh, 326px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-card-w: var(--select-card-outer-w) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    width: min(1180px, calc(100vw - 36px)) !important;
    height: min(820px, calc(100dvh - 56px)) !important;
    max-height: calc(100dvh - 56px) !important;
    padding: clamp(58px, 6.4dvh, 78px) clamp(52px, 5.2vw, 78px) clamp(24px, 3.2dvh, 38px) !important;
    display: block !important;
    overflow: visible !important;
    transform: translate(-50%, -50%) !important;
  }

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

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    width: min(clamp(390px, 32vw, 540px), calc(100vw - 30px)) !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(11px, 2.8vw, 15px) !important;
    --select-frame-outset-x: clamp(10px, 3vw, 14px) !important;
    --select-frame-outset-y: clamp(16px, 4.4vw, 22px) !important;
    --select-card-outer-w: min(48vw, 184px) !important;
    --select-card-w: calc(var(--select-card-outer-w) - var(--select-frame-outset-x) * 2) !important;
    --select-card-h: calc(var(--select-card-w) * 7 / 5) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 30px), calc(100vw - 8px)) !important;
    height: min(92dvh, calc(100dvh - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    padding: clamp(44px, 6.2dvh, 60px) 8px clamp(16px, 2.8dvh, 26px) !important;
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    height: calc(100% - clamp(42px, 6dvh, 56px)) !important;
    max-height: calc(100% - clamp(42px, 6dvh, 56px)) !important;
    margin: 0 auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    justify-content: center !important;
    justify-items: center !important;
    margin: 0 auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    width: min(82vw, 420px) !important;
  }
}

/* V1.28Beta-rhasta-adult-thumb1-previewscale1: keep 61 on the adult pandaren portrait and enlarge the preview card as one unit. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Rhasta"]:not([data-mode-active="devour-world"]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Rhasta"]:not([data-mode-active="devour-world"]) {
  --art-size: auto 124% !important;
  --art-position: center 32% !important;
  background-size: auto 124%, cover, cover !important;
  background-position: center 32%, center center, center center !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(48px, 6.2vh, 72px) !important;
    --preview-frame-bind-outset-y: clamp(70px, 9vh, 98px) !important;
    --preview-copy-drop: clamp(16px, 2.3vh, 28px) !important;
    position: fixed !important;
    left: 50vw !important;
    top: 45dvh !important;
    width: min(clamp(520px, 43vw, 700px), calc(100vw - 52px)) !important;
    max-height: calc(100dvh - 34px) !important;
    transform: translate(-50%, -50%) !important;
  }

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

  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art > .preview-inscription.preview-inscription strong {
    font-size: clamp(34px, 4.8vh, 46px) !important;
  }

  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewDescription#previewDescription {
    min-height: clamp(66px, 9.8vh, 88px) !important;
    max-height: clamp(78px, 11.4vh, 104px) !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(38px, 9.6vw, 54px) !important;
    --preview-frame-bind-outset-y: clamp(58px, 14vw, 78px) !important;
    position: fixed !important;
    left: 50vw !important;
    top: 45dvh !important;
    width: min(91vw, 500px) !important;
    max-height: calc(100dvh - 18px) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* V1.28Beta-rhasta-adult-thumb2-gridscale3: enlarge the selection cards, their frames, and the board as one unit. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Rhasta"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .mini-art.mini-art[data-character="Rhasta"] {
  --art-size: auto 126% !important;
  --art-position: center 31% !important;
  background-size: auto 126%, cover, cover !important;
  background-position: center 31%, center center, center center !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(16px, 1.75dvh, 24px) !important;
    --select-card-outer-h: clamp(306px, 35.5dvh, 382px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-card-w: var(--select-card-outer-w) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50vw !important;
    top: 49dvh !important;
    width: min(1360px, calc(100vw - 12px)) !important;
    height: min(910px, calc(100dvh - 18px)) !important;
    max-height: calc(100dvh - 18px) !important;
    padding: clamp(62px, 6.8dvh, 88px) clamp(58px, 5.8vw, 98px) clamp(20px, 2.6dvh, 34px) !important;
    display: block !important;
    overflow: visible !important;
    transform: translate(-50%, -50%) !important;
  }

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

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

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(12px, 3vw, 17px) !important;
    --select-frame-outset-x: clamp(11px, 3.4vw, 16px) !important;
    --select-frame-outset-y: clamp(18px, 4.8vw, 26px) !important;
    --select-card-outer-w: min(50vw, 204px) !important;
    --select-card-w: calc(var(--select-card-outer-w) - var(--select-frame-outset-x) * 2) !important;
    --select-card-h: calc(var(--select-card-w) * 7 / 5) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50vw !important;
    top: 49dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 34px), calc(100vw - 4px)) !important;
    height: min(95dvh, calc(100dvh - 14px)) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: clamp(44px, 5.8dvh, 60px) 6px clamp(12px, 2.2dvh, 22px) !important;
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    height: calc(100% - clamp(38px, 5.4dvh, 52px)) !important;
    max-height: calc(100% - clamp(38px, 5.4dvh, 52px)) !important;
    margin: 0 auto !important;
  }

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

/* V1.28Beta-select-final-scale-lock1: final character-select card and preview resize lock.
   - increase thumbnail size by a consistent scale on both desktop/mobile
   - guarantee 2 rows are visible in the center viewport
   - normalize preview popup as a fixed, centered card with the same card/proportional behavior
*/
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-gap: clamp(14px, 1.7vh, 22px) !important;
  --select-card-outer-h: clamp(332px, 33dvh, 380px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
  --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
  --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
  --select-skill-h: clamp(24px, calc(var(--select-card-outer-h) * 0.074), 32px) !important;
  --select-skill-gap: clamp(5px, calc(var(--select-card-outer-h) * 0.016), 8px) !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-frame-outset-x: clamp(16px, 2.2vh, 26px) !important;
    --select-frame-outset-y: clamp(26px, 3.8vh, 36px) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(30px, 3vw, 40px), calc(100vw - 12px)) !important;
    height: min(calc(var(--character-scroll-two-rows) + clamp(86px, 8vh, 108px)), calc(100dvh - 14px)) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: clamp(44px, 5.8dvh, 66px) clamp(44px, 4.8vw, 82px) clamp(14px, 1.8dvh, 22px) !important;
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(86px, 8vh, 108px)) !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

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

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]),
  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(46px, 5vw, 72px) !important;
    --preview-frame-bind-outset-y: clamp(72px, 8.4vh, 102px) !important;
    --preview-copy-drop: clamp(18px, 2.6vh, 30px) !important;
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    transform: translate(-50%, -50%) !important;
    width: min(clamp(620px, 62vw, 900px), calc(100vw - 24px)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) .preview-art#previewArt.preview-art,
  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) #previewArt#previewArt.preview-art {
    width: 100% !important;
  }

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

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-frame-outset-x: clamp(12px, 3.4vw, 16px) !important;
    --select-frame-outset-y: clamp(18px, 4.8vw, 24px) !important;
    --select-card-outer-h: clamp(248px, 39dvh, 306px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
    --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap)) !important;
    --select-gap: clamp(11px, 2.9vw, 16px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 30px), calc(100vw - 4px)) !important;
    height: min(95dvh, calc(100dvh - 12px)) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: clamp(40px, 5.4dvh, 54px) 6px clamp(12px, 2vh, 20px) !important;
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    height: calc(var(--character-scroll-two-rows)) !important;
    max-height: calc(100dvh - clamp(64px, 8.4dvh, 84px)) !important;
    margin: 0 auto !important;
    padding: 0 0 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

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

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]),
  html body:not(.maintenance-mode) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(40px, 11.2vw, 64px) !important;
    --preview-frame-bind-outset-y: clamp(62px, 15vw, 92px) !important;
    --preview-copy-drop: clamp(18px, 3vh, 28px) !important;
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    transform: translate(-50%, -50%) !important;
    width: min(88vw, 460px) !important;
  }

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

/* V1.28Beta-select-final-scale-lock3: final hard lock for two-row center viewport and exact preview/thumbnail parity.
   - both desktop/mobile use the same scale relationship for card + outer frame
   - preview popup stays centered on the same anchor logic as thumbnail frame
   - strip any remaining accidental preview overlay artifacts
*/
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-scale-mult: 1.32 !important;
  --select-card-outer-h: clamp(340px, calc(35dvh * var(--select-scale-mult)), 410px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
  --select-frame-outset-x: clamp(15px, 2.2vw, 28px) !important;
  --select-frame-outset-y: clamp(24px, 3.5vh, 40px) !important;
  --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
  --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
  --select-skill-h: clamp(23px, calc(var(--select-card-outer-h) * 0.07), 34px) !important;
  --select-skill-gap: clamp(5px, calc(var(--select-card-outer-h) * 0.014), 9px) !important;
  --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + clamp(12px, 1.5dvh, 20px)) !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    transform: translate(-50%, -50%) !important;
    width: min(calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(36px, 2.8vw, 52px)), calc(100vw - 10px)) !important;
    height: calc(var(--character-scroll-two-rows) + clamp(82px, 8.5vh, 112px)) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: clamp(38px, 4.4dvh, 62px) clamp(34px, 3.8vw, 58px) clamp(12px, 1.8dvh, 20px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(76px, 7vh, 106px)) !important;
    overflow-y: auto !important;
  }

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(52px, 7vw, 88px) !important;
    --preview-frame-bind-outset-y: clamp(70px, 9vw, 116px) !important;
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(clamp(640px, 62vw, 940px), calc(100dvw - 20px)) !important;
    transform: translate(-50%, -50%) !important;
    max-height: calc(100dvh - 14px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art {
    width: 100% !important;
    aspect-ratio: 5 / 7 !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-card-outer-h: clamp(280px, calc(42dvh * 0.94), 322px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-gap: clamp(10px, 2.8vw, 16px) !important;
    --select-frame-outset-x: clamp(11px, 3vw, 16px) !important;
    --select-frame-outset-y: clamp(18px, 3.8vw, 24px) !important;
    --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
    --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + clamp(10px, 2.8vw, 14px)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 18px), calc(100dvw - 6px)) !important;
    height: min(calc(100dvh - 10px), calc(var(--character-scroll-two-rows) + clamp(84px, 14vh, 120px))) !important;
    transform: translate(-50%, -50%) !important;
    padding: clamp(30px, 5.1dvh, 50px) 6px clamp(10px, 2vh, 18px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(70px, 12vh, 108px)) !important;
    overflow-y: auto !important;
  }

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(34px, 11vw, 60px) !important;
    --preview-frame-bind-outset-y: clamp(52px, 18vw, 84px) !important;
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(88vw, 490px) !important;
    transform: translate(-50%, -50%) !important;
    max-height: calc(100dvh - 12px) !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-scroll::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-scroll::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-preview::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-preview::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #previewArt#previewArt.preview-art::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #previewArt#previewArt.preview-art::after {
  content: none !important;
  display: none !important;
  background: none !important;
  inset: 0 !important;
  opacity: 0 !important;
}

/* V1.28Beta-select-final-scale-lock4: force an even larger, exact 2-row desktop/mobile center view and fully wrapped preview scale.
   - both thumb cards + frames scale together
   - preview popup is fixed center with same frame-art anchoring logic as thumbnails
   - clear all unintended pseudo overlays and accidental transparent rectangles
*/
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-gap: clamp(11px, 1.8vw, 18px) !important;
  --select-card-outer-h: clamp(262px, calc((100dvh - clamp(350px, 18vh, 390px)) / 2), 372px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
  --select-frame-outset-x: clamp(11px, 1.8vw, 22px) !important;
  --select-frame-outset-y: clamp(18px, 2.8vh, 30px) !important;
  --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
  --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
  --select-skill-h: clamp(20px, calc(var(--select-card-outer-h) * 0.076), 32px) !important;
  --select-skill-gap: clamp(5px, calc(var(--select-card-outer-h) * 0.014), 9px) !important;
  --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + clamp(12px, 1.7vh, 20px)) !important;
  --preview-frame-bind-outset-x: clamp(50px, 6vw, 94px) !important;
  --preview-frame-bind-outset-y: clamp(68px, 9.2vh, 118px) !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(28px, 3vw, 56px)), calc(100dvw - 14px)) !important;
    height: calc(var(--character-scroll-two-rows) + clamp(86px, 9.2vh, 128px)) !important;
    max-height: calc(100dvh - 16px) !important;
    transform: translate(-50%, -50%) !important;
    padding: clamp(42px, 4.4dvh, 64px) clamp(30px, 2.9vw, 54px) clamp(14px, 1.8dvh, 22px) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: 100% !important;
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(98px, 10.5vh, 138px)) !important;
    margin: 0 auto !important;
    padding: 0 0 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(clamp(680px, 58vw, 980px), calc(100dvw - 24px)) !important;
    max-height: calc(100dvh - 16px) !important;
    transform: translate(-50%, -50%) !important;
    --preview-frame-bind-outset-x: clamp(56px, 6.6vw, 100px) !important;
    --preview-frame-bind-outset-y: clamp(72px, 10vh, 124px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art {
    width: 100% !important;
    aspect-ratio: 5 / 7 !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-card-outer-h: clamp(236px, calc((100dvh - clamp(298px, 18vh, 350px)) / 2), 310px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-gap: clamp(9px, 2.7vw, 14px) !important;
    --select-frame-outset-x: clamp(10px, 3vw, 16px) !important;
    --select-frame-outset-y: clamp(16px, 3.8vw, 24px) !important;
    --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
    --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + clamp(10px, 2.4vh, 16px)) !important;
    --select-skill-h: clamp(19px, calc(var(--select-card-outer-h) * 0.074), 30px) !important;
    --select-skill-gap: clamp(4px, calc(var(--select-card-outer-h) * 0.012), 8px) !important;
    --preview-frame-bind-outset-x: clamp(30px, 11vw, 64px) !important;
    --preview-frame-bind-outset-y: clamp(46px, 17vw, 88px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 22px), calc(100dvw - 6px)) !important;
    height: min(95dvh, calc(var(--character-scroll-two-rows) + clamp(82px, 14vh, 122px))) !important;
    max-height: calc(100dvh - 10px) !important;
    transform: translate(-50%, -50%) !important;
    padding: clamp(28px, 5dvh, 50px) 6px clamp(10px, 2vh, 18px) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(68px, 12vh, 112px)) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(92vw, 520px) !important;
    max-height: calc(100dvh - 12px) !important;
    transform: translate(-50%, -50%) !important;
    --preview-frame-bind-outset-x: clamp(34px, 10vw, 62px) !important;
    --preview-frame-bind-outset-y: clamp(52px, 17vw, 88px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art {
    width: 100% !important;
    aspect-ratio: 5 / 7 !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-scroll::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-scroll::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-preview::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-preview::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #previewArt#previewArt.preview-art::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #previewArt#previewArt.preview-art::after {
  content: none !important;
  background: none !important;
  display: none !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  width: auto !important;
  height: auto !important;
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 18 !important;
  opacity: 1 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* V1.28Beta-select-final-scale-lock6-hard-center:
   - scale cards and frames up more aggressively for both desktop/mobile
   - keep the whole selection panel centered so exactly two rows are visible
   - lock the enlarged preview card to a centered, consistent frame overlay
   - hard-disable ghost pseudo rectangles when preview is open
*/
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-gap: clamp(15px, 1.9vw, 22px) !important;
  --select-frame-outset-x: clamp(15px, 2vw, 24px) !important;
  --select-frame-outset-y: clamp(22px, 2.6vh, 34px) !important;
  --select-card-outer-h: clamp(300px, calc((100dvh - clamp(316px, 28vh, 360px)) / 2), 420px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
  --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
  --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
  --select-skill-h: clamp(22px, calc(var(--select-card-outer-h) * 0.075), 34px) !important;
  --select-skill-gap: clamp(5px, calc(var(--select-card-outer-h) * 0.012), 9px) !important;
  --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + clamp(6px, 1.3vh, 12px)) !important;
  --preview-panel-scale: 2.16 !important;
  --preview-panel-width: calc(var(--select-card-outer-w) * var(--preview-panel-scale)) !important;
  --preview-panel-max-height: calc((100dvh - clamp(48px, 6vh, 96px)) * 0.72) !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(18px, 2.2vw, 34px)), calc(100dvw - 14px)) !important;
    height: calc(var(--character-scroll-two-rows) + clamp(94px, 8.8vh, 132px)) !important;
    max-height: calc(100dvh - 14px) !important;
    transform: translate(-50%, -50%) !important;
    padding: clamp(44px, 4.7vh, 66px) clamp(28px, 2.8vw, 52px) clamp(18px, 2vh, 28px) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: 100% !important;
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(96px, 10vh, 138px)) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

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

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .character-preview-backdrop {
    inset: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: min(clamp(580px, min(var(--preview-panel-width), var(--preview-panel-max-height) * 5 / 7), 94vw), calc(100dvw - 24px)) !important;
    max-height: calc(100dvh - 16px) !important;
    transform: translate(-50%, -50%) !important;
    --preview-frame-bind-outset-x: clamp(42px, calc(var(--select-frame-outset-x) * 2.1), 84px) !important;
    --preview-frame-bind-outset-y: clamp(62px, calc(var(--select-frame-outset-y) * 2.05), 106px) !important;
    --preview-copy-drop: clamp(18px, 2.4vh, 30px) !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-card-outer-h: clamp(258px, calc((100dvh - clamp(286px, 34vh, 330px)) / 2), 316px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-gap: clamp(11px, 3vw, 16px) !important;
    --select-frame-outset-x: clamp(12px, 3.4vw, 16px) !important;
    --select-frame-outset-y: clamp(18px, 4vw, 24px) !important;
    --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
    --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + clamp(8px, 1.9vh, 12px)) !important;
    --select-skill-h: clamp(20px, calc(var(--select-card-outer-h) * 0.072), 30px) !important;
    --select-skill-gap: clamp(4px, calc(var(--select-card-outer-h) * 0.012), 8px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 20px), calc(100dvw - 6px)) !important;
    height: calc(var(--character-scroll-two-rows) + clamp(82px, 14vh, 122px)) !important;
    max-height: calc(100dvh - 10px) !important;
    transform: translate(-50%, -50%) !important;
    padding: clamp(26px, 5dvh, 46px) 6px clamp(10px, 2dvh, 18px) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: 100% !important;
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(72px, 12vh, 118px)) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

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

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: min(clamp(440px, min(var(--preview-panel-width), var(--preview-panel-max-height) * 5 / 7), 88vw), calc(100dvw - 18px)) !important;
    max-height: calc(100dvh - 12px) !important;
    transform: translate(-50%, -50%) !important;
    --preview-frame-bind-outset-x: clamp(34px, 8.8vw, 58px) !important;
    --preview-frame-bind-outset-y: clamp(48px, 13.6vw, 84px) !important;
    --preview-copy-drop: clamp(18px, 3.2vh, 30px) !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 92 !important;
  transform-origin: center center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) .preview-art#previewArt.preview-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
  left: 0 !important;
  right: auto !important;
  margin: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-preview::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-preview::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-scroll::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-scroll::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #previewArt#previewArt.preview-art::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #previewArt#previewArt.preview-art::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .preview-card-outer-frame.preview-card-outer-frame {
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  width: auto !important;
  height: auto !important;
  position: absolute !important;
  z-index: 18 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

/* V1.28Beta-select-final-scale-lock7-zoom-two-row:
 * enforce two-row full visibility, larger thumbnail scale, centered enlarged preview and clean overlay.
 */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
  --select-gap: clamp(15px, 1.9vw, 22px) !important;
  --select-card-outer-h: clamp(340px, calc((100dvh - clamp(150px, 14vh, 175px)) / 2), 430px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
  --select-frame-outset-x: clamp(16px, 2.1vw, 22px) !important;
  --select-frame-outset-y: clamp(22px, 3vw, 30px) !important;
  --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
  --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
  --select-skill-h: clamp(22px, calc(var(--select-card-h) * 0.112), 34px) !important;
  --select-skill-gap: clamp(5px, calc(var(--select-card-outer-h) * 0.012), 9px) !important;
  --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + clamp(8px, 1.3vh, 14px)) !important;
  --preview-panel-width: calc(100% * 0.62) !important;
  --preview-panel-max-height: calc((100dvh - clamp(46px, 7vh, 86px)) * 0.76) !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 4 + var(--select-gap) * 3 + clamp(10px, 1.6vw, 22px)), calc(100dvw - 10px)) !important;
    height: calc(var(--character-scroll-two-rows) + clamp(88px, 8vh, 112px)) !important;
    max-height: calc(100dvh - 10px) !important;
    transform: translate(-50%, -50%) !important;
    padding: clamp(42px, 4.8vh, 56px) clamp(24px, 2.2vw, 40px) clamp(16px, 1.8vh, 24px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: 100% !important;
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(84px, 9vh, 128px)) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

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

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) > .character-preview-backdrop {
    inset: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(54px, calc(var(--select-frame-outset-x) * 2.5), 104px) !important;
    --preview-frame-bind-outset-y: clamp(74px, calc(var(--select-frame-outset-y) * 2.5), 128px) !important;
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(clamp(640px, min(var(--preview-panel-width), var(--preview-panel-max-height) * 5 / 7), 94vw), calc(100dvw - 18px)) !important;
    max-height: calc(100dvh - 14px) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 120 !important;
    --preview-copy-drop: clamp(18px, 2.4vh, 30px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art {
    width: 100% !important;
    aspect-ratio: 5 / 7 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    --preview-card-frame-x: clamp(56px, 7vw, 98px) !important;
    --preview-card-frame-y: clamp(80px, 10vh, 132px) !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-card-outer-h: clamp(300px, calc((100dvh - clamp(118px, 10vh, 136px)) / 2), 380px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-frame-outset-x: clamp(13px, 3.2vw, 18px) !important;
    --select-frame-outset-y: clamp(16px, 3.8vw, 22px) !important;
    --select-card-h: calc(var(--select-card-outer-h) - (var(--select-frame-outset-y) * 2)) !important;
    --select-card-w: calc(var(--select-card-outer-w) - (var(--select-frame-outset-x) * 2)) !important;
    --select-skill-h: clamp(20px, calc(var(--select-card-h) * 0.108), 30px) !important;
    --select-skill-gap: clamp(4px, calc(var(--select-card-outer-h) * 0.012), 8px) !important;
    --character-scroll-two-rows: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + clamp(8px, 1.6vh, 12px)) !important;
    --preview-panel-max-height: calc((100dvh - clamp(42px, 6vh, 74px)) * 0.8) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 6px), calc(100dvw - 4px)) !important;
    height: calc(var(--character-scroll-two-rows) + clamp(84px, 11vh, 114px)) !important;
    max-height: calc(100dvh - 6px) !important;
    transform: translate(-50%, -50%) !important;
    padding: clamp(24px, 4.6vh, 40px) 4px clamp(10px, 1.8vh, 12px) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: 100% !important;
    height: var(--character-scroll-two-rows) !important;
    max-height: calc(100dvh - clamp(62px, 10vh, 96px)) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

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

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

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    --preview-frame-bind-outset-x: clamp(40px, 9.6vw, 62px) !important;
    --preview-frame-bind-outset-y: clamp(56px, 16vw, 88px) !important;
    position: fixed !important;
    left: 50dvw !important;
    top: 50dvh !important;
    width: min(clamp(480px, min(var(--preview-panel-width), var(--preview-panel-max-height) * 5 / 7), 94vw), calc(100dvw - 8px)) !important;
    max-height: calc(100dvh - 10px) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 120 !important;
    --preview-copy-drop: clamp(16px, 2.8vh, 28px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art {
    width: 100% !important;
    aspect-ratio: 5 / 7 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) {
    --preview-card-frame-x: clamp(34px, 10vw, 58px) !important;
    --preview-card-frame-y: clamp(50px, 17vw, 82px) !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-preview::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-preview::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-scroll::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect.preview-open .character-scroll::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #previewArt#previewArt.preview-art::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select #previewArt#previewArt.preview-art::after {
  content: none !important;
  display: none !important;
  background: none !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-preview#characterPreview#characterPreview#characterPreview#characterPreview:not([hidden]) #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .preview-card-outer-frame.preview-card-outer-frame {
  top: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  right: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  left: calc(var(--preview-frame-bind-outset-x) * -1) !important;
  width: auto !important;
  height: auto !important;
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 18 !important;
  opacity: 1 !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* V1.28Beta-preview-mode-visible1: keep special-mode entry visible in opened character cards. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) .preview-copy.preview-copy {
  overflow: visible !important;
  z-index: 42 !important;
}

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

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

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewModeSkill#previewModeSkill.preview-mode-skill-tip:not([hidden]) > .skill-inline-text.skill-inline-text {
  display: inline-block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) #characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden]) #previewSkill#previewSkill.preview-skill-tip {
  order: 1 !important;
  align-self: flex-start !important;
  margin: 0 !important;
}

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

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

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

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

/* V1.28Beta-mobile-faction-tabs-clear1:
   Phone character select: faction tabs must not sit on top of the first-row card
   frame. Move only the tab row upward and remove its translucent blur backing. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs {
    top: calc(0px - clamp(16px, 4.7vw, 23px)) !important;
    z-index: 20040 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

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