/* ── Purchase scenes · casino acquisition (scenes.js). Fixed layer; only transform/opacity animate. ── */
.car-sprite{display:block;aspect-ratio:402/256;background-image:url(assets/cars.png);background-repeat:no-repeat;background-size:400% 400%;background-position:calc(var(--v,1) * 33.3333%) calc(var(--r,0) * 33.3333%)}

.acq{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;justify-items:center;align-items:center;gap:6px;padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));overflow:hidden;opacity:0;transition:opacity .2s ease;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#e9f3f2;-webkit-tap-highlight-color:transparent;user-select:none}
.acq.in{opacity:1}.acq.out{opacity:0;transition:opacity .3s ease}
.acq-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 44%,#1a4238 0%,#0b1c19 48%,#030706 100%);z-index:-2}
.acq-rays{position:absolute;left:50%;top:44%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(from 0deg,#ffd84d12 0deg 7deg,transparent 7deg 15deg);opacity:.35;animation:acq-spin 26s linear infinite;transition:opacity .5s}
.acq.act-payout .acq-rays{opacity:1}
.acq-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000038 2px 3px);pointer-events:none}
@keyframes acq-spin{to{transform:rotate(360deg)}}

/* marquee bulbs */
.scene-lights{position:absolute;inset:0;pointer-events:none;z-index:-1}
.bulbs{position:absolute;left:10px;right:10px;display:flex;justify-content:space-between}
.bulbs.top{top:max(8px,env(safe-area-inset-top))}.bulbs.bottom{bottom:max(8px,env(safe-area-inset-bottom))}
.bulb{width:7px;height:7px;background:#5a4a22;box-shadow:none;animation:bulb .9s steps(1,end) infinite;animation-delay:calc(var(--i) * -.15s)}
.bulbs.bottom .bulb{animation-direction:reverse}
.acq.act-payout .bulb{animation-duration:.3s}
@keyframes bulb{0%,49%{background:#ffd84d;box-shadow:0 0 8px #ffd84dcc}50%,100%{background:#5a4a22;box-shadow:none}}

.acq-top{font-size:11px;letter-spacing:.32em;color:#8fd6bf;text-shadow:0 0 12px #5cf0bf55;margin-top:14px}
.acq-stage{position:relative;width:min(94vw,560px);height:min(54vh,380px);display:grid;place-items:center}

/* ACT 1 · reel — frameless drum in the terminal style (no picture frame, no payline) */
.scene-reel{position:absolute;display:grid;justify-items:center;gap:10px;transition:transform .35s cubic-bezier(.3,0,.2,1),opacity .3s}
.reel-window{position:relative;width:220px;height:264px;overflow:hidden;-webkit-mask-image:linear-gradient(#0000 0%,#000 30%,#000 70%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000 30%,#000 70%,#0000 100%)}
.reel-strip{display:flex;flex-direction:column;animation:reel-spin 1s cubic-bezier(.1,.6,.18,1.04) forwards}
.reel-cell{height:88px;flex:none;display:grid;place-items:center;opacity:.55}
.reel-cell:nth-last-child(2){opacity:1}
.reel-car{width:150px;filter:drop-shadow(0 6px 6px #0008)}
.reel-icon svg{width:64px;height:64px;display:block;filter:drop-shadow(0 4px 0 #0006)}
@keyframes reel-spin{0%{transform:translateY(0);filter:blur(0)}10%{filter:blur(2.5px)}75%{filter:blur(1px)}100%{transform:translateY(calc((var(--cells) - 3) * -88px));filter:blur(0)}}
/* landing slot: amber pixel corners + markers, same language as the terminal's selection states */
.reel-lock{position:absolute;left:50%;top:88px;width:196px;height:88px;margin-left:-98px;pointer-events:none}
.reel-lock .c{position:absolute;width:14px;height:14px;border:0 solid #dcb675;opacity:.55}
.reel-lock .tl{left:0;top:0;border-width:3px 0 0 3px}.reel-lock .tr{right:0;top:0;border-width:3px 3px 0 0}
.reel-lock .bl{left:0;bottom:0;border-width:0 0 3px 3px}.reel-lock .br{right:0;bottom:0;border-width:0 3px 3px 0}
.reel-lock .mk{position:absolute;top:50%;margin-top:-8px;font:400 14px/16px "Astoria Pixel",ui-monospace,monospace;color:#dcb675;opacity:.45}
.reel-lock .l{left:-22px}.reel-lock .r{right:-22px}
.reel-status{position:relative;height:14px;font:700 10px/14px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.3em;color:#8fd6bf}
.reel-status span{display:block;text-align:center}
.reel-status .locked{position:absolute;inset:0;opacity:0;color:#ffd84d}
.reel-status .rolling{animation:blink .45s steps(1,end) infinite}
.acq.reel-hit .reel-status .rolling{opacity:0;animation:none}
.acq.reel-hit .reel-status .locked{opacity:1}
.acq.reel-hit .reel-lock .c{opacity:1;border-color:#ffd84d;animation:lock-snap .38s cubic-bezier(.2,1.6,.4,1)}
.acq.reel-hit .reel-lock .tl{--sx:-8px;--sy:-8px}.acq.reel-hit .reel-lock .tr{--sx:8px;--sy:-8px}.acq.reel-hit .reel-lock .bl{--sx:-8px;--sy:8px}.acq.reel-hit .reel-lock .br{--sx:8px;--sy:8px}
.acq.reel-hit .reel-lock .mk{opacity:1;color:#ffd84d;animation:marker .3s steps(1,end) 3}
.acq.reel-hit .reel-cell:nth-last-child(2){animation:cell-glow .5s ease-out}
@keyframes lock-snap{0%{transform:translate(var(--sx),var(--sy))}100%{transform:none}}
@keyframes marker{50%{opacity:.2}}
@keyframes cell-glow{0%{filter:brightness(1.8) drop-shadow(0 0 16px #ffd84d)}100%{filter:none}}
.acq.act-hero .scene-reel{transform:scale(1.25);opacity:0}

/* ACT 2 · heroes (shared) */
.hero{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s}
.acq.act-hero .hero{opacity:1}
.hero svg{display:block;width:100%;height:100%}
.hero-caption{position:absolute;bottom:4%;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.14em;color:#b9d8ce;opacity:0;transform:translateY(8px);transition:opacity .4s .6s,transform .4s .6s}
.hero-caption b{color:#ffd84d}
.acq.act-hero .hero-caption{opacity:1;transform:none}

/* car · showroom */
.showroom-spot{position:absolute;top:-10%;left:50%;width:120%;height:120%;margin-left:-60%;background:radial-gradient(ellipse 34% 62% at 50% 0%,#fff6d52e,transparent 72%);transform-origin:50% 0;opacity:0;transition:opacity .6s .5s}
.acq.car-parked .showroom-spot{opacity:1;animation:spot-sway 3s ease-in-out infinite alternate}
@keyframes spot-sway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.showroom-floor{position:absolute;left:4%;right:4%;top:66%;height:30%;background:radial-gradient(ellipse 50% 45% at 50% 0%,#5cf0bf1f,transparent 70%);border-top:1px solid #6ce8b544}
.car-rig{position:relative;width:min(84vw,420px);margin-top:-8%;transform:translateX(-135vw) skewX(-10deg)}
.acq.act-hero .car-rig{animation:drive-in .62s cubic-bezier(.16,.84,.3,1.12) forwards}
@keyframes drive-in{0%{transform:translateX(-135vw) skewX(-10deg)}80%{transform:translateX(3%) skewX(3deg)}100%{transform:none}}
.car-body{position:relative;z-index:1}
.acq.car-parked .car-body{animation:suspension .55s ease-out}
@keyframes suspension{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(4px) rotate(1.2deg)}60%{transform:translateY(-2px) rotate(-.5deg)}100%{transform:none}}
.hero-car-sprite{width:100%;filter:drop-shadow(0 14px 12px #0009)}
.hero-car-shine{position:absolute;inset:0;background:linear-gradient(105deg,#0000 38%,#ffffffb8 49%,#fff4 52%,#0000 62%) no-repeat;background-size:260% 100%;background-position:130% 0;
  -webkit-mask-image:url(assets/cars.png);mask-image:url(assets/cars.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:400% 400%;mask-size:400% 400%;
  -webkit-mask-position:calc(var(--v,1) * 33.3333%) calc(var(--r,0) * 33.3333%);mask-position:calc(var(--v,1) * 33.3333%) calc(var(--r,0) * 33.3333%);opacity:0;mix-blend-mode:screen}
.acq.car-shine .hero-car-shine{animation:shine .8s ease-out forwards}
@keyframes shine{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-40% 0}}
.car-reflect{position:absolute;left:0;right:0;top:100%;margin-top:-8%;transform:scaleY(-1);opacity:.2;-webkit-mask-image:linear-gradient(to top,#000 0%,#0000 58%);mask-image:linear-gradient(to top,#000 0%,#0000 58%);pointer-events:none}
.car-reflect .hero-car-sprite{filter:none}
.car-speed{position:absolute;inset:18% -30% 18% auto;width:70%;opacity:0}
.acq.act-hero .car-speed{animation:speed-fade .8s ease-out forwards}
.speed{position:absolute;right:0;height:3px;width:calc(40% + var(--i) * 6%);top:calc(var(--i) * 13%);background:linear-gradient(90deg,#0000,#cfe8df88)}
@keyframes speed-fade{0%,55%{opacity:1}100%{opacity:0;transform:translateX(-40%)}}
.car-keys{position:absolute;bottom:3%;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #ffd84d;background:#1a1405e6;color:#ffd84d;font-size:11px;letter-spacing:.16em;transform:translateY(20px) scale(.6);opacity:0}
.car-keys svg{width:28px;height:28px;transform-origin:30% 30%}
.acq.car-keys-in .car-keys{animation:pop-in .45s cubic-bezier(.2,1.6,.4,1) forwards}
.acq.car-keys-in .car-keys svg{animation:dangle 1.2s ease-in-out .3s infinite alternate}
@keyframes pop-in{to{transform:none;opacity:1}}
@keyframes dangle{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}

/* champagne */
.hero-champagne .bottle{position:relative;width:min(40vw,168px);aspect-ratio:1;transform-origin:40% 90%;translate:16% 0}
.acq.act-hero .hero-champagne .bottle{animation:shake .72s cubic-bezier(.4,0,.6,1) forwards}
.acq.popped .hero-champagne .bottle{animation:recoil .6s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes shake{0%{transform:rotate(0)}10%{transform:rotate(-3deg)}20%{transform:rotate(3deg)}35%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}65%{transform:rotate(-9deg) translateY(-2px)}80%{transform:rotate(9deg) translateY(-3px)}100%{transform:rotate(-4deg) translateY(-4px)}}
@keyframes recoil{0%{transform:rotate(-16deg) translateY(6px)}100%{transform:rotate(-8deg)}}
.cork,.foam{position:absolute;left:40%;top:4%}
.cork{width:22%;aspect-ratio:1;margin:-8% 0 0 -3%}
.acq.popped .cork{animation:cork-fly .85s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes cork-fly{0%{transform:translate(0,0) rotate(0)}40%{transform:translate(90px,-180px) rotate(360deg)}100%{transform:translate(190px,-110px) rotate(900deg);opacity:0}}
.fizz{position:absolute;width:7px;height:7px;background:#f5ecd0;box-shadow:0 0 6px #fff8;opacity:0}
.fizz:nth-child(3n){background:#ffd57f}.fizz:nth-child(4n){width:5px;height:5px}
.acq.popped .fizz{animation:fizz 1s cubic-bezier(.15,.7,.35,1) var(--d) forwards}
@keyframes fizz{0%{opacity:1;transform:translate(0,0) scale(var(--s))}60%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(var(--s))}100%{opacity:0;transform:translate(calc(var(--dx) * 1.2),calc(var(--dy) * .55)) scale(.3)}}
.pop-word{position:absolute;top:8%;left:56%;font:400 clamp(34px,11vw,58px)/1 "Astoria Pixel",ui-monospace,monospace;color:#ffd84d;text-shadow:3px 3px 0 #8a6a2f,0 0 24px #ffd84d88;transform:scale(0) rotate(-14deg);z-index:2}
.acq.popped .pop-word{animation:pop-word .5s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes pop-word{to{transform:scale(1) rotate(-10deg)}}
.pop-burst{position:absolute;top:2%;left:48%;width:180px;height:180px;margin:-40px 0 0 -40px;background:repeating-conic-gradient(#ffd84d33 0deg 10deg,#0000 10deg 22deg);-webkit-mask:radial-gradient(circle,#000 30%,#0000 70%);mask:radial-gradient(circle,#000 30%,#0000 70%);transform:scale(0)}
.acq.popped .pop-burst{animation:burst .6s ease-out forwards}
@keyframes burst{0%{transform:scale(0) rotate(0)}100%{transform:scale(1.4) rotate(40deg);opacity:.8}}

/* charity */
.hero-charity .heart{width:min(34vw,150px);aspect-ratio:1;filter:drop-shadow(0 0 18px #f3a1a055)}
.acq.act-hero .hero-charity .heart{animation:rise-in .5s cubic-bezier(.2,1.4,.4,1)}
.acq.beat .hero-charity .heart{animation:heartbeat .28s ease-out}
@keyframes heartbeat{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes rise-in{from{transform:translateY(40px) scale(.6);opacity:0}}
.drops{position:absolute;top:0;left:50%}
.drop{position:absolute;width:30px;height:30px;margin-left:calc(-15px + var(--x));top:-60px;opacity:0}
.acq.act-hero .drop{animation:drop .42s cubic-bezier(.5,0,.9,.6) calc(var(--i) * 190ms + 60ms) forwards}
@keyframes drop{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(min(24vh,170px)) rotate(200deg)}}
.rings{position:absolute;inset:0;display:grid;place-items:center}
.ring{position:absolute;width:150px;height:150px;border:2px solid #f3a1a0;border-radius:50%;opacity:0}
.acq.act-hero .ring{animation:ring 1.6s ease-out calc(var(--i) * .45s) infinite}
@keyframes ring{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(2)}}

/* food */
.hero-food .bowl{width:min(38vw,160px);aspect-ratio:1}
.acq.act-hero .hero-food .bowl{animation:rise-in .5s cubic-bezier(.2,1.4,.4,1)}
.steam{position:absolute;top:14%;display:flex;gap:18px}
.wisp{width:6px;height:70px;background:linear-gradient(#0000,#96d6d288,#0000);opacity:0}
.acq.act-hero .wisp{animation:wisp 1.4s ease-in-out calc(var(--i) * .25s) infinite}
@keyframes wisp{0%{opacity:0;transform:translate(0,20px) scaleY(.6)}40%{opacity:1}100%{opacity:0;transform:translate(8px,-40px) scaleY(1.2) skewX(12deg)}}
.hearts{position:absolute;top:40%;left:50%}
.mini-heart{position:absolute;width:20px;height:20px;margin-left:var(--x);opacity:0}
.acq.act-hero .mini-heart{animation:float-up 1.3s ease-out calc(.5s + var(--i) * .12s) forwards}
@keyframes float-up{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-120px) scale(1)}}

/* supply */
.hero-supply .crate{width:min(40vw,170px);aspect-ratio:1;transform:translateY(-80vh)}
.acq.slammed .hero-supply .crate{animation:slam .42s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes slam{0%{transform:translateY(-80vh)}80%{transform:translateY(0) scale(1.18,.78)}100%{transform:none}}
.dust{position:absolute;top:66%;left:50%}
.puff{position:absolute;width:9px;height:9px;background:#cdbf95;box-shadow:0 0 6px #cdbf9566;opacity:0}
.acq.slammed .puff{animation:puff .7s ease-out calc(.33s + var(--d)) forwards}
@keyframes puff{0%{opacity:.85;transform:translate(0,0) scale(var(--s))}100%{opacity:0;transform:translate(calc(var(--dx) * 2.4),var(--dy)) scale(calc(var(--s) * 2.2))}}
.stamp{position:absolute;top:24%;padding:8px 14px;border:4px solid #ff5a64;color:#ff5a64;font:400 clamp(26px,8vw,40px)/1 "Astoria Pixel",ui-monospace,monospace;letter-spacing:.08em;background:#2a0b0dcc;transform:rotate(-12deg) scale(2.6);opacity:0}
.acq.stamped .stamp{animation:stamp .25s cubic-bezier(.5,0,.8,.3) forwards}
@keyframes stamp{to{transform:rotate(-12deg) scale(1);opacity:1}}
.acq.slammed .acq-stage,.acq.popped .acq-stage{animation:stage-shake .34s steps(6,end)}
@keyframes stage-shake{0%,100%{transform:none}25%{transform:translate(-5px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}

/* vacation */
.hero-vacation{overflow:hidden;border:2px solid #3d6456;box-shadow:0 0 40px #000c}
.island{position:absolute;inset:-6%;background:url(assets/island-sunset.png) center/cover no-repeat;transform:scale(1.12) translateX(3%)}
.acq.act-hero .island{animation:kenburns 4.5s ease-out forwards}
@keyframes kenburns{to{transform:scale(1) translateX(-2%)}}
.waves{position:absolute;left:0;right:0;bottom:0;height:34%;background:repeating-linear-gradient(90deg,#ffffff00 0 26px,#ffe9b81c 26px 34px);-webkit-mask:linear-gradient(#0000,#000);mask:linear-gradient(#0000,#000);animation:waves 3s linear infinite}
@keyframes waves{to{background-position:68px 0}}
.sun-glow{position:absolute;right:18%;top:26%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#ffd57f66,#0000 70%);animation:glow 2s ease-in-out infinite alternate}
@keyframes glow{to{transform:scale(1.25);opacity:.7}}
.plane{position:absolute;top:18%;left:-20%;width:56px;height:56px;filter:drop-shadow(0 4px 0 #0006)}
.acq.act-hero .plane{animation:fly 2.6s cubic-bezier(.35,.1,.6,.95) .6s forwards}
@keyframes fly{to{transform:translateX(calc(min(94vw,560px) * 1.3)) translateY(-18px)}}
.contrail{position:absolute;top:calc(18% + 26px);left:0;width:100%;height:3px;background:linear-gradient(90deg,#fff0,#fffc);transform-origin:0 50%;transform:scaleX(0)}
.acq.act-hero .contrail{animation:trail 2.6s cubic-bezier(.35,.1,.6,.95) .6s forwards}
@keyframes trail{60%{opacity:1}to{transform:scaleX(1);opacity:.25}}
.ooo{position:absolute;left:0;right:0;bottom:8%;text-align:center;display:grid;gap:4px;clip-path:inset(0 100% 0 0)}
.ooo strong{font:400 clamp(20px,6vw,30px)/1.1 "Astoria Pixel",ui-monospace,monospace;color:#fff4cf;text-shadow:2px 2px 0 #000}
.ooo span{font-size:11px;letter-spacing:.2em;color:#ffe9b8;text-shadow:1px 1px 0 #000}
.acq.act-hero .ooo{animation:type 1.2s steps(18,end) 1.4s forwards}
@keyframes type{to{clip-path:inset(0 0 0 0)}}

/* title + ACT 3 · payout */
.acq-title{display:grid;justify-items:center;gap:4px;text-align:center;min-height:92px}
.acq-title small{padding:3px 10px;border:1px solid #ffd84d;color:#ffd84d;font-size:10px;letter-spacing:.3em;opacity:0}
.acq.act-payout .acq-title small{opacity:1;animation:marquee-flash .3s steps(1,end) 6}
@keyframes marquee-flash{50%{background:#ffd84d;color:#1a1405}}
.acq-title strong{font:400 clamp(24px,8.5vw,44px)/1.15 "Astoria Pixel",ui-monospace,monospace;letter-spacing:.06em;color:#fff1c9;text-shadow:0 0 18px #ffd84d66,3px 3px 0 #3a2d0c;max-width:94vw;text-wrap:balance}
.acq-title strong.long{font-size:clamp(19px,6.2vw,36px)}
.acq-title .word{display:inline-block;white-space:nowrap}
.acq-title .word>span{display:inline-block;opacity:0;transform:translateY(-26px)}
.acq.act-hero .acq-title .word>span{animation:letter .38s cubic-bezier(.2,1.6,.4,1) calc(.25s + var(--i) * 38ms) forwards}
@keyframes letter{to{opacity:1;transform:none}}
.acq-price{font-size:13px;letter-spacing:.16em;color:#ffb3b8;opacity:0;font-variant-numeric:tabular-nums}
.acq.act-payout .acq-price{opacity:1}
.acq-coins{position:absolute;inset:0;pointer-events:none;z-index:3}
.coin{position:absolute;top:-44px;left:var(--x);width:calc(30px * var(--z,1));height:calc(30px * var(--z,1));opacity:0;filter:drop-shadow(0 2px 0 #3a2d0c)}
.coin svg{display:block;width:100%;height:100%;animation:coin-flip .45s linear infinite}
.acq.act-payout .coin{animation:coin-fall var(--t) cubic-bezier(.35,.05,.75,.95) var(--d) forwards}
@keyframes coin-fall{0%{opacity:1;transform:translateY(0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translateY(calc(100vh + 60px)) rotate(var(--r))}}
@keyframes coin-flip{50%{transform:scaleX(.15)}}
.acq-skip{font-size:10px;letter-spacing:.24em;color:#8aa39f;animation:blink 1.1s steps(1,end) infinite;margin-bottom:12px}
@keyframes blink{50%{opacity:.25}}

/* reduced motion: a still card, no reel, no particles */
.acq--still *,.acq--still{animation:none!important;transition:none!important}
.acq--still .hero,.acq--still .acq-title *,.acq--still .acq-title .word>span,.acq--still .car-keys,.acq--still .stamp,.acq--still .ooo{opacity:1!important;transform:none!important;clip-path:none!important}
.acq--still .car-rig,.acq--still .crate{transform:none!important}
.acq--still .coin,.acq--still .fizz,.acq--still .drop,.acq--still .puff,.acq--still .mini-heart,.acq--still .cork,.acq--still .pop-word,.acq--still .pop-burst,.acq--still .car-speed{display:none}
