@media (max-width: 600px) {
  .game-container {
    padding: 10px;
  }

  .middle-panel {
    padding: 16px;
    width: 100%;
    max-width: 100%;
    min-height: auto;
  }

  .game-board-container {
    align-items: center;
    justify-content: center;
  }

  .game-board {
    width: 100%;
    max-width: 320px;
    height: auto;
    padding: 8px;
    gap: 6px;
  }

  .cell {
    font-size: 24px;
  }
}
@media (max-width: 768px) {
  .game-layout {
    flex-direction: column;
    gap: 16px;
  }

  .left-panel,
  .right-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}
/* Sliding Puzzle specific tweaks (reuses vegetable-blast layout) */

.game-board {
  grid-template-columns: repeat(var(--size, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size, 4), minmax(0, 1fr));
}

.cell {
  font-size: 32px;
  background: linear-gradient(135deg, #e8f5ff 0%, #d6ecff 100%);
  border: 3px solid #5ab0ff;
}

.cell.empty {
  background: linear-gradient(135deg, #f7f7f7 0%, #eeeeee 100%);
  border-style: dashed;
  color: transparent;
  cursor: default;
}

/* Win pulse on completion */
.cell.win {
  animation: gridHighlight 0.6s ease-in-out forwards;
}