/* ================= Potion Mix ================= */
.potion-row { align-items: center; gap: 6vmin; margin-top: 9vmin; }
.potion-bottle.potion-pouring { z-index: 50; }

.potion-card {
  background: #fff; border-radius: 5vmin; padding: 2.5vmin 3vmin; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 1vmin;
  animation: popIn .6s var(--pop) backwards;
}
.potion-drop-icon { width: 20vmin; height: 20vmin; animation: bob 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
.potion-recipe {
  display: flex; align-items: center; gap: 1vmin; font-size: 5vmin; font-weight: 800;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .4s;
}
.potion-recipe.show { max-height: 10vmin; opacity: 1; }
.potion-recipe.show .potion-dot { animation: bounce .5s var(--pop); }
.potion-dot { display: inline-block; width: 6vmin; height: 6vmin; border-radius: 50%; box-shadow: inset 0 -.6vmin 0 rgba(0, 0, 0, .15); }

/* Cauldron */
.potion-cauldron { position: relative; width: 46vmin; height: 40vmin; animation: popIn .6s var(--pop) .1s backwards; }
.potion-body {
  position: absolute; left: 0; right: 0; top: 5vmin; bottom: 5vmin; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #8577b0, #5a4d85 55%, #43386a);
  border-radius: 45% 45% 50% 50% / 25% 25% 75% 75%;
  box-shadow: inset 0 -2vmin 0 rgba(0, 0, 0, .18), var(--shadow);
  display: grid; place-items: center;
}
.potion-face { width: 20vmin; height: 20vmin; margin-top: 4vmin; }
.potion-face .mouth { stroke: #fff; }
.potion-rim {
  position: absolute; left: -2vmin; right: -2vmin; top: 2.6vmin; height: 6vmin; z-index: 2;
  border-radius: 50%; background: #6b5d98; box-shadow: inset 0 -.8vmin 0 rgba(0, 0, 0, .2);
}
.potion-liquid {
  position: absolute; left: 1.5vmin; right: 1.5vmin; top: 3.6vmin; height: 3.8vmin; z-index: 3;
  border-radius: 50%; background: var(--liquid); transition: background .7s, transform .5s, opacity .5s;
  box-shadow: inset 0 .6vmin 0 rgba(255, 255, 255, .45);
  animation: potionSlosh 2s ease-in-out infinite;
}
@keyframes potionSlosh { 0%, 100% { border-radius: 50% 50% 50% 50%; } 50% { border-radius: 45% 55% 50% 50% / 60% 40% 60% 40%; } }
.potion-liquid span {
  position: absolute; bottom: 30%; width: 3vmin; height: 3vmin; border-radius: 50%;
  background: color-mix(in srgb, var(--liquid) 55%, #fff); transition: background .7s;
  animation: potionBubble 2s ease-in infinite;
}
@keyframes potionBubble {
  0% { transform: translateY(0) scale(.3); opacity: 0; }
  20% { opacity: 1; }
  80% { transform: translateY(-5vmin) scale(1); opacity: 1; }
  100% { transform: translateY(-6vmin) scale(1.5); opacity: 0; }
}
.potion-fire { position: absolute; left: 20%; right: 20%; bottom: -2vmin; z-index: 0; display: flex; justify-content: space-around; }
.potion-fire span { font-size: 8vmin; line-height: 1; transform-origin: 50% 100%; animation: potionFlicker .35s ease-in-out infinite alternate; }
.potion-fire span:nth-child(2) { animation-delay: -.15s; font-size: 9vmin; }
.potion-fire span:nth-child(3) { animation-delay: -.25s; }
@keyframes potionFlicker { from { transform: scale(1, .9) rotate(-4deg); } to { transform: scale(.92, 1.1) rotate(4deg); } }
.potion-legs::before, .potion-legs::after {
  content: ''; position: absolute; bottom: 2vmin; width: 4vmin; height: 5vmin; background: #43386a; border-radius: 0 0 2vmin 2vmin; z-index: 0;
}
.potion-legs::before { left: 18%; } .potion-legs::after { right: 18%; }

.potion-cauldron.drop-hover .potion-liquid { box-shadow: 0 0 3vmin #fff, inset 0 .6vmin 0 rgba(255, 255, 255, .45); }
.potion-fizz .potion-liquid { box-shadow: 0 0 5vmin var(--liquid), inset 0 .6vmin 0 rgba(255, 255, 255, .5); }
.potion-fizz .potion-liquid span { animation-duration: .45s !important; }
.potion-fizz .potion-body { animation: potionHappy .3s ease-in-out infinite alternate; }
.potion-fizz .potion-face .mouth { opacity: 0; }
.potion-fizz .potion-face .grin { opacity: 1; }
@keyframes potionHappy { from { transform: rotate(-2deg) scale(1.02, .98); } to { transform: rotate(2deg) scale(.98, 1.03); } }
.potion-drain .potion-liquid { transform: scale(.3, .5); opacity: .2; }

/* Bottles */
.potion-tray { gap: 5vmin; }
.potion-bottle { width: 16vmin; height: 22vmin; }
.potion-bottle.potion-used { opacity: .45; }
.potion-bottle.potion-used .potion-bottle-liquid { opacity: .25; }
.potion-bottle.potion-pouring > * { animation: none; }
.potion-bottle.potion-pouring .mouth { opacity: 0; }
.potion-bottle.potion-pouring .grin { opacity: 1; }

.potion-droplet { position: absolute; width: 2vmin; height: 2.8vmin; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.potion-smoke { position: absolute; border-radius: 50%; background: rgba(110, 100, 130, .5); }