/* The paper and every handled prop are transparent PNG assets; CSS supplies UI, liquid and motion. */
.l8-barista-game{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#102d30}
.l8-barista-game[hidden]{display:none}
.l8-barista-hud{gap:5px;align-items:center;font-size:13px;white-space:nowrap}
.l8-barista-hud span{flex:1;text-align:center}.l8-barista-hud span:first-child{text-align:left}.l8-barista-hud span:last-child{text-align:right}
.l8-barista-board{position:relative;min-height:0;overflow:hidden;background:linear-gradient(#102d306b,#102d3096),url('assets/cafe-background.png') center/cover}
.l8-barista-board:before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(transparent,#0b2529b5);pointer-events:none}
.l8-ready-shelf{position:absolute;z-index:2;top:2%;left:3%;width:52%;height:58px;display:flex;gap:2px;align-items:center;justify-content:flex-start}
.l8-ready-shelf img{min-width:0;width:19%;max-height:53px;object-fit:contain;filter:drop-shadow(0 3px 3px #06191a);animation:l8-shelf-in .28s ease-out both}
.l8-order-paper{position:absolute;z-index:4;right:2%;top:4px;width:58%;max-width:250px;height:34%;max-height:220px;background:url('assets/level08-barista/order-paper.png') center/100% 100% no-repeat;filter:drop-shadow(0 8px 7px #07191ab0);transform-origin:top center}
.l8-order-paper.enter{animation:l8-ticket-in .4s cubic-bezier(.22,1.2,.42,1) both}
.l8-paper-copy{position:absolute;inset:18% 26% 8% 22%;display:flex;flex-direction:column;color:#2e241c;text-align:left;overflow:visible}
.l8-paper-copy small{font-size:10px;font-weight:900;letter-spacing:.12em;color:#745238}
.l8-paper-copy strong{font:700 clamp(12px,3.2vw,17px)/1.08 Georgia,serif;margin:4px 0 5px;overflow-wrap:anywhere}
.l8-paper-recipe{display:grid;gap:3px;font-size:clamp(11px,2.7vw,14px);font-weight:800;line-height:1.1}
.l8-paper-recipe div{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:start;gap:4px;border-bottom:1px dashed #8d725666}
.l8-paper-recipe span{min-width:0;overflow-wrap:break-word}
.l8-paper-recipe b{white-space:nowrap;text-align:right}
.l8-paper-note{font-size:10px;margin-top:6px;color:#694f3c;font-style:italic}
.l8-cup-slot{position:absolute;z-index:3;left:5%;top:27%;width:44%;height:38%;max-height:255px;opacity:0;filter:drop-shadow(0 12px 10px #071d1fc0)}
.l8-barista-board[data-phase="active"] .l8-cup-slot,.l8-barista-board[data-phase="ticket"] .l8-cup-slot.incoming{opacity:1}
.l8-cup-slot.incoming{opacity:1;animation:l8-cup-in .55s cubic-bezier(.17,.87,.29,1.1) both}
.l8-cup-assembly{position:absolute;inset:0;transition:opacity .2s,transform .3s;pointer-events:none}
.l8-glass-img{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.l8-liquid{position:absolute;z-index:3;left:28%;right:28%;bottom:20%;height:61%;overflow:hidden;border-radius:2px 2px 18px 18px;clip-path:polygon(0 0,100% 0,96% 87%,88% 100%,12% 100%,4% 87%)}
.l8-liquid-segment{position:absolute;left:0;right:0;bottom:calc(var(--segment)*25%);height:25%;background:linear-gradient(90deg,#ffffff65,var(--liquid) 30%,var(--liquid) 80%,#1a120f55);animation:l8-liquid-rise .22s ease-out both;box-shadow:0 2px 4px #24191032 inset}
.l8-liquid-segment:last-child:after{content:"";position:absolute;left:0;right:0;top:-3px;height:8px;border-radius:50%;background:var(--liquid);box-shadow:inset 0 2px 3px #fff7,0 1px 2px #27170e44}
.l8-liquid:not(:empty):after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff6e85e 0%,transparent 19%,transparent 78%,#ffffff44 100%);pointer-events:none}
.l8-measure-marks{position:absolute;z-index:4;right:6%;top:21%;height:46%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:#102b2e;font-size:12px;font-weight:900;pointer-events:none}
.l8-measure-marks span{padding:1px 3px;background:#fff3dbea;border:1px solid #143337;border-radius:3px;box-shadow:0 1px 2px #081e2066}
.l8-measure-marks span:before{content:"";display:inline-block;width:11px;margin-right:3px;border-top:2px solid currentColor;vertical-align:middle}
.l8-cup-slot.wrong{animation:l8-cup-shake .34s ease-in-out}
.l8-finished-drink{position:absolute;z-index:4;left:-6%;top:-8%;width:112%;height:112%;object-fit:contain;filter:drop-shadow(0 6px 7px #071b1c);animation:l8-drink-reveal .35s ease-out both}
.l8-finished-drink[hidden]{display:none}
.l8-cup-slot.complete .l8-cup-assembly{opacity:0;transform:scale(.88)}
.l8-cup-slot.dispatch .l8-finished-drink{animation:l8-drink-out .52s cubic-bezier(.2,.6,.25,1) both}
.l8-pour-stream{position:absolute;z-index:5;left:49%;top:5%;width:7px;height:46%;border-radius:8px;background:linear-gradient(90deg,#ffffffb0,var(--stream),#321b1466);transform-origin:top;opacity:0;pointer-events:none}
.l8-pour-stream.pouring{animation:l8-pour .42s ease-in-out both}
.l8-cup-caption{position:absolute;z-index:3;left:2%;right:48%;top:66%;text-align:center;color:#fff6e4;font-size:13px;font-weight:900;letter-spacing:.12em;text-shadow:0 2px 5px #041c1d}
.l8-empty-button{position:absolute;z-index:3;left:27%;top:72%;transform:translateX(-50%);min-height:28px;padding:3px 12px;border:1px solid #f8e3b5;border-radius:18px;background:#173d40e8;color:#fff7de;font-size:12px;font-weight:800;cursor:pointer}
.l8-empty-button:disabled{opacity:.35;cursor:default}
.l8-ingredient-tray{position:absolute;z-index:6;left:2%;right:2%;bottom:1%;height:clamp(92px,22%,130px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:5px;border:2px solid #d3b985b5;border-radius:12px;background:#163639e8;box-shadow:0 7px 18px #051919aa}
.l8-ingredient{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;padding:3px 1px;border:1px solid #ecdbbb66;border-radius:8px;background:#f4e8d4;color:#173d40;cursor:grab;touch-action:none;user-select:none}
.l8-ingredient img{position:relative;max-width:94%;width:100%;height:100%;min-height:0;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 3px #14282966);will-change:transform}
.l8-ingredient b{font-size:11px;line-height:1.1;letter-spacing:.01em;text-align:center;pointer-events:none}
.l8-ingredient.dragging{z-index:10;cursor:grabbing}
.l8-ingredient.dragging img{z-index:1;filter:drop-shadow(0 9px 7px #081d20b5)}
.l8-ingredient:focus-visible,.l8-empty-button:focus-visible{outline:3px solid #efb967;outline-offset:2px}
.l8-barista-help{min-height:43px;margin:0;padding:10px 8px;background:#fff9e9;color:#173f42;text-align:center;font-size:13px;line-height:1.2}
@keyframes l8-ticket-in{from{transform:translateY(-120%) rotate(-7deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
@keyframes l8-cup-in{from{transform:translate(12%,68%) scale(.28);opacity:0}70%{opacity:1}to{transform:translate(0,0) scale(1);opacity:1}}
@keyframes l8-liquid-rise{from{transform:translateY(100%);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes l8-cup-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes l8-drink-reveal{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes l8-drink-out{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(180px) scale(.45)}}
@keyframes l8-pour{0%{opacity:0;transform:scaleY(0)}25%,75%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.3)}}
@keyframes l8-shelf-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:390px){.l8-paper-recipe{font-size:11px}.l8-paper-note{font-size:9px;margin-top:3px}.l8-ingredient b{font-size:10px}}
@media(max-height:700px){.l8-order-paper{height:31%}.l8-cup-slot{top:25%;height:37%}.l8-cup-caption{top:63%}.l8-empty-button{top:69%}.l8-ingredient-tray{height:92px}.l8-ready-shelf{height:42px}.l8-ready-shelf img{max-height:40px}}
@media(prefers-reduced-motion:reduce){.l8-order-paper.enter,.l8-cup-slot.incoming,.l8-cup-slot.wrong,.l8-finished-drink,.l8-cup-slot.dispatch .l8-finished-drink,.l8-pour-stream.pouring,.l8-ready-shelf img{animation-duration:.01ms}}