/* INUCART TOKENS (locked after ui-ux-pro-max: it proposed neon pixel-art; rejected, the art is a 90s cel cartoon on a bad VHS rip.
   Kept from it: blinking OSD cursor, stepped/instant transitions, visible focus, reduced-motion, 4.5:1 text.)
   palette  orange #E8742A | cream #D9C9A0 | kraft #8A6A3F | store green #9FBF8F | ink #2A1C12 | steel #6F97A0 | tag yellow #E7D27A | paper #F2E8C9
   type     Lilita One (display, signs) + Share Tech Mono (VCR on-screen display, CA)
   space    4 8 12 16 24 40 px; scene unit --u = (min(100svh,130vw)/900) so the world scales with the screen
   radius   3px (cardboard is cut, not pillowed); borders 3px ink; hard offset shadows only (3px 3px 0 ink)
   motion   one idiom: VHS. scroll rolls the aisle, a tracking bar rolls down, stepped wobble on signs, rare tape warp. */

@font-face{font-family:"Lilita One";src:url(fonts/lilita-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Share Tech Mono";src:url(fonts/share-tech-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --orange:#E8742A; --cream:#D9C9A0; --kraft:#8A6A3F; --green:#9FBF8F; --ink:#2A1C12; --steel:#6F97A0;
  --tag:#E7D27A; --paper:#F2E8C9; --osd:#F4F1E6;
  --u:calc(min(100svh,130vw) / 900);
  --k:1;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --mono:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);-webkit-text-size-adjust:100%}
body{font-family:var(--display);overflow-x:hidden}
[hidden]{display:none!important}
img{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
a,button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button{border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:3px dashed var(--orange);outline-offset:3px}

.scroller{height:520vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden;
  background:linear-gradient(#EEE8D0 0,#EEE8D0 5%,#B7CDA0 5%,#B7CDA0 100%);touch-action:pan-y}
.layer{position:absolute;left:0;top:0;height:100%;will-change:transform}
.far{width:calc(var(--u) * 3200)}
.far-in{position:absolute;inset:0;filter:blur(2.5px);opacity:.85}
.far-in svg{position:absolute;left:0;bottom:calc(var(--u) * 120);width:100%;height:calc(var(--u) * 1500)}
.lights{position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 46);
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u) * 210),#FBFBEA calc(var(--u) * 210) calc(var(--u) * 470),transparent calc(var(--u) * 470) calc(var(--u) * 640));
  border-bottom:3px solid rgba(42,28,18,.25);opacity:.9}
.aisle{width:calc(var(--u) * var(--worldw,5800))}
.shelves{position:absolute;left:0;bottom:calc(var(--u) * 130);height:calc(var(--u) * 1180);width:100%;background:linear-gradient(180deg,transparent 0 35.6%,#B7CDA0 35.6%)}
.haze{position:absolute;left:0;bottom:calc(var(--u) * 130);height:calc(var(--u) * 830);width:100%;background:rgba(236,228,198,.26);pointer-events:none}
.shelves svg{display:block;width:100%;height:100%}
.floor{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--u) * 130);
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(var(--u) * 238),rgba(42,28,18,.34) calc(var(--u) * 238) calc(var(--u) * 242)),
    linear-gradient(rgba(42,28,18,.4) 0 3px,transparent 3px),
    linear-gradient(180deg,#E6D9AF 0,#DCCB9C 55%,#D2BF8E 100%);
  border-top:3px solid var(--ink)}
.floor::after{content:"";position:absolute;left:0;right:0;top:calc(var(--u) * 46);height:calc(var(--u) * 26);
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u) * 420),rgba(255,252,235,.38) calc(var(--u) * 420) calc(var(--u) * 700),transparent calc(var(--u) * 700) calc(var(--u) * 900))}

/* world items: --x is world position in scene units */
.hero,.ptag,.bin,.hangsign,.wobbler,.poster,.corral,.belt,.receipt,.endtape{position:absolute;left:calc(var(--u) * var(--x))}

/* ---------- hero sign (hangs from the ceiling) ---------- */
.hero{top:calc(var(--u) * 74);width:calc(var(--u) * 540);padding:calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 24);
  background:var(--paper);border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-.8deg);transform-origin:50% -60px;
  animation:sway 6s steps(24) infinite alternate}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 12);background:var(--orange);border-bottom:3px solid var(--ink)}
.hero .kicker{margin:calc(var(--u) * 6) 0 calc(var(--u) * 8);font:400 max(12px,calc(var(--u) * 22))/1 var(--mono);letter-spacing:.14em;color:var(--kraft)}
.hero h1{margin:0;font-weight:400;font-size:max(24px,calc(var(--u) * 46));line-height:1.04;color:var(--ink);letter-spacing:.005em}
.hero-sub{margin:calc(var(--u) * 12) 0 0;font:400 max(14px,calc(var(--u) * 23))/1.2 var(--mono);color:#3a2a1c}
.rope{position:absolute;top:calc(var(--u) * -80);width:3px;height:calc(var(--u) * 80);background:var(--ink)}
.rope.l{left:14%}.rope.r{right:14%}
@keyframes sway{from{transform:rotate(-1deg)}to{transform:rotate(.6deg)}}

/* ---------- CA price tag ---------- */
.ptag{bottom:calc(var(--u) * 335);width:calc(var(--u) * 470);padding:calc(var(--u) * 30) calc(var(--u) * 16) calc(var(--u) * 12);text-align:left;
  background:var(--tag);border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink);overflow:visible;transform:rotate(-1.2deg);cursor:pointer;display:block}
.ptag .clip{position:absolute;left:calc(var(--u) * 24);right:calc(var(--u) * 24);top:calc(var(--u) * -14);height:calc(var(--u) * 24);background:var(--steel);border:3px solid var(--ink);border-radius:3px}
.ptag-head{position:absolute;left:0;right:0;top:calc(var(--u) * 10);text-align:center;font:400 max(10px,calc(var(--u) * 17))/1 var(--mono);letter-spacing:.12em;color:var(--ink)}
.ptag-ca{display:block;margin-top:calc(var(--u) * 6);font:400 max(15px,calc(var(--u) * 34))/1.05 var(--mono);color:var(--ink);letter-spacing:0;word-break:break-all;background:var(--paper);border:2px solid var(--ink);padding:calc(var(--u) * 8) calc(var(--u) * 8)}
.ptag-foot{display:flex;align-items:center;gap:calc(var(--u) * 12);margin-top:calc(var(--u) * 10)}
.barcode{flex:1;height:calc(var(--u) * 30);min-height:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px)}
.ptag-hint{font:400 max(10px,calc(var(--u) * 17))/1 var(--mono);letter-spacing:.1em}
.ptag:hover,.ptag:focus-visible{transform:rotate(-.4deg) translateY(-2px)}
.ptag.scanned{background:#EAE29A}
.ptag.scanned .ptag-hint{color:#1F5C2B}
.laser{position:absolute;left:-3px;right:-3px;top:0;height:3px;background:#FF2A1E;box-shadow:0 0 8px 2px rgba(255,42,30,.75);opacity:0;pointer-events:none}
.ptag.scanning .laser{animation:sweep .55s linear 1}
@keyframes sweep{0%{opacity:1;top:0}100%{opacity:1;top:100%}}
.gun{position:absolute;right:calc(var(--u) * -70);top:calc(var(--u) * -70);width:calc(var(--u) * 130);height:auto;opacity:0;transform:translate(60%,-20%) rotate(-20deg);pointer-events:none;filter:drop-shadow(3px 3px 0 var(--ink))}
.ptag.scanning .gun{animation:gun .75s ease-out 1}
@keyframes gun{0%{opacity:0;transform:translate(60%,-20%) rotate(-20deg)}25%{opacity:1;transform:translate(0,0) rotate(-8deg)}75%{opacity:1;transform:translate(-8%,10%) rotate(-8deg)}100%{opacity:0;transform:translate(30%,-10%) rotate(-14deg)}}
.beep{position:absolute;left:50%;top:calc(var(--u) * -66);transform:translateX(-50%) rotate(-6deg);font:400 max(16px,calc(var(--u) * 40))/1 var(--display);color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);opacity:0;pointer-events:none;letter-spacing:.06em}
.ptag.scanning .beep{animation:beep .9s steps(6) 1}
@keyframes beep{0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-6deg)}20%{opacity:1;transform:translateX(-50%) scale(1.15) rotate(-6deg)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(1) rotate(-6deg)}}

/* ---------- bins ---------- */
.bin{bottom:calc(var(--u) * 58);width:calc(var(--u) * 320);height:calc(var(--u) * 260)}
.bin-img{position:absolute;left:0;bottom:0;width:100%;height:auto;pointer-events:none}
.loaves{position:absolute;left:0;right:0;top:0;bottom:0;z-index:2}
.loaf{transform:rotate(var(--r,0deg));position:absolute;bottom:calc(var(--u) * 92);width:calc(var(--u) * 120);height:calc(var(--u) * 126);cursor:pointer;padding:0;transform-origin:50% 90%;transition:transform .12s steps(3)}
.loaf img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 2px 0 rgba(42,28,18,.55))}
.loaf:hover,.loaf:focus-visible{transform:translateY(calc(var(--u) * -14)) rotate(var(--r,0deg))}
.loaf.gone{visibility:hidden}
.loaf-fly{position:fixed;z-index:50;pointer-events:none;will-change:transform;filter:drop-shadow(2px 2px 0 rgba(42,28,18,.55))}

/* ---------- zone 2 ---------- */
.hangsign{top:0;width:calc(var(--u) * 330);padding:calc(var(--u) * 34) calc(var(--u) * 12) calc(var(--u) * 14);text-align:center;margin-top:calc(var(--u) * 78);
  background:var(--green);border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink);transform-origin:50% -60px;animation:sway 5s steps(20) infinite alternate}
.hangsign b{display:block;font:400 max(13px,calc(var(--u) * 24))/1 var(--mono);letter-spacing:.14em;color:var(--ink)}
.hangsign span:not(.rope){display:block;margin-top:calc(var(--u) * 8);font-size:max(20px,calc(var(--u) * 44));line-height:1;color:var(--ink)}
.hangsign.lane{background:var(--orange)}
.wobbler{width:calc(var(--u) * 270);bottom:calc(var(--u) * 590);padding:calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 18);
  background:var(--orange);border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink);transform-origin:50% 100%;animation:wob 2.6s steps(10) infinite alternate;color:var(--ink)}
.wobbler i{position:absolute;left:50%;bottom:calc(var(--u) * -70);width:4px;height:calc(var(--u) * 70);background:var(--ink)}
.wobbler b{display:block;font:400 max(11px,calc(var(--u) * 19))/1 var(--mono);letter-spacing:.12em;margin-bottom:calc(var(--u) * 8);color:var(--paper);text-shadow:1px 1px 0 var(--ink)}
.wobbler p{margin:0;font-size:max(17px,calc(var(--u) * 33));line-height:1.06;color:var(--paper);text-shadow:2px 2px 0 var(--ink)}
.w2{background:var(--steel);bottom:calc(var(--u) * 548);animation-duration:3.1s}
.w3{background:#C4563A;bottom:calc(var(--u) * 560);animation-duration:2.3s}
.w4{background:var(--kraft);bottom:calc(var(--u) * 585);animation-duration:2.9s}

.w5{background:#C4563A;bottom:calc(var(--u) * 580);animation-duration:2.7s}
@keyframes wob{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.poster{bottom:calc(var(--u) * 620);width:calc(var(--u) * 430);margin:0;padding:calc(var(--u) * 12);background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(1.2deg)}
.poster img{width:100%;height:auto;border:2px solid var(--ink)}
.poster figcaption{margin-top:calc(var(--u) * 8);font:400 max(11px,calc(var(--u) * 18))/1 var(--mono);letter-spacing:.14em;text-align:center}

/* ---------- zone 3: cart return = the buy control ---------- */
.corral{bottom:calc(var(--u) * 58);width:calc(var(--u) * 420);height:calc(var(--u) * 470);display:block;text-decoration:none}
.corral img{position:absolute;left:calc(var(--u) * 30);bottom:calc(var(--u) * 30);width:calc(var(--u) * 360);height:auto;filter:drop-shadow(4px 4px 0 rgba(42,28,18,.6));transition:transform .5s steps(8)}
.corral:hover img,.corral:focus-visible img{transform:translateX(calc(var(--u) * 40)) rotate(-2deg)}
.coinlock{position:absolute;left:calc(var(--u) * 14);top:0;padding:calc(var(--u) * 12) calc(var(--u) * 20);background:var(--tag);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg);z-index:2}
.coinlock em{font-style:normal;font-size:max(18px,calc(var(--u) * 44));line-height:1;color:var(--ink)}
.chain-plate{position:absolute;left:calc(var(--u) * 14);top:calc(var(--u) * 78);font:400 max(11px,calc(var(--u) * 18))/1 var(--mono);letter-spacing:.14em;background:var(--ink);color:var(--paper);padding:calc(var(--u) * 6) calc(var(--u) * 10)}

/* ---------- zone 4: checkout ---------- */
.belt{bottom:calc(var(--u) * 58);width:calc(var(--u) * 640);height:calc(var(--u) * 86);background:#3B3A3C;border:3px solid var(--ink);border-radius:3px;overflow:hidden;box-shadow:4px 4px 0 var(--ink)}
.belt i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u) * 46),rgba(255,255,255,.12) calc(var(--u) * 46) calc(var(--u) * 52));animation:belt 1.6s linear infinite}
@keyframes belt{to{background-position:calc(var(--u) * 104) 0}}
.receipt{bottom:calc(var(--u) * 180);width:calc(var(--u) * 340);padding:calc(var(--u) * 24) calc(var(--u) * 22) calc(var(--u) * 30);background:#FAF6E6;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--mono);transform:rotate(1.5deg);
  clip-path:polygon(0 0,100% 0,100% 96%,95% 100%,90% 96%,85% 100%,80% 96%,75% 100%,70% 96%,65% 100%,60% 96%,55% 100%,50% 96%,45% 100%,40% 96%,35% 100%,30% 96%,25% 100%,20% 96%,15% 100%,10% 96%,5% 100%,0 96%)}
.receipt h2{margin:0 0 calc(var(--u) * 12);font:400 max(20px,calc(var(--u) * 40))/1 var(--display);text-align:center;letter-spacing:.05em}
.receipt dl{margin:0}
.receipt dl div{display:flex;justify-content:space-between;gap:12px;font-size:max(12px,calc(var(--u) * 21));line-height:1.5;border-bottom:1px dashed rgba(42,28,18,.5)}
.receipt dt,.receipt dd{margin:0}
.receipt .total{margin:calc(var(--u) * 14) 0 0;font-size:max(13px,calc(var(--u) * 22));font-weight:700;text-align:center}
.receipt .thanks{margin:calc(var(--u) * 6) 0 0;font-size:max(11px,calc(var(--u) * 18));text-align:center;letter-spacing:.2em;color:var(--kraft)}
.endtape{bottom:calc(var(--u) * 210);width:calc(var(--u) * 440);text-align:center}
.endtape b{display:block;font-size:max(26px,calc(var(--u) * 62));line-height:1;color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);letter-spacing:.03em}
.endtape button{margin-top:calc(var(--u) * 24);display:inline-flex;align-items:center;gap:12px;padding:calc(var(--u) * 12) calc(var(--u) * 22);background:var(--osd);color:var(--ink);border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink);font:400 max(16px,calc(var(--u) * 30))/1 var(--mono);letter-spacing:.1em}
.endtape button svg{width:calc(var(--u) * 52);min-width:26px;height:auto}
.endtape button:hover{background:var(--tag)}

/* ---------- the cart (screen-fixed) ---------- */
.cart{position:absolute;bottom:calc(var(--u) * 30);left:max(40vw,calc(var(--u) * 600));width:calc(var(--u) * var(--k) * 469);height:calc(var(--u) * var(--k) * 560);z-index:5;transform-origin:50% 100%;will-change:transform;pointer-events:none}
.cart-in{position:absolute;inset:0;transform-origin:50% 100%}
.cart .dog{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 0 transparent)}
.crumbs{position:absolute;left:0;top:calc(var(--u) * var(--k) * -140);width:100%;height:calc(var(--u) * var(--k) * 700);pointer-events:none}
.held{position:absolute;left:calc(var(--u) * var(--k) * 78);bottom:calc(var(--u) * var(--k) * 208);width:calc(var(--u) * var(--k) * 183);display:block;pointer-events:auto;cursor:pointer;transform-origin:50% 100%;animation:hold 4s ease-in-out infinite alternate}
@keyframes hold{from{transform:rotate(-.6deg)}to{transform:rotate(.7deg)}}
.held .bread{display:block;width:100%;height:calc(var(--u) * var(--k) * 310)}
.held .bread img,.held .bread canvas{display:block;width:100%;height:100%}
.held .sleeve{display:block;width:100%}
.held .lip{width:100%;height:calc(var(--u) * var(--k) * 34)}
.held .mid{display:block;width:100%;height:calc(var(--u) * var(--k) * 86);background:url(assets/paper_mid.webp) 0 0/100% 100% no-repeat}
.held:focus-visible{outline-offset:6px}
.held.dropping .sleeve{transition:transform .45s cubic-bezier(.5,0,1,.6),opacity .45s;transform:translateY(calc(var(--u) * var(--k) * 200));opacity:0}
.held.rising{animation:rise .6s cubic-bezier(.2,1.4,.4,1) 1}
@keyframes rise{from{transform:translateY(calc(var(--u) * var(--k) * 260));opacity:0}to{transform:none;opacity:1}}
.held.empty{visibility:hidden}
.paw{position:absolute;left:calc(var(--u) * var(--k) * 100);top:calc(var(--u) * var(--k) * 292);width:calc(var(--u) * var(--k) * 78);height:calc(var(--u) * var(--k) * 50);background:url(assets/dog_cart.webp) no-repeat;
  background-size:calc(var(--u) * var(--k) * 469) calc(var(--u) * var(--k) * 560);background-position:calc(var(--u) * var(--k) * -100) calc(var(--u) * var(--k) * -292);clip-path:ellipse(46% 50% at 50% 46%);pointer-events:none}
.cart-in.chew{animation:chew .5s steps(5) 2}
@keyframes chew{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.985)}}

/* ---------- HUD ---------- */
.signs{position:absolute;z-index:20;top:0;left:44vw;right:calc(76px + 3vw);display:flex;justify-content:space-around;gap:8px;pointer-events:none}
.signs a{pointer-events:auto;position:relative;margin-top:26px;padding:8px 12px 8px 10px;display:flex;align-items:center;gap:8px;text-decoration:none;font-size:15px;line-height:1;letter-spacing:.04em;
  background:var(--paper);border:3px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 var(--ink);transform-origin:50% -26px;min-height:40px}
.signs a::before,.signs a::after{content:"";position:absolute;top:-26px;height:23px;width:2px;background:var(--ink)}
.signs a::before{left:14px}.signs a::after{right:14px}
.signs a b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--orange);color:var(--paper);font-weight:400;font-size:13px;border:2px solid var(--ink)}
.signs a.on{background:var(--tag);animation:swing .9s steps(6) 1}
.signs a:hover{background:var(--tag)}
@keyframes swing{0%{transform:rotate(0)}25%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.xlink,.buyfix{position:absolute;z-index:22;right:12px;display:block;width:64px;height:64px}
.xlink{top:10px}
.buyfix{top:84px;width:76px;height:76px;right:8px}
.xlink img,.buyfix img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(3px 3px 0 var(--ink));transition:transform .2s steps(4)}
.xlink:hover img{transform:rotate(12deg) scale(1.08)}
.buyfix:hover img,.buyfix:focus-visible img{transform:translateX(-8px) rotate(-6deg)}
.osd{position:absolute;z-index:30;font:400 max(13px,calc(var(--u) * 24))/1.15 var(--mono);color:var(--osd);letter-spacing:.06em;text-transform:uppercase;pointer-events:none;
  text-shadow:2px 2px 0 #000,-1px 0 0 rgba(255,40,80,.75),1px 0 0 rgba(0,190,255,.7)}
.osd.tl{left:14px;top:10px;display:flex;flex-direction:column;gap:4px;font-size:max(15px,calc(var(--u) * 28))}
.play i{display:inline-block;width:.7em;height:.7em;background:var(--osd);clip-path:polygon(0 0,100% 50%,0 100%);animation:blink 1.1s steps(2) infinite;vertical-align:-1px}
@keyframes blink{50%{opacity:0}}
.osd.bl{left:14px;bottom:10px}
.osd.hint{left:14px;bottom:36px}
.osd.track{right:16px;bottom:10px;opacity:0;color:#fff}
.osd.track.on{opacity:1}
.nojs{position:fixed;left:0;right:0;bottom:0;margin:0;padding:8px 12px;background:var(--ink);color:var(--paper);font:14px var(--mono);z-index:60}

/* ---------- VHS overlay ---------- */
.vhs{position:absolute;inset:0;z-index:40;pointer-events:none}
.vhs>*{position:absolute;inset:0}
.grain{width:100%;height:100%;opacity:.13;mix-blend-mode:overlay}
.scan{background:repeating-linear-gradient(180deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px)}
.tint{background:rgba(226,190,120,.17);mix-blend-mode:multiply}
.vig{background:radial-gradient(ellipse at 50% 48%,transparent 55%,rgba(30,18,6,.32) 100%)}
.roll{top:-18%;bottom:auto;height:16%;background:linear-gradient(180deg,transparent,rgba(255,255,240,.13) 40%,rgba(255,255,240,.2) 50%,rgba(255,255,240,.11) 60%,transparent);animation:roll 11s linear infinite}
@keyframes roll{0%{transform:translateY(0)}100%{transform:translateY(720%)}}
.warp{top:auto;bottom:0;height:9%;background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 2px,rgba(20,10,0,.55) 2px 4px,rgba(255,255,255,.2) 4px 5px);opacity:0;mix-blend-mode:hard-light}
.stage.glitch .warp{opacity:.7}
.stage.glitch .layer,.stage.glitch .cart{animation:tapewarp .38s steps(6) 1}
@keyframes tapewarp{0%{translate:0 0}20%{translate:calc(var(--u) * -14) 0}40%{translate:calc(var(--u) * 10) 0}60%{translate:calc(var(--u) * -5) 0}100%{translate:0 0}}

/* ---------- portrait ---------- */
@media (max-aspect-ratio:1/1){
  .hero{left:16px;top:calc(var(--u) * 190);width:calc(100vw - 32px)}
  .ptag{left:16px;width:min(calc(var(--u) * 470),calc(100vw - 32px));bottom:calc(var(--u) * 700)}
  .hangsign{margin-top:calc(var(--u) * 210)}
  .wobbler,.w2,.w3,.w4,.w5{bottom:calc(var(--u) * 850)}
  .w2{bottom:calc(var(--u) * 800)}.w4{bottom:calc(var(--u) * 830)}
  .poster{bottom:calc(var(--u) * 830)}
  .receipt{bottom:calc(var(--u) * 800)}
  .endtape{bottom:calc(var(--u) * 800)}
  .xlink,.buyfix{width:44px;height:44px;right:8px}
  .xlink{top:6px}.buyfix{top:54px}
  .cart{left:50%;translate:-50% 0}
  .signs{left:8px;right:76px;justify-content:space-between;gap:4px}
  .signs a{padding:6px 6px 6px 5px;gap:4px;font-size:12px;min-height:38px}
  .signs a b{width:18px;height:18px;font-size:11px}
  .osd.tl{top:auto;bottom:30px;flex-direction:row;gap:14px;align-items:baseline}
  .osd.hint{display:none}
  .bin{bottom:calc(var(--u) * 58)}
  .stage.glitch .cart{animation:none}
}
@media (max-aspect-ratio:1/1) and (min-height:780px){
  :root{--k:1.15}
  .ptag{bottom:calc(var(--u) * 830)}
  .hero{top:calc(var(--u) * 175)}
}
@media (max-aspect-ratio:1/1) and (max-height:700px){
  .hero-sub{display:none}
  .ptag{bottom:calc(var(--u) * 690)}
  .hero{top:calc(var(--u) * 182)}
  .wobbler,.w2,.w3,.w4,.w5{bottom:calc(var(--u) * 730)}
  .receipt,.endtape,.poster{bottom:calc(var(--u) * 700)}
}
@media (max-width:420px){.osd.tl{gap:10px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .roll,.warp{display:none}
}