/* Illustrated controls; recipe quantities stay beside the vial. */
:root{--sticker-sheet:url('ui/ingredient-stickers-v2.png')}
#sceneWrap .brand{display:block;min-width:0;filter:none;text-shadow:none;transform:none}
#sceneWrap .brand .cafe-logo{display:block;width:210px;height:63px;max-width:100%;object-fit:contain}
#receiptDialog .receipt-brand{padding:0 0 18px}
#receiptDialog .receipt-brand .cafe-logo{display:block;width:100%;height:auto;margin:0 auto}
#receiptDialog .slip-feedback{padding-top:14px;border-top:1px dashed #c9ad8f;margin-top:16px;display:flow-root}
#receiptDialog .slip-feedback .customer-portrait{width:58px;height:58px;float:left;margin:0 10px 5px 0}
#receiptDialog .slip-feedback p{margin:5px 0 10px;line-height:1.45}
#receiptDialog .slip-feedback ul{clear:both;margin:8px 0;padding-left:18px}
#receiptDialog .slip-feedback li{margin-bottom:7px;line-height:1.4}
html[data-game-layout="compact"] #sceneWrap .brand .cafe-logo{width:167px;height:50px}
#sceneWrap #customerAvatar{padding:0;background:none;border:0;box-shadow:none;transform:rotate(-4deg);overflow:visible;flex:none}
.customer-portrait{display:block;width:100%;height:100%;background:url('ui/customer-portraits.png') var(--portrait-x,0%) var(--portrait-y,0%)/300% 200% no-repeat}
.portrait-gentleman{--portrait-x:0%;--portrait-y:0%}
.portrait-posh-tiger{--portrait-x:50%;--portrait-y:0%}
.portrait-gamer-bear{--portrait-x:100%;--portrait-y:0%}
.portrait-pig-teacher{--portrait-x:0%;--portrait-y:100%}
.portrait-bunny{background-size:285.502% 200%;background-position:51.303% 100%}
html[data-game-layout] #sceneWrap #playDock .ingredient-name small{display:none}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient{height:100px;min-height:100px}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient-icon{width:48px;height:48px}
#sceneWrap #playDock .finish-card{order:2;border-top:0;padding-top:0}
html[data-game-layout] #sceneWrap #playDock .practice-tools{display:flex;justify-content:flex-end;order:1;margin:0;padding:2px 0;border:0}
.gentle-controls{display:flex;align-items:center;gap:8px}
#sceneWrap .note-tool{min-height:44px;min-width:49px;padding:6px 9px;position:relative;isolation:isolate;background:none;border:0;border-radius:0;box-shadow:none;line-height:1.1;color:#67424e;font-weight:900}
#sceneWrap .note-tool:before{content:'';position:absolute;inset:-2px;z-index:-1;pointer-events:none;border:15px solid transparent;border-image:var(--painted-card) 300 fill / 15px / 0 stretch;transform:rotate(-2deg)}
#sceneWrap .note-tool:nth-child(2):before{transform:rotate(2deg)}
#sceneWrap .note-tool[aria-pressed="true"]:before{filter:sepia(.25) hue-rotate(40deg) saturate(.8)}
#sceneWrap .note-tool:focus-visible{outline:3px solid #8f5468;outline-offset:4px}
#sceneWrap .note-tool:disabled{opacity:.48}
#sceneWrap .note-tool span{display:block;color:#8d6a7a}
#sceneWrap .note-tool[aria-pressed="true"] span{color:#497654}
.motion-settings{margin:12px 0;padding:10px 0;border-block:1px dashed #c9ad8f}
#sceneWrap #motionControl{min-height:44px;width:100%;margin-bottom:6px}
#motionHint{margin:6px 0 0;line-height:1.4;color:#795e50}
html[data-game-layout="compact"] #sceneWrap .gentle-controls{gap:4px}
html[data-game-layout="compact"] #sceneWrap .note-tool{min-width:39px;padding:4px}
html[data-game-layout="compact"] #sceneWrap #playDock .ingredient{height:83px;min-height:83px;padding-block:3px}
html[data-game-layout="compact"] #sceneWrap #playDock .ingredient-icon{width:38px;height:38px}
html[data-game-layout="compact"] #sceneWrap #playDock .ingredient-name{line-height:1.1;white-space:nowrap}
/* Compact controls preserve room for the drink. */
html[data-game-landscape="true"] #sceneWrap #playDock .ingredient{height:62px;min-height:62px}
html[data-game-landscape="true"] #sceneWrap #playDock .ingredient-icon{width:27px;height:27px}
html[data-game-landscape="true"] #sceneWrap .brand .cafe-logo{width:145px;height:43.5px}
html[data-game-landscape="true"] #sceneWrap .note-tool{min-height:38px}
@media(max-width:370px){html[data-game-layout="compact"] #sceneWrap #playDock .ingredient-name{white-space:normal}html[data-game-layout="compact"] #sceneWrap .note-tool{min-width:35px}}
/* Keep the notebook free of duplicate pouring prompts. */
#sceneWrap #sceneFillHud .fill-signal{display:none!important}
html[data-game-layout="compact"] #sceneWrap #playDock:after{content:'a little sip of magic'}
html[data-game-layout="desktop"] #sceneWrap #playDock .hud-actions:before{content:'mix, sip, smile'}
/* Narrow computer windows retain the enlarged recipe. */
@media(hover:hover) and (pointer:fine) and (min-width:480px) and (max-width:760px){
 html[data-game-landscape="false"] #sceneWrap #playDock .ingredient{height:76px;min-height:76px}
 html[data-game-landscape="false"] #sceneWrap #sceneFillHud{top:calc(var(--play-top) + 4px);bottom:calc(var(--dock-space) + 8px)}
 html[data-game-landscape="false"] #sceneWrap #recipeRailWrap{margin-top:0}
 html[data-game-landscape="false"] #sceneWrap #sceneFill{padding-top:6px;padding-bottom:6px}
}

#sceneWrap #fillBreakdown{position:relative;z-index:12;color:#765c53;pointer-events:auto;width:100%;font:700 13px/1.35 Nunito,sans-serif;text-align:center;background:#fff6e7;border:1px solid #d7bfa7;border-radius:9px;margin:5px 0}
#sceneWrap #fillBreakdown[hidden]{display:none}
#fillBreakdown summary{cursor:pointer;padding:7px 4px;min-height:30px;box-sizing:border-box;align-content:center}
#fillBreakdown summary:focus-visible{outline:3px solid #8eaa7a;outline-offset:2px}
#sceneWrap #fillBreakdown p{position:absolute;top:100%;right:0;width:max(100%,210px);max-width:calc(100vw - 24px);box-sizing:border-box;margin:4px 0;padding:12px;background:#fff8e9;color:#765c53;border:1px solid #d7bfa7;border-radius:12px;box-shadow:0 5px 15px #503c4322;font:700 13px/1.5 Nunito,sans-serif;text-align:left}