/* v82 Museum menu — visually continuous with the PixelDeck index shell. */
.museum-page .loading-screen {
  padding: 22px;
  background:
    radial-gradient(circle at 16% 5%, rgba(93,247,212,.1), transparent 32rem),
    radial-gradient(circle at 82% 20%, rgba(155,230,77,.12), transparent 30rem),
    linear-gradient(180deg, #041108, #020904);
}
.museum-page .loading-screen::before { opacity: .32; background-image: linear-gradient(rgba(155,230,77,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(155,230,77,.055) 1px,transparent 1px); background-size: 32px 32px; }
.museum-page .loading-card { width: min(860px, 96vw); padding: 22px clamp(20px, 4vw, 42px) 36px; border: 1px solid var(--pd-border-soft); border-radius: 18px; color: var(--pd-text); background: linear-gradient(145deg, rgba(10,36,21,.97), rgba(4,17,8,.98)); box-shadow: 12px 12px 0 rgba(0,0,0,.42), 0 34px 100px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.035); }
.museum-page .loading-card::before { left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--pd-accent), var(--pd-accent-2), transparent); }
.museum-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.museum-menu-head .pd-brand img { width: 48px; height: 48px; }
.museum-menu-head .pd-brand span { font-size: 15px; }
.museum-page .museum-logo { width: 66px; height: 66px; border: 1px solid rgba(155,230,77,.38); border-radius: 13px; color: #061108; background: linear-gradient(135deg, var(--pd-accent), #caff82 62%, var(--pd-accent-2)); box-shadow: 5px 5px 0 rgba(0,0,0,.45), 0 0 40px rgba(155,230,77,.13); font-size: 34px; }
.museum-page .eyebrow { color: var(--pd-accent); font-family: inherit; font-size: 11px; font-weight: 950; letter-spacing: .14em; }
.museum-page .loading-card h1 { margin: 5px 0 14px; color: var(--pd-text); background: none; font-family: inherit; font-size: clamp(2.7rem, 8vw, 5.8rem); font-weight: 950; line-height: .88; letter-spacing: -.065em; }
.museum-page .loading-card .lead { max-width: 700px; color: var(--pd-muted); font-size: 16px; line-height: 1.6; }
.museum-page .museum-feature-strip span { border: 1px solid var(--pd-border-soft); border-radius: 9px; color: var(--pd-muted); background: rgba(155,230,77,.055); font-family: inherit; }
.museum-page .museum-feature-strip b { color: var(--pd-accent); }
.museum-page .loading-actions { gap: 9px; }
.museum-page .primary-btn,
.museum-page .secondary-btn { min-height: 44px; padding: 11px 16px; border-radius: 10px; font-family: inherit; font-weight: 900; }
.museum-page .primary-btn { color: #061108; border: 1px solid #caff82; background: linear-gradient(135deg, var(--pd-accent), #caff82); box-shadow: 3px 3px 0 #000; }
.museum-page .secondary-btn { color: var(--pd-text); border: 1px solid var(--pd-border); background: rgba(155,230,77,.055); }
.museum-page .primary-btn:hover,
.museum-page .secondary-btn:hover { border-color: var(--pd-accent); filter: brightness(1.07); }
.museum-page .district-entry-card { grid-template-columns: auto 1fr auto; gap: 14px; margin-top: 16px; border: 1px solid rgba(155,230,77,.38); border-radius: 13px; color: var(--pd-text); background: linear-gradient(135deg, rgba(155,230,77,.14), rgba(93,247,212,.06)), #06170c; box-shadow: 5px 5px 0 rgba(0,0,0,.36); }
.museum-page .district-entry-card:hover { border-color: var(--pd-accent); box-shadow: 7px 7px 0 rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.26); }
.museum-page .district-entry-icon { border: 1px solid rgba(155,230,77,.34); border-radius: 10px; color: #061108; background: var(--pd-accent); }
.museum-page .district-entry-card small { color: var(--pd-muted); }
.museum-page .district-entry-card b { color: var(--pd-accent); }
.museum-page .hint { color: var(--pd-muted); }
.museum-page .load-status { color: var(--pd-accent-2); }
.museum-page .museum-back-home { right: 18px; top: 18px; min-height: 42px; border: 1px solid var(--pd-border); border-radius: 10px; color: var(--pd-text); background: rgba(4,17,8,.9); box-shadow: 3px 3px 0 rgba(0,0,0,.5); }

/* In-world UI uses the same surface, border and button language. */
.museum-page .hud-pill,
.museum-page .controls-box,
.museum-page .mini-map,
.museum-page .chat-input-wrap { border-color: var(--pd-border-soft); border-radius: 10px; color: var(--pd-text); background: rgba(4,17,8,.82); }
.museum-page .modal-card,
.museum-page .side-panel,
.museum-page .help-panel { border-color: var(--pd-border-soft); border-radius: 16px; color: var(--pd-text); background: linear-gradient(180deg, rgba(10,36,21,.98), rgba(4,17,8,.99)); }
.museum-page .tag,
.museum-page #modalArtist { color: var(--pd-accent); }
.museum-page .close-btn { border-radius: 9px; border-color: var(--pd-border); background: rgba(155,230,77,.06); }

@media (max-width: 760px) {
  .museum-page .loading-screen { align-items: start; overflow: auto; padding: 10px; }
  .museum-page .loading-card { width: 100%; margin: 0; padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); border-radius: 14px; box-shadow: 5px 5px 0 rgba(0,0,0,.38); }
  .museum-menu-head { margin-bottom: 10px; }
  .museum-menu-head .pd-brand img { width: 42px; height: 42px; }
  .museum-page .museum-logo { width: 54px; height: 54px; font-size: 28px; }
  .museum-page .loading-card h1 { font-size: clamp(2.7rem, 16vw, 4.2rem); }
  .museum-page .loading-card .lead { font-size: 14px; }
  .museum-page .loading-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .museum-page .loading-actions > * { width: 100%; min-width: 0; }
  .museum-page .district-entry-card { grid-template-columns: auto 1fr; }
  .museum-page .museum-back-home { display: none; }
}

@media (max-width: 430px) {
  .museum-page .loading-actions { grid-template-columns: 1fr; }
  .museum-page .museum-feature-strip span { flex: 1 1 100%; justify-content: flex-start; }
}