/* Keep the painted silhouette as the only serving/fill surface. */
html[data-game-layout] #gameShell #sceneWrap :is(#hudpack,#sceneFill){
 background:none!important;border:0;border-radius:0;box-shadow:none;outline:0;
}
html[data-game-layout] #gameShell #sceneWrap #hudpack{
 display:flex;align-items:center;justify-content:center;text-align:center;
 padding-inline:24px;line-height:1.35;white-space:normal;
}
html[data-game-layout] #gameShell #sceneWrap #hudpack:focus-visible{
 outline:3px solid #8b6671;outline-offset:7px;border-radius:22px;
}
html[data-game-layout] #gameShell #sceneWrap #hudpack:not(:disabled):hover{filter:brightness(1.035)}
html[data-game-layout] #gameShell #sceneWrap #hudpack:disabled{opacity:.6}
html[data-game-layout] #gameShell #sceneWrap #sceneOverflow{
 background:none;border:0;outline:0;border-radius:0;box-shadow:none;
 text-align:center;text-shadow:0 1px 2px #fff9e8;
}
#gameShell #sceneWrap #sceneOverflow:before{display:none}

/* Quiet notebook margins; labels describe actions or the drink itself. */
html[data-game-layout] #gameShell #sceneWrap #playDock:after,
html[data-game-layout] #gameShell #sceneWrap #playDock .hud-actions:before{content:none;display:none}

/* Centre each title on its own painted tab, with room for flower end caps. */
html[data-game-layout="desktop"] #gameShell #sceneWrap #playDock .section-title{
 display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:12px;
 min-height:40px;padding:0;margin-top:-4px;align-items:center;
}
html[data-game-layout="desktop"] #gameShell #sceneWrap #playDock .section-title:before{
 width:190px;max-width:100%;left:0;top:-10px;bottom:-8px;
}
html[data-game-layout="desktop"] #gameShell #sceneWrap #playDock .section-title h2{
 width:100%;min-width:0;margin:0;padding:5px 23px;text-align:center;
 white-space:normal;line-height:1.35;justify-self:center;
}
html[data-game-layout="desktop"] #gameShell #sceneWrap #playDock .section-title p{
 margin:0;text-align:right;justify-self:end;transform:none;
}
#gameShell #sceneWrap #playDock .ingredient-tabs button{
 display:flex;align-items:center;justify-content:center;padding-inline:18px;text-align:center;
}
#gameShell #sceneWrap #playDock .ingredient-name{
 width:100%;padding-inline:3px;text-align:center;overflow-wrap:normal;
}
#gameShell #sceneWrap :is(.note-tool,.modes button,.world-tools>button){text-align:center}
#gameShell #sceneWrap #orderCard .customer-title{text-align:center}
#gameShell #sceneWrap .recipe-collage .layer-label strong{text-align:center!important}
#gameShell #sceneWrap #containers button{
 display:flex;align-items:center;justify-content:center;gap:5px;padding-inline:8px!important;text-align:center;
}
#gameShell #sceneWrap #containers button:after{
 position:static;order:-1;flex:none;transform:none;width:24px;height:24px;
}
html[data-game-layout="compact"] #gameShell #sceneWrap #containers button:after{width:18px;height:18px}
html[data-game-narrow="true"] #gameShell #sceneWrap #containers button:after{display:none}
html[data-game-layout="compact"] #gameShell #sceneWrap #playDock .ingredient-tabs{width:100%}
@media(max-width:370px){
 #gameShell #sceneWrap #playDock .ingredient-tabs button{padding-inline:14px}
 html[data-game-layout] #gameShell #sceneWrap #hudpack{padding-inline:9px}
}

/* The nine-icon atlas has a few neighbouring contours inside cell margins.
   Clip only those empty margins, leaving each original sticker intact. */
#gameShell #sceneWrap [data-ingredient="milk-1"],
#gameShell #sceneWrap .pattern-milk-1 .layer-label b{clip-path:inset(0 6% 0 10%)}
#gameShell #sceneWrap [data-ingredient="mix-0"],
#gameShell #sceneWrap .pattern-mix-0 .layer-label b{clip-path:inset(6% 0 0 7%)}
#gameShell #sceneWrap [data-ingredient="mix-1"],
#gameShell #sceneWrap .pattern-mix-1 .layer-label b{clip-path:inset(6% 0 0 0)}
html[data-cafe-theme="regular"] #gameShell #sceneWrap [data-ingredient="milk-3"],
html[data-cafe-theme="regular"] #gameShell #sceneWrap .pattern-milk-3 .layer-label b{clip-path:inset(6% 0 0 0)}
#gameShell #sceneWrap [data-ingredient="mix-3"],
#gameShell #sceneWrap .pattern-mix-3 .layer-label b{clip-path:inset(0 0 0 2%)}

/* A live white die-cut edge matches the existing illustrated ingredients.
   Morphology follows transparency, so the border never becomes a square. */
html[data-cafe-theme="halloween"] #gameShell #sceneWrap :is([data-ingredient="milk-3"],[data-ingredient="mix-2"],.pattern-milk-3 .layer-label b,.pattern-mix-2 .layer-label b){
 filter:var(--stationery-sticker-filter,url(#stationery-sticker));
}

/* New jelly art replaces blueberry only in the regular café. */
html:not([data-cafe-theme=halloween]) #sceneWrap [data-ingredient="mix-2"],html:not([data-cafe-theme=halloween]) #sceneWrap .pattern-mix-2 .layer-label b{background-image:url('ui/jelly-topping.webp');background-size:contain;background-position:center;background-repeat:no-repeat;filter:var(--stationery-sticker-filter);clip-path:none}
html:not([data-cafe-theme=halloween]) #sceneWrap .recipe-collage .pattern-mix-2{--ingredient-ink:#bf8a7c}
.portrait-ghost{background-image:url('ui/halloween/ghost-customer.webp');background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#fff2dc;border-radius:50%}

/* Keep the recipe rows below their heading, even when screen-sized type grows. */
html[data-game-layout="desktop"] #gameShell #sceneWrap #recipeRailWrap{margin-top:18px}
html[data-game-layout="desktop"] #gameShell #sceneWrap .recipe-collage #recipeRail{top:24%;bottom:20%}
html[data-game-layout="desktop"] #gameShell #sceneWrap .recipe-collage .recipe-layer{min-height:0;flex:1 1 0!important}
html[data-game-layout="desktop"] #gameShell #sceneWrap .recipe-collage .rail-title{top:7%;line-height:1.25}
html[data-game-layout="desktop"] #gameShell #sceneWrap .recipe-collage #railHint{top:88%}
/* Anchor the loose ghost to the notebook corner, not beyond its paper edge. */
html[data-cafe-theme="halloween"][data-game-layout] #gameShell #sceneWrap #playDock>.stationery-art .sticker-berry{right:4px;top:-16px;transform:rotate(8deg)}
/* A remake is a clear red correction stamp in both cafés. */
#receiptDialog .slip-stamp.slip-stamp-retry,
html[data-cafe-theme="halloween"] #receiptDialog .slip-stamp.slip-stamp-retry{color:#b63e3d;border-color:#c8524b}

#gameShell #sceneWrap [data-ingredient="milk-0"],#gameShell #sceneWrap .pattern-milk-0 .layer-label b{background:url('ui/milk-chocolate-sticker.webp') center/contain no-repeat;clip-path:none;filter:none}

#gameShell #sceneWrap [data-ingredient="milk-1"],#gameShell #sceneWrap .pattern-milk-1 .layer-label b{background:url('ui/milk-classic-sticker.webp') center/contain no-repeat;clip-path:none;filter:none}

#gameShell #sceneWrap [data-ingredient="milk-2"],#gameShell #sceneWrap .pattern-milk-2 .layer-label b{background:url('ui/milk-strawberry-sticker.webp') center/contain no-repeat;clip-path:none;filter:none}

html:not([data-cafe-theme=halloween]) #gameShell #sceneWrap [data-ingredient="milk-3"],html:not([data-cafe-theme=halloween]) #gameShell #sceneWrap .pattern-milk-3 .layer-label b{background:url('ui/milk-matcha-sticker.webp') center/contain no-repeat;clip-path:none;filter:none}
html[data-cafe-theme="halloween"] #gameShell #sceneWrap [data-ingredient="milk-3"],html[data-cafe-theme="halloween"] #gameShell #sceneWrap .pattern-milk-3 .layer-label b{background:url('ui/pumpkin-spice-cartoon.webp') center/contain no-repeat;clip-path:none;filter:none}
html[data-cafe-theme="halloween"] #gameShell #sceneWrap [data-ingredient="mix-2"],html[data-cafe-theme="halloween"] #gameShell #sceneWrap .pattern-mix-2 .layer-label b{background:url('ui/pumpkin-boba-cartoon.webp') center/contain no-repeat;clip-path:none;filter:none}
html[data-cafe-theme="regular"] #gameShell #sceneWrap [data-ingredient="mix-2"],html[data-cafe-theme="regular"] #gameShell #sceneWrap .pattern-mix-2 .layer-label b{background:url('ui/jelly-cartoon.webp') center/contain no-repeat;clip-path:none;filter:none}
html[data-cafe-theme="halloween"] .portrait-posh-tiger{background-image:url('ui/halloween/portrait-tiger.webp');background-size:contain;background-position:center;background-repeat:no-repeat}
html[data-cafe-theme="halloween"] .portrait-gamer-bear{background-image:url('ui/halloween/portrait-bear.webp');background-size:contain;background-position:center;background-repeat:no-repeat}
html[data-cafe-theme="halloween"] .portrait-pig-teacher{background-image:url('ui/halloween/portrait-pig.webp');background-size:contain;background-position:center;background-repeat:no-repeat}
html[data-cafe-theme="halloween"] .portrait-bunny{background-image:url('ui/halloween/portrait-bunny.webp');background-size:contain;background-position:center;background-repeat:no-repeat}
/* The open menu must lift its topbar stacking context above the ingredient book. */
#gameShell #sceneWrap .game-topbar:has(#gameMenu[open]){z-index:20}
#gameShell #sceneWrap #gameMenu>.menu-paper{
 max-height:calc(100svh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 max-height:calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
 scrollbar-gutter:stable;scroll-padding-block:12px;
}

/* The boba cup is the only vessel; give the illustrated serve action this row. */
#gameShell #sceneWrap #playDock .finish-card{grid-template-columns:minmax(0,1fr)}
#gameShell #sceneWrap #playDock .finish-card>.controls{display:none}
#gameShell #sceneWrap #playDock #fillhud{grid-column:1/-1;justify-content:center}
#gameShell #sceneWrap #playDock .finish-card .hud-actions{max-width:460px;margin-inline:auto}

/* Keep painted mobile tabs above the notebook, including iOS compositing.
   Explicit backgrounds avoid border-image filling on these short controls. */
html[data-game-layout="compact"] #gameShell #sceneWrap #playDock .ingredient-tabs{z-index:2;overflow:visible}
html[data-game-layout="compact"] #gameShell #sceneWrap #playDock .ingredient-tabs button{isolation:isolate;overflow:visible;min-height:38px}
html[data-game-layout="compact"] #gameShell #sceneWrap #playDock .ingredient-tabs button>span{position:relative;z-index:1}
html[data-game-layout="compact"] #gameShell #sceneWrap #playDock .ingredient-tabs button:before{
 content:'';display:block;position:absolute;inset:-3px;z-index:0;border:0;border-image:none;opacity:1;pointer-events:none;
 background:url('ui/cream-ingredient-frame.png') center/100% 100% no-repeat;
}
html[data-game-layout="compact"] #gameShell #sceneWrap #playDock .ingredient-tabs button[aria-selected="true"]:before{
 inset:-7px -6px;background-image:url('ui/lilac-floral-button.png');
}
/* Midsize desktop/tablet windows need tabs, not full-width ribbons. Keep the
   painted end caps at their original proportions; only the paper centre grows. */
html[data-game-window="true"] #gameShell #sceneWrap #playDock .ingredient-tabs{
 width:min(100%,454px);gap:14px;margin-inline:auto;align-items:center;
}
html[data-game-window="true"] #gameShell #sceneWrap #playDock .ingredient-tabs button{
 flex:1 1 0;min-width:0;min-height:46px;padding:10px 24px;font-size:15px;
}
html[data-game-window="true"] #gameShell #sceneWrap #playDock .ingredient-tabs button:before{
 background:none;border:18px solid transparent;
 border-image:url('ui/cream-ingredient-frame.png') 300 fill / 18px / 0 stretch;
}
html[data-game-window="true"] #gameShell #sceneWrap #playDock .ingredient-tabs button[aria-selected="true"]:before{
 background:none;border-width:0;
 border-image:url('ui/lilac-floral-button.png') 0 425 0 370 fill / 0 34px 0 30px / 0 stretch;
}

/* Equal starting widths make selection size meaningful even for shorter labels.
   Grow the painted centre as well: the floral artwork has deeper clear margins. */
#gameShell #sceneWrap .modes{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;gap:14px;padding:8px 10px}
#gameShell #sceneWrap .modes button,
html[data-game-layout] #gameShell #sceneWrap #playDock .ingredient-tabs button{
 min-width:0;transform:scale(.94);transform-origin:center;transition:transform .16s ease;z-index:0;
}
#gameShell #sceneWrap .modes button.selected,
html[data-game-layout] #gameShell #sceneWrap #playDock .ingredient-tabs button[aria-selected="true"]{
 transform:translateY(-2px) scale(1.04);z-index:2;font-weight:900;
}
#gameShell #sceneWrap .modes button.selected:before,
html[data-game-layout] #gameShell #sceneWrap #playDock .ingredient-tabs button[aria-selected="true"]:before{
 inset:-13px -9px;border-width:0;
}
html[data-game-layout="compact"] #gameShell #sceneWrap .menu-paper .modes{gap:8px;padding:10px 7px}
html[data-game-layout="compact"] #gameShell #sceneWrap .menu-paper .modes button{padding-inline:3px}
@media(prefers-reduced-motion:reduce){
 #gameShell #sceneWrap .modes button,
 html[data-game-layout] #gameShell #sceneWrap #playDock .ingredient-tabs button{transition:none}
}

/* Keep the two in-game drink actions together; practice options belong in the menu. */
#gameShell #sceneWrap .gentle-controls{gap:12px}
#gameShell #sceneWrap .gentle-controls .note-tool{margin:0;padding:7px 14px;min-height:44px;white-space:nowrap;text-decoration:none}
#gameShell #sceneWrap .practice-settings{margin:14px 0;padding:12px 0;border-block:1px dashed #c5a99a;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#gameShell #sceneWrap .practice-settings h2{grid-column:1/-1;margin:0}
#gameShell #sceneWrap .practice-settings button{min-height:46px;padding:8px 10px;margin:0;line-height:1.3}
#gameShell #sceneWrap .practice-settings #easyMode{display:flex;align-items:center;justify-content:space-between;gap:8px}
#gameShell #sceneWrap .practice-settings #easyState{border-radius:12px;padding:3px 7px;background:#eee0db;color:#755a56}
#gameShell #sceneWrap .practice-settings [aria-pressed="true"] #easyState{background:#e7ead8;color:#3f634b}

#retryOrderDialog{box-sizing:border-box;width:min(430px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:26px;border:2px solid #d8b8a8;border-radius:24px 20px 26px 21px;background:#fff9ee url('paper-fibres.svg');box-shadow:0 18px 65px #503a4244;color:#785b54;font:700 16px/1.5 Nunito,ui-rounded,sans-serif;overflow:auto}
#retryOrderDialog::backdrop{background:#493b4b77}
#retryOrderDialog h2{font:800 26px/1.25 Nunito,ui-rounded,sans-serif;color:#855968;margin:0 0 16px}
#retryOrderDialog p{margin:0 0 12px}
#retryOrderDialog #retryOrderNote{font-size:14px;color:#877166}
#retryOrderDialog .retry-order-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:23px}
#retryOrderDialog button{flex:1 1 140px;min-height:48px;padding:10px 14px;border:1px solid #c595a3;border-radius:13px;background:#fffaf1;color:#80515e;font:800 15px/1.3 Nunito,ui-rounded,sans-serif;cursor:pointer}
#retryOrderDialog #retryOrderConfirm{background:#efc4d0}
#retryOrderDialog button:focus-visible{outline:3px solid #8c9f74;outline-offset:3px}
html[data-cafe-theme="halloween"] #retryOrderDialog #retryOrderConfirm{background:#f0c69f;color:#825b43}