/* asaaab shop: the room + the vending machine (WIP). */
.room{position:relative; overflow:hidden; height:calc(100svh - 64px); min-height:480px; container-type:size; width:100%; display:grid; place-items:end center;
  background:linear-gradient(#f4f1ea, #e7e2d8 70%, #ddd7cc)}
/* airport: between the all-gender restroom and baggage claim */
.bigwin{position:absolute; left:6%; right:6%; top:5%; height:44%; border:10px solid #c9c6bf; border-radius:22px; overflow:hidden;
  background:linear-gradient(#4f9fe8, #9fd2ff 70%, #cfe9ff 72%, #a7c38a 72.5%, #8fae76); box-shadow:inset 0 0 20px rgba(0,0,0,.15)}
.bigwin::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 6px), #c9c6bf calc(25% - 6px) 25%),
  linear-gradient(115deg, rgba(255,255,255,.22) 0 12%, transparent 12% 20%, rgba(255,255,255,.1) 20% 23%, transparent 23%)}
.runway{position:absolute; left:-5%; right:-5%; top:76%; height:6%; background:#5d6266; transform:skewX(-35deg)}
.runway::after{content:""; position:absolute; left:0; right:0; top:45%; height:10%; background:repeating-linear-gradient(90deg, #fff 0 30px, transparent 30px 60px)}
.plane{position:absolute; width:clamp(26px, 4vw, 54px); left:-10%; animation:16s linear infinite}
.plane svg{display:block; width:100%; position:relative; z-index:1}
.plane .trail{position:absolute; right:85%; top:45%; width:500%; height:12%; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85))}
.plane.up{animation-name:takeoff} .plane.down{animation-name:landing; animation-delay:-8s} .plane.far{width:clamp(14px, 2vw, 26px); animation-name:cruise; animation-duration:40s; opacity:.8}
@keyframes takeoff{0%{transform:translate(0, 0) rotate(0deg); left:-10%; top:72%} 30%{top:70%; transform:rotate(0)} 100%{left:110%; top:-10%; transform:rotate(-24deg)}}
@keyframes landing{0%{left:-10%; top:5%; transform:rotate(16deg)} 70%{top:68%; transform:rotate(4deg)} 100%{left:110%; top:71%; transform:rotate(0)}}
@keyframes cruise{from{left:110%; top:16%; transform:scaleX(-1)} to{left:-10%; top:12%; transform:scaleX(-1)}}
.sign{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; font:900 clamp(9px, 1.1vw, 14px)/1.1 var(--hwy, system-ui); letter-spacing:.08em; box-shadow:0 4px 8px rgba(0,0,0,.25)}
.sign.blue{background:#1d5fb8; color:#fff} .sign.blue svg{width:clamp(18px, 2.2vw, 30px)}
.sign.black{background:#16191c; color:#f7d117} .sign.black b{color:#fff}
.rest{position:absolute; left:3%; bottom:22%; display:grid; justify-items:center; gap:10px}
.rest .door{width:clamp(70px, 9vw, 120px); aspect-ratio:1/2; border-radius:10px 10px 0 0; background:linear-gradient(#8a9097, #6f757c); box-shadow:inset 0 0 0 4px #5b6167}
.claim{position:absolute; right:0; top:60%; z-index:2; display:grid; justify-items:start; gap:14px}
.carousel{position:relative; overflow:visible; width:clamp(300px, 44vw, 860px); height:clamp(46px, 6vw, 80px); border-radius:999px 0 0 999px; background:#3a3f44; box-shadow:0 8px 12px rgba(0,0,0,.3), inset 0 -6px 8px rgba(0,0,0,.4)}
.belt{position:absolute; inset:18% 6%; border-radius:999px; background:repeating-linear-gradient(90deg, #9aa1a7 0 14px, #6d747a 14px 16px); animation:belt 3s linear infinite}
@keyframes belt{to{background-position:64px 0}}
.bag{position:absolute; left:0; bottom:22%; font-size:clamp(22px, 3vw, 40px); line-height:1; will-change:transform}
@keyframes ride{from{left:-15%} to{left:105%}}
@media (max-width:760px){ .rest{display:none} .claim{display:none} .bigwin{left:3%; right:3%; height:36%} }
/* terrazzo floor */
.floor{position:absolute; left:0; right:0; bottom:0; height:22%; box-shadow:inset 0 6px 10px -6px rgba(0,0,0,.25);
  background:radial-gradient(circle at 20% 30%, #9a958c 1px, transparent 1.6px) 0 0/23px 19px, radial-gradient(circle at 70% 60%, #f6f3ee 1px, transparent 1.8px) 0 0/31px 27px, linear-gradient(#d6d1c8, #bfb9ae)}
.floor::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.45), transparent 70%)}

/* the machine */
.vm{container-type:inline-size; position:relative; z-index:3; box-sizing:border-box; margin:0 0 calc(3cqh + min(10cqw, 46px, calc((100cqh - 190px) * .0605))); width:min(94cqw, 600px, calc((100cqh - 150px) * .74)); min-width:280px; aspect-ratio:500/660; display:grid; grid-template-columns:1fr 31%; grid-template-rows:auto 1fr auto; column-gap:min(2.8cqw, 13px, calc((100cqh - 190px) * .017)); row-gap:min(1.9cqw, 9px, calc((100cqh - 190px) * .0115)); padding:min(3.76cqw, 18px, calc((100cqh - 190px) * .0242));
  border-radius:26px; background:linear-gradient(160deg, #ff4b3e, #dc0500 45%, #a50300); box-shadow:inset 0 3px 2px rgba(255,255,255,.5), inset 0 -10px 18px rgba(0,0,0,.3), 0 26px 36px -18px rgba(0,0,0,.55);
  cursor:grab; touch-action:pan-y; font-family:var(--hwy, system-ui)}
.vm .top{grid-column:1/3; text-align:center; font-weight:900; letter-spacing:.32em; white-space:nowrap; color:#fff; font-size:3.8cqw; text-shadow:0 2px 0 rgba(0,0,0,.25); margin-bottom:2%}
.glass{position:relative; min-height:0; border-radius:16px; background:#1a1e22; box-shadow:inset 0 0 0 5px #7f0400, inset 0 8px 18px rgba(0,0,0,.6); overflow:hidden}
.glass canvas{position:absolute; inset:0; width:100%; height:100%}
.glass .shine{position:absolute; inset:0; pointer-events:none; border-radius:16px;
  background:linear-gradient(118deg, rgba(255,255,255,.28) 0 9%, transparent 9% 15%, rgba(255,255,255,.14) 15% 18%, transparent 18% 72%, rgba(255,255,255,.08) 72% 80%, transparent 80%),
  linear-gradient(rgba(170,220,255,.08), rgba(170,220,255,.02)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.side{display:flex; flex-direction:column; gap:2.4cqw; position:relative; min-width:0}
.screen{background:#04140a; border-radius:10px; padding:10% 8%; box-shadow:inset 0 2px 6px #000, 0 0 0 3px #7f0400; font:400 5.4cqw/1 "VT323", monospace; border-radius:2cqw; padding:2.2cqw 1cqw;
  color:#8dff9a; text-shadow:0 0 6px #39ff6a; text-align:center; min-height:2.2em; display:grid; place-items:center; white-space:nowrap; overflow:hidden}
.pad{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4cqw}
.pad button{aspect-ratio:1; border:0; border-radius:50%; cursor:pointer; color:#fff; font:900 3.3cqw var(--hwy, system-ui); min-width:0; padding:0;
  background:radial-gradient(circle at 50% 30%, #6a716e, #2a302d 60%, #121514); box-shadow:inset 0 2px 1px rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.6), 0 3px 4px rgba(0,0,0,.4); transition:transform .08s}
.pad button:active, .pad button.hit{transform:translateY(2px) scale(.94); box-shadow:inset 0 2px 1px rgba(255,255,255,.2), inset 0 -1px 3px rgba(0,0,0,.6), 0 0 8px #39ff6a}
.pad button.clr{background:radial-gradient(circle at 50% 30%, #ffe08a, #f29a1f 55%, #8a4a0a); color:#3a1d00}
.coin{align-self:center; width:34%; aspect-ratio:1/2; border-radius:8px; background:linear-gradient(90deg, #2a302d, #535a57, #2a302d); position:relative; cursor:pointer; border:0; box-shadow:inset 0 2px 4px #000}
.coin::after{content:""; position:absolute; left:44%; top:18%; bottom:18%; width:12%; background:#000; border-radius:4px}
.trough{grid-column:1/3; height:13cqw; border-radius:12px; background:linear-gradient(#111, #2a2d30); box-shadow:inset 0 4px 10px #000, 0 0 0 4px #7f0400;
  display:grid; place-items:center; position:relative; cursor:pointer}
.trough .flap{position:absolute; inset:10% 6%; border-radius:8px; background:linear-gradient(#3a3f43, #222629); display:grid; place-items:center; color:#9aa3a0;
  font:800 2.9cqw var(--hwy, system-ui); letter-spacing:.14em; white-space:nowrap}
.trough.shake{animation:jam .35s}
@keyframes jam{20%{transform:translateX(-4px) rotate(-.6deg)} 40%{transform:translateX(4px) rotate(.6deg)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
.trough .req{position:absolute; inset:8% 4%; border:0; border-radius:999px; cursor:pointer; color:#fff; font:900 3.3cqw var(--hwy, system-ui); letter-spacing:.12em; white-space:nowrap;
  background:radial-gradient(120% 140% at 50% 120%, #7dffb0 0, #1fb86a 45%, #0a6b52 100%); box-shadow:inset 0 2px 2px rgba(255,255,255,.6), 0 0 18px rgba(110,255,180,.6); animation:glow 1.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:inset 0 2px 2px rgba(255,255,255,.6), 0 0 30px rgba(110,255,180,.95)}}
/* WIP sign, hangs over the keypad; drag it away */
.wipsign{position:absolute; z-index:5; width:46cqw; padding:2.6cqw 2.6cqw 2.2cqw; border-radius:12px; cursor:grab; touch-action:none; user-select:none;
  background:#f7d117; color:#16191c; border:3px solid #16191c; box-shadow:0 10px 18px rgba(0,0,0,.35); text-align:center; font-family:var(--hwy, system-ui); transform:rotate(-4deg)}
.wipsign.drag{cursor:grabbing; transform:rotate(0deg) scale(1.03)}
.wipsign b{display:block; font-weight:900; font-size:3.3cqw; letter-spacing:.06em}
.wipsign small{display:block; margin-top:.8cqw; font-weight:700; font-size:2.7cqw; line-height:1.25}
.wipsign::before{content:""; position:absolute; left:10px; right:10px; top:-10px; height:10px; background:repeating-linear-gradient(-45deg, #f7d117 0 8px, #16191c 8px 16px); border-radius:4px 4px 0 0}
/* checkout request card */
.ask{position:fixed; inset:0; z-index:10; display:none; place-items:center; background:rgba(10,14,18,.45)}
.ask.on{display:grid}
.ask .card2{width:min(90vw, 380px); border-radius:22px; padding:22px; background:linear-gradient(160deg, #f4fffb, #c6f2e2); border:3px solid #16191c; box-shadow:0 18px 40px rgba(0,0,0,.4); text-align:center}
.ask h2{margin:0 0 6px; font-family:var(--hwy, system-ui); font-weight:900}
.ask p{margin:6px 0 12px}
.ask label{display:flex; gap:8px; align-items:center; justify-content:center; font-weight:800; margin:10px 0}
.ask input[type=email]{width:100%; box-sizing:border-box; padding:12px; border-radius:12px; border:2px solid #16191c; font-size:16px}
.ask .go{margin-top:12px; border:0; border-radius:999px; padding:12px 22px; color:#fff; font:900 15px var(--hwy, system-ui); letter-spacing:.1em; cursor:pointer;
  background:radial-gradient(120% 140% at 50% 120%, #7dffb0 0, #1fb86a 45%, #0a6b52 100%)}
.ask .x{margin-top:8px; background:none; border:0; font-weight:800; text-decoration:underline; cursor:pointer}
@media (prefers-reduced-motion: reduce){ .sky i, .win{animation:none} .trough .req{animation:none} }

.vm.rolling{cursor:grabbing}
.legs{position:absolute; left:12%; right:12%; bottom:-10cqw; height:10cqw; display:flex; justify-content:space-between; pointer-events:none}
.leg{width:4cqw; height:5.4cqw; background:linear-gradient(90deg, #2a2d30, #6a7076, #2a2d30); border-radius:0 0 1cqw 1cqw; position:relative}
.wheel{position:absolute; left:50%; top:3.4cqw; width:6.6cqw; height:6.6cqw; margin-left:-3.3cqw; border-radius:50%;
  background:radial-gradient(circle, #d9dee2 0 18%, #1b1e21 20% 58%, #2f3337 60%), conic-gradient(from 0deg, #555 0 10%, transparent 10% 25%, #555 25% 35%, transparent 35% 50%, #555 50% 60%, transparent 60% 75%, #555 75% 85%, transparent 85%);
  box-shadow:0 2px 0 #000, 0 6px 8px rgba(0,0,0,.35)}
.wheel::after{content:""; position:absolute; left:46%; top:4%; width:8%; height:30%; background:#d9dee2; border-radius:2px}
.vm::after{content:""; position:absolute; left:6%; right:6%; bottom:-11cqw; height:3cqw; border-radius:50%; background:rgba(0,0,0,.25); filter:blur(4px); z-index:-1}
.pad button.orb{background:radial-gradient(circle at 35% 30%, #fff 0 8%, var(--c) 30%, color-mix(in srgb, var(--c) 55%, #000) 100%)}
.pad button.dots{font:900 3cqw/1 system-ui; letter-spacing:-.05em; background:radial-gradient(circle at 50% 30%, #f4f6f7, #c9d0d4 60%, #8f989e); color:#16191c}
.screen .o{display:inline-block; width:.62em; height:.62em; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff 0 10%, var(--c) 40%, #000 130%); vertical-align:-.05em; margin-right:.2em; box-shadow:0 0 6px var(--c)}
.screen .d{letter-spacing:-.08em} .screen .d.dim{opacity:.5}

.claim .sign{margin-left:10%}

/* ===== v4: half in, half out (old Burbank), moving walkway, gate to inspo, the line behind you ===== */
.outside{position:absolute; top:0; right:0; bottom:22%; width:38%; z-index:0;
  background:linear-gradient(#7cc4ff, #cfeaff 62%, #d9d4c7 62.2%, #b9b3a6); border-left:14px solid #c9c6bf; box-shadow:inset 18px 0 24px -16px rgba(0,0,0,.35)}
.outside::before{content:""; position:absolute; left:0; right:0; top:0; height:9%; background:repeating-linear-gradient(90deg, #e9e5dc 0 46px, #d8d3c7 46px 50px); box-shadow:0 6px 10px rgba(0,0,0,.15)}  /* the canopy */
.outside .road{position:absolute; left:0; right:0; top:70%; height:18%; background:#55595d; overflow:hidden}
.outside .road::after{content:""; position:absolute; left:0; right:0; top:48%; height:5%; background:repeating-linear-gradient(90deg, #f2d33b 0 26px, transparent 26px 52px)}
.outside .curb{position:absolute; left:0; right:0; top:66%; height:4%; background:linear-gradient(#e7e3da, #a9a397)}
.outside .car{position:absolute; bottom:8%; font-size:clamp(26px, 3.6vw, 52px); line-height:1; animation:drive 16s linear infinite; animation-delay:var(--d); transform:scaleX(-1)}
@keyframes drive{0%{left:-20%} 18%{left:30%} 34%{left:30%} 100%{left:120%}}   /* pull up, pick someone up, head for the highway */
.outside .hwy{position:absolute; right:6%; top:16%} .outside .pickup{position:absolute; left:8%; top:13%}
.sign.green{background:#1f7a3a; color:#fff; border:2px solid #fff}
.bigwin{left:3%; right:40%}
.fids{position:absolute; left:4%; top:52%; z-index:1; display:grid; gap:2px; padding:8px 12px; border-radius:8px; background:#101418; color:#f7d117; font:400 clamp(13px, 1.6vw, 20px)/1 "VT323", monospace; letter-spacing:.06em; box-shadow:0 4px 10px rgba(0,0,0,.3)}
.fids b{font-weight:400; color:#fff; font-size:.8em} .fids em{font-style:normal; color:#8dff9a}
.fids.boarding em{color:#ff6b5e; animation:blinkb 1s steps(2) infinite} @keyframes blinkb{50%{opacity:.25}}
.gate{position:absolute; left:4%; top:68%; z-index:4; text-decoration:none; gap:12px; padding:12px 16px; font-size:clamp(12px, 1.4vw, 17px); transition:transform .15s}
.gate b{font-size:1.5em; line-height:1} .gate:hover{transform:translateX(4px) scale(1.04)}
.rest{display:none}
/* moving walkway: long, flat, the machine can ride it */
.claim{left:63%; right:0} .claim .sign{margin-left:2%}
.carousel{width:100%; overflow:visible; height:clamp(34px, 4.6vw, 60px); border-radius:999px 0 0 999px; background:#2f3337}
.belt{inset:22% 2% 30% 3%; background:repeating-linear-gradient(90deg, #b9c0c6 0 10px, #8a9298 10px 12px); animation:belt 2.2s linear infinite}
.bag{pointer-events:auto; cursor:pointer; bottom:30%; transition:none}
.bag.fly{filter:drop-shadow(0 6px 4px rgba(0,0,0,.35))}
/* the line behind you (only when you've bought something and gone quiet) */
.queue{position:absolute; bottom:calc(22% - 6px); right:3%; z-index:2; display:flex; flex-direction:row-reverse; gap:2px; pointer-events:none}
.queue span{font-size:clamp(34px, 4.6vw, 64px); line-height:1; opacity:0; transform:translateY(10px); transition:opacity .6s, transform .6s}
.queue span.in{opacity:1; transform:none}
.queue span.tap{animation:tap .5s ease-in-out infinite alternate} @keyframes tap{to{transform:translateY(-4px) rotate(-3deg)}}
/* big greasy-finger keypad */
.pad{grid-template-columns:repeat(3, 1fr); gap:2.2cqw}
.pad button.clr{font-size:5cqw}
.pad button.dots{font-size:5.6cqw}
.screen{font-size:7cqw; min-height:1.8em}
.glass canvas{cursor:pointer}
@media (max-width:760px){ .outside{width:46%; opacity:.9} .bigwin{right:48%} .fids{display:none} .gate{top:2%; bottom:auto; left:3%; padding:8px 12px} .outside .hwy{display:none} .outside .pickup{left:auto; right:4%; top:12%} .queue{display:none} }