:root {
  --bg-color: #f7e4c6;
  --accent: #d49a5b;
  --text: #3a1e05;
}

body {
  margin: 0;
  padding: 2rem;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, var(--bg-color), var(--accent));
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--text);
  transition: background 0.6s ease, color 0.6s ease;
  text-align: center;
  min-height: 100vh;
  position: relative;
}

#cookie {
  width: 150px;
  height: 150px;
  margin: 2rem auto;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s;
}

#cookie.pulse {
  transform: scale(1.2) rotate(10deg);
}

.sprinkle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.9;
  pointer-events: none;
}

button {
  margin: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.2s;
}

button:hover { transform: scale(1.05); opacity: 0.9; }

#magicBtn { background: linear-gradient(45deg, #ff9f1c, #ff4040); color: #fff; }

#messageBox { margin-top:1rem; font-size:1.2rem; font-weight:bold; text-shadow:1px 1px 2px #000; }

input[type="range"] { margin-left:0.5rem; vertical-align:middle; }

.controls, .music-controls { margin-top: 1rem; }