/* Screen: museum (overlay) — the 🖼️ Museum, the wreck hunts' album (docs/roadmap/WRECKS.md): a row a depth, a
   framed slot a treasure. A piece she gave shows in full colour on a warm frame; one not found yet is its dark
   shape with words that say where it is found (never colour or shape alone). */

.screen--museum {
  gap: var(--sp-4);
}

.screen--museum.is-rerender {
  animation: none;
}

.wm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.wm-head__sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-soft);
}

.wm-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--sand-50);
  border: 1px solid var(--sand-200);
}

.wm-count__n {
  font-size: var(--fs-md);
  font-weight: 900;
}

.wm-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-2);
}

.wm-row.is-full {
  background: linear-gradient(180deg, var(--accent-100), var(--card) 40%);
}

.wm-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.wm-row__title {
  font-size: var(--fs-lg);
}

.wm-row__full {
  font-weight: 900;
  color: var(--accent-700);
}

.wm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  text-align: center;
  background: var(--sea-50);
  border: 3px double var(--line-strong);
}

.wm-slot.is-given {
  background: var(--paper);
  border-color: var(--accent-400);
  box-shadow: var(--shadow-1);
}

.wm-slot__emoji {
  font-size: 2.6rem;
  line-height: 1.1;
}

/* Not found yet: the treasure's dark shape. */
.wm-slot.is-empty .wm-slot__emoji {
  filter: brightness(0) opacity(0.35);
}

.wm-slot__name {
  font-weight: 900;
}

.wm-slot.is-empty .wm-slot__name {
  color: var(--ink-faint);
}

.wm-slot__value {
  font-weight: 800;
  color: var(--ink-soft);
}

.wm-foot {
  display: flex;
  justify-content: center;
}

@media (max-width: 53.75em) {
  .wm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 37.5em) {
  .wm-row {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
  }

  .wm-slot {
    padding: var(--sp-2);
  }

  .wm-head .wm-back,
  .wm-foot .btn {
    width: 100%;
  }
}