:root {
  --abyss-slate: #07111F;
  --rollup-glow: #7CFFCB;
  --crystal-violet: #8E5CFF;
  --beacon-gold: #FFD166;
  --mempool-coral: #FF6B7A;
  --mineral-blue: #2E6BFF;
  --parchment-mist: #EAF4E1;
  --font-display: "Unbounded", sans-serif;
  --font-body: "Gabarito", sans-serif;
  --font-lore: "Newsreader", serif;
}

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

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 20%, rgba(46, 107, 255, .22), transparent 30%),
    radial-gradient(circle at 78% 42%, rgba(142, 92, 255, .18), transparent 28%),
    radial-gradient(circle at 55% 82%, rgba(124, 255, 203, .11), transparent 24%),
    repeating-radial-gradient(circle at 48% 40%, rgba(234, 244, 225, .045) 0 1px, transparent 1px 54px);
  mix-blend-mode: screen;
  opacity: .9;
  z-index: 0;
}

.cave-shell { position: relative; min-height: 600vh; background: linear-gradient(180deg, #07111F 0%, #0a1630 45%, #07111F 100%); }
.rooms { position: relative; z-index: 2; }
.cave-room {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 6vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 0, 100% 3%, 96% 91%, 78% 100%, 16% 95%, 0 100%);
}
.cave-room::before {
  content: "";
  position: absolute;
  inset: 2rem;
  border: 1px solid rgba(234, 244, 225, .13);
  clip-path: polygon(4% 12%, 94% 0, 100% 85%, 76% 100%, 0 90%);
  opacity: .75;
  transform: scaleX(.96) rotate(var(--room-tilt, -1deg));
}
.cave-room::after {
  content: "";
  position: absolute;
  inset: auto -10% -8rem -10%;
  height: 20rem;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.0), rgba(0,0,0,.72) 68%), linear-gradient(90deg, transparent, rgba(124,255,203,.06), transparent);
  z-index: -1;
}

.quest-map { position: absolute; left: 0; top: 0; width: 100%; height: 600vh; z-index: 1; pointer-events: none; }
.tunnel-bed { fill: none; stroke: rgba(46, 107, 255, .22); stroke-width: 92; stroke-linecap: round; stroke-linejoin: round; filter: blur(1px); }
.tunnel-path { fill: none; stroke: url(#pathGlow); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .95; }

.quest-orb {
  --orb-color: var(--rollup-glow);
  position: fixed;
  left: 0;
  top: 0;
  width: 3.6rem;
  height: 3.6rem;
  margin: -1.8rem 0 0 -1.8rem;
  border-radius: 50%;
  z-index: 8;
  filter: drop-shadow(0 0 24px var(--orb-color));
  transform: translate3d(50vw, 14vh, 0);
  pointer-events: none;
}
.orb-core { display: block; width: 100%; height: 100%; border-radius: inherit; background: radial-gradient(circle at 35% 28%, #EAF4E1 0 7%, var(--orb-color) 18%, rgba(124,255,203,.35) 42%, rgba(7,17,31,.2) 72%); border: 2px solid rgba(234,244,225,.72); animation: orbPulse 1.65s ease-in-out infinite; }
.orb-rune { position: absolute; left: 50%; top: 104%; transform: translateX(-50%); font: 700 .55rem var(--font-display); letter-spacing: .08em; color: var(--parchment-mist); background: rgba(7,17,31,.82); border: 1px solid currentColor; padding: .22rem .42rem; border-radius: 999px; text-transform: uppercase; }
.quest-orb.lantern { --orb-color: var(--beacon-gold); }
.quest-orb.cargo { --orb-color: var(--mineral-blue); }
.quest-orb.shield { --orb-color: var(--mempool-coral); }
.quest-orb.gem { --orb-color: var(--crystal-violet); }
.quest-orb.star { --orb-color: var(--beacon-gold); }

.mini-map { position: fixed; right: 1rem; top: 1rem; z-index: 10; width: 11rem; padding: .8rem; border: 1px solid rgba(124,255,203,.36); background: rgba(7, 17, 31, .74); backdrop-filter: blur(12px); clip-path: polygon(8% 0, 100% 0, 94% 91%, 72% 100%, 0 94%, 0 13%); }
.mini-title { font: 800 .58rem var(--font-display); letter-spacing: .13em; color: var(--rollup-glow); text-transform: uppercase; margin: 0 0 .55rem; }
.map-node { width: 100%; display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: rgba(234,244,225,.62); font: 700 .72rem var(--font-body); text-transform: lowercase; padding: .28rem .1rem; cursor: pointer; }
.map-node span { width: .52rem; height: .52rem; border-radius: 50%; background: rgba(234,244,225,.22); box-shadow: 0 0 0 1px rgba(234,244,225,.18); }
.map-node.active { color: var(--parchment-mist); }
.map-node.active span { background: var(--rollup-glow); box-shadow: 0 0 18px var(--rollup-glow); }

.room-copy { max-width: 42rem; position: relative; z-index: 3; }
.room-copy.left { margin-left: clamp(0rem, 6vw, 7rem); }
.room-copy.right { margin-left: auto; margin-right: clamp(0rem, 5vw, 5rem); }
.room-copy.narrow { max-width: 34rem; }
.title-copy { padding-top: 6vh; }
h1, h2 { font-family: var(--font-display); line-height: .92; margin: .2rem 0 1rem; text-transform: lowercase; letter-spacing: -.06em; }
h1 { font-size: clamp(4rem, 13vw, 12rem); color: transparent; -webkit-text-stroke: 2px var(--parchment-mist); text-shadow: 0 0 26px rgba(124,255,203,.22), .08em .08em 0 rgba(142,92,255,.26); }
h2 { font-size: clamp(2.6rem, 8vw, 7rem); color: var(--parchment-mist); text-shadow: .06em .06em 0 rgba(46,107,255,.35); }
p { font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.45; margin: 0; color: rgba(234,244,225,.86); }
.lore, .inscription { font-family: var(--font-lore); font-size: clamp(1.15rem, 2vw, 1.55rem); }
.rune-label { display: inline-flex; padding: .42rem .65rem; margin-bottom: .85rem; border: 1px solid rgba(124,255,203,.48); color: var(--rollup-glow); background: rgba(7,17,31,.58); text-transform: uppercase; letter-spacing: .12em; font: 800 .76rem var(--font-display); clip-path: polygon(0 0, 94% 0, 100% 35%, 94% 100%, 0 100%, 5% 50%); }
.inscription { position: absolute; z-index: 3; max-width: 24rem; padding: 1rem 1.1rem; color: var(--parchment-mist); background: rgba(234,244,225,.08); border-left: 3px solid var(--beacon-gold); bottom: 13%; right: 10%; transform: rotate(-2deg); }
.inscription.lower { right: auto; left: 52%; bottom: 10%; }
.inscription.shrine { left: 8%; right: auto; bottom: 8%; border-color: var(--rollup-glow); }

.rock-ceiling { position: absolute; inset: 0 0 auto 0; height: 22vh; background: linear-gradient(180deg, #02060d, transparent); clip-path: polygon(0 0, 100% 0, 100% 48%, 92% 31%, 82% 62%, 70% 34%, 57% 70%, 43% 44%, 31% 77%, 19% 31%, 7% 63%, 0 44%); }
.l1-gate { position: absolute; right: 8%; top: 17%; width: min(28rem, 42vw); height: 23rem; border: 2px solid rgba(255,107,122,.55); background: radial-gradient(circle at top, rgba(255,107,122,.24), rgba(7,17,31,.15)); clip-path: polygon(15% 0, 85% 0, 100% 80%, 86% 100%, 14% 100%, 0 80%); animation: gatePulse 1.8s ease-in-out infinite; }
.citadel { font: 900 5rem var(--font-display); text-align: center; color: var(--mempool-coral); padding-top: 2rem; }
.crowd { position: absolute; inset: auto 11% 4.8rem; display: flex; justify-content: space-between; }
.crowd b, .gate-sparks i { display: block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--mempool-coral); box-shadow: 0 0 18px var(--mempool-coral); animation: flicker 1.4s infinite alternate; }
.elevator-label { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); color: var(--rollup-glow); border: 1px solid var(--rollup-glow); padding: .4rem .7rem; font: 900 .85rem var(--font-display); text-transform: uppercase; }
.gate-sparks { position: absolute; inset: 12% 12% auto auto; width: 28rem; height: 20rem; }
.gate-sparks i { position: absolute; animation-delay: calc(var(--n, 1) * -.19s); }
.gate-sparks i:nth-child(1){left:10%;top:20%;--n:1}.gate-sparks i:nth-child(2){left:26%;top:66%;--n:2}.gate-sparks i:nth-child(3){left:50%;top:35%;--n:3}.gate-sparks i:nth-child(4){left:76%;top:18%;--n:4}.gate-sparks i:nth-child(5){left:88%;top:72%;--n:5}.gate-sparks i:nth-child(6){left:33%;top:8%;--n:6}.gate-sparks i:nth-child(7){left:63%;top:83%;--n:7}.gate-sparks i:nth-child(8){left:7%;top:79%;--n:8}
.stone-door { position: absolute; left: 43%; bottom: 11%; width: 12rem; height: 18rem; border: 2px solid var(--mineral-blue); background: linear-gradient(90deg, rgba(46,107,255,.12), rgba(124,255,203,.1)); clip-path: polygon(17% 0, 83% 0, 100% 100%, 0 100%); display: grid; place-items: center; font: 800 .8rem var(--font-display); text-align: center; color: var(--rollup-glow); text-transform: uppercase; }

.lift { --room-tilt: 2deg; background: radial-gradient(circle at 30% 48%, rgba(46,107,255,.22), transparent 28%); }
.lift-shaft { position: absolute; right: 20%; top: 9%; height: 78%; width: 16rem; border-inline: 4px solid var(--mineral-blue); box-shadow: 0 0 32px rgba(46,107,255,.42); }
.cables { height: 100%; background: repeating-linear-gradient(90deg, transparent 0 28%, rgba(234,244,225,.18) 29% 31%, transparent 32% 60%); animation: cableMove 1.2s linear infinite; }
.elevator-cage { position: absolute; left: 50%; top: 35%; width: 13rem; height: 12rem; transform: translateX(-50%); border: 3px solid var(--rollup-glow); background: rgba(7,17,31,.72); display: grid; place-items: center; box-shadow: 0 0 38px rgba(124,255,203,.28); animation: liftFloat 3.5s ease-in-out infinite; }
.elevator-cage span { font: 900 1rem var(--font-display); color: var(--rollup-glow); text-transform: uppercase; }
.satchels { display: flex; gap: .6rem; }.satchels i { width: 2rem; height: 2.4rem; background: var(--beacon-gold); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); box-shadow: 0 0 15px rgba(255,209,102,.5); }

.sequencer { --room-tilt: -3deg; background: radial-gradient(circle at 70% 38%, rgba(124,255,203,.09), transparent 34%); }
.mine-rails { position: absolute; left: 5%; top: 55%; width: 80%; height: 8rem; border-bottom: 6px solid var(--mineral-blue); transform: rotate(-7deg); }
.mine-rails::before { content:""; position:absolute; inset:auto 0 1.3rem; border-bottom: 3px dashed rgba(234,244,225,.34); }
.mine-cart { position: absolute; left: 18%; top: 42%; width: 16rem; height: 10rem; background: rgba(46,107,255,.2); border: 3px solid var(--mineral-blue); clip-path: polygon(0 12%, 100% 0, 86% 78%, 19% 100%); animation: cartJolt 2.1s steps(2) infinite; }
.cart-number { position: absolute; left: 1rem; top: 1rem; font: 900 2.2rem var(--font-display); color: var(--beacon-gold); }.mine-cart i { position: relative; top: 5.5rem; left: 5rem; display:inline-block; width: 1.5rem; height: 1.5rem; margin:.4rem; border-radius:50%; background: var(--rollup-glow); box-shadow:0 0 18px var(--rollup-glow); }
.cave-sign { position: absolute; left: 18%; bottom: 15%; color: var(--parchment-mist); border: 1px solid var(--beacon-gold); padding: .55rem .9rem; transform: rotate(3deg); font: 800 .8rem var(--font-display); text-transform: uppercase; background: rgba(7,17,31,.64); }

.bridge { background: radial-gradient(circle at 50% 62%, rgba(255,107,122,.12), transparent 30%); }
.rope-bridge { position: absolute; left: 19%; top: 50%; width: 66%; height: 9rem; border-top: 5px solid var(--beacon-gold); border-bottom: 5px solid rgba(255,209,102,.62); transform: rotate(5deg); animation: bridgeTension 2.4s ease-in-out infinite; }
.rope-bridge i { display: inline-block; width: 2px; height: 9rem; margin-left: 13%; background: rgba(234,244,225,.56); }
.shadow-beast { position: absolute; right: 13%; top: 34%; width: 12rem; height: 12rem; border-radius: 45% 55% 30% 70%; background: rgba(0,0,0,.55); color: var(--mempool-coral); display: grid; place-items: center; font: 900 5rem var(--font-display); box-shadow: 0 0 50px rgba(255,107,122,.22); }

.forge { background: radial-gradient(circle at 38% 43%, rgba(142,92,255,.29), transparent 34%); }
.proof-crystal { position: absolute; left: 14%; top: 21%; width: min(34rem, 42vw); height: min(34rem, 42vw); filter: drop-shadow(0 0 50px rgba(142,92,255,.65)); animation: crystalRefract 4s ease-in-out infinite; }
.proof-crystal span { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(234,244,225,.68), var(--crystal-violet), rgba(124,255,203,.55)); clip-path: polygon(50% 0, 90% 30%, 72% 100%, 21% 86%, 0 28%); opacity: .86; }
.proof-crystal span:nth-child(2){ transform: scale(.62) rotate(24deg); opacity:.62; }.proof-crystal span:nth-child(3){ transform: scale(.34) rotate(-21deg); opacity:.8; }.proof-crystal span:nth-child(4){ transform: scale(.16) translate(130%,45%); background: var(--rollup-glow); }
.crystal-beams i { position: absolute; left: 31%; top: 45%; width: 42%; height: 2px; background: linear-gradient(90deg, transparent, var(--rollup-glow), transparent); transform-origin: left center; opacity: .65; animation: beam 2s ease-in-out infinite; }.crystal-beams i:nth-child(2){ transform: rotate(24deg); animation-delay:-.4s}.crystal-beams i:nth-child(3){ transform: rotate(-28deg); animation-delay:-.8s}
.glyph-ring { position: absolute; left: 16%; bottom: 13%; display: flex; gap: .8rem; color: var(--rollup-glow); font: 800 .7rem var(--font-display); text-transform: uppercase; }
.glyph-ring b { border: 1px solid currentColor; padding: .45rem .6rem; border-radius: 999px; }

.beacon { background: radial-gradient(circle at 64% 26%, rgba(255,209,102,.25), transparent 38%); }
.settlement-beacon { position: absolute; right: 10%; top: 8%; width: 28rem; height: 72vh; }
.beam { position: absolute; left: 50%; top: -8%; width: 14rem; height: 70%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255,209,102,.56), transparent); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); animation: beaconSweep 3.2s ease-in-out infinite; }
.tower { position: absolute; left: 50%; bottom: 0; width: 11rem; height: 29rem; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255,209,102,.22), rgba(46,107,255,.2)); border: 3px solid var(--beacon-gold); clip-path: polygon(31% 0, 69% 0, 87% 100%, 13% 100%); }
.tower span { position: absolute; left: 50%; top: -2rem; width: 5rem; height: 5rem; transform: translateX(-50%); border-radius: 50%; background: var(--beacon-gold); box-shadow: 0 0 55px var(--beacon-gold); }
.final-copy { padding-top: 20vh; max-width: 48rem; }

.cave-room .room-copy, .l1-gate, .lift-shaft, .mine-cart, .rope-bridge, .proof-crystal, .settlement-beacon, .inscription { opacity: .36; transform: translateY(1.8rem) scale(.98); transition: opacity .7s ease, transform .7s ease, filter .7s ease; }
.cave-room.active .room-copy, .cave-room.active .l1-gate, .cave-room.active .lift-shaft, .cave-room.active .mine-cart, .cave-room.active .rope-bridge, .cave-room.active .proof-crystal, .cave-room.active .settlement-beacon, .cave-room.active .inscription { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1.2); }

@keyframes orbPulse { 50% { transform: scale(1.16); box-shadow: 0 0 38px var(--orb-color); } }
@keyframes gatePulse { 50% { box-shadow: 0 0 42px rgba(255,107,122,.5); transform: scale(1.018); } }
@keyframes flicker { 50% { opacity: .32; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(5px); } }
@keyframes cableMove { to { background-position: 0 32px; } }
@keyframes liftFloat { 50% { transform: translate(-50%, 2.5rem); } }
@keyframes cartJolt { 50% { transform: translate(1rem, -.4rem) rotate(-1deg); } }
@keyframes bridgeTension { 50% { transform: rotate(5deg) translateY(.8rem) skewX(-2deg); } }
@keyframes crystalRefract { 50% { transform: rotate(5deg) scale(1.04); } }
@keyframes beam { 50% { opacity: 1; width: 55%; } }
@keyframes beaconSweep { 50% { transform: translateX(-50%) rotate(4deg); opacity: .72; } }

@media (max-width: 760px) {
  .mini-map { width: 9.5rem; transform: scale(.86); transform-origin: top right; }
  .cave-room { padding: 6rem 1.15rem; }
  .room-copy.right, .room-copy.left { margin: 0; }
  .l1-gate, .lift-shaft, .mine-cart, .settlement-beacon { opacity: .42; right: -18%; left: auto; transform: scale(.75); }
  .proof-crystal { left: -8%; width: 22rem; height: 22rem; }
  .rope-bridge { left: -5%; width: 110%; }
  .inscription { position: relative; inset: auto; margin-top: 2rem; }
}