@charset "utf-8";

:root { --ink: #181317; --cream: #f8ead4; --cream2: #e8c095; --red: #f15f4b; --yellow: #ffc64f; --acid: #dfff55; --teal: #24cdb7; --violet: #a66af4; --line: #4c2b24; --safe-top: env(safe-area-inset-top,0px); --safe-right: env(safe-area-inset-right,0px); --safe-bottom: env(safe-area-inset-bottom,0px); --safe-left: env(safe-area-inset-left,0px); --vvh: 100dvh; --ease: cubic-bezier(.2,.8,.2,1); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background: var(--ink); font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif; color: var(--ink); }

button { font: inherit; }

.stage { position: relative; width: 100vw; height: var(--vvh); min-height: 320px; overflow: hidden; isolation: isolate; background: radial-gradient(90% 58% at 50% -8%,rgba(255,255,255,.92),transparent 58%),linear-gradient(158deg,#fff2df 0%,var(--cream) 54%,var(--cream2) 100%); user-select: none; touch-action: manipulation; }

.stage::before { content: ""; position: absolute; inset: 0px; z-index: -4; pointer-events: none; background: linear-gradient(16deg, transparent 0px, transparent 50%, rgba(92, 52, 36, 0.12) 50.15%, rgba(92, 52, 36, 0.12) 50.36%, transparent 50.5%), linear-gradient(-13deg, transparent 0px, transparent 68%, rgba(92, 52, 36, 0.09) 68.1%, rgba(92, 52, 36, 0.09) 68.32%, transparent 68.45%), repeating-linear-gradient(90deg, rgba(86, 49, 35, 0.035) 0px, rgba(86, 49, 35, 0.035) 1px, transparent 1px, transparent 64px); }

.stage::after { content: ""; position: absolute; left: -10vw; right: -10vw; bottom: calc(-38px + var(--safe-bottom)); height: 21vh; min-height: 145px; z-index: -3; background: repeating-linear-gradient(135deg, rgb(141, 64, 55) 0px, rgb(141, 64, 55) 20px, rgb(166, 76, 63) 20px, rgb(166, 76, 63) 40px, rgb(117, 51, 46) 40px, rgb(117, 51, 46) 42px); clip-path: polygon(0px 44%, 30% 10%, 55% 32%, 72% 8%, 100% 38%, 100% 100%, 0px 100%); box-shadow: rgba(88, 45, 35, 0.25) 0px -18px 50px; }

.topbar { position: absolute; top: calc(var(--safe-top) + 14px); left: calc(var(--safe-left) + 15px); right: calc(var(--safe-right) + 15px); display: flex; align-items: center; justify-content: space-between; z-index: 70; pointer-events: none; }

.brand { font-size: 10px; font-weight: 1000; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.78; }

.brand b { color: rgb(169, 59, 49); }

.wave-meter { font-size: 10px; font-weight: 1000; letter-spacing: 0.08em; padding: 6px 9px; border-radius: 999px; background: rgba(24, 19, 23, 0.86); color: rgb(255, 255, 255); box-shadow: rgba(30, 16, 14, 0.12) 0px 5px 20px; }

.mission { position: absolute; top: calc(var(--safe-top) + 53px); left: 50%; transform: translateX(-50%) translateY(-5px); z-index: 68; padding: 8px 12px; border-radius: 999px; background: rgb(255, 248, 231); border: 2px solid rgba(76, 43, 36, 0.18); box-shadow: rgba(35, 20, 18, 0.13) 0px 8px 24px; font-size: 11px; font-weight: 1000; letter-spacing: 0.05em; white-space: nowrap; opacity: 0; transition: .2s var(--ease); pointer-events: none; }

.mission.show { opacity: 1; transform: translateX(-50%) translateY(0px); }

.food { position: absolute; right: var(--target-right); top: var(--target-top); width: var(--target-width); height: var(--target-height); z-index: 16; filter: drop-shadow(rgba(86, 47, 29, 0.23) 0px 13px 11px); transform: rotate(var(--target-rotate)); pointer-events: none; }

.food svg { width: 100%; height: 100%; overflow: visible; }

.plate-shadow { fill: rgba(80, 45, 33, 0.18); transform: translateY(7px); }

.plate { fill: rgb(255, 248, 229); stroke: rgb(123, 75, 59); stroke-width: 3; }

.pizza-piece { transform-box: fill-box; transform-origin: center center; transition: opacity .18s var(--ease),transform .24s var(--ease),filter .18s; }

.pizza-piece .cheese { fill: rgb(255, 214, 93); stroke: rgb(85, 48, 40); stroke-width: 3; stroke-linejoin: round; }

.pizza-piece .crust { fill: none; stroke: rgb(222, 138, 71); stroke-width: 12; stroke-linecap: round; }

.pizza-piece .pep { fill: rgb(228, 81, 76); stroke: rgb(123, 39, 49); stroke-width: 2; }

.pizza-piece .olive { fill: rgb(104, 170, 97); stroke: rgb(53, 100, 60); stroke-width: 2; }

.pizza-piece.gone { opacity: 0.1; transform: scale(0.5); filter: grayscale(0.5) blur(1px); }

.center-dot { fill: rgb(255, 214, 93); stroke: rgb(85, 48, 40); stroke-width: 2; }

.food.alert { animation: foodpulse .36s var(--ease); }

.spawn-hole { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + clamp(32px,6vh,65px)); width: min(54vw, 270px); height: 55px; transform: translateX(-50%); z-index: 1; pointer-events: none; }

.spawn-hole::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 4px; height: 28px; background: radial-gradient(rgb(28, 19, 21) 0px, rgb(28, 19, 21) 28%, rgba(73, 43, 35, 0.42) 40%, transparent 70%); }

.spawn-hole i { position: absolute; bottom: 19px; height: 4px; background: rgb(69, 37, 31); border-radius: 9px; transform-origin: left center; }

.spawn-hole i:nth-child(1) { width: 72px; left: 12%; transform: rotate(6deg); }

.spawn-hole i:nth-child(2) { width: 92px; left: 38%; transform: rotate(-9deg); }

.spawn-hole i:nth-child(3) { width: 68px; right: 10%; transform: rotate(8deg); }

.bug, .helper { position: absolute; left: 0px; top: 0px; margin: 0px; padding: 0px; border: 0px; background: transparent; z-index: 30; cursor: pointer; outline: none; touch-action: manipulation; transform-origin: center center; will-change: transform; }

.bug:focus-visible, .helper:focus-visible { outline: 4px solid var(--teal); border-radius: 50%; }

.bug .elevation { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translate3d(0,0,0); transition: transform .13s var(--ease); }
.bug .pose { position: absolute; inset: 0; transform: rotate(var(--pose-angle,0deg)); transform-origin: 50% 50%; will-change: transform; }

.bug .actor-layer { position: absolute; inset: 0; z-index: var(--actor-layer-z); pointer-events: none; }
.bug .actor-layer .visual { z-index: auto; }

.bug .visual, .helper .visual { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; }
/* One body-owned shadow; legs keep geometry/animation but never duplicate it. */
.bug .visual-body, .helper .visual { filter: var(--visual-filter, drop-shadow(rgba(58, 30, 24, 0.3) 0px 8px 7px)); }

.bug svg, .helper svg { width: 100%; height: 100%; overflow: visible; }

.bug .shadow, .helper .shadow { position: absolute; left: 50%; top: 74%; width: 56%; height: 16%; border-radius: 50%; background: rgba(40, 22, 20, 0.23); filter: blur(3px); transform: translate(-50%, -50%); z-index: 1; transition: .13s var(--ease); }

.bug { width: 116px; height: 128px; }

.bug .visual { width: 76%; height: 90%; }

.leg, .ant { stroke: rgb(33, 21, 24); stroke-linecap: round; fill: none; }

.leg { stroke-width: 7; }

.ant { stroke-width: 4; }

.shell { fill: var(--shell); stroke: rgb(37, 23, 26); stroke-width: 3; }

.head { fill: var(--head); }

.back { fill: var(--back); stroke: rgb(30, 18, 18); stroke-width: 3; }

.stripe { fill: none; stroke: var(--stripe); stroke-width: var(--stripe-width); stroke-dasharray: var(--stripe-dash); stroke-linecap: round; opacity: 0.92; }

.spot { fill: var(--spot); stroke: rgb(43, 28, 36); stroke-width: 1.7; opacity: var(--spot-opacity); }

.eye { fill: rgb(255, 248, 201); stroke: rgb(36, 23, 26); stroke-width: 1; }

.pupil { fill: rgb(26, 16, 18); }

.grin { fill: none; stroke: rgb(255, 240, 198); stroke-width: 3; stroke-linecap: round; opacity: 0.9; }

.wing-flipbook { position: absolute; left: -6%; top: 7%; width: 112%; height: 74%; opacity: 0; z-index: 2; pointer-events: none; transition: top .12s ease, opacity .12s ease; }

.wing-flipbook-svg { width: 100%; height: 100%; overflow: visible; }

.wing-frame { opacity: 0; }

.wing-silhouette { fill: rgba(112, 226, 221, .7); stroke: rgb(42, 72, 80); stroke-width: 3; stroke-linejoin: round; }

.wing-veins { fill: none; stroke: rgba(255, 250, 215, .9); stroke-width: 3; stroke-linecap: round; }

.bug.preflight .wing-flipbook { top: 4%; opacity: .72; }

.bug.preflight .wing-frame-c { opacity: 1; }

.bug.airborne .wing-flipbook, .bug.escaping .wing-flipbook { top: -2%; opacity: 1; }

.bug.airborne .wing-frame-a, .bug.escaping .wing-frame-a { animation: wingFrameA var(--wing-flap-ms,180ms) steps(1,end) infinite; }
.bug.airborne .wing-frame-b, .bug.escaping .wing-frame-b { animation: wingFrameB var(--wing-flap-ms,180ms) steps(1,end) infinite; }

.bug.airborne .elevation, .bug.escaping .elevation { transform: translate3d(0,-18%,0); }

.bug.airborne .visual, .bug.escaping .visual { transform: translate(-50%, -50%) scale(1.04); }
.bug.airborne .visual-body, .bug.escaping .visual-body { filter: drop-shadow(rgba(58, 30, 24, 0.2) 0px 22px 14px); }

.bug.airborne .shadow, .bug.escaping .shadow { top: 83%; transform: translate(-50%, -50%) scale(0.62); opacity: 0.42; }

.trail { position: absolute; left: 50%; top: 52%; width: 105%; height: 52%; transform: translate(-50%, -50%); z-index: 0; opacity: 0; background: repeating-linear-gradient(100deg, transparent 0px, transparent 7px, rgba(240, 91, 69, 0.4) 8px, rgba(240, 91, 69, 0.4) 11px, transparent 12px, transparent 20px); clip-path: polygon(0px 30%, 100% 0px, 100% 100%, 0px 70%); }

.bug.panic .trail, .bug.rocket-dash .trail { opacity: 0.85; animation: 0.16s ease 0s infinite alternate none running trailpulse; }

.bug.panic .visual { animation: 0.13s ease 0s infinite alternate none running panicbody; }

.rocket-pods { position: absolute; z-index: 3; left: 50%; top: 74%; width: var(--rocket-pods-width); height: 32%; transform: translate(-50%, -50%); opacity: var(--rocket-pods-opacity); pointer-events: none; }

.rocket-pods { filter: drop-shadow(rgba(32,25,30,.38) 0 3px 2px); }

.rocket-pods::before, .rocket-pods::after { content: ""; position: absolute; bottom: 4%; width: 24%; height: 60%; border-radius: 5px 5px 10px 10px; background: rgb(69, 65, 90); border: 3px solid rgb(33, 25, 30); }

.rocket-pods::before { left: 16%; transform: rotate(7deg); }

.rocket-pods::after { right: 16%; transform: rotate(-7deg); }

.exhaust { position: absolute; left: 50%; bottom: -46%; width: 88%; height: 82%; transform: translateX(-50%); opacity: 0; z-index: 2; pointer-events: none; }

/* V26 stage/world composition: one bounded track, at most outgoing + incoming during transition. */
.world-track{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;overflow:hidden;contain:layout paint style}
.world-scene{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.stage-camera-rig,.stage-camera-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.stage-camera-scene{transform-origin:50% 50%}
.camera-panorama{position:absolute;left:50%;top:50%;transform-origin:50% 50%;background:radial-gradient(22% 22% at 17% 24%,rgba(255,205,118,.22) 0%,rgba(255,190,100,.08) 43%,transparent 74%),radial-gradient(28% 30% at 10% 42%,rgba(103,190,235,.18) 0%,rgba(85,147,211,.07) 47%,transparent 77%),radial-gradient(34% 30% at 72% 18%,rgba(154,218,224,.18),transparent 66%),linear-gradient(90deg,#27283b 0%,#171827 19%,#11131f 29%,#1d262c 38%,#384b52 50%,#253239 68%,#192329 100%)}
.camera-world-object{position:absolute;left:0;top:0;transform-origin:50% 50%;pointer-events:none;backface-visibility:hidden}
.camera-kitchen-glow{border-radius:50%;background:radial-gradient(circle,rgba(255,205,118,.18),rgba(255,190,100,.04) 45%,transparent 72%)}
.camera-fore-edge{background:linear-gradient(90deg,rgba(11,16,20,.92),rgba(40,53,58,.95),rgba(9,13,16,.92));box-shadow:0 0 40px rgba(0,0,0,.32)}
.camera-speed-streaks{position:absolute;inset:-8% -14%;z-index:47;pointer-events:none;opacity:0;transform-origin:50% 50%;background:repeating-linear-gradient(96deg,transparent 0 24px,rgba(216,246,255,.09) 25px,transparent 27px 63px),linear-gradient(90deg,transparent 0 14%,rgba(181,229,236,.08) 46%,transparent 78%)}
.camera-vignette{position:absolute;inset:0;z-index:50;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,transparent 48%,rgba(0,0,0,.34) 100%)}
.stage.camera-moving .stage-camera-scene,.stage.camera-moving .camera-panorama,.stage.camera-moving .camera-world-object{will-change:transform}
.stage.camera-moving .camera-speed-streaks{will-change:transform,opacity}
.stage.camera-moving .camera-vignette{will-change:opacity}
.scene-kitchen-night{background:radial-gradient(42% 31% at 82% 18%,rgba(255,205,118,.22) 0%,rgba(255,190,100,.08) 42%,transparent 73%),radial-gradient(54% 39% at 13% 34%,rgba(103,190,235,.18) 0%,rgba(85,147,211,.07) 46%,transparent 76%),linear-gradient(158deg,#27283b 0%,#171827 54%,#11131f 100%)}
.scene-conveyor-run{background:radial-gradient(70% 42% at 75% 12%,rgba(154,218,224,.18),transparent 65%),linear-gradient(158deg,#384b52 0%,#253239 58%,#192329 100%)}
.scene-conveyor-run .service-wall{position:absolute;inset:var(--scene-wall-inset);border:3px solid rgba(219,231,222,.26);background:repeating-linear-gradient(90deg,rgba(231,240,232,.08) 0 1px,transparent 1px 58px),linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08));border-radius:18px}
.scene-conveyor-run .delivery-bay{position:absolute;right:var(--scene-bay-right);top:var(--scene-bay-top);width:var(--scene-bay-width);height:var(--scene-bay-height);border:4px solid rgba(231,240,232,.4);border-radius:14px;background:linear-gradient(135deg,rgba(15,24,29,.55),rgba(81,118,125,.18));box-shadow:0 0 30px rgba(93,205,213,.12) inset}
.scene-conveyor-run .conveyor{position:absolute;left:var(--scene-belt-left);right:var(--scene-belt-right);bottom:var(--scene-belt-bottom);height:var(--scene-belt-height);border-top:7px solid #192226;border-bottom:7px solid #192226;background:repeating-linear-gradient(90deg,#61757b 0 52px,#43555c 52px 58px);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.scene-conveyor-run .conveyor i{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border:5px solid #172126;border-radius:50%;background:#a5b3b4}.scene-conveyor-run .conveyor i:nth-child(1){left:8%}.scene-conveyor-run .conveyor i:nth-child(2){left:28%}.scene-conveyor-run .conveyor i:nth-child(3){left:48%}.scene-conveyor-run .conveyor i:nth-child(4){left:68%}.scene-conveyor-run .conveyor i:nth-child(5){left:88%}
.camera-world-object.service-wall{border:3px solid rgba(219,231,222,.26);background:repeating-linear-gradient(90deg,rgba(231,240,232,.08) 0 1px,transparent 1px 58px),linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08));border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.12)}
.camera-world-object.delivery-bay{border:4px solid rgba(231,240,232,.4);border-radius:14px;background:linear-gradient(135deg,rgba(15,24,29,.68),rgba(81,118,125,.22));box-shadow:0 0 30px rgba(93,205,213,.12) inset}
.camera-world-object.conveyor{border-top:7px solid #192226;border-bottom:7px solid #192226;background:repeating-linear-gradient(90deg,#61757b 0 52px,#43555c 52px 58px);box-shadow:0 18px 34px rgba(0,0,0,.32)}
.camera-world-object.conveyor i{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border:5px solid #172126;border-radius:50%;background:#a5b3b4}
.stage.service-raid{background:#253239;color:#f6f0de}.stage.service-raid::before,.stage.service-raid::after{opacity:.18}
.stage[data-target-kind="delivery-box"] .food{filter:drop-shadow(0 13px 12px rgba(0,0,0,.33))}
.delivery-shadow{fill:rgba(5,12,15,.3)}.delivery-box{fill:#e0aa58;stroke:#312822;stroke-width:4;stroke-linejoin:round}.delivery-lid{fill:none;stroke:#60472e;stroke-width:4;stroke-linejoin:round}.delivery-tape{fill:#e86759;stroke:#69372f;stroke-width:3}.delivery-seal{fill:#dfff55;stroke:#283126;stroke-width:3;transition:opacity .18s var(--ease),transform .22s var(--ease);transform-origin:center}.delivery-seal.gone{opacity:.12;transform:scale(.45)}.delivery-arrow{fill:none;stroke:#fff1c7;stroke-width:7;stroke-linecap:round}
.food.stage-transition-out{transition:transform var(--stage-food-fade-ms,260ms) var(--stage-transition-easing,ease-in-out),opacity var(--stage-food-fade-ms,260ms) ease;transform:rotate(var(--target-rotate)) scale(.96);opacity:0}
.food.stage-target-reveal{animation:targetReveal var(--target-reveal-ms,440ms) cubic-bezier(.2,.8,.2,1)}
.bug.falling .elevation{animation:airRaiderFall var(--wing-fall-ms,430ms) cubic-bezier(.3,.2,.3,1)}.bug.falling .wing-flipbook{opacity:.38;top:4%}.bug.falling .wing-frame-c{opacity:1}
@keyframes airRaiderFall{0%{transform:translate3d(0,-18%,0) rotate(0)}70%{transform:translate3d(0,2%,0) rotate(320deg)}100%{transform:translate3d(0,0,0) rotate(360deg)}}
@keyframes targetReveal{0%{opacity:.25;transform:scale(.9)}70%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@media (max-width:430px){.scene-conveyor-run .delivery-bay{right:var(--scene-bay-right-compact);width:var(--scene-bay-width-compact)}}
@media (prefers-reduced-motion:reduce){.camera-speed-streaks,.camera-vignette{display:none}.stage-camera-scene,.camera-panorama,.camera-world-object{will-change:auto!important}.food.stage-transition-out{transition:none!important;opacity:0}.food.stage-target-reveal,.bug.falling .elevation{animation:none!important}}