/* V1.28Beta: opened character-card screenshot alignment and frame breathing room. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview.character-preview:not([hidden]) {
  --bigcard-frame-side-grow: clamp(8px, 0.52dvw, 12px);
  --bigcard-frame-left-grow: var(--bigcard-frame-side-grow);
  --bigcard-frame-right-grow: var(--bigcard-frame-side-grow);
  --bigcard-frame-top-grow: clamp(8px, 0.72dvh, 13px);
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview.character-preview:not([hidden])
  #previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  top: calc((var(--preview-frame-bind-outset-y) + var(--bigcard-frame-top-grow)) * -1) !important;
  left: calc((var(--preview-frame-bind-outset-x) + var(--bigcard-frame-left-grow)) * -1) !important;
  right: calc((var(--preview-frame-bind-outset-x) + var(--bigcard-frame-right-grow)) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview.character-preview[data-character="Lollipopz"][data-mode-active="false"]:not([hidden])
  #previewArt#previewArt.preview-art[data-character="Lollipopz"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview.character-preview[data-character="Lollipopz"]:not([data-mode-key]):not([hidden])
  #previewArt#previewArt.preview-art[data-character="Lollipopz"] {
  --art-size: auto 139% !important;
  --art-position: 48.5% calc(38% + clamp(34px, 7.2dvh, 56px)) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview.character-preview:not([hidden]) {
    --bigcard-frame-side-grow: clamp(4px, 1.45dvw, 8px);
    --bigcard-frame-left-grow: var(--bigcard-frame-side-grow);
    --bigcard-frame-right-grow: var(--bigcard-frame-side-grow);
    --bigcard-frame-top-grow: clamp(5px, 1.55dvw, 9px);
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview.character-preview[data-character="Lollipopz"][data-mode-active="false"]:not([hidden])
    #previewArt#previewArt.preview-art[data-character="Lollipopz"],
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app
    #characterSelect#characterSelect.character-select.preview-open:not([hidden])
    #characterPreview#characterPreview.character-preview[data-character="Lollipopz"]:not([data-mode-key]):not([hidden])
    #previewArt#previewArt.preview-art[data-character="Lollipopz"] {
    --art-size: auto 138% !important;
    --art-position: 48.5% calc(38% + clamp(20px, 7.2dvw, 36px)) !important;
  }
}

/* Specificity lock: older portrait files repeat IDs heavily, so this final layer must win. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
  > .preview-card-outer-frame.preview-card-outer-frame,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview:not([hidden])
  #previewArt#previewArt#previewArt#previewArt#previewArt.preview-art > .preview-card-outer-frame.preview-card-outer-frame {
  top: calc((var(--preview-frame-bind-outset-y) + var(--bigcard-frame-top-grow)) * -1) !important;
  left: calc((var(--preview-frame-bind-outset-x) + var(--bigcard-frame-left-grow)) * -1) !important;
  right: calc((var(--preview-frame-bind-outset-x) + var(--bigcard-frame-right-grow)) * -1) !important;
  bottom: calc(var(--preview-frame-bind-outset-y) * -1) !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  transform: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview[data-character="Lollipopz"][data-mode-active="false"]:not([hidden])
  #previewArt#previewArt#previewArt#previewArt#previewArt.preview-art[data-character="Lollipopz"],
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden])
  #characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview#characterPreview.character-preview[data-character="Lollipopz"]:not([data-mode-key]):not([hidden])
  #previewArt#previewArt#previewArt#previewArt#previewArt.preview-art[data-character="Lollipopz"] {
  --art-size: auto 139% !important;
  --art-position: 48.5% calc(38% + clamp(34px, 7.2dvh, 56px)) !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center center, center center !important;
}