/* Optional visual layer. Remove its index.html link to restore the old effects. */
.cell:is([data-var="off"], [data-var="def"]):not([data-type="empty"]):not([data-fx]):not(.burst-particle) {
  position: relative;
  animation: none;
  filter: none;
  will-change: auto;
}

.cell:nth-child(6n + 2) { --power-phase: -0.43s; }
.cell:nth-child(6n + 3) { --power-phase: -1.17s; }
.cell:nth-child(6n + 4) { --power-phase: -0.76s; }
.cell:nth-child(6n + 5) { --power-phase: -1.81s; }
.cell:nth-child(6n + 6) { --power-phase: -2.24s; }

/* The two faces meet at a vertical edge that sweeps from left to right. */
.cell[data-var="def"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle) {
  background-image: none;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(120, 220, 255, 0.2);
}

.cell[data-var="def"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle)::before,
.cell[data-var="def"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle)::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("./assets/block_sprites.webp");
  background-repeat: no-repeat;
  background-size: var(--sheet-w) var(--sheet-h);
  background-position:
    calc(var(--vx) * -1 * var(--sprite-step) - var(--sprite-inset))
    calc(var(--vy) * -1 * var(--sprite-step) - var(--sprite-inset));
  image-rendering: pixelated;
  backface-visibility: hidden;
  animation: power-def-front 5.6s ease-in-out infinite;
  animation-delay: var(--power-phase, 0s);
}

.cell[data-var="def"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle)::after {
  animation-name: power-def-side;
  box-shadow: inset -1px 0 0 rgba(230, 250, 255, 0.3);
}

@keyframes power-def-front {
  0%, 12% {
    transform: perspective(calc(var(--cell) * 4)) translateZ(calc(var(--cell) * -0.5)) rotateY(0deg) translateZ(calc(var(--cell) * 0.5));
  }
  88%, 100% {
    transform: perspective(calc(var(--cell) * 4)) translateZ(calc(var(--cell) * -0.5)) rotateY(90deg) translateZ(calc(var(--cell) * 0.5));
  }
}

@keyframes power-def-side {
  0%, 12% {
    transform: perspective(calc(var(--cell) * 4)) translateZ(calc(var(--cell) * -0.5)) rotateY(-90deg) translateZ(calc(var(--cell) * 0.5));
  }
  88%, 100% {
    transform: perspective(calc(var(--cell) * 4)) translateZ(calc(var(--cell) * -0.5)) rotateY(0deg) translateZ(calc(var(--cell) * 0.5));
  }
}

/* Eight small arc frames: no extra DOM nodes, JS timers, or gameplay changes. */
.cell[data-var="off"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle) {
  box-shadow: 0 0 5px rgba(255, 220, 80, 0.24);
}

.cell[data-var="off"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle)::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: url("./assets/powerup-electric.svg") 0 0 / 800% 100% no-repeat;
  animation: power-off-arcs 1.12s steps(7, end) infinite;
  animation-delay: var(--power-phase, 0s);
}

@keyframes power-off-arcs {
  to { background-position: 100% 0; }
}

/* Mini boards retain readable static sprites rather than idle power-up motion. */
.grid.mini .cell:is([data-var="off"], [data-var="def"]):not([data-fx]) {
  animation: none !important;
  filter: none;
}

.grid.mini .cell[data-var="def"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle) {
  background-image: url("./assets/block_sprites.webp");
}

.grid.mini .cell:is([data-var="off"], [data-var="def"])::before,
.grid.mini .cell:is([data-var="off"], [data-var="def"])::after {
  content: none !important;
  animation: none !important;
}

/* Preserve the original readable sprite when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .cell[data-var="def"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle) {
    background-image: url("./assets/block_sprites.webp");
  }
  .cell:is([data-var="off"], [data-var="def"])::before,
  .cell:is([data-var="off"], [data-var="def"])::after {
    content: none !important;
    animation: none !important;
  }
}