/* Reuse the original home artwork behind menus, never behind active Realms. */
body[data-magic-background]:not(.online-match):not(.replay-expanded):not(.page-has-gameplay),
body:not(.game-active):has(#setupScreen:not([hidden])){
  background:#291939;
  isolation:isolate;
  min-height:100vh;
}
body[data-magic-background]:not(.online-match):not(.replay-expanded):not(.page-has-gameplay)::before,
body:not(.game-active):has(#setupScreen:not([hidden]))::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(#21132f55,#21132f77),url("assets/villain-magic-background.png") center/cover no-repeat;
}
/* Keep high-contrast mode free of decorative artwork. */
.options-high-contrast body[data-magic-background]::before,
.options-high-contrast body:has(#setupScreen:not([hidden]))::before{
  background:#291939!important;
}

/* Full-screen menu artwork stays independent of the user's page zoom. */
html:has(body[data-magic-background="viewport"]){
  min-height:100%;
  background:#291939;
  isolation:isolate;
}
/* Size the artwork to the visible screen, not these long scrolling pages. */
html:has(body[data-magic-background="viewport"])::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(#21132f55,#21132f77),url("assets/villain-magic-background.png");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

}
html body[data-magic-background="viewport"]:not(.online-match):not(.replay-expanded):not(.page-has-gameplay){background:transparent}
html body[data-magic-background="viewport"]::before{display:none}
html.options-high-contrast:has(body[data-magic-background="viewport"]){background:#291939!important}

html.options-high-contrast:has(body[data-magic-background="viewport"])::before{display:none}
html[data-reward-background="enchanted-emerald"] {--reward-menu-art:radial-gradient(ellipse at 20% 20%,#30664c,#0e231e 65%,#090e15);}
html[data-reward-background="divine-night"] {--reward-menu-art:radial-gradient(ellipse at 70% 0%,#786436,#262142 55%,#100f1c);}
html[data-reward-background]:not([data-reward-background="default"]):has(body[data-magic-background="viewport"])::before,
html[data-reward-background]:not([data-reward-background="default"]) body[data-magic-background]:not(.online-match):not(.replay-expanded):not(.page-has-gameplay)::before,
html[data-reward-background]:not([data-reward-background="default"]) body:not(.game-active):has(#setupScreen:not([hidden]))::before {background:var(--reward-menu-art);}