:root {
  --deep: #17151C;
  --moss: #6FAF5F;
  --cream: #F3E7CF;
  --violet: #5C4BFF;
  --coral: #FF5C6C;
  --pencil: #837A70;
  --ochre: #C78A3A;
  --cyan: #48D6FF;
  --shadow: rgba(0,0,0,.42);
  --version-tags-marker: "tags";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 52% 0%, rgba(72,214,255,.12), transparent 32rem),
    radial-gradient(circle at 10% 18%, rgba(92,75,255,.2), transparent 24rem),
    var(--deep);
  font-family: "Nunito Sans", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image:
    linear-gradient(rgba(243,231,207,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,231,207,.04) 1px, transparent 1px),
    radial-gradient(circle, rgba(243,231,207,.18) 1px, transparent 1.6px);
  background-size: 42px 42px, 42px 42px, 17px 17px;
  mix-blend-mode: screen;
}

.lamp {
  position: fixed;
  top: -11rem;
  left: 50%;
  width: 22rem;
  height: 22rem;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  background: radial-gradient(ellipse at center, rgba(243,231,207,.62), rgba(199,138,58,.18) 38%, transparent 68%);
  opacity: 0;
  z-index: 8;
  pointer-events: none;
  animation: lampClick 1.4s .35s forwards;
}

.lamp span {
  display: block;
  width: 3rem;
  height: 7rem;
  margin: 0 auto;
  background: var(--ochre);
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 0 40px rgba(243,231,207,.6);
}

@keyframes lampClick { 0%, 35% { opacity: 0; } 42% { opacity: .9; } 48% { opacity: .18; } 100% { opacity: 1; } }

.quest-compass {
  position: fixed;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%) rotate(-2deg);
  z-index: 30;
  display: grid;
  gap: .45rem;
  padding: .65rem;
  background: rgba(23,21,28,.72);
  border: 2px dashed var(--pencil);
  border-radius: 2rem;
  box-shadow: 0 1rem 2rem var(--shadow);
}

.quest-compass button {
  width: 3.2rem;
  height: 2rem;
  border: 0;
  border-radius: 1rem 1rem .5rem 1rem;
  background: var(--cream);
  color: var(--deep);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
}

.quest-compass button:nth-child(2n) { --tilt: 4deg; }
.quest-compass button:nth-child(3n) { --tilt: -5deg; }
.quest-compass button.is-active { background: var(--cyan); box-shadow: 0 0 18px rgba(72,214,255,.75); }

.route-map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 4;
  opacity: .55;
}

#questPath, .quest-path-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#questPath {
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-dasharray: 16 18;
  filter: drop-shadow(0 0 8px rgba(72,214,255,.4));
}

.quest-path-shadow { stroke: var(--pencil); stroke-width: 14; opacity: .2; transform: translate(7px, 8px); }

.room {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 6vw, 7rem);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.room::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  z-index: -2;
  border-radius: 2rem;
  background:
    linear-gradient(100deg, rgba(243,231,207,.08), transparent 27%),
    repeating-linear-gradient(0deg, rgba(243,231,207,.06) 0 1px, transparent 1px 28px),
    rgba(23,21,28,.55);
  border: 2px solid rgba(131,122,112,.28);
  box-shadow: 0 2rem 5rem var(--shadow);
  transform: rotate(var(--room-tilt, -1.5deg));
}

.room-copy {
  max-width: 38rem;
  padding: 2rem;
  color: var(--deep);
  background: var(--cream);
  border: 3px solid var(--deep);
  box-shadow: 1rem 1rem 0 rgba(199,138,58,.8), 1.3rem 1.3rem 0 rgba(23,21,28,.45);
  transform: rotate(-2deg);
}

h1, h2, .tape-title {
  font-family: "Workbench", system-ui;
  letter-spacing: .03em;
  line-height: .88;
  margin: 0;
}

h1 { font-size: clamp(4rem, 13vw, 12rem); max-width: 70rem; text-shadow: .08em .07em 0 rgba(92,75,255,.5), -.035em -.035em 0 rgba(255,92,108,.6); }
h2 { font-size: clamp(3rem, 8vw, 7rem); color: var(--deep); }
p { font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.55; }
.narration, .room-copy p:not(.version-tag) { font-family: "Fraunces", serif; font-weight: 650; }
.version-tag { font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--cyan); }
.room-copy .version-tag { color: var(--violet); }

.blank-table { justify-items: start; align-content: center; --room-tilt: 1deg; }
.blank-table::after {
  content: "";
  position: absolute;
  width: 140vw;
  height: 30vh;
  left: -15vw;
  bottom: -13vh;
  background: linear-gradient(90deg, #0f0d13, #2a211a, #0f0d13);
  transform: rotate(-3deg);
  z-index: -1;
}

.tape-title {
  display: flex;
  gap: .22em;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: clamp(2.4rem, 7vw, 7rem);
  color: var(--deep);
  transform: rotate(-2deg);
}

.tape-title span, .tape-title b {
  display: inline-block;
  padding: .08em .2em .15em;
  background: var(--cream);
  box-shadow: .18em .18em 0 rgba(199,138,58,.75);
  transition: transform .7s cubic-bezier(.2, 1.6, .35, 1);
}
.tape-title b { background: var(--coral); font-style: normal; }
.tape-title.is-peeled span:first-child { transform: translateY(-.18em) rotate(-7deg); }

.mechanic, .stamp-button {
  border: 3px solid var(--deep);
  border-radius: .6rem 1.2rem .7rem 1.4rem;
  padding: .9rem 1.2rem;
  background: var(--moss);
  color: var(--deep);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: .45rem .45rem 0 var(--deep);
  transition: transform .2s, box-shadow .2s;
}
.mechanic:hover, .stamp-button:hover { transform: translate(.25rem,.25rem) rotate(-1deg); box-shadow: .2rem .2rem 0 var(--deep); }

.cardboard-tile, .inventory, .plank, .component, .hatch-panel, .blank-again {
  background: var(--ochre);
  color: var(--deep);
  border: 3px solid rgba(23,21,28,.86);
  box-shadow: .8rem .8rem 0 rgba(0,0,0,.28);
}
.cardboard-tile { position: absolute; right: 14%; bottom: 13%; padding: 2rem; font-family: "Space Mono", monospace; transform: rotate(8deg); animation: pushTile 2.2s .8s both; }
@keyframes pushTile { from { transform: translateX(38vw) rotate(38deg); } to { transform: translateX(0) rotate(8deg); } }

.pencil-note { position: absolute; right: 20%; top: 21%; color: var(--pencil); font-family: "Fraunces", serif; transform: rotate(8deg); }
.proto-sprite { position: absolute; width: 4.5rem; height: 4.5rem; background: var(--cyan); border: 3px solid var(--cream); border-radius: 1rem; box-shadow: 0 0 24px rgba(72,214,255,.85); animation: spriteBob 2.6s infinite ease-in-out; }
.proto-sprite::before, .proto-sprite::after { content: ""; position: absolute; top: .8rem; width: 2.1rem; height: 1.35rem; background: rgba(243,231,207,.9); border: 2px solid var(--deep); }
.proto-sprite::before { left: -1.6rem; transform: rotate(-26deg); }
.proto-sprite::after { right: -1.6rem; transform: rotate(26deg); }
.proto-sprite i { position: absolute; right: -2rem; bottom: .2rem; width: 2.7rem; height: .35rem; background: var(--pencil); transform: rotate(20deg); }
.hero-sprite { right: 21%; bottom: 24%; }
@keyframes spriteBob { 50% { transform: translateY(-.7rem) rotate(3deg); } }

.sketch-gate { grid-template-columns: 1fr 1fr; gap: 2rem; --room-tilt: -2deg; }
.paper-cut { position: absolute; top: 23%; width: 25vw; min-width: 16rem; height: 45vh; background: var(--cream); color: var(--deep); font-family: "Workbench"; font-size: 4rem; display: grid; place-items: center; border: 4px dashed var(--pencil); box-shadow: 1rem 1rem 0 rgba(92,75,255,.4); transition: transform .9s cubic-bezier(.2, 1.2, .3, 1); }
.gate-left { left: 11%; clip-path: polygon(0 7%, 84% 0, 100% 45%, 77% 100%, 5% 92%); transform: translateX(-25vw) rotate(-14deg); }
.gate-right { left: 31%; clip-path: polygon(13% 0, 100% 7%, 88% 95%, 0 100%, 20% 49%); transform: translateX(32vw) rotate(12deg); }
.sketch-gate.is-open .gate-left { transform: translateX(0) rotate(-5deg); }
.sketch-gate.is-open .gate-right { transform: translateX(0) rotate(6deg); }
.portal-core { position: absolute; left: 28%; top: 32%; width: 14rem; height: 16rem; background: radial-gradient(circle, var(--cyan), var(--violet) 64%, transparent 67%); border-radius: 42% 48% 44% 53%; filter: blur(.3px); opacity: .65; animation: portalPulse 3s infinite; }
@keyframes portalPulse { 50% { transform: scale(1.08) rotate(4deg); filter: hue-rotate(30deg); } }
.brad { position: absolute; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--cream), var(--ochre) 45%, #5d3915); z-index: 2; }
.pin-a { left: 14%; top: 25%; }.pin-b { left: 53%; top: 67%; }
.inventory { position: absolute; padding: 1rem; font-family: "Space Mono", monospace; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); width: 10rem; height: 8rem; display: grid; place-items: center; text-align: center; }
.hex-a { right: 13%; top: 18%; background: var(--moss); }.hex-b { right: 8%; bottom: 25%; background: var(--coral); }.hex-c { right: 28%; bottom: 10%; background: var(--cyan); }

.button-orchard { --room-tilt: 2deg; }
.orchard-copy { position: absolute; left: 9%; top: 15%; z-index: 3; }
.orchard-branch { position: absolute; width: 75vw; height: 16rem; border-top: 1.2rem solid var(--moss); border-radius: 55% 35% 0 0; transform: rotate(-10deg); top: 40%; left: 16%; }
.fruit { position: absolute; border: 3px solid var(--deep); border-radius: 48% 52% 41% 59%; padding: 1.2rem; min-width: 8rem; background: var(--cream); color: var(--deep); font-family: "Fraunces", serif; font-weight: 800; cursor: pointer; box-shadow: .6rem .6rem 0 rgba(0,0,0,.35); animation: fruitSwing 3.4s infinite ease-in-out; }
.fruit::before { content: ""; position: absolute; left: 48%; top: -4rem; width: 2px; height: 4rem; background: var(--pencil); }
.fruit-good { left: 47%; top: 39%; background: var(--moss); }.fruit-bug { left: 66%; top: 28%; background: var(--ochre); animation-delay: .4s; }.fruit-crossed { left: 58%; top: 62%; background: var(--coral); text-decoration: line-through; animation-delay: .7s; }.fruit-glow { left: 79%; top: 52%; background: var(--cyan); box-shadow: 0 0 28px rgba(72,214,255,.8), .6rem .6rem 0 rgba(0,0,0,.35); animation-delay: 1s; }
@keyframes fruitSwing { 50% { transform: rotate(4deg) translateY(.4rem); } }
.annotation-card { position: absolute; right: 8%; bottom: 10%; width: 19rem; min-height: 7rem; padding: 1.3rem; background: var(--deep); border: 2px dashed var(--cyan); color: var(--cream); font-family: "Space Mono", monospace; transform: rotate(3deg); }
.bug { position: absolute; width: 1.8rem; height: 1.1rem; background: var(--deep); border: 2px solid var(--coral); border-radius: 50%; transition: transform .8s; }.bug::before { content: ""; position: absolute; inset: .25rem; background: var(--coral); border-radius: 50%; }.beetle-one { left: 70%; top: 40%; }.beetle-two { left: 62%; top: 73%; }.bug.scurry { transform: translateX(5rem) rotate(260deg); }

.failure-bridge { --room-tilt: -3deg; min-height: 115vh; }
.diagonal-stage { position: relative; width: min(78rem, 92vw); height: 42rem; transform: rotate(-11deg); }
.bridge-copy { position: absolute; left: 0; top: 0; transform: rotate(8deg); }
.plank { position: absolute; width: 17rem; padding: 1.2rem; font-family: "Space Mono", monospace; background: var(--ochre); transform-origin: center; animation: wobble 2.3s infinite; }
.p1 { left: 28%; top: 44%; transform: rotate(8deg); }.p2 { left: 43%; top: 51%; transform: rotate(-6deg); animation-delay: .3s; }.p3 { left: 57%; top: 45%; transform: rotate(10deg); animation-delay: .6s; }.p4 { left: 70%; top: 53%; transform: rotate(-4deg); background: var(--moss); animation-delay: .9s; }
@keyframes wobble { 50% { translate: 0 .45rem; rotate: 2deg; } }
.ruler { position: absolute; left: 50%; top: 30%; padding: .8rem 4rem; background: var(--cream); color: var(--deep); font-family: "Space Mono"; transform: rotate(21deg); border: 2px solid var(--deep); }
.snapped::after { content: ""; position: absolute; inset: -1rem 48%; border-left: 5px solid var(--coral); transform: rotate(21deg); }
.flag { position: absolute; right: 7%; top: 35%; background: var(--coral); color: var(--deep); padding: 1rem; font-family: "Workbench"; font-size: 2rem; transform: rotate(17deg); }

.lantern-cave { background: radial-gradient(circle at 70% 48%, rgba(92,75,255,.22), transparent 29rem); }
.cave-copy { position: absolute; left: 8%; top: 17%; }
.lantern-trigger { position: absolute; left: 12%; bottom: 18%; background: var(--cyan); }
.lantern { position: absolute; max-width: 15rem; padding: 1.2rem; border-radius: 50% 45% 52% 48%; background: rgba(243,231,207,.16); border: 2px solid var(--cyan); color: var(--cream); font-family: "Fraunces"; opacity: .35; box-shadow: 0 0 12px rgba(72,214,255,.25); transition: opacity .6s, box-shadow .6s, transform .6s; animation: flicker 2.7s infinite; }
.lanterns-lit .lantern { opacity: 1; box-shadow: 0 0 44px rgba(72,214,255,.85); transform: translateY(-.5rem) scale(1.04); }
.l1 { right: 26%; top: 24%; }.l2 { right: 9%; top: 46%; animation-delay: .5s; }.l3 { right: 31%; bottom: 20%; animation-delay: 1s; }
@keyframes flicker { 50% { filter: brightness(1.3); } 55% { filter: brightness(.8); } }
.wall-carving { position: absolute; color: rgba(243,231,207,.42); font-family: "Space Mono"; border-bottom: 1px dashed var(--pencil); }.c1 { right: 8%; top: 18%; transform: rotate(4deg); }.c2 { right: 18%; bottom: 10%; color: var(--coral); font-size: 2rem; font-family: "Workbench"; }
.firefly { position: absolute; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); animation: fly 5s infinite linear; }.f1 { left: 53%; top: 45%; }.f2 { left: 77%; top: 31%; animation-delay: -1.8s; }.f3 { left: 68%; top: 71%; animation-delay: -3s; }
@keyframes fly { 25% { transform: translate(3rem, -4rem); } 50% { transform: translate(7rem, 1rem); } 75% { transform: translate(2rem, 4rem); } }

.playtest-arena { --room-tilt: 1.5deg; display: block; padding-top: 8rem; }
.arena-copy { margin-left: 4vw; }
.arena-track { margin-top: 3rem; width: 150vw; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.arena-board { position: relative; width: 110rem; height: 38rem; margin-left: 12vw; border-radius: 50%; background: radial-gradient(circle, rgba(243,231,207,.2), transparent 57%), var(--moss); border: 5px dashed var(--deep); box-shadow: 1.4rem 1.4rem 0 rgba(0,0,0,.35); }
.arena-board::before { content: ""; position: absolute; inset: 12%; border: 4px dotted var(--cream); border-radius: 50%; }
.avatar { position: absolute; width: 4rem; height: 4rem; display: grid; place-items: center; background: var(--cream); color: var(--deep); border: 3px solid var(--deep); border-radius: 40%; font-family: "Workbench"; font-size: 2rem; animation: march 7s infinite linear; }
.a1 { left: 20%; top: 27%; }.a2 { left: 62%; top: 58%; animation-delay: -2s; }.a3 { left: 43%; top: 42%; animation-delay: -4s; }
@keyframes march { 25% { transform: translate(4rem,2rem) rotate(12deg); } 50% { transform: translate(8rem,-1rem) rotate(-8deg); } 75% { transform: translate(2rem,-3rem) rotate(10deg); } }
.component { position: absolute; padding: 1rem; font-family: "Space Mono"; }.comp1 { left: 28%; top: 62%; background: var(--cyan); }.comp2 { left: 55%; top: 22%; background: var(--coral); }.comp3 { left: 72%; top: 44%; background: var(--ochre); }
.string-handle { position: absolute; right: 12%; bottom: 10%; padding: 1rem; background: var(--deep); color: var(--cream); border: 2px dashed var(--cyan); font-family: "Space Mono"; cursor: grab; }

.launch-hatch { --room-tilt: -1deg; }
.hatch-panel { position: absolute; left: 14%; top: 25%; width: 34rem; height: 24rem; display: grid; place-items: center; font-family: "Workbench"; font-size: 4rem; transform-origin: left center; transition: transform 1.2s cubic-bezier(.2, 1.1, .3, 1); z-index: 3; }
.hatch-panel.is-open { transform: perspective(900px) rotateY(-67deg) rotate(-4deg); }
.blank-again { max-width: 36rem; padding: 2rem; background: var(--cream); justify-self: end; margin-left: 30vw; opacity: .32; transition: opacity .8s, transform .8s; transform: translateY(2rem) rotate(2deg); }
.hatch-panel.is-open + .blank-again { opacity: 1; transform: translateY(0) rotate(-1deg); }
.blank-again h2 { color: var(--deep); }
.blank-again p:not(.version-tag) { color: var(--deep); font-family: "Fraunces"; }
.end-sprite { right: 12%; bottom: 13%; background: var(--violet); }
.stamp-mark { position: fixed; left: 50%; top: 50%; z-index: 60; transform: translate(-50%,-50%) rotate(-14deg) scale(3); padding: .3em .6em; border: 6px solid var(--coral); color: var(--coral); font: 700 5rem "Space Mono"; text-transform: uppercase; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.stamp-mark.stamped { animation: stamp .72s cubic-bezier(.2, 1.5, .3, 1); }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-22deg) scale(5); } 35%,70% { opacity: 1; transform: translate(-50%,-50%) rotate(-14deg) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-14deg) scale(1.4); } }

[data-note]::after {
  content: attr(data-note);
  position: absolute;
  left: 1rem;
  bottom: -2.4rem;
  padding: .45rem .65rem;
  background: var(--deep);
  color: var(--cyan);
  font: .75rem "Space Mono";
  opacity: 0;
  transition: opacity .2s;
}
[data-note]:hover::after { opacity: 1; }

@media (max-width: 800px) {
  .quest-compass { right: .25rem; transform: translateY(-50%) scale(.78); }
  .sketch-gate { display: block; }
  .paper-cut { width: 40vw; min-width: 10rem; font-size: 2rem; }
  .room-copy, .orchard-copy, .cave-copy { position: relative; left: auto; top: auto; max-width: calc(100vw - 5rem); }
  .fruit { position: relative; left: auto; top: auto; margin: 1rem; display: inline-block; }
  .orchard-branch { display: none; }
  .hatch-panel { width: 70vw; left: 8%; font-size: 2.3rem; }
  .blank-again { margin-left: 0; margin-top: 18rem; }
}