/* scene: 跳跳醬汁 */

/* ─── Scene wrapper — 固定右下、半透明、不擋互動 ─── */
.scene-box {
  position: fixed; right: 4%; bottom: 4%;
  width: 320px; height: 320px;
  z-index: 9990; pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.3));
}
@media (max-width: 768px) { .scene-box { width: 200px; height: 200px; right: 2%; bottom: 2%; } }
@media (max-width: 480px) { .scene-box { display: none; } }
@media (prefers-reduced-motion: reduce) { .scene-box { display: none !important; } }
.scene-box * { position: absolute; }


.qq-pasta { width:160px; height:24px; bottom:80px; left:50%; margin-left:-80px;
  background: linear-gradient(90deg,#fbbf24,#fef3c7,#fbbf24); border-radius: 20px;
  animation: qq-bounce 1.2s ease-in-out infinite;
  box-shadow: 0 4px 8px rgba(0,0,0,.2); }
@keyframes qq-bounce { 0%,100%{transform:scaleY(1) translateY(0);} 30%{transform:scaleY(1.4) translateY(-15px);}
  60%{transform:scaleY(.7) translateY(0);} }
.sauce-ball { width:30px; height:30px; border-radius: 50%;
  animation: sauce-bounce 1.5s ease-in-out infinite; }
.sauce-ball.s1{top:80px; left:60px; background: radial-gradient(circle at 30% 30%,#fca5a5,#ec4899); animation-delay:0s;}
.sauce-ball.s2{top:60px; left:140px; background: radial-gradient(circle at 30% 30%,#86efac,#34d399); animation-delay:.3s;}
.sauce-ball.s3{top:90px; right:60px; background: radial-gradient(circle at 30% 30%,#fde68a,#fbbf24); animation-delay:.6s;}
.sauce-ball.s4{top:50px; right:120px; background: radial-gradient(circle at 30% 30%,#fca5a5,#ec4899); animation-delay:.9s;}
@keyframes sauce-bounce { 0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(180px) scale(.5,1.5);} }
.macaron { width:34px; height:24px; border-radius: 50%;
  background: linear-gradient(180deg,#fce7f3 0%,#ec4899 30%,#ec4899 70%,#fce7f3 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.macaron.m1{bottom:120px; left:80px; animation: macaron-spin 4s linear infinite;}
.macaron.m2{bottom:140px; right:90px;
  background: linear-gradient(180deg,#dcfce7 0%,#34d399 30%,#34d399 70%,#dcfce7 100%);
  animation: macaron-spin 5s linear infinite reverse;}
.macaron.m3{bottom:170px; left:50%; margin-left:-17px;
  background: linear-gradient(180deg,#fed7aa 0%,#fbbf24 30%,#fbbf24 70%,#fed7aa 100%);
  animation: macaron-spin 6s linear infinite;}
@keyframes macaron-spin { to { transform: rotate(360deg); } }
.smile-bowl { width:120px; height:60px; bottom:40px; left:50%; margin-left:-60px;
  background: linear-gradient(180deg,#fce7f3,#fbcfe8); border-radius: 0 0 60px 60px;
  border-top: 8px solid #ec4899;
  box-shadow: 0 8px 16px rgba(0,0,0,.2); }
.smile-bowl::after { content:'^_^'; position:absolute; bottom:6px; left:0; right:0; text-align:center;
  color:#ec4899; font-weight:900; font-size:24px; font-family: monospace; }