*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#070504}
body{overflow:hidden}
.ll-room{position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;background:#070504}
.ll-background{position:absolute;inset:0;background:url("../assets/images/legends-lore-room.jpeg") center/cover no-repeat}
.ll-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 32%,rgba(0,0,0,.12) 64%,rgba(0,0,0,.58) 100%)}
.ll-title{position:absolute;z-index:5;top:1.55%;left:50%;transform:translateX(-50%);margin:0;color:#f2d8a2;font:400 clamp(1.05rem,1.55vw,1.6rem)/1.08 "Rye",Georgia,serif;letter-spacing:.08em;text-align:center;text-shadow:0 3px 10px #000,0 0 15px rgba(216,164,89,.35);pointer-events:none;white-space:nowrap}
.ll-instruction{position:absolute;z-index:7;left:50%;bottom:3.55rem;transform:translateX(-50%);margin:0;padding:.42rem .8rem;border:1px solid rgba(226,187,121,.22);border-radius:4px;background:rgba(7,5,4,.64);color:rgba(238,217,183,.72);font:600 .67rem/1.2 Georgia,serif;letter-spacing:.12em;text-transform:uppercase;text-align:center;text-shadow:0 2px 8px #000;pointer-events:none;transition:opacity .4s ease}
.ll-room.has-explored .ll-instruction{opacity:0}

/* Hotspot plane. The final artwork is 2048×1117; JS keeps this layer
   matched to the exact center/cover dimensions used by the room background. */
.ll-hotspot-layer{position:absolute;z-index:6;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);pointer-events:none}
.ll-hotspot{
  position:absolute;pointer-events:auto;border:0;padding:0;background:transparent;
  cursor:pointer;outline:none;border-radius:22px;isolation:isolate
}
/* Glow only: no solid square borders. */
.ll-hotspot::before{
  content:"";position:absolute;inset:-18%;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,224,154,.52) 0%,
    rgba(244,179,78,.30) 35%,
    rgba(205,108,28,.13) 58%,
    transparent 76%);
  filter:blur(2px);
  opacity:0;transform:scale(.88);
  transition:opacity .17s ease,transform .2s ease,filter .2s ease
}
.ll-hotspot:hover,.ll-hotspot:focus-visible{z-index:20}
.ll-hotspot:hover::before,.ll-hotspot:focus-visible::before{
  opacity:1;transform:scale(1.08);filter:blur(.4px)
}
.ll-hotspot-label{
  position:absolute;z-index:25;left:50%;bottom:calc(100% + 10px);
  transform:translate(-50%,7px);
  min-width:max-content;max-width:310px;padding:.55rem .75rem;
  border:1px solid rgba(237,197,128,.62);border-radius:4px;
  background:linear-gradient(180deg,rgba(20,12,8,.97),rgba(7,5,4,.96));
  color:#f7e3bd;font:700 clamp(.65rem,.78vw,.84rem)/1.15 Georgia,serif;
  letter-spacing:.085em;text-transform:uppercase;text-align:center;
  text-shadow:0 2px 8px #000;box-shadow:0 9px 22px rgba(0,0,0,.58),0 0 18px rgba(219,145,60,.25);
  opacity:0;pointer-events:none;transition:opacity .17s ease,transform .17s ease
}
.ll-hotspot:hover .ll-hotspot-label,.ll-hotspot:focus-visible .ll-hotspot-label{
  opacity:1;transform:translate(-50%,0)
}

/* Recalculated from the ACTUAL visible objects in the final room artwork.
   Bottom hotspots intentionally do NOT overlap each other. */
.ll-hotspot.globe{left:23.7%;top:31.7%;width:15.8%;height:18.7%;border-radius:50%}
.ll-hotspot.snake{left:18.7%;top:23.2%;width:3.4%;height:17.0%;border-radius:50%}
.ll-hotspot.dragon{left:28.2%;top:59.8%;width:3.95%;height:10.25%;border-radius:48%}
.ll-hotspot.goblet{left:33.9%;top:59.1%;width:4.25%;height:11.55%;border-radius:48%}
.ll-hotspot.investigate{left:32.25%;top:70.5%;width:5.75%;height:9.8%;border-radius:50%}
.ll-hotspot.chest{left:62.3%;top:48.3%;width:18.8%;height:22.0%;border-radius:22px}
.ll-hotspot.busts{left:88.55%;top:11.3%;width:7.2%;height:17.8%;border-radius:50%}
.ll-hotspot.doorway{left:46.3%;top:13.0%;width:15.1%;height:31.5%;border-radius:18px}

/* HERE BE MONSTERS now uses the parchment hanging on the rear wall instead of
   the desk papers. This removes the invisible hotspot collision around the
   goblet / dragon / magnifying-glass cluster. */
.ll-hotspot.maps{left:31.78%;top:22.63%;width:3.8%;height:14.0%;border-radius:12px}

/* Main compendium follows the visible open-book footprint. No clip-path is
   applied to the BUTTON, so its title can extend above it and remain visible. */
.ll-hotspot.book{left:38.0%;top:58.2%;width:24.1%;height:23.1%;border-radius:28% 28% 18% 18% / 18% 18% 28% 28%}
.ll-hotspot.book::before{
  inset:-12%;opacity:.28;transform:scale(1);
  background:radial-gradient(ellipse at 50% 55%,
    rgba(255,231,160,.55) 0%,
    rgba(245,181,76,.30) 37%,
    rgba(214,115,28,.12) 60%,
    transparent 79%);
  filter:blur(1px);
  box-shadow:0 0 28px rgba(255,195,90,.22)
}
.ll-hotspot.book:hover::before,.ll-hotspot.book:focus-visible::before{
  opacity:1;transform:scale(1.055);filter:blur(0);
  box-shadow:0 0 38px rgba(255,211,124,.54),0 0 72px rgba(229,130,39,.35)
}
.ll-hotspot.book .ll-hotspot-label{
  min-width:320px;padding:.7rem .95rem .65rem;
  color:#ffe8b4;border-color:rgba(244,207,137,.76);
  box-shadow:0 11px 28px rgba(0,0,0,.66),0 0 28px rgba(230,151,58,.36)
}
.ll-hotspot.book .ll-hotspot-label strong{
  display:block;font-family:"Rye",Georgia,serif;font-size:clamp(.76rem,.95vw,1rem);
  font-weight:400;letter-spacing:.055em
}
.ll-hotspot.book .ll-hotspot-label small{
  display:block;margin-top:.3rem;color:#cbaa77;
  font:700 .62rem/1.2 Georgia,serif;letter-spacing:.13em
}
.ll-back{z-index:8!important}

/* Shared archive overlay */
.ll-overlay{position:fixed;z-index:9999;left:0;right:0;top:var(--shell-height,72px);bottom:0;display:none;background:rgba(4,3,3,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ll-overlay.open{display:block}
.ll-panel{position:absolute;inset:3.5% 4.5% 6.5%;overflow:hidden;border:1px solid rgba(221,177,105,.52);border-radius:8px;background:linear-gradient(145deg,rgba(30,19,12,.985),rgba(9,7,6,.985) 58%,rgba(20,12,9,.985));box-shadow:0 28px 85px #000,0 0 34px rgba(165,94,39,.22),inset 0 0 70px rgba(0,0,0,.55)}
.ll-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(circle at 20% 10%,rgba(255,220,155,.24),transparent 30%),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px)}
.ll-close{position:absolute;z-index:4;right:14px;top:12px;width:42px;height:42px;border:1px solid rgba(229,195,136,.45);border-radius:50%;background:rgba(7,5,4,.78);color:#f0d7aa;font:300 1.65rem/1 Georgia,serif;cursor:pointer;transition:.18s}
.ll-close:hover,.ll-close:focus-visible{background:rgba(92,48,24,.88);box-shadow:0 0 18px rgba(233,170,87,.35)}
.ll-back-collection{display:none;position:absolute;z-index:4;left:18px;top:16px;border:0;background:transparent;color:#d8b77d;font:700 .72rem/1 Georgia,serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-shadow:0 2px 8px #000}
.ll-back-collection.visible{display:block}

.ll-reader{position:absolute;inset:0;overflow:auto;padding:clamp(2.7rem,5vw,5rem) clamp(1.2rem,4vw,4.5rem) 4.5rem;scrollbar-color:#80552f #0b0806;scrollbar-width:thin}
.ll-reader-inner{position:relative;z-index:2;width:min(1160px,100%);margin:0 auto}
.ll-entry-kicker{margin:0 0 .45rem;color:#b98650;font:700 .68rem/1.2 Georgia,serif;letter-spacing:.15em;text-transform:uppercase}
.ll-entry-title{margin:.15rem 0 .7rem;color:#f1d7a5;font:400 clamp(1.75rem,3.4vw,3.25rem)/1.02 "Rye",Georgia,serif;letter-spacing:.03em;text-shadow:0 3px 12px #000}
.ll-entry-deck{margin:0 0 1.4rem;max-width:900px;color:#d8c6aa;font:italic 600 clamp(.98rem,1.4vw,1.2rem)/1.5 Georgia,serif}
.ll-entry-hero{display:block;width:min(920px,100%);max-height:min(48vh,540px);object-fit:contain;margin:0 auto 2rem;border:1px solid rgba(221,177,105,.35);background:#050403;box-shadow:0 18px 40px rgba(0,0,0,.62)}
.ll-section{max-width:900px;margin:0 auto 2.1rem}
.ll-section h3{margin:1.7rem 0 .75rem;color:#e0b775;font:700 clamp(1rem,1.45vw,1.25rem)/1.2 Georgia,serif;letter-spacing:.09em;text-transform:uppercase}
.ll-section p{margin:0 0 1rem;color:#e9dfd0;font:400 clamp(.93rem,1.12vw,1.05rem)/1.77 Georgia,serif;text-shadow:0 1px 1px #000}
.ll-section p.short-beat{font-size:1.12em;color:#f1d7a5}
.ll-sources{max-width:900px;margin:2.4rem auto 0;padding:1.2rem 1.35rem;border:1px solid rgba(213,170,103,.27);background:rgba(0,0,0,.2)}
.ll-sources h3{margin:0 0 .8rem;color:#d9b37a;font:700 .78rem/1.2 Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
.ll-source{display:block;margin:.6rem 0;color:#cdb78f;font:600 .83rem/1.45 Georgia,serif;text-decoration:none}
.ll-source:hover,.ll-source:focus-visible{color:#ffe0a0;text-decoration:underline}

/* Central book collection */
.ll-collection-heading{text-align:center;margin:0 auto 1rem;color:#f1d7a5;font:400 clamp(1.7rem,3vw,2.8rem)/1.05 "Rye",Georgia,serif;letter-spacing:.055em}
.ll-collection-intro{max-width:740px;margin:0 auto 1.5rem;color:#d4c3aa;font:italic 600 .96rem/1.55 Georgia,serif;text-align:center}
.ll-filter-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:0 auto 1.6rem}
.ll-filter{border:1px solid rgba(214,171,105,.32);border-radius:999px;background:rgba(0,0,0,.22);color:#ccb48f;padding:.42rem .7rem;font:700 .66rem/1 Georgia,serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.ll-filter.active,.ll-filter:hover,.ll-filter:focus-visible{color:#ffe0a4;border-color:rgba(235,193,126,.68);background:rgba(91,52,24,.55)}
.ll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;width:min(1200px,100%);margin:0 auto}
.ll-card{position:relative;min-height:245px;padding:0;border:1px solid rgba(210,170,104,.3);border-radius:6px;overflow:hidden;background:#0b0806;cursor:pointer;text-align:left;box-shadow:0 10px 22px rgba(0,0,0,.42);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ll-card:hover,.ll-card:focus-visible{transform:translateY(-3px);border-color:rgba(236,194,124,.68);box-shadow:0 15px 28px rgba(0,0,0,.6),0 0 18px rgba(200,132,59,.16)}
.ll-card img{width:100%;height:155px;object-fit:cover;display:block;filter:saturate(.88) contrast(1.04)}
.ll-card-copy{display:block;padding:.75rem .8rem .9rem}
.ll-card-title{display:block;color:#efd5a5;font:700 .9rem/1.22 Georgia,serif;letter-spacing:.035em}
.ll-card-cat{display:block;margin-top:.4rem;color:#a98b66;font:700 .58rem/1.2 Georgia,serif;letter-spacing:.09em;text-transform:uppercase}

@media(max-width:760px){
 .ll-title{top:1.1%;font-size:.95rem}
 .ll-instruction{bottom:4.1rem;font-size:.56rem;max-width:82vw}
 .ll-panel{inset:2.5% 2.5% 7.5%}
 .ll-reader{padding:3.5rem 1rem 5rem}
 .ll-entry-title{font-size:1.65rem}
 .ll-entry-hero{max-height:38vh}
 .ll-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
 .ll-card{min-height:205px}
 .ll-card img{height:120px}
 .ll-card-title{font-size:.78rem}
 .ll-card-cat{font-size:.5rem}
 .ll-hotspot-label{display:none}
}
@media(max-width:480px){.ll-grid{grid-template-columns:1fr}.ll-card img{height:170px}}
@media(prefers-reduced-motion:reduce){.ll-hotspot::before,.ll-hotspot-label,.ll-card{transition:none}}

/* Regional Atlas */
.ll-regional-visuals{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:20px;align-items:start;margin:18px 0 28px}
.ll-regional-visuals figure{margin:0}
.ll-regional-legend img{width:100%;max-height:520px;object-fit:cover;border:1px solid rgba(210,170,90,.42);display:block}
.ll-regional-map{background:#d7c397;padding:7px;border:1px solid #80643b;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.ll-regional-map img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.ll-regional-visuals figcaption{font:12px/1.45 Arial,sans-serif;color:#bcae96;margin-top:7px}
.ll-regional-map figcaption{color:#493b29;text-align:center}
.ll-regional-card img{object-fit:cover}
.ll-source-text{font-size:.9rem;line-height:1.5;opacity:.82}
@media(max-width:760px){.ll-regional-visuals{grid-template-columns:1fr}.ll-regional-map{max-width:190px}}


/* ============================================================
   RECOVERY RECONCILIATION — LEGENDS & LORE
   Marker stays INSIDE each actual clickable hotspot.
   ============================================================ */
.ll-hotspot{
  --ll-dot-x:82%;
  --ll-dot-y:18%;
}
.ll-hotspot::after{
  content:"";
  position:absolute;
  z-index:30;
  left:var(--ll-dot-x);
  top:var(--ll-dot-y);
  width:clamp(17px,1.3vw,23px);
  height:clamp(17px,1.3vw,23px);
  transform:translate(-50%,-50%);
  border:1px solid rgba(247,226,255,.98);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0 7%,#efc9ff 9% 22%,#c36df2 42%,#681b8c 72%,
      rgba(77,10,107,.28) 78%,transparent 80%);
  box-shadow:
    0 0 7px rgba(246,223,255,.98),
    0 0 17px rgba(205,105,255,.98),
    0 0 31px rgba(142,43,205,.82);
  pointer-events:none;
  animation:llUxPulse 1.8s ease-in-out infinite,
            llUxTurn 4.6s linear infinite;
}

/* Object-specific marker placement, always inside the clickable object region. */
.ll-hotspot.globe{--ll-dot-x:78%;--ll-dot-y:18%}
.ll-hotspot.snake{--ll-dot-x:48%;--ll-dot-y:9%}
.ll-hotspot.dragon{--ll-dot-x:50%;--ll-dot-y:18%}
.ll-hotspot.goblet{--ll-dot-x:52%;--ll-dot-y:14%}
.ll-hotspot.investigate{--ll-dot-x:72%;--ll-dot-y:18%}
.ll-hotspot.chest{--ll-dot-x:87%;--ll-dot-y:13%}
.ll-hotspot.busts{--ll-dot-x:22%;--ll-dot-y:12%}
.ll-hotspot.doorway{--ll-dot-x:84%;--ll-dot-y:12%}
.ll-hotspot.maps{--ll-dot-x:52%;--ll-dot-y:12%}
.ll-hotspot.book{--ll-dot-x:88%;--ll-dot-y:14%}

/* Hover glow remains around the WHOLE object. */
.ll-hotspot:hover::before,.ll-hotspot:focus-visible::before{
  opacity:1 !important;
  transform:scale(1.08) !important;
  filter:blur(.4px) !important;
}
.ll-hotspot:hover::after,.ll-hotspot:focus-visible::after{
  filter:brightness(1.2);
  box-shadow:
    0 0 9px rgba(255,242,255,1),
    0 0 23px rgba(220,139,255,1),
    0 0 40px rgba(155,51,221,.96);
}

@keyframes llUxPulse{
  0%,100%{scale:.88;opacity:.82}
  50%{scale:1.14;opacity:1}
}
@keyframes llUxTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}

/* Readability increases without changing content. */
.ll-panel{inset:2.8% 3.6% 5.2%}
.ll-reader{
  padding:clamp(3.2rem,5.2vw,5.4rem) clamp(1.5rem,4.5vw,5rem) 5rem;
  scrollbar-width:auto;
  scrollbar-color:#a861cf #0b0806;
}
.ll-reader::-webkit-scrollbar{width:12px}
.ll-reader::-webkit-scrollbar-track{background:#0b0806}
.ll-reader::-webkit-scrollbar-thumb{
  border:2px solid #0b0806;
  border-radius:8px;
  background:linear-gradient(#bd78e5,#75428f);
}
.ll-entry-deck{
  font-size:clamp(1.03rem,1.45vw,1.25rem);
  line-height:1.58;
}
.ll-section{max-width:960px}
.ll-section p{
  color:#f0e7db;
  font-size:clamp(1rem,1.18vw,1.12rem);
  line-height:1.8;
}
.ll-source{
  font-size:clamp(.86rem,.94vw,.98rem);
  line-height:1.52;
}

@media(prefers-reduced-motion:reduce){
  .ll-hotspot::after{animation:none}
}


/* ============================================================
   LEGENDS & LORE — PRECISION OBJECT HOTSPOT ALIGNMENT
   Measured against legends-lore-room.jpeg (2048 x 1117).
   Markers are intentionally NOT changed.
   ============================================================ */

/* Hanging serpent */
.ll-hotspot.snake{
  left:17.10% !important;
  top:28.55% !important;
  width:6.10% !important;
  height:18.45% !important;
  border-radius:46% !important;
}

/* Globe and its stand */
.ll-hotspot.globe{
  left:23.78% !important;
  top:39.75% !important;
  width:15.90% !important;
  height:27.40% !important;
  border-radius:45% 45% 32% 32% / 42% 42% 24% 24% !important;
}

/* Small dragon figure on the desk */
.ll-hotspot.dragon{
  left:26.20% !important;
  top:65.45% !important;
  width:4.35% !important;
  height:11.75% !important;
  border-radius:42% !important;
}

/* Magnifying-glass / investigative tools */
.ll-hotspot.investigate{
  left:30.80% !important;
  top:77.15% !important;
  width:5.85% !important;
  height:9.05% !important;
  border-radius:42% !important;
}

/* Goblet */
.ll-hotspot.goblet{
  left:32.30% !important;
  top:62.65% !important;
  width:4.90% !important;
  height:14.55% !important;
  border-radius:42% !important;
}

/* Hanging map / parchment */
.ll-hotspot.maps{
  left:33.90% !important;
  top:16.20% !important;
  width:4.30% !important;
  height:19.10% !important;
  border-radius:10px !important;
}

/* Central dark doorway */
.ll-hotspot.doorway{
  left:47.55% !important;
  top:10.80% !important;
  width:14.15% !important;
  height:42.20% !important;
  border-radius:14px !important;
}

/* Large leather chest on the right side of the desk */
.ll-hotspot.chest{
  left:62.25% !important;
  top:48.20% !important;
  width:19.55% !important;
  height:28.70% !important;
  border-radius:18px !important;
}

/* Upper-right philosopher bust */
.ll-hotspot.busts{
  left:89.55% !important;
  top:8.40% !important;
  width:8.15% !important;
  height:20.70% !important;
  border-radius:48% !important;
}

/* Open Grand Compendium */
.ll-hotspot.book{
  left:38.15% !important;
  top:63.70% !important;
  width:25.00% !important;
  height:24.20% !important;
  border-radius:24% 24% 12% 12% / 16% 16% 26% 26% !important;
}


/* ============================================================
   LEGENDS & LORE — BACK TO COLLECTION UX
   Moves the Compendium return control to a larger bottom-left button.
   ============================================================ */
.ll-back-collection{
  display:none;
  position:absolute !important;
  z-index:18 !important;

  /* Bottom-left inside the overlay, clear of text/images and shell controls. */
  left:clamp(18px,2.2vw,34px) !important;
  top:auto !important;
  bottom:clamp(18px,2.2vh,28px) !important;

  min-width:clamp(190px,15vw,250px);
  min-height:48px;
  padding:12px 18px;

  border:1px solid rgba(211,159,236,.68) !important;
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(75,35,88,.94),rgba(31,17,37,.96)) !important;

  color:#f1dfbf !important;
  font:700 clamp(.82rem,.92vw,1rem)/1.15 Georgia,serif !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  text-align:center;

  cursor:pointer;
  box-shadow:
    inset 0 0 0 1px rgba(244,218,255,.10),
    0 0 12px rgba(186,93,230,.28),
    0 8px 20px rgba(0,0,0,.48);
  text-shadow:0 2px 8px #000;
}

.ll-back-collection.visible{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

.ll-back-collection:hover,
.ll-back-collection:focus-visible{
  border-color:rgba(232,193,255,.96) !important;
  color:#fff4dc !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,236,255,.18),
    0 0 12px rgba(229,177,255,.74),
    0 0 28px rgba(183,82,232,.56),
    0 8px 20px rgba(0,0,0,.52);
  outline:none;
}

/* Reserve a little bottom breathing room in scrollable Compendium readers
   so the larger button never covers the last lines of content. */
.ll-overlay-body,
.ll-reader,
.ll-story-panel{
  padding-bottom:max(88px,7vh) !important;
}

@media(max-width:700px){
  .ll-back-collection{
    left:14px !important;
    bottom:14px !important;
    min-width:176px;
    min-height:46px;
    padding:11px 14px;
  }
}