/* Tiny raster highlights from the existing 1024 × 1820 palace photograph.
   Each 20px source crop becomes a soft golden mote; no new image is required. */
.gold-dust {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  contain: layout paint;
}
.gold-dust[data-active='true'] { opacity: 1; }
.gold-mote {
  position: absolute;
  display: block;
  width: var(--mote-size,4px);
  height: var(--mote-size,4px);
  border-radius: 50%;
  pointer-events: none;
  background-image: url('assets/bg-palace.webp');
  background-repeat: no-repeat;
  background-size: calc(var(--mote-size) * 51.2) calc(var(--mote-size) * 91);
  background-position: calc(var(--mote-size) * -22.2) calc(var(--mote-size) * -34.3);
  filter: sepia(.65) saturate(1.65) brightness(1.14) blur(var(--mote-softness, .2px));
  opacity: 0;
}
.gold-mote[data-sprite='1'] { background-position: calc(var(--mote-size) * -22.2) calc(var(--mote-size) * -33.15); }
.gold-mote[data-sprite='2'] { background-position: calc(var(--mote-size) * -29.2) calc(var(--mote-size) * -33.2); }
.gold-heart {
  position: absolute;
  top: -8%;
  display: block;
  width: var(--heart-size,13px);
  height: var(--heart-size,13px);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(145deg,#f9db79,#c49125 75%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21C9 18.5 2 13.6 2 7.8A5.1 5.1 0 0 1 12 6.4a5.1 5.1 0 0 1 10 1.4c0 5.8-7 10.7-10 13.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21C9 18.5 2 13.6 2 7.8A5.1 5.1 0 0 1 12 6.4a5.1 5.1 0 0 1 10 1.4c0 5.8-7 10.7-10 13.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: blur(var(--heart-softness,.15px));
}
.sg-gate .sg-world { z-index: 0; }
.sg-world > .gold-heart-field { z-index: 1; }
.sg-gate .sg-object { z-index: 2; }
.sg-gate > .gold-dust { z-index: 1; }
.sg-gate .sg-actions,.sg-gate .sg-skip { z-index: 2; }
.hero > .gold-dust { z-index: -1; }
@media (prefers-reduced-motion: reduce) {
  .gold-dust { display: none; transition: none; }
}