:root {
  /* Design font intent: Space Grotesk** for labels, implemented with bundled-safe fallbacks. */
  --black: #07060B;
  --cyan: #48F5FF;
  --magenta: #FF3DBE;
  --cream: #F8EBCB;
  --gold: #D7A83F;
  --violet: #632CFF;
  --silver: #D9E4F2;
  --title: Impact, Haettenschweiler, "Arial Black", fantasy;
  --label: "Space Grotesk**", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --note: "Trebuchet MS", "Segoe Print", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--silver);
  background:
    radial-gradient(circle at 18% 8%, rgba(72,245,255,.23), transparent 25rem),
    radial-gradient(circle at 84% 18%, rgba(255,61,190,.22), transparent 24rem),
    linear-gradient(120deg, var(--black), #120825 48%, var(--black));
  font-family: var(--label);
  overflow-x: hidden;
  cursor: none;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .22;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 20% 20%, rgba(248,235,203,.08), transparent 2px);
  mix-blend-mode: screen;
}

.cursor-orb {
  position: fixed;
  width: 24px;
  height: 24px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 22px var(--cyan), inset 0 0 12px rgba(255,61,190,.5);
}
.cursor-orb.needle { width: 34px; height: 8px; border-radius: 20px; border-color: var(--silver); }
.cursor-orb.blade { width: 12px; height: 36px; border-radius: 70% 10% 70% 10%; border-color: var(--gold); }
.cursor-orb.gem { width: 25px; height: 25px; border-radius: 4px; rotate: 45deg; border-color: var(--magenta); }
.cursor-orb.focus { width: 34px; height: 34px; border-color: var(--silver); box-shadow: 0 0 0 12px rgba(217,228,242,.06), 0 0 24px var(--magenta); }

.inventory {
  position: fixed;
  left: 1.1rem;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  gap: .85rem;
  z-index: 70;
}

.charm {
  position: relative;
  width: 3.35rem;
  height: 3.35rem;
  border: 1px solid rgba(217,228,242,.55);
  border-radius: 42% 58% 48% 52%;
  color: var(--cream);
  background: linear-gradient(135deg, rgba(72,245,255,.25), rgba(99,44,255,.38), rgba(255,61,190,.24));
  box-shadow: inset 0 0 14px rgba(255,255,255,.18), 0 0 22px rgba(72,245,255,.18);
  font: 700 .53rem/1 var(--label);
  text-transform: uppercase;
  transition: transform .25s, box-shadow .25s;
}
.charm::before { content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 16px; background: var(--silver); }
.charm:hover, .charm.active { transform: scale(1.18) rotate(-7deg); box-shadow: 0 0 28px var(--magenta), inset 0 0 18px rgba(255,255,255,.28); }

.room {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 8rem) clamp(2rem, 7vw, 7rem) clamp(4rem, 8vw, 7rem) clamp(5rem, 10vw, 9rem);
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px dashed rgba(72,245,255,.2);
}
.room::before {
  content: "";
  position: absolute;
  inset: 10% 8%;
  background: linear-gradient(115deg, transparent 0 45%, rgba(72,245,255,.18) 46% 47%, transparent 48% 100%);
  z-index: -1;
}

h1, h2 {
  margin: 0;
  font-family: var(--title);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--violet), -2px -2px 0 var(--cyan), 0 0 18px rgba(255,61,190,.65);
}
h1 { font-size: clamp(3.8rem, 11vw, 10rem); line-height: .82; max-width: 62rem; }
h2 { font-size: clamp(2.6rem, 7vw, 6.8rem); line-height: .86; }
p { font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.55; }
blockquote { margin: 1rem 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 3rem); color: var(--silver); }
.label { min-height: 1.2em; color: var(--cyan); font: 800 .78rem/1.2 var(--label); letter-spacing: .18em; text-transform: uppercase; }

.chapter, .pattern-sheet, .chrome-card, .sink-note, .prop-label, .mirror-caption, .wristband-note, .final-card {
  position: relative;
  max-width: 42rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgba(217,228,242,.5);
  background: linear-gradient(135deg, rgba(248,235,203,.92), rgba(217,228,242,.72) 38%, rgba(72,245,255,.17));
  color: var(--black);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 18px rgba(255,255,255,.45);
  clip-path: polygon(3% 0, 100% 4%, 97% 95%, 0 100%);
}
.chapter .label, .pattern-sheet .label, .chrome-card .label, .sink-note .label, .prop-label .label, .mirror-caption .label, .wristband-note .label, .final-card .label { color: var(--violet); }
.chapter::before, .pattern-sheet::before, .chrome-card::before, .sink-note::before, .prop-label::before, .mirror-caption::before, .wristband-note::before, .final-card::before {
  content: ""; position: absolute; inset: .7rem; border: 2px dashed rgba(7,6,11,.28); pointer-events: none;
}

.badge-room { min-height: 115vh; display: grid; place-items: center; background: radial-gradient(circle at 50% -10%, rgba(99,44,255,.38), transparent 37rem); }
.spotlight { position: absolute; top: -8%; width: 35vw; height: 95vh; filter: blur(8px); opacity: .35; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.spotlight.cyan { left: 12%; background: var(--cyan); rotate: -16deg; }
.spotlight.magenta { right: 10%; background: var(--magenta); rotate: 17deg; }
.lanyard { position: absolute; top: 0; left: 50%; width: 2px; height: 25vh; background: linear-gradient(var(--silver), var(--cyan)); box-shadow: 0 0 12px var(--cyan); }
.badge { position: absolute; top: 20vh; left: 50%; translate: -50% 0; width: min(22rem, 60vw); padding: 2.5rem 1.4rem 1.7rem; text-align: center; border-radius: 1.4rem; background: linear-gradient(125deg, rgba(217,228,242,.93), rgba(72,245,255,.45) 32%, rgba(255,61,190,.45) 58%, rgba(248,235,203,.9)); color: var(--black); box-shadow: 0 0 45px rgba(72,245,255,.6), inset 0 0 30px rgba(255,255,255,.72); transform-origin: 50% -10rem; z-index: 4; }
.badge.swing { animation: swing 4.8s ease-in-out infinite; }
.badge-hole { position: absolute; top: .8rem; left: 50%; translate: -50% 0; width: 3.1rem; height: .8rem; border-radius: 2rem; background: var(--black); }
.badge p { margin: 0; font: 900 clamp(1.6rem, 4vw, 3rem)/1 var(--title); text-transform: uppercase; }
.badge small { display: block; margin-top: .8rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
@keyframes swing { 0%,100% { rotate: -6deg; } 50% { rotate: 7deg; } }
.revealed-table { position: absolute; inset: auto 6% 7% auto; width: min(46rem, 72vw); height: 30rem; opacity: .88; }
.mannequin { position: absolute; right: 42%; bottom: 0; width: 10rem; height: 22rem; border-radius: 48% 48% 22% 22%; background: linear-gradient(90deg, rgba(217,228,242,.22), rgba(217,228,242,.75), rgba(99,44,255,.24)); box-shadow: inset 0 0 22px var(--cyan), 0 0 40px rgba(255,61,190,.3); }
.mannequin::before { content: ""; position: absolute; top: -4.1rem; left: 50%; translate: -50%; width: 4.2rem; height: 4.8rem; border-radius: 48%; background: var(--silver); }
.mannequin span { position: absolute; inset: 32% 16% auto; height: 3.3rem; border: 3px solid var(--gold); border-left: 0; border-radius: 0 100% 100% 0; }
.paper-pile i { position: absolute; display: block; width: 17rem; height: 9rem; background: rgba(248,235,203,.75); border: 1px dashed var(--black); }
.paper-pile i:nth-child(1) { right: 1rem; bottom: 1rem; rotate: -12deg; }.paper-pile i:nth-child(2) { right: 6rem; bottom: 5rem; rotate: 9deg; }.paper-pile i:nth-child(3) { right: 12rem; bottom: 2rem; rotate: 21deg; }
.half-prop { position: absolute; right: 2rem; bottom: 13rem; width: 18rem; height: 4rem; background: linear-gradient(90deg, var(--silver), var(--cyan), var(--magenta)); clip-path: polygon(0 38%, 72% 38%, 92% 0, 100% 50%, 92% 100%, 72% 62%, 0 62%); filter: drop-shadow(0 0 18px var(--cyan)); }
.badge-tag { position: absolute; left: 10%; bottom: 8%; rotate: -3deg; max-width: 50rem; }
.seam-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.seam-svg path { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-dasharray: 12 14; filter: drop-shadow(0 0 8px var(--cyan)); stroke-dashoffset: 1200; }

.pattern-room { background: radial-gradient(circle at 75% 40%, rgba(248,235,203,.12), transparent 26rem); }
.runway-line { position: absolute; inset: 5% 0; background: linear-gradient(135deg, transparent 48%, rgba(255,61,190,.65) 49%, rgba(72,245,255,.75) 50%, transparent 51%); }
.sheet-a { rotate: -7deg; margin-left: 8%; }
.sheet-b { position: absolute; right: 8%; bottom: 12%; width: min(31rem, 48vw); height: 22rem; rotate: 11deg; background: rgba(248,235,203,.82); }
.arrow { font-weight: 900; color: var(--black); letter-spacing: .14em; }
.notch { position: absolute; width: 5rem; height: 5rem; border: 2px dashed var(--magenta); border-radius: 50%; }.notch-one { right: 20%; top: 30%; }.notch-two { left: 17%; bottom: 17%; }
.maze-thread span { position: absolute; height: 3px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transform-origin: left; animation: stitchPulse 1.8s infinite alternate; }
.maze-thread span:nth-child(1) { left: 18%; top: 62%; width: 24%; rotate: -25deg; }.maze-thread span:nth-child(2) { left: 37%; top: 48%; width: 20%; rotate: 36deg; animation-delay: .2s; }.maze-thread span:nth-child(3) { left: 52%; top: 66%; width: 22%; rotate: -39deg; animation-delay: .4s; }.maze-thread span:nth-child(4) { left: 70%; top: 42%; width: 17%; rotate: 20deg; animation-delay: .6s; }
@keyframes stitchPulse { to { filter: hue-rotate(80deg); transform: scaleX(.82); } }
.tape { position: absolute; width: 9rem; height: 2rem; background: rgba(217,228,242,.55); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 0 12px rgba(255,255,255,.5); }.tape-one { left: 11%; top: 19%; rotate: -18deg; }.tape-two { right: 24%; top: 27%; rotate: 28deg; }.tape-three { right: 14%; bottom: 20%; rotate: -15deg; }

.forge-room { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 3rem; background: radial-gradient(circle at 65% 55%, rgba(215,168,63,.18), transparent 28rem); }
.angled { rotate: 5deg; }
.armor-bench { position: relative; height: 38rem; border: 1px solid rgba(215,168,63,.45); background: linear-gradient(135deg, rgba(217,228,242,.08), rgba(7,6,11,.4)); box-shadow: inset 0 0 40px rgba(72,245,255,.12); }
.torso-armor { position: absolute; left: 34%; top: 18%; width: 15rem; height: 24rem; clip-path: polygon(20% 0, 80% 0, 100% 30%, 78% 100%, 22% 100%, 0 30%); background: linear-gradient(115deg, var(--silver), var(--gold), var(--violet)); filter: drop-shadow(0 0 22px var(--gold)); }
.torso-armor b { position: absolute; left: 18%; width: 64%; height: 3px; background: var(--black); box-shadow: 0 0 0 2px rgba(248,235,203,.28); }.torso-armor b:nth-child(1) { top: 30%; }.torso-armor b:nth-child(2) { top: 49%; }.torso-armor b:nth-child(3) { top: 68%; }
.foam-piece { position: absolute; background: var(--gold); border: 2px solid var(--black); box-shadow: 10px 10px 0 rgba(72,245,255,.18); }.piece-one { left: 8%; bottom: 14%; width: 14rem; height: 8rem; rotate: -17deg; clip-path: polygon(0 20%, 80% 0, 100% 100%, 14% 83%); }.piece-two { right: 7%; top: 14%; width: 12rem; height: 9rem; rotate: 21deg; clip-path: polygon(22% 0, 100% 12%, 80% 100%, 0 74%); }
.glue-string { position: absolute; width: 2px; height: 16rem; background: linear-gradient(var(--cyan), transparent); left: 58%; top: 22%; rotate: 22deg; animation: glueSway 2.5s infinite ease-in-out; }
@keyframes glueSway { 50% { transform: translateX(1.4rem) scaleY(.9); } }
.warning-diamond { position: absolute; right: 17%; bottom: 16%; width: 6rem; height: 6rem; display: grid; place-items: center; rotate: 45deg; background: var(--magenta); color: var(--black); font-weight: 1000; box-shadow: 0 0 25px var(--magenta); }

.wig-room { background: radial-gradient(circle at 55% 55%, rgba(255,61,190,.21), transparent 30rem); }
.sink-note { margin-left: auto; rotate: 4deg; }
.wig-station { position: absolute; left: 8%; bottom: 7%; width: 50rem; max-width: 80vw; height: 37rem; }
.basin { position: absolute; left: 5%; bottom: 0; width: 36rem; height: 11rem; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(72,245,255,.7), rgba(99,44,255,.7) 45%, rgba(217,228,242,.25) 46%, rgba(217,228,242,.8) 62%, transparent 63%); box-shadow: 0 0 36px rgba(72,245,255,.5); }
.wig-head { position: absolute; left: 17rem; bottom: 7rem; width: 10rem; height: 14rem; border-radius: 48% 48% 42% 42%; background: var(--cream); }
.bangs { position: absolute; inset: -3rem -2rem 42% -2rem; border-radius: 50% 50% 30% 30%; background: linear-gradient(135deg, var(--magenta), var(--violet), var(--cyan)); box-shadow: 0 0 26px var(--magenta); }
.curl { position: absolute; border: 5px solid var(--magenta); border-left-color: transparent; border-bottom-color: var(--cyan); border-radius: 50%; animation: curlOrbit 3.5s steps(6) infinite; }.curl-a { left: 12rem; bottom: 18rem; width: 8rem; height: 8rem; }.curl-b { left: 26rem; bottom: 20rem; width: 7rem; height: 7rem; animation-delay: .4s; }.curl-c { left: 22rem; bottom: 10rem; width: 9rem; height: 9rem; animation-delay: .8s; }
@keyframes curlOrbit { to { rotate: 360deg; } }
.droplet { position: absolute; width: 1rem; height: 1.5rem; border-radius: 50% 50% 50% 0; background: var(--cyan); rotate: -45deg; animation: drip 2s infinite; }.d1 { left: 31rem; top: 9rem; }.d2 { left: 13rem; top: 17rem; animation-delay: .5s; background: var(--magenta); }.d3 { left: 24rem; top: 5rem; animation-delay: 1s; }
@keyframes drip { 70% { transform: translateY(5rem); opacity: .2; } 100% { transform: translateY(5rem); opacity: 0; } }

.shrine-room { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: radial-gradient(circle at 70% 45%, rgba(217,228,242,.18), transparent 31rem); }
.prop-label { rotate: -4deg; }
.sword-shrine { position: relative; min-height: 36rem; border-radius: 50%; background: radial-gradient(circle, rgba(217,228,242,.12), transparent 62%); }
.sword { position: absolute; left: 48%; top: 5%; width: 5rem; height: 31rem; transform: rotate(38deg); transform-origin: bottom; filter: drop-shadow(0 0 20px var(--cyan)); }
.sword::before { content: ""; position: absolute; inset: 0 1.55rem 8rem; background: linear-gradient(90deg, var(--silver), white, var(--cyan)); clip-path: polygon(50% 0, 100% 90%, 50% 100%, 0 90%); }
.sword::after { content: ""; position: absolute; left: 0; bottom: 6.8rem; width: 5rem; height: 1.4rem; background: var(--gold); border-radius: 1rem; }
.sword span { position: absolute; left: 2rem; bottom: 0; width: 1rem; height: 8rem; background: var(--violet); border: 2px solid var(--gold); }
.safety-cap { position: absolute; right: 18%; top: 18%; width: 5rem; height: 5rem; border-radius: 50% 50% 10% 10%; background: var(--magenta); box-shadow: 0 0 20px var(--magenta); }
.gem-grid { position: absolute; left: 12%; bottom: 10%; display: grid; grid-template-columns: repeat(4, 2.4rem); gap: 1.1rem; }
.gem-grid i { width: 1.5rem; height: 1.5rem; rotate: 45deg; background: linear-gradient(135deg, var(--cyan), var(--magenta)); opacity: 0; transform: scale(.2); transition: opacity .35s, transform .35s; box-shadow: 0 0 18px var(--magenta); }
.gem-grid.placed i { opacity: 1; transform: scale(1); }

.mirror-room { background: radial-gradient(circle at 54% 48%, rgba(72,245,255,.16), transparent 33rem); }
.mirror-caption { position: absolute; left: 9%; top: 14%; rotate: 3deg; z-index: 2; }
.mirror-portal { position: absolute; right: 12%; top: 10%; width: min(42rem, 58vw); height: 78vh; perspective: 1200px; }
.mirror-rim { position: absolute; inset: 0; border-radius: 50%; border: 1.8rem ridge var(--silver); background: linear-gradient(125deg, rgba(72,245,255,.25), rgba(99,44,255,.5), rgba(255,61,190,.22)); box-shadow: 0 0 55px rgba(72,245,255,.45), inset 0 0 60px rgba(217,228,242,.34); animation: mirrorTurn 7s infinite ease-in-out; }
@keyframes mirrorTurn { 50% { transform: rotateY(26deg) rotateZ(3deg); } }
.alternate-silhouette { position: absolute; left: 50%; bottom: 9%; translate: -50%; width: 13rem; height: 35rem; background: linear-gradient(var(--cream), var(--magenta), var(--violet)); clip-path: polygon(42% 0, 58% 0, 64% 17%, 94% 34%, 76% 46%, 68% 100%, 32% 100%, 24% 46%, 6% 34%, 36% 17%); filter: drop-shadow(0 0 26px var(--cyan)); }

.flash-room { background: linear-gradient(90deg, rgba(7,6,11,1), rgba(99,44,255,.38), rgba(7,6,11,1)); }
.wristband-note { margin-left: auto; rotate: -5deg; }
.hallway { position: absolute; left: 5%; bottom: 0; width: 90%; height: 52vh; border-top: 2px solid rgba(217,228,242,.2); background: repeating-linear-gradient(90deg, transparent 0 8rem, rgba(217,228,242,.06) 8rem 8.2rem); }
.flash-star { position: absolute; width: 8rem; height: 8rem; background: var(--silver); clip-path: polygon(50% 0, 57% 40%, 100% 50%, 57% 60%, 50% 100%, 43% 60%, 0 50%, 43% 40%); opacity: 0; animation: flash 2.4s infinite; }.s1 { left: 8%; top: 16%; }.s2 { left: 34%; top: 48%; animation-delay: .6s; }.s3 { right: 28%; top: 8%; animation-delay: 1.1s; }.s4 { right: 8%; top: 40%; animation-delay: 1.7s; }
@keyframes flash { 8% { opacity: 1; filter: blur(0) drop-shadow(0 0 40px white); transform: scale(1.2); } 20%,100% { opacity: 0; transform: scale(.4); } }
.run-silhouette { position: absolute; left: 45%; bottom: 0; width: 11rem; height: 26rem; background: linear-gradient(var(--silver), var(--cyan), var(--black)); clip-path: polygon(42% 0, 58% 0, 68% 22%, 100% 40%, 73% 52%, 88% 100%, 55% 100%, 50% 62%, 36% 100%, 5% 100%, 29% 52%, 0 40%, 32% 22%); animation: hallwayRun 3.5s infinite ease-in-out; }
@keyframes hallwayRun { 50% { transform: translateX(4rem) skewX(-5deg); } }

.parade-room { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 65%, rgba(255,61,190,.28), transparent 34rem), radial-gradient(circle at 50% 50%, rgba(72,245,255,.2), transparent 44rem); }
.final-card { z-index: 2; max-width: 56rem; background: linear-gradient(135deg, rgba(7,6,11,.75), rgba(99,44,255,.52), rgba(217,228,242,.22)); color: var(--cream); border-color: var(--cyan); }
.final-card .label { color: var(--cyan); }
.parade-line { position: absolute; bottom: 4%; display: flex; gap: clamp(1rem, 4vw, 4rem); align-items: flex-end; opacity: .82; }
.final-silhouette { width: clamp(5rem, 10vw, 9rem); height: clamp(18rem, 32vw, 30rem); background: linear-gradient(var(--silver), var(--magenta), var(--violet)); filter: drop-shadow(0 0 26px var(--cyan)); }
.mage { clip-path: polygon(50% 0, 70% 20%, 100% 100%, 0 100%, 30% 20%); }.knight { clip-path: polygon(35% 0, 65% 0, 80% 18%, 100% 45%, 72% 100%, 28% 100%, 0 45%, 20% 18%); }.idol { clip-path: polygon(42% 0, 58% 0, 78% 22%, 100% 65%, 62% 58%, 70% 100%, 30% 100%, 38% 58%, 0 65%, 22% 22%); }.mech { clip-path: polygon(20% 0, 80% 0, 90% 28%, 100% 28%, 100% 70%, 82% 70%, 72% 100%, 28% 100%, 18% 70%, 0 70%, 0 28%, 10% 28%); }
.mirror-glow { position: absolute; inset: 12% 18%; border-radius: 50%; border: 1rem solid rgba(217,228,242,.35); box-shadow: inset 0 0 80px rgba(72,245,255,.25), 0 0 80px rgba(255,61,190,.35); }

.active-room .chapter, .active-room .pattern-sheet, .active-room .chrome-card, .active-room .sink-note, .active-room .prop-label, .active-room .mirror-caption, .active-room .wristband-note, .active-room .final-card { animation: paperSettle .9s both; }
@keyframes paperSettle { from { transform: scale(.92) rotate(-3deg); opacity: .35; } to { transform: scale(1) rotate(0); opacity: 1; } }

@media (max-width: 820px) {
  body { cursor: auto; }
  .cursor-orb { display: none; }
  .inventory { left: .4rem; gap: .5rem; }
  .charm { width: 2.65rem; height: 2.65rem; font-size: .45rem; }
  .room { padding-left: 4rem; padding-right: 1rem; }
  .forge-room, .shrine-room { grid-template-columns: 1fr; }
  .revealed-table, .wig-station, .mirror-portal { position: relative; inset: auto; width: 100%; margin-top: 4rem; }
  .badge-tag, .mirror-caption { position: relative; left: auto; top: auto; bottom: auto; margin-top: 50vh; }
  .parade-line { opacity: .45; }
}