/* V1.28Beta-codex-head-gem-safe1:
   Codex is the only portrait-crop source. Art must meet the top of the frame; select thumbnails and opened cards mirror it. */
html body:not(.maintenance-mode)
  #characterCodexDialog#characterCodexDialog#characterCodexDialog#characterCodexDialog.character-codex-dialog
  .character-codex-card.character-codex-card.character-codex-card
  .character-codex-art.character-codex-art.character-codex-art {
  --codex-art-size: auto 122% !important;
  --codex-art-position: center top !important;
  --codex-art-transform: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 62%, rgba(255, 255, 255, 0.28) 100%),
    var(--character-art, none) var(--codex-art-position) / var(--codex-art-size) no-repeat,
    radial-gradient(circle at 50% 18%, rgba(255, 239, 184, 0.25), transparent 44%),
    linear-gradient(180deg, #f8fcff 0%, #deedf6 100%) !important;
  background-position: center center, var(--codex-art-position), center center, center center !important;
  background-size: auto, var(--codex-art-size), auto, auto !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option:not(.placeholder)
  .mini-art.mini-art.mini-art,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option:not(.placeholder)
  .mini-art.mini-art.mini-art,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview.character-preview
  #previewArt#previewArt.preview-art
  > .preview-mini-art.preview-mini-art,
html body:not(.maintenance-mode)
  #characterPreview#characterPreview#characterPreview.character-preview
  #previewArt#previewArt.preview-art {
  --art-size: var(--codex-select-art-size, auto 122%) !important;
  --art-position: var(--codex-select-art-position, center top) !important;
  --select-art-transform: none !important;
  --select-art-transform-origin: center center !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
  translate: 0 0 !important;
  transform: var(--select-art-transform) !important;
  transform-origin: var(--select-art-transform-origin) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame.card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame.card-outer-frame.card-outer-frame {
  display: block !important;
  top: calc(var(--select-frame-fit-outset-y, var(--select-frame-art-bleed-y, 6px)) * -1) !important;
  right: calc(var(--select-frame-fit-outset-x, var(--select-frame-art-bleed-x, 8px)) * -1) !important;
  bottom: calc(var(--select-frame-fit-outset-y, var(--select-frame-art-bleed-y, 6px)) * -1) !important;
  left: calc(var(--select-frame-fit-outset-x, var(--select-frame-art-bleed-x, 8px)) * -1) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  background: url("assets/ui/character-card-frame-luminary-complete-v1.png?v=V1.28Beta-desire-public-frame3") center / 100% 100% no-repeat !important;
  transform: none !important;
  transform-origin: center center !important;
  z-index: 13000 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame.card-outer-frame.card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open
  .character-option.character-option.character-option.character-option.character-option.character-option.character-option[data-character="Desire"]
  > .card-outer-frame.card-outer-frame.card-outer-frame.card-outer-frame {
  top: calc(var(--select-frame-art-bleed-y, 6px) * -1) !important;
  right: calc(var(--select-frame-art-bleed-x, 8px) * -1) !important;
  bottom: calc(var(--select-frame-art-bleed-y, 6px) * -1) !important;
  left: calc(var(--select-frame-art-bleed-x, 8px) * -1) !important;
  width: auto !important;
  height: auto !important;
  transform: translate(var(--select-frame-art-shift-x, -1.75%), var(--select-frame-art-shift-y, -2.35%)) scale(var(--select-frame-art-scale, 1.04)) !important;
}

/* V1.28Beta-mobile-preview-lock-title-final1:
   Last loaded character-select guard for the mobile opened card. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #previewName#previewName#previewName,
  html body:not(.maintenance-mode)
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #previewName#previewName#previewName {
    display: block !important;
    align-self: flex-end !important;
    text-align: right !important;
  }

  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    > #lockCharacter#lockCharacter#lockCharacter#lockCharacter,
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #lockCharacter#lockCharacter#lockCharacter#lockCharacter,
  html body:not(.maintenance-mode)
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    > #lockCharacter#lockCharacter#lockCharacter#lockCharacter,
  html body:not(.maintenance-mode)
    #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview.character-preview:not([hidden])
    #lockCharacter#lockCharacter#lockCharacter#lockCharacter {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: var(
      --preview-lock-top,
      calc(100% + var(--preview-frame-bottom-outset, var(--preview-frame-bind-outset-y, 52px)) + clamp(6px, 2dvw, 12px))
    ) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: auto !important;
    align-self: auto !important;
    text-align: center !important;
  }
}