/* STOCKBITE tokens (locked from assets/avatar.png + banner.png, ui-ux-pro-max: Flat Design, no gradients, fast simple hovers)
   palette : orange #FF5A00 (page, art bg) | lime #86DE45 (plaque, art fill) | ink #0A0A0A (outline, text) |
             shadow #C93E00 (drawn offset shadow) | paper #FFFCF5 (plate, receipt) | steel #9A9A9A (cutlery)
   type    : Archivo Black (display, stretched, cramped) + IBM Plex Mono 500/700 (CA, prices, receipt), both bundled in /fonts
   space   : 4 8 12 16 24 40 64 px | outline 3px on chrome, 10/400 of a plaque | radius 10px chrome, 38/400 plaque
   motion  : one idiom, the bite: pop-in 140ms with overshoot, hold, then a slow shrink (regrow). Flat, hard-edged, no blur. */

@font-face{font-family:"Archivo Black";src:url("fonts/archivo-black-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --orange:#FF5A00; --lime:#86DE45; --ink:#0A0A0A; --shade:#C93E00; --paper:#FFFCF5; --steel:#9A9A9A;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:40px; --s7:64px;
  --r:10px; --line:3px;
  --display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --tapeh:52px; --simh:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--tapeh)}
body{margin:0;background:var(--orange);color:var(--ink);font-family:var(--mono);font-weight:500;font-size:16px;line-height:1.45;
  padding:calc(var(--tapeh) + var(--s5)) 0 calc(var(--simh) + var(--s6));overflow-x:hidden;min-height:100vh}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:4px solid var(--paper);outline-offset:2px;box-shadow:0 0 0 7px var(--ink)}

/* ---------- top ticker tape (fixed) ---------- */
.tape{position:fixed;top:0;left:0;right:0;height:var(--tapeh);z-index:50;background:var(--ink);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);
  border-bottom:var(--line) dashed var(--lime)}
.cell{position:relative;height:36px;border-radius:var(--r);background:var(--lime);color:var(--ink);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);
  font-family:var(--mono);font-weight:700;font-size:15px;border:0;white-space:nowrap}
.tape-gap{flex:1}
.ca{overflow:hidden;padding-right:56px;text-align:left}
.ca-lbl{font-family:var(--display);font-size:11px;letter-spacing:.06em;background:var(--ink);color:var(--lime);padding:2px 6px;border-radius:6px}
.ca-text{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:0}
.ca-bite{position:absolute;right:0;top:-16px;width:44px;height:68px;fill:var(--ink);transform:scale(0);transform-origin:100% 50%;
  transition:transform .3s ease-in}
.ca-bite path{fill:var(--ink)}
.ca-dent{position:absolute;width:7px;height:7px;background:var(--ink);border-radius:2px;transform:rotate(45deg) scale(0);transition:transform .2s ease-in;top:8px}
.ca-dent.d1{right:64px}.ca-dent.d2{right:64px;top:22px}
.ca.chomp .ca-bite{transform:scale(1);transition:transform .14s cubic-bezier(.3,1.7,.5,1)}
.ca.chomp .ca-dent{transform:rotate(45deg) scale(1);transition:transform .14s .04s cubic-bezier(.3,1.7,.5,1)}
.ca:hover{background:#9DEB5F}
.ca:active{transform:translateY(1px)}
.copied{position:absolute;left:8px;top:calc(100% + 10px);background:var(--paper);color:var(--ink);font-family:var(--display);font-size:13px;letter-spacing:.04em;padding:4px 10px;border:var(--line) solid var(--ink);
  border-radius:8px;box-shadow:4px 5px 0 var(--shade);transform:rotate(-3deg) scale(0);transform-origin:20% 0;pointer-events:none;transition:transform .12s ease-in}
.copied.on{transform:rotate(-3deg) scale(1);transition:transform .16s cubic-bezier(.3,1.7,.5,1)}
.stat{font-size:13px;gap:var(--s2)}
.stat .k{font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.06em}
.stat b{font-size:16px;min-width:2ch}
.stat-bites,.stat-clock{display:none}
.tool-x{background:var(--paper);width:44px;padding:0;justify-content:center}
.tool-x svg{width:30px;height:30px}
.cut-fork,.cut-knife{stroke:var(--ink);stroke-width:4.5;stroke-linejoin:round}
.cut-fork{fill:var(--steel)}.cut-knife{fill:var(--steel)}
.tool-x:hover svg{transform:rotate(-8deg) scale(1.08);transition:transform .15s}
.tool-buy{display:block;width:78px;height:46px;flex:none}
.tool-buy svg{width:100%;height:100%;overflow:visible}

/* ---------- plaque (shared) ---------- */
.plq{width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.plq .shadow{fill:var(--shade)}
.plq .body{fill:var(--lime);stroke:var(--ink);stroke-width:10}
.plq .stok{font-family:var(--display);font-size:128px;fill:var(--ink)}
.plq .px{font-family:var(--mono);font-weight:700;font-size:25px;fill:var(--ink)}
.plq .rim{fill:none;stroke:var(--ink);stroke-width:9;stroke-linejoin:miter}
.plq .dent{fill:var(--ink)}
.plq .hole,.plq .rim{transform-box:fill-box;transform-origin:center;transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.live{cursor:crosshair}
.live:focus-visible{outline:4px solid var(--paper);outline-offset:6px;box-shadow:none}

/* ---------- board ---------- */
.board{position:relative;max-width:1320px;margin:0 auto;padding:0 var(--s5);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5) var(--s4);align-items:start}
.head{grid-column:1/6;grid-row:1/3;padding-top:var(--s3);position:relative;z-index:2}
.kicker{margin:0 0 var(--s3);font-family:var(--display);font-size:12px;letter-spacing:.1em}
h1{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.7rem,5.6vw,5.4rem);line-height:.98;letter-spacing:-.02em}
.hl{display:inline-block;background:var(--lime);border:var(--line) solid var(--ink);border-radius:14px;padding:0 .14em;transform:rotate(-3deg);box-shadow:6px 8px 0 var(--shade);margin:0 .04em}
.sub{margin:var(--s5) 0 var(--s4);font-size:18px;max-width:30ch;font-weight:700}
.chips{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.chip{background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:5px 6px 0 var(--shade);padding:var(--s2) var(--s3);display:flex;flex-direction:column;min-width:112px}
.chip:nth-child(2){transform:rotate(1.5deg)}
.chip .k{font-family:var(--display);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.chip b{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.05}
.buy-big{display:block;width:210px;transition:transform .12s;transform:rotate(-2deg)}
.buy-big:hover{transform:rotate(-2deg) scale(1.05)}
.buy-big svg{width:100%;height:auto;overflow:visible}
.fine{margin:var(--s5) 0 0;font-size:12px;max-width:34ch}
.slot{position:relative;transform:rotate(var(--rot,0deg));transition:transform .18s cubic-bezier(.3,1.6,.5,1);min-width:0}
.slot.flinch{animation:flinch .22s ease-out}
@keyframes flinch{0%{transform:rotate(var(--rot)) scale(.94)}60%{transform:rotate(calc(var(--rot) + 1.4deg)) scale(1.02)}100%{transform:rotate(var(--rot)) scale(1)}}
.static-hero{width:100%;height:auto;border-radius:24px;border:var(--line) solid var(--ink)}
.s1{grid-column:6/13;grid-row:1;--rot:-2deg}
.s4{grid-column:7/10;grid-row:2;--rot:1.5deg;margin-top:var(--s2)}
.s5{grid-column:10/13;grid-row:2;--rot:-5deg;margin-top:var(--s6)}
.s2{grid-column:1/5;grid-row:3;--rot:2deg;margin-top:0}
.s3{grid-column:5/8;grid-row:3;--rot:-3.5deg;margin-top:var(--s7)}
.s6{grid-column:8/12;grid-row:3;--rot:-1.5deg;margin-top:var(--s2)}
.s7{grid-column:6/11;grid-row:4;--rot:3deg;margin-top:var(--s2)}
.crumb{position:absolute;background:var(--lime);border:var(--line) solid var(--ink);border-radius:46% 54% 50% 50%/54% 46% 54% 46%;pointer-events:none;z-index:0}
.c1{width:22px;height:18px;left:47%;top:8%}.c2{width:14px;height:14px;left:3%;top:52%}
.c3{width:20px;height:16px;left:66%;top:47%}.c4{width:12px;height:12px;left:92%;top:62%}.c5{width:18px;height:15px;left:40%;top:88%}
.floater{position:absolute;z-index:70;pointer-events:none;font-family:var(--display);font-size:22px;letter-spacing:.03em;background:var(--paper);border:var(--line) solid var(--ink);border-radius:8px;padding:2px 8px;box-shadow:3px 4px 0 var(--shade);
  animation:floatup .7s ease-out forwards}
@keyframes floatup{0%{transform:translate(-50%,-30%) rotate(-6deg) scale(.3)}25%{transform:translate(-50%,-90%) rotate(-6deg) scale(1.1)}100%{transform:translate(-50%,-190%) rotate(-6deg) scale(1);opacity:0}}

/* ---------- plate ---------- */
.plate{max-width:1320px;margin:var(--s7) auto 0;padding:0 var(--s5)}
.sticker-h{display:inline-block;margin:0 0 var(--s5) var(--s6);font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--r);
  padding:var(--s1) var(--s4);transform:rotate(-2deg);box-shadow:6px 7px 0 var(--shade)}
.plate-wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5) var(--s4);align-items:center}
.scene{grid-column:1/9;cursor:pointer}
.scene svg{width:100%;height:auto;overflow:visible}
.scene .plate-o{fill:var(--paper);stroke:var(--ink);stroke-width:8}
.scene .plate-i{fill:none;stroke:#D9D4C7;stroke-width:6}
.scene .cutlery{fill:var(--steel);stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.scene .crumbs circle,.scene .crumbs path{fill:var(--lime);stroke:var(--ink);stroke-width:5}
.scene .fork-g{transform-box:fill-box;transform-origin:50% 100%}
.scene .item{transform-box:fill-box;transform-origin:center}
.scene:hover .fork-g,.scene.poking .fork-g{animation:poke 1s ease-in-out infinite}
.scene.poking:not(:hover) .fork-g{animation:poke 1s ease-in-out 1}
.scene:hover .item,.scene.poking .item{animation:flinchsvg 1s ease-in-out infinite}
.scene.poking:not(:hover) .item{animation:flinchsvg 1s ease-in-out 1}
@keyframes poke{0%,100%{transform:translate(0,0) rotate(0)}22%{transform:translate(-14px,10px) rotate(-5deg)}42%{transform:translate(118px,-64px) rotate(8deg)}52%{transform:translate(104px,-52px) rotate(6deg)}72%{transform:translate(0,0) rotate(0)}}
@keyframes flinchsvg{0%,38%,100%{transform:scale(1) rotate(0)}44%{transform:scale(.95) rotate(-1.5deg)}56%{transform:scale(1.02) rotate(.8deg)}}
.menu{grid-column:9/13;background:var(--paper);border:var(--line) solid var(--ink);border-radius:6px;padding:var(--s4) var(--s4) var(--s5);box-shadow:8px 10px 0 var(--shade);transform:rotate(2.5deg);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),96% 100%,92% calc(100% - 10px),88% 100%,84% calc(100% - 10px),80% 100%,76% calc(100% - 10px),72% 100%,68% calc(100% - 10px),64% 100%,60% calc(100% - 10px),56% 100%,52% calc(100% - 10px),48% 100%,44% calc(100% - 10px),40% 100%,36% calc(100% - 10px),32% 100%,28% calc(100% - 10px),24% 100%,20% calc(100% - 10px),16% 100%,12% calc(100% - 10px),8% 100%,4% calc(100% - 10px),0 100%)}
.menu h3{margin:0 0 var(--s3);font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.14em;border-bottom:var(--line) dashed var(--ink);padding-bottom:var(--s2)}
.menu ul{list-style:none;margin:0;padding:0;font-size:14px;font-weight:700}
.menu li{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s1) 0}
.menu li i{flex:1;border-bottom:2px dotted var(--ink);transform:translateY(-3px);min-width:12px}
.menu li.tot{margin-top:var(--s2);border-top:var(--line) dashed var(--ink);padding-top:var(--s3);font-size:15px}
.menu li.tot b{font-family:var(--display);font-weight:400;font-size:24px}

/* ---------- bottom simulated tape ---------- */
.sim{position:fixed;left:0;right:0;bottom:0;height:var(--simh);z-index:40;background:var(--ink);display:flex;align-items:center;border-top:var(--line) dashed var(--lime)}
.sim-lbl{flex:none;display:flex;flex-direction:column;justify-content:center;background:var(--lime);height:100%;padding:0 var(--s4);line-height:1.15;position:relative;z-index:2;border-right:var(--line) solid var(--ink)}
.sim-lbl b{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.1em}
.sim-lbl span{font-size:10px;font-weight:700}
.sim-view{flex:1;overflow:hidden;height:100%;position:relative}
.sim-track{display:flex;align-items:center;height:100%;width:max-content;animation:tape 90s linear infinite}
.sim-item{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4);color:var(--paper);font-size:13px;font-weight:700;white-space:nowrap;border-right:2px dotted #4a4a4a;height:100%}
.sim-item svg{width:66px;height:auto;flex:none}
.sim-item .n{font-family:var(--display);font-weight:400;color:var(--lime);letter-spacing:.04em}
.sim-item .d{color:var(--orange)}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nojs{position:fixed;left:8px;right:8px;bottom:64px;z-index:60;background:var(--paper);border:var(--line) solid var(--ink);padding:8px;font-size:12px;margin:0}

/* ---------- responsive ---------- */
@media (min-width:900px){.stat-bites,.stat-clock{display:flex}.chips .chip-clock{display:none}.chips .chip:first-child{display:none}.chips{display:none}}
@media (max-width:899px){
  :root{--tapeh:54px}
  .board,.plate{padding:0 var(--s4)}
  .board{grid-template-columns:repeat(6,1fr);gap:var(--s5) var(--s3)}
  .head{grid-column:1/-1;grid-row:1}
  .s1{grid-column:1/-1;grid-row:2;margin-top:var(--s2)}
  .s2{grid-column:1/4;grid-row:3;margin-top:0}
  .s3{grid-column:4/7;grid-row:3;margin-top:var(--s5)}
  .s4{grid-column:2/7;grid-row:4;margin-top:0}
  .s5{grid-column:1/4;grid-row:5;margin-top:0}
  .s6{grid-column:4/7;grid-row:5;margin-top:var(--s5)}
  .s7{grid-column:1/6;grid-row:6;margin-top:0}
  .sub{max-width:none}
  .head{grid-row:1}
  .c1,.c2,.c3{display:none}
  .plate-wrap{grid-template-columns:1fr}
  .scene,.menu{grid-column:1/-1}
  .menu{margin:0 var(--s2)}
  .sticker-h{margin-left:var(--s3)}
}
@media (max-width:480px){
  .tape{gap:6px;padding:0 var(--s2)}
  .cell{padding:0 10px}
  .ca{padding-right:50px}.ca-lbl{display:none}
  .ca-text{font-size:14px}
  .tool-buy{width:68px}
  .buy-big{width:180px}
  .sim-lbl span{display:none}.sim-lbl{padding:0 var(--s3)}
  h1{font-size:clamp(2.4rem,13vw,3.4rem)}
  .sim-item svg{width:54px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sim-view{overflow-x:auto}
  .sim-track{animation:none}
}