:root {
  --ink: #080808;
  --ivory: #F7F2E8;
  --porcelain: #D8D2C8;
  --charcoal: #2A2926;
  --mist: #FFFFFF;
  --silver: #B9B9B2;
  --pixel: 8px;
  --display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Avenir Next", system-ui, sans-serif;
  --pixel-font: "Pixelify Sans", "Courier New", monospace;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --design-token-mono: "Mono*";
  --design-token-build-notes: "build notes";
}

* { box-sizing: border-box; }

html { background: var(--ink); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--body);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: .22;
  mix-blend-mode: screen;
}

.quest-shell { position: relative; isolation: isolate; }

.room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: clamp(32px, 7vw, 96px);
  background: var(--ink);
  border-bottom: 1px solid rgba(216, 210, 200, .08);
}

.room::after {
  content: attr(data-chapter);
  position: absolute;
  right: clamp(24px, 5vw, 72px);
  top: clamp(22px, 5vw, 64px);
  font-family: var(--pixel-font);
  font-size: clamp(34px, 7vw, 110px);
  color: rgba(216, 210, 200, .055);
  image-rendering: pixelated;
}

.room-content {
  position: relative;
  z-index: 5;
  width: min(760px, 100%);
  filter: blur(5px);
  transform: translateY(34px) scale(.985);
  opacity: .62;
  transition: filter .9s ease, transform .9s ease, opacity .9s ease;
}

.room.in-view .room-content,
.room-spawn .room-content {
  filter: blur(0);
  transform: translateY(0) scale(1);
  opacity: 1;
}

.spawn-content { margin-left: min(10vw, 120px); align-self: end; padding-bottom: 18vh; }
.offset-left { margin-left: min(7vw, 84px); }
.offset-right { margin-left: auto; margin-right: min(5vw, 64px); }
.shrine-content { margin: 0 auto; text-align: center; }

.tile-plane,
.bubble-plane {
  position: absolute;
  inset: -12vh -8vw;
  pointer-events: none;
  will-change: transform;
}

.far-plane {
  opacity: .65;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(42,41,38,.65) 18% 22%, transparent 22% 100%),
    linear-gradient(0deg, transparent 0 30%, rgba(216,210,200,.08) 30% 34%, transparent 34% 100%),
    radial-gradient(square, var(--charcoal) 0 30%, transparent 31%);
  background-image:
    linear-gradient(90deg, transparent 0 18%, rgba(42,41,38,.65) 18% 22%, transparent 22% 100%),
    linear-gradient(0deg, transparent 0 30%, rgba(216,210,200,.08) 30% 34%, transparent 34% 100%);
  background-size: 96px 96px, 144px 144px;
  image-rendering: pixelated;
}

.fog-map { background-size: 128px 128px, 88px 88px; filter: blur(2px); opacity: .48; }
.proof-map { background-size: 80px 80px, 160px 160px; opacity: .58; }
.relic-map { background-size: 112px 112px, 224px 224px; opacity: .35; }

.ghost-bubble,
.thought-cloud,
.halo {
  position: absolute;
  border-radius: 999px;
  background: rgba(247, 242, 232, .08);
  border: 1px solid rgba(185, 185, 178, .2);
  filter: blur(8px);
  backdrop-filter: blur(10px);
  transition: filter .7s ease, border-color .7s ease, transform .7s ease;
}

.bubble-a { width: 22vw; height: 16vw; left: 58vw; top: 18vh; }
.bubble-b { width: 16vw; height: 16vw; left: 12vw; top: 60vh; }
.cloud-one { width: 26vw; height: 18vw; left: 55vw; top: 14vh; }
.cloud-two { width: 18vw; height: 14vw; left: 10vw; top: 58vh; }
.cloud-three { width: 14vw; height: 11vw; left: 72vw; top: 64vh; }
.halo-one { width: 34vw; height: 34vw; left: 4vw; top: 18vh; border-style: dotted; }
.halo-two { width: 18vw; height: 18vw; right: 13vw; bottom: 9vh; }
.relic-bubble-one { width: 30vw; height: 22vw; left: 8vw; top: 20vh; }
.relic-bubble-two { width: 20vw; height: 20vw; right: 8vw; top: 50vh; }

.room.in-view .thought-cloud,
.room.in-view .ghost-bubble,
.room.in-view .halo,
.focusable-fragment.is-clear {
  filter: blur(0);
  border-color: rgba(255, 255, 255, .48);
}

.coord {
  margin: 0 0 18px;
  font-family: var(--pixel-font);
  color: var(--silver);
  letter-spacing: .08em;
  font-size: clamp(13px, 1.4vw, 18px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease .32s, transform .5s ease .32s;
}

.room.in-view .coord,
.room-spawn .coord { opacity: 1; transform: translateY(0); }

.wordmark,
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--ivory);
}

.wordmark { font-size: clamp(62px, 12vw, 190px); animation: bootName 1.35s cubic-bezier(.19,1,.22,1) both; }
h2 { font-size: clamp(48px, 8vw, 122px); max-width: 870px; }

.chapter-copy {
  max-width: 520px;
  margin: 28px 0 0;
  color: var(--porcelain);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.45;
}

.boot-pixel {
  width: 16px;
  height: 16px;
  margin-bottom: 34px;
  background: var(--ivory);
  box-shadow: 24px 0 0 rgba(247,242,232,.28), 0 24px 0 rgba(185,185,178,.34);
  image-rendering: pixelated;
  animation: blinkPixel .9s steps(1) infinite;
}

.bubble-panel {
  width: min(520px, 92vw);
  margin-top: 34px;
  padding: clamp(24px, 4vw, 44px);
  color: var(--ink);
  background: rgba(247, 242, 232, .84);
  border: 2px solid rgba(185, 185, 178, .6);
  border-radius: 44px 44px 44px 12px;
  box-shadow: 18px 18px 0 rgba(42, 41, 38, .9);
  backdrop-filter: blur(14px);
}

.bubble-panel p { margin: 0; font-size: clamp(18px, 2vw, 25px); line-height: 1.35; }
.bubble-panel small { display: block; margin-top: 18px; font-family: var(--mono); color: var(--charcoal); }

.pixel-stair { display: flex; align-items: flex-end; gap: 8px; height: 56px; margin-bottom: 20px; }
.pixel-stair span { width: 28px; background: var(--ivory); display: block; image-rendering: pixelated; }
.pixel-stair span:nth-child(1) { height: 14px; }
.pixel-stair span:nth-child(2) { height: 28px; }
.pixel-stair span:nth-child(3) { height: 42px; }
.pixel-stair span:nth-child(4) { height: 56px; }

.fragment {
  position: absolute;
  right: 12vw;
  bottom: 16vh;
  z-index: 4;
  width: 136px;
  height: 136px;
  filter: blur(6px);
}
.fragment b { position: absolute; width: 32px; height: 32px; background: var(--ivory); box-shadow: 8px 8px 0 var(--charcoal); }
.fragment b:nth-child(1) { left: 0; top: 32px; }
.fragment b:nth-child(2) { left: 40px; top: 0; }
.fragment b:nth-child(3) { left: 72px; top: 64px; }
.fragment b:nth-child(4) { left: 104px; top: 96px; }

.platform-strip {
  display: flex;
  gap: 8px;
  margin-top: 42px;
  filter: blur(5px);
}

.specimen {
  appearance: none;
  border: 0;
  padding: 18px 24px;
  min-width: 92px;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 18px;
  box-shadow: 0 8px 0 var(--charcoal);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.specimen:hover,
.specimen.active { transform: translateY(4px); box-shadow: 0 4px 0 var(--charcoal); background: var(--mist); }
.specimen-note { min-height: 58px; max-width: 520px; margin-top: 28px; color: var(--porcelain); font-family: var(--mono); line-height: 1.55; }

.pixel-key,
.quest-flag {
  position: absolute;
  filter: blur(5px);
  z-index: 4;
  image-rendering: pixelated;
}
.pixel-key { left: 16vw; bottom: 22vh; width: 96px; height: 32px; background: var(--ivory); }
.pixel-key::before { content: ""; position: absolute; left: -40px; top: -16px; width: 48px; height: 48px; border: 16px solid var(--ivory); border-radius: 50%; }
.pixel-key::after { content: ""; position: absolute; right: 8px; top: 32px; width: 16px; height: 24px; background: var(--ivory); box-shadow: 24px 0 0 var(--ivory); }
.quest-flag { right: 9vw; top: 20vh; width: 16px; height: 112px; background: var(--ivory); }
.quest-flag::before { content: ""; position: absolute; left: 16px; top: 0; width: 72px; height: 48px; background: linear-gradient(135deg, var(--ivory) 0 60%, transparent 61%); }

.artifact-shrine {
  display: grid;
  place-items: center;
  width: min(420px, 82vw);
  aspect-ratio: 1;
  margin: 46px auto 0;
  border-radius: 58px;
  background: linear-gradient(145deg, rgba(247,242,232,.95), rgba(216,210,200,.72));
  box-shadow: 0 28px 0 rgba(42,41,38,.78), inset 0 0 0 2px var(--mist);
  filter: blur(6px);
}

.glyph-grid {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  grid-template-rows: repeat(5, 28px);
  gap: 8px;
  padding: 28px;
  background: var(--ink);
  border-radius: 18px;
  box-shadow: 0 0 0 8px var(--charcoal);
}
.glyph-grid span { background: rgba(247,242,232,.16); }
.glyph-grid span:nth-child(3), .glyph-grid span:nth-child(7), .glyph-grid span:nth-child(9), .glyph-grid span:nth-child(11), .glyph-grid span:nth-child(13), .glyph-grid span:nth-child(15), .glyph-grid span:nth-child(17), .glyph-grid span:nth-child(19), .glyph-grid span:nth-child(23) { background: var(--ivory); }

.final-copy { margin-left: auto; margin-right: auto; }

.stair-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}
.stair-divider.reverse { justify-content: flex-start; }
.stair-divider i {
  display: block;
  width: 12.5vw;
  height: 0;
  background: var(--ivory);
  opacity: .92;
  transition: height .42s steps(4);
}
.room.in-view .stair-divider i:nth-child(1) { height: 8px; transition-delay: .05s; }
.room.in-view .stair-divider i:nth-child(2) { height: 16px; transition-delay: .1s; }
.room.in-view .stair-divider i:nth-child(3) { height: 24px; transition-delay: .15s; }
.room.in-view .stair-divider i:nth-child(4) { height: 32px; transition-delay: .2s; }
.room.in-view .stair-divider i:nth-child(5) { height: 40px; transition-delay: .25s; }
.room.in-view .stair-divider i:nth-child(6) { height: 48px; transition-delay: .3s; }
.room.in-view .stair-divider i:nth-child(7) { height: 56px; transition-delay: .35s; }
.room.in-view .stair-divider i:nth-child(8) { height: 64px; transition-delay: .4s; }

.cursor-orb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px dotted rgba(247, 242, 232, .32);
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 62%);
  opacity: 0;
  transform: translate3d(-200px, -200px, 0) scale(.8);
  transition: opacity .25s ease, transform .08s linear;
  mix-blend-mode: screen;
}
.cursor-orb.is-visible { opacity: 1; }

@keyframes blinkPixel { 0%, 44% { opacity: 1; } 45%, 74% { opacity: .14; } 75%, 100% { opacity: 1; } }
@keyframes bootName { from { opacity: 0; filter: blur(10px); transform: translateY(22px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }

@media (max-width: 760px) {
  .room { padding: 28px; }
  .spawn-content, .offset-left, .offset-right { margin-left: 0; margin-right: 0; }
  .platform-strip { flex-wrap: wrap; }
  .pixel-key, .quest-flag, .fragment { opacity: .36; transform: scale(.72); }
  .wordmark { font-size: clamp(54px, 18vw, 96px); }
}