:root {
  /* Design parser tokens: Space Grotesk Grotesk* Groteskk Grotes coordinates */
  --night: #071923;
  --lacquer: #F6F0D8;
  --aqua: #62D2C6;
  --magenta: #FF3F9B;
  --amber: #FFB347;
  --bamboo: #244D3E;
  --purple: #271536;
  --chrome: #C8D7DE;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--lacquer);
  font-family: "Zen Maru Gothic", Inter, system-ui, sans-serif;
  overflow-x: hidden;
  cursor: crosshair;
}

a { color: inherit; text-decoration: none; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(246,240,216,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(255,63,155,.14) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 44%, rgba(200,215,222,.08) 45% 46%, transparent 47%);
  background-size: 9px 11px, 13px 15px, 80px 80px;
  mix-blend-mode: screen;
}

.paint-cursor {
  position: fixed;
  width: 34px;
  height: 34px;
  border: 2px solid var(--aqua);
  border-radius: 50%;
  z-index: 60;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(98,210,198,.55), inset 0 0 14px rgba(255,63,155,.45);
  opacity: .75;
}

.hud-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.hud-corner {
  position: absolute;
  padding: 12px 14px;
  border: 1px solid rgba(200,215,222,.45);
  background: rgba(7,25,35,.48);
  color: var(--chrome);
  font-size: 10px;
  line-height: 1.6;
  box-shadow: 0 0 22px rgba(98,210,198,.12);
  backdrop-filter: blur(5px);
}

.hud-corner strong { display: block; color: var(--lacquer); font-weight: 700; }
.hud-nw { top: 18px; left: 18px; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.hud-ne { top: 18px; right: 18px; }
.hud-sw { bottom: 18px; left: 18px; }
.hud-se { bottom: 18px; right: 18px; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }

.phase-meter { display: flex; gap: 5px; margin-top: 7px; }
.phase-meter i { width: 18px; height: 18px; border: 1px solid var(--chrome); border-radius: 50%; background: linear-gradient(90deg, var(--lacquer) 50%, transparent 51%); }
.phase-meter i:nth-child(2) { background: radial-gradient(circle at 70% 50%, var(--lacquer) 0 36%, transparent 38%); }
.phase-meter i:nth-child(3) { background: var(--lacquer); }
.phase-meter i:nth-child(4) { background: radial-gradient(circle at 30% 50%, var(--lacquer) 0 36%, transparent 38%); }
.phase-meter i:nth-child(5) { background: transparent; }

.mirror-tabs {
  position: absolute;
  top: 88px;
  right: 24px;
  display: grid;
  gap: 10px;
  pointer-events: auto;
}

.sticker-tab {
  display: block;
  padding: 9px 13px;
  background: var(--lacquer);
  color: var(--night);
  border: 2px solid var(--night);
  box-shadow: 5px 5px 0 var(--magenta), -2px -2px 0 var(--aqua);
  font-size: 11px;
  transform: rotate(-2deg);
  transition: transform .22s ease, box-shadow .22s ease;
}
.sticker-tab:nth-child(even) { transform: rotate(2deg); background: var(--amber); }
.sticker-tab:hover { box-shadow: 9px 3px 0 var(--magenta), -5px -3px 0 var(--aqua); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 9vw;
}

.scene::before {
  content: attr(data-scene);
  position: absolute;
  left: 4vw;
  top: 18vh;
  z-index: 3;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 12px;
  color: var(--aqua);
  border-left: 2px solid var(--magenta);
  padding-left: 10px;
  letter-spacing: .22em;
}

.coastal-gradient, .tile-wall, .bamboo-shadows, .dawn-wash {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.coastal-gradient { background: radial-gradient(circle at 73% 20%, rgba(98,210,198,.34), transparent 25%), linear-gradient(145deg, var(--night) 0%, var(--purple) 46%, var(--bamboo) 78%, var(--night) 100%); }
.shutter-lines { position: absolute; inset: 0; z-index: -2; background: repeating-linear-gradient(0deg, rgba(200,215,222,.08) 0 2px, transparent 2px 38px); }

.hero-tag, .final-tag {
  position: relative;
  z-index: 4;
  max-width: 900px;
  font-family: "Bangers", Impact, fantasy;
  font-size: clamp(88px, 17vw, 230px);
  line-height: .78;
  letter-spacing: .035em;
  color: var(--lacquer);
  transform: skew(-9deg) rotate(-3deg);
  text-shadow: 7px 7px 0 var(--magenta), -5px -5px 0 var(--aqua), 0 22px 38px rgba(0,0,0,.42);
  filter: drop-shadow(0 0 18px rgba(255,179,71,.22));
}
.hero-tag::after, .final-tag::after {
  content: attr(data-shadow);
  position: absolute;
  left: 18px;
  top: 16px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(200,215,222,.55);
  z-index: -1;
}

.wet-fragment {
  position: relative;
  z-index: 5;
  width: min(520px, 80vw);
  margin: 28px 0 0 7vw;
  padding: 18px 20px;
  background: rgba(7,25,35,.64);
  border: 1px solid rgba(98,210,198,.4);
  border-bottom: 5px solid var(--amber);
  color: var(--chrome);
  font-size: clamp(18px, 2.1vw, 27px);
  line-height: 1.35;
}

.diagonal-throw {
  position: absolute;
  z-index: 1;
  font-family: "Bangers", Impact, fantasy;
  color: rgba(255,63,155,.28);
  font-size: clamp(58px, 11vw, 150px);
  white-space: nowrap;
  transform: rotate(-17deg);
  -webkit-text-stroke: 1px rgba(246,240,216,.28);
}
.throw-one { left: -8vw; top: 13vh; }
.throw-two { right: -8vw; bottom: 16vh; color: rgba(98,210,198,.22); transform: rotate(13deg); }

.moon-lock {
  position: absolute;
  top: 21vh;
  right: 18vw;
  width: 170px;
  height: 170px;
  border: 1px dashed var(--chrome);
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 6;
  animation: orbit 12s linear infinite;
}
.moon-lock span { width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--lacquer), var(--chrome) 58%, transparent 60%); box-shadow: 0 0 38px rgba(246,240,216,.5); }
.moon-lock b { position: absolute; bottom: 18px; font: 700 10px "Space Grotesk"; color: var(--aqua); letter-spacing: .3em; }

.iso-cluster { position: absolute; z-index: 7; right: 9vw; bottom: 12vh; display: flex; gap: 34px; align-items: end; }
.iso-bottle, .iso-coaster, .iso-lantern, .iso-glass, .iso-stool, .bamboo-canister, .moon-rabbit { transition: transform .18s ease; transform-style: preserve-3d; }
.iso-bottle { width: 70px; height: 148px; background: linear-gradient(135deg, var(--aqua), var(--bamboo)); transform: skewY(-12deg); border: 3px solid var(--night); box-shadow: 12px 12px 0 rgba(255,63,155,.55); position: relative; }
.iso-bottle::before { content: ""; position: absolute; width: 34px; height: 38px; left: 18px; top: -35px; background: var(--chrome); border: 3px solid var(--night); }
.iso-bottle em { position: absolute; inset: 28px 12px; border: 2px solid var(--lacquer); background: rgba(246,240,216,.2); }
.iso-bottle span, .iso-coaster b, .iso-glass b, .iso-stool b, .bamboo-canister span { position: absolute; top: 105%; left: -20px; width: 130px; font: 700 10px "Space Grotesk"; color: var(--lacquer); letter-spacing: .12em; text-transform: uppercase; }
.iso-coaster { width: 100px; height: 60px; background: var(--purple); transform: skewX(-24deg) rotate(-8deg); border-radius: 50%; border: 3px solid var(--aqua); position: relative; box-shadow: 10px 10px 0 rgba(0,0,0,.34); }
.iso-coaster span { position: absolute; inset: 13px 27px; border-radius: 50%; background: var(--lacquer); }
.iso-lantern { width: 76px; height: 96px; background: radial-gradient(circle, var(--amber), #ff7e3f); color: var(--night); display: grid; place-items: center; font-size: 42px; border: 4px solid var(--night); transform: rotate(8deg) skewY(-8deg); box-shadow: 0 0 55px rgba(255,179,71,.6); }

.leaf-field i, .leaf-stencils i { position: absolute; width: 74px; height: 22px; border-radius: 100% 0 100% 0; background: rgba(98,210,198,.38); transform: rotate(var(--r)); filter: blur(.2px); }
.leaf-field i:nth-child(1) { --r: -23deg; left: 12vw; bottom: 12vh; }
.leaf-field i:nth-child(2) { --r: 38deg; left: 42vw; top: 18vh; background: rgba(255,63,155,.28); }
.leaf-field i:nth-child(3) { --r: 79deg; right: 9vw; top: 44vh; }
.leaf-field i:nth-child(4) { --r: -64deg; left: 58vw; bottom: 17vh; background: rgba(255,179,71,.38); }
.leaf-field i:nth-child(5) { --r: 17deg; left: 7vw; top: 56vh; }
.leaf-field i:nth-child(6) { --r: -7deg; right: 25vw; bottom: 7vh; background: rgba(246,240,216,.24); }

.hud-pin {
  position: absolute;
  z-index: 8;
  padding: 8px 11px;
  border: 1px solid var(--aqua);
  background: rgba(7,25,35,.78);
  color: var(--lacquer);
  font: 700 10px "Space Grotesk";
  text-transform: uppercase;
  letter-spacing: .14em;
  box-shadow: 0 0 0 3px rgba(255,63,155,.18);
}
.pin-a { left: 54vw; top: 32vh; } .pin-b { left: 18vw; bottom: 16vh; } .pin-c { right: 10vw; top: 27vh; } .pin-d { left: 9vw; bottom: 19vh; } .pin-e { right: 13vw; bottom: 27vh; }

.tile-wall { background: linear-gradient(155deg, var(--bamboo), var(--night) 45%, var(--purple)), repeating-linear-gradient(90deg, rgba(98,210,198,.2) 0 2px, transparent 2px 82px), repeating-linear-gradient(0deg, rgba(200,215,222,.13) 0 2px, transparent 2px 82px); }
.poster-slab, .backroom-copy, .last-poster { position: relative; z-index: 5; width: min(590px, 82vw); padding: 34px; background: rgba(246,240,216,.91); color: var(--night); border: 4px solid var(--night); box-shadow: 16px 16px 0 var(--magenta), -8px -8px 0 var(--aqua); transform: rotate(-2deg); }
.poster-slab h2, .backroom-copy h2, .last-poster h2 { margin: 10px 0 12px; font-family: "Bangers"; font-size: clamp(42px, 6vw, 76px); line-height: .88; color: var(--purple); letter-spacing: .03em; }
.poster-slab p, .backroom-copy p, .last-poster p { font-size: 19px; line-height: 1.45; margin: 0; }
.micro-label { font-family: "Space Grotesk"; font-weight: 700; font-size: 12px; letter-spacing: .22em; color: var(--magenta); text-transform: uppercase; }
.counter-line { position: absolute; left: 0; right: 0; bottom: 19vh; height: 15vh; background: linear-gradient(180deg, var(--amber), #9a5b24); transform: skewY(-4deg); border-top: 6px solid var(--night); border-bottom: 6px solid var(--night); box-shadow: 0 -20px 60px rgba(255,179,71,.22); }
.counter-icons { position: absolute; z-index: 7; right: 13vw; bottom: 29vh; display: flex; gap: 38px; align-items: end; }
.iso-glass { width: 96px; height: 110px; position: relative; border: 4px solid var(--chrome); background: linear-gradient(135deg, rgba(98,210,198,.26), rgba(255,179,71,.55)); clip-path: polygon(12% 0, 88% 0, 70% 78%, 94% 100%, 6% 100%, 30% 78%); }
.iso-glass span { position: absolute; width: 38px; height: 18px; right: -16px; top: 18px; border-radius: 50%; background: var(--lacquer); box-shadow: inset -15px 0 0 var(--amber); }
.iso-stool { width: 100px; height: 84px; border-radius: 50% 50% 16px 16px; background: var(--magenta); border: 4px solid var(--night); box-shadow: 11px 15px 0 var(--bamboo); position: relative; }
.iso-stool::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -48px; height: 48px; background: repeating-linear-gradient(90deg, var(--chrome) 0 7px, transparent 7px 24px); }
.tall { height: 178px; }
.tag-burst { position: absolute; right: 3vw; top: 44vh; font-family: "Bangers"; font-size: clamp(58px, 10vw, 134px); color: var(--magenta); transform: rotate(9deg); text-shadow: 4px 4px 0 var(--night), 8px 8px 0 var(--amber); }
.chalk-moons { position: absolute; left: 12vw; bottom: 10vh; color: var(--chrome); font: 700 24px "Space Grotesk"; letter-spacing: .4em; }

.bamboo-backroom { background: var(--purple); }
.bamboo-shadows { background: radial-gradient(circle at 20% 20%, rgba(255,63,155,.24), transparent 28%), linear-gradient(120deg, var(--purple), var(--night) 58%, var(--bamboo)); }
.bamboo-shadows::after { content: ""; position: absolute; inset: -20%; background: repeating-linear-gradient(104deg, transparent 0 42px, rgba(36,77,62,.75) 43px 56px, transparent 57px 96px); transform: rotate(-7deg); }
.spray-halo { position: absolute; right: 9vw; top: 19vh; width: 42vw; height: 42vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,63,155,.32), rgba(98,210,198,.14) 38%, transparent 67%); filter: blur(10px); }
.backroom-copy { margin-left: auto; background: rgba(7,25,35,.74); color: var(--lacquer); border-color: var(--aqua); box-shadow: -16px 16px 0 var(--amber), 8px -8px 0 var(--magenta); transform: rotate(2deg); }
.backroom-copy h2 { color: var(--lacquer); text-shadow: 4px 4px 0 var(--magenta); }
.bamboo-canister { position: absolute; left: 14vw; bottom: 16vh; width: 150px; height: 190px; background: linear-gradient(135deg, var(--bamboo), var(--aqua)); border: 5px solid var(--night); transform: skewY(-10deg); box-shadow: 18px 18px 0 rgba(255,63,155,.5); z-index: 6; }
.can-top { position: absolute; left: -8px; right: -8px; top: -24px; height: 44px; border-radius: 50%; background: var(--chrome); border: 5px solid var(--night); }
.marker { position: absolute; width: 18px; height: 112px; bottom: 118px; border: 3px solid var(--night); background: var(--amber); }
.m1 { left: 31px; transform: rotate(-10deg); } .m2 { left: 63px; height: 132px; background: var(--magenta); } .m3 { right: 28px; transform: rotate(13deg); background: var(--lacquer); }
.leaf-stencils i:nth-child(1) { left: 36vw; top: 31vh; --r: -22deg; background: var(--magenta); }
.leaf-stencils i:nth-child(2) { left: 30vw; bottom: 24vh; --r: 28deg; background: var(--aqua); }
.leaf-stencils i:nth-child(3) { right: 18vw; top: 18vh; --r: 70deg; background: var(--amber); }
.leaf-stencils i:nth-child(4) { right: 7vw; bottom: 24vh; --r: -50deg; background: var(--chrome); }
.leaf-stencils i:nth-child(5) { left: 51vw; bottom: 12vh; --r: 12deg; background: var(--lacquer); }
.peeling-sticker { position: absolute; right: 16vw; bottom: 14vh; z-index: 7; padding: 22px 28px; background: var(--amber); color: var(--night); font: 700 22px "Space Grotesk"; text-transform: uppercase; transform: rotate(-12deg); box-shadow: 8px 8px 0 var(--magenta); clip-path: polygon(0 0, 100% 0, 92% 74%, 73% 100%, 0 92%); }

.last-pour { background: var(--night); }
.dawn-wash { background: radial-gradient(circle at 86% 8%, rgba(255,179,71,.55), transparent 28%), linear-gradient(165deg, var(--night), var(--bamboo) 47%, var(--aqua) 120%); }
.last-poster { margin-top: 10vh; background: rgba(246,240,216,.88); box-shadow: 14px 14px 0 var(--aqua), -8px -8px 0 var(--magenta); }
.dawn-sign { position: absolute; right: 13vw; top: 19vh; z-index: 6; padding: 20px 28px; background: var(--night); color: var(--amber); border: 3px solid var(--amber); font: 700 18px "Space Grotesk"; text-transform: uppercase; letter-spacing: .16em; transform: rotate(7deg); box-shadow: 0 0 42px rgba(255,179,71,.4); }
.moon-rabbit { position: absolute; right: 29vw; bottom: 24vh; z-index: 6; width: 90px; height: 88px; background: var(--lacquer); border-radius: 48% 48% 38% 38%; box-shadow: 10px 10px 0 var(--magenta); }
.moon-rabbit span { position: absolute; width: 24px; height: 64px; top: -43px; background: var(--lacquer); border-radius: 50%; }
.moon-rabbit span:first-child { left: 18px; transform: rotate(-12deg); } .moon-rabbit span:nth-child(2) { right: 16px; transform: rotate(18deg); }
.moon-rabbit b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--night); font: 700 46px "Bangers"; }
.final-tag { position: absolute; right: 7vw; bottom: 8vh; font-size: clamp(78px, 14vw, 170px); color: var(--amber); }
.tide-scribbles { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; background: repeating-radial-gradient(ellipse at 50% 100%, rgba(246,240,216,.18) 0 2px, transparent 3px 28px); opacity: .7; }

.magnetic.is-hovering { filter: saturate(1.25) drop-shadow(0 0 16px rgba(255,63,155,.44)); }
.smear { animation: smear .38s ease; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes smear { 0% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 12px 1px 0 rgba(255,63,155,.55), -10px -1px 0 rgba(98,210,198,.55); } 100% { text-shadow: inherit; } }

@media (max-width: 760px) {
  .scene { padding: 116px 24px; }
  .hud-corner { display: none; }
  .mirror-tabs { top: 14px; right: 12px; grid-template-columns: repeat(2, auto); }
  .sticker-tab { font-size: 9px; padding: 8px 9px; }
  .hero-tag { margin-top: 12vh; }
  .wet-fragment { margin-left: 0; width: 100%; }
  .iso-cluster, .counter-icons { right: 20px; bottom: 8vh; transform: scale(.7); transform-origin: bottom right; }
  .poster-slab, .backroom-copy, .last-poster { width: 100%; padding: 24px; }
  .tag-burst { top: auto; bottom: 12vh; right: 4vw; }
  .bamboo-canister { left: 32px; transform: scale(.75) skewY(-10deg); }
  .final-tag { left: 20px; right: auto; }
}