:root {
  /* Typography compliance tokens from DESIGN.md: Space Mono** only numbers */
  --aero-aqua: #00B8D9;
  --lime-signal: #B6F000;
  --berry-badge: #FF3D8B;
  --sky-gel: #A7E9FF;
  --chrome-white: #F7FBFF;
  --deep-dock: #062C43;
  --vintage-silver: #A9BCC7;
  --display: 'Bungee', system-ui, sans-serif;
  --ui: 'Nunito Sans', Arial, sans-serif;
  --mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--deep-dock);
  font-family: var(--ui);
  background:
    radial-gradient(circle at 18% 18%, rgba(247, 251, 255, .95), transparent 18rem),
    radial-gradient(circle at 74% 18%, rgba(182, 240, 0, .5), transparent 16rem),
    linear-gradient(135deg, #F7FBFF 0%, #A7E9FF 33%, #00B8D9 72%, #062C43 130%);
}

body { cursor: grab; }
body.dragging { cursor: grabbing; }

.aero-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .22;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.4px),
    linear-gradient(115deg, transparent, rgba(247,251,255,.35), transparent);
  background-size: 7px 7px, 220px 100%;
  mix-blend-mode: soft-light;
}

.bubble-field, .bubble-field span {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.bubble-field span {
  inset: auto;
  width: var(--size);
  height: var(--size);
  left: var(--left);
  top: var(--top);
  border-radius: 50%;
  border: 1px solid rgba(247,251,255,.75);
  background: radial-gradient(circle at 32% 22%, #F7FBFF, rgba(167,233,255,.35) 34%, rgba(0,184,217,.08) 72%);
  box-shadow: inset -8px -10px 18px rgba(6,44,67,.12), 0 0 22px rgba(167,233,255,.42);
  animation: bubbleFloat var(--speed) ease-in-out infinite alternate;
}

.badge-dock {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
  padding: .55rem;
  border-radius: 999px;
  z-index: 40;
  border: 1px solid rgba(247,251,255,.78);
  background: linear-gradient(180deg, rgba(247,251,255,.78), rgba(167,233,255,.38));
  box-shadow: inset 0 1px 0 #F7FBFF, 0 18px 40px rgba(6,44,67,.24);
  backdrop-filter: blur(14px);
}

.dock-chip {
  border: 0;
  color: var(--deep-dock);
  font-family: var(--ui);
  font-weight: 900;
  font-size: .75rem;
  text-transform: uppercase;
  padding: .62rem .9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #F7FBFF, #A7E9FF);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), 0 5px 12px rgba(6,44,67,.17);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.dock-chip.active {
  color: #F7FBFF;
  background: linear-gradient(135deg, #FF3D8B, #00B8D9 58%, #B6F000);
  transform: translateY(-.3rem) scale(1.06);
}

.promenade {
  height: 100vh;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  position: relative;
  z-index: 2;
  scrollbar-width: none;
}
.promenade::-webkit-scrollbar { display: none; }

.panel {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 7rem);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.panel::before {
  content: '';
  position: absolute;
  inset: 7% 4%;
  border-radius: 3.5rem;
  border: 1px solid rgba(247,251,255,.65);
  background: linear-gradient(135deg, rgba(247,251,255,.24), rgba(167,233,255,.14) 48%, rgba(0,184,217,.12));
  box-shadow: inset 0 2px 0 rgba(247,251,255,.65), inset 0 -30px 80px rgba(6,44,67,.08);
  z-index: -1;
}

.chrome-rail {
  position: fixed;
  left: 0;
  top: 58%;
  width: 600vw;
  height: 7.4rem;
  z-index: 20;
  transform: translate3d(0, -50%, 0);
  pointer-events: none;
}

.rail-core {
  position: absolute;
  inset: 1.2rem 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(247,251,255,.96), rgba(169,188,199,.78) 28%, rgba(0,184,217,.55) 48%, rgba(6,44,67,.5) 100%),
    repeating-linear-gradient(90deg, transparent 0 8rem, rgba(247,251,255,.28) 8.1rem 8.3rem);
  box-shadow: inset 0 9px 4px rgba(255,255,255,.75), inset 0 -16px 28px rgba(6,44,67,.45), 0 22px 60px rgba(6,44,67,.32);
}

.rail-shine {
  position: absolute;
  inset: 1.1rem 0 auto 0;
  height: 1.4rem;
  background: linear-gradient(90deg, transparent, rgba(247,251,255,.8), transparent 24%, rgba(247,251,255,.55), transparent 60%);
  animation: railGlide 6s linear infinite;
}

.rail-status {
  position: fixed;
  left: 2rem;
  top: calc(58% + 4.5rem);
  padding: .5rem .75rem;
  font: 700 .72rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: .65rem;
  color: #F7FBFF;
  background: rgba(6,44,67,.72);
  border: 1px solid rgba(167,233,255,.42);
}
.rail-status b { color: var(--lime-signal); margin-left: .75rem; }

.hero-copy {
  position: absolute;
  left: 6vw;
  top: 10vh;
  z-index: 12;
}

.system-pill {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  color: var(--deep-dock);
  background: linear-gradient(180deg, rgba(247,251,255,.94), rgba(167,233,255,.56));
  box-shadow: inset 0 2px 0 #F7FBFF, 0 10px 24px rgba(6,44,67,.12);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  line-height: .82;
  letter-spacing: -.055em;
  text-transform: lowercase;
}

h1 {
  font-size: clamp(5.8rem, 19vw, 18rem);
  color: transparent;
  background: linear-gradient(180deg, #F7FBFF 0 20%, #A7E9FF 31%, #00B8D9 54%, #062C43 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 16px 0 rgba(6,44,67,.12)) drop-shadow(0 25px 35px rgba(6,44,67,.16));
}

.hero-line, .scene-copy {
  max-width: 34rem;
  font-size: clamp(1.05rem, 2vw, 1.75rem);
  line-height: 1.15;
  font-weight: 900;
  color: rgba(6,44,67,.82);
}

.desktop-horizon {
  position: absolute;
  inset: auto -10vw -20vh -10vw;
  height: 52vh;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at center top, rgba(247,251,255,.92), rgba(167,233,255,.48) 38%, rgba(0,184,217,.3) 80%);
  box-shadow: inset 0 24px 26px rgba(247,251,255,.82);
}

.incoming-badges {
  position: absolute;
  left: 10vw;
  top: 50%;
  display: flex;
  gap: 1.2rem;
  z-index: 26;
}

.badge-token, .blank-badge, .pinned, .drifter, .final-mark, .giant-badge, .award-tab {
  transform-style: preserve-3d;
  will-change: transform;
  border: 2px solid rgba(247,251,255,.75);
  box-shadow: inset 0 5px 4px rgba(255,255,255,.72), inset 0 -18px 30px rgba(6,44,67,.22), 0 22px 40px rgba(6,44,67,.24);
}

.badge-token {
  width: 8.6rem;
  height: 5rem;
  border-radius: 1.4rem;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateX(-45vw) rotateY(-28deg) rotateZ(-6deg);
  animation: badgeArrival .9s cubic-bezier(.16,1,.3,1) forwards;
}
.badge-token:nth-child(2) { animation-delay: .16s; }
.badge-token:nth-child(3) { animation-delay: .32s; }
.badge-token:nth-child(4) { animation-delay: .48s; }
.badge-token span { font: 1rem var(--display); color: #F7FBFF; text-shadow: 0 2px 0 rgba(6,44,67,.25); }
.badge-token em { position: absolute; bottom: .45rem; font: .58rem var(--mono); color: rgba(6,44,67,.75); font-style: normal; }
.berry { background: linear-gradient(135deg, #FF3D8B, #00B8D9); }
.lime { background: linear-gradient(135deg, #B6F000, #00B8D9); }
.aqua { background: linear-gradient(135deg, #A7E9FF, #00B8D9); }
.silver { background: linear-gradient(135deg, #F7FBFF, #A9BCC7); }

.hero-medal {
  position: absolute;
  right: 8vw;
  top: 20vh;
  width: clamp(13rem, 24vw, 24rem);
  height: clamp(13rem, 24vw, 24rem);
  border-radius: 42% 58% 48% 52%;
  display: grid;
  place-items: center;
  z-index: 8;
  background: radial-gradient(circle at 28% 18%, #F7FBFF, #FF3D8B 24%, #00B8D9 58%, #062C43 120%);
}
.hero-medal span { font: clamp(2.7rem, 6vw, 6rem) var(--display); color: #F7FBFF; }
.hero-medal small { position: absolute; bottom: 20%; font: 700 .8rem var(--mono); color: #062C43; }

.chapter-sign {
  position: absolute;
  left: 7vw;
  top: 12vh;
  z-index: 6;
}
.chapter-sign span { font: 700 .9rem var(--mono); color: var(--berry-badge); }
.chapter-sign h2 {
  font-size: clamp(5rem, 15vw, 15rem);
  color: transparent;
  background: linear-gradient(180deg, #F7FBFF 12%, #00B8D9 48%, #062C43 105%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 14px 0 rgba(6,44,67,.12));
}
.scene-copy { position: absolute; right: 8vw; top: 18vh; z-index: 7; }

.mint-machine, .shine-stage, .profile-jacket, .trade-rails, .archive-drawer {
  position: relative;
  width: min(58rem, 76vw);
  height: min(31rem, 52vh);
  z-index: 10;
}
.mint-machine {
  border-radius: 3rem;
  background: linear-gradient(145deg, rgba(247,251,255,.48), rgba(167,233,255,.28));
  border: 1px solid rgba(247,251,255,.7);
  box-shadow: inset 0 2px 0 #F7FBFF, 0 30px 80px rgba(6,44,67,.18);
}
.nozzle {
  position: absolute;
  top: -2rem;
  left: 50%;
  width: 8rem;
  height: 8rem;
  transform: translateX(-50%);
  border-radius: 0 0 3rem 3rem;
  background: linear-gradient(180deg, #A9BCC7, #F7FBFF 35%, #00B8D9);
  box-shadow: inset 0 8px 0 #F7FBFF;
}
.gel-row { position: absolute; inset: 42% auto auto 50%; transform: translate(-50%, -50%); display: flex; gap: 2rem; }
.blank-badge {
  width: 11rem;
  height: 7rem;
  display: grid;
  place-items: center;
  border-radius: 3.2rem;
  font: 2rem var(--display);
  color: #F7FBFF;
  animation: fillPulse 2.8s ease-in-out infinite;
}
.fill-a { background: linear-gradient(135deg, #F7FBFF, #FF3D8B); }
.fill-b { background: linear-gradient(135deg, #F7FBFF, #B6F000); animation-delay: .35s; }
.fill-c { background: linear-gradient(135deg, #F7FBFF, #00B8D9); animation-delay: .7s; }
.serial-strip {
  position: absolute;
  bottom: 15vh;
  left: 8vw;
  font: 700 .85rem var(--mono);
  color: rgba(6,44,67,.76);
}

.award-tab {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  width: min(32rem, 62vw);
  height: 14rem;
  border-radius: 2rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #FF3D8B, #F7FBFF 32%, #00B8D9 60%, #B6F000);
}
.award-tab b { font: clamp(2.5rem, 6vw, 5.5rem) var(--display); color: #F7FBFF; text-shadow: 0 4px 0 rgba(6,44,67,.22); }
.award-tab small { position: absolute; bottom: 1.7rem; font: 700 .8rem var(--mono); }
.glint { position: absolute; height: 210%; width: 5rem; top: -50%; border-radius: 999px; background: rgba(247,251,255,.75); filter: blur(10px); transform: rotate(24deg); animation: glintSweep 2.6s ease-in-out infinite; }
.glint-one { left: 10%; }
.glint-two { left: 55%; animation-delay: .65s; }
.lens-orb { position: absolute; right: 9%; top: 18%; width: 7rem; height: 7rem; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #F7FBFF, rgba(167,233,255,.38), transparent 70%); }

.profile-jacket {
  border-radius: 45% 45% 2rem 2rem;
  background: linear-gradient(145deg, rgba(247,251,255,.55), rgba(167,233,255,.28));
  border: 1px solid rgba(247,251,255,.76);
  box-shadow: inset 0 2px 0 #F7FBFF, 0 35px 70px rgba(6,44,67,.18);
}
.collar { position: absolute; top: 0; left: 50%; width: 15rem; height: 12rem; transform: translateX(-50%); clip-path: polygon(0 0, 50% 60%, 100% 0, 80% 100%, 20% 100%); background: rgba(247,251,255,.44); }
.pinned { position: absolute; width: 6.5rem; height: 6.5rem; border-radius: 50%; display: grid; place-items: center; font: 1.5rem var(--display); color: #F7FBFF; }
.pin-one { left: 28%; top: 34%; background: linear-gradient(135deg, #FF3D8B, #062C43); }
.pin-two { left: 47%; top: 42%; background: linear-gradient(135deg, #00B8D9, #B6F000); }
.pin-three { left: 60%; top: 28%; background: linear-gradient(135deg, #A7E9FF, #FF3D8B); }
.profile-card { position: absolute; right: 8%; bottom: 10%; padding: 1rem 1.2rem; border-radius: 1rem; background: rgba(247,251,255,.72); box-shadow: inset 0 1px 0 #fff; }
.profile-card strong { display: block; font: 1.2rem var(--display); }
.profile-card span { font: 700 .75rem var(--mono); }

.trade-rails .trade-line { position: absolute; left: 0; width: 100%; height: 1.8rem; border-radius: 999px; background: linear-gradient(180deg, #F7FBFF, #00B8D9, #062C43); box-shadow: inset 0 5px 0 rgba(255,255,255,.8), 0 16px 35px rgba(6,44,67,.2); }
.trade-line.top { top: 28%; transform: rotate(-3deg); }
.trade-line.bottom { bottom: 28%; transform: rotate(3deg); }
.drifter { position: absolute; width: 8rem; height: 8rem; border-radius: 2rem 50% 2rem 50%; display: grid; place-items: center; font: 1.35rem var(--display); color: #F7FBFF; animation: drift 5s ease-in-out infinite; }
.drift-a { left: 10%; top: 11%; background: linear-gradient(135deg, #FF3D8B, #00B8D9); }
.drift-b { left: 44%; top: 48%; background: linear-gradient(135deg, #B6F000, #00B8D9); animation-delay: .6s; }
.drift-c { right: 8%; top: 22%; background: linear-gradient(135deg, #A7E9FF, #FF3D8B); animation-delay: 1.1s; }

.archive-drawer {
  height: 24rem;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(6,44,67,.8), rgba(0,184,217,.55) 38%, rgba(247,251,255,.35));
  border: 1px solid rgba(247,251,255,.66);
  box-shadow: inset 0 4px 0 rgba(247,251,255,.6), 0 40px 80px rgba(6,44,67,.25);
}
.drawer-handle { margin: 1.4rem auto; width: 70%; padding: .8rem; border-radius: 999px; text-align: center; font: 700 .85rem var(--mono); color: #F7FBFF; background: rgba(6,44,67,.7); }
.slots { display: flex; justify-content: center; gap: 1rem; margin-top: 4rem; }
.slots span { width: 7rem; height: 5rem; border-radius: 1rem; display: grid; place-items: center; font: 700 .75rem var(--mono); background: linear-gradient(135deg, #F7FBFF, #A7E9FF); box-shadow: inset 0 3px 0 #fff, 0 14px 20px rgba(6,44,67,.2); }
.final-mark { position: absolute; right: 9vw; bottom: 18vh; width: 14rem; height: 5rem; border-radius: 999px; display: grid; place-items: center; font: 1.5rem var(--display); color: #F7FBFF; background: linear-gradient(135deg, #FF3D8B, #B6F000); z-index: 15; }

@keyframes bubbleFloat { from { transform: translateY(0) scale(.92); } to { transform: translateY(-2.4rem) scale(1.08); } }
@keyframes railGlide { from { transform: translateX(-12vw); } to { transform: translateX(38vw); } }
@keyframes badgeArrival { to { opacity: 1; transform: translateX(0) rotateY(0) rotateZ(var(--rz, 0deg)); } }
@keyframes fillPulse { 50% { filter: saturate(1.45) brightness(1.08); transform: translateY(-.65rem) rotateX(8deg); } }
@keyframes glintSweep { 0%, 100% { transform: translateX(-10rem) rotate(24deg); opacity: 0; } 45%, 65% { opacity: .85; } 100% { transform: translateX(28rem) rotate(24deg); } }
@keyframes drift { 50% { transform: translate(5rem, -1.4rem) rotate(9deg); } }

@media (max-width: 760px) {
  .panel { padding: 2rem; }
  .scene-copy { left: 8vw; right: 8vw; top: 30vh; }
  .incoming-badges { left: 5vw; gap: .5rem; transform: scale(.75); transform-origin: left center; }
  .hero-medal { right: 3vw; top: 42vh; opacity: .78; }
  .dock-chip { padding: .55rem .55rem; font-size: .62rem; }
  .gel-row, .slots { transform: translate(-50%, -50%) scale(.7); }
  .slots { transform: none; flex-wrap: wrap; margin-top: 2rem; }
}