.service-stage{position:relative;height:100%;overflow:hidden;background:#17383b url("assets/cafe-background.png") center 42%/cover no-repeat;display:flex;flex-direction:column;padding:10px 12px 0}
.service-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(#102d3060,#102d3020 48%,#102d30c7);pointer-events:none}
.service-hud,.order-ticket-card,.service-copy,.service-tray,.conveyor-shell{position:relative;z-index:1}
.service-hud{display:flex;justify-content:space-between;align-items:center;color:#fff7e8;text-shadow:2px 2px #102d30;margin-bottom:8px;font-size:15px}
.service-hud strong{display:grid;place-items:center;width:58px;height:36px;background:#17383be8;border:2px solid #f1dfbd;font-size:18px}
.service-hud span b{color:#f2b39f}
.order-ticket-card{min-height:112px;padding:9px 10px;background:#fff7e8f2;border:4px solid #17383b;box-shadow:5px 5px 0 #d68576}
.order-ticket-card>span{display:block;color:#555653;font-size:13px;font-weight:900;letter-spacing:.15em}
.order-icons{height:72px;display:flex;align-items:center;justify-content:center;gap:2px}
.order-icons img{width:min(17vw,69px);height:65px;object-fit:contain;transition:filter .15s,opacity .15s}
.order-icons img.done{filter:grayscale(1);opacity:.28}
.service-copy{align-self:center;margin-top:8px;padding:6px 11px;background:#17383be8;color:#fff7e8;font-size:13px;text-align:center}
.service-tray{height:92px;margin:clamp(70px,13vh,112px) auto 6px;width:76%;display:flex;align-items:center;justify-content:center;isolation:isolate}
.service-tray-art{position:absolute;left:50%;top:50%;width:100%;height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.service-tray.drop-hover .service-tray-art{filter:drop-shadow(0 0 12px #ffe5a9)}
.service-tray-items{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:84%;height:100%;gap:1px}
.service-tray-items>span{color:#fff7e8;font-size:11px;letter-spacing:.14em;text-shadow:0 2px 3px #241b18,0 0 5px #241b18}
.service-tray-items img{flex:0 1 20%;min-width:0;height:68px;object-fit:contain;filter:drop-shadow(0 3px 2px #20140dae)}
.service-tray-items img.service-landed{animation:service-land .24s ease-out both}
.service-fly-icon{position:fixed;z-index:150;object-fit:contain;pointer-events:none;animation:service-fly .34s cubic-bezier(.25,.75,.23,1) both;filter:drop-shadow(0 4px 4px #102d3099)}
.service-drag-icon{position:fixed;z-index:151;width:72px;height:72px;object-fit:contain;pointer-events:none;transform:translate(-50%,-70%);filter:drop-shadow(0 6px 5px #102d30bb)}
.conveyor-shell{margin:auto -12px 0;padding:11px 0 12px;overflow:hidden;border-top:5px solid #0d2527;background:#294e4e}
.conveyor-belt{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:9px 10px;background:repeating-linear-gradient(90deg,#395a59 0 37px,#294847 37px 42px);border-top:3px solid #c69155;border-bottom:3px solid #c69155}
.conveyor-belt button{height:70px;padding:2px;border:2px solid #f1dfbd;background:#fff7e8dd;box-shadow:3px 3px 0 #102d30;cursor:pointer}
.conveyor-belt button{touch-action:none;user-select:none;-webkit-user-select:none}
.conveyor-belt button img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.conveyor-belt button.dragging{opacity:.6}
.conveyor-belt button.picked{opacity:.22;transform:scale(.9)}
.conveyor-belt button.wrong{animation:service-wrong .35s}
@keyframes service-wrong{25%,75%{transform:translateX(-5px);background:#f2b39f}50%{transform:translateX(5px)}}
@keyframes service-fly{from{transform:translate3d(0,0,0) scale(1);opacity:1}to{transform:translate3d(var(--fly-x),var(--fly-y),0) scale(.8);opacity:.88}}
@keyframes service-land{from{transform:translateY(-9px) scale(1.16);opacity:.45}to{transform:translateY(0) scale(1);opacity:1}}
@media(max-height:700px){.order-ticket-card{min-height:94px}.order-icons{height:57px}.order-icons img{height:53px}.service-tray{height:66px;width:66%;margin-top:clamp(44px,12vh,82px)}.service-tray-items img{height:49px}.conveyor-belt button{height:54px}}
@media(prefers-reduced-motion:reduce){.service-fly-icon,.service-tray-items img.service-landed{animation:none}}
