/* The Mossvale Museum (museum.js): marble and brass, a donation desk, hall tabs and glass cases. */
#museum-screen { --marble: #f6f1e6; --brass: #c9a24a; --museum-ink: #4a3f5a; }
.museum-top { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.museum-curator .friend-stage { background: linear-gradient(#e6e0f0 0 66%, #b8a98a 66%); }
.museum-curator .friend-stage::after { content: ''; position: absolute; inset: auto 12% 30% auto; width: 34px; height: 80px; border: 3px solid #8a7d68; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, #f6f1e6 0 6px, #e6dcc8 6px 9px); }
.museum-desk { padding: 16px; border: 3px solid #d9cfe6; border-radius: 18px; background: linear-gradient(var(--marble), #efe8da); box-shadow: 0 5px 0 #d6cbbd; }
.museum-desk-head h3 { margin: 2px 0 6px; color: var(--museum-ink); }
.museum-desk-head small { display: block; margin-top: 6px; color: #7a6f86; font-weight: 800; }
.museum-bar { display: block; height: 12px; overflow: hidden; border: 2px solid #a99abf; border-radius: 99px; background: #fff; }
.museum-bar i { display: block; height: 100%; background: linear-gradient(#d3b4f2, #9466c9); transition: width .4s ease; }
.museum-empty { margin: 12px 0 0; color: #7a6f86; font-size: 14px; }
.museum-ready { display: grid; gap: 8px; margin-top: 12px; max-height: 330px; overflow-y: auto; }
.museum-ready-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid #e6dcef; border-radius: 12px; background: #fff; }
.museum-ready-row strong { display: block; color: var(--museum-ink); font: 900 14px Nunito, system-ui, sans-serif; }
.museum-ready-row small { color: #8a7f96; font-weight: 700; }
.museum-ready-row .button { padding: 8px 14px; }
.museum-ready-art { display: block; width: 54px; height: 34px; font-size: 28px; line-height: 34px; text-align: center; }

.museum-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; padding: 14px 18px; border: 3px solid var(--brass); border-radius: 16px; background: linear-gradient(90deg, #fff6d6, #fdeec0); color: #6b4a14; font-weight: 800; box-shadow: 0 5px 0 #d9b85c; animation: banner-in .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes banner-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.museum-banner strong { font: 900 19px Nunito, system-ui, sans-serif; }
.museum-banner-icon { font-size: 30px; }

/* Hall tabs with how full each hall is. */
.museum-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 14px; }
.museum-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 3px solid #e2d9ec; border-radius: 99px; background: #fff; color: var(--museum-ink); font: 900 14px Nunito, system-ui, sans-serif; }
.museum-tab b { padding: 1px 7px; border-radius: 99px; background: #f0eaf6; color: #7a5aa6; font-size: 12px; }
.museum-tab.active { border-color: #9466c9; background: #f5eefc; box-shadow: 0 3px 0 #c9b2e6; }
.museum-tab.is-complete b { background: #f6d77a; color: #6b4a14; }
.museum-tab-icon { font-size: 18px; }
.museum-hall-head h3 { margin: 0 0 2px; color: var(--museum-ink); }
.museum-hall-head p { margin: 0 0 4px; font-size: 14px; }
.museum-reward { color: #8a5a1f !important; font-weight: 800; }
.museum-reward.is-done { color: #3f7d4f !important; }

/* Glass cases: donated pieces with a plaque, ready ones glowing, unknown ones as silhouettes. */
.museum-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.museum-case { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 10px; border: 3px solid #e6dfd2; border-bottom-width: 7px; border-radius: 14px 14px 8px 8px; background: linear-gradient(#ffffff 0 62%, var(--marble) 62%); text-align: center; }
.museum-case-art { display: block; width: 84px; height: 54px; font-size: 38px; line-height: 54px; }
.museum-case strong { color: var(--museum-ink); font: 900 13.5px/1.2 Nunito, system-ui, sans-serif; }
.museum-case small { color: #8a7f76; font-size: 11.5px; line-height: 1.35; }
.museum-plaque { margin-top: auto; padding: 2px 8px; border: 1px solid #b8913a; border-radius: 4px; background: linear-gradient(#e8c96a, #c9a24a); color: #4f3a10; font: 800 10.5px Georgia, serif; }
.museum-case.is-donated { border-color: #e6d9b8; box-shadow: 0 4px 0 #e2d6bd; }
.museum-case.is-donated[class*="rarity-"] { border-top-color: var(--rarity); }
.museum-case.is-ready { border-color: #e8b94a; background: linear-gradient(#fffbea 0 62%, #fff1c9 62%); box-shadow: 0 0 0 3px #ffe9a8; }
.museum-case.is-empty .museum-case-art { filter: brightness(0); opacity: .18; }
.museum-case.is-empty strong { color: #a9a1b2; }
.museum-case .text-button { padding: 6px 12px; }
.star-chart svg { width: 100%; height: 100%; }

@media (max-width: 760px) {
  .museum-top { grid-template-columns: 1fr; }
  .museum-cases { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

.museum-mystery { margin-top: 12px; padding: 12px 14px; border: 2px dashed #9be08a; border-radius: 14px; background: #f2fbef; }
.museum-mystery strong { color: #2f6b3a; font: 900 15px Nunito, system-ui, sans-serif; }
.museum-mystery p { margin: 4px 0 8px; font-size: 13.5px; }