:root {
  /* Intersection Observer API for scroll-triggered level transitions */
  --chrome-base: #c8c8d4;
  --dark-steel: #1a1a2e;
  --brushed-metal: #3d3d56;
  --highlight-steel: #e8e8f0;
  --aurora-cyan: #00e5ff;
  --aurora-magenta: #c471f5;
  --aurora-green: #59f176;
  --aurora-gold: #ffd866;
  --text-light: #d0d0d8;
  --text-dark: #2a2a35;
  --steel-variation: #2a2a45;
  --muted-steel: #6b6b78;
  --soft-chrome: #a8a8b8;
  --grid-unit: 16px;
  --aurora-sweep: linear-gradient(135deg, #00e5ff 0%, #c471f5 50%, #59f176 100%);
  --chrome-surface: linear-gradient(180deg, #e8e8f0 0%, #c8c8d4 40%, #a8a8b8 100%);
  --dark-depth: radial-gradient(ellipse at 30% 20%, #2a2a45 0%, #1a1a2e 70%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--dark-depth), var(--dark-steel);
  color: var(--text-light);
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(0.875rem, 1.1vw, 1.125rem);
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.clip-bank { position: absolute; width: 0; height: 0; }
.chrome-lines, .pixel-noise, .aurora-curtain { position: fixed; inset: 0; pointer-events: none; }
.chrome-lines {
  z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(0,229,255,0.035) 0 1px, transparent 1px 16px);
}
.pixel-noise {
  z-index: 2;
  opacity: 0.18;
  background-image: linear-gradient(45deg, rgba(232,232,240,0.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(0,229,255,0.05) 25%, transparent 25%);
  background-size: 8px 8px;
  mix-blend-mode: screen;
}
.aurora-curtain { z-index: 1; opacity: 0.72; filter: blur(8px); }
.aurora-cyan { background: linear-gradient(90deg, transparent 0 10%, rgba(0,229,255,0.08) 18%, transparent 32% 100%); animation: aurora-drift 20s ease-in-out infinite; }
.aurora-magenta { background: linear-gradient(90deg, transparent 0 25%, rgba(196,113,245,0.08) 42%, transparent 54% 100%); animation: aurora-drift 25s ease-in-out infinite reverse; }
.aurora-green { background: linear-gradient(90deg, transparent 0 45%, rgba(89,241,118,0.07) 63%, transparent 80% 100%); animation: aurora-drift 30s ease-in-out infinite; }

@keyframes aurora-drift { 0%,100% { transform: translateX(-18%) skewX(-8deg); } 50% { transform: translateX(18%) skewX(8deg); } }

.top-horizon {
  position: fixed;
  top: 0;
  left: 0;
  right: 8%;
  height: 15vh;
  min-height: 96px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(260px, 34%) 1fr 240px;
  align-items: center;
  gap: calc(var(--grid-unit) * 2);
  padding: calc(var(--grid-unit) * 2) calc(var(--grid-unit) * 4);
  background: linear-gradient(180deg, rgba(232,232,240,0.96), rgba(200,200,212,0.88) 42%, rgba(61,61,86,0.86));
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #00e5ff, #c471f5, #59f176) 1;
  box-shadow: 0 12px 32px rgba(26,26,46,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
}
.top-horizon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--aurora-sweep); animation: pulse-line 3s ease-in-out infinite; }
@keyframes pulse-line { 0%,100% { opacity: 0.35; filter: blur(0); } 50% { opacity: 1; filter: blur(2px); } }
.pixel-logo { display: flex; gap: 4px; font-family: "Press Start 2P", cursive; font-size: clamp(1rem, 2vw, 1.55rem); color: var(--text-dark); letter-spacing: 0.08em; }
.pixel-logo span { display: grid; place-items: center; min-width: 32px; height: 32px; background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(168,168,184,0.45)); box-shadow: inset 0 0 0 1px rgba(42,42,53,0.35), 4px 4px 0 rgba(42,42,53,0.18); }
.header-status { color: var(--text-dark); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; }
.header-assembly { display: grid; grid-template-columns: repeat(4, 32px); gap: 8px; justify-self: end; }
.header-assembly i { width: 32px; height: 32px; background: var(--aurora-sweep); clip-path: polygon(0 0, 75% 0, 100% 25%, 75% 50%, 100% 75%, 75% 100%, 0 100%, 25% 50%); animation: snap-piece 2.4s steps(4) infinite; box-shadow: 0 0 14px rgba(0,229,255,0.4); }
.header-assembly i:nth-child(2n) { animation-delay: .25s; filter: hue-rotate(70deg); }
.header-assembly i:nth-child(3n) { animation-delay: .5s; filter: hue-rotate(150deg); }
@keyframes snap-piece { 0% { transform: translate(-24px, -16px) rotate(0deg); opacity: .25; } 45%,100% { transform: translate(0,0) rotate(90deg); opacity: 1; } }

.sidebar-rail {
  position: fixed;
  right: 0;
  top: 0;
  width: 8%;
  min-width: 86px;
  height: 100vh;
  z-index: 30;
  display: grid;
  grid-template-rows: 72px 1fr repeat(5, 72px) 32px;
  justify-items: center;
  background: linear-gradient(90deg, #2a2a35, #3d3d56 38%, #6b6b78 39%, #3d3d56 44%, #2a2a45);
  border-left: 1px solid rgba(232,232,240,0.25);
  box-shadow: inset 8px 0 20px rgba(0,0,0,0.35);
}
.rail-label { align-self: end; color: var(--aurora-cyan); font-size: .75rem; letter-spacing: .15em; transform: rotate(90deg); }
.rail-track { grid-row: 2 / 8; position: absolute; top: 96px; bottom: 48px; width: 8px; background: rgba(26,26,46,0.75); box-shadow: inset 0 0 0 1px rgba(232,232,240,0.16); }
.rail-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background: var(--aurora-sweep); box-shadow: 0 0 18px #00e5ff; transition: height .28s ease; }
.rail-milestone { position: relative; z-index: 2; width: 48px; height: 48px; border: 0; background: rgba(26,26,46,0.7); color: var(--muted-steel); font-family: "Share Tech Mono", monospace; cursor: pointer; clip-path: polygon(0 0, 80% 0, 100% 20%, 80% 40%, 100% 60%, 80% 100%, 0 100%, 20% 50%); opacity: .55; transition: transform .25s ease, opacity .25s ease, background .25s ease; }
.rail-milestone.active { opacity: 1; color: var(--aurora-cyan); background: rgba(0,229,255,0.16); transform: translateX(-8px); box-shadow: 0 0 18px rgba(0,229,255,.55); }
.rail-milestone em { position: absolute; bottom: -14px; left: 8px; font-style: normal; font-size: .65rem; }
.micro { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; background: currentColor; image-rendering: pixelated; }
.piece { clip-path: polygon(0 0, 70% 0, 70% 30%, 100% 30%, 100% 70%, 70% 70%, 70% 100%, 0 100%, 0 65%, 25% 65%, 25% 35%, 0 35%); }
.key { clip-path: polygon(0 35%, 45% 35%, 45% 20%, 100% 20%, 100% 45%, 85% 45%, 85% 65%, 70% 65%, 70% 80%, 45% 80%, 45% 65%, 0 65%); }
.star { clip-path: polygon(50% 0, 62% 35%, 100% 35%, 68% 55%, 82% 100%, 50% 72%, 18% 100%, 32% 55%, 0 35%, 38% 35%); }
.crown { clip-path: polygon(0 28%, 22% 52%, 38% 12%, 55% 52%, 78% 12%, 100% 52%, 100% 100%, 0 100%); }
.trophy { clip-path: polygon(18% 0, 82% 0, 82% 18%, 100% 18%, 100% 48%, 78% 48%, 68% 62%, 58% 62%, 58% 82%, 75% 82%, 75% 100%, 25% 100%, 25% 82%, 42% 82%, 42% 62%, 32% 62%, 22% 48%, 0 48%, 0 18%, 18% 18%); }

main { position: relative; z-index: 4; margin-right: max(8%, 86px); }
.level { position: relative; min-height: 100vh; padding: 19vh calc(var(--grid-unit) * 4) calc(var(--grid-unit) * 5); display: flex; align-items: center; overflow: hidden; }
.scan-zone { position: relative; width: min(1280px, 100%); z-index: 3; }
.level-kicker { color: var(--aurora-cyan); font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: calc(var(--grid-unit) * 2); }
h1, h2, h3 { font-family: "Press Start 2P", cursive; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; line-height: 1.6; }
h1, h2 { font-size: clamp(1.5rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1rem, 1.65vw, 1.35rem); color: var(--aurora-magenta); }
p { max-width: 62ch; }

.boot-panel { margin-top: -2vh; }
.boot-line { min-height: 2.2em; width: 62%; color: var(--aurora-cyan); text-shadow: 0 0 18px rgba(0,229,255,.55); }
.cursor { color: var(--aurora-cyan); animation: cursor-blink .65s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.tagline { width: 55%; margin-top: calc(var(--grid-unit) * 2); opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.level-boot.ready .tagline { opacity: 1; transform: translateY(0); }
.fragment-field { position: absolute; inset: -48px 25% auto 0; height: 220px; pointer-events: none; }
.fragment-field i { position: absolute; width: 16px; height: 16px; background: var(--aurora-sweep); box-shadow: 0 0 10px rgba(0,229,255,.55); animation: fragment-burst 1.7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fragment-burst { 0% { transform: translate(0,0) scale(0); opacity: 0; } 30% { opacity: 1; } 72% { transform: translate(var(--tx), var(--ty)) scale(1); } 100% { transform: translate(var(--rx), var(--ry)) scale(.7); opacity: .2; } }

.f-pattern { display: grid; grid-template-columns: minmax(0, 60%) minmax(280px, 35%); gap: calc(var(--grid-unit) * 2); align-items: start; }
.primary-copy h2 { margin-bottom: calc(var(--grid-unit) * 2); background: var(--chrome-surface); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 12px rgba(0,229,255,.22); }
.primary-copy p { margin-bottom: calc(var(--grid-unit) * 2); }
.short-scan { width: 55%; color: var(--aurora-green); }
.grid-cascade { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(20, 1fr); grid-auto-rows: 5vh; opacity: .42; }
.grid-cascade i { background: linear-gradient(135deg, #e8e8f0, #c8c8d4 45%, #a8a8b8); opacity: 0; transform: scale(.2); animation: tile-in .55s steps(3) forwards; box-shadow: inset 0 0 0 1px rgba(42,42,53,.35); }
.level-grid.active .grid-cascade i { opacity: 1; }
@keyframes tile-in { to { opacity: .85; transform: scale(1); } }
.chrome-card { justify-self: end; min-height: 432px; width: min(100%, 448px); padding: calc(var(--grid-unit) * 2); background: var(--chrome-surface); color: var(--text-dark); clip-path: url(#puzzle-edge-right); box-shadow: 0 24px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.55); transform: translateY(24px); }
.dither-photo { height: 240px; position: relative; overflow: hidden; margin-bottom: calc(var(--grid-unit) * 2); background: linear-gradient(135deg, #2a2a35, #6b6b78 24%, #c8c8d4 25% 40%, #00e5ff 41%, #c471f5 58%, #59f176 59%, #e8e8f0 75%, #3d3d56 76%); background-size: 32px 32px; image-rendering: pixelated; clip-path: polygon(0 0, 83% 0, 100% 17%, 100% 100%, 18% 100%, 18% 82%, 0 82%); }
.dither-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, transparent 0 22px, rgba(26,26,46,.68) 23px), repeating-linear-gradient(45deg, rgba(26,26,46,.55) 0 4px, transparent 4px 8px); mix-blend-mode: multiply; }
.dither-photo span { position: absolute; width: 48px; height: 48px; background: rgba(255,255,255,.18); }
.dither-photo span:nth-child(1) { left: 32px; top: 32px; } .dither-photo span:nth-child(2) { right: 48px; top: 64px; background: rgba(0,229,255,.3); } .dither-photo span:nth-child(3) { left: 112px; bottom: 48px; background: rgba(196,113,245,.28); } .dither-photo span:nth-child(4) { right: 128px; bottom: 32px; background: rgba(89,241,118,.28); } .dither-photo span:nth-child(5) { left: 208px; top: 16px; } .dither-photo span:nth-child(6) { right: 16px; bottom: 96px; }
.sprite { image-rendering: pixelated; }
.gear-sprite { width: 128px; height: 128px; margin: 0 auto calc(var(--grid-unit) * 1); background: conic-gradient(from 0deg, #00e5ff 0 10%, transparent 10% 18%, #c8c8d4 18% 28%, transparent 28% 36%, #c471f5 36% 46%, transparent 46% 54%, #59f176 54% 64%, transparent 64% 72%, #ffd866 72% 82%, transparent 82% 90%, #00e5ff 90%); clip-path: polygon(38% 0, 62% 0, 62% 18%, 76% 24%, 88% 12%, 100% 32%, 86% 42%, 86% 58%, 100% 68%, 88% 88%, 76% 76%, 62% 82%, 62% 100%, 38% 100%, 38% 82%, 24% 76%, 12% 88%, 0 68%, 14% 58%, 14% 42%, 0 32%, 12% 12%, 24% 24%, 38% 18%); animation: sprite-rotate 10s steps(16) infinite; }
@keyframes sprite-rotate { to { transform: rotate(360deg); } }

.cascade-stack { width: 65%; }
.cascade-block { position: relative; margin-bottom: calc(var(--grid-unit) * 3); padding: calc(var(--grid-unit) * 2.5); background: linear-gradient(135deg, rgba(61,61,86,.82), rgba(42,42,69,.66)); border-left: 4px solid #00e5ff; box-shadow: 16px 16px 0 rgba(0,229,255,.08), inset 0 0 0 1px rgba(232,232,240,.12); opacity: 0; transform: translateX(-96px); transition: opacity .7s ease, transform .7s ease; }
.level-assembly.active .cascade-block { opacity: 1; transform: translateX(0); }
.block-one { clip-path: url(#puzzle-edge-right); }
.block-two { margin-left: calc(var(--grid-unit) * 2); clip-path: url(#puzzle-edge-left); transition-delay: .18s; border-color: #c471f5; }
.block-three { margin-left: calc(var(--grid-unit) * 4); clip-path: url(#puzzle-edge-right); transition-delay: .36s; border-color: #59f176; }
.cascade-block h3 { margin-bottom: calc(var(--grid-unit) * 1); }
.floating-pieces b { position: absolute; width: 32px; height: 32px; background: var(--aurora-sweep); clip-path: polygon(0 0, 70% 0, 70% 30%, 100% 30%, 100% 70%, 70% 70%, 70% 100%, 0 100%, 0 65%, 25% 65%, 25% 35%, 0 35%); opacity: .55; animation: float-piece 8s ease-in-out infinite; }
.floating-pieces b:nth-child(1) { right: 18%; top: 28%; } .floating-pieces b:nth-child(2) { right: 30%; top: 62%; animation-delay: -2s; } .floating-pieces b:nth-child(3) { left: 58%; top: 38%; animation-delay: -4s; } .floating-pieces b:nth-child(4) { right: 10%; bottom: 18%; animation-delay: -1s; } .floating-pieces b:nth-child(5) { left: 72%; top: 74%; animation-delay: -5s; }
@keyframes float-piece { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-32px) rotate(90deg); } }

.level-aurora .aurora-curtain, .level-aurora { background: radial-gradient(circle at 50% 48%, rgba(0,229,255,.24), transparent 18%), radial-gradient(circle at 42% 52%, rgba(196,113,245,.2), transparent 22%), var(--dark-depth); }
.aurora-stage { position: relative; z-index: 3; width: 100%; display: grid; place-items: center; text-align: center; gap: calc(var(--grid-unit) * 2); }
.completed-sprite { position: relative; width: 384px; height: 384px; display: grid; place-items: center; }
.radiant-puzzle { width: 192px; height: 192px; background: linear-gradient(135deg, #00e5ff, #c471f5 45%, #59f176 70%, #ffd866); clip-path: polygon(0 0, 42% 0, 42% 18%, 58% 18%, 58% 0, 100% 0, 100% 42%, 82% 42%, 82% 58%, 100% 58%, 100% 100%, 58% 100%, 58% 82%, 42% 82%, 42% 100%, 0 100%, 0 58%, 18% 58%, 18% 42%, 0 42%); box-shadow: 0 0 80px rgba(0,229,255,.65), 0 0 120px rgba(196,113,245,.35); animation: puzzle-radiate 3s steps(6) infinite; }
@keyframes puzzle-radiate { 50% { filter: brightness(1.45); transform: scale(1.05); } }
.orbit { position: absolute; inset: 32px; border: 1px solid rgba(0,229,255,.22); animation: orbit-spin 30s linear infinite; }
.orbit-b { inset: 64px; animation-direction: reverse; animation-duration: 22s; border-color: rgba(89,241,118,.25); }
.orbit i { position: absolute; width: 16px; height: 16px; background: #00e5ff; box-shadow: 0 0 12px currentColor; }
.orbit i:nth-child(1) { left: 50%; top: -8px; } .orbit i:nth-child(2) { right: -8px; top: 50%; background: #c471f5; } .orbit i:nth-child(3) { left: 50%; bottom: -8px; background: #59f176; } .orbit i:nth-child(4) { left: -8px; top: 50%; background: #ffd866; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.aurora-stage h2 { max-width: 880px; background: var(--aurora-sweep); -webkit-background-clip: text; background-clip: text; color: transparent; }

.score-panel { display: grid; justify-items: start; gap: calc(var(--grid-unit) * 2); }
.trophy-sprite { width: 192px; height: 192px; background: linear-gradient(180deg, #ffd866, #e8e8f0 52%, #a8a8b8); clip-path: polygon(18% 0, 82% 0, 82% 18%, 100% 18%, 100% 48%, 78% 48%, 68% 62%, 58% 62%, 58% 82%, 75% 82%, 75% 100%, 25% 100%, 25% 82%, 42% 82%, 42% 62%, 32% 62%, 22% 48%, 0 48%, 0 18%, 18% 18%); box-shadow: 0 0 64px rgba(255,216,102,.55); animation: high-score 1.6s steps(4) infinite; }
@keyframes high-score { 50% { transform: translateY(-12px); filter: brightness(1.25); } }
.score-panel h2 { color: #ffd866; text-shadow: 0 0 20px rgba(255,216,102,.55); }
.score-panel p span { color: var(--aurora-cyan); text-decoration: underline; text-decoration-color: var(--aurora-magenta); text-underline-offset: 5px; }
.footer-dissolve { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: grid; place-items: center start; padding-left: calc(var(--grid-unit) * 4); font-size: .75rem; letter-spacing: .15em; color: var(--text-dark); background: repeating-linear-gradient(90deg, #ffd866 0 16px, #00e5ff 16px 32px, #c471f5 32px 48px, #59f176 48px 64px); }

.dissolve-band { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: repeating-linear-gradient(90deg, rgba(0,229,255,.45) 0 16px, rgba(196,113,245,.28) 16px 32px, rgba(89,241,118,.35) 32px 48px, transparent 48px 64px); opacity: .55; animation: dissolve-scan 2.4s steps(16) infinite; }
.dissolve-band.alt { background: repeating-linear-gradient(90deg, rgba(232,232,240,.5) 0 16px, rgba(200,200,212,.42) 16px 32px, rgba(168,168,184,.36) 32px 48px, rgba(42,42,53,.4) 48px 64px); }
@keyframes dissolve-scan { 50% { background-position: 64px 0; opacity: .9; } }
.level:not(.active) .primary-copy, .level:not(.active) .chrome-card, .level:not(.active) .aurora-stage, .level:not(.active) .score-panel { opacity: .35; transform: translateY(20px); }
.primary-copy, .chrome-card, .aurora-stage, .score-panel { transition: opacity .7s ease, transform .7s ease; }

@media (max-width: 900px) {
  .top-horizon { right: 72px; grid-template-columns: 1fr; height: 112px; padding: 16px 24px; }
  .header-status, .header-assembly { display: none; }
  .sidebar-rail { min-width: 72px; }
  main { margin-right: 72px; }
  .level { padding: 144px 32px 64px; }
  .boot-line, .tagline, .cascade-stack { width: 100%; }
  .f-pattern { grid-template-columns: 1fr; }
  .short-scan { width: 100%; }
  .chrome-card { justify-self: start; }
  .completed-sprite { width: 288px; height: 288px; }
}

@media (max-width: 560px) {
  .level { padding-left: 24px; padding-right: 24px; }
  .pixel-logo span { min-width: 26px; height: 26px; }
  .block-two, .block-three { margin-left: 0; }
  .completed-sprite { transform: scale(.78); }
  .trophy-sprite { width: 144px; height: 144px; }
}