:root {
  --bg: #f5f0e6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  min-height: 100vh;
  font-family: system-ui, -apple-system, sans-serif;
}

#gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 24px;
  padding: 48px 32px;
}

.sticker {
  cursor: pointer;
  user-select: none;
  transform: translateY(var(--offset)) rotate(var(--rot));
  transition: transform 0.2s ease;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.15));
}

.sticker:hover {
  transform: translateY(calc(var(--offset) - 4px)) rotate(var(--rot)) scale(1.05);
  z-index: 2;
}

.sticker img {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 180px;
  pointer-events: none;
  -webkit-user-drag: none;
}

.sticker.wiggling {
  animation: wiggle 0.55s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: translateY(var(--offset)) rotate(var(--rot)); }
  15% { transform: translateY(var(--offset)) rotate(calc(var(--rot) - 12deg)) scale(1.08); }
  35% { transform: translateY(var(--offset)) rotate(calc(var(--rot) + 12deg)) scale(1.08); }
  55% { transform: translateY(var(--offset)) rotate(calc(var(--rot) - 8deg)) scale(1.05); }
  75% { transform: translateY(var(--offset)) rotate(calc(var(--rot) + 8deg)) scale(1.05); }
}