:root {
  /* Typography compliance tokens from DESIGN.md: Montserrat* Montserrat** 700/800 Futura-geometric spirit. Use wide tracking Space Mono* Mono** 400 coordinates */
  --cream: #F3E6C8;
  --beige: #CDBB91;
  --umber: #4B3525;
  --moss: #2F4A32;
  --teal: #2F8F83;
  --amber: #F0B84A;
  --wine: #7C2638;
  --burgundy: #5A1626;
  --display: Montserrat, Poppins, Futura, "Avenir Next", "Century Gothic", sans-serif;
  --heading: "Josefin Sans", Poppins, Montserrat, "Avenir Next", sans-serif;
  --body: "Nunito Sans", Nunito, Inter, "Trebuchet MS", sans-serif;
  --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #5A1626;
}

body {
  margin: 0;
  color: #F3E6C8;
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(240, 184, 74, .16), transparent 17rem),
    radial-gradient(circle at 88% 48%, rgba(47, 143, 131, .18), transparent 21rem),
    linear-gradient(135deg, #5A1626 0%, #7C2638 31%, #2F4A32 100%);
}

button, a { font: inherit; }

.fixed-moss {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 5% 95%, rgba(47, 74, 50, .9) 0 12%, transparent 30%),
    radial-gradient(ellipse at 92% 4%, rgba(75, 53, 37, .7) 0 11%, transparent 31%),
    repeating-radial-gradient(circle at 16% 18%, rgba(243, 230, 200, .06) 0 1px, transparent 2px 18px),
    linear-gradient(90deg, rgba(75, 53, 37, .18), transparent 22%, rgba(90, 22, 38, .22));
  mix-blend-mode: soft-light;
}

.spore-field {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.spore {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: var(--glow);
  box-shadow: 0 0 18px var(--glow);
  opacity: .68;
  transform: translate3d(var(--x), var(--y), 0);
  animation: drift var(--duration) ease-in-out infinite alternate;
}

@keyframes drift {
  to { transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0) scale(1.35); opacity: .96; }
}

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

.bead {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: transparent;
  border: 2px solid #CDBB91;
  background: #4B3525;
  box-shadow: 0 0 0 4px rgba(90, 22, 38, .35), inset 0 0 9px rgba(240, 184, 74, .25);
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

.bead span { display: none; }
.bead.active { background: #F0B84A; border-color: #F3E6C8; transform: scale(1.32); }

.quest-scroll { position: relative; z-index: 2; }

.clearing {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 82px);
  display: grid;
  isolation: isolate;
}

.clearing::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  opacity: .72;
  background:
    radial-gradient(circle at var(--fog-x, 50%) var(--fog-y, 50%), rgba(243, 230, 200, .24), transparent 20rem),
    radial-gradient(circle at 78% 18%, rgba(47, 143, 131, .12), transparent 24rem),
    radial-gradient(circle at 10% 88%, rgba(240, 184, 74, .11), transparent 18rem);
  transition: transform .6s ease;
}

.clearing.in-view::before { transform: scale(1.05) rotate(.8deg); }

.hero-clearing {
  background:
    radial-gradient(ellipse at 48% 38%, rgba(243, 230, 200, .24), transparent 25rem),
    linear-gradient(145deg, #5A1626 0%, #7C2638 55%, #2F4A32 100%);
}

.fog-oval {
  align-self: start;
  justify-self: start;
  margin: 8vh 0 0 5vw;
  width: min(760px, 82vw);
  min-height: 390px;
  border-radius: 54% 46% 48% 52% / 52% 47% 53% 48%;
  display: grid;
  align-content: center;
  padding: clamp(30px, 6vw, 70px);
  color: #5A1626;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 9rem),
    rgba(243, 230, 200, .86);
  box-shadow: 0 34px 90px rgba(32, 11, 17, .42), inset 0 0 45px rgba(205, 187, 145, .62);
  backdrop-filter: blur(12px);
}

h1, h2, h3 { margin: 0; }

h1 {
  font-family: var(--display);
  font-size: clamp(4.4rem, 14vw, 11.8rem);
  line-height: .78;
  letter-spacing: .035em;
  font-weight: 800;
  text-transform: lowercase;
  text-shadow: 3px 3px 0 rgba(240, 184, 74, .35);
}

h2 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6.7vw, 6.8rem);
  line-height: .88;
  letter-spacing: .025em;
  font-weight: 800;
}

h3 {
  font-family: var(--heading);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: .03em;
}

.subtitle {
  color: #4B3525;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  margin: 22px 0 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}

.subtitle.shown { opacity: 1; transform: translateY(0); }

.tiny-label {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #F0B84A;
}

.fog-oval .tiny-label { color: #2F4A32; }

.field-notes {
  position: absolute;
  max-width: 310px;
  color: #F3E6C8;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.35;
}

.field-notes p {
  margin: 10px 0;
  padding: 9px 14px;
  border-left: 3px solid #F0B84A;
  background: rgba(75, 53, 37, .36);
  border-radius: 4px 20px 20px 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.notes-left { left: clamp(18px, 5vw, 72px); bottom: 13vh; }
.notes-right { right: clamp(54px, 10vw, 150px); top: 18vh; }
.notes-right.low { top: auto; bottom: 12vh; }
.notes-left.low { bottom: 8vh; }

.thread-line {
  position: absolute;
  height: 6px;
  border-top: 2px dashed rgba(205, 187, 145, .82);
  filter: drop-shadow(0 0 8px rgba(240, 184, 74, .22));
  z-index: 1;
  transform-origin: left center;
}

.thread-one { width: 62vw; left: 18vw; top: 24vh; transform: rotate(19deg); }
.thread-two { width: 58vw; right: 9vw; top: 62vh; transform: rotate(-17deg); }
.thread-three { width: 70vw; left: 12vw; top: 32vh; transform: rotate(15deg); }
.thread-four { width: 74vw; left: 8vw; top: 50vh; transform: rotate(-13deg); }
.thread-five { width: 64vw; right: 12vw; top: 31vh; transform: rotate(22deg); }

.mushroom-marker {
  position: absolute;
  top: 7vh;
  left: 7vw;
  width: 80px;
  height: 92px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 30% 28%, #F0B84A 0 9px, transparent 10px), linear-gradient(#7C2638 0 48%, #CDBB91 49% 100%);
  box-shadow: 0 0 42px rgba(240, 184, 74, .32);
}

.mushroom-marker::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 48px;
  left: 23px;
  bottom: -27px;
  background: #CDBB91;
  border-radius: 14px 14px 9px 9px;
}

.mushroom-marker.small { transform: scale(.72); left: auto; right: 12vw; top: 10vh; }
.mushroom-marker.gold { background: radial-gradient(circle at 65% 22%, #F3E6C8 0 8px, transparent 9px), linear-gradient(#F0B84A 0 48%, #CDBB91 49% 100%); }

.puddle-ripple, .palace-puddle, .last-ripple {
  position: absolute;
  border: 0;
  color: #F3E6C8;
  background: radial-gradient(ellipse at 50% 45%, rgba(47, 143, 131, .58), rgba(75, 53, 37, .92) 62%, rgba(90, 22, 38, .72));
  border-radius: 50%;
  box-shadow: inset 0 0 34px rgba(243, 230, 200, .2), 0 25px 70px rgba(0,0,0,.34);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.hero-ripple { width: 210px; height: 86px; right: 13vw; bottom: 13vh; transform: rotate(-9deg); }
.map-ripple { width: 150px; height: 62px; left: 17vw; bottom: 16vh; transform: rotate(12deg); }
.specimen-ripple { width: 240px; height: 94px; right: 16vw; bottom: 10vh; transform: rotate(9deg); }
.last-ripple { width: 190px; height: 76px; right: 12vw; top: 13vh; transform: rotate(-12deg); }

.puddle-ripple em {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 2;
  color: #F0B84A;
}

.ring {
  position: absolute;
  inset: 50%;
  border: 2px solid rgba(243, 230, 200, .64);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.18);
  animation: ripple 3.8s ease-out infinite;
}

.ring-b { animation-delay: .9s; border-color: rgba(47, 143, 131, .72); }
.ring-c { animation-delay: 1.8s; border-color: rgba(240, 184, 74, .58); }

@keyframes ripple {
  0% { width: 12px; height: 7px; opacity: .85; }
  100% { width: 260px; height: 118px; opacity: 0; }
}

.artifact, .glass-card, .inventory-table {
  position: relative;
  border: 1px solid rgba(243, 230, 200, .34);
  border-radius: 34px;
  color: #F3E6C8;
  background:
    linear-gradient(135deg, rgba(243, 230, 200, .18), rgba(205, 187, 145, .07)),
    rgba(90, 22, 38, .43);
  box-shadow: 0 34px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.23);
  backdrop-filter: blur(16px) saturate(1.1);
}

.touchable { transition: transform .35s ease, filter .35s ease, box-shadow .35s ease; }
.touchable:hover, .touchable.touched { transform: translateY(-8px) rotate(var(--tilt, -1.2deg)); filter: saturate(1.12); box-shadow: 0 42px 105px rgba(0,0,0,.4), 0 0 38px rgba(240, 184, 74, .2); }

.map-clearing { background: linear-gradient(40deg, #2F4A32 0%, #5A1626 48%, #4B3525 100%); }
.map-fragment {
  width: min(690px, 78vw);
  min-height: 430px;
  padding: clamp(28px, 5vw, 60px);
  align-self: center;
  justify-self: end;
  margin-right: 12vw;
  color: #5A1626;
  background: linear-gradient(145deg, rgba(243, 230, 200, .94), rgba(205, 187, 145, .76));
  clip-path: polygon(0 7%, 94% 0, 100% 82%, 87% 100%, 9% 94%);
}

.map-fragment .tiny-label { color: #2F4A32; }
.map-fragment h2 { color: #5A1626; font-size: clamp(2.4rem, 5.4vw, 5.9rem); }
.wax-seal {
  position: absolute;
  right: 42px;
  top: 32px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  background: #7C2638;
  color: #F0B84A;
  box-shadow: inset 0 -8px 18px rgba(90, 22, 38, .8);
}

.map-lines { position: absolute; inset: auto 9% 9% 12%; height: 150px; }
.map-lines i {
  position: absolute;
  border: 2px dashed #2F4A32;
  border-color: #2F4A32 transparent transparent transparent;
  border-radius: 50%;
  opacity: .75;
}
.map-lines i:nth-child(1) { width: 80%; height: 80%; left: 2%; top: 18%; transform: rotate(-10deg); }
.map-lines i:nth-child(2) { width: 62%; height: 70%; left: 18%; top: 3%; transform: rotate(14deg); }
.map-lines i:nth-child(3) { width: 44%; height: 54%; left: 39%; top: 28%; transform: rotate(-24deg); border-color: #F0B84A transparent transparent transparent; }
.map-lines i:nth-child(4) { width: 24%; height: 28%; left: 13%; top: 45%; border-color: #7C2638 transparent transparent transparent; }

.specimen-clearing { background: linear-gradient(135deg, #4B3525 0%, #2F4A32 46%, #5A1626 100%); }
.specimen-stack { align-self: center; justify-self: start; margin-left: 8vw; width: min(860px, 86vw); position: relative; min-height: 610px; }
.glass-card { padding: clamp(26px, 4vw, 52px); width: min(610px, 78vw); min-height: 390px; overflow: hidden; }
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 18%, rgba(243, 230, 200, .24) 0 2px, transparent 3px 24px), linear-gradient(115deg, rgba(255,255,255,.16), transparent 38%);
  opacity: .8;
  transition: opacity .35s ease, transform .35s ease;
}
.glass-card:hover::before, .glass-card.touched::before { opacity: .32; transform: translateY(22px); }
.glass-card > * { position: relative; z-index: 1; }
.glass-card.offset { position: absolute; right: 0; bottom: 18px; width: min(410px, 60vw); min-height: 260px; background-color: rgba(47, 143, 131, .22); --tilt: 2deg; }
.glass-card p { max-width: 35rem; font-size: 1.1rem; line-height: 1.55; }

.drawing { margin: 32px 0 20px; }
.fern { width: 210px; height: 160px; background: linear-gradient(75deg, transparent 48%, #2F8F83 49% 51%, transparent 52%), radial-gradient(ellipse at 38% 45%, #2F4A32 0 10px, transparent 11px), radial-gradient(ellipse at 54% 35%, #2F4A32 0 11px, transparent 12px), radial-gradient(ellipse at 60% 58%, #2F4A32 0 12px, transparent 13px); filter: drop-shadow(0 0 18px rgba(47,143,131,.45)); }
.beetle { width: 96px; height: 120px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 35% 28%, #F0B84A 0 6px, transparent 7px), linear-gradient(90deg, #2F8F83, #5A1626 48%, #2F8F83); box-shadow: inset 0 0 22px rgba(243,230,200,.24), 0 0 24px rgba(47,143,131,.34); }

.stones-clearing { background: linear-gradient(155deg, #5A1626 0%, #4B3525 42%, #2F4A32 100%); }
.stepping-stones {
  position: absolute;
  inset: 18vh 10vw 15vh 8vw;
}
.stone {
  position: absolute;
  width: clamp(130px, 16vw, 235px);
  height: clamp(74px, 9vw, 125px);
  border: 2px solid rgba(205, 187, 145, .5);
  border-radius: 54% 46% 50% 50%;
  color: #F3E6C8;
  background: radial-gradient(ellipse at 42% 35%, rgba(243,230,200,.17), transparent 40%), #4B3525;
  box-shadow: inset 0 -18px 32px rgba(0,0,0,.24), 0 30px 55px rgba(0,0,0,.32);
  cursor: pointer;
}
.stone span { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; color: #F0B84A; }
.stone:nth-child(1) { left: 6%; top: 8%; transform: rotate(-9deg); }
.stone:nth-child(2) { right: 40%; top: 32%; transform: rotate(7deg); }
.stone:nth-child(3) { right: 13%; top: 18%; transform: rotate(-5deg); }
.stone:nth-child(4) { right: 5%; bottom: 5%; transform: rotate(10deg); }
.stone.active { background: radial-gradient(ellipse at center, rgba(47,143,131,.4), transparent 52%), #4B3525; border-color: #F0B84A; }

.signpost { width: min(570px, 72vw); padding: clamp(24px, 4vw, 48px); align-self: end; justify-self: start; margin-left: 8vw; margin-bottom: 4vh; transform: rotate(-2deg); }
.signpost h2 { font-size: clamp(2rem, 4.7vw, 4.8rem); }

.palace-clearing { background: radial-gradient(circle at 68% 62%, rgba(47,143,131,.2), transparent 22rem), linear-gradient(35deg, #2F4A32 0%, #7C2638 52%, #5A1626 100%); }
.palace-note { width: min(620px, 78vw); padding: clamp(28px, 4.4vw, 58px); align-self: center; justify-self: start; margin-left: 8vw; }
.palace-note h2 { font-size: clamp(2.3rem, 5.4vw, 5.6rem); }
.palace-note p:not(.tiny-label) { font-size: clamp(1rem, 1.6vw, 1.32rem); line-height: 1.5; color: #F3E6C8; }
.palace-puddle { width: min(520px, 42vw); height: min(250px, 24vw); right: 9vw; bottom: 17vh; transform: rotate(-8deg); overflow: hidden; }
.palace-reflection { position: relative; width: 72%; height: 64%; transform: translateY(24px) scaleY(.72); opacity: .78; filter: blur(.2px); }
.tower { position: absolute; bottom: 12%; width: 24%; background: linear-gradient(#F3E6C8, rgba(243,230,200,.42)); border-radius: 18px 18px 4px 4px; box-shadow: 0 0 28px rgba(243,230,200,.34); }
.tower::before { content: ""; position: absolute; left: 25%; top: 28%; width: 13px; height: 22px; border-radius: 8px 8px 2px 2px; background: #2F8F83; box-shadow: 38px 21px 0 #F0B84A; }
.tower.left { left: 8%; height: 54%; }
.tower.center { left: 38%; height: 88%; }
.tower.right { right: 7%; height: 64%; }

.inventory-clearing { background: linear-gradient(145deg, #4B3525 0%, #5A1626 54%, #2F4A32 100%); }
.inventory-table {
  align-self: center;
  justify-self: center;
  width: min(930px, 86vw);
  padding: clamp(30px, 5vw, 66px);
  background: linear-gradient(120deg, rgba(75,53,37,.88), rgba(90,22,38,.58)), repeating-linear-gradient(90deg, rgba(205,187,145,.08) 0 2px, transparent 2px 78px);
}
.inventory-table h2 { color: #F3E6C8; }
.charms { display: flex; flex-wrap: wrap; gap: 18px; margin: 36px 0; }
.charm {
  border: 1px solid rgba(240,184,74,.55);
  border-radius: 999px;
  padding: 13px 20px;
  color: #4B3525;
  background: #CDBB91;
  box-shadow: inset 0 0 12px rgba(243,230,200,.42), 0 12px 25px rgba(0,0,0,.18);
  cursor: pointer;
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: .04em;
}
.charm.pocketed { background: #F0B84A; color: #5A1626; transform: translateY(-8px) rotate(2deg); }
.closing-note { max-width: 700px; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.5; color: #F3E6C8; }

@media (max-width: 780px) {
  .bead-nav { right: 12px; }
  .clearing { padding: 26px; }
  .fog-oval { margin: 10vh 0 0; width: 88vw; min-height: 330px; }
  .field-notes { position: relative; left: auto; right: auto; top: auto; bottom: auto; align-self: end; max-width: calc(100vw - 70px); }
  .hero-ripple, .map-ripple, .specimen-ripple, .last-ripple { right: 9vw; bottom: 7vh; }
  .map-fragment, .specimen-stack, .palace-note, .signpost { margin-left: 0; margin-right: 0; justify-self: start; }
  .glass-card.offset { position: relative; margin: -30px 0 0 18vw; width: 68vw; }
  .palace-puddle { width: 76vw; height: 34vw; right: 5vw; bottom: 7vh; }
  .stepping-stones { inset: 12vh 4vw 28vh 4vw; }
}