/* Pack It Up! — "Supermarket Pop" (design canvas B, 2026-09-14) on the Cardboard Workshop bench.
   Lab grammar: ink #3b2a2a outlines, hard 4px shadows, Chewy once for the title, Bubblegum Sans
   for buttons and headings, Nunito for anything she reads. Mint tiles, coral, lemon, sky, grape. */
:root{
  --ink:#3b2a2a; --mint:#b8f1dc; --coral:#ff6f61; --lemon:#ffe66d; --sky:#6ec6ff; --grape:#9b5de5; --lime:#7ee081;
  --paper:#fff; --cream:#fff4d6; --muted:rgba(59,42,42,.62);
  --sh:4px 4px 0 var(--ink); --sh3:3px 3px 0 var(--ink);
  --panelW:clamp(300px,30vw,360px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{font-family:'Nunito','Trebuchet MS',sans-serif;font-weight:700;color:var(--ink);background:var(--mint);
  touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.d,.stk,#title,#coins b,.st,.boxT .bnm,.num,.tag,h2,.tool,.gt{font-family:'Bubblegum Sans','Trebuchet MS',sans-serif;font-weight:400}
.hide{display:none!important}
button{font:inherit;color:var(--ink);cursor:pointer}

#stage{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr) var(--panelW);overflow:hidden}
#stage.bump{animation:stagebump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes stagebump{20%{transform:scale(1.01) translateY(-5px)}45%{transform:scale(.997) translateY(2px)}}

/* ---- scene (left) ---- */
#scene{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px 16px 16px 76px;min-width:0}
#top{display:flex;align-items:center;gap:12px;height:52px;flex:0 0 auto}
#title{font-family:'Chewy','Bubblegum Sans',sans-serif;font-size:clamp(26px,3.2vw,34px);color:var(--coral);text-shadow:3px 3px 0 var(--ink);letter-spacing:1px;white-space:nowrap}
#steps{display:flex;gap:6px;margin-left:6px;flex-wrap:wrap}
.st{font-size:15px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px 11px;opacity:.55;white-space:nowrap}
.st.did{background:var(--sky);opacity:1}
.st.on{background:var(--lemon);opacity:1;box-shadow:var(--sh3)}
#coins{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:21px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:3px 14px;box-shadow:var(--sh3)}
#coins.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.18)}}

#counter{display:flex;align-items:flex-end;gap:14px;min-height:clamp(120px,22vh,180px);flex:0 0 auto;position:relative}
#custWrap{width:clamp(96px,14vw,150px);flex:0 0 auto;height:100%;display:flex;align-items:flex-end;overflow:visible}
.cust{position:relative;font-size:clamp(84px,12vw,130px);line-height:1;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.25));transition:transform .8s cubic-bezier(.3,.9,.3,1.05),opacity .5s}
.cust.off{transform:translateX(-160%);opacity:0}
.cust.bye{transform:translateX(-160%);opacity:0;transition:transform .9s ease-in,opacity .6s}
.cust .prod{position:absolute;right:-14px;bottom:-4px;font-size:.42em;background:#fff;border:3px solid var(--ink);border-radius:50%;width:1.4em;height:1.4em;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh3)}
.cust .prod:empty{display:none}
.cust.talking .em{display:inline-block;animation:bob .9s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-5px)}}
.cust.jump .em{display:inline-block;animation:jump .6s cubic-bezier(.3,1.5,.5,1) 1}
@keyframes jump{30%{transform:translateY(-30px) scaleX(.94) scaleY(1.08)}60%{transform:translateY(0) scaleX(1.06) scaleY(.94)}}

#bubble{position:relative;flex:1;min-width:0;background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:var(--sh);padding:12px 16px;margin-bottom:10px;animation:pop .28s cubic-bezier(.3,1.4,.5,1);z-index:6}
#bubble:before{content:'';position:absolute;left:-14px;bottom:20px;width:20px;height:20px;background:#fff;border-left:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(45deg)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
#bubTxt{font-size:clamp(16px,1.6vw,20px);line-height:1.35}
#bubBtns{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
#bubBtns:empty{display:none}
.reply{min-height:46px;display:flex;align-items:center;padding:6px 14px;border-radius:14px;border:3px solid var(--ink);font-size:clamp(15px,1.4vw,18px);
  text-align:left;background:var(--lemon);box-shadow:var(--sh3);transform:rotate(-1.5deg)}
.reply.b{background:#fff;transform:rotate(1.2deg)}
.reply:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ---- the bench: net / so-far / box / shelf ---- */
#bench{position:relative;flex:1;min-height:0;background:#fff;background-image:linear-gradient(90deg,rgba(59,42,42,.1) 2px,transparent 2px),linear-gradient(0deg,rgba(59,42,42,.1) 2px,transparent 2px);background-size:60px 60px;
  border:4px solid var(--ink);border-radius:22px;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;gap:12px;overflow:hidden;padding:12px}
#benchHint{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:20px;text-align:center}
.idleShelf{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,3vw,30px);height:55%;width:100%}
.idleBox{height:100%;aspect-ratio:240/330}
.idleBox .bx{width:100%;height:100%;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.22))}
.idleBoard{width:90%;height:14px;background:#fff;border:4px solid var(--ink);border-radius:6px;box-shadow:var(--sh)}
.askCard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vh,22px);max-width:820px;padding:12px}
.askWho{font-size:clamp(56px,9vh,96px);line-height:1;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.2))}
.askTxt{font-size:clamp(20px,2.4vw,30px);line-height:1.35;color:var(--ink);text-align:center}
.askBtns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.askBtns .reply{min-height:64px;font-size:clamp(19px,2vw,26px);padding:10px 22px;font-family:'Bubblegum Sans',sans-serif;font-weight:400}
.idleLbl{font-family:'Bubblegum Sans',sans-serif;font-size:20px;color:rgba(59,42,42,.35);margin-top:6px}
.idleEmpty{font-size:clamp(70px,14vh,120px);line-height:1;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.2))}
.prodBig{font-size:clamp(90px,16vh,150px);line-height:1;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.25))}
.prodName{font-family:'Bubblegum Sans',sans-serif;font-size:26px;color:var(--ink)}
#netWrap{flex:1;height:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s,transform .5s}
#netWrap.fade{opacity:0;transform:scale(.6)}
#netSvg{flex:1;min-height:0;width:100%;position:relative}
#netSvg .net{position:absolute;inset:0;width:100%;height:100%}
#netHint{align-self:flex-start;font-family:'Bubblegum Sans',sans-serif;font-size:16px;color:#fff;background:var(--grape);border:3px solid var(--ink);border-radius:999px;padding:4px 14px;margin:2px 0 4px}
.net [data-part]{cursor:pointer}
.net .glow{animation:glow 1s ease-in-out infinite alternate}
@keyframes glow{from{filter:drop-shadow(0 0 0 rgba(155,93,229,0))}to{filter:drop-shadow(0 0 10px rgba(155,93,229,.9))}}
.net .flip{transform-box:fill-box;transform-origin:center;animation:flip .32s ease-in forwards}
@keyframes flip{to{transform:rotateX(88deg);fill:#d9c9a8}}
.net .pulse{transform-box:fill-box;transform-origin:center;animation:partpulse .32s ease-out}
@keyframes partpulse{50%{transform:scale(1.15)}}
.net .folded{filter:brightness(.82)}
.net .pulse2{stroke:#fff;stroke-width:4;stroke-dasharray:10 8;animation:hitpulse 1s ease-in-out 3}
#netHint{transition:background .2s}
.net .hit{cursor:pointer}
.net .stkHit{cursor:grab}
.net text{pointer-events:none}
#netHint:empty{display:none}
.net .badge{pointer-events:none}
.net .badgeIn{transform-box:fill-box;transform-origin:center;animation:badge .8s ease-in-out infinite alternate}
@keyframes badge{to{transform:scale(1.14)}}
#sofar{flex:0 0 clamp(110px,22vw,260px);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#sofar .lbl{font-family:'Bubblegum Sans',sans-serif;font-size:16px;color:var(--muted)}
#sofarBox{width:100%;height:70%;position:relative}
#sofarBox .bx{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(5px 6px 0 rgba(59,42,42,.22))}
#sofarBox.squish{animation:squish .3s}
@keyframes squish{40%{transform:scale(1.12,.9)}70%{transform:scale(.95,1.06)}}
#boxWrap{width:100%;height:100%;position:relative;touch-action:none}
#boxWrap .bx{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(6px 7px 0 rgba(59,42,42,.25))}
@keyframes hitpulse{50%{stroke:#9b5de5;stroke-width:6}}
#boxWrap .hit.front{cursor:crosshair}
.bx text{pointer-events:none}

/* shelf */
#shelf{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
#shelfRow{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,4vw,46px);flex:1;min-height:0;padding-bottom:6px}
.sb{position:relative;height:88%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;transition:transform .3s}
.sb .bx{height:calc(100% - 34px);filter:drop-shadow(5px 6px 0 rgba(59,42,42,.25))}
.sb.rival{height:62%;opacity:.85}
.sb.mine.squish{animation:squish .3s}
.tag{font-size:15px;background:var(--lemon);border:3px solid var(--ink);border-radius:6px;padding:2px 8px}
.tag.hot{background:var(--coral);color:#fff;font-size:17px}
#shelfBoard{height:18px;background:#fff;border:4px solid var(--ink);border-radius:6px;box-shadow:var(--sh);flex:0 0 auto}
#shoppers{position:relative;height:clamp(60px,11vh,84px);flex:0 0 auto;pointer-events:none}
.shopper{position:absolute;bottom:0;left:50%;font-size:clamp(48px,9vh,64px);line-height:1;filter:drop-shadow(3px 4px 0 rgba(59,42,42,.25));transform:translateX(60vw);transition:transform 1s cubic-bezier(.3,.9,.3,1.02),opacity .4s}
.shopper.at{transform:translateX(-50%)}
.shopper.happy:after{content:'🛒';position:absolute;left:100%;bottom:0;font-size:.6em}
.shopper.meh{opacity:.7}
.shopper.gone{transform:translateX(-70vw)}

/* ---- panel (right) ---- */
/* padding-bottom 84px: the portal paints its 💬 chat button over the iframe's bottom-right corner
   (z-index 450 in the PARENT document — nothing inside the game can see it). A control down there
   is untappable and looks fine in a screenshot. */
#panel{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px 76px 84px 14px;background:#fff;border-left:4px solid var(--ink);min-height:0;overflow-y:auto;overscroll-behavior:contain}
#panelHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#panel h2{font-size:24px;margin:0;color:var(--grape);line-height:1.1}
.chip{min-height:44px;border:3px solid var(--ink);border-radius:999px;background:#fff;padding:4px 12px;font-family:'Bubblegum Sans',sans-serif;font-size:15px;box-shadow:var(--sh3);white-space:nowrap}
.chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pv{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.pv p{margin:0;font-size:16px;line-height:1.45;color:var(--muted)}
.lbl{font-size:15px;color:var(--muted)}
.spacer{flex:1}

#pick{width:100%;height:100%;display:flex;flex-direction:column;gap:10px;min-height:0}
#pickQ{display:flex;align-items:center;justify-content:center;gap:12px;font-family:'Bubblegum Sans',sans-serif;font-size:clamp(20px,2.4vw,28px);flex:0 0 auto}
#pickQ .pq{font-size:1.6em;line-height:1;filter:drop-shadow(3px 3px 0 rgba(59,42,42,.2))}
#boxTypes{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.5vw,16px)}
.boxT{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0;min-width:0;border:3px solid var(--ink);border-radius:16px;background:var(--cream);box-shadow:var(--sh3);padding:8px 6px 6px}
.boxT .bxw{flex:1;min-height:0;width:100%;position:relative}
.boxT .bx{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(3px 4px 0 rgba(59,42,42,.2))}
.boxT .bnm{font-size:clamp(15px,1.6vw,20px);flex:0 0 auto}
.boxT:active,.boxT.squish{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.boxT.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px) rotate(-3deg)}50%{transform:translateX(6px) rotate(3deg)}75%{transform:translateX(-4px)}}
.boxT.hintWiggle{animation:wiggle 1.1s ease-in-out infinite;background:var(--lemon)}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg) scale(1.06)}60%{transform:rotate(4deg) scale(1.06)}}

#stepList{display:flex;flex-direction:column;gap:8px}
.step{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 10px;font-size:16px;min-height:48px;opacity:.55}
.step.on{opacity:1;border-color:var(--grape);box-shadow:var(--sh3)}
.step.did{opacity:1;background:#e9fbe9}
.num{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:18px;background:#fff}
.step.on .num{background:var(--grape);color:#fff}
.step.did .num{background:var(--lime)}

#tools{display:flex;gap:8px}
.tool{flex:1;min-height:52px;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:var(--sh3);font-size:17px;display:flex;align-items:center;justify-content:center;gap:6px}
.tool.on{background:var(--lemon);outline:3px solid var(--ink);outline-offset:2px}
.tool:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#paints{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.pot{width:100%;aspect-ratio:1;min-height:44px;border-radius:12px;border:3px solid var(--ink);box-shadow:var(--sh3);padding:0}
.pot.on{outline:3px solid var(--grape);outline-offset:2px}
.pot:active,.pot.squish{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#stickerRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stkr{width:100%;aspect-ratio:1;min-height:48px;border-radius:50%;border:3px solid var(--ink);background:#fff;box-shadow:var(--sh3);font-size:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;line-height:1}
.stkr small{font-family:'Bubblegum Sans',sans-serif;font-size:13px;color:var(--muted)}
.stkr.more{background:var(--cream);font-size:22px}
.stkr.on{background:var(--lemon);outline:3px solid var(--grape);outline-offset:2px}
.stkr:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#nameRow{display:flex;gap:8px}
#nameIn{flex:1;min-width:0;min-height:48px;border:3px solid var(--ink);border-radius:12px;padding:6px 12px;font-family:'Bubblegum Sans',sans-serif;font-size:20px;color:var(--coral);background:#fff;text-transform:uppercase;-webkit-user-select:text;user-select:text}
#nameIn::placeholder{color:rgba(59,42,42,.35);font-size:16px}
#nameDice{width:52px;flex:0 0 auto;font-size:24px;border:3px solid var(--ink);border-radius:12px;background:#fff;box-shadow:var(--sh3)}
#nameDice:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#designFoot{display:flex;gap:8px;align-items:stretch;margin-top:4px}
#undoBtn{width:52px;flex:0 0 auto;font-size:24px;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:var(--sh3)}
#undoBtn[disabled]{opacity:.4}
#stars{font-size:38px;color:var(--lemon);-webkit-text-stroke:2px var(--ink);letter-spacing:2px;line-height:1.1;min-height:44px}
#stars .dim{color:#eee}
#soldTxt{font-size:18px;color:var(--muted)}

/* ---- sticker buttons ---- */
.stk{font-family:'Bubblegum Sans',sans-serif;font-size:22px;letter-spacing:.5px;border:3px solid var(--ink);border-radius:16px;padding:10px 18px;box-shadow:var(--sh);
  color:var(--ink);min-height:52px;transform:rotate(-2deg);background:var(--lemon);flex:1}
.stk:active{transform:rotate(-2deg) translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.stk.green{background:var(--lime)}.stk.yellow{background:var(--lemon)}.stk.white{background:#fff}
.stk.big{font-size:26px;min-height:60px}
.stk[disabled]{opacity:.4}
.stk.ready{animation:readypulse 1.2s ease-in-out infinite}
#shelfBtn,.redesignBtn{flex:0 0 auto}
#turnBtns{display:flex;gap:8px}
#turnBtns .chip{flex:1;font-size:18px}
#boxWrap{cursor:grab}
#boxWrap.spinR{animation:spinR .38s cubic-bezier(.3,1.3,.5,1)}
#boxWrap.spinL{animation:spinL .38s cubic-bezier(.3,1.3,.5,1)}
@keyframes spinR{0%{transform:scaleX(1)}45%{transform:scaleX(.08) translateX(-20px)}55%{transform:scaleX(-.08) translateX(20px)}100%{transform:scaleX(1)}}
@keyframes spinL{0%{transform:scaleX(1)}45%{transform:scaleX(.08) translateX(20px)}55%{transform:scaleX(-.08) translateX(-20px)}100%{transform:scaleX(1)}}
.sideTag{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-family:'Bubblegum Sans',sans-serif;font-size:18px;color:#fff;background:var(--grape);border:3px solid var(--ink);border-radius:999px;padding:4px 16px;white-space:nowrap;pointer-events:none}
@keyframes readypulse{50%{transform:rotate(-2deg) scale(1.05)}}

/* ---- fx + overlays ---- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:900}
.float{position:fixed;pointer-events:none;font-family:'Bubblegum Sans',sans-serif;font-size:30px;color:var(--lemon);-webkit-text-stroke:2px var(--ink);text-shadow:3px 3px 0 var(--ink);z-index:901;animation:fl 1.2s ease-out forwards}
@keyframes fl{to{transform:translateY(-90px);opacity:0}}
.ov{position:fixed;inset:0;background:rgba(59,42,42,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.panelBox{background:#fff;border:5px solid var(--ink);border-radius:26px;padding:22px 20px;max-width:560px;width:100%;text-align:center;box-shadow:10px 10px 0 var(--ink);max-height:92vh;overflow:auto}
.panelBox .h1{font-family:'Bubblegum Sans',sans-serif;font-size:clamp(28px,5vw,40px);line-height:1;color:var(--ink);text-shadow:3px 3px 0 var(--coral);margin-bottom:10px}
.panelBox p{font-size:17px;line-height:1.4;margin:6px 0 16px;color:var(--muted)}
#shopItems{display:flex;flex-direction:column;gap:10px;margin:12px 0 16px;text-align:left}
.item{display:flex;align-items:center;gap:12px;border:3px solid var(--ink);border-radius:16px;padding:8px 10px;background:var(--cream);box-shadow:var(--sh3)}
.item .ic{width:60px;height:60px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid var(--ink);border-radius:12px;font-size:18px;letter-spacing:-6px}
.item .tx{flex:1;font-size:15px;line-height:1.3}
.item .tx b{display:block;font-family:'Bubblegum Sans',sans-serif;font-weight:400;font-size:19px}
.item .stk{flex:0 0 auto;min-width:96px;transform:none;font-size:18px;padding:8px 12px}
.item .stk:active{transform:translate(3px,3px)}
.item.owned{background:#e9ffd9}
#galItems{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:12px 0 16px}
.gi{display:flex;flex-direction:column;align-items:center;gap:2px}
.gi .bx{width:100%;height:150px;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.22))}
.gi .gt{font-size:15px;color:var(--coral)}
.gi .gs{font-size:14px;color:var(--muted)}

/* ---- portrait / phone: scene on top, panel below ---- */
@media (max-width:820px), (orientation:portrait){
  #stage{grid-template-columns:1fr;grid-template-rows:minmax(0,58%) minmax(0,42%)}
  #scene{padding:12px 12px 8px 68px}
  #top{padding-right:64px} /* portrait: the coins pill would sit under the shared ⛶ */
  /* portrait: the panel IS the bottom of the screen, so the shared 🔊/📮 stack lives in ITS left edge — keep that column clear; ⛶ is up in the scene's corner here */
  #panel{border-left:0;border-top:4px solid var(--ink);padding:12px 16px 84px 70px} /* 70, not 64: the shared buttons count a 6px halo as a hit */
  #counter{min-height:clamp(96px,18vh,150px)}
  #steps{display:none}
  #sofar{flex-basis:90px}
  #stickerRow{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
  #paints{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}
}
@media (max-width:480px){
  #title{font-size:24px}
  .prodBig{font-size:80px}
  #stickerRow{grid-template-columns:repeat(5,minmax(0,1fr))}
  #paints{grid-template-columns:repeat(5,minmax(0,1fr))}
}