/* [project]/public/css/lore.css [app-client] (css) */
.lore-wrapper {
  width: 100%;
  height: 98vh;
  position: relative;
  overflow: hidden;
}

.lore-scroll {
  z-index: 2;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: scroll;
}

.lore-scroll::-webkit-scrollbar {
  display: none;
}

.lore-ambient {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lore-ambient-glow {
  background: radial-gradient(60% 50% at 20% 30%, #b4823c26 0%, #0000 60%), radial-gradient(50% 40% at 80% 70%, #7850c81a 0%, #0000 55%);
  animation: 12s ease-in-out infinite lore-glow-drift;
  position: absolute;
  inset: 0;
}

@keyframes lore-glow-drift {
  0%, 100% {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.lore-rune-particles {
  position: absolute;
  inset: 0;
}

.lore-rune {
  background: radial-gradient(circle, #f0d13de6 0%, #f0b42866 50%, #0000 100%);
  border-radius: 50%;
  width: 3px;
  height: 3px;
  animation: linear infinite lore-rune-float;
  position: absolute;
  box-shadow: 0 0 8px 2px #f0d13d4d;
}

@keyframes lore-rune-float {
  0% {
    opacity: 0;
    transform: translateY(0)translateX(0)scale(1);
  }

  10% {
    opacity: .7;
  }

  50% {
    transform: translateY(-40vh) translateX(var(--drift, 10px)) scale(.6);
    opacity: .4;
  }

  100% {
    transform: translateY(-90vh) translateX(calc(var(--drift, 10px) * 2)) scale(.1);
    opacity: 0;
  }
}

.lore-chapter {
  scroll-snap-align: start;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.lore-map-section {
  text-align: center;
  padding: 60px 0 0;
  position: relative;
}

.lore-map-title {
  color: #f5e6d3;
  text-shadow: 0 0 40px #f0d13d4d, 0 2px 4px #0009;
  letter-spacing: 3px;
  margin-bottom: 16px;
  font-family: Metal Mania, serif;
  font-size: 52px;
  animation: 4s ease-in-out infinite lore-title-glow;
}

@keyframes lore-title-glow {
  0%, 100% {
    text-shadow: 0 0 40px #f0d13d4d, 0 2px 4px #0009;
  }

  50% {
    text-shadow: 0 0 60px #f0d13d80, 0 2px 4px #0009;
  }
}

.lore-map-subtitle {
  color: #c4a882;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-size: 16px;
}

.lore-map-frame {
  display: inline-block;
  position: relative;
}

.lore-map-parchment {
  clip-path: polygon(.3% 1.8%, 2.5% .4%, 5% 1.5%, 7% .2%, 9.5% 1.3%, 12% .6%, 14.5% 1.6%, 17% .3%, 20% 1%, 23% .5%, 26% 1.4%, 29% .1%, 32% .9%, 35% 1.5%, 38% .4%, 41% 1.2%, 44% .3%, 47% 1%, 50% .6%, 53% 1.6%, 56% .2%, 59% 1.1%, 62% .5%, 65% 1.4%, 68% .3%, 71% 1%, 74% .7%, 77% 1.5%, 80% .2%, 83% 1.3%, 86% .6%, 89% 1.1%, 92% .4%, 95% 1.4%, 97.5% .5%, 99.5% 1.2%, 99% 4%, 99.7% 8%, 98.8% 12%, 99.5% 16%, 99.1% 20%, 99.6% 24%, 99% 28%, 99.4% 32%, 98.9% 36%, 99.7% 40%, 99.2% 44%, 99.6% 48%, 98.8% 52%, 99.3% 56%, 99.8% 60%, 99.1% 64%, 99.5% 68%, 99% 72%, 99.6% 76%, 99.2% 80%, 99.7% 84%, 99% 88%, 99.4% 92%, 99.8% 96%, 99.4% 98.8%, 97% 99.6%, 94.5% 98.5%, 92% 99.3%, 89% 98.8%, 86% 99.5%, 83% 98.4%, 80% 99.1%, 77% 98.7%, 74% 99.6%, 71% 98.3%, 68% 99%, 65% 98.6%, 62% 99.4%, 59% 98.2%, 56% 99.1%, 53% 98.7%, 50% 99.5%, 47% 98.4%, 44% 99%, 41% 98.8%, 38% 99.6%, 35% 98.3%, 32% 99.2%, 29% 98.6%, 26% 99.4%, 23% 98.2%, 20% 99%, 17% 98.7%, 14% 99.5%, 11% 98.4%, 8% 99.2%, 5% 98.6%, 2.5% 99.3%, .4% 98.5%, .9% 96%, .2% 92%, 1.1% 88%, .4% 84%, 1% 80%, .3% 76%, .8% 72%, 1.2% 68%, .5% 64%, .1% 60%, .9% 56%, .3% 52%, 1% 48%, .6% 44%, .2% 40%, 1.1% 36%, .4% 32%, .8% 28%, 1.2% 24%, .5% 20%, .1% 16%, .7% 12%, 1.1% 8%, .4% 4%);
  position: relative;
}

.lore-map-img {
  border: none;
  border-radius: 0;
  display: block;
}

.lore-map-parchment:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(35% 35% at 0 0, #1408008c 0%, #0000 100%), radial-gradient(30% 35% at 100% 0, #14080073 0%, #0000 100%), radial-gradient(35% 30% at 0 100%, #14080080 0%, #0000 100%), radial-gradient(30% 30% at 100% 100%, #14080073 0%, #0000 100%), radial-gradient(90% 85%, #0000 55%, #140a004d 100%);
  position: absolute;
  inset: 0;
}

.lore-map-magic {
  z-index: 2;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fm-knight {
  width: 22%;
  height: 26%;
  position: absolute;
  top: 22%;
  left: 58%;
}

.fm-knight-aura {
  background: radial-gradient(circle, #ffd75040 0%, #ffc83214 50%, #0000 70%);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: 4s ease-in-out infinite fm-knight-pulse;
  position: absolute;
  top: 40%;
  left: 35%;
  box-shadow: 0 0 30px 10px #ffd7501a;
}

.fm-knight-spark {
  background: #ffe682e6;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: ease-in-out infinite fm-knight-twinkle;
  position: absolute;
  box-shadow: 0 0 8px 3px #ffd75080;
}

.fm-ks-1 {
  animation-duration: 3s;
  animation-delay: 0s;
  top: 30%;
  left: 50%;
}

.fm-ks-2 {
  animation-duration: 3.5s;
  animation-delay: 1s;
  top: 55%;
  left: 25%;
}

.fm-ks-3 {
  animation-duration: 2.8s;
  animation-delay: 2s;
  top: 20%;
  left: 65%;
}

@keyframes fm-knight-pulse {
  0%, 100% {
    opacity: .5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

@keyframes fm-knight-twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(.5);
  }

  30% {
    opacity: 1;
    transform: scale(1.2);
  }

  60% {
    opacity: .4;
    transform: scale(.8);
  }
}

.fm-mithia {
  width: 20%;
  height: 24%;
  position: absolute;
  top: 24%;
  left: 10%;
}

.fm-mithia-aura {
  background: radial-gradient(circle, #c8dcff33 0%, #b4c8f00f 60%, #0000 80%);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: 5s ease-in-out infinite fm-mithia-glow;
  position: absolute;
  top: 35%;
  left: 40%;
  box-shadow: 0 0 20px 6px #c8dcff14;
}

.fm-mithia-spear {
  background: linear-gradient(#c8dcff99, #c8dcff1a, #0000);
  width: 1px;
  animation: linear infinite fm-mithia-streak;
  position: absolute;
}

.fm-ms-1 {
  height: 20px;
  animation-duration: 2.5s;
  animation-delay: 0s;
  top: 20%;
  left: 35%;
}

.fm-ms-2 {
  height: 16px;
  animation-duration: 3s;
  animation-delay: 1.2s;
  top: 50%;
  left: 55%;
}

@keyframes fm-mithia-glow {
  0%, 100% {
    opacity: .4;
    transform: scale(1);
  }

  50% {
    opacity: .9;
    transform: scale(1.2);
  }
}

@keyframes fm-mithia-streak {
  0% {
    opacity: 0;
    transform: translateY(8px)scaleY(.5);
  }

  20% {
    opacity: 1;
    transform: translateY(0)scaleY(1);
  }

  40% {
    opacity: .6;
    transform: translateY(-6px)scaleY(.8);
  }

  60% {
    opacity: 0;
    transform: translateY(-12px)scaleY(.3);
  }

  100% {
    opacity: 0;
  }
}

.fm-adventurer {
  width: 22%;
  height: 18%;
  position: absolute;
  top: 4%;
  left: 24%;
}

.fm-adv-torch {
  border-radius: 50% 50% 30% 30%;
  width: 6px;
  height: 10px;
  animation: ease-in-out infinite fm-adv-flicker;
  position: absolute;
}

.fm-at-1 {
  background: radial-gradient(#ffb43ccc, #ff8c1e4d, #0000);
  animation-duration: 1.8s;
  animation-delay: 0s;
  top: 30%;
  left: 30%;
  box-shadow: 0 0 10px 4px #ffa0284d;
}

.fm-at-2 {
  background: radial-gradient(#ffb43cb3, #ff8c1e33, #0000);
  animation-duration: 2.2s;
  animation-delay: .5s;
  top: 50%;
  left: 65%;
  box-shadow: 0 0 8px 3px #ffa02840;
}

.fm-adv-ember {
  background: #ffc850e6;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  animation: linear infinite fm-adv-rise;
  position: absolute;
}

.fm-ae-1 {
  animation-duration: 2.5s;
  animation-delay: 0s;
  top: 40%;
  left: 35%;
}

.fm-ae-2 {
  animation-duration: 3s;
  animation-delay: .8s;
  top: 55%;
  left: 60%;
}

.fm-ae-3 {
  animation-duration: 2.8s;
  animation-delay: 1.5s;
  top: 35%;
  left: 50%;
}

@keyframes fm-adv-flicker {
  0%, 100% {
    opacity: .5;
    transform: scale(1)scaleX(1);
  }

  25% {
    opacity: 1;
    transform: scale(1.1)scaleX(.9);
  }

  50% {
    opacity: .7;
    transform: scale(.95)scaleX(1.1);
  }

  75% {
    opacity: 1;
    transform: scale(1.05)scaleX(.95);
  }
}

@keyframes fm-adv-rise {
  0% {
    opacity: .8;
    transform: translateY(0)scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-18px)translateX(4px)scale(.3);
  }
}

.fm-wizard {
  width: 20%;
  height: 30%;
  position: absolute;
  top: 32%;
  left: 32%;
}

.fm-wiz-aura {
  background: radial-gradient(circle, #50a0ff26 0%, #6478dc0d 50%, #0000 70%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: 5s ease-in-out infinite fm-wiz-pulse;
  position: absolute;
  top: 30%;
  left: 30%;
  box-shadow: 0 0 25px 8px #50a0ff14;
}

.fm-wiz-rune {
  background: none;
  border: 1px solid #64b4ff99;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: ease-in-out infinite fm-wiz-float;
  position: absolute;
  box-shadow: 0 0 6px 2px #64b4ff4d;
}

.fm-wr-1 {
  animation-duration: 4s;
  animation-delay: 0s;
  top: 40%;
  left: 45%;
}

.fm-wr-2 {
  animation-duration: 4.5s;
  animation-delay: 1.3s;
  top: 55%;
  left: 30%;
}

.fm-wr-3 {
  animation-duration: 3.8s;
  animation-delay: 2.5s;
  top: 30%;
  left: 55%;
}

.fm-wiz-orbit {
  border: 1px solid #0000;
  border-top-color: #64b4ff40;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: 8s linear infinite fm-wiz-spin;
  position: absolute;
  top: 32%;
  left: 32%;
}

@keyframes fm-wiz-pulse {
  0%, 100% {
    opacity: .4;
    transform: scale(1);
  }

  50% {
    opacity: .9;
    transform: scale(1.15);
  }
}

@keyframes fm-wiz-float {
  0%, 100% {
    opacity: .2;
    transform: translateY(0)scale(.8);
  }

  50% {
    opacity: .9;
    transform: translateY(-8px)scale(1.2);
  }
}

@keyframes fm-wiz-spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.fm-nightspawn {
  width: 20%;
  height: 22%;
  position: absolute;
  top: 0%;
  left: 0%;
}

.fm-ns-void {
  background: radial-gradient(circle, #501e784d 0%, #280a3c1a 50%, #0000 70%);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: 6s ease-in-out infinite fm-ns-breathe;
  position: absolute;
  top: 30%;
  left: 30%;
}

.fm-ns-tendril {
  background: linear-gradient(#783cb466, #501e8c26, #0000);
  border-radius: 1px;
  width: 2px;
  animation: ease-in-out infinite fm-ns-wisp;
  position: absolute;
}

.fm-nt-1 {
  transform-origin: bottom;
  height: 25px;
  animation-duration: 4s;
  animation-delay: 0s;
  top: 40%;
  left: 50%;
}

.fm-nt-2 {
  transform-origin: bottom;
  height: 20px;
  animation-duration: 5s;
  animation-delay: 1.5s;
  top: 55%;
  left: 25%;
}

.fm-ns-flicker {
  background: #a064dcb3;
  border-radius: 50%;
  width: 3px;
  height: 3px;
  animation: ease-in-out infinite fm-ns-blink;
  position: absolute;
  box-shadow: 0 0 6px 2px #783cb466;
}

.fm-nf-1 {
  animation-duration: 3s;
  animation-delay: .5s;
  top: 25%;
  left: 60%;
}

.fm-nf-2 {
  animation-duration: 3.5s;
  animation-delay: 2s;
  top: 65%;
  left: 40%;
}

@keyframes fm-ns-breathe {
  0%, 100% {
    opacity: .3;
    transform: scale(1);
  }

  50% {
    opacity: .7;
    transform: scale(1.3);
  }
}

@keyframes fm-ns-wisp {
  0%, 100% {
    opacity: 0;
    transform: rotate(0)scaleY(.5);
  }

  30% {
    opacity: .7;
    transform: rotate(8deg)scaleY(1);
  }

  60% {
    opacity: .3;
    transform: rotate(-5deg)scaleY(.8);
  }
}

@keyframes fm-ns-blink {
  0%, 100% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  25% {
    opacity: .9;
  }

  35% {
    opacity: .2;
  }

  40% {
    opacity: .8;
  }

  50% {
    opacity: 0;
  }
}

.fm-grum {
  width: 22%;
  height: 25%;
  position: absolute;
  top: 60%;
  left: 15%;
}

.fm-grum-fire {
  background: radial-gradient(circle, #ff501440 0%, #c8320a14 50%, #0000 70%);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: 3s ease-in-out infinite fm-grum-rage;
  position: absolute;
  top: 30%;
  left: 35%;
  box-shadow: 0 0 20px 6px #ff50141a;
}

.fm-grum-ember {
  background: #ff8c28e6;
  border-radius: 50%;
  width: 3px;
  height: 3px;
  animation: linear infinite fm-grum-fly;
  position: absolute;
  box-shadow: 0 0 5px 2px #ff501480;
}

.fm-ge-1 {
  animation-duration: 2s;
  animation-delay: 0s;
  top: 50%;
  left: 30%;
}

.fm-ge-2 {
  animation-duration: 2.5s;
  animation-delay: .6s;
  top: 40%;
  left: 55%;
}

.fm-ge-3 {
  animation-duration: 1.8s;
  animation-delay: 1.2s;
  top: 60%;
  left: 45%;
}

.fm-ge-4 {
  animation-duration: 2.2s;
  animation-delay: 1.8s;
  top: 35%;
  left: 40%;
}

@keyframes fm-grum-rage {
  0%, 100% {
    opacity: .4;
    transform: scale(1);
  }

  30% {
    opacity: .9;
    transform: scale(1.3);
  }

  60% {
    opacity: .5;
    transform: scale(1.1);
  }
}

@keyframes fm-grum-fly {
  0% {
    opacity: .9;
    transform: translateY(0)translateX(0)scale(1);
  }

  50% {
    opacity: .6;
  }

  100% {
    opacity: 0;
    transform: translateY(-20px)translateX(8px)scale(.2);
  }
}

.fm-plagued {
  width: 25%;
  height: 25%;
  position: absolute;
  top: 68%;
  left: 48%;
}

.fm-pla-miasma {
  background: radial-gradient(#50c83c26 0%, #3ca0280d 60%, #0000 80%);
  border-radius: 50%;
  width: 60px;
  height: 30px;
  animation: 5s ease-in-out infinite fm-pla-spread;
  position: absolute;
  top: 40%;
  left: 25%;
}

.fm-pla-drip {
  background: #64dc50cc;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  animation: linear infinite fm-pla-fall;
  position: absolute;
  box-shadow: 0 0 4px 2px #50c83c66;
}

.fm-pd-1 {
  animation-duration: 3s;
  animation-delay: 0s;
  top: 30%;
  left: 35%;
}

.fm-pd-2 {
  animation-duration: 3.5s;
  animation-delay: 1s;
  top: 25%;
  left: 55%;
}

.fm-pd-3 {
  animation-duration: 2.8s;
  animation-delay: 2s;
  top: 35%;
  left: 70%;
}

@keyframes fm-pla-spread {
  0%, 100% {
    opacity: .3;
    transform: scale(1)translateY(0);
  }

  50% {
    opacity: .7;
    transform: scale(1.3)translateY(-4px);
  }
}

@keyframes fm-pla-fall {
  0% {
    opacity: 0;
    transform: translateY(-5px)scale(.5);
  }

  20% {
    opacity: .8;
    transform: translateY(0)scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(15px)scale(.3);
  }
}

.lore-map-frame:after {
  content: "";
  z-index: -1;
  filter: blur(20px);
  background: radial-gradient(100% 100%, #a078281a 0%, #0000 70%);
  position: absolute;
  inset: -20px;
}

.lore-scroll-hint {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: 2s ease-in-out infinite lore-bounce;
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.lore-scroll-hint span {
  color: #c4a882;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
}

.lore-scroll-arrow {
  opacity: .6;
  border-bottom: 2px solid #c4a882;
  border-right: 2px solid #c4a882;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}

@keyframes lore-bounce {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%)translateY(0);
  }

  50% {
    opacity: .5;
    transform: translateX(-50%)translateY(10px);
  }
}

.lore-story {
  align-items: center;
  gap: 48px;
  width: 85%;
  max-width: 1200px;
  padding: 80px 0 40px;
  display: flex;
}

.lore-story.lore-dark {
  flex-direction: row-reverse;
}

.lore-story-image {
  flex-shrink: 0;
  transition: opacity .8s, transform .8s;
  position: relative;
}

.lore-story-image.lore-visible {
  opacity: 1;
  transform: translateX(0);
}

.lore-story-image.lore-hidden {
  opacity: 0;
}

.lore-story.lore-light .lore-story-image.lore-hidden {
  transform: translateX(-60px);
}

.lore-story.lore-dark .lore-story-image.lore-hidden {
  transform: translateX(60px);
}

.lore-story-image img {
  filter: drop-shadow(0 8px 30px #00000080);
}

.lore-text-panel {
  z-index: 1;
  flex: 1;
  min-width: 0;
  position: relative;
}

.lore-chapter-label {
  color: #c4a882;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: Metal Mania, serif;
  font-size: 13px;
}

.lore-chapter-label.lore-label-light {
  color: #e69e0e;
}

.lore-chapter-label.lore-label-dark {
  color: #9b6dff;
}

.lore-chapter-title {
  color: #f5e6d3;
  white-space: break-spaces;
  text-shadow: 0 2px 8px #00000080;
  margin-bottom: 20px;
  font-family: Metal Mania, serif;
  font-size: 48px;
  line-height: 1.05;
}

.lore-divider {
  border: none;
  width: 80px;
  height: 2px;
  margin-bottom: 20px;
  position: relative;
}

.lore-light .lore-divider {
  background: linear-gradient(90deg, #e69e0e, #0000);
}

.lore-dark .lore-divider {
  background: linear-gradient(90deg, #9b6dff, #0000);
}

.lore-text-content {
  scrollbar-width: thin;
  scrollbar-color: #c4a8824d transparent;
  max-height: 55vh;
  padding-right: 8px;
  overflow-y: auto;
}

.lore-text-content::-webkit-scrollbar {
  width: 4px;
}

.lore-text-content::-webkit-scrollbar-thumb {
  background: #c4a8824d;
  border-radius: 2px;
}

.lore-text-content li {
  margin-bottom: 12px;
}

.lore-text-content p {
  color: #d4c8b8;
  font-size: 18px;
  line-height: 1.7;
}

.lore-text-content ul {
  padding-left: 24px;
  list-style: outside;
}

.lore-text-content ul li {
  margin-bottom: 10px;
}

.lore-text-content ul p {
  font-size: 16px;
  line-height: 1.6;
}

.lore-chapter-nav {
  display: none;
}

.lore-nav {
  z-index: 100;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  display: flex;
  position: fixed;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
}

.lore-nav-dot {
  cursor: pointer;
  background: #c4a88240;
  border: 1px solid #c4a88266;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  transition: all .3s;
  position: relative;
}

.lore-nav-dot:hover {
  background: #c4a88280;
  transform: scale(1.3);
}

.lore-nav-dot.active {
  background: #e69e0e;
  border-color: #e69e0e;
  transform: scale(1.3);
  box-shadow: 0 0 10px #e69e0e80;
}

.lore-nav-tooltip {
  white-space: nowrap;
  color: #f5e6d3;
  pointer-events: none;
  opacity: 0;
  background: #1e140ae6;
  border: 1px solid #c4a8824d;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  transition: opacity .2s;
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
}

.lore-nav-dot:hover .lore-nav-tooltip {
  opacity: 1;
}

.lore-map-fullscreen {
  z-index: 9999;
  cursor: zoom-out;
  background: #000000eb;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: .3s lore-fade-in;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: auto;
}

@keyframes lore-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lore-map-fullscreen-inner {
  cursor: default;
  max-width: 95vw;
  max-height: 95vh;
}

.lore-map-fullscreen-inner img {
  object-fit: contain;
  max-width: 95vw;
  max-height: 90vh;
}

.lore-map-fullscreen-close {
  color: #f5e6d3;
  cursor: pointer;
  z-index: 10000;
  background: #1e140acc;
  border: 1px solid #c4a88266;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 24px;
  transition: all .2s;
  display: flex;
  position: fixed;
  top: 20px;
  right: 28px;
}

.lore-map-fullscreen-close:hover {
  background: #e69e0e4d;
  border-color: #e69e0e;
  transform: scale(1.1);
}

@media (max-width: 950px) {
  .lore-page-main {
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: 100dvh !important;
  }

  .lore-wrapper, .lore-scroll {
    height: 100dvh;
  }

  .lore-chapter {
    justify-content: flex-start;
    align-items: stretch;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .lore-map-title {
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    font-size: 34px;
    line-height: 1;
  }

  .lore-map-subtitle {
    letter-spacing: 2.5px;
    margin-bottom: 18px;
    font-size: 11px;
  }

  .lore-map-section {
    box-sizing: border-box;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: 100dvh;
    padding: clamp(96px, 10vh, 120px) 12px 30px;
    display: flex;
    overflow: hidden;
  }

  .lore-map-frame {
    width: min(160vw, 1180px);
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .lore-map-parchment {
    width: 100%;
  }

  .lore-map-img {
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .lore-map-magic {
    transform: none;
  }

  .lore-scroll-hint {
    bottom: clamp(44px, 7vh, 86px);
  }

  .lore-story {
    box-sizing: border-box;
    isolation: isolate;
    justify-content: flex-end;
    gap: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 74px 12px 20px;
    overflow: hidden;
    flex-direction: column !important;
  }

  .lore-story-image {
    z-index: 0;
    pointer-events: none;
    opacity: .9;
    justify-content: center;
    align-items: flex-start;
    width: min(112vw, 480px);
    max-width: none;
    height: 55vh;
    display: flex;
    position: absolute;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(#000 72%, #000c 84%, #0000 100%);
    mask-image: linear-gradient(#000 72%, #000c 84%, #0000 100%);
  }

  .lore-story-image.lore-visible {
    transform: translateX(-50%);
  }

  .lore-story-image.lore-hidden {
    opacity: .68;
    transform: translateX(-50%)translateY(20px) !important;
  }

  .lore-story.lore-light .lore-story-image.lore-hidden, .lore-story.lore-dark .lore-story-image.lore-hidden {
    transform: translateX(-50%)translateY(20px) !important;
  }

  .lore-story-image img {
    object-fit: contain;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    max-height: min(55vh, 500px) !important;
  }

  .lore-story-image.lore-stele {
    height: 46vh;
  }

  .lore-story-image.lore-stele img {
    max-height: min(46vh, 430px) !important;
  }

  .lore-text-panel {
    box-sizing: border-box;
    z-index: 1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: linear-gradient(#1f140de0, #0c0807f0), radial-gradient(at 100% 0, #e69e0e1f, #0000 55%);
    border: 1px solid #c4a88238;
    border-radius: 8px;
    width: 100%;
    max-height: 42vh;
    padding: 14px 14px 12px;
    box-shadow: 0 18px 44px #0000007a, inset 0 1px #ffeeca14;
  }

  .lore-dark .lore-text-panel {
    background: linear-gradient(#18121ae6, #0a080cf2), radial-gradient(at 100% 0, #9b6dff29, #0000 56%);
    border-color: #9b6dff3d;
  }

  .lore-chapter-label {
    letter-spacing: 2.5px;
    margin-bottom: 5px;
    font-size: 10px;
  }

  .lore-chapter-title {
    margin-bottom: 9px;
    font-size: 25px;
    line-height: 1.03;
  }

  .lore-divider {
    width: 54px;
    margin-bottom: 8px;
  }

  .lore-text-content {
    max-height: 25vh;
    padding-right: 4px;
  }

  .lore-text-content ul {
    padding-left: 18px;
  }

  .lore-text-content ul ul {
    padding-left: 18px !important;
  }

  .lore-text-content p {
    font-size: 13px;
    line-height: 1.5;
  }

  .lore-text-content li {
    margin-bottom: 9px;
  }

  .lore-text-content ul li {
    margin-bottom: 8px;
  }

  .lore-nav {
    display: none;
  }

  .lore-nav-dot {
    width: 8px;
    height: 8px;
  }

  .lore-nav-tooltip {
    display: none;
  }

  .lore-chapter-nav {
    box-sizing: border-box;
    z-index: 50;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    scrollbar-width: none;
    background: linear-gradient(#1e140db3, #0b0808d1);
    border: 1px solid #f0d13d1f;
    border-radius: 999px;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    display: flex;
    position: fixed;
    top: 62px;
    left: 76px;
    right: 12px;
    overflow-x: auto;
    box-shadow: 0 10px 30px #00000047;
  }

  .lore-chapter-nav::-webkit-scrollbar {
    display: none;
  }

  .lore-chapter-nav button {
    box-sizing: border-box;
    color: #f5e6d3b8;
    white-space: nowrap;
    text-align: center;
    background: none;
    border: 1px solid #0000;
    border-radius: 999px;
    flex: none;
    min-width: 40px;
    min-height: 30px;
    padding: 7px 12px;
    font-family: Metal Mania, serif;
    font-size: 13px;
    transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
  }

  .lore-chapter-nav button.active {
    color: #2b1607;
    background: linear-gradient(#f0d13d, #d88a14);
    border-color: #ffeeca6b;
    box-shadow: 0 0 16px #e69e0e47, inset 0 1px #fff8d26b;
  }
}

@media (max-width: 420px) {
  .lore-map-title {
    font-size: 30px;
  }

  .lore-story {
    padding-inline: 12px;
  }

  .lore-story-image {
    width: min(116vw, 430px);
    height: 52vh;
    top: 54px;
  }

  .lore-story-image img {
    max-height: min(52vh, 440px) !important;
  }

  .lore-text-panel {
    max-height: 43vh;
    padding: 13px 13px 11px;
  }

  .lore-chapter-title {
    font-size: 23px;
  }

  .lore-text-content {
    max-height: 26vh;
  }

  .lore-chapter-nav {
    top: 60px;
    left: 76px;
    right: 10px;
  }

  .lore-chapter-nav button {
    min-width: 38px;
    min-height: 28px;
    padding: 6px 9px;
    font-size: 12px;
  }
}

.lore-stele {
  position: relative;
}

.stele-glow-overlay {
  pointer-events: none;
  border-radius: inherit;
  filter: blur(15px);
  mix-blend-mode: screen;
  background: radial-gradient(35% 35% at 50% 45%, #00e6ff40 0%, #0000 50%);
  animation: 4s ease-in-out infinite stele-flicker;
  position: absolute;
  inset: -20px;
}

.lore-stele img {
  filter: drop-shadow(0 8px 30px #00000080);
}

@keyframes stele-flicker {
  0%, 100% {
    opacity: .2;
  }

  8% {
    opacity: .6;
  }

  12% {
    opacity: .15;
  }

  20% {
    opacity: .55;
  }

  25% {
    opacity: .2;
  }

  40% {
    opacity: .5;
  }

  50% {
    opacity: .7;
  }

  55% {
    opacity: .25;
  }

  65% {
    opacity: .6;
  }

  70% {
    opacity: .15;
  }

  80% {
    opacity: .5;
  }

  90% {
    opacity: .35;
  }
}