/* Local felt workshop: every control remains reachable beside the fitted canvas. */
.basket-game{height:100%;min-height:0;display:flex;padding:12px;gap:14px;box-sizing:border-box;background:radial-gradient(ellipse at 30% 20%,#fff9ed,#edf1df)}
.basket-game[hidden]{display:none}
.basket-stage{flex:1;min-width:0;min-height:0}
.basket-stage>.workshop-canvas{width:100%;height:100%;touch-action:none;display:block}
.basket-stage .bag-art{overflow:hidden!important;width:470px;height:390px;pointer-events:none}
.basket-game .felt-patch{overflow:hidden!important;pointer-events:none}
.bag-stickers>g{cursor:grab;outline:none}.bag-stickers>g:focus-visible>rect{stroke:#153f32;stroke-width:4}
.basket-tools{position:relative;width:320px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:16px;box-sizing:border-box;background:#fffaf0;border:1px solid #e5d8b9;border-radius:24px;box-shadow:0 8px 24px #4b482512}
.workshop-heading{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.workshop-step{font-size:10px;letter-spacing:.6px;margin:0;color:#58765d}
.basket-tools h2{font-size:25px;line-height:1.15;margin:0;color:#194c3c}
.workshop-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.basket-tools button{min-width:0;min-height:48px;border:2px solid #d7dfc7;border-radius:15px;background:#fffefa;color:#1b4032;font:inherit;font-size:14px;font-weight:800;cursor:pointer;touch-action:manipulation}
.basket-tools button:focus-visible{outline:3px solid #c47215;outline-offset:2px}
.basket-tools button[aria-pressed=true]{border-color:#194d3a;box-shadow:0 0 0 2px #fff;background:#e3edcf}
.basket-tools button:disabled{opacity:.4;cursor:default}
.basket-tools .workshop-undo{min-height:44px;padding:4px 9px;font-size:14px;flex-shrink:0}
.bag-thumbnail{display:block;width:82px;height:75px;margin:0 auto;background-image:url('/assets/treat-bag-bodies.webp');background-size:200% 200%;background-repeat:no-repeat}
.shape-choice{padding:5px}
.handle-choice{display:flex;flex-direction:column;align-items:center;padding:4px}
.handle-choice>svg{width:68px;height:46px;flex-shrink:0}
.patch-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 3px}
.patch-choice>svg{width:65px;height:58px;display:block;pointer-events:none}
.patch-choice>span{font-size:12px;line-height:1.2}
.workshop-edit{display:flex;gap:5px}.workshop-edit:empty{display:none}
.workshop-edit button{flex:1;font-size:13px;padding:3px}
.workshop-tip{font-size:13px;line-height:1.3;margin:0;color:#466b55}.workshop-tip:empty{display:none}
.workshop-nav{display:flex;gap:10px;margin-top:auto;padding-top:2px}
.workshop-nav button{flex:1}.workshop-nav button:last-child{background:#1c5943;color:white;border-color:#1c5943}
.basket-tools[data-step="4"] .workshop-options{grid-template-columns:1fr}
.basket-tools .treat-choice{display:flex;align-items:center;justify-content:center;gap:12px;touch-action:none;background:#fff1d0;border-color:#e4bd66;padding:4px}
.treat-choice>svg{width:85px;height:85px;pointer-events:none}
.treat-counter{display:flex;justify-content:center;gap:8px;padding:8px 0}
.treat-counter span{width:34px;height:34px;border:2px dashed #b9b99a;border-radius:50%;display:grid;place-items:center;font-weight:850;color:#58715d}
.treat-counter span.is-filled{background:#e4a62e;border:2px solid #c38b20;color:#283e27}
@media(max-aspect-ratio:1/1){
 .basket-game{flex-direction:column;padding:8px;gap:7px}
 .basket-tools{width:100%;padding:9px;gap:6px}
 .workshop-heading{position:absolute;right:9px;top:8px;min-height:0}.workshop-step{display:none}
 .basket-tools h2{font-size:20px;min-height:44px;padding-right:82px;display:flex;align-items:center}
 .workshop-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .basket-tools[data-step="0"] .workshop-options{grid-template-columns:repeat(4,minmax(0,1fr))}
 .basket-tools button{min-height:44px;font-size:13px}
 .bag-thumbnail{width:55px;height:50px}
 .patch-choice{flex-direction:row;gap:3px;padding:3px}
 .patch-choice>svg{width:42px;height:42px}.patch-choice>span{font-size:11px}
 .handle-choice{flex-direction:row;justify-content:center;gap:4px}.handle-choice>svg{width:40px;height:38px}
 .workshop-tip{font-size:12px}.workshop-nav{gap:6px}
 .treat-choice>svg{width:58px;height:58px}.treat-counter{padding:0}
}
@media(max-height:650px) and (min-aspect-ratio:1/1){
 .basket-game{padding:7px;gap:8px}
 .basket-tools{width:300px;padding:8px;gap:6px}
 .workshop-heading{position:absolute;right:8px;top:8px;min-height:0}.workshop-step{display:none}
 .basket-tools h2{font-size:20px;min-height:44px;padding-right:75px;display:flex;align-items:center}
 .workshop-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .basket-tools[data-step="0"] .workshop-options{grid-template-columns:repeat(4,minmax(0,1fr))}
 .basket-tools button{min-height:44px;font-size:12px}
 .bag-thumbnail{width:45px;height:41px}
 .patch-choice{padding:2px}.patch-choice>svg{width:42px;height:38px}.patch-choice>span{font-size:11px}
 .handle-choice>svg{width:53px;height:37px}.workshop-tip{font-size:12px}
 .treat-choice>svg{width:60px;height:60px}.treat-counter{padding:2px 0}
}
@media(max-height:400px) and (min-aspect-ratio:1/1){
 .basket-tools{gap:4px;width:295px;padding:6px}
 .basket-tools h2{font-size:18px}
 .patch-choice{flex-direction:row;gap:3px}.patch-choice>svg{width:31px;height:34px}
 .workshop-tip{font-size:11px}.bag-thumbnail{height:34px;width:37px}
}

.basket-tools h2:focus{outline:none}

/* Generated handle art uses the same alpha-normalized framing in play and choices. */
.basket-game .bag-rendered-handle,.basket-game .handle-preview{overflow:hidden!important;pointer-events:none}
.handle-choice>.handle-preview{width:78px;height:65px}
@media(max-aspect-ratio:1/1){.handle-choice>.handle-preview{width:43px;height:43px}}
@media(max-height:650px) and (min-aspect-ratio:1/1){.handle-choice>.handle-preview{width:54px;height:47px}}

.bag-opening-guide{fill:none;stroke:#e8b64c;stroke-width:2;opacity:.7}
.sweet-settle{animation:sweet-settle .35s ease-out}
@keyframes sweet-settle{from{transform:translateY(-25px);opacity:.2}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.sweet-settle{animation:none}}

/* Five physical treats, with a dialog-level drag layer spanning tray and stage. */
.treat-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px;background:#f6e8c9;border-radius:20px}
.basket-tools .treat-piece{border:0;background:transparent;box-shadow:none;touch-action:none;padding:0;aspect-ratio:1;cursor:grab}
.treat-piece img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.treat-piece:nth-child(2n){transform:rotate(-16deg)}
.treat-piece:nth-child(3n){transform:rotate(15deg)}
.treat-piece.is-held,.treat-piece.is-packed{visibility:hidden}
.floating-treat{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-50%);display:none}
.floating-treat img{width:100%;height:100%;object-fit:contain;user-select:none}
@media(max-aspect-ratio:1/1){.treat-tray{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:5px}}
@media(max-height:450px) and (min-aspect-ratio:1/1){.treat-tray{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:3px}}

.treat-tray{grid-template-columns:repeat(2,minmax(0,1fr))}.treat-piece img{transform:scale(1.2)}
@media(max-aspect-ratio:1/1){.treat-tray{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-height:650px) and (min-aspect-ratio:1/1){.treat-tray{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-height:450px) and (min-aspect-ratio:1/1){.treat-tray{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Ten distinct sweets stay within the play controls. */
.treat-tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.treat-piece img{transform:none}
.treat-counter{flex-wrap:wrap;gap:4px}.treat-counter span{width:24px;height:24px;font-size:12px}
@media(max-aspect-ratio:1/1){.treat-tray{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-height:650px) and (min-aspect-ratio:1/1){.treat-tray{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}}