/* ==========================================
   Pizza Rush - Pizza Visuals, Toppings & Oven
   ========================================== */

/* ---------- Pizza Station Board ---------- */
.board {
  width: min(520px, 58vh);
  height: min(520px, 58vh);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #8f5d34, #6b3f23 72%);
  box-shadow: inset 0 0 0 14px #57331c, inset 0 0 0 18px #00000033, 0 16px 32px #00000080;
  flex-shrink: 0;
}

#pieWrap {
  position: relative;
  width: min(430px, 48vh);
  height: min(430px, 48vh);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

#pieWrap > * {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

#crust {
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 38% 32%, #f2cd8d, #e2ac60 55%, #ca8d48 78%, #a96f35);
  box-shadow: 0 10px 24px #00000073;
  transition: opacity 0.2s;
}
.doughOn #crust { opacity: 1; }

#crustCook {
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle, transparent 56%, rgba(146, 84, 14, 0.85) 67%, rgba(94, 49, 8, 0.9) 77%);
}

#sauceL {
  inset: 11%;
  opacity: 0;
  background: radial-gradient(circle at 40% 35%, #e2503c, #bd3125 72%);
}
.sauceOn #sauceL { opacity: 1; }

#cheeseRaw {
  inset: 13%;
  opacity: 0;
  border-radius: 47% 53% 52% 48%/54% 46% 52% 48%;
  background: radial-gradient(circle at 42% 36%, #ffedc4, #f6e0a6);
}
.cheeseOn #cheeseRaw { opacity: 1; }

#melt {
  inset: 13%;
  opacity: 0;
  border-radius: 47% 53% 52% 48%/54% 46% 52% 48%;
  background: radial-gradient(circle at 42% 36%, #ffd97a, #f2b23e 66%, #dd9630);
}

#bubbles {
  inset: 13%;
  opacity: 0;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 244, 214, 0.9) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 62% 30%, rgba(255, 244, 214, 0.9) 0 3%, transparent 4%),
    radial-gradient(circle at 70% 62%, rgba(255, 244, 214, 0.9) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 38% 68%, rgba(255, 244, 214, 0.85) 0 3%, transparent 4%);
}

#spots {
  inset: 13%;
  opacity: 0;
  background-image:
    radial-gradient(circle at 28% 32%, rgba(122, 60, 8, 0.5) 0 5%, transparent 6%),
    radial-gradient(circle at 66% 26%, rgba(122, 60, 8, 0.45) 0 4%, transparent 5%),
    radial-gradient(circle at 74% 62%, rgba(110, 52, 6, 0.5) 0 6%, transparent 7%),
    radial-gradient(circle at 38% 70%, rgba(122, 60, 8, 0.4) 0 5%, transparent 6%),
    radial-gradient(circle at 55% 48%, rgba(133, 70, 10, 0.35) 0 4%, transparent 5%);
}

#char {
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle, rgba(12, 6, 3, 0.25) 0 32%, rgba(12, 6, 3, 0.8) 78%);
}

#tops { inset: 0; }
#fx { inset: 0; pointer-events: none !important; }

/* ---------- Toppings ---------- */
.top {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
}

.mini .top,
.bin .sample .top {
  position: static !important;
  transform: none !important;
  display: inline-block;
  vertical-align: middle;
}

.top.ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.t-pepperoni {
  width: var(--ts, 36px);
  height: var(--ts, 36px);
  border-radius: 50%;
  border: 1.5px solid #7e1d15;
  background:
    radial-gradient(circle at 30% 62%, #7e1d15 0 9%, transparent 10%),
    radial-gradient(circle at 66% 30%, #7e1d15 0 9%, transparent 10%),
    radial-gradient(circle at 58% 72%, #8c241a 0 8%, transparent 9%),
    radial-gradient(circle at 40% 35%, #d94f3d, #a8271c 72%);
}

.t-mushroom { font-size: calc(var(--ts, 36px) * 1.15); line-height: 1; }
.t-olive {
  width: calc(var(--ts, 36px) * 0.8);
  height: calc(var(--ts, 36px) * 0.8);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4b4b57, #17171d 75%);
}
.t-olive::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 36%; height: 36%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0d0d12;
  box-shadow: 0 0 0 2px #33333f;
}

.t-pepper {
  width: calc(var(--ts, 36px) * 1.25);
  height: calc(var(--ts, 36px) * 0.55);
  border-radius: 99px;
  background: linear-gradient(180deg, #37b24d, #2b8a3e);
  box-shadow: inset 0 -3px 0 #1e6b2c;
}

.t-pineapple {
  width: calc(var(--ts, 36px) * 0.85);
  height: calc(var(--ts, 36px) * 0.85);
  border-radius: 4px;
  background: linear-gradient(135deg, #ffe066, #fcc419);
  border: 2px solid #e8a10c;
}

.t-bacon {
  width: calc(var(--ts, 36px) * 1.35);
  height: calc(var(--ts, 36px) * 0.6);
  border-radius: 99px;
  background: repeating-linear-gradient(105deg, #e8687e 0 6px, #f8a5b0 6px 9px, #d64560 9px 12px);
}

.t-jalapeno {
  width: calc(var(--ts, 26px) * 0.9);
  height: calc(var(--ts, 26px) * 0.9);
  border-radius: 50%;
  background: #d8f5a2;
  border: calc(var(--ts, 26px) * 0.18) solid #37b24d;
}

.t-basil {
  width: calc(var(--ts, 36px) * 1.05);
  height: calc(var(--ts, 36px) * 0.7);
  border-radius: 4% 70% 4% 70%;
  background: linear-gradient(135deg, #51cf66, #2f9e44);
}

.t-prosciutto {
  width: calc(var(--ts, 36px) * 1.4);
  height: calc(var(--ts, 36px) * 0.65);
  border-radius: 30% 70% 60% 40%/50% 60% 40% 50%;
  background: linear-gradient(135deg, #d90429, #ef233c 40%, #ffb4a2 75%, #b5179e);
  box-shadow: inset 0 0 2px #590d22;
}

.lay-sauce, .lay-cheese {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}

.smoke {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(4px);
  animation: puff 0.9s forwards ease-out;
}

/* ---------- Stone Oven & Flames ---------- */
.oven-col {
  background: var(--panel);
  border: 3px solid var(--wood);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  height: 100%;
  min-height: 0;
}
.oven-col h3 { font-size: 15px; letter-spacing: 2px; opacity: 0.85; text-transform: uppercase; flex-shrink: 0; }

.oven {
  width: 100%;
  flex: 1;
  min-height: 0;
  background: radial-gradient(circle at 50% 60%, #3e1b0c, #140804 85%);
  border: 3px solid #140905;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 24px #000;
}
.oven.hot { box-shadow: inset 0 0 30px #e6394677, 0 0 16px #ff450055; }

.oven-flames {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.oven.hot .oven-flames { opacity: 0.95; }
.ember-glow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: radial-gradient(ellipse at 50% 100%, #ff540099, #d0000044, transparent 70%);
  animation: emberFlicker 1.8s ease-in-out infinite alternate;
}
.flame {
  position: absolute;
  bottom: -6px;
  border-radius: 50% 50% 20% 20%/60% 60% 40% 40%;
  filter: blur(2px);
  animation: flameDance 0.7s infinite alternate ease-in-out;
}
.f1 { left: 12%; width: 28px; height: 50px; background: linear-gradient(to top, #ff0000, #ffba08); animation-delay: 0.1s; }
.f2 { left: 28%; width: 36px; height: 65px; background: linear-gradient(to top, #d00000, #faa307); animation-delay: 0.3s; }
.f3 { left: 50%; width: 44px; height: 75px; transform: translateX(-50%); background: linear-gradient(to top, #9d0208, #ffdd00); animation-delay: 0s; }
.f4 { right: 28%; width: 34px; height: 62px; background: linear-gradient(to top, #d00000, #faa307); animation-delay: 0.2s; }
.f5 { right: 12%; width: 26px; height: 48px; background: linear-gradient(to top, #ff0000, #ffba08); animation-delay: 0.4s; }

@keyframes flameDance {
  0% { transform: scaleY(0.85) scaleX(0.95); opacity: 0.85; }
  100% { transform: scaleY(1.2) scaleX(1.05) translateY(-6px); opacity: 1; }
}
@keyframes emberFlicker {
  0% { opacity: 0.75; transform: scaleY(0.9); }
  100% { opacity: 1; transform: scaleY(1.1); }
}

.slot {
  width: 100%;
  max-width: min(440px, 48vh);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

#ovenSlot #pieWrap {
  width: min(340px, 38vh);
  height: min(340px, 38vh);
  aspect-ratio: 1 / 1;
  transform: none;
}

/* Multi-Zone Bake Meter */
.bar {
  width: 100%;
  height: 22px;
  background: #00000088;
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  border: 1.5px solid #ffffff25;
  flex-shrink: 0;
  z-index: 2;
  box-shadow: inset 0 2px 4px #000000bb;
}
.zone-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #22577a 0%,
    #38a3a5 30%,
    #ffd166 48%,
    #f4a261 60%,
    #38b000 64%,
    #55a630 82%,
    #e76f51 86%,
    #d90429 93%,
    #1b0000 100%
  );
  opacity: 0.85;
}
.sweet {
  position: absolute;
  top: 0; bottom: 0;
  left: 62%; width: 22%;
  background: #2b9348ee;
  border-left: 2.5px solid #51cf66;
  border-right: 2.5px solid #51cf66;
  box-shadow: 0 0 6px #51cf66;
  z-index: 1;
}
.mark {
  position: absolute;
  top: 0; bottom: 0; width: 6px;
  background: #ffffff;
  border: 1px solid #000000bb;
  left: 0%;
  transform: translateX(-50%);
  transition: left 0.05s linear;
  z-index: 3;
  box-shadow: 0 0 4px #fff;
}

/* ---------- Keyframes ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes rise { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, -36px); opacity: 0; } }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tout { to { opacity: 0; transform: translateY(-8px); } }
@keyframes puff { 0% { transform: scale(0.6) translateY(0); opacity: 0.8; } 100% { transform: scale(2.4) translateY(-40px); opacity: 0; } }
@keyframes bannerPop { 0% { opacity: 0; transform: scale(0.5); } 20% { opacity: 1; transform: scale(1.1); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }