/* Image-rendered stationery. Paper interiors repeat; artwork corners keep scale. */
:root{--painted-card:url('ui/cream-ingredient-frame.png');--painted-book:url('ui/notebook-paper-frame.png');--interface-stickers:url('ui/interface-stickers.png')}

/* Rounder brass artwork, always square: only the spacing follows the page. */
html[data-game-layout] #sceneWrap #playDock>.stationery-art .sticker-ring{
 width:46px;height:auto;aspect-ratio:1;left:-23px;background:url('ui/brass-binder-ring-round.png') center/contain no-repeat;
 /* The lower return passes behind the page at its left edge. */
 clip-path:polygon(0 0,100% 0,100% 55%,50% 55%,50% 100%,0 100%);
}
html[data-game-layout="compact"] #sceneWrap #playDock>.stationery-art .sticker-ring{width:34px;left:-17px}
html[data-game-layout] #sceneWrap #playDock:before{
 border:24px solid transparent;border-image:var(--painted-book) 120 / 24px / 0 round;
 background-color:#fff6e5;background-clip:padding-box;border-radius:0;box-shadow:none;
}
#sceneWrap #playDock>.stationery-art .sticker-flowers{--sticker-size:62px}
#sceneWrap #playDock>.stationery-art .sticker-berry{--sticker-size:62px}

/* Every ingredient sits on a painted stitched card, with round corner flowers. */
html[data-game-layout] #sceneWrap #playDock .ingredient,
html[data-game-layout] #sceneWrap #playDock .ingredient:nth-child(even){background:none;border:0;box-shadow:none;border-radius:0;--tilt:-.5deg;isolation:isolate}
html[data-game-layout] #sceneWrap #playDock .ingredient:nth-child(even){--tilt:.6deg}
html[data-game-layout] #sceneWrap #playDock .ingredient:before{
 inset:-4px;z-index:-1;border:24px solid transparent;border-image:var(--painted-card) 300 fill / 24px / 0 stretch;
 border-radius:0;background:none;
}
html[data-game-layout] #sceneWrap #playDock .ingredient:after{display:none}
html[data-game-layout] #sceneWrap #playDock .ingredient.active{box-shadow:none;outline:2px solid #74996e;outline-offset:0;border-radius:15px;background:#dfedcf90}
html[data-game-layout] #sceneWrap #playDock .ingredient.active:before{filter:sepia(.15) hue-rotate(28deg) saturate(.9)}
html[data-game-layout] #sceneWrap #playDock .ingredient.active:after{
 content:'';display:block;position:absolute;right:-10px;top:-10px;width:34px;height:34px;
 background:var(--interface-stickers) 0 0/300% 200% no-repeat;border:0;border-radius:0;box-shadow:none;transform:rotate(6deg);
}
html[data-game-layout] #sceneWrap #playDock .ingredient.holding{transform:translateY(2px);outline:3px solid #c38398;outline-offset:1px;background:#f1d0db99}
html[data-game-layout] #sceneWrap #playDock .ingredient-name{font-family:var(--hand);font-weight:900}
html[data-game-layout] #sceneWrap #playDock .ingredient-icon{filter:drop-shadow(0 1px 0 #fffdf1)}
html[data-game-layout="desktop"] #sceneWrap .ingredient-icon{width:52px;height:52px}
html[data-game-layout="compact"] #sceneWrap #playDock .ingredient:before{border-image-width:17px}
html[data-game-layout="compact"] #sceneWrap #playDock .ingredient.active:after{width:27px;height:27px;right:-7px;top:-8px}

/* Cream and lilac artwork for tabs, container choices and utility controls. */
#sceneWrap #containers button,#sceneWrap .modes button,#sceneWrap .world-tools>button,
#sceneWrap .menu-paper button,#sceneWrap .difficulty button,
html[data-game-layout] #sceneWrap #playDock .ingredient-tabs button{
 position:relative;isolation:isolate;background:none;border:0;box-shadow:none;border-radius:0;color:#64424d;
}
#sceneWrap #containers button:before,#sceneWrap .modes button:before,#sceneWrap .world-tools>button:before,
#sceneWrap .menu-paper button:before,#sceneWrap .difficulty button:before,
html[data-game-layout] #sceneWrap #playDock .ingredient-tabs button:before{
 content:'';position:absolute;inset:-3px;z-index:-1;pointer-events:none;border:16px solid transparent;
 border-image:var(--painted-card) 300 fill / 16px / 0 stretch;
}
#sceneWrap #containers .selected,#sceneWrap .modes .selected{background:none;box-shadow:none;border:0;color:#724151}
#sceneWrap #containers .selected:before,#sceneWrap .modes .selected:before,
html[data-game-layout] #sceneWrap #playDock .ingredient-tabs button[aria-selected=true]:before{
 border-image-source:url('ui/lilac-floral-button.png');border-image-slice:0 425 0 370 fill;
 border-image-width:0 30px 0 26px;inset:-7px -6px;
}
#sceneWrap #containers button{padding-left:28px!important;font-family:var(--hand)}
#sceneWrap #containers button:after{content:'';position:absolute;width:29px;height:29px;left:1px;top:50%;transform:translateY(-50%);background:var(--interface-stickers) 50% 0/300% 200% no-repeat;pointer-events:none}
#sceneWrap #containers button:nth-child(2):after{background-position:100% 0}
#sceneWrap .modes{border:0;background:none;box-shadow:none;gap:8px}
html[data-game-layout] #sceneWrap #playDock .ingredient-tabs button{color:#6b4552;text-shadow:none}
html[data-game-layout] #sceneWrap #playDock .ingredient-tabs button[aria-selected=true]{color:#6b3144;background:none;box-shadow:none;border:0}
#sceneWrap #playDock .section-title .number{display:none!important}
html[data-game-layout="desktop"] #sceneWrap #playDock .section-title{border:0;padding-left:14px;isolation:isolate}
html[data-game-layout="desktop"] #sceneWrap #playDock .section-title:before{
 content:'';position:absolute;width:190px;top:-13px;bottom:-5px;left:-5px;z-index:-1;border:0 solid transparent;
 border-image:url('ui/lilac-floral-button.png') 0 425 0 370 fill / 0 32px 0 28px / 0 stretch;
}
html[data-game-layout="desktop"] #sceneWrap #playDock .topping-group .section-title:before{border-image:var(--painted-card) 300 fill / 17px / 0 stretch}
html[data-game-layout="desktop"] #sceneWrap #playDock .section-title h2{font-size:16px}

/* Painted floral serving label: only its quiet center expands horizontally. */
#sceneWrap #hudpack,#sceneWrap #hudpack:hover,#sceneWrap #hudpack:disabled,
html[data-game-layout] #sceneWrap #hudpack{background:none;border:0;outline:0;box-shadow:none;border-radius:0;isolation:isolate;color:#703448;text-transform:none;letter-spacing:0}
html[data-game-layout] #sceneWrap #hudpack:before{
 content:'';position:absolute;inset:-11px -12px;z-index:-1;pointer-events:none;border:0 solid transparent;border-radius:0;
 border-image:url('ui/lilac-floral-button.png') 0 425 0 370 fill / 0 43px 0 37px / 0 stretch;
}
#sceneWrap #hudpack:after{display:none}
#sceneWrap #hudpack:disabled{opacity:.75}

/* Restore the complete painted order note using proportional end caps. */
html[data-game-layout] #sceneWrap #orderCard.folded:before{
 display:block;inset:-27px -17px;background:none;border:0 solid transparent;border-radius:0;box-shadow:none;
 border-image:url('ui/order-notepaper.png') 0 470 0 330 fill / 0 85px 0 60px / 0 stretch;
}
#sceneWrap #orderCard>.stationery-art{display:none}
html[data-game-layout="compact"] #sceneWrap #orderCard.folded:before{inset:-19px -10px;border-image-width:0 58px 0 41px}
#sceneWrap #orderFold,#sceneWrap .game-menu>summary{
 position:relative;border:0;background:var(--interface-stickers) 50% 100%/300% 200% no-repeat;
 border-radius:0;box-shadow:none;font-size:0!important;transform:none;
}
#sceneWrap .game-menu>summary{background-position:0 100%;width:49px;height:49px;padding:0}
#sceneWrap #orderFold:after{display:none}
#sceneWrap #orderFold[aria-expanded=true]{background:none;font-size:24px!important}
#sceneWrap #orderCard:not(.folded),#sceneWrap .menu-paper{
 background:#fff8e8;border:20px solid transparent;border-image:var(--painted-book) 120 / 20px / 0 round;box-shadow:none;border-radius:0;
}

/* Character remarks and help are little painted notes, too. */
#sceneWrap .bubble{background:none;border:0;border-radius:0;box-shadow:none;isolation:isolate;padding:12px 18px}
#sceneWrap .bubble:before{content:'';position:absolute;inset:-4px;z-index:-1;pointer-events:none;border:18px solid transparent;border-image:var(--painted-card) 300 fill / 18px / 0 stretch}
#sceneWrap .bubble:after{display:none}
#sceneWrap .customer-bubble:empty{display:none}
html[data-game-layout="desktop"] #sceneWrap .customer-bubble{right:calc(clamp(160px,14vw,224px) + 36px)}
#sceneWrap .mix-note{background:none;border:14px solid transparent;border-image:var(--painted-card) 300 fill / 14px / 0 stretch;border-radius:0;box-shadow:none;padding:2px}
#receiptDialog .receipt-paper{clip-path:none;background:#fff8e8 url('paper-fibres.svg') 0 0/180px 180px repeat;border:20px solid transparent;border-image:var(--painted-book) 120 / 20px / 0 round;padding:22px 17px}
#receiptNext,#receiptNext:hover{border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate;color:#6b3849;font:900 16px/1.2 var(--hand);letter-spacing:0}
#receiptNext:before{content:'';position:absolute;inset:-9px -7px;z-index:-1;pointer-events:none;border:0 solid transparent;border-image:url('ui/lilac-floral-button.png') 0 425 0 370 fill / 0 38px 0 33px / 0 stretch}
#receiptClose{border:12px solid transparent;border-image:var(--painted-card) 300 fill / 12px / 0 stretch;border-radius:0;font-size:19px;line-height:1}

/* Illustrated fill badge, kept separate from the recipe's artboard. */
html[data-game-layout] #sceneWrap #sceneFillHud{gap:0}
html[data-game-layout="desktop"] #sceneWrap #sceneFillHud{width:clamp(196px,16vw,230px)}
html[data-game-layout="compact"] #sceneWrap #sceneFillHud{width:138px}
html[data-game-narrow="true"] #sceneWrap #sceneFillHud{width:128px}
/* Keep the enlarged note margin beside the drink, without changing its zoom. */
html[data-game-layout="compact"] #sceneWrap{--narrow-vial-camera-shift:46px}
html[data-game-narrow="true"] #sceneWrap{--narrow-vial-camera-shift:42px}
html[data-game-window="true"] #sceneWrap{--narrow-vial-camera-shift:0px}
/* Computer windows have room beside the cup for a readable recipe bookmark.
   Keep phone dimensions intact; the existing artboard fit still guards height. */
html[data-game-window="true"] #sceneWrap #sceneFillHud{
 width:clamp(176px,19vw,216px);right:clamp(14px,2vw,24px);
}
/* A narrow mouse/trackpad window is still a computer. Match the midsize
   minimum without enlarging touch-phone or landscape controls. */
@media (hover:hover) and (pointer:fine) and (min-width:480px) and (max-width:760px){
 html[data-game-layout="compact"][data-game-landscape="false"] #sceneWrap{--narrow-vial-camera-shift:90px}
 html[data-game-layout="compact"][data-game-landscape="false"] #sceneWrap #sceneFillHud{
  width:176px;right:14px;
 }
}
html[data-game-layout] #sceneWrap #sceneFill{
 background:none!important;border:0;border-radius:0;box-shadow:none;isolation:isolate;color:#fff8ef!important;
 transform:none;padding:9px 3px;line-height:1.1;text-shadow:0 1px #9c526b;
}
#sceneWrap #sceneFill:before{
 content:'';position:absolute;inset:-9px -14px;z-index:-1;border:0 solid transparent;
 border-image:url('ui/lilac-floral-button.png') 0 425 0 370 fill / 0 39px 0 34px / 0 stretch;
}
html[data-game-layout] #sceneWrap #sceneOverflow{background:none;box-shadow:none;transform:none;padding:3px 1px;margin-top:0;position:relative;isolation:isolate}
#sceneWrap #sceneOverflow:before{content:'';position:absolute;inset:-2px -9px;z-index:-1;border:12px solid transparent;border-image:var(--painted-card) 300 fill / 12px / 0 stretch}
#sceneWrap #sceneFillHud>.stationery-art .sticker-flowers{display:none}
html[data-game-layout] #sceneWrap #sceneFillHud .fill-signal{background:none;border:0;box-shadow:none;bottom:-8px}

/* Single collage coordinate system; no independent flex-shrinking glass/paper. */
html[data-game-layout] #sceneWrap #recipeRailWrap{
 position:relative;display:block;flex:none;min-height:0;padding:0;margin:7px 0 0;filter:none;
 background:none;box-shadow:none;transform:none;isolation:isolate;
}
html[data-game-layout] #sceneWrap #recipeRailWrap:before,
html[data-game-layout] #sceneWrap #recipeRailWrap:after,
#sceneWrap #recipeRailWrap>.stationery-art{display:none}
#sceneWrap .recipe-collage{position:absolute;top:0;left:0;transform-origin:top left}
html[data-game-layout] #sceneWrap .recipe-collage .rail-title{position:absolute;top:5.5%;left:22%;width:59%;padding:0;margin:0;transform:none;font:900 25px/1.05 var(--hand);color:#70452f;white-space:nowrap;text-align:center}
#sceneWrap .recipe-collage .rail-title:before,#sceneWrap .recipe-collage .rail-title:after{display:none}
html[data-game-layout] #sceneWrap .recipe-collage .recipe-vial{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;margin:0;flex:none}
#sceneWrap .recipe-collage .recipe-vial:before{display:none}
html[data-game-layout] #sceneWrap .recipe-collage #recipeRail{
 left:76.44px;right:auto;top:23.8%;bottom:19.4%;width:71.76px;height:auto;min-height:0;max-height:none;margin:0;
 display:flex;flex-direction:column-reverse;border:0;outline:0;background:none;box-shadow:none;overflow:visible;border-radius:0;
}
html[data-game-layout] #sceneWrap .recipe-collage .recipe-layer{
 min-height:calc(var(--vial-note) * 1.35);border:0;background:linear-gradient(90deg,#ffffff55,transparent 20%,transparent 80%,#ffffff44),var(--layer-color);box-shadow:none;overflow:visible;flex-basis:0;
}
#sceneWrap .recipe-collage .recipe-layer:first-child{border-radius:0 0 45% 45% / 0 0 14px 14px}
#sceneWrap .recipe-collage .recipe-layer:not(:last-child){border-top:1px solid #fff4e699}
#sceneWrap .recipe-collage .layer-progress{background:linear-gradient(to top,transparent var(--layer-progress,0%),#fff7de40 var(--layer-progress,0%))}
/* Classic milk needs a visible empty track: cream-on-cream hid its progress.
   Keep the live fill bright white, with a cocoa edge that follows the amount. */
html[data-game-layout] #sceneWrap .recipe-collage .recipe-layer.pattern-milk-1{background:#c6b7a4}
#sceneWrap .recipe-collage .pattern-milk-1 .layer-progress{
 background:linear-gradient(to top,#fff 0 max(0px,calc(var(--layer-progress,0%) - 3px)),#947c66 max(0px,calc(var(--layer-progress,0%) - 3px)) var(--layer-progress,0%),#c6b7a4 var(--layer-progress,0%) 100%);
 box-shadow:inset 0 0 0 1.5px #a48e77;
}
html[data-game-layout] #sceneWrap .recipe-collage .layer-label{inset:0;padding:0;display:flex;align-items:center;justify-content:center;text-shadow:none;overflow:visible}
html[data-game-layout] #sceneWrap .recipe-collage .layer-label b{width:48px;height:48px;filter:drop-shadow(0 1px 0 #fff6df)}
html[data-game-layout] #sceneWrap .recipe-collage .layer-number{left:-44px;top:50%;transform:translateY(-50%);width:26px;height:26px;font:900 22px/1 Nunito,sans-serif;border:2px solid #fff8e4;border-radius:50%;background:var(--layer-color);color:#fff9e9;box-shadow:0 0 0 1px #ae8a6599;text-shadow:0 1px 2px #63422e}
html[data-game-layout] #sceneWrap .recipe-collage .layer-label strong{position:absolute;left:calc(100% + 15px);top:50%;width:84px;transform:none;font:900 27px/1.05 Nunito,sans-serif;letter-spacing:-.7px;text-decoration:none;color:#51303b;padding:0;background:none}
html[data-game-layout] #sceneWrap .recipe-collage .small-recipe-step .layer-label strong{font-size:21px;line-height:1}
html[data-game-layout] #sceneWrap .recipe-collage .small-recipe-step .layer-label b{width:35px;height:35px}
#sceneWrap .recipe-collage .recipe-layer.current .layer-number{outline:3px solid #c7869c;outline-offset:2px}
#sceneWrap .recipe-collage .recipe-layer.complete .layer-number{background:#6a9667}
#sceneWrap .recipe-collage .recipe-layer.over .layer-number{background:#bb5364}
html[data-game-layout] #sceneWrap #recipeRailWrap.collage-compact .layer-label strong{transform:translateY(-50%);font-size:29px}
html[data-game-layout] #sceneWrap .recipe-collage #railHint{
 position:absolute;left:33%;right:8%;top:89%;width:auto;height:auto;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;transform:none;
 font:900 15px/1.12 var(--hand);text-align:center;color:#68442e;
}
html[data-game-layout] #sceneWrap .recipe-collage #railHint:before{content:'Pour in order!';display:block;font:900 22px/1.1 var(--hand);padding:0;margin:0 0 7px;color:#75465c}
#sceneWrap .recipe-collage #railHint:after{display:none}
html[data-game-landscape="true"] #sceneWrap #recipeRailWrap{display:none}
html[data-game-landscape="true"] #sceneWrap #sceneFillHud{right:78px}
@media(max-height:740px){html[data-game-layout="desktop"] #sceneWrap .ingredient-icon{width:40px;height:40px}}
html[data-game-short="true"] #sceneWrap #playDock .ingredient-icon{width:30px;height:30px}
html[data-game-landscape="true"] #sceneWrap #playDock .ingredient-icon{width:25px;height:25px}
html[data-game-layout="compact"] #sceneWrap #containers button{padding-left:20px!important}
html[data-game-layout="compact"] #sceneWrap #containers button:after{width:22px;height:22px;left:0}
html[data-game-narrow="true"] #sceneWrap #containers button:after{display:none}
html[data-game-narrow="true"] #sceneWrap #containers button{padding-left:2px!important}