:root {
  /* Design typography compliance: Interface and body body: body:: body::: body**** body:** "Inter" in weights 500-800. Use for inventory labels. Space Grotesk letters embossed into a cream neomorphic plaque. Space Grotesk" in weights 700-800. Use for the domain name. */
  --bin-black: #070807;
  --molded-cream: #EFE8D8;
  --respawn-lime: #B9FF00;
  --bottle-cyan: #00D9FF;
  --crate-orange: #FF6A00;
  --scrap-violet: #7D4DFF;
  --rubber-shadow: #B9B09D;
  --cream-light: #fff8e8;
  --dark-groove: #020302;
  --dark-lift: #151715;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--bin-black);
  background: var(--bin-black);
  font-family: "Inter", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 12%, rgba(185,255,0,.18), transparent 26%),
    radial-gradient(circle at 61% 72%, rgba(0,217,255,.13), transparent 32%),
    linear-gradient(90deg, transparent 0 94%, rgba(255,106,0,.16) 94% 100%);
  z-index: 0;
}

.soft-raised {
  background: var(--molded-cream);
  box-shadow: 10px 10px 24px #b9b09d, -10px -10px 24px #fff8e8;
  border: 4px solid var(--bin-black);
}

.soft-inset {
  background: var(--bin-black);
  box-shadow: inset 8px 8px 18px #020302, inset -8px -8px 18px #151715;
  border-right: 5px solid var(--molded-cream);
}

.cabinet-rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 116px;
  z-index: 10;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.rail-top { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.vertical-tag {
  writing-mode: vertical-rl;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: .16em;
  color: var(--respawn-lime);
  font-size: 20px;
}

.loop-counter {
  width: 82px;
  height: 72px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  text-align: center;
}

.loop-counter span { font-family: "Space Grotesk", sans-serif; font-size: 26px; line-height: 1; }
.loop-counter small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em; }

.token-stack { display: flex; flex-direction: column; gap: 14px; width: 100%; align-items: center; }

.token {
  width: 82px;
  min-height: 76px;
  border-radius: 24px;
  text-decoration: none;
  color: var(--bin-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  transform: translateX(-140px) rotate(-12deg) scale(.8);
  animation: tokenBounce .72s cubic-bezier(.2,1.55,.45,1) forwards;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.token:nth-child(1) { animation-delay: .25s; }
.token:nth-child(2) { animation-delay: .42s; }
.token:nth-child(3) { animation-delay: .59s; }
.token:nth-child(4) { animation-delay: .76s; }
.token:nth-child(5) { animation-delay: .93s; }

.token-icon { font-size: 24px; line-height: 1; }
.token.active {
  background: var(--respawn-lime);
  transform: rotate(4deg) scale(.96);
  box-shadow: inset 6px 6px 14px rgba(7,8,7,.3), inset -6px -6px 14px rgba(255,248,232,.55), 0 0 28px rgba(185,255,0,.45);
}

.cartridge-label {
  margin-top: auto;
  width: 86px;
  border-radius: 16px;
  padding: 10px 7px;
  text-align: center;
  transform: rotate(-2deg);
}
.cartridge-label b { font-family: "Bebas Neue", sans-serif; font-size: 22px; display: block; }
.cartridge-label span { font-size: 8px; font-weight: 800; line-height: 1.1; display: block; }

.pattern-gutter {
  position: fixed;
  left: 116px;
  top: 0;
  bottom: 0;
  width: 42px;
  z-index: 3;
  border-right: 4px solid var(--bin-black);
  background:
    linear-gradient(45deg, var(--bin-black) 25%, transparent 25% 75%, var(--bin-black) 75%),
    linear-gradient(45deg, var(--bin-black) 25%, var(--molded-cream) 25% 75%, var(--bin-black) 75%);
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px;
  transition: filter .25s ease;
}

.game-canvas { position: relative; z-index: 1; margin-left: 158px; }

.level-stage {
  min-height: 100vh;
  position: relative;
  padding: 70px clamp(30px, 5vw, 78px);
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(360px, 1.22fr);
  align-items: center;
  gap: 46px;
  overflow: hidden;
  background:
    radial-gradient(circle at 91% 18%, rgba(255,106,0,.24) 0 4px, transparent 5px 20px),
    radial-gradient(circle at 88% 52%, rgba(0,217,255,.22) 0 4px, transparent 5px 22px),
    repeating-linear-gradient(135deg, rgba(239,232,216,.06) 0 12px, transparent 12px 26px),
    var(--bin-black);
}

.level-stage::after {
  content: "";
  position: absolute;
  right: -70px;
  top: 12%;
  width: 190px;
  height: 76%;
  border: 5px solid var(--respawn-lime);
  border-radius: 90px;
  opacity: .42;
  transform: rotate(8deg);
}

.boot-stage { grid-template-columns: 1fr; place-items: center; text-align: center; }

.boot-plaque {
  width: min(860px, 88%);
  border-radius: 42px;
  padding: clamp(28px, 6vw, 70px);
  position: relative;
  transform: rotate(-1deg);
  animation: plaqueDrop .9s cubic-bezier(.2,1.5,.3,1) .1s both;
}

.stamp, .level-code {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: .14em;
  font-size: 22px;
  color: var(--crate-orange);
}

h1, h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  letter-spacing: -0.05em;
  margin: 0;
}

h1 { font-size: clamp(64px, 12vw, 164px); line-height: .82; text-shadow: 5px 5px 0 var(--rubber-shadow); }
h2 { color: var(--molded-cream); font-size: clamp(48px, 7vw, 112px); line-height: .83; max-width: 620px; }

.boot-controls { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.control-dot { width: 32px; height: 32px; border: 4px solid var(--bin-black); border-radius: 50%; display: inline-block; box-shadow: inset 4px 4px 8px rgba(7,8,7,.3); }
.lime { background: var(--respawn-lime); }
.cyan { background: var(--bottle-cyan); }
.orange { background: var(--crate-orange); }
.control-pill { background: var(--bin-black); color: var(--respawn-lime); border-radius: 999px; padding: 13px 18px; font-weight: 800; letter-spacing: .08em; }

.story-bite {
  color: var(--molded-cream);
  font-weight: 800;
  max-width: 520px;
  font-size: 20px;
  line-height: 1.35;
}

.level-copy { position: relative; z-index: 2; }
.level-copy p {
  color: var(--molded-cream);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
  max-width: 520px;
}

.transform-card {
  position: relative;
  z-index: 2;
  border-radius: 46px;
  min-height: 530px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform: rotate(1.5deg) scale(.94);
  transition: transform .6s cubic-bezier(.2,1.4,.3,1);
}

.level-stage.in-view .transform-card { transform: rotate(-1deg) scale(1); }

.transform-card::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 34px;
  background:
    radial-gradient(circle, rgba(7,8,7,.25) 0 4px, transparent 5px 24px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(185,255,0,.22) 18px 23px);
  opacity: .55;
}

.object-svg { width: min(92%, 640px); position: relative; z-index: 1; overflow: visible; }
.svg-line {
  fill: none;
  stroke: var(--bin-black);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.25s cubic-bezier(.2,.8,.2,1);
}
.level-stage.in-view .svg-line { stroke-dashoffset: 0; }
.svg-line.cyan { stroke: var(--bottle-cyan); }
.svg-line.orange { stroke: var(--crate-orange); }
.svg-line.violet { stroke: var(--scrap-violet); }
.svg-line.dark { stroke: var(--bin-black); stroke-width: 10; }
.svg-line.dash { stroke: var(--scrap-violet); stroke-width: 8; stroke-dasharray: 24 22; }

.svg-fill { opacity: 0; transform-origin: center; transition: opacity .25s ease .8s, transform .55s cubic-bezier(.2,1.7,.3,1) .8s; transform: scale(.2); stroke: var(--bin-black); stroke-width: 8; }
.level-stage.in-view .svg-fill { opacity: 1; transform: scale(1); }
.lime-fill { fill: var(--respawn-lime); }
.cyan-fill { fill: var(--bottle-cyan); }
.orange-fill { fill: var(--crate-orange); }

.sticker, .impact-burst {
  position: absolute;
  z-index: 3;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: .08em;
  color: var(--bin-black);
  border: 4px solid var(--bin-black);
  box-shadow: 7px 7px 0 var(--bin-black);
}
.sticker { top: 34px; left: 34px; padding: 9px 18px; border-radius: 14px; font-size: 28px; transform: rotate(-8deg); }
.sticker-lime { background: var(--respawn-lime); }
.sticker-orange { background: var(--crate-orange); }
.sticker-cyan { background: var(--bottle-cyan); }
.sticker-violet { background: var(--scrap-violet); color: var(--molded-cream); }
.impact-burst { right: 28px; bottom: 34px; background: var(--respawn-lime); border-radius: 999px; padding: 15px 22px; font-size: 32px; transform: rotate(7deg) scale(.2); opacity: 0; transition: transform .5s cubic-bezier(.2,1.7,.3,1) 1s, opacity .2s ease 1s; }
.level-stage.in-view .impact-burst { transform: rotate(7deg) scale(1); opacity: 1; }

.dashed-trail {
  position: absolute;
  width: 54vw;
  height: 36vh;
  border: 8px dashed var(--bottle-cyan);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 240px 0 0;
  left: 8%;
  top: 14%;
  opacity: .45;
}

@keyframes tokenBounce {
  0% { transform: translateX(-140px) rotate(-12deg) scale(.8); }
  70% { transform: translateX(8px) rotate(6deg) scale(1.08); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}

@keyframes plaqueDrop {
  from { opacity: 0; transform: translateY(60px) rotate(-5deg) scale(.88); }
  to { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); }
}

@media (max-width: 860px) {
  .cabinet-rail { width: 92px; padding: 12px 8px; }
  .pattern-gutter { left: 92px; width: 28px; }
  .game-canvas { margin-left: 120px; }
  .token { width: 66px; min-height: 64px; border-radius: 20px; font-size: 9px; }
  .cartridge-label, .loop-counter { width: 68px; }
  .level-stage { grid-template-columns: 1fr; padding: 48px 22px; gap: 24px; }
  .transform-card { min-height: 420px; }
  h1 { font-size: clamp(54px, 15vw, 96px); }
}

@media (max-width: 560px) {
  .cabinet-rail { position: fixed; width: 100%; height: 86px; right: 0; bottom: auto; flex-direction: row; border-right: 0; border-bottom: 5px solid var(--molded-cream); }
  .vertical-tag, .cartridge-label { display: none; }
  .loop-counter { height: 58px; width: 64px; }
  .token-stack { flex-direction: row; gap: 8px; justify-content: center; }
  .token { width: 54px; min-height: 54px; font-size: 0; }
  .token-icon { font-size: 20px; }
  .pattern-gutter { left: 0; top: 86px; width: 100%; height: 24px; border-right: 0; border-bottom: 4px solid var(--bin-black); }
  .game-canvas { margin-left: 0; padding-top: 110px; }
}