:root {
  --ink: #10101A;
  --violet: #2A174F;
  --blue: #2868FF;
  --mint: #56FFD1;
  --lilac: #D7B8FF;
  --peach: #FF8FB3;
  --parchment: #F3EED8;
  --red: #FF3D5A;
  --pixel: 'Silkscreen', monospace;
  --body: 'Bricolage Grotesque', sans-serif;
  --ui: 'DotGothic16', monospace;
  --hand: 'Yomogi', cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 12%, rgba(215, 184, 255, .22), transparent 24rem),
    radial-gradient(circle at 84% 20%, rgba(40, 104, 255, .20), transparent 22rem),
    radial-gradient(circle at 50% 95%, rgba(86, 255, 209, .14), transparent 28rem),
    linear-gradient(135deg, #10101A 0%, #171222 45%, #10101A 100%);
  z-index: -3;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  z-index: 40;
  background-image:
    linear-gradient(90deg, rgba(243, 238, 216, .06) 1px, transparent 1px),
    linear-gradient(rgba(243, 238, 216, .04) 1px, transparent 1px);
  background-size: 7px 7px;
  mix-blend-mode: screen;
}

.quest-table {
  position: relative;
  min-height: 600vh;
  transform-style: preserve-3d;
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  border-bottom: 2px dashed rgba(243, 238, 216, .22);
  isolation: isolate;
}

.scene::before {
  content: '';
  position: absolute;
  inset: 5vh 4vw;
  background:
    linear-gradient(135deg, rgba(243, 238, 216, .035) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(315deg, rgba(86, 255, 209, .05), transparent 55%);
  border: 2px solid rgba(215, 184, 255, .2);
  transform: rotate(-2.5deg) skewY(-1deg);
  box-shadow: 18px 22px 0 rgba(42, 23, 79, .7), inset 0 0 70px rgba(16, 16, 26, .5);
  z-index: -2;
}

.scene::after {
  content: attr(data-item);
  position: absolute;
  right: 9vw;
  bottom: 7vh;
  font-family: var(--ui);
  color: var(--mint);
  border: 2px solid var(--mint);
  padding: .35rem .7rem;
  background: rgba(16, 16, 26, .78);
  box-shadow: 5px 5px 0 var(--violet);
  transform: rotate(4deg);
}

.start-tile { background: linear-gradient(160deg, rgba(16,16,26,1), rgba(42,23,79,.82)); }
.rulebook-nest { background: linear-gradient(180deg, rgba(42,23,79,.9), rgba(16,16,26,1)); }
.prototype-clearing { background: linear-gradient(150deg, #10101A, rgba(40,104,255,.26), #10101A); }
.character-drawer { background: linear-gradient(200deg, #10101A, rgba(255,143,179,.16), rgba(42,23,79,.88)); }
.bug-charm-shrine { background: linear-gradient(160deg, rgba(42,23,79,.96), #10101A 58%, rgba(255,61,90,.22)); }
.ending-open { background: radial-gradient(circle at 50% 50%, rgba(86,255,209,.16), transparent 34rem), #10101A; }

h1, h2 {
  font-family: var(--pixel);
  line-height: .94;
  margin: 0 0 1rem;
  letter-spacing: -0.05em;
  text-shadow: 4px 4px 0 var(--violet), 0 0 24px rgba(86, 255, 209, .3);
}

h1 { font-size: clamp(3.4rem, 10vw, 9.5rem); max-width: 9ch; color: var(--mint); }
h2 { font-size: clamp(2.3rem, 6.5vw, 6rem); color: var(--lilac); }
p { font-size: clamp(1rem, 1.7vw, 1.28rem); line-height: 1.48; }

.system-label, .inventory-strip, .paper-tabs, .save-captions, .slot, .save-slot {
  font-family: var(--ui);
  letter-spacing: .04em;
}

.scribble, .maker-note { font-family: var(--hand); color: var(--peach); font-size: clamp(1.25rem, 2vw, 2rem); }

.charm-string {
  position: fixed;
  z-index: 30;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.charm-string::before {
  content: '';
  position: absolute;
  top: -2rem;
  bottom: -2rem;
  left: 12px;
  width: 2px;
  background: repeating-linear-gradient(var(--lilac) 0 8px, transparent 8px 15px);
  opacity: .55;
}

.charm {
  position: relative;
  width: 28px;
  height: 28px;
  border: 2px solid var(--parchment);
  background: var(--violet);
  color: var(--parchment);
  text-decoration: none;
  transform: rotate(45deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  transition: background .25s, box-shadow .25s, transform .25s;
}

.charm span {
  position: absolute;
  left: 2.3rem;
  top: -.3rem;
  transform: rotate(-45deg);
  white-space: nowrap;
  opacity: 0;
  font-family: var(--ui);
  color: var(--mint);
  background: var(--ink);
  padding: .2rem .45rem;
  border: 1px solid var(--mint);
  pointer-events: none;
}

.charm:hover span, .charm.active span { opacity: 1; }
.charm.active { background: var(--mint); box-shadow: 0 0 18px var(--mint), 4px 4px 0 var(--blue); transform: rotate(45deg) scale(1.18); }

.seed-token {
  position: fixed;
  left: 62vw;
  top: 68vh;
  width: 78px;
  height: 78px;
  z-index: 25;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-family: var(--pixel);
  font-size: .7rem;
  transform: rotate(45deg);
  background: var(--mint);
  border: 3px solid var(--parchment);
  box-shadow: 0 0 26px rgba(86,255,209,.85), 7px 7px 0 var(--violet);
  transition: left .9s steps(8), top .9s steps(8), background .35s, box-shadow .35s, border-radius .35s;
}

.seed-token span { transform: rotate(-45deg); }
.seed-token.sleeping { animation: seedWake 1.8s steps(4) infinite; }
.seed-token.sketch { background: var(--parchment); color: var(--violet); box-shadow: 0 0 0 3px var(--ink), 8px 8px 0 var(--peach); }
.seed-token.standee-mode { border-radius: 46% 46% 6% 6%; background: var(--lilac); }
.seed-token.cursor-mode { width: 36px; height: 52px; border-radius: 2px; animation: cursorBlink .7s steps(2) infinite; }

@keyframes seedWake { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(-8px,4px); } }
@keyframes cursorBlink { 50% { opacity: .25; box-shadow: none; } }

.fold-line {
  position: absolute;
  height: 2px;
  width: 120vw;
  background: repeating-linear-gradient(90deg, rgba(243,238,216,.45) 0 12px, transparent 12px 24px);
  transform-origin: left center;
  opacity: .55;
}
.fold-a { top: 28vh; left: -10vw; transform: rotate(-18deg); }
.fold-b { top: 71vh; left: -6vw; transform: rotate(11deg); }

.paper-map, .flap-card, .ending-card {
  position: relative;
  background: var(--parchment);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 13px 14px 0 rgba(0,0,0,.34), inset 0 0 0 2px rgba(42,23,79,.16);
  clip-path: polygon(2% 0, 97% 2%, 100% 88%, 92% 100%, 0 96%);
}

.paper-map {
  width: min(760px, 78vw);
  padding: clamp(1.4rem, 4vw, 3.2rem);
  margin: 10vh 0 0 16vw;
  transform: rotate(-5deg) perspective(900px) rotateX(8deg);
  transform-origin: left bottom;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

.paper-map.opened { transform: rotate(-2deg) perspective(900px) rotateX(0deg) scale(1.02); }
.intro { max-width: 42rem; font-weight: 700; }

.tape {
  position: absolute;
  width: 88px;
  height: 30px;
  background: rgba(215,184,255,.72);
  border: 1px dashed var(--violet);
}
.tape-one { top: -14px; left: 16%; transform: rotate(-9deg); }
.tape-two { bottom: -12px; right: 20%; transform: rotate(6deg); background: rgba(255,143,179,.75); }

.cartridge {
  position: absolute;
  right: 8vw;
  top: 12vh;
  width: 320px;
  height: 190px;
  background: var(--blue);
  border: 4px solid var(--ink);
  transform: rotate(10deg);
  box-shadow: 15px 18px 0 rgba(0,0,0,.4);
}
.cart-label { margin: 2rem; padding: 1rem; font-family: var(--pixel); background: var(--parchment); color: var(--blue); border: 3px solid var(--ink); }
.contacts { position: absolute; bottom: 0; left: 24px; right: 24px; height: 32px; background: repeating-linear-gradient(90deg, var(--parchment) 0 18px, var(--ink) 18px 24px); }

.dice {
  position: absolute;
  left: 55vw;
  top: 70vh;
  width: 70px;
  height: 70px;
  background: var(--parchment);
  border: 3px solid var(--ink);
  transform: rotate(14deg);
  box-shadow: 8px 9px 0 var(--red);
  transition: transform .7s steps(5);
}
.dice.bumped { transform: rotate(96deg) translate(16px, -10px); }
.dice span { position: absolute; width: 12px; height: 12px; background: var(--red); }
.dice span:nth-child(1) { left: 13px; top: 13px; }
.dice span:nth-child(2) { right: 13px; top: 13px; }
.dice span:nth-child(3) { left: 13px; bottom: 13px; }
.dice span:nth-child(4) { right: 13px; bottom: 13px; }

.inventory-strip {
  position: absolute;
  left: 9vw;
  bottom: 8vh;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  max-width: 44rem;
}
.inventory-strip b, .inventory-strip em, .save-captions span {
  background: var(--ink);
  border: 2px solid var(--lilac);
  color: var(--lilac);
  padding: .35rem .55rem;
  font-style: normal;
}

.flap-card {
  width: min(680px, 72vw);
  padding: clamp(1.5rem, 4vw, 3rem);
  transform: rotate(-3deg) perspective(900px) rotateY(-18deg);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.17,.84,.32,1.2);
}
.flap-card.open { transform: rotate(-1deg) perspective(900px) rotateY(0deg); }

.rulebook { margin: 14vh 0 0 19vw; }
.paper-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.paper-tabs span { background: var(--blue); color: white; padding: .25rem .55rem; border: 2px solid var(--ink); }
ul { padding-left: 1.1rem; font-weight: 700; }
li::marker { color: var(--red); }

.acetate-card {
  position: absolute;
  right: 9vw;
  top: 20vh;
  width: 310px;
  padding: 1.3rem;
  border: 2px solid var(--mint);
  background: rgba(86,255,209,.16);
  color: var(--mint);
  transform: rotate(8deg);
  font-family: var(--ui);
  box-shadow: 0 0 22px rgba(86,255,209,.25);
}
.acetate-card strong { display: block; font-family: var(--pixel); margin-top: .7rem; }
.maker-note { position: absolute; left: 14vw; bottom: 13vh; transform: rotate(-8deg); }

.stage-flat {
  position: absolute;
  left: 10vw;
  top: 14vh;
  width: 360px;
  height: 310px;
  background: var(--violet);
  border: 4px solid var(--parchment);
  transform: rotate(4deg);
  box-shadow: 15px 15px 0 rgba(0,0,0,.35);
}
.curtain { height: 66px; background: repeating-linear-gradient(90deg, var(--red) 0 30px, #b92443 30px 58px); border-bottom: 4px solid var(--parchment); }
.tiny-screen { margin: 42px auto; width: 190px; height: 130px; background: var(--ink); border: 3px solid var(--mint); display: grid; place-items: center; }
.tiny-screen span { width: 42px; height: 42px; background: var(--mint); box-shadow: 42px 0 var(--peach), 84px 42px var(--lilac), 0 84px var(--blue); animation: spriteStep 1.1s steps(2) infinite; }
@keyframes spriteStep { 50% { transform: translate(8px, -8px); } }
.clearing-card { margin: 25vh 8vw 0 auto; }
.save-captions { display: flex; gap: .6rem; flex-wrap: wrap; }
.standee { position: absolute; left: 43vw; bottom: 15vh; color: var(--ink); background: var(--lilac); border: 3px solid var(--ink); padding: 3rem 1rem .8rem; font-family: var(--ui); transform: rotate(-5deg); }
.standee::before { content: ''; position: absolute; top: -34px; left: 44px; width: 70px; height: 70px; background: var(--mint); transform: rotate(45deg); border: 3px solid var(--ink); }

.pixel-constellation { position: absolute; right: 13vw; top: 14vh; width: 260px; height: 180px; }
.pixel-constellation i { position: absolute; width: 10px; height: 10px; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.pixel-constellation i:nth-child(1){left:10px;top:30px}.pixel-constellation i:nth-child(2){left:90px;top:70px}.pixel-constellation i:nth-child(3){left:150px;top:20px}.pixel-constellation i:nth-child(4){left:210px;top:110px}.pixel-constellation i:nth-child(5){left:60px;top:145px}

.drawer-box {
  position: absolute;
  inset: 15vh auto auto 11vw;
  width: min(650px, 70vw);
  height: 540px;
  background: var(--parchment);
  border: 5px solid var(--ink);
  transform: rotate(3deg);
  box-shadow: 18px 18px 0 var(--violet);
}
.handle { width: 150px; height: 26px; background: var(--blue); border: 3px solid var(--ink); margin: 2rem auto; }
.slot { margin: 1rem 2rem; padding: 1.2rem; border: 3px dashed var(--violet); color: var(--violet); background: rgba(215,184,255,.45); }
.slot-three { background: var(--mint); color: var(--ink); transform: translateX(2rem) rotate(-2deg); }
.drawer-note { margin: 20vh 7vw 0 auto; width: min(560px, 68vw); }
.speech { display: inline-block; background: var(--ink); color: var(--mint); border: 2px solid var(--mint); padding: .8rem 1rem; border-radius: 50% 44% 48% 42%; font-family: var(--ui); }

.sprite {
  position: absolute;
  width: 52px;
  height: 52px;
  background: var(--peach);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(0,0,0,.4);
  animation: wiggle 1.6s steps(2) infinite;
}
.sprite i { position: absolute; inset: 12px 8px auto; height: 8px; background: linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 22px, var(--ink) 22px); }
.sprite::after { content: ''; position: absolute; left: 14px; bottom: 9px; width: 24px; height: 6px; background: var(--ink); }
.sprite-a { right: 14vw; bottom: 18vh; background: var(--mint); }
.sprite-b { right: 25vw; bottom: 18vh; background: var(--lilac); }
.sprite-c { left: 24vw; bottom: 13vh; background: var(--mint); }
.sprite-d { right: 13vw; top: 13vh; background: var(--peach); animation-delay: .45s; }
@keyframes wiggle { 50% { transform: translateY(-6px) rotate(5deg); } }

.shrine-card { margin: 15vh auto 0 14vw; }
.charms { position: absolute; right: 13vw; top: 17vh; display: grid; gap: 1.2rem; }
.charms span { width: 130px; height: 92px; display: grid; place-items: center; border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.35); font-family: var(--pixel); }
.ladybug { background: var(--red); color: var(--parchment); border-radius: 48% 48% 42% 42%; }
.eraser { background: var(--parchment); color: var(--red); transform: rotate(-8deg); }
.bell { background: var(--lilac); color: var(--violet); border-radius: 50% 50% 18% 18%; transform: rotate(6deg); }
.shrine-note { left: 55vw; bottom: 20vh; color: var(--mint); }
.sticker-burst span { position: absolute; width: 80px; height: 80px; border: 3px solid var(--peach); background: rgba(255,143,179,.22); transform: rotate(45deg); }
.sticker-burst span:nth-child(1){left:12vw;bottom:15vh}.sticker-burst span:nth-child(2){right:31vw;bottom:11vh;background:rgba(86,255,209,.18)}.sticker-burst span:nth-child(3){right:20vw;bottom:32vh;background:rgba(215,184,255,.18)}

.completed-board {
  position: absolute;
  left: 9vw;
  top: 12vh;
  width: min(620px, 80vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: .8rem;
  transform: rotate(-5deg);
}
.board-panel { min-height: 170px; display: grid; place-items: center; font-family: var(--pixel); border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.35); }
.mini-start { background: var(--mint); color: var(--ink); }
.mini-rule { background: var(--parchment); color: var(--violet); }
.mini-proto { background: var(--blue); color: white; }
.mini-bug { background: var(--red); color: white; }
.ending-card { margin: 18vh 8vw 0 auto; width: min(640px, 74vw); padding: clamp(1.5rem, 4vw, 3rem); transform: rotate(3deg); }
.save-slot { cursor: pointer; background: var(--ink); color: var(--mint); border: 3px solid var(--mint); padding: .9rem 1.1rem; font-size: 1.15rem; box-shadow: 6px 6px 0 var(--blue); }
.save-slot span { animation: cursorBlink .7s steps(2) infinite; }
.save-slot.saved { background: var(--mint); color: var(--ink); box-shadow: 0 0 24px var(--mint), 6px 6px 0 var(--peach); }
.final-spell { right: 15vw; bottom: 12vh; left: auto; color: var(--peach); }

.prop { transition: transform .45s steps(4); }
.prop:hover { transform: rotate(-2deg) translateY(-8px); }
.active-scene .flap-card { transform: rotate(-1deg) perspective(900px) rotateY(0deg); }

@media (max-width: 760px) {
  .charm-string { left: .45rem; }
  .charm span { display: none; }
  .scene { padding-left: 3.4rem; }
  .paper-map, .rulebook, .clearing-card, .drawer-note, .shrine-card, .ending-card { margin-left: 0; margin-right: 0; width: 100%; }
  .cartridge, .acetate-card, .stage-flat, .drawer-box, .charms, .completed-board { position: relative; inset: auto; margin: 1.5rem 0; width: 100%; }
  .drawer-box { height: auto; padding-bottom: 1rem; }
  .seed-token { width: 56px; height: 56px; }
}