/* Live Menagerie — monument page chrome around the 3D hall.
   Gold vignette + edge fog. No copy blocking the canvas. */

/* ── Gold vignette (over-the-top museum monument) ── */
body.has-hall3d #overlay > .vignette {
  z-index: 1;
  pointer-events: none !important;
  background:
    /* Warm gold bloom at crown */
    radial-gradient(ellipse 95% 70% at 50% 8%, rgba(240, 212, 154, 0.22), transparent 55%),
    /* Soft gold haze mid-frame (doesn't obscure kiosk) */
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(218, 178, 107, 0.06), transparent 62%),
    /* Deep bronze falloff — reads as gilt frame, not black crush */
    radial-gradient(ellipse 78% 72% at 50% 48%, transparent 42%, rgba(42, 28, 12, 0.22) 78%, rgba(18, 10, 4, 0.55) 100%),
    /* Floor gold wash */
    linear-gradient(to top, rgba(164, 124, 52, 0.18), transparent 38%),
    /* Ceiling gilt strip */
    linear-gradient(to bottom, rgba(240, 212, 154, 0.12), transparent 22%);
  mix-blend-mode: normal;
}

/* ── Subtle gold fog at edges (CSS only — no textures) ── */
body.has-hall3d #house::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(164, 124, 52, 0.28), transparent 18%, transparent 82%, rgba(164, 124, 52, 0.28)),
    linear-gradient(0deg, rgba(120, 84, 28, 0.22), transparent 16%, transparent 86%, rgba(218, 178, 107, 0.14)),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 58%, rgba(90, 58, 18, 0.2) 100%);
  opacity: 0.85;
}

/* Extra gold rim fog on overlay so it sits above canvas, below UI chrome */
body.has-hall3d #overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 52%, rgba(218, 178, 107, 0.1) 78%, rgba(164, 124, 52, 0.26) 100%);
  box-shadow:
    inset 0 0 80px 12px rgba(218, 178, 107, 0.12),
    inset 0 0 160px 40px rgba(42, 24, 8, 0.35);
}

body.has-hall3d #overlay > .grain {
  pointer-events: none !important;
  opacity: 0.04;
  z-index: 1;
}

/* ── No copy blocking the hall ── */
body.has-hall3d #overlay > .gallery,
body.has-hall3d #overlay > .gallery-world,
body.has-hall3d #overlay > .title-block,
body.has-hall3d #overlay > .title-ctas,
body.has-hall3d #overlay > .tanks {
  pointer-events: none !important;
}

body.has-hall3d #overlay > .title-block,
body.has-hall3d #overlay > .title-ctas {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep interactive chrome at edges only; middle stays transparent to 3D */
body.has-hall3d #overlay {
  pointer-events: none;
}

body.has-hall3d #overlay > .topbar,
body.has-hall3d #overlay > .dock,
body.has-hall3d #overlay > .treat-edge,
body.has-hall3d #overlay > .chrome-restore,
body.has-hall3d #overlay > .court-lesson,
body.has-hall3d #overlay > .more-below,
body.has-hall3d #overlay > .loader {
  pointer-events: auto;
}

/* Topbar: thinner gold wash so the vault reads through */
body.has-hall3d .topbar {
  background: linear-gradient(
    to bottom,
    rgba(28, 18, 8, 0.42) 0%,
    rgba(164, 124, 52, 0.08) 55%,
    transparent 100%
  );
}

body.has-hall3d .topbar .mark span {
  color: var(--gold-bright, #f0d49a);
  text-shadow: 0 0 24px rgba(240, 212, 154, 0.35);
}

/* Dock: gilt edge, not a solid card wall */
body.has-hall3d .dock {
  box-shadow:
    0 0 0 1px rgba(218, 178, 107, 0.22),
    0 12px 40px rgba(8, 4, 2, 0.45),
    inset 0 1px 0 rgba(240, 212, 154, 0.12);
}

/* Grab cursor reinforced when hall is live */
body.has-hall3d,
body.has-hall3d #house {
  cursor: grab;
}

body.has-hall3d:active,
body.has-hall3d #house:active {
  cursor: grabbing;
}

body.has-hall3d .topbar,
body.has-hall3d .dock,
body.has-hall3d .treat-edge,
body.has-hall3d .chrome-restore,
body.has-hall3d a,
body.has-hall3d button {
  cursor: auto;
}

body.has-hall3d a,
body.has-hall3d button {
  cursor: pointer;
}

/* Reduced motion: still show gold frame, skip any decorative pulse */
@media (prefers-reduced-motion: reduce) {
  body.has-hall3d #house::after,
  body.has-hall3d #overlay::before {
    opacity: 0.7;
  }
}

/* ===== v=3d21 gold vignette + title off (append-only) ===== */
body.has-hall3d #overlay > .vignette {
  z-index: 1;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    radial-gradient(ellipse 95% 70% at 50% 8%, rgba(240, 212, 154, 0.26), transparent 55%),
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(218, 178, 107, 0.08), transparent 62%),
    radial-gradient(ellipse 78% 72% at 50% 48%, transparent 40%, rgba(42, 28, 12, 0.24) 76%, rgba(18, 10, 4, 0.58) 100%),
    linear-gradient(to top, rgba(164, 124, 52, 0.2), transparent 38%),
    linear-gradient(to bottom, rgba(240, 212, 154, 0.14), transparent 22%) !important;
  mix-blend-mode: normal;
}

body.has-hall3d #overlay > .title-block,
body.has-hall3d #overlay > .title-ctas {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* Stronger gilt edge fog — seed monument frame */
body.has-hall3d #overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(218, 178, 107, 0.12) 76%, rgba(164, 124, 52, 0.3) 100%);
  box-shadow:
    inset 0 0 90px 14px rgba(218, 178, 107, 0.14),
    inset 0 0 170px 48px rgba(42, 24, 8, 0.38);
}

/* Compact dock gilt rim */
body.has-hall3d .dock {
  max-width: min(34vw, 12.75rem);
  box-shadow:
    0 0 0 1px rgba(218, 178, 107, 0.24),
    0 10px 32px rgba(8, 4, 2, 0.42),
    inset 0 1px 0 rgba(240, 212, 154, 0.14);
}

/* Grab on hall void; Explore stays clickable */
body.has-hall3d {
  cursor: grab;
}
body.has-hall3d .topbar-actions [data-explore-3d],
body.has-hall3d .explore-edge {
  cursor: pointer !important;
  pointer-events: auto !important;
}