/* Rainbow Paint */

body {
  background: var(--cream);
}

.stage {
  background-color: var(--cream);
  /* A soft warm glow toward the middle; the paper grain tile is added by game.js. */
  background-image: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%);
}

#ghost,
#paper,
#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#ghost,
#fx {
  pointer-events: none;
}
#paper {
  touch-action: none;
}

/* ---------- Clear (wash) button, top-right ---------- */
.clear {
  --size: clamp(76px, 11vmin, 104px);
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: calc(10px + var(--safe-right));
  z-index: 10;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e6f7ff 55%, #bfe9ff 100%);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.95),
    0 6px 16px rgba(58, 46, 92, 0.18);
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* Bigger invisible hit area for imprecise fingers. */
.clear::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
}
.clear-face {
  font-size: calc(var(--size) * 0.56);
  line-height: 1;
  pointer-events: none;
}
.clear.pressed {
  transform: scale(0.86);
}
.clear.wiggle .clear-face {
  animation: wiggle 1s ease-in-out;
}
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0) scale(1);
  }
  20% {
    transform: rotate(-14deg) scale(1.12);
  }
  45% {
    transform: rotate(12deg) scale(1.12);
  }
  70% {
    transform: rotate(-6deg) scale(1.04);
  }
}

/* ---------- Paint pot tray, bottom ---------- */
.tray {
  --slot: min(calc((100vw - 12px) / 6), 17vh, 104px);
  position: absolute;
  left: 50%;
  bottom: calc(8px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  padding: 4px 0;
  border-radius: calc(var(--slot) * 0.6);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 20px rgba(58, 46, 92, 0.14);
}
.pot {
  position: relative;
  width: var(--slot);
  height: var(--slot);
  display: grid;
  place-items: center;
}
.pot .blob {
  --c: #ccc;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85) 0 12%, rgba(255, 255, 255, 0) 30%),
    var(--c);
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, 0.12),
    0 3px 6px rgba(58, 46, 92, 0.2);
  transition: transform 0.22s cubic-bezier(0.3, 1.7, 0.5, 1), box-shadow 0.2s ease;
}
.pot[data-color="red"] .blob {
  --c: hsl(356, 90%, 60%);
}
.pot[data-color="yellow"] .blob {
  --c: hsl(46, 95%, 58%);
}
.pot[data-color="green"] .blob {
  --c: hsl(135, 70%, 52%);
}
.pot[data-color="blue"] .blob {
  --c: hsl(208, 90%, 60%);
}
.pot[data-color="purple"] .blob {
  --c: hsl(275, 80%, 64%);
}
.pot[data-color="rainbow"] .blob {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85) 0 12%, rgba(255, 255, 255, 0) 30%),
    conic-gradient(
      hsl(0, 90%, 62%),
      hsl(45, 95%, 60%),
      hsl(120, 75%, 55%),
      hsl(200, 90%, 60%),
      hsl(275, 80%, 64%),
      hsl(330, 90%, 64%),
      hsl(0, 90%, 62%)
    );
}
.pot[aria-pressed="true"] .blob {
  transform: scale(1.14) translateY(-6%);
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 8px rgba(58, 46, 92, 0.12),
    0 6px 12px rgba(58, 46, 92, 0.28);
}
.pot.bounce .blob {
  animation: pot-bounce 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes pot-bounce {
  0% {
    transform: scale(0.8) translateY(0);
  }
  45% {
    transform: scale(1.3) translateY(-22%);
  }
  100% {
    transform: scale(1.14) translateY(-6%);
  }
}