.puzzle-area {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.8fr);
}
.puzzle-top {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.shuffle-btn,
.restart-btn {
  background: linear-gradient(180deg, #73d564 0%, #49c158 100%);
  color: #fff;
  min-width: 156px;
}

.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  touch-action: manipulation;
}

.tile,
.tile-empty {
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 900;
}

.tile {
  color: #0b1323;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.24);
  transition: transform 140ms ease;
  touch-action: manipulation;
}

.tile:active {
  transform: scale(0.97);
}

.tile-empty {
  border: 2px dashed rgba(138, 180, 255, 0.2);
  background: rgba(99, 181, 233, 0.12);
}

.tile-1 { background: #8ed9ff; }
.tile-2 { background: #ffd84d; }
.tile-3 { background: #ff9c42; }
.tile-4 { background: #73d564; }
.tile-5 { background: #ffb4d0; }
.tile-6 { background: #a5b8ff; }
.tile-7 { background: #ffa9a0; }
.tile-8 { background: #9af0d2; }