.step13-area .s13-stage { position:absolute; inset:0; container-type:size; isolation:isolate; }
.step13-area .s13-object,
.step13-area .s13-shaker { position:absolute; box-sizing:border-box; user-select:none; -webkit-user-select:none; }
.step13-area .s13-object { object-fit:fill; }
.step13-area .s13-object img { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.step13-area .s13-tool { touch-action:none; cursor:grab; z-index:8; }
.step13-area .s13-dragging { z-index:20; cursor:grabbing; }
/* Backdrop art 2; cup 5; falling ingredients 21; tools 8; drag 20; Reset 30. */
.step13-area .s13-box { left:6%; top:13%; width:34%; height:31.4%; z-index:2; pointer-events:none; }
/* The box's front wall drawn again over the resting scoop, so the scoop sits inside the ice. */
.step13-area .s13-box-front { z-index:9; clip-path:inset(41% 0 0 0); }
.step13-area .s13-bowl { left:58%; top:65%; width:35%; height:29.5%; z-index:2; pointer-events:none; }
/* Shaker source PNGs contain horizontal alpha gutters: crop only those gutters. */
.step13-area .s13-shaker { z-index:5; overflow:hidden; cursor:default; }
.step13-area .s13-shaker > img { position:absolute; left:-41%; top:0; width:178%; height:100%; pointer-events:none; }
.step13-area .s13-lid { overflow:hidden; }
.step13-area .s13-lid > img { left:-33%; width:163%; }
.step13-area .s13-sealed { cursor:pointer; z-index:9; }
.step13-area .s13-shaker.s13-glow { cursor:pointer; }
.step13-area .s13-glow { animation:s13-glow 1s ease-in-out infinite alternate; }
.step13-area .s13-ingredient { transition:opacity .45s ease; }
.step13-area .s13-faded { opacity:0; pointer-events:none; }
/* The pouring window ends inside the opening, above the opaque front rim. */
.step13-area .s13-pour-clip { position:absolute; left:22%; top:41%; width:10%; height:16.5%; overflow:hidden; z-index:21; pointer-events:none; }
.step13-area .s13-pearl,
.step13-area .s13-ice { position:absolute; display:block; top:-12%; width:16%; aspect-ratio:1; }
.step13-area .s13-pearl { border-radius:50%; background:radial-gradient(circle at 30% 25%, #fff7d6 0 8%, #9a4a16 14%, #4b1907 45%, #200b03 90%); box-shadow:inset -.15cqw -.15cqw .2cqw #210a03; }
.step13-area .s13-ice { width:29%; border-radius:20%; border:.15cqw solid #91c7ee; box-sizing:border-box; background:linear-gradient(135deg, #fff 5%, #d5f0ff 28%, #7fb9ee 57%, #e8f8ff 75%); }
.step13-area .s13-actor { position:absolute; inset:0; z-index:7; opacity:0; pointer-events:none; transform-origin:43% 94%; }
.step13-area .s13-visible { opacity:1; }
.step13-area .s13-bear { position:absolute; left:4%; top:18%; height:76%; width:auto; aspect-ratio:856/1200; pointer-events:none; }
/* 47 transparent frames (8 x 6) cut from the opening video; the bear fills 95% of a frame's height. */
.step13-area .s13-shake-anim { position:absolute; left:2%; top:15.6%; height:80%; aspect-ratio:290/396; opacity:0; pointer-events:none;
  background:url(../p13_bear_shake.webp) 0 0 / 800% 600% no-repeat; }
.step13-area .s13-shake-anim.s13-visible { opacity:1; }
.step13-area .s13-hidden { opacity:0 !important; }
.step13-area .s13-held { z-index:10; }
.step13-area .step13-reset { position:absolute; right:3%; top:2%; z-index:30; border:2px solid #56351d; border-radius:10px; background:#fff1d0; padding:7px 14px; font-size:clamp(12px,1.4vw,19px); cursor:pointer; }
@keyframes s13-glow { from { filter:drop-shadow(0 0 3px #ffd400); } to { filter:drop-shadow(0 0 11px #ffd400) drop-shadow(0 0 4px #ffdf63); } }

.step13-area .step13-reset { white-space:nowrap; }