/* 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: var(--cell-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;
  /* Perspective raises the turning rim just beyond the cell. Allow that
     vertical overshoot while keeping both faces inside the column width. */
  overflow: visible;
  clip-path: inset(-8% 0);
  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: var(--game-art, 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: auto;
  backface-visibility: hidden;
  /* Resolve cell-relative geometry once, outside the animated transform. */
  font-size: var(--cell);
  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(4em) translateZ(-.5em) rotateY(0deg) translateZ(.5em);
  }
  88%, 100% {
    transform: perspective(4em) translateZ(-.5em) rotateY(90deg) translateZ(.5em);
  }
}

@keyframes power-def-side {
  0%, 12% {
    transform: perspective(4em) translateZ(-.5em) rotateY(-90deg) translateZ(.5em);
  }
  88%, 100% {
    transform: perspective(4em) translateZ(-.5em) rotateY(0deg) translateZ(.5em);
  }
}

/* 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; }
}

/* Face details stay inside the existing special-block artwork. */
.cell[data-type="M"]:is([data-var="medusa"], [data-var^="midas"]):not([data-fx="preclear"]):not(.burst-particle):not(.crumb-piece) {
  position: relative;
  --face-skin: #bca877;
}
.cell[data-type="M"][data-var^="midas"] { --face-skin: #b69b3c; }
.cell[data-type="M"]:is([data-var="medusa"], [data-var^="midas"]):not([data-fx="preclear"]):not(.burst-particle):not(.crumb-piece)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 5% 2.3% at 40% 43%, var(--face-skin) 75%, transparent 100%),
    radial-gradient(ellipse 5% 2.3% at 59% 43%, var(--face-skin) 75%, transparent 100%);
  opacity: 0;
  animation: special-face-blink 5.6s linear infinite;
}
@keyframes special-face-blink {
  0%, 36%, 42%, 74%, 80%, 100% { opacity: 0; }
  38%, 40%, 76%, 78% { opacity: 1; }
}
.cell[data-type="M"][data-var="medusa"]:not([data-fx="preclear"]):not(.burst-particle):not(.crumb-piece)::before {
  filter: drop-shadow(0 0 calc(var(--cell) * .018) #b8dd7899);
}
.cell[data-type="M"][data-var^="midas"]:not([data-fx="preclear"]):not(.burst-particle):not(.crumb-piece)::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  /* Gold arcs split at the left edge and travel along both rims to the right. */
  background: url("../assets/midas-electric.svg") 0 0 / 1200% 100% no-repeat;
  animation: midas-edge-arcs 1.68s steps(11, end) infinite;
  animation-delay: var(--power-phase, 0s);
}
@keyframes midas-edge-arcs {
  to { background-position: 100% 0; }
}
.grid.mini .cell[data-type="M"]::before,
.grid.mini .cell[data-type="M"]::after {
  content: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .cell[data-type="M"]::before, .cell[data-type="M"]::after {
    content: none !important;
    animation: none !important;
  }
}

/* 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: var(--cell-filter, none);
}

.grid.mini .cell[data-var="def"]:not([data-type="empty"]):not([data-fx]):not(.burst-particle) {
  background-image: var(--game-art, 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: var(--game-art, 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;
  }
}