/* Space Mono only for tiny coordinate marks on the map so the mystical world has a subtle artifact-catalog precision. */
:root {
  --abyss: #080713;
  --shadow: #1B1233;
  --amethyst: #33205F;
  --rune: #6D4AFF;
  --moon: #C9A7FF;
  --parchment: #F4E7B8;
  --pool: #7FE7D6;
  --brass: #D8B15A;
  --fae: #FF8ECF;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--abyss);
  color: var(--parchment);
  font-family: "Alegreya", serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image:
    radial-gradient(circle at 17% 23%, rgba(244,231,184,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 57%, rgba(201,167,255,.4) 0 1px, transparent 1.5px),
    linear-gradient(125deg, transparent 0 31%, rgba(216,177,90,.08) 32%, transparent 33% 100%);
  background-size: 37px 41px, 53px 47px, 420px 420px;
  mix-blend-mode: screen;
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 82%, rgba(109,74,255,.22), transparent 34%),
    radial-gradient(circle at 76% 20%, rgba(255,142,207,.12), transparent 26%),
    linear-gradient(135deg, var(--abyss), var(--shadow) 52%, var(--abyss));
}

.waystones {
  position: fixed;
  z-index: 60;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
}
.waystone {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--moon);
  border: 1px solid rgba(244,231,184,.22);
  border-radius: 50%;
  background: rgba(8,7,19,.7);
  box-shadow: inset 0 0 12px rgba(201,167,255,.08);
  transition: transform .5s ease, color .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.waystone span { font-family: "Uncial Antiqua", cursive; font-size: 17px; }
.waystone.active, .waystone:hover {
  color: var(--pool);
  border-color: var(--brass);
  transform: scale(1.18) rotate(18deg);
  box-shadow: 0 0 22px rgba(127,231,214,.55), inset 0 0 20px rgba(109,74,255,.3);
}

.trail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .95;
}
#questTrail {
  fill: none;
  stroke: var(--brass);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  filter: drop-shadow(0 0 12px rgba(216,177,90,.6));
  transition: stroke-dashoffset 2.6s cubic-bezier(.16,.8,.25,1);
}
body.awake #questTrail { stroke-dashoffset: 0; }

.gate-scene { display: grid; place-items: center; }
.crescent-gate {
  position: absolute;
  left: 7vw;
  bottom: 7vh;
  width: min(57vw, 660px);
  height: min(57vw, 660px);
  opacity: .72;
  transition: opacity 1.1s ease, filter 1.1s ease;
}
body.awake .crescent-gate { opacity: 1; filter: drop-shadow(0 0 30px rgba(201,167,255,.45)); }
.gate-ring, .gate-arch, .gate-moon {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
}
.gate-ring { border: 2px solid rgba(244,231,184,.32); box-shadow: inset 0 0 60px rgba(51,32,95,.8), 0 0 40px rgba(109,74,255,.22); }
.gate-arch { inset: 20% 18% 6%; border: 5px double rgba(216,177,90,.65); border-bottom-color: transparent; border-radius: 50% 50% 9% 9%; }
.gate-moon { inset: 14%; background: radial-gradient(circle at 60% 42%, var(--abyss) 0 32%, transparent 33%), radial-gradient(circle at 46% 50%, rgba(201,167,255,.45), transparent 42%); }
.gate-runes { position: absolute; inset: 0; animation: rotateSlow 28s linear infinite; }
.gate-runes span { position: absolute; left: 50%; top: 50%; font: 28px "Uncial Antiqua"; color: var(--moon); text-shadow: 0 0 16px var(--rune); opacity: .15; }
body.awake .gate-runes span { opacity: 1; transition: opacity .5s ease; }
.gate-runes span:nth-child(1){ transform: rotate(12deg) translateY(-260px); transition-delay:.2s; }
.gate-runes span:nth-child(2){ transform: rotate(80deg) translateY(-260px); transition-delay:.55s; }
.gate-runes span:nth-child(3){ transform: rotate(154deg) translateY(-260px); transition-delay:.9s; }
.gate-runes span:nth-child(4){ transform: rotate(231deg) translateY(-260px); transition-delay:1.25s; }
.gate-runes span:nth-child(5){ transform: rotate(304deg) translateY(-260px); transition-delay:1.6s; }

.hero-inscription {
  position: relative;
  width: min(620px, 86vw);
  margin-left: 24vw;
  padding: 34px 38px;
  background: linear-gradient(145deg, rgba(27,18,51,.78), rgba(8,7,19,.42));
  border: 1px solid rgba(216,177,90,.38);
  box-shadow: 0 25px 90px rgba(0,0,0,.42), inset 0 0 34px rgba(201,167,255,.08);
  clip-path: polygon(4% 0, 100% 7%, 95% 100%, 0 93%);
}
h1, h2, h3 { font-family: "Cinzel Decorative", serif; margin: 0; letter-spacing: .05em; }
h1 { font-size: clamp(3rem, 8vw, 7.6rem); color: var(--parchment); text-shadow: 0 0 18px rgba(201,167,255,.55), 0 0 2px var(--brass); }
h2 { font-size: clamp(2.2rem, 5vw, 5.3rem); color: var(--parchment); text-shadow: 0 0 18px rgba(109,74,255,.4); }
h3 { font-size: clamp(2.4rem, 7vw, 6rem); color: var(--pool); text-shadow: 0 0 28px rgba(127,231,214,.55); }
.lore, .marginalia p, .vault-card p { font-size: clamp(1.15rem, 1.75vw, 1.55rem); line-height: 1.45; }
.coordinate { font-family: "Space Mono", monospace; font-size: .72rem; letter-spacing: .25em; color: var(--pool); }
.scene-num { font-family: "Uncial Antiqua", cursive; color: var(--fae); font-size: 2.1rem !important; margin: 0 0 10px; }

button { font: inherit; color: inherit; cursor: pointer; }
.rune-button, .seal-button {
  font-family: "Uncial Antiqua", cursive;
  border: 1px solid var(--brass);
  background: rgba(51,32,95,.55);
  color: var(--parchment);
  padding: 13px 24px;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(216,177,90,.16);
  transition: transform .35s ease, box-shadow .35s ease, color .35s ease;
}
.rune-button:hover, .seal-button:hover { transform: scale(1.06); color: var(--pool); box-shadow: 0 0 28px rgba(127,231,214,.35); }

.silver-footprints i { position: absolute; width: 11px; height: 22px; border-radius: 50%; background: rgba(244,231,184,.55); box-shadow: 0 0 12px rgba(244,231,184,.45); opacity: 0; }
body.awake .silver-footprints i { animation: footprint 2.8s ease forwards; }
.silver-footprints i:nth-child(1){ left:18%; bottom:15%; animation-delay:.4s; }.silver-footprints i:nth-child(2){ left:22%; bottom:22%; animation-delay:.85s; }.silver-footprints i:nth-child(3){ left:28%; bottom:28%; animation-delay:1.3s; }.silver-footprints i:nth-child(4){ left:35%; bottom:36%; animation-delay:1.75s; }

.pool-scene { display: grid; grid-template-columns: 1fr 470px; align-items: center; padding: 7vw; }
.map-table { position: relative; width: min(72vw, 860px); height: 70vh; border-radius: 44% 56% 48% 52%; background: radial-gradient(circle, rgba(244,231,184,.18), rgba(216,177,90,.08) 42%, transparent 70%); border: 1px solid rgba(216,177,90,.25); }
.vellum-fold { position:absolute; background: rgba(244,231,184,.12); border: 1px solid rgba(216,177,90,.18); filter: blur(.2px); }
.fold-one { left: 8%; top: 18%; width: 70%; height: 22%; transform: rotate(-9deg); }.fold-two { right: 9%; bottom: 12%; width: 42%; height: 45%; transform: rotate(14deg); }
.oracle-pool { position: absolute; left: 22%; top: 24%; width: 430px; height: 430px; max-width: 52vw; max-height: 52vw; display: grid; place-items: center; border-radius: 50%; color: var(--pool); background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(244,231,184,.35), transparent 10%), radial-gradient(circle, rgba(127,231,214,.42), rgba(109,74,255,.25) 45%, rgba(8,7,19,.6) 72%); box-shadow: inset 0 0 50px rgba(127,231,214,.45), 0 0 60px rgba(127,231,214,.18); overflow: hidden; }
.oracle-pool:before { content:""; position:absolute; inset:10%; border-radius:50%; border: 1px dashed rgba(244,231,184,.35); animation: ripple 3.2s ease-in-out infinite; }
.pool-text { font-family:"Cinzel Decorative"; font-size: clamp(1.4rem,3vw,3rem); text-align:center; padding:30px; }
.pool-reflection { position:absolute; bottom: 24%; font-style: italic; color: var(--parchment); opacity:.72; transform: scaleY(-1); }
.compass { position: absolute; right: 11%; top: 10%; width: 160px; height: 160px; border: 1px solid var(--brass); border-radius: 50%; animation: rotateSlow 34s linear infinite reverse; }
.compass:before, .compass:after { content:""; position:absolute; background: var(--brass); opacity:.5; }.compass:before{ left:50%; top:8%; width:1px; height:84%; }.compass:after{ top:50%; left:8%; height:1px; width:84%; }.compass span { position:absolute; font-family:"Space Mono"; font-size:.7rem; color:var(--brass); }.compass span:nth-child(1){top:8px;left:48%;}.compass span:nth-child(2){right:10px;top:47%;}.compass span:nth-child(3){bottom:8px;left:48%; color:var(--fae);}.compass span:nth-child(4){left:10px;top:47%;}

.marginalia, .vault-card {
  position: relative;
  padding: 30px 34px;
  background: rgba(244,231,184,.10);
  border: 1px solid rgba(216,177,90,.32);
  box-shadow: 0 18px 70px rgba(0,0,0,.32), inset 0 0 22px rgba(244,231,184,.05);
  backdrop-filter: blur(2px);
}
.right { justify-self: end; }.left { width:min(520px,88vw); margin: 10vh 0 0 8vw; }.center-scrap { width:min(560px,82vw); margin:auto; top:24vh; clip-path: polygon(3% 7%, 95% 0, 100% 92%, 0 100%); }.bridge-note { position:absolute; left:7vw; top:10vh; width:min(560px,86vw); }

.orchard-scene { background: radial-gradient(circle at 70% 20%, rgba(255,142,207,.13), transparent 28%), linear-gradient(180deg, var(--shadow), var(--abyss)); }
.talisman-grove { position:absolute; right:10vw; top:0; height:100%; width:min(620px,55vw); }
.charm { position:absolute; top: 12%; width:86px; height:126px; border:1px solid rgba(216,177,90,.55); border-radius: 42% 42% 48% 48%; background: linear-gradient(rgba(244,231,184,.12), rgba(51,32,95,.58)); box-shadow: 0 0 24px rgba(201,167,255,.16); animation: sway 4s ease-in-out infinite; }
.charm:before { content:""; position:absolute; left:50%; bottom:100%; width:1px; height:38vh; background: linear-gradient(var(--brass), transparent); }
.charm:nth-child(1){ left:5%; top:18%; }.charm:nth-child(2){ left:36%; top:8%; animation-delay:.8s; }.charm:nth-child(3){ left:63%; top:28%; animation-delay:1.3s; }.charm:nth-child(4){ left:82%; top:16%; animation-delay:2s; }
.charm.tall { height:158px; }.charm.small { width:66px; height:96px; }
.rune, .flower { position:absolute; inset:0; display:grid; place-items:center; font-family:"Uncial Antiqua"; font-size:2.2rem; transition: opacity .45s ease, transform .45s ease; }
.flower { opacity:0; color:var(--fae); transform: scale(.2) rotate(-40deg); text-shadow:0 0 20px var(--fae); }
.charm:hover .rune, .charm.bloom .rune { opacity:0; transform:scale(.2); }.charm:hover .flower, .charm.bloom .flower { opacity:1; transform:scale(1.2) rotate(12deg); }
.fungi i { position:absolute; bottom:6vh; width:28px; height:36px; background: radial-gradient(circle at 50% 20%, var(--pool), var(--amethyst) 45%, transparent 46%); filter: drop-shadow(0 0 16px var(--pool)); }.fungi i:nth-child(1){left:8%;}.fungi i:nth-child(2){left:14%;height:52px;}.fungi i:nth-child(3){right:17%;}.fungi i:nth-child(4){right:23%;height:44px;}

.labyrinth-scene { background: radial-gradient(circle at 50% 50%, rgba(201,167,255,.18), transparent 36%), var(--abyss); }
.crystal-maze { position:absolute; inset:5vh 7vw; }
.facet { position:absolute; border:1px solid rgba(127,231,214,.38); background: linear-gradient(135deg, rgba(127,231,214,.12), rgba(109,74,255,.2), rgba(255,142,207,.07)); clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%); animation: facetTurn 10s ease-in-out infinite alternate; }
.f1{left:4%;top:18%;width:24vw;height:38vh}.f2{left:26%;top:4%;width:20vw;height:30vh;animation-delay:1s}.f3{right:16%;top:9%;width:28vw;height:42vh;animation-delay:2s}.f4{left:18%;bottom:4%;width:28vw;height:36vh;animation-delay:3s}.f5{right:5%;bottom:9%;width:22vw;height:34vh;animation-delay:4s}.f6{left:54%;top:39%;width:18vw;height:26vh;animation-delay:5s}
.shake { animation: shake .42s ease; }

.bridge-scene { background: linear-gradient(180deg, var(--abyss), #000 50%, var(--shadow)); }
.word-bridge { position:absolute; left:10vw; right:10vw; top:56%; display:flex; justify-content:space-between; align-items:center; gap: 16px; }
.word-bridge:before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); box-shadow: 0 0 20px var(--brass); }
.word-bridge span { position:relative; padding: 16px 24px; color:var(--abyss); background: var(--parchment); border:1px solid var(--brass); transform: rotate(var(--r, -3deg)); font-family:"Alegreya"; font-weight:700; box-shadow: 0 14px 40px rgba(0,0,0,.44); }
.word-bridge span:nth-child(even){ --r:4deg; margin-top:52px; }
.bottle-lanterns i { position:absolute; width:32px; height:58px; border:1px solid var(--brass); border-radius: 12px 12px 18px 18px; background: radial-gradient(circle at 50% 70%, var(--pool), transparent 45%); box-shadow: 0 0 24px rgba(127,231,214,.45); animation: pulse 2.8s ease-in-out infinite; }.bottle-lanterns i:nth-child(1){left:22%;top:18%;}.bottle-lanterns i:nth-child(2){right:25%;top:22%;animation-delay:.8s}.bottle-lanterns i:nth-child(3){left:53%;bottom:12%;animation-delay:1.5s}

.vault-scene { display:grid; place-items:center; background: radial-gradient(circle at 50% 8%, rgba(201,167,255,.28), transparent 42%), linear-gradient(var(--shadow), var(--abyss)); }
.constellation-dome { position:absolute; width:82vw; height:82vw; max-width:900px; max-height:900px; border:1px solid rgba(201,167,255,.25); border-radius:50%; animation: rotateSlow 55s linear infinite; }
.constellation-dome:before { content:""; position:absolute; inset:14%; border-radius:50%; border:1px dashed rgba(216,177,90,.28); }
.constellation-dome span { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--parchment); box-shadow:0 0 18px var(--pool); }.constellation-dome span:nth-child(1){left:48%;top:8%;}.constellation-dome span:nth-child(2){left:70%;top:22%;}.constellation-dome span:nth-child(3){left:77%;top:55%;}.constellation-dome span:nth-child(4){left:51%;top:78%;}.constellation-dome span:nth-child(5){left:28%;top:62%;}.constellation-dome span:nth-child(6){left:22%;top:31%;}.constellation-dome span:nth-child(7){left:50%;top:45%;background:var(--fae);}
.vault-card { text-align:center; width:min(680px,86vw); }
.star-key { width:150px; height:150px; margin:24px auto; border:1px solid var(--brass); border-radius:50%; background: radial-gradient(circle, rgba(216,177,90,.2), rgba(109,74,255,.16)); position:relative; display:grid; place-items:center; transition: transform .7s ease, box-shadow .7s ease; }
.star-key span:before { content:"✦"; font-size:4rem; color:var(--brass); text-shadow:0 0 24px var(--brass); }
.star-key.open { transform: rotate(90deg) scale(1.12); box-shadow:0 0 80px rgba(216,177,90,.65), inset 0 0 38px rgba(127,231,214,.32); }

.moth { position:fixed; width:120px; height:70px; pointer-events:none; z-index:5; opacity:.12; background: radial-gradient(ellipse at 35% 50%, var(--parchment) 0 34%, transparent 36%), radial-gradient(ellipse at 65% 50%, var(--parchment) 0 34%, transparent 36%); filter: blur(1px); animation: drift 18s ease-in-out infinite; }.moth-one{left:6vw;top:18vh}.moth-two{right:14vw;bottom:18vh;animation-delay:7s;}

@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes ripple { 50% { transform: scale(1.18); opacity:.4; } }
@keyframes sway { 50% { transform: rotate(5deg) translateY(8px); } }
@keyframes facetTurn { to { transform: rotateY(24deg) rotateZ(6deg); filter: hue-rotate(25deg) brightness(1.2); } }
@keyframes shake { 20%{transform:translateX(-10px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }
@keyframes pulse { 50% { transform: scale(1.08); opacity:.72; } }
@keyframes footprint { to { opacity:.85; transform: translate(20px,-20px) rotate(28deg); } }
@keyframes drift { 50% { transform: translate(36px, -28px) rotate(18deg); } }

@media (max-width: 800px) {
  .hero-inscription { margin: 0; }
  .crescent-gate { left:-18vw; width:92vw; height:92vw; }
  .pool-scene { grid-template-columns:1fr; padding: 18vh 7vw 8vh; }
  .map-table { width: 86vw; height: 52vh; }
  .right { justify-self: start; margin-top: 24px; }
  .talisman-grove { right: 0; width: 100vw; opacity:.75; }
  .word-bridge { left:4vw; right:4vw; gap:6px; }
  .word-bridge span { padding:10px 9px; font-size:.9rem; }
  .waystones { right: 10px; }
}