:root {
    --burrow-umber: #2A1B12;
    --black-loam: #0D0A07;
    --moss-velvet: #5F7B3A;
    --foxfire-green: #B9F25D;
    --beetle-teal: #167C78;
    --clay-red: #B64A32;
    --bone-chalk: #E8D7B2;
    --tarnished-brass: #B68A3A;
    --night-violet: #34264F;
    --display: Eczar, Georgia, Cambria, serif;
    --story: Fraunces, Georgia, "Times New Roman", serif;
    --label: "Space Grotesk", Inter, system-ui, sans-serif;
    --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --design-font-token: "Grotesk**";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--black-loam);
    color: var(--bone-chalk);
    font-family: var(--story);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    opacity: .28;
    background:
        radial-gradient(circle at 16% 20%, rgba(185, 242, 93, .09), transparent 18%),
        radial-gradient(circle at 82% 78%, rgba(22, 124, 120, .14), transparent 24%),
        repeating-radial-gradient(circle at 45% 42%, rgba(232, 215, 178, .06) 0 1px, transparent 1px 7px);
    mix-blend-mode: screen;
}

.burrow-table { background: var(--black-loam); }
.chamber {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(26px, 5vw, 78px);
    background:
        radial-gradient(ellipse at 50% -20%, rgba(95, 123, 58, .24), transparent 44%),
        linear-gradient(143deg, var(--burrow-umber), var(--black-loam) 72%);
}

.loam-grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .8;
    background:
        repeating-linear-gradient(96deg, rgba(232,215,178,.035) 0 2px, transparent 2px 19px),
        repeating-linear-gradient(12deg, transparent 0 17px, rgba(13,10,7,.36) 18px 23px),
        radial-gradient(circle at 28% 46%, rgba(52,38,79,.46), transparent 32%);
}

.fungus-trail {
    position: fixed;
    z-index: 80;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 14px;
}

.cap {
    position: relative;
    width: 30px;
    height: 26px;
    border: 0;
    border-radius: 50% 50% 42% 42%;
    background: radial-gradient(circle at 34% 25%, var(--bone-chalk) 0 2px, transparent 3px), var(--moss-velvet);
    box-shadow: 0 8px 14px rgba(0,0,0,.45), inset 0 -6px 0 rgba(13,10,7,.22);
    cursor: pointer;
    transition: transform .35s, background .35s, box-shadow .35s;
}
.cap::after { content: ""; position: absolute; left: 11px; top: 18px; width: 8px; height: 18px; border-radius: 5px; background: var(--bone-chalk); z-index: -1; }
.cap span { position: absolute; right: 38px; top: 3px; white-space: nowrap; opacity: 0; color: var(--foxfire-green); font: 800 10px var(--label); letter-spacing: .13em; text-transform: uppercase; transition: opacity .3s; }
.cap.active { background: radial-gradient(circle at 40% 26%, #E8D7B2 0 2px, transparent 3px), var(--foxfire-green); box-shadow: 0 0 18px rgba(185,242,93,.82), inset 0 -6px 0 rgba(13,10,7,.18); transform: translateX(-6px) rotate(-7deg); }
.cap.active span, .cap:hover span { opacity: 1; }

.root-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .88; pointer-events: none; }
.root-line { fill: none; stroke: var(--moss-velvet); stroke-linecap: round; stroke-linejoin: round; stroke-width: 22; filter: drop-shadow(0 0 18px rgba(13,10,7,.7)); stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.root-line.twig { stroke: var(--tarnished-brass); stroke-width: 6; opacity: .72; }
.root-map.draw .root-line, .worm-map.draw path { animation: drawRoot 2.4s cubic-bezier(.21,.7,.2,1) forwards; }

.word-carving {
    position: relative;
    width: min(850px, 82vw);
    margin: 20vh 0 0 8vw;
    padding: clamp(24px, 4vw, 54px);
    background: rgba(42,27,18,.72);
    clip-path: polygon(0 8%, 10% 4%, 13% 0, 88% 0, 100% 12%, 96% 82%, 88% 88%, 84% 100%, 9% 95%, 0 80%);
    box-shadow: inset 0 0 0 2px rgba(182,138,58,.36), inset 0 -30px 60px rgba(13,10,7,.62), 0 34px 90px rgba(0,0,0,.48);
}
.inventory-tag { margin: 0 0 12px; color: var(--tarnished-brass); font: 800 12px var(--label); letter-spacing: .16em; text-transform: uppercase; }
h1, h2 { font-family: var(--display); margin: 0; font-weight: 900; letter-spacing: -.055em; line-height: .86; }
h1 { font-size: clamp(58px, 12vw, 148px); }
h2 { font-size: clamp(42px, 7vw, 92px); }
.carved, .hinge-p, .works, .missing-e { display: inline-grid; place-items: center; min-width: .56em; min-height: .86em; vertical-align: middle; margin-right: .025em; text-shadow: 0 8px 0 rgba(13,10,7,.7); }
.hinge-p { color: var(--tarnished-brass); transform-origin: 50% 18%; filter: drop-shadow(0 0 8px rgba(182,138,58,.28)); animation: hingeBreathe 4.8s ease-in-out infinite; }
.hinge-p.right { color: var(--beetle-teal); animation-delay: -2s; }
.moss { color: var(--moss-velvet); }.clay { color: var(--clay-red); }.bone { color: var(--bone-chalk); }.bark { color: #8c5937; }
.works { color: var(--bone-chalk); font-size: .46em; letter-spacing: -.02em; align-items: end; }
.missing-e { width: .38em; min-width: .38em; height: .54em; border-radius: 50% 35% 50% 20%; background: radial-gradient(circle, var(--foxfire-green), rgba(185,242,93,.12) 43%, transparent 62%); box-shadow: 0 0 34px var(--foxfire-green), inset 0 0 20px rgba(13,10,7,.9); transform: rotate(8deg); }
.story-note { max-width: 470px; color: var(--bone-chalk); font-size: clamp(18px, 2.3vw, 28px); line-height: 1.35; }
.root-pull, .hinge-turn, .final-latch { border: 0; color: var(--black-loam); background: var(--foxfire-green); padding: 14px 22px; font: 900 13px var(--label); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; clip-path: polygon(0 0, 92% 0, 100% 32%, 96% 100%, 7% 100%, 0 68%); box-shadow: 0 0 24px rgba(185,242,93,.36), 0 10px 0 rgba(13,10,7,.45); }
.root-pull.open { transform: translateX(20px) rotate(-2deg); background: var(--tarnished-brass); }

.root-socket { position: absolute; padding: 12px 16px; color: var(--foxfire-green); border: 2px dashed rgba(185,242,93,.35); border-radius: 46% 36% 48% 30%; font: 800 11px var(--mono); text-transform: uppercase; box-shadow: inset 0 0 22px rgba(185,242,93,.08); }
.socket-one { left: 10vw; bottom: 13vh; transform: rotate(-12deg); }.socket-two { right: 18vw; top: 18vh; }.socket-three { right: 10vw; bottom: 22vh; transform: rotate(9deg); }
.artifact { position: absolute; display: grid; place-items: center; user-select: none; font: 900 15px var(--label); text-transform: uppercase; box-shadow: 0 18px 30px rgba(0,0,0,.45), inset 0 -6px 0 rgba(13,10,7,.28); }
.bark-piece { left: 5vw; top: 16vh; width: 116px; height: 78px; background: #7a4b2d; color: var(--bone-chalk); clip-path: polygon(0 0, 84% 6%, 100% 34%, 92% 100%, 10% 90%); transform: rotate(-17deg); }
.bone-tab { right: 7vw; top: 36vh; width: 74px; height: 116px; background: var(--bone-chalk); color: var(--black-loam); border-radius: 44% 28% 48% 33%; transform: rotate(13deg); }
.glass-chip { right: 25vw; bottom: 8vh; width: 98px; height: 88px; background: rgba(22,124,120,.78); clip-path: polygon(20% 0, 100% 14%, 72% 100%, 0 78%); box-shadow: 0 0 28px rgba(22,124,120,.55); }
.domino { left: 26vw; bottom: 9vh; width: 132px; height: 62px; background: var(--night-violet); color: var(--bone-chalk); transform: rotate(8deg); }
.acorn-latch { right: 34vw; top: 10vh; width: 88px; height: 88px; border-radius: 48% 52% 58% 42%; background: var(--tarnished-brass); color: var(--black-loam); transform: rotate(-8deg); }

.mud-sort { background: radial-gradient(circle at 14% 78%, rgba(182,74,50,.22), transparent 30%), linear-gradient(126deg, #1f150f, var(--black-loam)); }
.mud-tray, .maze-copy, .forge-plate, .underfloor-map {
    position: relative;
    max-width: 650px;
    padding: clamp(26px, 4vw, 54px);
    color: var(--black-loam);
    background: var(--bone-chalk);
    box-shadow: 0 28px 76px rgba(0,0,0,.52), inset 0 0 0 4px rgba(95,123,58,.24);
}
.mud-tray { margin: 12vh 0 0 6vw; clip-path: polygon(0 0, 87% 0, 100% 18%, 94% 92%, 16% 100%, 0 78%); transform: rotate(-2deg); }
.mud-tray p:not(.inventory-tag), .maze-copy p:not(.inventory-tag), .forge-plate p:not(.inventory-tag), .underfloor-map p:not(.inventory-tag) { font-size: clamp(17px, 2vw, 24px); line-height: 1.38; }
.mud-tray .inventory-tag, .maze-copy .inventory-tag, .forge-plate .inventory-tag, .underfloor-map .inventory-tag { color: var(--clay-red); }
.red-thread { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.red-thread span { color: var(--bone-chalk); background: var(--clay-red); padding: 8px 12px; font: 900 11px var(--label); text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 88% 100%, 7% 92%); }
.clue-leaf { position: absolute; right: 13vw; top: 18vh; width: 284px; height: 184px; border: 0; background: transparent; perspective: 900px; color: var(--black-loam); cursor: pointer; }
.clue-leaf span { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; backface-visibility: hidden; background: var(--moss-velvet); color: var(--bone-chalk); font: 800 24px var(--story); clip-path: polygon(8% 0, 100% 18%, 82% 100%, 0 82%); box-shadow: 0 22px 50px rgba(0,0,0,.42); transition: transform .75s cubic-bezier(.2,.85,.2,1); }
.clue-leaf .leaf-back { background: var(--foxfire-green); color: var(--black-loam); transform: rotateY(180deg); }
.clue-leaf.flipped .leaf-front { transform: rotateY(180deg); }.clue-leaf.flipped .leaf-back { transform: rotateY(360deg); }
.fungus-shelf { position: absolute; right: 8vw; bottom: 10vh; display: flex; align-items: end; gap: 16px; padding: 18px 24px; border-bottom: 10px solid #5b3823; color: var(--foxfire-green); font: 900 11px var(--label); text-transform: uppercase; }
.fungus-shelf i { width: 42px; height: 34px; display: block; border-radius: 50% 50% 40% 40%; background: var(--moss-velvet); animation: blinkCap 3s infinite; box-shadow: 0 0 0 rgba(185,242,93,0); }.fungus-shelf i:nth-child(2){animation-delay:.4s}.fungus-shelf i:nth-child(3){animation-delay:1.1s}.fungus-shelf i:nth-child(4){animation-delay:1.8s}
.clay-seal { position: absolute; left: 12vw; bottom: 13vh; max-width: 260px; padding: 24px; border-radius: 50%; background: var(--clay-red); color: var(--bone-chalk); font: 800 18px var(--story); transform: rotate(14deg); box-shadow: inset 0 -8px 0 rgba(13,10,7,.25), 0 18px 28px rgba(0,0,0,.38); }

.false-tooth-maze { background: linear-gradient(144deg, var(--black-loam), #1c151e 52%, var(--burrow-umber)); }
.maze-copy { margin: 7vh 0 0 auto; transform: rotate(2deg); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 88%); }
.worm-map { position: absolute; left: 5vw; bottom: 8vh; width: 72vw; height: 52vh; overflow: visible; }
.worm-map path { fill: none; stroke: var(--foxfire-green); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1500; stroke-dashoffset: 1500; filter: drop-shadow(0 0 13px rgba(185,242,93,.6)); }
.worm-map circle { fill: var(--tarnished-brass); stroke: var(--black-loam); stroke-width: 5; }
.false-socket { position: absolute; left: 18vw; top: 45vh; width: 236px; height: 148px; display: grid; place-items: center; border: 4px dashed rgba(232,215,178,.34); color: rgba(232,215,178,.72); font: 900 12px var(--label); text-transform: uppercase; clip-path: polygon(0 0, 36% 0, 44% 18%, 58% 18%, 66% 0, 100% 0, 100% 100%, 0 100%); }
.clay-tooth { position: absolute; left: 9vw; bottom: 13vh; width: 152px; height: 112px; display: grid; place-items: center; background: var(--clay-red); color: var(--bone-chalk); font: 900 16px var(--label); cursor: grab; clip-path: polygon(0 0, 100% 0, 100% 66%, 76% 66%, 70% 100%, 0 100%); box-shadow: 0 22px 40px rgba(0,0,0,.42), inset 0 -8px 0 rgba(13,10,7,.25); touch-action: none; }
.clay-tooth.shake { animation: insultShake .48s; box-shadow: 0 0 0 8px rgba(182,74,50,.34), 0 22px 40px rgba(0,0,0,.42); }
.chalk-arrow { position: absolute; right: 12vw; bottom: 11vh; color: var(--clay-red); background: rgba(232,215,178,.92); padding: 16px 24px; font: 900 18px var(--story); transform: rotate(-11deg); border-radius: 50% 42% 46% 36%; }

.beetle-key-forge { background: radial-gradient(circle at 68% 55%, rgba(22,124,120,.28), transparent 32%), linear-gradient(126deg, var(--burrow-umber), var(--black-loam)); }
.forge-plate { margin: 9vh 0 0 5vw; background: linear-gradient(135deg, var(--tarnished-brass), #806024); clip-path: polygon(0 8%, 12% 0, 100% 0, 94% 100%, 8% 94%); }
.beetle-key { position: absolute; right: 12vw; top: 19vh; width: 360px; height: 310px; transform-origin: 50% 60%; transition: transform 1s cubic-bezier(.16,.9,.2,1); }
.beetle-key.turned { transform: rotate(24deg) translateY(18px); }
.key-p { position: absolute; top: 40px; display: grid; place-items: center; width: 122px; height: 174px; border-radius: 58px 58px 34px 34px; border: 14px solid var(--beetle-teal); color: var(--foxfire-green); font: 900 92px var(--display); text-shadow: 0 0 14px rgba(185,242,93,.52); box-shadow: inset 0 0 28px rgba(185,242,93,.1), 0 0 30px rgba(22,124,120,.52); }
.key-p.one { left: 38px; transform: rotate(-8deg); }.key-p.two { left: 138px; transform: rotate(8deg); }
.beetle-key i { position: absolute; left: 194px; top: 195px; width: 120px; height: 20px; background: var(--tarnished-brass); box-shadow: 0 0 18px rgba(182,138,58,.45); }.beetle-key i:nth-child(3){top:222px;width:90px}.beetle-key i:nth-child(4){top:249px;width:58px}
.bottle-lens { position: absolute; right: 8vw; bottom: 12vh; width: 210px; height: 100px; display: grid; place-items: center; padding: 20px; border-radius: 50%; color: var(--bone-chalk); background: rgba(22,124,120,.45); border: 2px solid var(--foxfire-green); box-shadow: 0 0 34px rgba(185,242,93,.22), inset 0 0 30px rgba(185,242,93,.12); font: 900 12px var(--mono); text-transform: uppercase; transform: rotate(-9deg); }
.spark-row { position: absolute; left: 48vw; bottom: 21vh; display: flex; gap: 24px; }.spark-row span { width: 8px; height: 44px; border-radius: 8px; background: var(--foxfire-green); box-shadow: 0 0 16px var(--foxfire-green); animation: sparkCrawl 1.6s infinite; }.spark-row span:nth-child(2){animation-delay:.25s}.spark-row span:nth-child(3){animation-delay:.5s}.spark-row span:nth-child(4){animation-delay:.75s}

.clicking-underfloor { background: radial-gradient(circle at 50% 48%, rgba(185,242,93,.18), transparent 28%), linear-gradient(150deg, var(--black-loam), var(--burrow-umber)); }
.underfloor-map { margin: 8vh auto 0; max-width: 760px; background: rgba(232,215,178,.94); clip-path: polygon(0 0, 91% 0, 100% 17%, 96% 94%, 10% 100%, 0 80%); text-align: left; }
.lock-assembly { position: absolute; inset: auto 0 4vh 0; height: 310px; pointer-events: none; }
.lock-piece { position: absolute; display: grid; place-items: center; color: var(--black-loam); font: 900 16px var(--label); text-transform: uppercase; box-shadow: 0 20px 48px rgba(0,0,0,.45), inset 0 -8px 0 rgba(13,10,7,.22); transition: transform 1.1s cubic-bezier(.2,.85,.2,1), box-shadow 1.1s; }
.bark-lock { left: 16vw; top: 82px; width: 180px; height: 94px; background: #8c5937; clip-path: polygon(0 0, 100% 5%, 88% 100%, 10% 92%); color: var(--bone-chalk); transform: rotate(-16deg); }
.bone-lock { left: 35vw; top: 44px; width: 132px; height: 132px; background: var(--bone-chalk); border-radius: 42% 50% 38% 50%; transform: rotate(12deg); }
.moss-lock { right: 31vw; top: 112px; width: 176px; height: 86px; background: var(--moss-velvet); color: var(--bone-chalk); clip-path: polygon(0 0, 78% 0, 100% 50%, 76% 100%, 0 100%); transform: rotate(18deg); }
.brass-lock { right: 13vw; top: 56px; width: 148px; height: 126px; background: var(--tarnished-brass); border-radius: 34px; font-size: 42px; transform: rotate(-8deg); }
.foxfire-core { position: absolute; left: 50%; top: 114px; width: 148px; height: 148px; margin-left: -74px; display: grid; place-items: center; border-radius: 50%; color: var(--black-loam); background: var(--foxfire-green); font: 900 28px var(--display); box-shadow: 0 0 44px rgba(185,242,93,.72), inset 0 0 20px rgba(232,215,178,.42); opacity: .28; transform: scale(.72); transition: opacity 1s, transform 1s; }
.lock-assembly.locked .lock-piece { transform: translate(0, 0) rotate(0deg); box-shadow: 0 0 26px rgba(185,242,93,.26), 0 20px 48px rgba(0,0,0,.45); }
.lock-assembly.locked .bark-lock { transform: translate(20vw, -30px) rotate(0deg); }.lock-assembly.locked .bone-lock { transform: translate(7vw, 8px) rotate(0deg); }.lock-assembly.locked .moss-lock { transform: translate(-10vw, -8px) rotate(0deg); }.lock-assembly.locked .brass-lock { transform: translate(-23vw, 2px) rotate(0deg); }
.lock-assembly.locked .foxfire-core { opacity: 1; transform: scale(1); }
.drawer-mouth { position: absolute; right: 0; bottom: 7vh; width: min(540px, 84vw); padding: 28px 36px; background: var(--burrow-umber); border: 2px solid var(--foxfire-green); color: var(--foxfire-green); font: 900 clamp(24px, 4vw, 48px) var(--display); transform: translateX(52%); transition: transform .9s cubic-bezier(.2,.85,.2,1); box-shadow: 0 0 34px rgba(185,242,93,.26); }
.drawer-mouth.open { transform: translateX(0); }

@keyframes hingeBreathe { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg) translateY(3px); } }
@keyframes drawRoot { to { stroke-dashoffset: 0; } }
@keyframes blinkCap { 0%,78%,100% { background: var(--moss-velvet); box-shadow: none; } 82% { background: var(--foxfire-green); box-shadow: 0 0 20px var(--foxfire-green); } }
@keyframes insultShake { 0%,100% { transform: translate(0,0) rotate(0); } 18% { transform: translate(-16px, 4px) rotate(-5deg); } 38% { transform: translate(14px, -4px) rotate(4deg); } 62% { transform: translate(-9px, 2px) rotate(-3deg); } 82% { transform: translate(7px, -2px) rotate(2deg); } }
@keyframes sparkCrawl { 0%,100% { transform: translateY(0) scaleY(.5); opacity: .35; } 48% { transform: translateY(-28px) scaleY(1.2); opacity: 1; } }

@media (max-width: 780px) {
    .fungus-trail { right: 10px; gap: 10px; }
    .word-carving { margin: 18vh 0 0 0; width: calc(100vw - 54px); }
    h1 { font-size: 52px; }
    .works { display: block; width: max-content; margin-top: 10px; }
    .artifact { transform: scale(.72); }
    .mud-tray, .maze-copy, .forge-plate, .underfloor-map { margin-left: 0; margin-right: 28px; }
    .clue-leaf { right: 9vw; top: auto; bottom: 8vh; width: 226px; height: 150px; }
    .worm-map { width: 94vw; left: 3vw; bottom: 3vh; }
    .false-socket { left: 10vw; top: 56vh; transform: scale(.75); transform-origin: left top; }
    .beetle-key { transform: scale(.66); transform-origin: right top; right: 8vw; top: 45vh; }
    .lock-assembly { transform: scale(.68); transform-origin: center bottom; }
}