/* Rare-rune light only: a painted 16-frame filmstrip, confined inside the crystal.
   15 steps traverse exactly frames 0..15; alternate avoids a hard loop seam. */
#game .tile.world .gem::after {
  content: ''; position: absolute; inset: 10% 20%; z-index: 3;
  pointer-events: none; border: 0; border-radius: 0; box-shadow: none;
  background: url('../assets/art/v4/fx_world_idle_strip_v10.webp') left center / 1600% 100% no-repeat;
  mix-blend-mode: screen; opacity: .78; filter: none; transform: none;
  animation: worldSpriteLight 2.4s steps(15, end) infinite alternate;
  animation-delay: var(--charge-delay, 0s);
}
@keyframes worldSpriteLight { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
#game .tile.world.locked .gem::after,
#game .tile.world.pop .gem::after,
#game .tile.world.fusion-source .gem::after { content: none; opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) {
  #game .tile.world .gem::after { content: none; opacity: 0; animation: none !important; }
}

/* Match-four light follows only the two close central bands in the painted art.
   Intersect the paired stripe mask with the exact sprite alpha so diamond/triangle
   corners stay empty. Calibrated centres follow each contain-rendered sprite's
   painted white cores. This mask clips additional light only, never the baked
   white bands. Screen blending cannot darken or narrow the reference artwork.
   Moving the highlight never moves the rune or either band. */
#game .tile.charged-art .gem::after {
  content: ''; display: block; position: absolute; inset: 0; z-index: 3;
  pointer-events: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
  --charged-band-mask: linear-gradient(to bottom,
    transparent calc(var(--charged-band-a, 42%) - 3%), #fff calc(var(--charged-band-a, 42%) - 3%),
    #fff calc(var(--charged-band-a, 42%) + 3%), transparent calc(var(--charged-band-a, 42%) + 3%),
    transparent calc(var(--charged-band-b, 60%) - 3%), #fff calc(var(--charged-band-b, 60%) - 3%),
    #fff calc(var(--charged-band-b, 60%) + 3%), transparent calc(var(--charged-band-b, 60%) + 3%));
  -webkit-mask-image: var(--charged-art-mask), var(--charged-band-mask);
  mask-image: var(--charged-art-mask), var(--charged-band-mask);
  mask-mode: alpha, alpha;
  -webkit-mask-size: contain, 100% 100%; mask-size: contain, 100% 100%;
  -webkit-mask-position: center, center; mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  background-image: linear-gradient(90deg, transparent 35%, color-mix(in srgb, var(--rune-light) 40%, #fff) 45%, #fff 50%, color-mix(in srgb, var(--rune-light) 40%, #fff) 55%, transparent 65%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 100% 0;
  mix-blend-mode: screen; opacity: .28; filter: none;
  animation: chargedBandShimmerH 4.2s linear infinite; animation-delay: var(--charge-delay, 0s);
}
#game .tile.charged-art.charged_v .gem::after {
  --charged-band-mask: linear-gradient(to right,
    transparent calc(var(--charged-band-a, 42%) - 3%), #fff calc(var(--charged-band-a, 42%) - 3%),
    #fff calc(var(--charged-band-a, 42%) + 3%), transparent calc(var(--charged-band-a, 42%) + 3%),
    transparent calc(var(--charged-band-b, 60%) - 3%), #fff calc(var(--charged-band-b, 60%) - 3%),
    #fff calc(var(--charged-band-b, 60%) + 3%), transparent calc(var(--charged-band-b, 60%) + 3%));
  background-image: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--rune-light) 40%, #fff) 45%, #fff 50%, color-mix(in srgb, var(--rune-light) 40%, #fff) 55%, transparent 65%);
  background-size: 100% 250%; background-position: 0 100%;
  animation: chargedBandShimmerV 4.2s linear infinite; animation-delay: var(--charge-delay, 0s);
}
@keyframes chargedBandShimmerH { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes chargedBandShimmerV { from { background-position: 0 100%; } to { background-position: 0 0%; } }
#game .tile.charged-art.selected .gem::after, #game .tile.charged-art.hint .gem::after { opacity: .16; }
#game .tile.charged-art.locked .gem::after,
#game .tile.charged-art.pop .gem::after,
#game .tile.charged-art.fusion-source .gem::after,
#game.page-hidden .tile.charged-art .gem::after,
#game #screen-battle:not(.active) .tile.charged-art .gem::after { content: none; opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) {
  #game .tile.charged-art .gem::after { content: none; opacity: 0; animation: none !important; }
}