/* V7 · Shatter, on top of V2's, V4's, and V5's game styles: the hard
   crash's shattered glass (v7/tiles.mjs). */

/* The glass keeps its color until the red floods out through it from the
   impact point (the shatter layers draw the red), while its rim and glow
   turn red behind the flood. */
.tile.crashed .tile-front { background: linear-gradient(180deg, rgba(46, 72, 66, .64), rgba(20, 38, 34, .7)); transition-duration: .32s; transition-delay: .08s; }
/* The splinters fly over the tiles beside it. */
.tile.crashed { z-index: 2; }
/* The layers in the face line up with the tile's outer box. */
.tile-crack.shatter-glass, .tile-crack.shatter-front { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.tile-crack.shatter-burst { z-index: 2; }
/* The cooled cracks and the heat round the hole glow on like embers until
   the board resets. */
.shatter-ember { animation: shatter-ember 1.3s ease-in-out 1.1s infinite alternate; }
@keyframes shatter-ember { to { opacity: .55; } }
.lite .shatter-ember { animation: none; }
/* A tile beside the crash catches the red on the side facing it. */
.tile-glow.alarm { background: radial-gradient(circle at var(--glow-at, 50% 50%), rgba(255, 84, 104, .62), transparent 68%); }
@media (prefers-reduced-motion: reduce) {
  .shatter-ember { animation: none; }
}