/* Paper repeats; decorations never inherit the panel's aspect ratio.
   The 1536×1024 atlas is six 512×512 cells (3 columns × 2 rows). */
:root{--stationery:url('ui/stationery-stickers.png');--hand:"Chalkboard SE","Comic Sans MS",Nunito,"Trebuchet MS",cursive}
#sceneWrap .stationery-art{position:absolute;inset:0;pointer-events:none;user-select:none;z-index:3}
#sceneWrap .stationery-sticker{position:absolute;display:block;width:var(--sticker-size,48px);height:var(--sticker-size,48px);background-image:var(--stationery);background-repeat:no-repeat;background-size:300% 200%;background-position:var(--sx,0%) var(--sy,0%);pointer-events:none}
#sceneWrap .sticker-flowers{--sx:0%;--sy:0%}
#sceneWrap .sticker-ring{--sx:50%;--sy:0%}
#sceneWrap .sticker-tape{--sx:100%;--sy:0%}
#sceneWrap .sticker-bunny{--sx:0%;--sy:100%}
#sceneWrap .sticker-berry{--sx:50%;--sy:100%}
#sceneWrap .sticker-hearts{--sx:100%;--sy:100%}

/* Fixed-size graph-paper tiles and fibres, with a softly uneven paper edge. */
#sceneWrap #playDock:before,
html[data-game-layout] #sceneWrap #playDock:before{
 background-color:#fff7e6;
 background-image:url('paper-fibres.svg'),linear-gradient(#debda33b 1px,transparent 1px),linear-gradient(90deg,#debda33b 1px,transparent 1px);
 background-size:180px 180px,18px 18px,18px 18px;background-repeat:repeat;background-position:0 0;
 border:1px solid #d9bda0;border-radius:21px 16px 23px 13px / 15px 23px 15px 21px;
 box-shadow:inset 0 0 0 4px #fffdf080,2px 5px #ead1cc,4px 8px #af8e6d38;
}
#sceneWrap #playDock>.stationery-art{z-index:2}
#sceneWrap #playDock>.stationery-art .sticker-ring{--sticker-size:44px;left:-28px;transform:translateY(-50%)}
#sceneWrap #playDock .ring-one{top:10%}
#sceneWrap #playDock .ring-two{top:26%}
#sceneWrap #playDock .ring-three{top:42%}
#sceneWrap #playDock .ring-four{top:58%}
#sceneWrap #playDock .ring-five{top:74%}
#sceneWrap #playDock .ring-six{top:90%}
#sceneWrap #playDock>.stationery-art .sticker-tape{--sticker-size:76px;left:24px;top:-48px;transform:rotate(8deg)}
#sceneWrap #playDock>.stationery-art .sticker-berry{--sticker-size:67px;right:-18px;top:-38px;transform:rotate(10deg)}
#sceneWrap #playDock>.stationery-art .sticker-flowers{--sticker-size:57px;left:-20px;bottom:-15px;transform:rotate(-12deg)}

/* The order header uses the same repeatable paper, with independent corners. */
#sceneWrap #orderCard:before{background:#fff8e8 url('paper-fibres.svg') 0 0/180px 180px repeat;border:1px solid #d7bba1;border-radius:19px 13px 21px 16px;box-shadow:2px 4px #d1ab8c45}
#sceneWrap #orderCard .customer-heading{z-index:4}
#sceneWrap #orderCard>.stationery-art .sticker-tape{--sticker-size:74px;left:-7px;top:-32px;transform:rotate(9deg)}
#sceneWrap #orderCard>.stationery-art .sticker-flowers{--sticker-size:47px;right:4px;top:-27px;transform:rotate(20deg)}
#sceneWrap #orderCard>.stationery-art .sticker-ring{--sticker-size:29px;left:-23px;top:8px}
#sceneWrap #orderCard>.stationery-art .sticker-ring+ .sticker-ring{top:37px}

/* A stitched lilac label can grow; its flowers stay round. */
#sceneWrap #hudpack,#sceneWrap #hudpack:disabled,#sceneWrap #hudpack:hover,
html[data-game-layout] #sceneWrap #hudpack{
 position:relative;background:#d795ab url('paper-fibres.svg') 0 0/180px 180px repeat;
 border:3px solid #f2d4de;border-radius:29px 25px 30px 23px;outline:1px solid #bd7a90;
 box-shadow:inset 0 0 0 1px #bf8095,1px 3px #a6708238;
}
#sceneWrap #hudpack:before{content:'';position:absolute;inset:3px;border:1px dashed #ac7084;border-radius:inherit;pointer-events:none}
#sceneWrap #hudpack:after{content:'';position:absolute;right:-13px;top:-17px;width:35px;height:35px;background:var(--stationery) 0 0/300% 200% no-repeat;pointer-events:none}

/* A little scalloped recipe bookmark, with no long empty paper tail. */
#sceneWrap #recipeRailWrap{
 flex:0 1 auto;padding-bottom:16px;margin-top:12px;filter:drop-shadow(0 1px 0 #ba987366);
}
#sceneWrap #sceneFillHud{padding-bottom:0}
html[data-game-layout] #sceneWrap #recipeRailWrap{padding-bottom:12px}
#sceneWrap #recipeRailWrap:before{
 inset:0 -5px 5px;transform:rotate(.7deg);clip-path:none;border:0;border-radius:0;
 background:#fff6e2 url('paper-fibres.svg') 0 0/180px 180px repeat;box-shadow:none;
 -webkit-mask:linear-gradient(#000 0 0) center/calc(100% - 20px) calc(100% - 20px) no-repeat,radial-gradient(circle,#000 68%,transparent 72%) 0 0/26px 26px round;
 mask:linear-gradient(#000 0 0) center/calc(100% - 20px) calc(100% - 20px) no-repeat,radial-gradient(circle,#000 68%,transparent 72%) 0 0/26px 26px round;
}
#sceneWrap #recipeRailWrap:after{content:'';position:absolute;inset:7px 3px 13px;border:1px dashed #d0ad89;border-radius:24px 22px 18px 26px;pointer-events:none;z-index:-1;transform:rotate(.7deg)}
#sceneWrap .rail-title{padding:0 0 2px;position:relative;z-index:4;transform:rotate(-2deg)}
#sceneWrap .rail-title:before{content:'♡ ';color:#e58e99}
#sceneWrap .rail-title:after{content:' ♡';color:#e58e99}
#sceneWrap .recipe-vial{flex:0 1 auto;height:315px}
#sceneWrap #recipeRailWrap>.stationery-art .sticker-flowers{--sticker-size:42px;left:-16px;top:-7px;transform:rotate(-16deg)}
#sceneWrap #recipeRailWrap>.stationery-art .sticker-hearts{--sticker-size:31px;right:-9px;top:29px;transform:rotate(14deg)}
#sceneWrap #recipeRailWrap>.stationery-art .sticker-berry{--sticker-size:36px;right:-13px;bottom:39px;transform:rotate(16deg)}
#sceneWrap #railHint{width:calc(100% - 8px);margin:4px 0 0;padding:7px 3px 7px 28px;background:#fff9e8 url('paper-fibres.svg') 0 0/180px 180px repeat;border:1px dashed #cdb18b;border-radius:8px 12px 6px 11px;box-shadow:1px 2px #d8b39740;transform:rotate(-3deg)}
#sceneWrap #railHint:before{padding-bottom:2px;font-size:12px}
#sceneWrap #railHint:after{left:-6px;top:6px;width:32px;height:32px;background:var(--stationery) 0 100%/300% 200% no-repeat;transform:rotate(8deg)}
#sceneWrap #recipeRailWrap>.stationery-art .sticker-tape{--sticker-size:43px;left:2px;bottom:22px;transform:rotate(7deg)}
#sceneWrap #sceneFillHud .fill-signal{bottom:-17px}
#sceneWrap #sceneFill{border-radius:25px 22px 27px 20px;box-shadow:0 0 0 1px #b8959c,inset 0 0 0 2px #e5abbe,2px 4px #9c718d33}
#sceneWrap #sceneFillHud>.stationery-art .sticker-bunny{--sticker-size:35px;left:calc(50% - 18px);top:-25px;transform:rotate(-7deg)}
#sceneWrap #sceneFillHud>.stationery-art .sticker-flowers{--sticker-size:32px;left:-12px;top:-8px;transform:rotate(-18deg)}

/* Keep the same proportions on phones; reduce decoration size, not its ratio. */
html[data-game-layout="compact"] #sceneWrap #playDock>.stationery-art .sticker-ring{--sticker-size:28px;left:-15px}
html[data-game-layout="compact"] #sceneWrap #playDock>.stationery-art .sticker-tape{--sticker-size:50px;left:4px;top:-34px}
html[data-game-layout="compact"] #sceneWrap #playDock>.stationery-art .sticker-berry{--sticker-size:36px;right:-8px;top:-26px}
html[data-game-layout="compact"] #sceneWrap #playDock>.stationery-art .sticker-flowers{--sticker-size:34px;left:-10px;bottom:-9px}
html[data-game-layout="compact"] #sceneWrap #orderCard>.stationery-art .sticker-tape{--sticker-size:46px;left:-5px;top:-22px}
html[data-game-layout="compact"] #sceneWrap #orderCard>.stationery-art .sticker-flowers{--sticker-size:30px;right:20px;top:-19px}
html[data-game-layout="compact"] #sceneWrap #orderCard>.stationery-art .sticker-ring{--sticker-size:21px;left:-17px;top:3px}
html[data-game-layout="compact"] #sceneWrap #orderCard>.stationery-art .sticker-ring+ .sticker-ring{top:29px}
html[data-game-layout="compact"] #sceneWrap #recipeRailWrap{flex:0 1 auto;padding:6px 1px 14px;margin-top:8px}
html[data-game-layout="compact"] #sceneWrap .recipe-vial{height:260px;flex:0 1 auto}
html[data-game-layout="compact"] #sceneWrap #recipeRailWrap:before{inset:0 -3px 3px}
html[data-game-layout="compact"] #sceneWrap #recipeRailWrap>.stationery-art .sticker-flowers{--sticker-size:25px;left:-10px;top:-7px}
html[data-game-layout="compact"] #sceneWrap #recipeRailWrap>.stationery-art .sticker-hearts{--sticker-size:19px;right:-5px;top:18px}
html[data-game-layout="compact"] #sceneWrap #recipeRailWrap>.stationery-art .sticker-berry{--sticker-size:24px;right:-7px;bottom:40px}
html[data-game-layout="compact"] #sceneWrap #recipeRailWrap>.stationery-art .sticker-tape{--sticker-size:29px;left:0;bottom:41px}
html[data-game-layout="compact"] #sceneWrap #railHint{width:100%;margin-top:7px;padding:4px 1px 4px 13px}
html[data-game-layout="compact"] #sceneWrap #railHint:after{width:19px;height:19px;left:-4px;top:9px}
html[data-game-layout="compact"] #sceneWrap #sceneFillHud>.stationery-art .sticker-bunny{--sticker-size:26px;left:calc(50% - 13px);top:-19px}
html[data-game-layout="compact"] #sceneWrap #sceneFillHud>.stationery-art .sticker-flowers{--sticker-size:24px;left:-10px;top:-9px}
html[data-game-short="true"] #sceneWrap .recipe-vial{height:100px;min-height:100px}
html[data-game-short="true"] #sceneWrap #recipeRailWrap{margin-top:0;padding-bottom:8px}
html[data-game-short="true"] #sceneWrap .rail-title{padding-bottom:0}
html[data-game-short="true"] #sceneWrap #railHint{margin-top:3px}
html[data-game-narrow="true"] #sceneWrap #sceneFillHud .fill-signal{font-size:7px;letter-spacing:0;gap:3px}
html[data-game-landscape="true"] #sceneWrap #sceneFillHud>.stationery-art{display:none}
@media(max-height:850px) and (min-width:1201px){
 #sceneWrap #recipeRailWrap{margin-top:8px}
 html[data-game-layout="desktop"] #sceneWrap #railHint{padding-left:27px}
}