/* Preparation progress is determinate and never slides backwards. */
.boot-track{height:14px;width:84%;border:1px solid #dac8aa}
.boot-track i{width:0;animation:none;transform:none;transition:width .18s linear;background:linear-gradient(90deg,#bfd5ad,#8eb59a)}
.boot-percent{display:block;font:19px ShopJua,sans-serif;color:#7b9272;margin-top:10px}
/* SVG cutouts keep both the order and the current control readable. */
.tutorial-shade{width:100vw;height:100dvh;background:transparent;pointer-events:none}
.tutorial-coach{pointer-events:auto}.tutorial-coach .primary{width:100%;font-size:22px;margin-top:12px;min-height:48px}
.room .speech.tutorial-target{position:absolute!important}
.tutorial-target{animation:none;outline:4px solid #bd9857!important;outline-offset:4px}
.room .speech,.work-order{transition:background-color .2s}
/* The object, drag handle and traced path share one stable coordinate space. */
.craft-card{width:min(690px,100%);padding:18px 24px;overflow:hidden;gap:0}
.craft-card>.craft-heading{flex:0 0 auto}.craft-card>.craft-heading h2{font-size:27px}
.craft-card>p{margin:10px 0;font-size:21px}.craft-card>small{font:16px/1.35 ShopGowun,sans-serif}
.craft-pad{height:clamp(200px,47dvh,380px);min-height:180px;max-height:52dvh;flex:1 1 auto;cursor:grab;background:radial-gradient(ellipse at 50% 55%,#fffaf0,#efe3cf);border:2px solid #d8c09c;overflow:visible}
.craft-pad:active{cursor:grabbing}.craft-pad:focus-visible{outline:4px solid #acbb8b;outline-offset:3px}
.craft-object text{font:16px ShopJua,sans-serif;fill:#756048}
.craft-guide{stroke:#9d8c6c;stroke-width:7;stroke-dasharray:2 7;opacity:.8}
.craft-traced{stroke:#84ad91;stroke-width:8}.craft-directions{pointer-events:none}.craft-directions path{fill:none;stroke:#82653d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 1px 1px #fff9ed)}
.craft-handle{pointer-events:none}.craft-handle circle{fill:#a9c4a3;stroke:#fffaf0;stroke-width:4;filter:drop-shadow(0 2px 2px #6f624344)}
.craft-handle path{fill:none;stroke:#fffef2;stroke-width:3;stroke-linecap:round}.craft-pad .craft-start-label{font:14px ShopJua,sans-serif;fill:#796141;paint-order:stroke;stroke:#fff5e5;stroke-width:5px;stroke-linejoin:round}
.craft-progress{margin-top:12px}.craft-card .craft-feedback{font-size:20px;margin:8px 0}.craft-finished{box-shadow:inset 0 0 40px #b5d29399;border-color:#91b383}.craft-finished .craft-handle{opacity:0}
/* Ingredients fall into the container while its finished contents rise into view. */
.ingredient-motion{position:absolute;inset:0;pointer-events:none;z-index:8;--pour-color:#ceab63}
.ingredient-motion.pour-water{--pour-color:#a2d8e4}
.pour-reveal{position:absolute;width:260px;height:225px;max-width:100%;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;animation:pour-reveal 1.2s ease-in-out both}
.pour-reveal>.item{width:260px;height:225px;max-width:100%}
.pour-piece{position:absolute;left:var(--piece-x);top:0;width:32px;height:32px;animation:ingredient-drop .65s var(--piece-delay) ease-in both}.pour-piece svg{width:100%;height:100%}
.pour-stream{position:absolute;top:-14%;left:43%;width:13px;height:70%;border-radius:12px;background:linear-gradient(90deg,#fff6db,var(--pour-color));transform-origin:top center;animation:liquid-stream 1.1s ease-in-out both}
.pour-ripples{position:absolute;top:55%;left:41%;width:25%;height:35%}.pour-ripples i{position:absolute;bottom:0;left:20%;width:14px;height:14px;border-radius:50%;border:2px solid #fff8e5;animation:pour-bubbles .8s ease-out infinite}.pour-ripples i:nth-child(2){left:65%;animation-delay:.2s}.pour-ripples i:nth-child(3){left:45%;animation-delay:.4s}
.pour-label{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 12px;border-radius:10px;background:#fff7e6eb;color:#8b7659;font:18px ShopJua,sans-serif}
@keyframes pour-reveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ingredient-drop{0%{opacity:0;transform:translateY(-55px) rotate(0) scale(.7)}18%,78%{opacity:1}100%{opacity:0;transform:translateY(160px) rotate(var(--piece-rotate)) scale(.9)}}
@keyframes liquid-stream{0%{transform:scaleY(0);opacity:0}15%,80%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.15);opacity:0}}
@keyframes pour-bubbles{from{transform:translateY(0);opacity:0}30%{opacity:.9}to{transform:translateY(-55px);opacity:0}}
/* Transaction feedback uses vector coins and short Web Animations, independent of emoji support. */
#money-fx{z-index:300;pointer-events:none;overflow:hidden}.money-coin{position:absolute;display:block;width:53px;height:49px;pointer-events:none;filter:drop-shadow(0 3px 2px #82612a20)}.money-coin svg{width:100%;height:100%;display:block}
.money-amount{z-index:2;top:20%;font-size:29px;animation:none;white-space:nowrap}
@media(max-height:620px) and (min-width:601px){.craft-card{padding:12px 18px;max-width:650px}.craft-card>.craft-heading h2{font-size:24px}.craft-card>p{font-size:19px;margin:7px 0}.craft-pad{height:43dvh;max-height:43dvh;min-height:170px}.craft-card>small{font-size:15px}.craft-card .craft-feedback{font-size:18px;margin:5px 0}.craft-progress{margin-top:7px}}
@media(max-width:600px){.craft-card{padding:14px}.craft-card>.craft-heading h2{font-size:22px}.craft-card>p{font-size:19px}.craft-pad{height:40dvh;min-height:200px}.craft-card>small{font-size:15px}.pour-reveal,.pour-reveal>.item{width:100%;height:100%}.tutorial-coach{padding:14px 16px}.tutorial-coach p{font-size:20px}}
@media(max-height:500px) and (min-width:601px){.craft-card{display:flex;gap:0}.craft-pad{height:40dvh;max-height:40dvh;min-height:135px}.craft-card>small{font-size:14px}.craft-card>.craft-heading h2{font-size:23px}}

/* At unusable sizes, pause behind a readable guide instead of compressing the game. */
.viewport-guide{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 35% 20%,#fff9eb,#ede5d5);overflow:auto}
.viewport-guide[hidden]{display:none}
.viewport-card{width:min(560px,100%);text-align:center;background:#fffaf0;border:3px solid #fffdf8;border-radius:28px;padding:26px 24px;box-shadow:0 10px 35px #9a795526}
.viewport-picture{display:block;width:190px;height:140px;margin:0 auto 14px}
.viewport-card h1{font:30px/1.4 ShopJua,sans-serif;color:#796047;margin:8px 0 18px;word-break:keep-all}
.viewport-card>p{font:21px/1.65 ShopGowun,sans-serif;color:#826d57;margin:0 0 15px;word-break:keep-all}
.viewport-card .viewport-desktop-hint{font-size:18px;color:#9b856e}
.viewport-paused{margin-top:21px;padding:15px 10px;border-radius:16px;background:#e8efdd;font:18px/1.6 ShopGowun,sans-serif;color:#68805d;word-break:keep-all}
.viewport-space-copy{display:none}
.viewport-guide[data-mode=space] .viewport-space-copy{display:block}
.viewport-guide[data-mode=space] .viewport-rotate-copy,.viewport-guide[data-mode=space] .viewport-desktop-hint{display:none}
.viewport-guide[data-mode=space] .viewport-picture{width:150px;height:105px;transform:rotate(-90deg)}
.viewport-blocked{overflow:hidden}.viewport-blocked body{overflow:hidden}
.viewport-blocked #app,.viewport-blocked #modal-root,.viewport-blocked #shop-boot,.viewport-blocked #money-fx{visibility:hidden}
@media(max-width:767px),(max-height:499px){:root:not(.viewport-ready) .viewport-guide[hidden]{display:grid}:root:not(.viewport-ready) #app,:root:not(.viewport-ready) #modal-root,:root:not(.viewport-ready) #shop-boot,:root:not(.viewport-ready) #money-fx{visibility:hidden}}
@media(max-height:460px) and (min-width:601px){.viewport-card{width:min(650px,100%);padding:16px 24px;display:grid;grid-template-columns:145px 1fr;gap:5px 18px;align-items:center}.viewport-card .viewport-picture{grid-column:1;grid-row:1/4;margin:auto}.viewport-card h1{grid-column:2;font-size:27px;margin:0 0 6px}.viewport-card>p{grid-column:2;font-size:20px;margin:0}.viewport-paused{grid-column:1/-1;margin:9px 0 0;padding:10px;font-size:17px}}
@media(max-height:600px) and (max-width:600px){.viewport-picture{width:150px;height:108px;margin-bottom:8px}.viewport-card{padding:20px 17px}.viewport-card h1{font-size:27px;margin:6px 0 13px}.viewport-card>p{font-size:20px}.viewport-paused{margin-top:14px;font-size:17px}}

/* Fill artwork shares the exact responsive frame of the waiting container. */
.view-bench .drop-zone .pour-reveal{inset:0;width:100%;height:100%;max-width:none;transform:none;display:block}
.view-bench .drop-zone .pour-reveal>.item{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}
.view-bench .drop-zone .stage-ghost .item{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0}

.view-bench .stage-ghost.bottle-ghost{animation:bottle-fade-out .55s forwards}
@keyframes bottle-fade-out{to{opacity:0}}

.view-bench .drop-zone .pour-liquid .pour-stream{left:calc(50% - 6.5px)}