/* Load after button-art.css. Scene art replaces only the decorative SVG. */
#stage-options [data-stage="moonveil"] { --stage-painting: url("./assets/ui/stage-moonveil-v1.png"); }
#stage-options [data-stage="aurora"] { --stage-painting: url("./assets/ui/stage-aurora-v1.png"); }
#stage-options [data-stage="ember"] { --stage-painting: url("./assets/ui/stage-ember-v1.png"); }
#stage-options [data-stage="astral"] { --stage-painting: url("./assets/ui/stage-astral-v1.png"); }
#stage-options [data-stage="abyss"] { --stage-painting: url("./assets/ui/stage-abyss-v1.png"); }
#stage-options [data-stage="eclipse"] { --stage-painting: url("./assets/ui/stage-eclipse-v1.png"); }
#stage-options [data-stage="endless"] { --stage-painting: url("./assets/ui/stage-endless-v1.png"); }

#stage-options .stage-card[data-stage] > .stage-symbol {
  background: var(--stage-painting, none) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px #03060bba);
}
#stage-options .stage-card[data-stage] > .stage-symbol > svg { visibility: hidden; }

#stage-options .stage-card[aria-pressed="true"] > .stage-symbol {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--stage) 72%, transparent));
}
#stage-options .stage-card:focus-visible {
  outline: 2px solid #d6f1ff;
  outline-offset: 4px;
}

@media (forced-colors: active) {
  #stage-options .stage-card[data-stage] > .stage-symbol { background: none; filter: none; }
  #stage-options .stage-card[data-stage] > .stage-symbol > svg { visibility: visible; }
}