#cassette-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#cassette-grid {
  display: grid;
  grid-template-columns:
    var(--tile-size)
    var(--tile-size)
    var(--tile-size)
    1fr
    var(--tile-size)
    var(--tile-size)
    var(--tile-size);
  grid-auto-rows: var(--tile-size);
  will-change: transform;
}

.cassette-cell {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Placeholder mode ────────────────────────────────── */

.tile-wall       { background-color: var(--color-wall); }
.tile-wall-edge  { background-color: var(--color-wall-edge); }
.tile-empty      { background-color: transparent; }
.tile-shaft      { background-color: var(--color-shaft); }

/* Spike — red square with X */
.tile-spike {
  background-color: var(--color-spike);
}
.tile-spike::after {
  content: '\2716';
  color: #000;
  font-size: calc(var(--tile-size) * 0.5);
  font-weight: bold;
  line-height: 1;
}

/* Fruit — gold circle */
.tile-fruit {
  background-color: transparent;
}
.tile-fruit::after {
  content: '';
  display: block;
  width: calc(var(--tile-size) * 0.8);
  height: calc(var(--tile-size) * 0.8);
  background-color: var(--color-fruit);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Powerups — colored rounded squares with letter */
.tile-powerup {
  background-color: transparent;
}
.tile-powerup::after {
  content: '?';
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tile-size) * 0.85);
  height: calc(var(--tile-size) * 0.85);
  border-radius: 6px;
  color: #fff;
  font-size: calc(var(--tile-size) * 0.5);
  font-weight: bold;
  flex-shrink: 0;
}
.tile-powerup.tile-shield::after {
  content: 'S';
  background-color: var(--color-powerup-shield);
}
.tile-powerup.tile-timewarp::after {
  content: 'T';
  background-color: var(--color-powerup-timewarp);
}
.tile-powerup.tile-fullheal::after {
  content: '+';
  background-color: var(--color-powerup-fullheal);
}

/* Treasure — magenta star */
.tile-treasure {
  background-color: var(--color-treasure);
  animation: pulse 1s infinite;
}
.tile-treasure::after {
  content: '\2605';
  color: #fff;
  font-size: calc(var(--tile-size) * 0.6);
  line-height: 1;
}

/* Coin — small amber circle with C */
.tile-coin {
  background-color: transparent;
}
.tile-coin::after {
  content: 'C';
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--tile-size) * 0.55);
  height: calc(var(--tile-size) * 0.55);
  background-color: var(--color-coin);
  border-radius: 50%;
  color: #000;
  font-size: calc(var(--tile-size) * 0.3);
  font-weight: bold;
  flex-shrink: 0;
}

/* ── Coin spin animation (art mode) ──────────────────── */

@keyframes coin-spin {
  0%    { background-position: 0% 0%; }
  25%   { background-position: 100% 0%; }
  50%   { background-position: 0% 100%; }
  75%   { background-position: 100% 100%; }
  100%  { background-position: 0% 0%; }
}

.tile-coin.has-art {
  /* background-image is set inline by JS from the bg-removed blob URL */
  background-size: 200% 200%;
  background-repeat: no-repeat;
  animation: coin-spin 0.6s steps(1) infinite;
}

/* ── Spike shimmer (art mode) ───────────────────────── */
/* Sweeping diagonal light masked to the spike tile shape,
   same technique as the title logo shimmer. */
.tile-spike.spike-art {
  position: relative;
}
.tile-spike.spike-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 65%
  );
  background-size: 200% 100%;
  -webkit-mask-image: var(--spike-tile-url);
  mask-image: var(--spike-tile-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: titleShimmerBar 3s ease-in-out infinite;
  pointer-events: none;
}

/* ── Art mode overrides ──────────────────────────────── */

/* When a tilesheet tile is applied, hide placeholder visuals */
.cassette-cell.has-art {
  background-color: transparent !important;
}

/* Trim a thin border from interactive zone tiles to hide atlas
   bleed / compression artifacts at cell boundaries.  Structural
   tiles (wall, wall-edge, shaft) are excluded so they still tile
   seamlessly. */
.tile-spike.has-art,
.tile-fruit.has-art,
.tile-powerup.has-art,
.tile-treasure.has-art,
.tile-coin.has-art {
  clip-path: inset(5%);
}
.cassette-cell.has-art::after {
  display: none;
}