/* Relics page. Tokens and components come from style.css. */

:root { --well: color-mix(in srgb, var(--lapis-950) 60%, transparent); /* sunken rows inside a card */ }

.relic-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.relic-tools label:not(.search) { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); color: var(--muted); }
.relic-tools .chips .cn { margin-left: 0.35rem; font-family: var(--num); color: var(--muted); }
.relics-page { display: grid; gap: var(--sp-3); }
.relics-page #summary { margin: 0; }
.relic-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

.relic { display: grid; align-content: start; gap: 0.45rem; padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--r-ctl); background: rgba(13, 18, 36, 0.45); }
.relic.mine { border-color: color-mix(in srgb, var(--gold) 40%, var(--line-soft)); }
.relic p { margin: 0; }
.relic-head { display: flex; align-items: center; gap: 0.5rem; }
.relic-head img { width: 2rem; height: 2rem; object-fit: contain; }
.relic-head h3 { flex: 1; margin: 0; font: 400 var(--step-1) var(--display); color: var(--ivory); }
.relic-head h3 a { color: inherit; text-decoration: none; }
.relic-head h3 a:hover { color: var(--gold-hi); }
.relic-meta { font-size: var(--step--1); color: var(--muted); }
.relic-meta b { font-family: var(--num); color: var(--ivory); }
.relic .owned { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip.ref { color: var(--ref); background: color-mix(in srgb, var(--ref) 14%, transparent); }
.chip.ref[data-ref="intact"] { --ref: var(--intact); }
.chip.ref[data-ref="exceptional"] { --ref: var(--exceptional); }
.chip.ref[data-ref="flawless"] { --ref: var(--flawless); }
.chip.ref[data-ref="radiant"] { --ref: var(--radiant); }

.relic .rewards { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.relic .reward {
  display: grid;
  grid-template-columns: 0.4rem 1.6rem 1fr auto auto auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.2rem;
  border-radius: 2px;
  background: var(--well);
  font-size: var(--step--1);
}
.relic .reward[data-rarity="common"] { --rar: var(--intact); }
.relic .reward[data-rarity="uncommon"] { --rar: var(--exceptional); }
.relic .reward[data-rarity="rare"] { --rar: var(--flawless); }
.relic .reward .dot { align-self: stretch; border-radius: 2px; background: var(--rar); }
.relic .reward img, .relic .reward .noimg { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.relic .reward .rn { min-width: 0; line-height: 1.25; }
.relic .reward .rn small { display: block; color: var(--muted); font-size: var(--step--2); }
.relic .reward .rc { font-family: var(--num); color: var(--muted); }
.relic .reward .rp { min-width: 2.6rem; text-align: right; font-family: var(--num); font-weight: 600; color: var(--ivory); }

.reward-menu { position: relative; }
.reward-menu summary { padding: 0 0.4rem; border-radius: 2px; color: var(--muted); cursor: pointer; list-style: none; line-height: 1.6; }
.reward-menu summary::-webkit-details-marker { display: none; }
.reward-menu summary:hover, .reward-menu[open] summary { color: var(--ivory); background: var(--void-soft); }
.reward-menu .menu {
  position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 5;
  display: grid; min-width: 16rem; padding: 0.3rem;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--lapis-900);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.reward-menu .menu a, .reward-menu .menu button {
  display: block; padding: 0.4rem 0.6rem; border: 0; border-radius: 2px; background: none;
  color: var(--ivory); font: inherit; font-size: var(--step--1); text-align: left; text-decoration: none; cursor: pointer;
}
.reward-menu .menu a:hover, .reward-menu .menu button:hover,
.reward-menu .menu a:focus-visible, .reward-menu .menu button:focus-visible { background: var(--void-soft); outline: none; }