/* Bosses page (pages/bosses.html, assets/js/bosses.js): hero tiles, the boss grid (2 columns on phones) and the stage
   list under each card. Loaded after site.css; the cards reuse the roster's .unit card. Game art is never tinted: the
   element colour only feeds the card's background glow, as on the roster. */

/* ---------- hero + tiles ---------- */
.bs-head { display: flex; gap: 14px 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.bs-text { flex: 1 1 420px; min-width: 0; }
.bs-text h1 { margin-bottom: 6px; }
.bs-text p { margin: 0; }

/* ---------- toolbar: one labelled row per group on wide screens ---------- */
@media (min-width: 761px) {
  .toolbar[data-fp="bosses"] #filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
  .toolbar[data-fp="bosses"] #filters > .chips { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .toolbar[data-fp="bosses"] #filters .chips-label { min-width: 72px; }
  .toolbar[data-fp="bosses"] #reset { grid-column: 2; grid-row: 1; justify-self: end; }
  .toolbar[data-fp="bosses"] #count { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; }
}

/* ---------- grid ---------- */
.bs-grid { padding-top: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: start; }
@media (max-width: 480px) { .bs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.bs-group { grid-column: 1 / -1; font: 700 var(--fs-lg)/1.2 var(--head); letter-spacing: -0.01em; margin: 18px 0 0; display: flex; align-items: center; gap: 10px; min-height: 1.6rem; }
.bs-group::before { content: ""; flex: none; width: 3px; height: 1.05em; border-radius: 2px; background: var(--accent); }
.bs-group.bs-sk-h::before { content: none; }
.bs-group:first-of-type, .bs-sk-h { margin-top: 6px; }
.bs-gn { font: 600 var(--fs-sm) var(--sans); color: var(--faint); }

/* ---------- card ---------- */
.unit.boss { cursor: default; content-visibility: visible; }
.unit.boss:hover { transform: none; box-shadow: none; }
.boss .unit-art img.icon { object-fit: cover; }
.boss .unit-info { min-height: 0; gap: 6px; }
.boss .unit-name { margin: 0; font-size: 0.95rem; overflow-wrap: anywhere; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bs-ph { position: absolute; right: 6px; top: 6px; background: rgba(11, 13, 17, 0.85); }
.bs-els { display: flex; gap: 3px; flex-wrap: wrap; min-height: 20px; }
.bs-el { width: 20px; height: 20px; }
.bs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; min-height: 42px; }
.bs-facts > div { display: flex; flex-direction: column-reverse; gap: 1px; padding: 4px 6px; border-radius: 7px; background: var(--well); min-width: 0; }
.bs-facts dt { font: 700 0.6rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.bs-facts dd { margin: 0; font: 700 0.86rem/1.2 var(--head); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* the stages: closed by default, each one links to its mission card (#m<id>) */
.bs-stages { border-top: 1px solid var(--line); padding-top: 6px; }
.bs-stages > summary { cursor: pointer; font: 700 0.8rem var(--sans); color: var(--accent, var(--gold)); list-style-position: inside; min-height: 24px; display: flex; align-items: center; gap: 6px; }
.bs-stages > summary::-webkit-details-marker { margin-right: 2px; }
.bs-st { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bs-st a { display: flex; flex-direction: column; gap: 1px; padding: 5px 6px; border-radius: 7px; background: var(--surface-2); color: var(--text); min-width: 0; }
.bs-st a:hover { background: var(--surface-3); color: var(--text); }
.bs-st-n { font-weight: 700; font-size: 0.78rem; line-height: 1.25; overflow-wrap: anywhere; }
.bs-st-w { font-size: 0.7rem; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; }
.bs-st-s { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--faint); }
.bs-el-s { width: 14px; height: 14px; }

/* ---------- skeleton: the same box as a card, so the grid keeps its height when the data arrives ---------- */
.bs-sk .unit-info { min-height: 0; }
.bs-sk .unit-info .sk { display: block; }
.bs-sk .unit-info .sk-h { height: 2.4em; }
.bs-sk .unit-info .sk-l:nth-child(2) { height: 20px; }
.bs-sk .unit-info .sk-l:nth-child(3) { height: 42px; }
.bs-sk::after { content: ""; display: block; height: 31px; }