/* V1.294Beta: keep the pre-match flow calm and continuous from room to selection. */
:root {
  --character-select-minimal-art: url("assets/ui/room-lobby/room-lobby-minimal-celestial-v1.webp?v=V1.288Beta-room-lobby-minimal1");
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot.app.character-select-app
  > .arena {
  background-color: #dceaf4 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(9, 31, 51, 0.28) 0%,
      rgba(22, 57, 83, 0.1) 24%,
      rgba(255, 255, 255, 0.02) 58%,
      rgba(12, 37, 59, 0.22) 100%
    ),
    var(--character-select-minimal-art) !important;
  background-position: center center, center center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll, scroll !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot.app.character-select-app
  > .arena::before,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot.app.character-select-app
  > .arena::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode)
    #appRoot#appRoot#appRoot#appRoot.app.character-select-app
    > .arena {
    background-image:
      linear-gradient(
        180deg,
        rgba(9, 31, 51, 0.24) 0%,
        rgba(22, 57, 83, 0.08) 22%,
        rgba(255, 255, 255, 0.01) 56%,
        rgba(12, 37, 59, 0.18) 100%
      ),
      var(--character-select-minimal-art) !important;
    background-position: center center, 50% 48% !important;
    background-size: cover, cover !important;
    background-attachment: scroll, scroll !important;
  }
}

/* The layout remains for sizing only; the page owns the sole visible background. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-select-layout.character-select-layout.character-select-layout {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-select-layout.character-select-layout.character-select-layout::before,
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect.character-select
  .character-select-layout.character-select-layout.character-select-layout::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* The opened character card must sit directly on the same arena scene. Keep the
   interaction-catching backdrop, but remove its second painted/darkened layer. */
html body:not(.maintenance-mode)
  #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app
  #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open
  .character-preview-backdrop.character-preview-backdrop.character-preview-backdrop {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Exact cascade locks for the legacy desktop and mobile preview selectors. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect#characterSelect#characterSelect#characterSelect.character-select.preview-open:not([hidden]) .character-preview-backdrop.character-preview-backdrop,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app #characterSelect#characterSelect.character-select.preview-open .character-preview-backdrop,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select.preview-open .character-preview-backdrop {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}