/* Desktop gets a full, open notebook spread. The compact notebook is unchanged.
   Both pages use the original controls so state, hold-to-pour and scores are shared. */
html[data-game-layout="desktop"]{--hand:"Chalkboard SE","Comic Sans MS",Nunito,"Trebuchet MS",cursive}
html[data-game-layout="desktop"] #sceneWrap #playDock{
 width:min(1380px,calc(100% - 64px));max-width:1380px;
 padding:14px 32px 20px 50px;gap:11px;bottom:16px;
}
html[data-game-layout="desktop"] #sceneWrap #playDock:before{inset:-10px -7px -6px -11px}
html[data-game-layout="desktop"] #sceneWrap #playDock:after{content:'Bunny & Berry · recipe journal';right:43px;bottom:4px;font-size:9px}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredients{
 display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:42px;
}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredients:after{
 content:'';position:absolute;left:calc(44.444% - 2px);top:-6px;bottom:-9px;width:13px;
 background:linear-gradient(90deg,transparent,#b3947427 45%,#fffdf180 55%,transparent);
 border-left:1px solid #ceb99b65;transform:rotate(.3deg);pointer-events:none;
}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient-tabs{display:none}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient-group{min-width:0}
html[data-game-layout="desktop"] #sceneWrap #playDock .section-title{
 display:flex;align-items:center;gap:7px;min-height:31px;margin:-4px 0 9px;padding:0 3px 5px;
 border-bottom:1px dashed #c2a68c;position:relative;
}
html[data-game-layout="desktop"] #sceneWrap #playDock .section-title h2{
 font:900 16px/1.15 var(--hand);color:#7a4758;letter-spacing:0;white-space:nowrap;
}
html[data-game-layout="desktop"] #sceneWrap #playDock .section-title .number{
 width:23px;height:25px;display:grid;place-items:center;background:#dba0b4;color:#fff9e8;
 border:1px solid #bc8497;border-radius:5px 6px 0 0;font:900 10px Nunito,sans-serif;
 box-shadow:inset 0 0 0 2px #eccdd7;transform:rotate(-5deg);
}
html[data-game-layout="desktop"] #sceneWrap #playDock .topping-group .number{background:#e7a7ad;border-color:#cc909d;box-shadow:inset 0 0 0 2px #f5d7d4}
html[data-game-layout="desktop"] #sceneWrap #playDock .topping-group h2{color:#92566c}
html[data-game-layout="desktop"] #sceneWrap #playDock .section-title p{
 display:block;font:11px/1.2 var(--hand);color:#8c6650;margin:0 0 0 auto;white-space:nowrap;transform:rotate(-2deg);
}
html[data-game-layout="desktop"] #sceneWrap #bases,
html[data-game-layout="desktop"] #sceneWrap #mixes{gap:10px;padding:2px 0 3px}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient{height:86px;min-height:86px;padding:2px 3px 5px}
html[data-game-layout="desktop"] #sceneWrap .ingredient-icon{width:47px;height:47px}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient-name{font-size:12px;line-height:1.1}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient-name small{font-size:10px;line-height:1.1}
html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient.active:after{width:20px;height:20px;font-size:15px;border-width:2px;right:-4px;top:-5px}
html[data-game-layout="desktop"] #sceneWrap #playDock .finish-card{
 grid-template-columns:minmax(0,4fr) minmax(0,5fr);align-items:center;gap:42px;
 padding-top:7px;border-top:1px dashed #c9ad8f;
}
html[data-game-layout="desktop"] #sceneWrap #playDock .container-row{flex-wrap:nowrap;align-items:center;gap:10px}
html[data-game-layout="desktop"] #sceneWrap #playDock .container-row>.eyebrow{width:auto;flex:none;font-size:11px;white-space:nowrap;transform:rotate(-3deg)}
html[data-game-layout="desktop"] #sceneWrap #containers{max-width:360px;gap:9px}
html[data-game-layout="desktop"] #sceneWrap #containers button{min-height:39px;font-size:12px}
html[data-game-layout="desktop"] #sceneWrap #playDock #fillhud{justify-content:flex-end}
html[data-game-layout="desktop"] #sceneWrap #playDock .hud-actions{max-width:420px}
html[data-game-layout="desktop"] #sceneWrap #hudpack{min-height:49px;padding:8px 24px;font-size:18px}
html[data-game-layout="desktop"] #sceneWrap #playDock .hud-actions:before{
 content:'mix, sip, smile ♡';align-self:center;flex:1;min-width:100px;color:#a0796d;font:11px/1.2 var(--hand);transform:rotate(-3deg);
}
/* A minimum label slot keeps 10% recipe steps legible beside the vial. */
html[data-game-layout="desktop"] #sceneWrap .recipe-layer{min-height:28px}
html[data-game-layout="desktop"] #sceneWrap .layer-name{font-size:9px;line-height:1.1;white-space:nowrap;padding-bottom:2px;width:70px}
html[data-game-layout="desktop"] #sceneWrap .layer-label strong{font-size:12px;line-height:1.1}
html[data-game-layout="desktop"] #sceneWrap .layer-label b{width:25px;height:25px}
@media(max-height:850px){
 html[data-game-layout="desktop"] #sceneWrap .layer-name{display:none}
 html[data-game-layout="desktop"] #sceneWrap .recipe-layer{min-height:16px}
 html[data-game-layout="desktop"] #sceneWrap .layer-label strong{top:50%;transform:translateY(-50%);font-size:13px}
 html[data-game-layout="desktop"] #sceneWrap .recipe-vial{min-height:120px}
 html[data-game-layout="desktop"] #sceneWrap #recipeRailWrap{padding:5px 5px 22px}
 html[data-game-layout="desktop"] #sceneWrap .rail-title{font-size:14px}
 html[data-game-layout="desktop"] #sceneWrap #railHint{font-size:9px;padding:4px 2px}
 html[data-game-layout="desktop"] #sceneWrap #railHint:before{font-size:11px;margin-bottom:2px}
 html[data-game-layout="desktop"] #sceneWrap .layer-label b{width:18px;height:18px}
}
@media(max-height:740px){
 html[data-game-layout="desktop"] #sceneWrap #playDock{padding-top:10px;padding-bottom:16px;gap:7px;bottom:10px}
 html[data-game-layout="desktop"] #sceneWrap #playDock .section-title{min-height:27px;margin-bottom:5px}
 html[data-game-layout="desktop"] #sceneWrap #playDock .ingredient{height:73px;min-height:73px}
 html[data-game-layout="desktop"] #sceneWrap .ingredient-icon{width:37px;height:37px}
 html[data-game-layout="desktop"] #sceneWrap #hudpack{min-height:43px;font-size:16px}
 html[data-game-layout="desktop"] #sceneWrap #playDock:after{font-size:8px;bottom:3px}
}