/* Legendary page: what the specialty component boxes hold (#component-boxes). Tier colors match the Enchanting page. */
.lb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); }
.lb-key { --tc: #9fb0c8; display: inline-flex; }
.lb-key.t-uncommon { --tc: #7ee66b; } .lb-key.t-rare { --tc: #74a8ff; } .lb-key.t-veryrare { --tc: #b48cff; }
.lb-jump { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.lb-jump a { padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--rk-accent-line, rgba(230, 200, 74, 0.35)); color: var(--text); font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.lb-jump a:hover { color: var(--rk-accent-bright, #ffe08a); border-color: var(--rk-accent-bright, #ffe08a); }
.lb-cards { display: grid; gap: 1.1rem; }
.lb-card { padding: 1.1rem 1.2rem 1.2rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: radial-gradient(420px 160px at 0% 0%, rgba(230, 200, 74, 0.1), transparent 70%), var(--rk-panel, #161922); scroll-margin-top: 90px; }
.lb-card:target { border-color: var(--rk-accent-bright, #ffe08a); box-shadow: 0 0 0 2px rgba(230, 200, 74, 0.25); }
.lb-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.lb-art { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(230, 200, 74, 0.35); padding: 6px; box-sizing: border-box; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.lb-art.is-glyph { display: inline-grid; place-items: center; color: var(--rk-accent-bright, #ffe08a); }
.lb-art.is-glyph svg { width: 38px; height: 38px; }
.lb-name { margin: 0; font-family: "Cinzel", serif; font-size: 1.3rem; color: #fff; }
.lb-from, .lb-srv, .lb-count { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--muted); }
.lb-from b { color: var(--rk-accent-bright, #ffe08a); font-weight: 700; margin-right: 0.2rem; }
/* not obtainable yet (earned "soon"): a badge where the earned-from line goes, and a quieter card */
.lb-soon { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem; border-radius: 999px; font: 800 0.74rem/1 "Inter", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #1a1305; background: linear-gradient(180deg, #ffe08a, #e6c84a); box-shadow: 0 0 14px rgba(230, 200, 74, 0.35); }
.lb-soon svg { width: 14px; height: 14px; }
.lb-card.is-soon { border-style: dashed; border-color: rgba(230, 200, 74, 0.35); }
.lb-new { display: inline-flex; align-items: center; margin-left: 0.4rem; padding: 0.18rem 0.55rem; border-radius: 999px; font: 800 0.68rem/1 "Inter", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #1a1305; background: linear-gradient(180deg, #ffe08a, #e6c84a); box-shadow: 0 0 12px rgba(230, 200, 74, 0.4); vertical-align: 1px; }
.lb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 0.5rem; }
.lb-it { --tc: #9fb0c8; position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); background: color-mix(in srgb, var(--tc) 7%, rgba(0, 0, 0, 0.2)); min-width: 0; }
.lb-it.t-uncommon { --tc: #7ee66b; } .lb-it.t-rare { --tc: #74a8ff; } .lb-it.t-veryrare { --tc: #b48cff; }
.lb-ico { flex: none; width: 44px; height: 44px; object-fit: contain; }
.lb-ico.is-glyph { display: inline-grid; place-items: center; color: var(--tc); }
.lb-ico.is-glyph svg { width: 26px; height: 26px; }
.lb-it-t { display: grid; min-width: 0; flex: 1; }
.lb-it-t { gap: 0.25rem; }
.lb-it-t b { color: #fff; font-size: 0.92rem; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.lb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
.lb-it-t small { color: var(--muted); font-size: 0.8rem; }
.lb-tier { flex: none; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); }
.lb-empty { margin: 0; padding: 1rem 1.1rem; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.16); color: var(--muted); }
.lb-jumplink { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 1.4rem; font-weight: 700; color: var(--rk-accent-bright, #ffe08a); text-decoration: none; }
.lb-jumplink:hover { text-decoration: underline; }
.lb-jumplink svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .lb-head { align-items: flex-start; }
  .lb-art { width: 60px; height: 60px; }
  .lb-card { padding: 0.9rem; }
}

/* ---------- Retired legendaries in the catalogue (generated block, see build-legendary-data.js)
   Collapsed by default, because the live list is what somebody opening this page came for, and
   kept rather than dropped, because a name that has been in the game for a year should still
   resolve to something when it is searched for or linked to.

   These rules are here rather than beside the other .leg-catalog-grid rules in plugin-pages.css
   for a cache reason: that file is linked by 43 pages on five different ?v= tags, and this one is
   linked by legendary.html alone. */
.rankpage details.leg-catalog-retired { margin-top: 1.1rem; border-top: 1px solid var(--rk-accent-line, rgba(230, 200, 74, 0.35)); padding-top: 0.8rem; }
.rankpage details.leg-catalog-retired > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; color: var(--muted); user-select: none;
}
.rankpage details.leg-catalog-retired > summary::-webkit-details-marker { display: none; }
/* The marker is drawn rather than inherited: the native one differs per browser and sits on the
   wrong side of the label in two of them. */
.rankpage details.leg-catalog-retired > summary::before {
  content: ""; width: 0; height: 0; border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.rankpage details.leg-catalog-retired[open] > summary::before { transform: rotate(90deg); }
.rankpage details.leg-catalog-retired > summary:hover { color: var(--rk-accent-bright, #ffe08a); }
.rankpage ul.leg-catalog-grid-retired { margin-top: 0.7rem; }
.rankpage ul.leg-catalog-grid-retired li.is-retired { color: var(--muted); }
.rankpage ul.leg-catalog-grid-retired li.is-retired a { color: inherit; }
.rankpage ul.leg-catalog-grid-retired li.is-retired a:hover { color: var(--rk-accent-bright, #ffe08a); }
.rankpage .leg-badge-retired {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.3);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  vertical-align: 1px;
}