:root {
  /* Compliance tokens from DESIGN.md parser: Grotesk** readable copy */
  --cherry: #FF2E63;
  --lime: #B6FF3B;
  --teal: #00D7C3;
  --ink: #151018;
  --cream: #FFF2CC;
  --orange: #FF8A00;
  --grape: #642CA9;
  --pink: #FF8FD8;
  --space: 'Space Grotesk', sans-serif;
  --shade: 'Bungee Shade', cursive;
  --fancy: 'Fraunces', serif;
  --hand: 'Gochi Hand', cursive;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--ink); color: var(--cream); font-family: var(--space); }

button { font: inherit; color: inherit; cursor: pointer; }

.grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .22; background-image: radial-gradient(var(--cream) 1px, transparent 1px), radial-gradient(var(--pink) .8px, transparent .8px); background-size: 17px 19px, 31px 29px; mix-blend-mode: screen; }
.grain::before { content: "Grotesk** Grotes*"; display: none; }

.crawl { display: flex; width: 500vw; height: 100vh; transform: translateX(0); transition: transform 900ms cubic-bezier(.7,-.28,.25,1.18); }

body.entered .crawl { transform: translateX(-100vw); }

.scene { position: relative; width: 100vw; height: 100vh; flex: 0 0 100vw; overflow: hidden; padding: 7vh 7vw; isolation: isolate; }

.scene h1 { font-family: var(--shade); font-size: clamp(3rem, 8vw, 8.5rem); line-height: .9; margin: 0; color: var(--cream); text-shadow: .06em .06em 0 var(--cherry), -.04em .05em 0 var(--teal); transform: rotate(-2deg); max-width: 1100px; }

.token-nav { position: fixed; z-index: 40; right: 2vw; top: 50%; transform: translateY(-50%) rotate(3deg); display: grid; gap: 12px; }

.token { width: 74px; height: 74px; border-radius: 50%; border: 4px dashed var(--ink); background: var(--cream); color: var(--ink); box-shadow: 5px 6px 0 var(--cherry); font-family: var(--hand); font-size: 1.05rem; transform: rotate(var(--r, -8deg)); transition: transform 250ms, background 250ms; }
.token:nth-child(2) { --r: 9deg; } .token:nth-child(3) { --r: -14deg; } .token:nth-child(4) { --r: 12deg; } .token:nth-child(5) { --r: -4deg; }
.token.active, .token:hover { background: var(--lime); transform: rotate(var(--r, -8deg)) scale(1.12); }

.tile-wall, .back-tile { position: absolute; inset: 0; z-index: -2; background-color: var(--ink); background-image: linear-gradient(45deg, rgba(255,242,204,.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,242,204,.05) 25%, transparent 25%), radial-gradient(circle at 20% 30%, rgba(255,46,99,.28), transparent 28%), radial-gradient(circle at 80% 70%, rgba(0,215,195,.2), transparent 30%); background-size: 62px 62px, 62px 62px, auto, auto; }

.alley { background: radial-gradient(circle at 52% 45%, rgba(100,44,169,.8), transparent 28%), var(--ink); }
.neon-arrow { position: absolute; left: 11vw; top: 15vh; color: var(--lime); font-family: var(--hand); font-size: clamp(1.7rem, 4vw, 4.4rem); line-height: .8; text-shadow: 0 0 8px var(--lime), 0 0 22px var(--lime); transform: rotate(-15deg); animation: hiccup 2.8s infinite; }
.neon-arrow::after { content: ''; position: absolute; left: 95%; top: 25%; width: 110px; height: 28px; background: var(--lime); clip-path: polygon(0 35%, 70% 35%, 70% 0, 100% 50%, 70% 100%, 70% 65%, 0 65%); box-shadow: 0 0 22px var(--lime); }

.sign-machine { position: absolute; left: 34vw; top: 18vh; width: min(42vw, 560px); min-height: 48vh; border: 8px solid var(--orange); border-radius: 28px 14px 35px 18px; background: linear-gradient(155deg, var(--grape), var(--ink) 60%); box-shadow: 14px 18px 0 var(--cherry), inset 0 0 55px rgba(0,215,195,.25); transform: rotate(-4deg); transition: transform 700ms cubic-bezier(.62,-.5,.24,1.55); }
.sign-machine:hover, body.entered .sign-machine { transform: rotate(3deg) translateY(10px); }
.buzz-word { display: block; margin: 7vh auto 5vh; font-family: var(--shade); font-size: clamp(3rem, 7vw, 7rem); color: var(--cream); text-shadow: 0 0 8px var(--cherry), 0 0 28px var(--cherry), 7px 5px 0 var(--teal); animation: buzz 1.7s infinite; }
.door-slot { display: inline-block; padding: 13px 24px; background: var(--cream); color: var(--ink); border: 5px solid var(--teal); transform: rotate(2deg); font-family: var(--hand); font-size: 1.5rem; }
.coin { position: absolute; right: 17%; top: 59%; width: 42px; height: 42px; border-radius: 50%; background: var(--orange); box-shadow: inset -7px -5px 0 rgba(21,16,24,.25), 0 0 20px var(--orange); }
body.entered .coin { animation: dropCoin 900ms forwards; }
.vending-door { position: absolute; right: 17vw; bottom: 8vh; width: 150px; height: 220px; background: var(--cream); border: 7px solid var(--teal); border-radius: 18px; transform: rotate(5deg); display: grid; place-content: center; gap: 12px; box-shadow: 12px 12px 0 var(--pink); }
.vending-door span { width: 72px; height: 9px; background: var(--ink); display: block; }
.chalk-note { position: absolute; left: 8vw; bottom: 10vh; max-width: 420px; font-family: var(--hand); color: var(--pink); font-size: clamp(1.4rem, 2vw, 2.2rem); transform: rotate(2deg); }

.counter-line { position: absolute; height: 44px; background: linear-gradient(90deg, var(--orange), var(--cherry), var(--teal)); border: 6px solid var(--ink); border-radius: 999px; box-shadow: 0 12px 0 rgba(0,0,0,.25), inset 0 0 0 7px rgba(255,242,204,.25); z-index: 3; }
.first { width: 115vw; left: -8vw; bottom: 5vh; transform: rotate(-5deg); }

.menu-room { background: linear-gradient(135deg, var(--grape), var(--ink) 55%); }
.special { font-family: var(--fancy); font-size: clamp(1.4rem, 2.5vw, 2.7rem); color: var(--lime); max-width: 760px; margin: 2vh 0; transform: rotate(1deg); }
.menu-board { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; width: min(78vw, 1050px); margin-top: 3vh; }
.menu-card { position: relative; padding: 28px; background: var(--cream); color: var(--ink); border: 5px solid var(--ink); box-shadow: 12px 12px 0 var(--teal); clip-path: polygon(2% 0, 100% 4%, 97% 100%, 0 96%); transition: transform 350ms; }
.menu-card:hover { transform: rotate(0) translateY(-14px) scale(1.03); }
.tilt-left { transform: rotate(-3deg); } .tilt-right { transform: rotate(4deg); } .small-card { grid-column: 1 / span 2; max-width: 680px; margin-left: 12vw; box-shadow: 12px 12px 0 var(--pink); }
.menu-card h2 { margin: 0 0 8px; font-family: var(--fancy); font-size: clamp(1.7rem, 3vw, 3rem); color: var(--cherry); }
.menu-card p { font-size: 1.08rem; line-height: 1.4; }
.menu-card em { font-family: var(--hand); color: var(--grape); font-size: 1.35rem; }
.price { position: absolute; right: 18px; top: 12px; background: var(--lime); padding: 6px 12px; border: 3px solid var(--ink); border-radius: 50%; font-weight: 700; }
.menu-counter { width: 95vw; right: -10vw; bottom: 10vh; transform: rotate(7deg); }
.coaster-wipe { position: absolute; right: 16vw; bottom: 16vh; width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle, var(--cream) 0 11px, var(--orange) 12px 20px, var(--cherry) 21px 29px); color: var(--ink); border: 6px dashed var(--ink); font-family: var(--hand); font-size: 1.5rem; box-shadow: 8px 9px 0 var(--grape); transition: transform 600ms; }
.coaster-wipe.spin { transform: rotate(720deg) scale(1.35); }

.booth-room { background: radial-gradient(circle at 50% 50%, var(--grape), var(--ink) 70%); }
.booth-shell { position: relative; width: min(78vw, 1080px); min-height: 68vh; margin: 8vh auto 0; padding: 42px; background: linear-gradient(145deg, var(--cherry), var(--grape)); border: 8px solid var(--cream); border-radius: 50px 20px 60px 18px; box-shadow: 20px 18px 0 var(--ink), inset 0 -35px 0 rgba(21,16,24,.28); transform: rotate(-1deg); transition: transform 400ms; }
.booth-shell.wobble { animation: boothWobble 450ms; }
.receipt { position: absolute; right: 5%; top: -24px; background: var(--cream); color: var(--ink); padding: 16px 26px; transform: rotate(6deg); font-family: var(--hand); font-size: 1.4rem; box-shadow: 7px 8px 0 var(--teal); }
.tab-rack { display: flex; flex-wrap: wrap; gap: 14px; margin: 5vh 0 4vh; }
.wobble-tab { border: 4px solid var(--ink); background: var(--orange); color: var(--ink); padding: 15px 25px; border-radius: 18px 18px 4px 4px; box-shadow: 5px 7px 0 var(--ink); font-weight: 700; transition: transform 250ms, background 250ms; }
.wobble-tab.active, .wobble-tab:hover { background: var(--lime); transform: translateY(-9px) rotate(-3deg); }
blockquote { margin: 0; max-width: 790px; font-family: var(--fancy); font-size: clamp(2rem, 5vw, 5rem); line-height: 1; color: var(--cream); text-shadow: 5px 5px 0 var(--ink); }
.straw-question { position: absolute; right: 12vw; bottom: 8vh; width: 130px; height: 250px; border: 20px solid var(--teal); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(30deg); filter: drop-shadow(0 0 15px var(--teal)); }
.straw-question::after { content: ''; position: absolute; left: 54px; top: 190px; width: 24px; height: 75px; background: var(--teal); border-radius: 999px; }
.booth-counter { width: 130vw; left: -15vw; bottom: -2vh; transform: rotate(2deg); }

.syrup-room { background: linear-gradient(180deg, var(--ink), #281437 54%, var(--grape)); }
.syrup-room h1 { margin-top: 2vh; max-width: 900px; }
.label-note { font-family: var(--hand); color: var(--pink); font-size: 2rem; transform: rotate(-2deg); }
.shelf-rail { position: absolute; left: 4vw; right: 4vw; top: 58vh; height: 34px; background: var(--cream); border: 5px solid var(--ink); transform: rotate(-2deg); box-shadow: 0 18px 0 rgba(0,0,0,.32); }
.bottle-row { position: absolute; left: 11vw; right: 11vw; bottom: 24vh; display: flex; justify-content: space-between; align-items: end; }
.bottle { position: relative; width: 120px; height: 300px; border: 6px solid var(--ink); border-radius: 30px 30px 14px 14px; background: var(--cream); box-shadow: 11px 12px 0 rgba(0,0,0,.35); transform: rotate(var(--tilt, -5deg)); transition: transform 260ms; overflow: hidden; }
.bottle:hover { transform: rotate(calc(var(--tilt, -5deg) * -1)) translateY(-22px); }
.bottle::before { content: ''; position: absolute; left: 30px; top: -80px; width: 58px; height: 105px; border: 6px solid var(--ink); border-bottom: 0; background: var(--cream); border-radius: 18px 18px 0 0; }
.bottle span { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: var(--fluid); animation: slosh 3.6s infinite ease-in-out; }
.bottle b { position: absolute; left: 14px; right: 14px; top: 42%; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); padding: 10px 2px; font-family: var(--hand); font-size: 1.25rem; transform: rotate(5deg); }
.teal { --fluid: #00D7C3; --tilt: -7deg; } .pink { --fluid: #FF8FD8; --tilt: 6deg; } .orange { --fluid: #FF8A00; --tilt: -3deg; } .lime { --fluid: #B6FF3B; --tilt: 8deg; }
.flavor-receipt { position: absolute; right: 10vw; bottom: 9vh; max-width: 420px; padding: 22px; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); box-shadow: 9px 10px 0 var(--cherry); font-family: var(--fancy); font-size: 1.45rem; transform: rotate(3deg); }
.bubble-field { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.bubble { position: absolute; border-radius: 50%; border: 3px solid var(--teal); background: rgba(0,215,195,.18); animation: rise linear infinite; }

.finale { background: radial-gradient(circle at 50% 45%, rgba(255,138,0,.25), transparent 30%), linear-gradient(140deg, var(--ink), var(--grape)); }
.meter-stage { width: min(86vw, 1180px); margin: 0 auto; text-align: center; }
.meter-stage h1 { margin: 0 auto; transform: rotate(1deg); }
.finale-line { font-family: var(--fancy); color: var(--lime); font-size: clamp(1.4rem, 2.4vw, 2.6rem); }
.meter { position: relative; width: min(72vw, 760px); height: 360px; margin: 4vh auto 1vh; border-radius: 360px 360px 30px 30px; background: conic-gradient(from 238deg at 50% 100%, var(--teal), var(--lime), var(--orange), var(--cherry), var(--pink), var(--grape)); border: 10px solid var(--cream); box-shadow: 0 0 0 8px var(--ink), 0 22px 0 rgba(0,0,0,.35); overflow: hidden; }
.meter::after { content: ''; position: absolute; left: 11%; right: 11%; bottom: -36%; height: 72%; background: var(--ink); border-radius: 50% 50% 0 0; }
.ticks { position: absolute; inset: 30px 40px auto; display: flex; justify-content: space-between; font-family: var(--hand); color: var(--ink); font-size: 1.4rem; z-index: 2; transform: rotate(-2deg); }
.needle { position: absolute; left: calc(50% - 10px); bottom: 44px; width: 20px; height: 250px; background: var(--cream); border: 4px solid var(--ink); border-radius: 999px; transform-origin: 50% 92%; transform: rotate(-72deg); z-index: 5; transition: transform 900ms cubic-bezier(.7,-.55,.18,1.55); }
.needle::after { content: ''; position: absolute; left: -21px; bottom: -20px; width: 55px; height: 55px; border-radius: 50%; background: var(--cherry); border: 5px solid var(--ink); }
.meter-face { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 6; font-family: var(--shade); color: var(--cream); font-size: 3rem; text-shadow: 4px 4px 0 var(--cherry); }
.bell { margin-top: 1.5vh; background: var(--orange); color: var(--ink); border: 6px solid var(--ink); border-radius: 50% 50% 22px 22px; padding: 20px 34px; font-weight: 800; box-shadow: 0 10px 0 var(--cherry); transform: rotate(-3deg); transition: transform 160ms; }
.bell:active { transform: rotate(4deg) translateY(8px); box-shadow: 0 2px 0 var(--cherry); }
.last-receipt { display: inline-block; background: var(--cream); color: var(--ink); padding: 14px 24px; border: 4px solid var(--ink); font-family: var(--hand); font-size: 1.6rem; transform: rotate(2deg); }
.final-counter { width: 115vw; left: -9vw; bottom: 4vh; transform: rotate(-4deg); }

@keyframes buzz { 0%, 100% { filter: brightness(1); transform: translate(0); } 8% { filter: brightness(2); transform: translate(2px, -1px); } 11% { filter: brightness(.55); } 14% { filter: brightness(1.9); } }
@keyframes hiccup { 0%, 80%, 100% { opacity: 1; } 82% { opacity: .25; } 85% { opacity: 1; } 88% { opacity: .45; } }
@keyframes dropCoin { 0% { transform: translateY(0) rotate(0); opacity: 1; } 80% { transform: translateY(150px) rotate(520deg); opacity: 1; } 100% { transform: translateY(170px) rotate(620deg); opacity: 0; } }
@keyframes boothWobble { 0%, 100% { transform: rotate(-1deg) skewX(0); } 35% { transform: rotate(2deg) skewX(-4deg); } 68% { transform: rotate(-4deg) skewX(5deg); } }
@keyframes slosh { 0%, 100% { clip-path: polygon(0 14%, 20% 10%, 46% 15%, 70% 8%, 100% 12%, 100% 100%, 0 100%); } 50% { clip-path: polygon(0 8%, 23% 16%, 45% 9%, 72% 17%, 100% 10%, 100% 100%, 0 100%); } }
@keyframes rise { from { transform: translateY(110vh) scale(.6); opacity: 0; } 15% { opacity: .9; } to { transform: translateY(-20vh) scale(1.2); opacity: 0; } }

@media (max-width: 760px) {
  .token-nav { right: auto; left: 3vw; top: auto; bottom: 2vh; transform: none; grid-template-columns: repeat(5, 48px); }
  .token { width: 48px; height: 48px; font-size: .75rem; box-shadow: 3px 4px 0 var(--cherry); }
  .scene { padding: 6vh 5vw; }
  .sign-machine { left: 10vw; top: 22vh; width: 78vw; }
  .vending-door, .neon-arrow { display: none; }
  .menu-board { width: 86vw; grid-template-columns: 1fr; gap: 14px; }
  .small-card { grid-column: auto; margin-left: 0; }
  .booth-shell { width: 90vw; padding: 24px; }
  .receipt { position: static; margin-bottom: 15px; }
  .bottle-row { left: 4vw; right: 4vw; bottom: 28vh; }
  .bottle { width: 78px; height: 220px; }
}