:root {
  /* Inter Tight* Tight** from Google Fonts for crisp compact paragraphs that still align with the condensed seed. */
  --orange: #FF6B00;
  --pink: #FF3DBE;
  --mint: #62FFB8;
  --cyan: #20E6FF;
  --violet: #7A35FF;
  --ink: #151022;
  --lemon: #DFFF00;
  --cream: #FFF7D6;
  --mx: 0px;
  --my: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--ink);
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
}

.mesh {
  position: fixed;
  inset: -18vmax;
  z-index: -3;
  background:
    radial-gradient(circle at 18% 22%, #DFFF00 0 8%, transparent 23%),
    radial-gradient(circle at 80% 18%, #62FFB8 0 11%, transparent 28%),
    radial-gradient(circle at 72% 82%, #20E6FF 0 14%, transparent 32%),
    linear-gradient(135deg, #FF6B00, #FF3DBE 34%, #7A35FF 68%, #20E6FF);
  filter: saturate(1.18);
  animation: meshDrift 18s ease-in-out infinite alternate;
}

.mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(255,247,214,.16) 25%, transparent 25% 75%, rgba(255,247,214,.16) 75%),
    linear-gradient(45deg, rgba(21,16,34,.11) 25%, transparent 25% 75%, rgba(21,16,34,.11) 75%);
  background-size: 42px 42px;
  background-position: 0 0, 21px 21px;
  mix-blend-mode: soft-light;
}

.world { position: relative; }
.act {
  min-height: 100vh;
  padding: clamp(18px, 3vw, 42px);
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

.act::before {
  content: attr(data-act);
  position: absolute;
  top: 24px;
  left: clamp(88px, 8vw, 140px);
  font-family: "Barlow Condensed", Arial Narrow, sans-serif;
  font-size: clamp(22px, 4vw, 58px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 5px 5px 0 var(--ink);
  z-index: 4;
}

.glyph-nav {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(255,247,214,.2);
  border: 2px solid rgba(255,247,214,.7);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  box-shadow: 8px 9px 0 rgba(21,16,34,.4);
}
.glyph-nav a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lemon);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .25s ease, background .25s ease;
}
.glyph-nav a:hover { transform: translateY(-4px) scale(1.08); background: var(--cyan); }
.glyph-nav a.is-current { background: var(--pink); color: var(--cream); }

.back-word {
  position: absolute;
  z-index: -1;
  font-family: "Bebas Neue", Impact, sans-serif;
  line-height: .78;
  letter-spacing: -.03em;
  color: rgba(255,247,214,.22);
  -webkit-text-stroke: 2px rgba(21,16,34,.52);
  text-shadow: 18px 22px 0 rgba(21,16,34,.18);
  pointer-events: none;
}
.word-site { font-size: clamp(110px, 24vw, 360px); transform: rotate(-4deg); }
.word-a { top: 5vh; left: 3vw; font-size: clamp(160px, 32vw, 520px); color: rgba(223,255,0,.2); }
.word-six { font-size: clamp(320px, 62vw, 980px); color: rgba(255,61,190,.24); }
.word-c { right: -3vw; font-size: clamp(360px, 68vw, 1040px); color: rgba(98,255,184,.22); }

.shelf {
  width: min(1450px, 96vw);
  min-height: min(780px, 86vh);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(84px, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
  transform: rotate(calc(var(--rot, -1deg))) translate3d(calc(var(--mx) * -.018), calc(var(--my) * -.018), 0);
  transition: transform .6s cubic-bezier(.2,.9,.15,1);
}
.act-6 .shelf { --rot: 1.2deg; }
.act-c .shelf { --rot: -1.7deg; }

.tile {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 28px;
  padding: clamp(16px, 2vw, 28px);
  background: linear-gradient(145deg, rgba(255,247,214,.9), rgba(255,247,214,.48));
  box-shadow: 9px 11px 0 var(--ink), 18px 22px 0 rgba(255,247,214,.25);
  transform: translate3d(calc(var(--mx) * var(--depth, 0)), calc(var(--my) * var(--depth, 0)), 0) scale(1);
  transition: transform .32s cubic-bezier(.15,1.2,.25,1), filter .32s ease, box-shadow .32s ease, opacity .32s ease;
}
.tile.is-waiting { opacity: 0; transform: translateY(34px) scale(.94) rotate(-2deg); }
.tile.is-in { opacity: 1; }
.tile::before,
.tile::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.tile::before {
  inset: 12px;
  border: 2px dashed rgba(21,16,34,.25);
  border-radius: 22px;
}
.tile::after {
  width: 90px;
  height: 90px;
  right: -24px;
  bottom: -22px;
  background: radial-gradient(circle, var(--lemon) 0 15%, transparent 16% 100%);
  background-size: 18px 18px;
  opacity: .75;
}
.shelf:hover .tile { opacity: .82; filter: saturate(.9); }
.shelf:hover .tile:hover {
  opacity: 1;
  z-index: 12;
  filter: saturate(1.35) contrast(1.04);
  transform: translate3d(calc(var(--mx) * var(--depth, 0)), calc(var(--my) * var(--depth, 0)), 0) scale(1.1) rotate(.7deg);
  box-shadow: 14px 18px 0 var(--ink), 28px 33px 0 rgba(223,255,0,.35);
}

h1, h2, .chapter { font-family: "Bebas Neue", Impact, sans-serif; margin: 0; line-height: .9; }
h1 { font-size: clamp(72px, 13vw, 210px); letter-spacing: -.03em; color: var(--ink); text-shadow: 7px 8px 0 var(--pink); }
h2 { font-size: clamp(48px, 8vw, 126px); }
p, span, b, strong, em { font-family: "Barlow Condensed", Arial Narrow, sans-serif; font-size: clamp(18px, 2vw, 28px); }
p { margin: 12px 0 0; max-width: 540px; font-weight: 600; }
.chapter { font-size: clamp(64px, 10vw, 180px); color: var(--lemon); -webkit-text-stroke: 2px var(--ink); }
.reveal {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 8px 14px;
  color: var(--cream);
  background: var(--ink);
  border: 2px solid var(--cream);
  border-radius: 999px;
  text-align: center;
  transform: translateY(140%);
  transition: transform .26s ease;
}
.tile:hover .reveal { transform: translateY(0); }

.tile-hero { grid-column: 1 / span 6; grid-row: 1 / span 4; background: radial-gradient(circle at 88% 14%, #DFFF00 0 13%, transparent 24%), linear-gradient(135deg, #FFF7D6, #FF6B00 72%); }
.tile-loop { grid-column: 7 / span 3; grid-row: 1 / span 3; background: linear-gradient(135deg, #20E6FF, #7A35FF); color: var(--cream); }
.tile-strip { grid-column: 10 / span 3; grid-row: 1 / span 2; background: #FFF7D6; display: flex; flex-direction: column; justify-content: space-around; }
.tile-checker { grid-column: 10 / span 3; grid-row: 3 / span 2; background-color: #FF3DBE; background-image: linear-gradient(45deg, #151022 25%, transparent 25% 75%, #151022 75%), linear-gradient(45deg, #151022 25%, transparent 25% 75%, #151022 75%); background-size: 44px 44px; background-position: 0 0, 22px 22px; color: var(--cream); }
.tile-glyph { grid-column: 7 / span 1; grid-row: 4 / span 1; background: #DFFF00; display: grid; place-items: center; text-align: center; }
.tile-domino { grid-column: 8 / span 2; grid-row: 4 / span 3; background: linear-gradient(180deg, #62FFB8, #FFF7D6); }
.tile-crescent { grid-column: 1 / span 3; grid-row: 5 / span 2; background: linear-gradient(135deg, #7A35FF, #FF3DBE); color: var(--cream); }

.six-portal, .giant-six, .emblem {
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 44% 56% 50% 50%;
  background: radial-gradient(circle at 52% 34%, #FFF7D6 0 14%, transparent 15%), conic-gradient(from 20deg, #DFFF00, #20E6FF, #FF3DBE, #FF6B00, #DFFF00);
  box-shadow: inset 10px 10px 0 rgba(21,16,34,.2), 8px 10px 0 var(--ink);
  animation: tokenSpin 11s linear infinite;
}
.six-portal { width: min(210px, 100%); aspect-ratio: 1; margin: auto; }
.six-portal span, .giant-six span { font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(120px, 14vw, 230px); color: var(--ink); }
.mini { width: 180px; }
.triangle-stack i { position: absolute; width: 0; height: 0; border-left: 38px solid transparent; border-right: 38px solid transparent; border-bottom: 78px solid #20E6FF; filter: drop-shadow(6px 7px 0 #151022); }
.triangle-stack i:nth-child(1) { right: 12%; top: 18%; transform: rotate(18deg); }
.triangle-stack i:nth-child(2) { right: 25%; bottom: 16%; border-bottom-color: #DFFF00; transform: rotate(-20deg) scale(.7); }
.triangle-stack i:nth-child(3) { left: 34%; bottom: 10%; border-bottom-color: #FF3DBE; transform: rotate(34deg) scale(.55); }
.ladder { width: 60%; height: 70%; margin: 24px auto 0; background: repeating-linear-gradient(0deg, transparent 0 22px, #151022 23px 28px), linear-gradient(90deg, transparent 0 18%, #151022 18% 27%, transparent 27% 73%, #151022 73% 82%, transparent 82%); }
.crescent, .tile-magnet div, .tile-smile div { width: 170px; aspect-ratio: 1; border: 24px solid #DFFF00; border-right-color: transparent; border-radius: 50%; filter: drop-shadow(8px 9px 0 #151022); }
.glyph { font-family: "Bebas Neue", Impact, sans-serif; font-size: 74px; animation: blinkPop 1.8s steps(2) infinite; }

.shelf-two .tile-orbit { grid-column: 3 / span 6; grid-row: 1 / span 5; background: linear-gradient(135deg, #151022, #7A35FF 58%, #20E6FF); color: var(--cream); }
.tile-badge { grid-column: 1 / span 2; grid-row: 1 / span 2; background: #DFFF00; }
.tile-dots { grid-column: 9 / span 3; grid-row: 1 / span 2; background: #FF6B00; display: flex; align-items: center; justify-content: center; gap: 12px; }
.tile-dots span { width: 22px; height: 22px; border-radius: 50%; background: #FFF7D6; box-shadow: 4px 5px 0 #151022; animation: dotHop 1s ease-in-out infinite alternate; }
.tile-dots span:nth-child(even) { animation-delay: .2s; }
.tile-magnet { grid-column: 10 / span 3; grid-row: 3 / span 3; background: #62FFB8; }
.tile-label { grid-column: 1 / span 2; grid-row: 3 / span 3; background: #FFF7D6; display: grid; align-content: center; }
.tile-token { grid-column: 8 / span 2; grid-row: 5 / span 2; background: #FF3DBE; display: flex; align-items: center; justify-content: space-around; }
.tile-token span { font-family: "Bebas Neue", Impact, sans-serif; font-size: 76px; color: var(--cream); text-shadow: 5px 6px 0 var(--ink); }
.giant-six { width: min(440px, 70%); aspect-ratio: 1; float: right; margin-left: 18px; }

.shelf-three .tile-release { grid-column: 2 / span 7; grid-row: 1 / span 5; background: linear-gradient(135deg, #FFF7D6 0 30%, #62FFB8 30% 62%, #DFFF00 62%); }
.tile-smile { grid-column: 9 / span 3; grid-row: 1 / span 2; background: #20E6FF; }
.tile-poem { grid-column: 10 / span 2; grid-row: 3 / span 2; background: #151022; color: #FFF7D6; }
.tile-final-loop { grid-column: 1 / span 2; grid-row: 4 / span 2; background: #FF3DBE; color: #FFF7D6; }
.tile-open { grid-column: 9 / span 4; grid-row: 5 / span 2; background: linear-gradient(135deg, #FF6B00, #FF3DBE); color: var(--cream); }
.tile-open span { font-family: "Bebas Neue", Impact, sans-serif; font-size: 110px; }
.emblem { width: min(360px, 80%); aspect-ratio: 1; margin-top: 28px; grid-template-columns: repeat(3, 1fr); animation-duration: 7s; }
.emblem span { font-family: "Bebas Neue", Impact, sans-serif; font-size: 82px; color: var(--ink); }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.confetti span { position: absolute; width: 18px; height: 18px; border: 2px solid var(--ink); background: var(--lemon); box-shadow: 3px 4px 0 var(--ink); transform: translate3d(calc(var(--mx) * .12), calc(var(--my) * .12), 0); }
.confetti span:nth-child(1) { left: 8%; top: 22%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #20E6FF; }
.confetti span:nth-child(2) { left: 18%; top: 78%; border-radius: 50%; background: #FF3DBE; }
.confetti span:nth-child(3) { right: 12%; top: 18%; transform: rotate(20deg); background: #DFFF00; }
.confetti span:nth-child(4) { right: 22%; top: 62%; border-radius: 50%; background: #62FFB8; }
.confetti span:nth-child(5) { left: 50%; top: 12%; background: #FFF7D6; }
.confetti span:nth-child(6) { left: 68%; top: 86%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #FF6B00; }
.confetti span:nth-child(7) { left: 35%; top: 60%; background: #7A35FF; }
.confetti span:nth-child(8) { right: 4%; top: 42%; border-radius: 50%; background: #FFF7D6; }

@keyframes meshDrift { from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(5deg) scale(1.08); } }
@keyframes tokenSpin { to { transform: rotate(360deg); } }
@keyframes blinkPop { 50% { transform: scale(1.24) rotate(12deg); color: #FF3DBE; } }
@keyframes dotHop { to { transform: translateY(-18px) scale(1.12); background: #DFFF00; } }

@media (max-width: 900px) {
  .act { padding-top: 88px; }
  .shelf { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(110px, auto); min-height: auto; }
  .tile-hero, .shelf-two .tile-orbit, .shelf-three .tile-release { grid-column: 1 / -1; grid-row: span 4; }
  .tile-loop, .tile-strip, .tile-checker, .tile-domino, .tile-crescent, .tile-badge, .tile-dots, .tile-magnet, .tile-label, .tile-token, .tile-smile, .tile-poem, .tile-final-loop, .tile-open { grid-column: span 3; grid-row: span 2; }
  .tile-glyph { grid-column: span 2; grid-row: span 1; }
  .word-site { font-size: 28vw; }
}

@media (max-width: 560px) {
  .shelf { grid-template-columns: 1fr; }
  .tile, .tile-hero, .tile-loop, .tile-strip, .tile-checker, .tile-glyph, .tile-domino, .tile-crescent, .shelf-two .tile-orbit, .tile-badge, .tile-dots, .tile-magnet, .tile-label, .tile-token, .shelf-three .tile-release, .tile-smile, .tile-poem, .tile-final-loop, .tile-open { grid-column: 1; grid-row: auto; }
  .glyph-nav { transform: scale(.86); transform-origin: top left; }
  h1 { font-size: 88px; }
}