/* Tetris tiles — guideline colors as glossy blocks */

.cell.filled.c1,
.cell.filled.c2,
.cell.filled.c3,
.cell.filled.c4,
.cell.filled.c5,
.cell.filled.c6,
.cell.filled.c7,
.piece-cell.fill.c1,
.piece-cell.fill.c2,
.piece-cell.fill.c3,
.piece-cell.fill.c4,
.piece-cell.fill.c5,
.piece-cell.fill.c6,
.piece-cell.fill.c7,
.hero-cell.on.c1,
.hero-cell.on.c2,
.hero-cell.on.c3,
.hero-cell.on.c4,
.hero-cell.on.c5,
.hero-cell.on.c6,
.hero-cell.on.c7 {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  box-shadow: none;
}

.cell.filled.c1,
.piece-cell.fill.c1,
.hero-cell.on.c1 { background-image: url("/images/pieces/c1.png?v=tx1"); } /* I cyan */

.cell.filled.c2,
.piece-cell.fill.c2,
.hero-cell.on.c2 { background-image: url("/images/pieces/c2.png?v=tx1"); } /* O/L amber */

.cell.filled.c3,
.piece-cell.fill.c3,
.hero-cell.on.c3 { background-image: url("/images/pieces/c3.png?v=tx1"); } /* T purple */

.cell.filled.c4,
.piece-cell.fill.c4,
.hero-cell.on.c4 { background-image: url("/images/pieces/c4.png?v=tx1"); } /* S green */

.cell.filled.c5,
.piece-cell.fill.c5,
.hero-cell.on.c5 { background-image: url("/images/pieces/c5.png?v=tx1"); } /* Z red */

.cell.filled.c6,
.piece-cell.fill.c6,
.hero-cell.on.c6 { background-image: url("/images/pieces/c6.png?v=tx1"); } /* J blue */

.cell.filled.c7,
.piece-cell.fill.c7,
.hero-cell.on.c7,
.drag-ghost .piece-cell.fill.c7 {
  background-image: url("/images/pieces/m2.png?v=tx1");
  box-shadow:
    0 0 10px #ffd36aee,
    0 0 22px #ffb30099,
    inset 0 0 8px #fff6;
}

@keyframes tx-gold-pulse {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 4px #c99200);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.35) drop-shadow(0 0 14px #ffe566);
    transform: scale(1.07);
  }
}

.cell.filled.c7,
.piece-cell.fill.c7 {
  animation: tx-gold-pulse 1.05s ease-in-out infinite;
}

/* Soft glow per color on board */
.board > .cell.filled.c1 { filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.35)); }
.board > .cell.filled.c2 { filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.35)); }
.board > .cell.filled.c3 { filter: drop-shadow(0 0 4px rgba(180, 70, 255, 0.35)); }
.board > .cell.filled.c4 { filter: drop-shadow(0 0 4px rgba(50, 220, 80, 0.35)); }
.board > .cell.filled.c5 { filter: drop-shadow(0 0 4px rgba(255, 60, 70, 0.35)); }
.board > .cell.filled.c6 { filter: drop-shadow(0 0 4px rgba(50, 100, 255, 0.35)); }

.drag-ghost {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(0, 240, 255, 0.25));
  opacity: 0.95;
}

.piece-preview,
.tray .piece {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Hero decorative cells on landing */
.hero-board .hero-cell.on {
  border-radius: 16%;
}

/* Ghost / preview placement tint */
.board > .cell.preview,
.board > .cell.ghost {
  background: rgba(0, 240, 255, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.45);
  border-radius: 14%;
}

.board > .cell.preview-invalid,
.board > .cell.ghost-invalid {
  background: rgba(255, 60, 80, 0.2) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 80, 100, 0.5);
}