:root{
  --red:#C8161D; --red-deep:#8F0E13; --ink:#2B0606; --yellow:#FCD030; --yellow-soft:#FFE27A;
  --paper:#FFF6DA; --box:#F9C31F; --box-dark:#D79A0B; --white:#fff;
  --display:"Noto Serif Display",Georgia,serif; --body:"Onest",system-ui,sans-serif; --mono:"Noto Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--body);color:var(--ink);background:var(--red-deep) url("../img/counter.92844aa986e7.jpg") center/cover fixed;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--white);outline-offset:2px;border-radius:4px}
h2,p{margin:0}

/* Header */
.top{position:relative;z-index:6;display:flex;align-items:center;gap:20px;height:72px;padding:0 24px;background:var(--red-deep);box-shadow:0 3px 0 var(--yellow)}
.brand img{display:block;height:50px;width:auto}
.tagline{color:var(--yellow-soft);font-weight:600;font-size:15px;line-height:1.2}
.help-btn{margin-left:auto;color:var(--yellow);font-weight:600;display:flex;align-items:center;gap:8px}
.help-btn span{display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--yellow);border-radius:50%}
.help{position:absolute;right:24px;top:68px;width:320px;padding:16px 18px;background:var(--paper);box-shadow:0 12px 30px #0006;font-size:15px;line-height:1.4}
.help p+p{margin-top:8px}

/* Stage grid */
.stage{position:relative;display:grid;grid-template-columns:minmax(290px,330px) minmax(0,1fr) minmax(190px,224px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"pantry sauces sides" "pantry center sides";height:calc(100dvh - 75px);min-height:640px;padding:0 20px 14px;gap:0 20px}
.tape{display:inline-block;font:900 24px/1.1 var(--display);background:var(--yellow);padding:7px 14px 8px;box-shadow:0 3px 8px #0004}
.tape-l{transform:rotate(-2.5deg)}.tape-r{transform:rotate(2.5deg);font-size:19px;white-space:nowrap}

/* Sauces */
.sauces{grid-area:sauces;z-index:7;margin-top:-46px;pointer-events:none}
.bottle{pointer-events:auto}
.bottles{display:flex;justify-content:center;gap:clamp(6px,1.5vw,24px)}
.bottle{display:flex;flex-direction:column;align-items:center;width:102px}
.bottle svg{display:block;width:62px;height:124px;filter:drop-shadow(0 8px 6px #0006);transform-origin:50% 90%;transition:transform .18s}
.bottle:hover svg{transform:translateY(-4px) rotate(-3deg)}
.label{display:block;margin-top:-10px;position:relative;background:var(--yellow);font-size:13px;font-weight:600;line-height:1.15;padding:4px 7px;box-shadow:0 2px 5px #0004;transform:rotate(-2deg);text-align:center}
.label small{font-size:12px;font-weight:400;white-space:nowrap}
.on>.label,.tub-btn.on .label{background:var(--ink);color:var(--yellow)}

/* Pantry */
.pantry{grid-area:pantry;display:flex;flex-direction:column;min-height:0;padding-top:16px;z-index:2}
.presets{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 8px}
.presets button{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:#0000;border:1.5px solid var(--yellow);color:var(--yellow)}
.presets button:hover{background:var(--yellow);color:var(--ink)}
.tubs{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--yellow) transparent;padding:0 6px 12px 0}
.tubs h3{margin:10px 0 6px;color:var(--yellow);font-size:14px;font-weight:800}
.tub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;align-items:start}
.tub-cell{position:relative}
.tub-btn{display:block;width:100%}
.tub{display:block;position:relative;aspect-ratio:5/4;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#ffffff50,#ffffff14 45%,#ffffff33);box-shadow:inset 0 0 0 2px #ffffffb8,inset 0 0 0 6px #ffffff2e,0 6px 10px #0005;transition:transform .15s}
.tub::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#ffffff5c 0 16%,#fff0 26%);pointer-events:none}
.tub img{position:absolute;pointer-events:none}
.tub-btn:hover .tub{transform:translateY(-3px) rotate(-1.5deg)}
.tub-btn:active .tub{transform:scale(.95)}
.tub-cell .label{margin:-8px auto 0;width:100%;position:relative;z-index:1;pointer-events:none}
.tub-cell .label small{display:block}
.count{position:absolute;top:-6px;left:-5px;z-index:2;display:grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--yellow);font-weight:800;font-size:13px}
.minus{position:absolute;top:-6px;right:-5px;z-index:2;width:28px;height:28px;border-radius:50%;background:var(--white);color:var(--red-deep);font-weight:800;font-size:18px;line-height:1;box-shadow:0 2px 5px #0005}

/* Box */
.center{grid-area:center;display:flex;flex-direction:column;min-height:0;min-width:0;align-items:center;gap:8px;z-index:3;padding-top:4px}
.box{flex:1;min-height:0;aspect-ratio:1.42;max-width:100%;display:grid;grid-template-rows:34px minmax(0,1fr);filter:drop-shadow(0 22px 22px #3a0204a0)}
.lid{min-height:0;overflow:hidden;margin:0 7%;background:linear-gradient(#E7AE12,var(--box));clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);display:grid;place-items:center}
.lid img{display:block;height:22px;width:auto;filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(5200%) hue-rotate(354deg) brightness(.9);opacity:.9}
.wells{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 28%;gap:clamp(6px,1vw,12px);padding:clamp(6px,1vw,12px);background:var(--box);border-radius:3px;box-shadow:inset 0 -6px 0 var(--box-dark)}
.well{position:relative;min-height:0;background:#FFFBEF url("../img/paper.a0543a78cacc.svg");box-shadow:inset 0 0 0 1px #d79a0b,inset 0 6px 14px #6b3a0040;overflow:hidden;display:grid;place-items:center;container-type:size}
.side-hint{background:var(--yellow);font-weight:600;font-size:14px;line-height:1.2;padding:7px 10px;text-align:center;transform:rotate(-3deg);box-shadow:0 2px 6px #0003;max-width:88%}
.side-pack{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;padding:4px}
.side-pack img{width:50%;min-width:64px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 5px 4px #0005);margin:-4px}

/* Pizza */
.pizza{--d:96cqmin;position:relative;width:calc(var(--d)*var(--scale,1));aspect-ratio:1;transition:width .35s cubic-bezier(.2,.9,.3,1.2),filter 1.2s;filter:drop-shadow(0 8px 8px #4a2a0066)}
.pizza>*,.pizza .pl{position:absolute;inset:0}
.pl{width:100%;height:100%;object-fit:contain}
.pl-raw,.pl-baked{transition:opacity 1.2s}
.pl-baked,.pl-brown{opacity:0}
.pl-brown{transition:opacity 1.3s .1s;pointer-events:none}
.is-baked .pl-baked,.is-baked .pl-brown{opacity:1}
.is-baked .pieces{filter:saturate(1.1) brightness(.93) contrast(1.03)}
.pieces{transition:filter 1.2s}
.piece{position:absolute;transform:translate(-50%,-50%) rotate(var(--r));pointer-events:none}
.half-left{clip-path:inset(0 50% 0 0)}.half-right{clip-path:inset(0 0 0 50%)}
.guide{left:50%!important;right:auto!important;width:2px;border-left:2px dashed #fff;opacity:.85;pointer-events:none;mix-blend-mode:difference}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-90%) rotate(var(--r)) scale(1.5)}70%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(.96)}100%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}}
.piece.drop{animation:pop .34s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--delay)}
@keyframes wipe{from{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(72% at 50% 50%)}}
.pl.wipe{animation:wipe .55s ease-out both}
@keyframes melt{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.pl.melt{animation:melt .5s ease-out both}

/* Dock */
.dock{flex:none;width:100%;display:flex;flex-direction:column;gap:7px}
.dock-row{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 12px;align-items:center}
.seg{display:inline-flex;background:var(--red-deep);border-radius:9px;padding:3px;box-shadow:inset 0 0 0 1px #ffffff26}
.seg button{color:#ffeab0;font-size:13px;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;line-height:1.15}
.seg button small{display:block;font-weight:400;font-size:11.5px;opacity:.85}
.seg button[aria-checked=true]{background:var(--yellow);color:var(--ink)}
.dock-main{flex-wrap:nowrap;gap:12px}
.coach{flex:1 1 auto;max-width:330px;background:var(--paper);padding:7px 12px;font-size:14px;font-weight:600;line-height:1.2;transform:rotate(-.7deg);box-shadow:0 3px 7px #0004}
.undo{color:var(--white);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.undo:disabled{opacity:.4;cursor:default}
.cta{flex:none;background:var(--yellow);color:var(--ink);font-weight:800;font-size:18px;padding:11px 20px;border-radius:999px;box-shadow:0 5px 0 #b98a00,0 10px 16px #0005;white-space:nowrap;transition:transform .1s,box-shadow .1s}
.cta b{font-family:var(--display);font-weight:900;margin-left:6px}
.cta:hover{background:var(--yellow-soft)}
.cta:active{transform:translateY(4px);box-shadow:0 1px 0 #b98a00}

/* Sides */
.sides{grid-area:sides;padding-top:16px;z-index:2;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--yellow) transparent}
.side-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-top:12px}
.side-cell{position:relative}
.side-cell .tub-btn img{display:block;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 7px #0006);transition:transform .15s}
.side-cell .tub-btn:hover img{transform:translateY(-3px) rotate(2deg)}
.side-cell .label{width:100%;margin:-6px auto 0;pointer-events:none}
.side-cell .label small{display:block}

/* Oven */
.oven{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 46% 58%,#ffb30055,#ff5a0040 40%,#3a0000d0 85%);transition:opacity .45s}
.baking .oven{opacity:1}
.baking .pizza{filter:drop-shadow(0 0 34px #ffae00)}
.baking :is(.pantry,.sides,.sauces,.dock){pointer-events:none}

/* Receipt mode */
.ready .pantry{visibility:hidden}
.ready .sauces{opacity:.45;pointer-events:none}
.ready .dock-row:first-child,.ready #bake,.ready .undo{display:none}
.receipt{grid-area:pantry;z-index:5;align-self:start;margin-top:18px;max-height:calc(100% - 26px);overflow-y:auto;background:var(--paper);font-family:var(--mono);font-size:14px;line-height:1.3;padding:20px 18px 26px;transform:rotate(-1.2deg);box-shadow:0 18px 30px #0007;--z:8px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--z)),96% 100%,92% calc(100% - var(--z)),88% 100%,84% calc(100% - var(--z)),80% 100%,76% calc(100% - var(--z)),72% 100%,68% calc(100% - var(--z)),64% 100%,60% calc(100% - var(--z)),56% 100%,52% calc(100% - var(--z)),48% 100%,44% calc(100% - var(--z)),40% 100%,36% calc(100% - var(--z)),32% 100%,28% calc(100% - var(--z)),24% 100%,20% calc(100% - var(--z)),16% 100%,12% calc(100% - var(--z)),8% 100%,4% calc(100% - var(--z)),0 100%)}
@keyframes print{from{transform:translateY(-30px) rotate(-1.2deg);opacity:0}to{transform:rotate(-1.2deg);opacity:1}}
.receipt.print{animation:print .45s ease-out both}
.receipt h2,.slip h1{font:700 21px/1 var(--mono);text-align:center;letter-spacing:.02em;margin:0}
.slip-sub{text-align:center;font-size:13px;margin:5px 0 0}
.receipt hr,.slip hr{border:0;border-top:1.5px dashed #2b060688;margin:10px 0}
.r-line{display:flex;justify-content:space-between;gap:10px}
.r-sub{font-size:13px;color:#5b2e1f;padding-left:8px}
.r-group{margin-bottom:8px}
.r-x{color:var(--red);text-decoration:underline;font-size:12px;font-family:inherit}
.r-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:15px;margin-top:6px}
.r-total span:last-child{font-size:21px}
.r-opts{display:flex;gap:12px;margin:8px 0;flex-wrap:wrap}
.r-opts label{display:flex;gap:5px;align-items:center;cursor:pointer}
.receipt input[type=radio]{accent-color:var(--red);margin:0}
.field{display:block;margin-top:8px;font-size:13px;font-weight:700}
.field input,.field textarea{display:block;width:100%;margin-top:2px;padding:7px 8px;font:400 16px var(--mono);background:#fff;border:1.5px solid var(--ink);border-radius:3px;color:var(--ink)}
.field.bad input,.field.bad textarea{border-color:var(--red);box-shadow:0 0 0 2px #c8161d44}
.r-err{color:var(--red);font-weight:700;margin-top:8px;font-size:13px}
.pay{display:block;width:100%;margin-top:10px;background:var(--red);color:var(--white);font:800 17px var(--body);padding:12px;border-radius:999px}
.pay:hover{background:var(--red-deep)}
.pay:disabled{opacity:.6;cursor:wait}
.link{display:block;margin:9px auto 0;text-align:center;text-decoration:underline;font:700 13px var(--mono);color:var(--ink);text-underline-offset:2px}
.r-note{font-size:12px;text-align:center;margin-top:8px}

/* Toast */
.toast{position:fixed;left:46%;bottom:24px;transform:translate(-50%,16px);z-index:30;background:var(--ink);color:var(--yellow);font-weight:600;font-size:14px;padding:7px 15px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.flyer{position:fixed;z-index:40;pointer-events:none;object-fit:contain;filter:drop-shadow(0 8px 6px #0005)}

/* Order page */
.order-wrap{display:grid;place-items:start center;padding:32px 16px}
.slip{width:min(420px,100%);background:var(--paper);font-family:var(--mono);padding:24px 22px 28px;box-shadow:0 18px 30px #0007;line-height:1.35}
.slip-status{text-align:center;margin:12px 0;font-weight:700;background:var(--yellow);padding:6px}
.order-page{height:auto;min-height:100%}

/* Short laptops */
@media (max-height:760px) and (min-width:981px){
  .bottle svg{width:48px;height:94px}
  .bottle{width:92px}
  .stage{min-height:590px}
}

/* Tablet + phone: one column, the pizza stays in sight */
@media (max-width:980px){
  body{background-attachment:scroll}
  .top{height:60px;padding:0 16px;gap:12px}
  .brand img{height:38px}
  .tagline{display:none}
  .help{right:16px;left:16px;width:auto;top:56px}
  .stage{display:flex;flex-direction:column;height:auto;min-height:0;padding:0 16px 96px;gap:14px}
  .center{order:1;position:sticky;top:0;z-index:7;margin:0 -16px;padding:8px 16px 8px;background:#8f0e13f2;box-shadow:0 8px 16px #0005}
  .box{flex:none;width:min(100%,420px);aspect-ratio:1.42;grid-template-rows:minmax(0,1fr)}
  .lid{display:none}
  .dock{gap:6px}
  .dock-main{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--red-deep);box-shadow:0 -3px 0 var(--yellow)}
  .coach{display:none}
  .undo{margin-right:auto}
  .dock-row:first-child{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;width:100%}
  .sauces{order:2;margin:0 -16px;z-index:1;overflow-x:auto;scrollbar-width:none;padding:6px 16px 0}
  .bottles{justify-content:flex-start;width:max-content}
  .bottle svg{width:50px;height:100px}
  .sauces{pointer-events:auto}
  .bottle{width:88px}
  .pantry{order:3;padding-top:0}
  .tubs{overflow:visible;padding:0}
  .sides{order:4;overflow:visible;padding-top:0}
  .side-grid{grid-template-columns:repeat(3,1fr)}
  .tub-grid{grid-template-columns:repeat(auto-fill,minmax(94px,1fr))}
  .receipt{order:2;margin:0;width:100%;align-self:stretch;max-height:none;overflow:visible;transform:none;animation:none!important}
  .ready .center{position:static}
  .ready .dock,.ready .sauces{display:none}
  .stage.ready{padding-bottom:24px}
  .ready .pantry{display:none}
  .toast{left:50%;bottom:84px;width:max-content}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}