body {
  background: linear-gradient(135deg,#fceabb,#f8b500);
  font-family: Arial, sans-serif;
}

#score, #level { font-size: 18px; margin: 5px; text-align: center; }

#grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  margin-top: 20px;
  width: 75vw;
  max-width: 480px;
}

.cell {
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s, background-color 0.3s, opacity 0.3s;
  box-shadow: inset -3px -3px 6px rgba(255,255,255,0.5),
              inset 3px 3px 6px rgba(0,0,0,0.3),
              0 4px 6px rgba(0,0,0,0.3);
  cursor: pointer;
}

/* Animatii */
.cell.explode {
  animation: explode 0.4s forwards;
}

@keyframes explode {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.5) rotate(15deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(-15deg); opacity: 0; }
}

.cell.swap {
  animation: swap 0.2s forwards;
}

@keyframes swap {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Forme speciale */
.cell.rhombus { transform: rotate(45deg); border-radius: 0; }
.cell.square { border-radius: 0; }
.cell.triangle { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid red; background: none; }