:root {
  --cave: #11140D;
  --moss: #3E5F2B;
  --lichen: #B8F05A;
  --red: #B64236;
  --blush: #FF7AAE;
  --amber: #F2A93B;
  --bone: #E8D9B7;
  --violet: #5B3A8E;
  --display: Impact, Haettenschweiler, 'Arial Black', fantasy;
  --chunk: 'Arial Black', 'Trebuchet MS', system-ui, sans-serif;
  --copy: Atkinson Hyperlegible, Verdana, system-ui, sans-serif;
  --round: 'Trebuchet MS', Arial Rounded MT Bold, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cave); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--bone);
  font-family: var(--copy);
  background:
    radial-gradient(circle at 20% 15%, rgba(62,95,43,.75), transparent 34rem),
    radial-gradient(circle at 80% 55%, rgba(91,58,142,.35), transparent 30rem),
    linear-gradient(180deg, #11140D 0%, #18200f 45%, #11140D 100%);
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .16;
  background-image: radial-gradient(#E8D9B7 1px, transparent 1px), radial-gradient(#B8F05A 1px, transparent 1px);
  background-size: 31px 29px, 47px 43px; mix-blend-mode: overlay;
}

.spore-field { position: fixed; inset: 0; pointer-events: none; z-index: 12; overflow: hidden; }
.spore {
  position: absolute; width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--lichen); box-shadow: 0 0 15px var(--lichen); opacity: .55;
  transform: translate3d(var(--x), var(--y), 0);
}

.charm-nav {
  position: fixed; z-index: 30; top: 15vh; right: 1.4rem; width: 2rem; min-height: 70vh;
  display: flex; flex-direction: column; align-items: center; justify-content: space-around;
}
.charm-nav::before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--red); box-shadow: 0 0 0 1px #4b1b16; }
.knot { position: relative; width: 1.15rem; height: 1.15rem; border-radius: 43% 57% 51% 49%; background: var(--bone); border: 2px solid var(--red); transform: rotate(18deg); }
.knot.active { background: var(--lichen); box-shadow: 0 0 22px rgba(184,240,90,.85); }
.knot span { position: absolute; right: 1.7rem; top: -.35rem; opacity: 0; color: var(--bone); font-family: var(--round); font-size: .72rem; white-space: nowrap; }
.knot:hover span, .knot.active span { opacity: 1; }

.chamber { min-height: 100vh; position: relative; padding: 8vh 7vw; overflow: hidden; isolation: isolate; }
.chamber::after {
  content: ''; position: absolute; left: -5%; right: -5%; bottom: -8vh; height: 18vh; z-index: 5;
  background: var(--cave); clip-path: polygon(0 55%, 8% 25%, 18% 65%, 29% 30%, 43% 70%, 55% 20%, 70% 60%, 83% 28%, 100% 62%, 100% 100%, 0 100%);
}

.door-chamber { display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(184,240,90,.18), transparent 22rem); }
.root-ceiling, .bramble-front { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.root-ceiling::before, .root-ceiling::after, .bramble-front::before, .bramble-front::after {
  content: ''; position: absolute; background: #25160e; border: 2px solid #3a2616; filter: drop-shadow(0 10px 8px rgba(0,0,0,.5));
}
.root-ceiling::before { width: 130vw; height: 7rem; left: -12vw; top: -2rem; border-radius: 50%; transform: rotate(-4deg); }
.root-ceiling::after { width: 6rem; height: 75vh; right: 16vw; top: -8vh; border-radius: 48%; transform: rotate(28deg); }

.door-wrap { position: relative; width: min(78vw, 920px); height: min(80vh, 720px); perspective: 1200px; filter: drop-shadow(0 34px 32px rgba(0,0,0,.65)); }
.door-slab { position: absolute; top: 0; bottom: 0; width: 52%; background: linear-gradient(90deg, #2a170d, #5a351d 36%, #29160b); border: 6px solid #1c1109; transition: transform .35s ease-out; overflow: hidden; }
.left-slab { left: 0; transform-origin: left center; clip-path: polygon(0 3%, 100% 0, 92% 100%, 4% 97%); }
.right-slab { right: 0; transform-origin: right center; clip-path: polygon(8% 0, 100% 4%, 96% 96%, 0 100%); }
.door-wrap.open .left-slab { transform: rotateY(-42deg) translateX(-3vw); }
.door-wrap.open .right-slab { transform: rotateY(38deg) translateX(3vw); }
.door-slab::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(17,20,13,.35) 40px 44px), radial-gradient(circle at 40% 40%, rgba(184,240,90,.16), transparent 8rem); }
.bark-rings { position: absolute; inset: 8%; border: 4px dashed rgba(232,217,183,.16); border-radius: 48% 52% 42% 58%; }
h1 { position: absolute; left: 8%; top: 14%; margin: 0; font-family: var(--display); font-size: clamp(4rem, 12vw, 8.5rem); line-height: .78; color: var(--amber); letter-spacing: .02em; text-shadow: 5px 5px 0 var(--red), 0 0 30px rgba(242,169,59,.25); transform: rotate(-5deg); }
h1 span { color: var(--bone); font-size: .62em; }
.carved { position: absolute; left: 13%; bottom: 12%; font-family: var(--chunk); letter-spacing: .12em; color: var(--lichen); transform: rotate(3deg); }
.warning-sign, .final-note, .slash-panel, .tag, .speech-cloud { background: var(--bone); color: var(--cave); border: 3px solid #25160e; box-shadow: 8px 10px 0 rgba(0,0,0,.35); }
.warning-sign { position: absolute; padding: 1rem 1.2rem; width: 14rem; min-height: 6rem; font-family: var(--chunk); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); clip-path: polygon(4% 10%, 96% 0, 92% 92%, 12% 100%); }
.warning-sign b, .warning-sign em, .final-note b, .final-note em { display: block; backface-visibility: hidden; }
.warning-sign em, .final-note em { font-family: var(--round); color: var(--red); transform: rotateY(180deg); position: absolute; inset: 1rem; }
.flip-sign.flipped { transform: rotateY(180deg) rotate(-4deg) !important; }
.warning-sign:nth-of-type(1) { top: 15%; left: 14%; transform: rotate(8deg); }
.warning-sign.small { top: 47%; right: 10%; width: 11rem; transform: rotate(-11deg); }
.warning-sign.crooked { bottom: 13%; left: 18%; transform: rotate(15deg); }
.beetle { position: absolute; width: 1.3rem; height: 2rem; background: var(--violet); border-radius: 50%; box-shadow: 0 0 18px var(--lichen); }
.beetle-one { top: 8%; right: 25%; animation: crawl 7s infinite alternate ease-in-out; }
.beetle-two { bottom: 22%; right: 12%; animation: crawl 5s infinite alternate-reverse ease-in-out; }
.vine { position: absolute; background: var(--moss); border: 2px solid #1d2e14; border-radius: 999px; z-index: 4; }
.vine-a { width: 2rem; height: 95%; left: 43%; top: -5%; transform: rotate(9deg); }
.vine-b { width: 1.2rem; height: 82%; right: 16%; top: 4%; transform: rotate(-20deg); }
.threshold-note { position: absolute; left: 8vw; bottom: 9vh; max-width: 30rem; color: var(--bone); font-size: clamp(1rem, 2vw, 1.45rem); }
.pawtrail { position: absolute; right: 20vw; bottom: 12vh; display: flex; gap: 1.8rem; transform: rotate(-18deg); }
.pawtrail i { width: 1.2rem; height: 1.7rem; background: rgba(0,0,0,.45); border-radius: 55%; display: block; }

.hoard-chamber { background: radial-gradient(circle at 10% 30%, rgba(91,58,142,.35), transparent 28rem), var(--cave); }
.chamber-title { max-width: 48rem; position: relative; z-index: 8; }
.chamber-title span, .speech-cloud span { color: var(--lichen); font-family: var(--round); letter-spacing: .08em; }
h2 { margin: .3rem 0 1rem; font-family: var(--chunk); font-size: clamp(2.2rem, 7vw, 5.4rem); line-height: .9; color: var(--bone); text-shadow: 4px 4px 0 var(--moss); }
.shelf-scene { position: relative; min-width: 1040px; height: 48vh; margin-top: 4vh; transform: rotate(-2deg); border-bottom: 1.8rem solid #3a2616; box-shadow: 0 18px 0 #1b1109; }
.found-object { position: absolute; bottom: 0; width: 12rem; height: 16rem; transition: transform .28s ease, filter .28s ease; }
.found-object.blushing { filter: drop-shadow(0 0 22px var(--blush)); transform: translateY(-10px) rotate(var(--r, 0deg)); }
.found-object:nth-child(1){ left: 2%; --r: -8deg; } .found-object:nth-child(2){ left: 19%; --r: 9deg; } .found-object:nth-child(3){ left: 34%; --r: -4deg; } .found-object:nth-child(4){ left: 50%; --r: 7deg; } .found-object:nth-child(5){ left: 66%; --r: -9deg; } .found-object:nth-child(6){ left: 82%; --r: 5deg; }
.object-shape { position: absolute; left: 50%; transform: translateX(-50%); }
.cup { bottom: 3rem; width: 7rem; height: 6rem; background: var(--bone); border: .45rem solid var(--red); border-radius: 10% 10% 42% 42%; }
.cup::after { content: ''; position: absolute; right: -2.2rem; top: 1.3rem; width: 2.4rem; height: 2.8rem; border: .45rem solid var(--red); border-left: 0; border-radius: 0 50% 50% 0; }
.stone { bottom: 3rem; width: 8rem; height: 5rem; background: #6f7258; border-radius: 47% 53% 61% 39%; box-shadow: inset -18px -12px 0 rgba(0,0,0,.22); }
.spoon-bowl { bottom: 8rem; width: 4.3rem; height: 5rem; border-radius: 50%; background: #a98a55; }
.spoon-handle { bottom: 1rem; width: 1.2rem; height: 9rem; background: #7a5a34; border-radius: 1rem; transform: translateX(-50%) rotate(18deg); }
.ribbon-knot { bottom: 6rem; width: 6rem; height: 4rem; background: var(--red); clip-path: polygon(0 10%, 48% 38%, 100% 0, 78% 100%, 48% 62%, 12% 96%); }
.ribbon-tail { bottom: 2rem; width: 3rem; height: 6rem; background: var(--blush); clip-path: polygon(0 0,100% 0,80% 100%,50% 76%,20% 100%); }
.acorn-cap { bottom: 8.5rem; width: 6rem; height: 3.2rem; background: #51351e; border-radius: 50% 50% 20% 20%; }
.acorn-body { bottom: 3rem; width: 5.4rem; height: 6.4rem; background: #9d6b35; border-radius: 45% 45% 55% 55%; }
.wing { bottom: 4rem; width: 5rem; height: 8rem; background: linear-gradient(135deg, var(--violet), #1b6a53); border: 3px solid #19100b; opacity: .92; }
.wing.left { border-radius: 90% 10% 70% 30%; transform: translateX(-88%) rotate(-18deg); } .wing.right { border-radius: 10% 90% 30% 70%; transform: translateX(-10%) rotate(18deg); }
.tag { position: absolute; bottom: -.4rem; left: 1rem; padding: .5rem .7rem; font-family: var(--round); font-weight: 800; font-size: .86rem; transform: rotate(-8deg); clip-path: polygon(8% 0,100% 10%,92% 100%,0 87%); transition: transform .2s ease; }
.tag.yanked { transform: rotate(-15deg) translateX(-10px); }
.monster-aside { max-width: 32rem; margin-left: auto; font-size: 1.25rem; color: var(--bone); }

.mood-chamber { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 5vw; background: radial-gradient(circle at 55% 55%, rgba(255,122,174,.22), transparent 20rem), #17200f; }
.mushroom-court { min-height: 70vh; position: relative; }
.fungus { position: absolute; bottom: 6vh; width: 10rem; height: 24rem; border-radius: 50% 50% 0 0; background: linear-gradient(var(--red), #6c201a); filter: drop-shadow(0 0 16px rgba(184,240,90,.4)); animation: moodPulse 5s infinite ease-in-out; }
.fungus::before { content: attr(data-denial); position: absolute; top: 18%; left: -14%; right: -14%; text-align: center; font-family: var(--chunk); color: var(--cave); background: var(--bone); padding: .35rem; transform: rotate(-9deg); }
.fungus span { position: absolute; bottom: -1rem; left: 35%; width: 30%; height: 75%; background: linear-gradient(#E8D9B7, #8b7450); border-radius: 35% 35% 0 0; z-index: -1; }
.fungus.tall { left: 8%; height: 28rem; } .fungus.wide { left: 34%; width: 15rem; height: 18rem; animation-delay: -1s; } .fungus.small { left: 61%; width: 7rem; height: 14rem; animation-delay: -2s; } .fungus.bent { left: 76%; height: 22rem; transform: rotate(10deg); animation-delay: -3s; }
.speech-cloud { position: relative; z-index: 3; padding: 2rem; clip-path: polygon(7% 0,100% 8%,92% 88%,61% 83%,52% 100%,43% 82%,0 92%); }
.speech-cloud h2 { color: var(--cave); text-shadow: 3px 3px 0 var(--blush); }
.spore-words i { position: absolute; color: var(--lichen); font-family: var(--round); opacity: .7; animation: floatWord 7s infinite linear; }
.spore-words i:nth-child(1){ left: 18%; top: 24%; } .spore-words i:nth-child(2){ left: 52%; top: 19%; animation-delay: -2s; } .spore-words i:nth-child(3){ left: 38%; top: 72%; animation-delay: -4s; } .spore-words i:nth-child(4){ left: 70%; top: 49%; animation-delay: -5s; color: var(--blush); }

.maze-chamber { background: linear-gradient(135deg, #11140D, #1b2411 45%, #11140D); }
.bramble-front { z-index: 15; transform: translateX(var(--bramble-shift, 0px)); transition: transform .3s ease; }
.bramble-front::before { width: 8rem; height: 120vh; left: 8vw; top: -8vh; transform: rotate(-20deg); border-radius: 50%; background: #27150d; }
.bramble-front::after { width: 7rem; height: 120vh; right: 13vw; top: -5vh; transform: rotate(17deg); border-radius: 50%; background: #27150d; }
.argument-path { position: relative; min-height: 64vh; clip-path: polygon(0 20%, 23% 10%, 38% 34%, 58% 22%, 77% 48%, 100% 37%, 100% 82%, 73% 92%, 51% 70%, 29% 83%, 0 63%); background: rgba(62,95,43,.28); border: 4px solid rgba(184,240,90,.2); }
.slash-panel { position: absolute; width: 18rem; padding: 1.3rem; font-family: var(--chunk); clip-path: polygon(0 14%,90% 0,100% 82%,12% 100%); }
.slash-panel::before { content: '///'; position: absolute; right: 1rem; top: .2rem; color: var(--red); font-size: 2rem; }
.slash-panel:nth-child(1){ left: 9%; top: 13%; transform: rotate(9deg); } .slash-panel.reverse{ right: 21%; top: 29%; transform: rotate(-12deg); } .slash-panel:nth-child(3){ left: 37%; bottom: 15%; transform: rotate(5deg); }
.slash-panel em { display: block; color: var(--red); font-family: var(--round); margin-top: .5rem; }
.monster-eyes { position: absolute; right: 10%; bottom: 12%; width: 11rem; height: 7rem; border-radius: 50%; background: rgba(0,0,0,.55); transition: transform .22s ease; }
.monster-eyes.duck { transform: translateY(55px); }
.monster-eyes i { position: absolute; top: 2rem; width: 1.8rem; height: 2.3rem; background: var(--lichen); border-radius: 50%; box-shadow: 0 0 18px var(--lichen); }
.monster-eyes i:first-child { left: 2.7rem; } .monster-eyes i:last-child { right: 2.7rem; }
.maze-copy { position: relative; z-index: 16; max-width: 38rem; font-size: 1.2rem; margin-left: auto; }

.hearth-chamber { display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(242,169,59,.33), transparent 28rem), #15120d; }
.warm-room { position: relative; width: min(88vw, 980px); min-height: 76vh; border-radius: 48% 52% 12% 10%; background: radial-gradient(circle at 50% 80%, rgba(242,169,59,.18), transparent 25rem), rgba(62,95,43,.22); border: 5px solid #2c1b10; box-shadow: inset 0 0 80px rgba(0,0,0,.55); }
.fireplace { position: absolute; left: 11%; bottom: 8%; width: 15rem; height: 11rem; border-radius: 50% 50% 10% 10%; background: #24150d; border: 5px solid #5a351d; }
.fireplace i { position: absolute; bottom: 1.3rem; left: 50%; width: 3rem; height: 7rem; border-radius: 55% 55% 35% 35%; transform-origin: bottom; background: var(--amber); box-shadow: 0 0 40px var(--amber); animation: flame .8s infinite alternate ease-in-out; }
.fireplace i:nth-child(1){ transform: translateX(-90%) rotate(-12deg); background: var(--red); } .fireplace i:nth-child(2){ transform: translateX(-50%); height: 8rem; } .fireplace i:nth-child(3){ transform: translateX(-10%) rotate(13deg); background: var(--blush); }
.hanging-charms span { position: absolute; top: 8%; width: 1.4rem; height: 4rem; border-top: 4rem solid var(--red); }
.hanging-charms span::after { content: ''; position: absolute; left: -.6rem; top: 3.5rem; width: 2rem; height: 2rem; background: var(--bone); border-radius: 42%; box-shadow: 0 0 18px rgba(232,217,183,.35); }
.hanging-charms span:nth-child(1){ left: 40%; } .hanging-charms span:nth-child(2){ left: 53%; top: 5%; } .hanging-charms span:nth-child(3){ left: 66%; } .hanging-charms span:nth-child(4){ left: 79%; top: 7%; }
.monster-back { position: absolute; right: 15%; bottom: 10%; width: 24rem; height: 28rem; }
.horns { position: absolute; top: 0; left: 5rem; width: 13rem; height: 6rem; background: var(--bone); clip-path: polygon(0 100%, 16% 0, 43% 85%, 58% 85%, 86% 0, 100% 100%); }
.body-shadow { position: absolute; bottom: 0; width: 20rem; height: 23rem; border-radius: 48% 52% 12% 10%; background: #080906; box-shadow: inset 0 0 0 8px rgba(62,95,43,.35); }
.claw { position: absolute; right: 2.7rem; bottom: 7rem; width: 8rem; height: 3rem; background: #0a0b08; border-radius: 999px; transform: rotate(-15deg); }
.claw::after { content: ''; position: absolute; right: -1rem; top: -.4rem; width: 4rem; height: 3rem; background: var(--bone); clip-path: polygon(0 30%, 28% 100%, 42% 20%, 62% 100%, 75% 18%, 100% 88%, 100% 0, 0 0); }
.blanket { position: absolute; right: -1rem; bottom: 4rem; width: 13rem; height: 9rem; background: linear-gradient(135deg, var(--blush), var(--red)); clip-path: polygon(4% 10%,96% 0,88% 100%,0 82%); box-shadow: 0 0 28px rgba(255,122,174,.35); }
.final-note { position: absolute; left: 34%; bottom: 14%; width: 21rem; min-height: 8rem; padding: 1.2rem; font-family: var(--chunk); transform-style: preserve-3d; transition: transform .5s ease; clip-path: polygon(6% 0,100% 9%,91% 100%,0 88%); }
.final-note em { color: var(--red); }
.uniqueness-inscription { position: absolute; right: 4%; bottom: 3%; max-width: 24rem; margin: 0; color: rgba(232,217,183,.42); font-family: var(--round); font-size: .78rem; transform: rotate(-2deg); }

@keyframes crawl { to { transform: translate(34px, 42px) rotate(25deg); } }
@keyframes moodPulse { 0%,100% { filter: drop-shadow(0 0 14px var(--lichen)); background: linear-gradient(var(--red), #6c201a); } 50% { filter: drop-shadow(0 0 34px var(--blush)); background: linear-gradient(var(--blush), var(--red)); } }
@keyframes floatWord { from { transform: translateY(40px) rotate(-8deg); opacity: 0; } 30% { opacity: .8; } to { transform: translateY(-90px) rotate(12deg); opacity: 0; } }
@keyframes flame { to { height: 6rem; transform: translateX(-50%) rotate(6deg) scaleX(1.15); } }

@media (max-width: 800px) {
  .charm-nav { right: .4rem; }
  .chamber { padding: 7vh 9vw; }
  .door-wrap { width: 92vw; }
  .mood-chamber { grid-template-columns: 1fr; }
  .shelf-scene { transform: scale(.72) rotate(-2deg); transform-origin: left top; margin-bottom: -10vh; }
  .monster-back { right: 0; transform: scale(.72); transform-origin: bottom right; }
  .final-note { left: 5%; bottom: 35%; }
}