:root {
  --charcoal: #17151F;
  --lcd: #B8F34A;
  --violet: #6C3CFF;
  --coral: #FF5C7A;
  --yellow: #FFE156;
  --cyan: #46E5FF;
  --cream: #FFF0C9;
  --pixel-font: "Courier New", "Lucida Console", monospace;
  --round-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 10px 10px 0 #17151F;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: x mandatory; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--charcoal);
  font-family: var(--round-font);
  overflow-y: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }

.static-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .19;
  background-image: linear-gradient(rgba(255,255,255,.08) 50%, transparent 50%), radial-gradient(var(--cyan) 1px, transparent 1px), radial-gradient(var(--coral) 1px, transparent 1px);
  background-size: 100% 4px, 17px 17px, 29px 29px;
  mix-blend-mode: screen;
}
.screen-tear {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  transform: translateX(-120%);
  background: repeating-linear-gradient(90deg, transparent 0 18px, var(--cyan) 18px 28px, var(--cream) 28px 44px, var(--coral) 44px 54px, transparent 54px 72px);
  clip-path: polygon(0 0, 78% 0, 66% 12%, 92% 24%, 70% 38%, 88% 54%, 66% 68%, 82% 80%, 65% 100%, 0 100%);
}
.screen-tear.rip { animation: rip .55s steps(5) both; }

.rubber-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border: 5px solid var(--charcoal);
  border-radius: 999px;
  background: rgba(255,240,201,.82);
  box-shadow: 0 8px 0 var(--charcoal);
}
.nav-dot {
  width: 58px;
  height: 42px;
  border: 4px solid var(--charcoal);
  border-radius: 20px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--cream);
  background: var(--violet);
  font: 800 10px/1 var(--pixel-font);
  box-shadow: 4px 4px 0 var(--charcoal);
}
.nav-dot.active { background: var(--lcd); color: var(--charcoal); transform: translateY(4px); box-shadow: 1px 1px 0 var(--charcoal); }

.level-strip {
  width: 600vw;
  height: 100vh;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}
.level {
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  scroll-snap-align: start;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 56px);
  overflow: hidden;
}
.level::before {
  content: attr(data-level);
  position: absolute;
  left: 22px;
  top: 18px;
  z-index: 4;
  color: var(--charcoal);
  background: var(--yellow);
  border: 4px solid var(--charcoal);
  padding: 10px 14px;
  box-shadow: 5px 5px 0 var(--charcoal);
  font: 900 12px/1 var(--pixel-font);
  transform: rotate(-3deg);
}

h1, h2, .level-label, .trophy strong {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  letter-spacing: -.06em;
  line-height: .9;
}
h1 { margin: 0; font-size: clamp(2rem, 7vw, 6.7rem); text-shadow: 4px 0 0 rgba(70,229,255,.55), -4px 0 0 rgba(255,92,122,.5); }
h2 { margin: 0; font-size: clamp(2.2rem, 6vw, 6rem); }

.boot-level { background: radial-gradient(circle at 20% 20%, rgba(108,60,255,.38), transparent 30%), var(--charcoal); }
.handheld {
  width: min(1180px, 94vw);
  height: min(760px, 88vh);
  position: relative;
  border: 12px solid #0b0a10;
  border-radius: 54px 54px 70px 70px;
  background: linear-gradient(135deg, rgba(255,240,201,.18), transparent 34%), rgba(23,21,31,.9);
  box-shadow: inset 0 0 0 12px rgba(255,240,201,.05), 18px 18px 0 #07060a;
}
.case-highlight { position: absolute; inset: 24px; border: 3px dashed rgba(70,229,255,.35); border-radius: 40px; }
.screw { position: absolute; width: 32px; height: 32px; border: 5px solid #07060a; background: var(--cream); border-radius: 50%; }
.screw::after { content: ""; position: absolute; inset: 12px -4px; height: 4px; background: #07060a; transform: rotate(45deg); }
.s1 { left: 28px; top: 28px; } .s2 { right: 28px; top: 28px; } .s3 { left: 28px; bottom: 28px; } .s4 { right: 28px; bottom: 28px; }
.lcd {
  position: absolute;
  left: 16%; right: 16%; top: 12%; bottom: 24%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  overflow: hidden;
  color: var(--charcoal);
  border: 10px solid #07060a;
  border-radius: 20px;
  background: var(--lcd);
  box-shadow: inset 0 0 0 9px rgba(23,21,31,.25), inset 0 0 34px rgba(23,21,31,.35);
}
.lcd.booted { animation: lcdBoot .9s steps(4) both; }
.scanlines { position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(23,21,31,.35) 7px 9px); }
.battery { position: absolute; right: 22px; top: 18px; width: 72px; height: 30px; border: 4px solid var(--charcoal); }
.battery::after { content: ""; position: absolute; right: -10px; top: 7px; width: 6px; height: 10px; background: var(--charcoal); }
.battery span { display: block; width: 23%; height: 100%; background: var(--coral); animation: blink .8s steps(2) infinite; }
.ghost-sprite { position: absolute; top: 36%; width: 78px; height: 96px; display: grid; place-items: center; border: 5px solid var(--charcoal); background: rgba(255,240,201,.55); font: 900 58px/1 var(--pixel-font); }
.sprite-left { left: 8%; animation: spriteSwap 1.6s steps(2) infinite; }
.sprite-right { right: 8%; animation: spriteSwap 1.6s steps(2) infinite reverse; }
.boot-code, .blink-prompt { position: relative; z-index: 2; font: 900 clamp(.72rem, 1.5vw, 1.1rem)/1.4 var(--pixel-font); }
.blink-prompt { border: 4px solid var(--charcoal); color: var(--charcoal); background: var(--yellow); padding: 14px 18px; box-shadow: 5px 5px 0 var(--charcoal); animation: blink 1s steps(2) infinite; }
.speaker { position: absolute; right: 8%; bottom: 9%; display: flex; gap: 8px; transform: rotate(-8deg); }
.speaker i { width: 12px; height: 68px; display: block; background: #07060a; border-radius: 12px; }
.dpad { position: absolute; left: 8%; bottom: 9%; width: 132px; height: 132px; }
.dpad::before, .dpad::after { content: ""; position: absolute; background: #07060a; border-radius: 14px; }
.dpad::before { left: 42px; top: 0; width: 48px; height: 132px; } .dpad::after { left: 0; top: 42px; width: 132px; height: 48px; }
.button-cluster { position: absolute; right: 21%; bottom: 9%; display: flex; gap: 20px; }
.button-cluster button { width: 74px; height: 74px; border: 5px solid #07060a; border-radius: 50%; background: var(--coral); box-shadow: 5px 5px 0 #07060a; font: 900 32px var(--pixel-font); }
.button-cluster button.pressed { transform: translateY(5px); box-shadow: 1px 1px 0 #07060a; background: var(--cyan); color: var(--charcoal); }
.sticker { position: absolute; left: 39%; bottom: 8%; max-width: 260px; padding: 12px; color: var(--charcoal); background: var(--cream); border: 4px solid var(--charcoal); font: 900 13px/1.1 var(--pixel-font); transform: rotate(4deg); }

.scramble-level { background: var(--violet); }
.lagoon-level { background: var(--cyan); }
.slot-level { background: var(--yellow); }
.boss-level { background: var(--coral); }
.win-level { background: var(--charcoal); }
.console-stage {
  position: relative;
  width: min(1180px, 93vw);
  height: min(740px, 86vh);
  color: var(--charcoal);
  border: 8px solid var(--charcoal);
  background: var(--cream);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.console-stage::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(45deg, var(--charcoal) 25%, transparent 25%), linear-gradient(-45deg, var(--charcoal) 25%, transparent 25%); background-size: 18px 18px; }
.level-label { position: absolute; left: 38px; top: 34px; z-index: 1; font-size: clamp(1.5rem, 4vw, 4.2rem); color: var(--violet); text-shadow: 4px 4px 0 var(--charcoal); }
.tile-map { position: absolute; left: 7%; right: 7%; top: 22%; bottom: 20%; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, 1fr); gap: 14px; transform: rotate(-2deg); }
.block { border: 6px solid var(--charcoal); box-shadow: 7px 7px 0 var(--charcoal); font: 900 clamp(2rem, 5vw, 5.4rem)/1 var(--pixel-font); transition: transform .45s steps(3), background .2s; }
.block:nth-child(odd) { transform: translateY(18px) rotate(-4deg); } .block:nth-child(even) { transform: translateY(-12px) rotate(5deg); }
.tile-map.solved .block { transform: translateY(0) rotate(0); }
.tall { grid-row: span 2; } .wide { grid-column: span 2; }
.violet { background: var(--violet); color: var(--cream); } .coral { background: var(--coral); color: var(--cream); } .green { background: var(--lcd); } .cyan { background: var(--cyan); } .yellow { background: var(--yellow); } .cream { background: var(--cream); }
.cartridge-tab, .mash-button, .insert-button, .boss-button, .jingle-button { position: absolute; z-index: 2; border: 6px solid var(--charcoal); background: var(--coral); color: var(--cream); padding: 16px 24px; box-shadow: 6px 6px 0 var(--charcoal); font: 900 16px/1 var(--pixel-font); }
.cartridge-tab { right: 8%; bottom: 9%; }
.speech-bubble { position: absolute; right: 7%; top: 18%; width: 330px; z-index: 2; padding: 20px; background: var(--cream); border: 5px solid var(--charcoal); box-shadow: 6px 6px 0 var(--charcoal); font: 800 18px/1.2 var(--pixel-font); transform: rotate(4deg); }
.wrong-buzz { position: absolute; z-index: 2; color: var(--coral); border: 5px solid var(--coral); padding: 8px 14px; font: 900 24px var(--pixel-font); opacity: .8; }
.buzz-a { left: 18%; bottom: 12%; transform: rotate(-13deg); } .buzz-b { right: 34%; top: 48%; transform: rotate(15deg); }

.rubber-pad { position: absolute; left: 9%; top: 24%; width: 270px; height: 270px; }
.mash-key { position: absolute; width: 94px; height: 94px; border: 6px solid var(--charcoal); background: var(--violet); color: var(--cream); box-shadow: 7px 7px 0 var(--charcoal); font: 900 34px var(--pixel-font); }
.mash-key.up { left: 88px; top: 0; } .mash-key.left { left: 0; top: 88px; } .mash-key.right { right: 0; top: 88px; } .mash-key.down { left: 88px; bottom: 0; }
.mash-key.hit { background: var(--lcd); color: var(--charcoal); transform: translate(5px, 5px); box-shadow: 2px 2px 0 var(--charcoal); }
.lagoon-lcd { position: absolute; left: 35%; right: 7%; top: 16%; bottom: 25%; overflow: hidden; border: 8px solid var(--charcoal); background: var(--lcd); box-shadow: inset 0 0 0 9px rgba(23,21,31,.25); }
.avatar-track { position: absolute; inset: 0; }
.p-avatar { position: absolute; top: 34%; width: 100px; height: 110px; display: grid; place-items: center; border: 6px solid var(--charcoal); background: var(--coral); color: var(--cream); font: 900 66px/1 var(--pixel-font); transition: transform .55s steps(4), left .55s steps(4); }
.p-avatar.one { left: 18%; } .p-avatar.two { left: 58%; background: var(--violet); }
.avatar-track.agree .p-avatar.one { left: 37%; transform: rotate(-8deg); } .avatar-track.agree .p-avatar.two { left: 47%; transform: rotate(8deg) scaleX(-1); }
.agreement { position: absolute; left: 10%; bottom: 10%; font: 900 20px var(--pixel-font); }
.crumbs i { position: absolute; width: 34px; height: 34px; background: var(--yellow); border: 4px solid var(--charcoal); animation: fall 2.2s steps(5) infinite; }
.crumbs i:nth-child(1){left:12%;animation-delay:.1s}.crumbs i:nth-child(2){left:28%;animation-delay:.4s}.crumbs i:nth-child(3){left:42%;animation-delay:.8s}.crumbs i:nth-child(4){left:55%;animation-delay:1.1s}.crumbs i:nth-child(5){left:70%;animation-delay:1.4s}.crumbs i:nth-child(6){left:84%;animation-delay:1.7s}
.mash-button { left: 44%; bottom: 10%; background: var(--yellow); color: var(--charcoal); }
.inventory { position: absolute; left: 8%; bottom: 10%; display: grid; gap: 8px; font: 900 13px var(--pixel-font); }
.inventory span { border: 4px solid var(--charcoal); padding: 9px 13px; background: var(--cream); }

.cartridge { position: absolute; left: 12%; top: 15%; width: 360px; height: 460px; border: 8px solid var(--charcoal); border-radius: 18px 18px 36px 36px; background: rgba(108,60,255,.78); box-shadow: 12px 12px 0 var(--charcoal); transition: transform .8s steps(5); }
.cartridge.inserted { transform: translateX(420px) rotate(90deg); }
.cart-label { position: absolute; left: 32px; right: 32px; top: 42px; height: 190px; border: 5px solid var(--charcoal); background: var(--cream); padding: 22px; font: 900 27px/1.25 var(--pixel-font); transform: rotate(-2deg); }
.cart-label b { color: var(--coral); animation: blink 1s steps(2) infinite; }
.contacts { position: absolute; left: 48px; right: 48px; bottom: 28px; display: flex; gap: 8px; }
.contacts i { flex: 1; height: 58px; background: var(--yellow); border: 4px solid var(--charcoal); }
.slot-mouth { position: absolute; right: 10%; top: 28%; width: 430px; height: 150px; border: 10px solid var(--charcoal); background: var(--charcoal); box-shadow: inset 0 0 0 18px rgba(70,229,255,.2), 9px 9px 0 var(--charcoal); }
.slot-mouth span { position: absolute; left: 22px; right: 22px; top: 48px; height: 32px; background: #07060a; border: 4px solid var(--cyan); }
.insert-button { right: 13%; bottom: 20%; background: var(--violet); }
.notebook { position: absolute; left: 10%; bottom: 10%; width: 440px; padding: 20px; border: 5px solid var(--charcoal); background: var(--cream); font: 900 20px/1.3 var(--pixel-font); transform: rotate(-4deg); }
.dip-switches { position: absolute; right: 16%; bottom: 10%; display: flex; gap: 14px; padding: 18px; border: 5px solid var(--charcoal); background: var(--cream); }
.dip-switches i { width: 26px; height: 70px; border: 4px solid var(--charcoal); background: linear-gradient(to bottom, var(--coral) 0 45%, var(--charcoal) 45% 55%, var(--lcd) 55% 100%); }

.boss-stage h2 { position: absolute; left: 7%; top: 9%; color: var(--yellow); text-shadow: 5px 5px 0 var(--charcoal); z-index: 2; }
.maze-gate { position: absolute; left: 8%; right: 8%; top: 31%; height: 190px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; z-index: 2; }
.gate-piece { border: 6px solid var(--charcoal); background: var(--cyan); color: var(--charcoal); box-shadow: 7px 7px 0 var(--charcoal); font: 900 clamp(2.4rem, 6vw, 6rem) var(--pixel-font); transition: transform .55s steps(4), background .2s; }
.gate-piece:nth-child(1){transform:translateY(40px) rotate(-9deg);background:var(--violet);color:var(--cream)}.gate-piece:nth-child(2){transform:translateY(-18px) rotate(7deg)}.gate-piece:nth-child(3){transform:translateY(24px) rotate(-3deg);background:var(--lcd)}.gate-piece:nth-child(4){transform:translateY(-36px) rotate(12deg);background:var(--yellow)}.gate-piece:nth-child(5){transform:translateY(30px) rotate(-14deg);background:var(--coral);color:var(--cream)}
.boss-stage.solved .gate-piece { transform: translateY(0) rotate(0); background: var(--lcd); color: var(--charcoal); }
.boss-button { left: 9%; bottom: 12%; background: var(--charcoal); }
.lcd-panel { position: absolute; right: 8%; bottom: 11%; width: 420px; padding: 20px; border: 6px solid var(--charcoal); background: var(--lcd); font: 900 20px/1.25 var(--pixel-font); }
.pixel-trophy { position: absolute; right: 11%; top: 11%; width: 170px; height: 150px; display: grid; place-items: center; border: 6px solid var(--charcoal); background: var(--yellow); font: 900 28px var(--pixel-font); clip-path: polygon(16% 0,84% 0,84% 45%,65% 45%,65% 70%,78% 70%,78% 100%,22% 100%,22% 70%,35% 70%,35% 45%,16% 45%); }

.final-lcd { position: absolute; inset: 7%; display: grid; place-items: center; align-content: center; gap: 16px; padding: 28px; color: var(--charcoal); border: 10px solid var(--charcoal); background: var(--lcd); box-shadow: inset 0 0 0 12px rgba(23,21,31,.22); text-align: center; }
.trophy { position: relative; width: min(530px, 76vw); height: 260px; }
.cup-left, .cup-right { position: absolute; top: 0; width: 175px; height: 155px; display: grid; place-items: center; border: 7px solid var(--charcoal); background: var(--violet); color: var(--cream); font: 900 92px/1 var(--pixel-font); }
.cup-left { left: 70px; border-radius: 34px 18px 70px 20px; transform: rotate(-5deg); }
.cup-right { right: 70px; border-radius: 18px 34px 20px 70px; transform: rotate(5deg) scaleX(-1); }
.cup-stem { position: absolute; left: 145px; right: 145px; top: 148px; height: 58px; display: grid; place-items: center; border: 7px solid var(--charcoal); background: var(--yellow); font: 900 23px var(--pixel-font); }
.trophy strong { position: absolute; left: 180px; right: 180px; bottom: 0; padding: 10px; color: var(--cream); background: var(--coral); border: 6px solid var(--charcoal); font-size: 24px; }
.win-stage h2 { color: var(--violet); text-shadow: 4px 4px 0 var(--charcoal); }
.win-stage p { max-width: 780px; margin: 0; font: 800 20px/1.35 var(--round-font); }
.jingle-button { position: static; color: var(--charcoal); background: var(--yellow); }
.win-stage.bounce .trophy { animation: jingle .75s steps(4) 2; }
.confetti-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; width: 18px; height: 18px; border: 3px solid var(--charcoal); animation: confetti 1.55s steps(8) forwards; }

@keyframes blink { 50% { opacity: .28; } }
@keyframes spriteSwap { 50% { transform: translateX(18px) translateY(-8px); } }
@keyframes lcdBoot { 0% { filter: brightness(0); transform: scaleY(.05); } 40% { filter: brightness(2); transform: scaleY(.75); } 100% { filter: none; transform: none; } }
@keyframes rip { 0% { transform: translateX(-120%); } 50% { transform: translateX(0); } 100% { transform: translateX(120%); } }
@keyframes fall { from { top: -20%; transform: rotate(0deg); } to { top: 106%; transform: rotate(360deg); } }
@keyframes jingle { 25% { transform: translateY(-18px) rotate(-2deg); } 50% { transform: translateY(8px) rotate(2deg); } 75% { transform: translateY(-10px) rotate(0deg); } }
@keyframes confetti { from { transform: translateY(-80px) rotate(0deg); opacity: 1; } to { transform: translateY(720px) rotate(540deg); opacity: 0; } }

@media (max-width: 850px) {
  .rubber-nav { transform: translateX(-50%) scale(.72); bottom: 6px; }
  .lcd { left: 7%; right: 7%; bottom: 33%; }
  .dpad, .speaker, .button-cluster { transform: scale(.75); transform-origin: center; }
  .tile-map { grid-template-columns: repeat(4, 1fr); top: 18%; bottom: 28%; }
  .speech-bubble, .lcd-panel, .notebook { width: 72vw; left: 8%; right: auto; }
  .lagoon-lcd { left: 8%; right: 8%; top: 11%; bottom: 34%; }
  .rubber-pad { transform: scale(.65); left: 3%; top: 54%; }
  .cartridge { transform: scale(.72); left: 2%; top: 12%; transform-origin: top left; }
  .cartridge.inserted { transform: scale(.72) translateX(360px) rotate(90deg); }
  .slot-mouth { right: 5%; width: 52vw; }
  .maze-gate { grid-template-columns: repeat(3, 1fr); height: 280px; }
}