/* Square markers (ZombieFish's tombs, any `mark` effect): a small glyph in the top-right corner of a square, above the
   squares and pieces, never catching the pointer. Drawn by web/js/square-marks-view.mjs into #square-marks. */
.square-marks{position:absolute;inset:0;pointer-events:none;container-type:size}
.square-marks .smark{position:absolute;width:12.5%;height:12.5%;z-index:2}
.square-marks .smark span{position:absolute;right:3%;top:2%;font-size:4cqw;line-height:1;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(255,255,255,.6))}

/* Blasts (an `explosion` effect, BlowFish): on the position right after it, a translucent burst over the 3×3 it covered and a
   faint 💥 on every square it cleared. Drawn by web/js/blasts-view.mjs into #blasts; clipped to the board; never catches the pointer. */
.blasts{position:absolute;inset:0;pointer-events:none;overflow:hidden;container-type:size}
.blasts .burst{position:absolute;width:37.5%;height:37.5%;z-index:3;border-radius:50%;
  background:radial-gradient(circle, rgba(255,236,160,.62) 0%, rgba(255,160,40,.42) 38%, rgba(230,70,20,.18) 62%, rgba(230,70,20,0) 72%);
  animation:blast-in .45s ease-out both}
.blasts .scorch{position:absolute;width:12.5%;height:12.5%;z-index:3;display:grid;place-items:center}
.blasts .scorch span{font-size:6cqw;line-height:1;opacity:.55;filter:drop-shadow(0 0 2px rgba(0,0,0,.45))}
@keyframes blast-in{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.blasts .burst{animation:none}}