@font-face{font-family:'Chewy';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/chewy-latin-400.woff2') format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/courier-prime-latin-400.woff2') format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/courier-prime-latin-700.woff2') format('woff2')}

:root{
  --ink:#2b1d14; --paper:#fbf5e6; --kraft:#c99a62; --kraft-d:#a97a45; --rust:#c5521d; --rust-d:#9c3d12;
  --stamp:#c8322b; --sky:#e9e0cf; --van:#47607c; --banana:#efd470; --s:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--sky);font-family:'Courier Prime',ui-monospace,monospace;color:var(--ink)}
#stage{position:fixed;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;user-select:none;-webkit-user-select:none}
#stage img{position:absolute;display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.plate{left:-480px;top:-200px;width:2880px;height:1280px}
.plate.ml{left:-3360px;transform:scaleX(-1)} .plate.mr{left:2400px;transform:scaleX(-1)}
.layer{left:0;top:0;width:1920px;height:1080px}
.sticker{filter:drop-shadow(0 9px 0 rgba(43,29,20,.17))}

/* ---------- animated stage children ---------- */
#van-wrap{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:1676px 543px}
#van{filter:drop-shadow(0 9px 0 rgba(43,29,20,.17))}
#van.engine{animation:vanIdle .14s steps(2,end) infinite}
#van-wrap.honk{animation:vanHonk 200ms ease-in-out}
#van-wrap.drive{animation:vanDrive 1300ms cubic-bezier(.5,0,1,1) forwards}
#van-wrap.returning{animation:vanReturn 700ms cubic-bezier(.22,.9,.35,1) forwards}

#hero-wrap{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:1262px 960px}
#hero{filter:drop-shadow(0 9px 0 rgba(43,29,20,.17));animation:heroBreath 3.4s ease-in-out infinite alternate}
#hero-wrap.hop{animation:heroHop 360ms ease-in-out}
#hero-wrap.bounce{animation:heroBounce 200ms ease-in-out}

.extras{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.extra{position:absolute;transform-origin:50% 100%;will-change:transform}
.extra img{display:block;width:100%;height:auto;filter:drop-shadow(0 9px 0 rgba(43,29,20,.17))}
#stage .extra img{position:static;transform-origin:50% 100%}
.extra.fall{animation:extraLand 690ms cubic-bezier(.5,.05,.9,.4) forwards}
.extra.fall img{animation:extraTwist 420ms ease-out forwards}
.extra.fadein{animation:extraFade 150ms ease-out forwards}
.extra.fadein img{animation:none}

@keyframes vanIdle{0%{transform:translateY(0)}100%{transform:translateY(-2px)}}
@keyframes vanHonk{0%,100%{transform:rotate(0)}25%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}}
@keyframes vanDrive{0%{transform:translateX(0) rotate(0)}100%{transform:translateX(var(--dx)) rotate(-1.5deg)}}
@keyframes vanReturn{0%{transform:translateX(var(--dx))}100%{transform:translateX(0)}}
@keyframes heroBreath{0%{transform:scale(1) rotate(-0.5deg)}100%{transform:scale(1.012) rotate(0.5deg)}}
@keyframes heroHop{0%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-26px) scale(1,1)}72%{transform:translateY(0) scale(1.04,.96)}100%{transform:translateY(0) scale(1,1)}}
@keyframes heroBounce{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes extraLand{0%{transform:translateY(-1150px) scale(1,1)}61%{transform:translateY(0) scale(1,1)}71%{transform:translateY(0) scale(1.12,.86)}83%{transform:translateY(0) scale(.96,1.05)}100%{transform:translateY(0) scale(1,1)}}
@keyframes extraTwist{0%{transform:rotate(var(--r0))}100%{transform:rotate(var(--rx))}}
@keyframes extraFade{0%{opacity:0}100%{opacity:1}}

/* particles (peanuts + dust) */
.pnut{position:absolute;width:20px;height:11px;border-radius:9px;background:#f0e6d0;border:2px solid var(--ink)}
.puff{position:absolute;border-radius:50%;background:#d3c8b2;border:2px solid var(--ink)}

/* ---------- receipt slip (safe-area anchored) ---------- */
#callout{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
#tiny{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
#slip{position:absolute;left:306px;top:214px;width:470px;padding:26px 30px 30px;background:var(--paper);
  border:3px solid var(--ink);border-radius:6px;transform:rotate(-2.2deg);
  box-shadow:10px 12px 0 rgba(43,29,20,.2)}
#slip.shake{animation:slipShake 120ms ease-in-out}
@keyframes slipShake{0%,100%{transform:rotate(-2.2deg) translateX(0)}25%{transform:rotate(-2.2deg) translateX(-3px)}75%{transform:rotate(-2.2deg) translateX(3px)}}
#slip:after{content:"";position:absolute;left:-3px;right:-3px;bottom:-15px;height:15px;
  background:linear-gradient(135deg,var(--paper) 50%,transparent 50%) 0 0/20px 15px repeat-x,
             linear-gradient(225deg,var(--paper) 50%,transparent 50%) 0 0/20px 15px repeat-x;
  filter:drop-shadow(0 3px 0 var(--ink))}
.slip-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px dashed var(--ink);padding-bottom:10px}
.slip-head b{font-family:'Chewy',cursive;font-weight:400;font-size:34px;letter-spacing:1px;line-height:1}
.slip-head span{font-size:15px;font-weight:700;letter-spacing:1px}
#slip dl{margin:14px 0 12px;font-size:19px;line-height:1.5}
#slip dl div{display:flex;gap:8px} #slip dt{flex:none;width:128px;font-weight:700}
#slip dd{flex:1;border-bottom:2px dotted rgba(43,29,20,.35)}
.sign{position:relative;border-top:3px dashed var(--ink);padding-top:10px;height:132px}
.sign small{font-size:15px;font-weight:700;letter-spacing:1px}
.sign .line{position:absolute;left:0;right:0;bottom:22px;border-bottom:3px solid var(--ink)}
.sign .x{position:absolute;left:2px;bottom:26px;font-family:'Chewy';font-size:30px}
.sign svg.sig{position:absolute;left:34px;bottom:14px;width:370px;height:96px;overflow:visible}
#sig{fill:none;stroke:#1f2f8f;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.stamp{position:absolute;right:-8px;top:8px;padding:6px 16px 4px;border:5px solid var(--stamp);border-radius:10px;
  outline:2px solid var(--stamp);outline-offset:3px;color:var(--stamp);font-family:'Chewy';font-size:36px;letter-spacing:3px;
  line-height:1;text-align:center;background:rgba(251,245,230,.55)}
.stamp i{display:block;font:700 12px 'Courier Prime';letter-spacing:2px;margin-top:2px}
.stamp.show{animation:stampSlam 140ms cubic-bezier(.2,1.7,.45,1) both}
@keyframes stampSlam{0%{opacity:0;transform:rotate(-11deg) scale(2.4)}100%{opacity:.9;transform:rotate(-11deg) scale(1)}}
.accepted{margin-top:2px;font-weight:700;font-size:19px;height:26px;color:var(--stamp)}
.fadeable{opacity:0}
.fadeable.show{opacity:1;transition:opacity 120ms linear}
.stamp.show{transition:none}
#cta{display:block;width:100%;margin-top:8px;padding:16px 10px 12px;font-family:'Chewy',cursive;font-size:38px;letter-spacing:1.5px;
  color:#fff7e8;background:var(--rust);border:4px solid var(--ink);border-radius:14px;box-shadow:0 8px 0 var(--ink);cursor:pointer;
  text-shadow:0 3px 0 var(--rust-d)}
#cta[aria-disabled="true"]{cursor:not-allowed;filter:saturate(.55) brightness(.96);opacity:.75}
#cta.wiggle{animation:ctaWiggle 500ms ease-in-out}
@keyframes ctaWiggle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-1.5deg) scale(1.03)}60%{transform:rotate(1.5deg) scale(1.03)}}
#reset{display:none;margin:20px auto 0;background:none;border:0;font:700 16px 'Courier Prime';letter-spacing:1px;
  text-decoration:underline;color:var(--ink);cursor:pointer}
#reset.show{display:block}
#reset[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
#count-num.pop{animation:numPop 200ms cubic-bezier(.3,1.5,.5,1)}
@keyframes numPop{0%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- HUD (viewport anchored, scaled by --s) ---------- */
.hud{position:fixed;transform:scale(var(--s))}
#brand{left:calc(44px*var(--s));top:calc(30px*var(--s));transform-origin:0 0}
#brand h1{font-family:'Chewy',cursive;font-weight:400;font-size:78px;line-height:.9;letter-spacing:2px;color:var(--rust);
  -webkit-text-stroke:16px #fff;paint-order:stroke fill;filter:drop-shadow(0 6px 0 rgba(43,29,20,.18))}
#brand h1 em{font-style:normal;-webkit-text-stroke:5px var(--ink);position:absolute;left:0;top:0;color:var(--rust)}
#brand .tick{display:inline-block;margin:6px 0 0 6px;padding:4px 12px 2px;background:var(--ink);color:var(--banana);
  font-weight:700;font-size:22px;letter-spacing:2px;border-radius:6px;transform:rotate(-2deg)}

#count{left:50%;top:calc(34px*var(--s));transform-origin:50% 0;transform:translateX(-50%) scale(var(--s));text-align:center;white-space:nowrap}
#count .tag{display:inline-flex;align-items:center;gap:14px;padding:10px 20px 8px 44px;background:var(--kraft);border:3px solid var(--ink);
  border-radius:8px;box-shadow:0 6px 0 rgba(43,29,20,.25);font-weight:700;font-size:22px;letter-spacing:2px;position:relative}
#count .tag:before{content:"";position:absolute;left:12px;top:50%;width:11px;height:11px;margin-top:-6px;border-radius:50%;
  background:var(--sky);border:3px solid var(--ink)}
#count .n{font-family:'Chewy';font-size:44px;line-height:1;min-width:44px;padding:4px 12px 0;background:var(--paper);
  border:3px solid var(--ink);border-radius:6px;letter-spacing:1px;display:inline-block}
#status{margin-top:12px;font-weight:700;font-size:21px;letter-spacing:1px}
#status>span{background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:5px 16px 3px}

#label{right:calc(44px*var(--s));top:calc(30px*var(--s));transform-origin:100% 0;width:470px;background:var(--paper);
  border:3px solid var(--ink);border-radius:6px;box-shadow:8px 9px 0 rgba(43,29,20,.2)}
#label .top{display:flex;align-items:center;gap:12px;padding:6px 12px 4px;border-bottom:3px solid var(--ink);font-weight:700;font-size:14px;letter-spacing:2px}
#label .bars{flex:1;height:18px;background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 5px,var(--ink) 5px 6px,transparent 6px 10px,var(--ink) 10px 14px,transparent 14px 16px)}
#label .row{display:flex}
#label .row a,#label .row button{flex:1;padding:12px 4px 9px;font:700 21px 'Courier Prime';letter-spacing:1px;text-align:center;color:var(--ink);
  background:none;border:0;border-right:3px solid var(--ink);text-decoration:none;cursor:pointer}
#label .row :last-child{border-right:0;background:var(--banana)}
#label .row a[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
#label .row button[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
#label .ca{display:flex;justify-content:space-between;gap:10px;padding:5px 12px 4px;border-top:3px solid var(--ink);font-size:14px;font-weight:700;min-height:28px}
#label .ca output{color:var(--stamp)}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  #hero,#van.engine,#cta.wiggle,#count-num.pop{animation:none !important}
  #slip.shake{animation:none !important}
  .fadeable.show{transition:none}
  .stamp.show{animation:none !important;opacity:.9;transform:rotate(-11deg) scale(1)}
}