/* =========================================================
   JIAOZI — build your box (drag-to-order)
   ========================================================= */

.build{
  position:relative;
  padding:clamp(56px,7vw,108px) 0 0;
  background:linear-gradient(180deg,var(--paper) 0%, var(--paper-3) 42%, var(--paper-2) 100%);
  overflow:clip;
}
.build::before{ /* faint counter grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(94deg, rgba(160,120,70,.05) 0 1px, transparent 1px 6px);
}
.build__head{position:relative}
.build__lead{
  margin-top:1.1rem; max-width:46ch; color:var(--ink-2);
  font-size:clamp(.95rem,1.05vw,1.05rem);
}

/* ---------- stage ---------- */
.build__stage{
  position:relative; display:grid; align-items:center; gap:clamp(12px,2vw,28px);
  grid-template-columns:minmax(0,1fr) clamp(250px,29vw,392px) minmax(0,1fr);
  max-width:var(--wrap); margin:clamp(22px,3.4vw,42px) auto 0;
  padding:0 var(--pad); min-height:min(66vh,600px);
}
.build__shelf{position:relative; height:100%; min-height:min(60vh,540px)}
.build__center{display:flex; flex-direction:column; align-items:center; gap:14px}

/* ---------- the box ---------- */
.build__box{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:16px;
  background:linear-gradient(160deg,#E3C69B 0%, #D3B183 46%, #C29A69 100%);
  box-shadow:
    0 30px 60px -28px rgba(90,60,25,.55),
    0 6px 16px -8px rgba(90,60,25,.35),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -14px 28px rgba(120,80,40,.22);
  display:grid; place-items:center; transition:box-shadow .3s var(--ease), transform .35s var(--ease);
}
.build__box::after{ /* kraft texture + flap seams */
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(92deg, rgba(140,95,50,.16) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, transparent 47%, rgba(140,95,50,.22) 47.4%, rgba(140,95,50,.22) 48%, transparent 48.4%);
  mix-blend-mode:multiply;
}
.build__box.is-hot{
  box-shadow:0 0 0 3px rgba(217,63,30,.45), 0 34px 66px -26px rgba(90,60,25,.6),
             inset 0 2px 0 rgba(255,255,255,.55);
  transform:translateY(-2px) scale(1.012);
}
.build__box-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:9px; width:74%; height:74%;
}
.build__slot{
  position:relative; border-radius:12px; border:1px dashed rgba(120,80,40,.32);
  display:grid; place-items:center; cursor:pointer;
  transition:background .25s, border-color .25s, transform .25s var(--ease);
}
.build__slot:empty{cursor:default}
.build__slot.filled{border-color:transparent; background:rgba(255,255,255,.28)}
.build__slot.filled:hover{background:rgba(217,63,30,.12)}
.build__slot img{width:96%; height:96%; object-fit:contain; animation:slotPop .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes slotPop{0%{transform:scale(.5) rotate(-8deg); opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1) rotate(0)}}

.build__hint{
  position:absolute; inset:auto 0 50% 0; transform:translateY(50%); text-align:center;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:#8A6238;
  pointer-events:none; transition:opacity .3s; z-index:2;
}
.build__box.has-items .build__hint{opacity:0}
.build__boxlabel{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}

/* steam */
.build__steam{position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:16px; opacity:0; transition:opacity .4s}
.build__box.is-steaming .build__steam{opacity:.9}
.puff{
  position:absolute; bottom:18%; width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
  animation:puffUp 1.5s ease-out forwards;
}
@keyframes puffUp{
  0%{transform:translate3d(0,0,0) scale(.5); opacity:.9}
  100%{transform:translate3d(var(--dx,0), -120px, 0) scale(1.9); opacity:0}
}

/* ---------- draggable dishes ---------- */
body.build-dragging, body.build-dragging *{user-select:none !important; -webkit-user-select:none !important}
.dishdrag img, .build__slot img{-webkit-user-drag:none; user-drag:none}
.dishdrag{
  position:absolute; width:clamp(112px,11vw,158px);
  appearance:none; border:0; background:transparent; padding:0; cursor:grab;
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:filter .3s, opacity .3s;
}
.dishdrag img{
  width:100%; display:block; pointer-events:none;
  filter:drop-shadow(0 16px 20px rgba(90,60,25,.25));
  transition:transform .4s var(--ease), filter .3s;
}
.dishdrag:hover img,.dishdrag:focus-visible img{transform:translateY(-6px) scale(1.03)}
.dishdrag:hover .tag,.dishdrag:focus-visible .tag{opacity:1; transform:none}
.dishdrag .tag{
  display:flex; gap:.4em; align-items:baseline; white-space:nowrap;
  opacity:0; transform:translateY(-4px); transition:opacity .28s var(--ease), transform .28s var(--ease);
  font-size:.7rem; letter-spacing:.02em; color:var(--ink);
  background:rgba(255,251,244,.85); border:1px solid var(--line-soft);
  padding:3px 9px; border-radius:999px; backdrop-filter:blur(4px);
}
.dishdrag .tag i{font-style:normal; color:var(--ink-3); font-variant-numeric:tabular-nums}
.dishdrag.in-box img{opacity:.34; filter:drop-shadow(0 8px 10px rgba(90,60,25,.16))}
.dishdrag.in-box::after{
  content:attr(data-count); position:absolute; top:-4px; right:6px;
  min-width:20px; height:20px; border-radius:999px; background:var(--chili); color:#fff;
  font-size:.62rem; display:grid; place-items:center; box-shadow:0 6px 14px -4px rgba(217,63,30,.8);
}
.dishdrag:focus-visible{outline:2px solid var(--chili); outline-offset:8px; border-radius:14px}

.drag-ghost{
  position:fixed; z-index:9997; pointer-events:none; margin:0; will-change:transform;
  filter:drop-shadow(0 34px 30px rgba(70,45,20,.4));
}
.drag-ghost img{width:100%}

/* hint hand */
.hand{
  position:absolute; z-index:5; pointer-events:none; width:44px; height:44px;
  opacity:0; transition:opacity .3s;
}
.hand.on{opacity:1; animation:handPath 2.6s var(--ease) infinite}
@keyframes handPath{
  0%,8%{transform:translate3d(0,0,0) scale(1); opacity:0}
  18%{opacity:1}
  60%{transform:translate3d(var(--hx),var(--hy),0) scale(.82); opacity:1}
  75%,100%{transform:translate3d(var(--hx),var(--hy),0) scale(.82); opacity:0}
}

/* ---------- bar ---------- */
.build__bar{
  position:relative; display:flex; align-items:center; gap:clamp(14px,2.4vw,32px);
  flex-wrap:wrap; margin-top:clamp(18px,2.6vw,30px);
  border-top:1px solid var(--line); padding-top:18px; padding-bottom:clamp(28px,4vw,46px);
}
.build__count{display:flex; align-items:baseline; gap:.45em}
.build__count b{font-family:"Fraunces",Georgia,serif; font-size:2rem; line-height:1; font-weight:600}
.build__count span{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.build__set{display:flex; align-items:center; gap:6px; flex:1; min-width:180px}
.build__set i{width:22px; height:6px; border-radius:99px; background:rgba(37,26,18,.12); transition:background .4s, transform .4s var(--ease)}
.build__set i.on{background:var(--chili); transform:scaleY(1.5)}
.build__set em{font-style:normal; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-left:6px}
.build__set.done em{color:var(--jade)}
.build__total{display:flex; align-items:baseline; gap:.5em}
.build__total span{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.build__total b{font-family:"Fraunces",Georgia,serif; font-size:1.55rem; font-weight:600; font-variant-numeric:tabular-nums}
.build__total s{color:var(--ink-3); font-size:.9rem; text-decoration-color:var(--chili)}
#buildSend{white-space:nowrap}
#buildSend[aria-disabled="true"]{opacity:.42; pointer-events:none}

/* confetti */
.confetti{
  position:fixed; z-index:9996; width:9px; height:14px; border-radius:2px; pointer-events:none;
  will-change:transform,opacity;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .build__stage{
    grid-template-columns:1fr; padding:0 16px; min-height:0; gap:18px;
  }
  .build__center{order:-1; position:sticky; top:calc(var(--navh) + 4px); z-index:8;
    padding:8px 0 12px; background:var(--paper-3);
    box-shadow:0 14px 18px -14px rgba(90,60,25,.35)}
  .build__boxlabel{display:none}
  .build__box{width:min(58vw,240px); margin:0 auto}
  .build__box-in{gap:7px}
  .build__shelf{min-height:0}
  .build__shelf .dishes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 6px}
  .dishdrag img{max-width:88%; margin:0 auto}
  .dishdrag{position:static; width:auto}
  .dishdrag .tag{font-size:.64rem; white-space:normal; text-align:center; justify-content:center; line-height:1.35;
    opacity:1; transform:none}
  .dishdrag .tag{flex-direction:column; align-items:center; gap:0; padding:3px 8px; border-radius:10px}
  .dishdrag .tag i{font-size:.6rem}
  .build__bar{gap:8px 12px; padding:14px 16px 26px; align-items:flex-end}
  .build__count b{font-size:1.6rem}
  .build__set{order:3; flex-basis:100%; margin-top:2px}
  .build__set em{font-size:.6rem}
  .build__total{margin-left:auto; text-align:right}
  .build__total b{font-size:1.25rem}
  #buildSend{order:4; flex-basis:100%; width:100%; text-align:center; justify-content:center; margin-top:4px}
}

@media (prefers-reduced-motion:reduce){
  .puff,.hand{animation:none !important}
}

/* ---------- sticky order pill (mobile) ---------- */
.order-pill{
  white-space:nowrap;
  position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:9990;
  display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  background:var(--chili); color:#fff; font-size:.82rem; letter-spacing:.02em;
  box-shadow:0 18px 34px -14px rgba(217,63,30,.85);
  transform:translate(-50%,150%); opacity:0;
  transition:transform .5s var(--ease), opacity .35s;
}
.order-pill.on{transform:translate(-50%,0); opacity:1}
.order-pill b{font-weight:600; font-size:.8rem}
.order-pill span{font-variant-numeric:tabular-nums; opacity:.82; font-size:.74rem}
@media (min-width:901px){ .order-pill{display:none} }

/* toast */
.build-toast{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:9995;
  transform:translate(-50%,16px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--paper); font-size:.8rem; padding:11px 18px; border-radius:999px;
  box-shadow:0 20px 40px -18px rgba(37,26,18,.8);
  transition:transform .35s var(--ease), opacity .3s;
}
.build-toast.on{transform:translate(-50%,0); opacity:1}
.order-pill.hide{transform:translate(-50%,170%); opacity:0}

/* ---------- extra life ---------- */
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .build__shelf .dishdrag:nth-child(1) img{animation:floaty 6.5s ease-in-out infinite; animation-delay:.2s}
  .build__shelf .dishdrag:nth-child(2) img{animation:floaty 7.2s ease-in-out infinite; animation-delay:1.1s}
  .build__shelf .dishdrag:nth-child(3) img{animation:floaty 6.8s ease-in-out infinite; animation-delay:2s}
}
@keyframes boxPulse{0%,100%{transform:translateY(-2px) scale(1.012)}50%{transform:translateY(-3px) scale(1.022)}}
.build__box.is-hot{animation:boxPulse 1.1s ease-in-out infinite}
.build__box.is-hot .build__hint{opacity:1; color:var(--chili)}
@keyframes countPop{0%{transform:scale(.7); opacity:.4}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.build__count b.pop{animation:countPop .45s cubic-bezier(.34,1.56,.64,1)}