/* Transparent artwork is painted directly, with no solid colour layer or
   mask dependency. Only the approved haitang and cloud accents are added. */
:root:not(.desktopClient):not(.pcImmersion) :is(#issueOverlay, #soloComposeOverlay, #multiplayerOverlay:has(.multiplayerSetup)) > :is(.issueDialog, .multiplayerDialog) > :is(.issueDialogHead, .multiplayerDialogHead) {
  --choice-haitang: url('/assets/ui/choice-ornaments/haitang-v1.webp');
  --choice-cloud: url('/assets/ui/choice-ornaments/ruyi-cloud-v1.webp');
  --choice-flower-right: 64px;
  position: relative;
  isolation: isolate;
  min-height: 110px;
  padding-top: 20px;
  padding-bottom: 30px;
  overflow: hidden;
}

:root:not(.desktopClient):not(.pcImmersion) #multiplayerOverlay:has(.multiplayerSetup) > .multiplayerDialog > .multiplayerDialogHead {
  --choice-flower-right: 144px;
}

:root:not(.desktopClient):not(.pcImmersion) :is(#issueOverlay, #soloComposeOverlay, #multiplayerOverlay:has(.multiplayerSetup)) > :is(.issueDialog, .multiplayerDialog) > :is(.issueDialogHead, .multiplayerDialogHead)::before {
  position: absolute;
  z-index: -1;
  top: 4px;
  right: var(--choice-flower-right);
  bottom: 28px;
  width: min(26%, 190px);
  background: var(--choice-haitang) right center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
  filter: brightness(0) invert(61%) sepia(15%) saturate(770%) hue-rotate(356deg) brightness(94%) contrast(87%);
  opacity: .5;
  pointer-events: none;
  content: '';
}

/* Reserve a quiet band below the title; both cloud accents remain fully
   above the header divider, inside the added lower padding. */
:root:not(.desktopClient):not(.pcImmersion) :is(#issueOverlay, #soloComposeOverlay, #multiplayerOverlay:has(.multiplayerSetup)) > :is(.issueDialog, .multiplayerDialog) > :is(.issueDialogHead, .multiplayerDialogHead)::after {
  position: absolute;
  z-index: 0;
  right: 14px;
  bottom: 4px;
  left: 14px;
  height: 22px;
  background-color: transparent;
  background-image: var(--choice-cloud), var(--choice-cloud);
  background-position: left 2px center, right 2px center;
  background-size: 110px 22px;
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
  filter: brightness(0) invert(61%) sepia(15%) saturate(770%) hue-rotate(356deg) brightness(94%) contrast(87%);
  opacity: .6;
  pointer-events: none;
  content: '';
}

:root:not(.desktopClient):not(.pcImmersion) :is(#issueOverlay, #soloComposeOverlay, #multiplayerOverlay:has(.multiplayerSetup)) > :is(.issueDialog, .multiplayerDialog) > :is(.issueDialogHead, .multiplayerDialogHead) > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 680px), (orientation: portrait) {
  :root:not(.desktopClient):not(.pcImmersion) :is(#issueOverlay, #soloComposeOverlay, #multiplayerOverlay:has(.multiplayerSetup)) > :is(.issueDialog, .multiplayerDialog) > :is(.issueDialogHead, .multiplayerDialogHead) {
    min-height: 94px;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: 26px;
  }

  :root:not(.desktopClient):not(.pcImmersion) :is(#issueOverlay, #soloComposeOverlay, #multiplayerOverlay:has(.multiplayerSetup)) > :is(.issueDialog, .multiplayerDialog) > :is(.issueDialogHead, .multiplayerDialogHead)::before {
    right: var(--choice-flower-right);
    width: 108px;
    opacity: .38;
  }

  :root:not(.desktopClient):not(.pcImmersion) :is(#issueOverlay, #soloComposeOverlay, #multiplayerOverlay:has(.multiplayerSetup)) > :is(.issueDialog, .multiplayerDialog) > :is(.issueDialogHead, .multiplayerDialogHead)::after {
    right: 10px;
    left: 10px;
    height: 18px;
    bottom: 4px;
    background-size: 90px 18px;
    opacity: .5;
  }
}