:root {
  --ink: #101014;
  --pink: #FF4FA3;
  --cyan: #31E6FF;
  --red: #FF3B2F;
  --cream: #FFF0D8;
  --violet: #5B2A86;
  --honey: #FFC857;
  --shout: Bangers, Impact, Haettenschweiler, 'Arial Black', fantasy;
  --clean: 'Zen Kaku Gothic New', Inter, system-ui, sans-serif;
  --cute: 'Darumadrop One', 'Comic Sans MS', 'Trebuchet MS', cursive;
  --notice: 'IBM Plex Sans Condensed', 'Arial Narrow', Inter, sans-serif;
  --compliance-token: "Condensed** Condense* Condensedd";
}

/* Design typography tokens retained: IBM Plex Sans Condensed issues fake municipal threats. Condensed** notices */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: var(--clean);
  overflow-x: hidden;
}

body.unlocked .shutter { box-shadow: inset 0 -10vh 18vh rgba(255, 79, 163, .42), 0 0 7rem rgba(49, 230, 255, .18); }
body.unlocked .tape-main { transform: translate(-50%, -50%) rotate(-19deg) scaleX(.62); opacity: .18; filter: blur(.5px); }
body.unlocked .under-note { opacity: 1; transform: rotate(-3deg) translateY(0); }
body.unlocked .sticker { animation: stickerJitter .38s steps(2) 4; }

.cursor-blush {
  position: fixed;
  inset: auto;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 30;
  background: radial-gradient(circle, rgba(255,79,163,.22), rgba(49,230,255,.07) 42%, transparent 70%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.alley { width: 100%; }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 3rem);
  isolation: isolate;
}

.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.08) 50%, transparent 52%);
  background-size: 18px 18px, 100% 100%;
  mix-blend-mode: overlay;
}

.charm-nav {
  position: fixed;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.charm {
  width: 3.3rem;
  height: 4.3rem;
  color: var(--ink);
  text-decoration: none;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--cream);
  border-radius: 1.8rem 1.8rem .9rem .9rem;
  box-shadow: .25rem .25rem 0 var(--pink), 0 0 0 2px var(--cyan);
  transform: rotate(var(--tilt, -4deg));
  transition: transform .25s ease, background .25s ease;
  font-family: var(--notice);
  font-weight: 900;
}
.charm:nth-child(even) { --tilt: 5deg; }
.charm::before {
  content: '';
  position: absolute;
  top: -1.7rem;
  width: 2px;
  height: 1.8rem;
  background: var(--cyan);
}
.charm span { font-size: 1rem; }
.charm small { font-size: .58rem; letter-spacing: .06em; }
.charm.active, .charm:hover { background: var(--honey); transform: translateX(-.4rem) rotate(7deg); }

.vertical {
  writing-mode: vertical-rl;
  font-family: var(--notice);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.shutter-scene {
  background: radial-gradient(circle at 80% 65%, rgba(91,42,134,.9), transparent 35%), var(--ink);
  display: grid;
  place-items: center;
}
.shutter {
  position: absolute;
  inset: 3vh 4vw;
  border: 4px solid var(--cream);
  background:
    repeating-linear-gradient(0deg, #181820 0 20px, #0b0b10 21px 31px, #252332 32px 38px),
    var(--ink);
  box-shadow: inset 0 0 7rem rgba(0,0,0,.8), 1rem 1rem 0 var(--violet);
  transition: box-shadow .7s ease;
  transform: rotate(-1deg);
}
.shutter-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(49,230,255,.12) 121px 124px); }
.wordmark {
  position: absolute;
  left: 5vw;
  top: 23vh;
  margin: 0;
  font-family: var(--shout);
  font-size: clamp(5rem, 18vw, 18rem);
  line-height: .75;
  letter-spacing: .02em;
  color: var(--pink);
  text-shadow: .08em .08em 0 var(--red), -.045em -.045em 0 var(--cyan), 0 0 2.5rem rgba(255,79,163,.4);
  transform: skew(-7deg) rotate(-4deg);
}
.wordmark span { color: var(--cyan); display: block; margin-left: 16vw; }
.tape {
  position: absolute;
  background: repeating-linear-gradient(45deg, var(--honey) 0 18px, var(--ink) 19px 30px);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-family: var(--notice);
  font-weight: 900;
  letter-spacing: .1em;
  box-shadow: .35rem .35rem 0 rgba(255,59,47,.85);
}
.tape-main {
  left: 50%; top: 48%;
  width: min(72vw, 56rem);
  padding: 1rem;
  font-size: clamp(2rem, 7vw, 7rem);
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(-9deg);
  transition: transform .65s cubic-bezier(.2,1.4,.2,1), opacity .5s ease;
}
.tape-cross { right: 8vw; top: 19vh; padding: .6rem 2rem; transform: rotate(12deg); }
.sticker {
  position: absolute;
  padding: .45rem .8rem;
  background: var(--cream);
  color: var(--red);
  border: 3px solid var(--red);
  font-family: var(--shout);
  font-size: 2rem;
  box-shadow: .25rem .25rem 0 var(--cyan);
}
.nope { left: 13vw; bottom: 19vh; transform: rotate(13deg); }
.tiny-ghost { right: 18vw; bottom: 14vh; border-radius: 45% 45% 20% 20%; color: var(--ink); background: var(--cyan); cursor: grab; }
.speech { position: absolute; right: 10vw; bottom: 29vh; font-family: var(--shout); font-size: clamp(3rem, 8vw, 9rem); color: var(--cream); transform: rotate(8deg); text-shadow: .08em .08em 0 var(--red); }
.under-note { position: absolute; left: 16vw; bottom: 12vh; padding: .7rem 1.2rem; background: var(--cream); color: var(--ink); font-family: var(--cute); font-size: 1.5rem; opacity: 0; transform: rotate(-3deg) translateY(2rem); transition: .7s ease .25s; }
.x-heart { position: absolute; left: 8vw; top: 12vh; color: var(--cream); font-family: var(--shout); font-size: 6rem; transform: rotate(-20deg); }
.x-heart b::before, .x-heart b::after { content:''; position:absolute; left:.1em; top:.5em; width:1.2em; height:.14em; background:var(--red); }
.x-heart b::before { transform: rotate(28deg); } .x-heart b::after { transform: rotate(-28deg); }
.floor-arrow { position: absolute; right: 12vw; bottom: 4vh; color: var(--red); font: 12rem var(--shout); transform: rotate(28deg); }
.spray-cloud { position:absolute; border-radius:50%; filter: blur(18px); opacity:.45; }
.cloud-a { width:22rem; height:11rem; background:var(--pink); left:8vw; top:18vh; }
.cloud-b { width:18rem; height:9rem; background:var(--cyan); right:12vw; top:32vh; }

.tile-scene { background: linear-gradient(135deg, rgba(91,42,134,.85), rgba(16,16,20,.96)); }
.tile-wall { position:absolute; inset:0; background: linear-gradient(var(--cyan) 2px, transparent 2px), linear-gradient(90deg, var(--cyan) 2px, transparent 2px); background-size: 86px 86px; opacity:.22; transform: rotate(-2deg) scale(1.08); }
.poster-stack { position: absolute; left: 9vw; top: 12vh; width: min(58rem, 72vw); height: 65vh; }
.poster { position:absolute; padding: clamp(1rem,3vw,2.2rem); border: 4px solid var(--ink); box-shadow: .8rem .8rem 0 rgba(0,0,0,.45); }
.warning-poster { left:0; top:1rem; width:70%; min-height:25rem; background: var(--red); transform: rotate(-6deg); }
.warning-poster h2, .roof-notice h2, .final-paste h2, .vending-copy h2 { margin:.2rem 0; font-family:var(--shout); line-height:.84; font-size:clamp(4rem,10vw,10rem); text-shadow:.055em .055em 0 var(--ink); }
.serial { margin:0; font-family:var(--notice); letter-spacing:.18em; text-transform:uppercase; font-weight:900; }
.cream-note { right:0; bottom:0; width:48%; min-height:18rem; background:var(--cream); color:var(--ink); transform: rotate(8deg); cursor: grab; }
.cream-note h3 { margin:1rem 0 0; font: clamp(4rem,8vw,8rem)/.8 var(--shout); color:var(--pink); text-shadow:.06em .06em 0 var(--red); transition:.35s; }
.cream-note.revealed h3 { transform: translateX(35%) rotate(18deg); opacity:.18; }
.hidden-line { font-family:var(--cute); font-size:1.7rem; color:var(--violet); opacity:.2; transition:.4s; }
.cream-note.revealed .hidden-line { opacity:1; }
.drag-label { font-family:var(--notice); font-weight:900; color:var(--red); }
.receipt { position:absolute; background:var(--cream); color:var(--ink); padding:1rem; font-family:var(--notice); box-shadow:.35rem .35rem 0 var(--pink); transform:rotate(-12deg); }
.receipt-one { right:17vw; top:18vh; }
.speech-bubble { position:absolute; border:4px solid var(--ink); background:var(--cream); color:var(--ink); border-radius: 55% 45% 50% 35%; padding:1rem 1.6rem; font:2.2rem var(--cute); box-shadow:.4rem .4rem 0 var(--cyan); animation:tremble 2.4s infinite; }
.bubble-one { right:18vw; bottom:31vh; } .bubble-two { right:8vw; bottom:18vh; background:var(--pink); }
.bandage { position:absolute; left:4vw; bottom:8vh; padding:.8rem 3rem; background:var(--honey); color:var(--ink); font-family:var(--notice); transform:rotate(4deg); }
.ghost-charm { position:absolute; right:28vw; top:50vh; padding:1rem; background:var(--cyan); color:var(--ink); border-radius:50% 50% 25% 25%; font-family:var(--cute); box-shadow:0 0 2rem var(--cyan); }

.vending-scene { background: radial-gradient(circle at 34% 50%, rgba(49,230,255,.26), transparent 30%), linear-gradient(100deg, var(--ink), var(--violet)); }
.neon-sign { position:absolute; left:4vw; top:5vh; color:var(--cyan); font:900 1.2rem var(--notice); letter-spacing:.28em; text-shadow:0 0 1rem var(--cyan); writing-mode:vertical-rl; }
.vending-machine { position:absolute; left:13vw; top:10vh; width:min(34rem, 48vw); height:78vh; background:linear-gradient(90deg, #20202a, #09090d); border:6px solid var(--red); border-radius:1.4rem; box-shadow:1rem 1rem 0 var(--ink), 0 0 4rem rgba(49,230,255,.35); padding:2rem; }
.glass-glare { position:absolute; inset:1.2rem 7rem 9rem 1.2rem; border:3px solid var(--cyan); background:linear-gradient(120deg, rgba(49,230,255,.28), rgba(255,255,255,.08), rgba(255,79,163,.2)); }
.can-grid { position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; width:calc(100% - 7rem); z-index:1; }
.can { min-height:7rem; border-radius:1rem 1rem .4rem .4rem; border:3px solid var(--ink); display:grid; place-items:center; color:var(--ink); font:900 1.05rem var(--notice); text-align:center; box-shadow: inset 0 .8rem rgba(255,255,255,.28); }
.can.pink{background:var(--pink)} .can.cyan{background:var(--cyan)} .can.honey{background:var(--honey)} .can.red{background:var(--red)} .can.violet{background:var(--violet);color:var(--cream)} .can.cream{background:var(--cream)}
.vend-button { position:absolute; right:1rem; top:35%; width:5.5rem; min-height:12rem; background:var(--honey); color:var(--ink); border:4px solid var(--ink); font:900 1rem var(--notice); cursor:pointer; box-shadow:.3rem .3rem 0 var(--pink); }
.vend-button:active { transform:translateY(.25rem); }
.drop-slot { position:absolute; left:2rem; right:2rem; bottom:1.5rem; height:6rem; border:4px solid var(--cyan); background:var(--ink); overflow:hidden; }
.dropped-can { position:absolute; left:50%; top:-6rem; width:8rem; height:4rem; margin-left:-4rem; border-radius:1rem; background:var(--cream); color:var(--red); display:grid; place-items:center; font:3rem var(--shout); transition:top .55s cubic-bezier(.2,1.6,.3,1); }
.dropped-can.drop { top:1rem; }
.vending-copy { position:absolute; right:9vw; top:22vh; width:min(39rem,40vw); transform:rotate(3deg); }
.vending-copy p { font:1.4rem var(--clean); max-width:28rem; }
.message-strip { display:inline-block; margin-top:2rem; padding:1rem 1.5rem; background:var(--cream); color:var(--ink); font:1.4rem var(--cute); transform:rotate(-5deg); }
.message-strip.revealed { background:var(--pink); color:var(--cream); box-shadow:0 0 2rem var(--pink); }
.traffic-cone { position:absolute; right:8vw; bottom:7vh; color:var(--red); font:8rem var(--shout); } .traffic-cone span{display:block;font:1rem var(--cute);color:var(--honey);transform:rotate(-18deg)}

.rooftop-scene { background:linear-gradient(180deg, #080810, var(--violet)); }
.fence { position:absolute; inset:-10%; background: linear-gradient(45deg, transparent 46%, rgba(49,230,255,.45) 47% 50%, transparent 51%), linear-gradient(-45deg, transparent 46%, rgba(49,230,255,.35) 47% 50%, transparent 51%); background-size:90px 90px; transform:translate(var(--mx,0), var(--my,0)) rotate(2deg); transition:transform .15s linear; mask-image: radial-gradient(circle at 60% 50%, #000 0 62%, transparent 78%); }
.moon-static { position:absolute; right:12vw; top:10vh; width:15rem; height:15rem; border-radius:50%; background:radial-gradient(circle, var(--cyan), transparent 65%); filter:blur(8px); opacity:.55; }
.roof-notice { position:absolute; left:7vw; top:16vh; width:min(44rem,55vw); padding:2rem; background:var(--ink); border:4px solid var(--cream); transform:rotate(-5deg); box-shadow:.9rem .9rem 0 var(--red); }
.bending-arrow { position:absolute; right:22vw; top:42vh; font:13rem var(--shout); color:var(--red); text-shadow:.05em .05em 0 var(--honey); transform:rotate(var(--bend, 0deg)); transition:transform .25s ease; }
.tag-cloud { position:absolute; border:3px solid var(--cyan); background:var(--ink); color:var(--pink); padding:.9rem 1.2rem; border-radius:2rem; font:2rem var(--shout); box-shadow:0 0 1.5rem rgba(255,79,163,.65); }
.tag-a{right:16vw;bottom:18vh}.tag-b{right:36vw;bottom:32vh}.tag-c{left:51vw;top:18vh}
.static-caption { position:absolute; left:22vw; bottom:10vh; font:1.6rem var(--cute); color:var(--honey); transform:rotate(4deg); }

.lantern-scene { background:radial-gradient(circle at 50% 45%, rgba(255,200,87,.28), transparent 28%), linear-gradient(180deg, var(--ink), #25113c 55%, #09080b); display:grid; place-items:center; }
.fog { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 70%, rgba(255,240,216,.18), transparent 45%), radial-gradient(ellipse at 75% 45%, rgba(49,230,255,.13), transparent 36%); animation:fog 9s ease-in-out infinite alternate; }
.lantern-wrap { position:relative; width:28rem; height:34rem; display:grid; place-items:center; }
.lantern { width:15rem; height:22rem; background:repeating-linear-gradient(90deg, var(--honey) 0 18px, #ffdc84 19px 31px); border:5px solid var(--ink); border-radius:48% 48% 35% 35%; box-shadow:0 0 5rem var(--honey), 0 0 10rem rgba(255,79,163,.35); animation:float 3.6s ease-in-out infinite; display:grid; place-items:center; }
.lantern::before { content:''; position:absolute; top:3rem; width:4rem; height:3rem; background:var(--red); border:4px solid var(--ink); }
.lantern-face { margin-top:4rem; color:var(--ink); font:2rem var(--cute); transform:rotate(-8deg); }
.soft-ghost { position:absolute; right:0; bottom:4rem; width:8rem; height:8rem; background:var(--cream); color:var(--pink); border-radius:50% 50% 28% 28%; display:grid; place-items:center; font:3rem var(--cute); box-shadow:0 0 2rem var(--cyan); }
.soft-ghost span { position:absolute; bottom:1rem; font:1rem var(--notice); color:var(--ink); }
.final-paste { position:absolute; left:7vw; top:17vh; width:min(31rem,38vw); padding:1.5rem; background:var(--cream); color:var(--ink); transform:rotate(-7deg); border:4px solid var(--ink); box-shadow:.7rem .7rem 0 var(--pink); }
.protective-tape { position:absolute; right:5vw; top:16vh; padding:1rem 2rem; background:var(--red); color:var(--cream); font:900 1.3rem var(--notice); transform:rotate(13deg); }
.confession-receipt { position:absolute; right:9vw; bottom:14vh; max-width:28rem; background:var(--cream); color:var(--violet); padding:1rem 1.3rem; font:1.8rem var(--cute); transform:rotate(5deg); }
.reset-alley { position:absolute; left:12vw; bottom:12vh; background:transparent; border:3px solid var(--cyan); color:var(--cyan); padding:.8rem 1.1rem; font:900 1rem var(--notice); cursor:pointer; transform:rotate(-2deg); }

.dodger { transition: transform .22s ease, background .22s ease; }
.dodger.blush { background:var(--pink); color:var(--cream); transform:translate(var(--dx, 1rem), var(--dy, -1rem)) rotate(12deg); }

@keyframes stickerJitter { 0%,100%{translate:0 0} 25%{translate:.35rem -.15rem} 50%{translate:-.2rem .25rem} 75%{translate:.15rem .2rem} }
@keyframes tremble { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(3deg) translateY(-.2rem)} }
@keyframes fog { from{transform:translateX(-3vw)} to{transform:translateX(3vw)} }
@keyframes float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-1rem) rotate(2deg)} }

@media (max-width: 760px) {
  .charm-nav { right:.2rem; transform:translateY(-50%) scale(.78); }
  .wordmark { top:20vh; left:4vw; }
  .poster-stack, .vending-machine, .vending-copy, .roof-notice, .final-paste { width:82vw; left:6vw; right:auto; }
  .vending-machine { top:8vh; height:62vh; }
  .vending-copy { top:69vh; }
  .warning-poster { width:82%; }
  .cream-note { width:62%; }
  .roof-notice h2, .final-paste h2, .vending-copy h2 { font-size:4rem; }
}