/* Builds tab (bd-*) plus the shared usage list (us-*) and donut (dn-*) used by the Champions tab. */

/* ---------- Layout ---------- */

.bd {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
}

/* Columns A and C stretch to column B's height; their lists scroll inside. */
.bd-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.bd-augments,
.bd-items,
.bd-usage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.bd-usage .us-rows {
  flex: 1 1 0;
  min-height: 260px;
}

/* ---------- Augment tiers ---------- */

.bd-augments__tiers {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

/* Augment rarity rows: flat rows with a 2px rarity edge, a faint tint and a rarity diamond; they slide in. */
.bd-tier {
  display: grid;
  grid-template-columns: 14px minmax(70px, 1fr) 90px auto;
  align-items: center;
  column-gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--j-line);
  border-left: 2px solid var(--tier-bar);
  background: linear-gradient(90deg, var(--tier-tint), rgba(var(--j-white-rgb), 0) 60%);
  animation: kt-row-in 0.45s var(--j-ease) backwards;
  animation-delay: var(--d, 0s);
  transition: border-color var(--j-dur-fast) var(--j-ease-std), background-color var(--j-dur-fast) var(--j-ease-std);
  --tier-tint: rgba(var(--j-silver-rgb), 0.08);
  --tier-bar: var(--j-silver-500);
  --tier-gem: var(--j-fill-silver);
  --tier-glow: rgba(var(--j-silver-rgb), 0.35);
}

.bd-tier:hover {
  border-color: var(--j-line-strong);
  border-left-color: var(--tier-bar);
  background-color: rgba(var(--j-gold-rgb), 0.04);
}

.bd-tier--prismatic {
  --tier-tint: rgba(var(--j-prism-rgb), 0.14);
  --tier-bar: var(--j-prism-violet);
  --tier-gem: var(--j-fill-prismatic);
  --tier-glow: rgba(var(--j-prism-rgb), 0.65);
}

.bd-tier--gold {
  --tier-tint: rgba(var(--j-gold-rgb), 0.13);
  --tier-bar: var(--j-gold-300);
  --tier-gem: var(--j-fill-gold);
  --tier-glow: rgba(var(--j-gold-rgb), 0.6);
}

.bd-tier--event {
  --tier-tint: rgba(var(--j-ember-rgb), 0.12);
  --tier-bar: var(--j-ember-300);
  --tier-gem: var(--j-fill-ember);
  --tier-glow: rgba(var(--j-ember-rgb), 0.6);
}

.bd-tier__gem {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--j-gloss), var(--tier-gem);
  box-shadow: inset 0 1px 1px rgba(var(--j-white-rgb), 0.5), 0 0 8px var(--tier-glow);
}

.bd-tier__name {
  font-family: var(--j-display);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: var(--j-track-head);
  text-transform: uppercase;
  color: var(--j-text);
}

.bd-tier__picks {
  font-size: 18px;
  color: var(--j-text);
}

.bd-tier__grade {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.bd-tier__picks small,
.bd-tier__grade small,
.bd-tier__rate small {
  margin-left: 6px;
  font-family: var(--j-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--j-muted);
}

.bd-tier__rate {
  white-space: nowrap;
}

.bd-tier__rate b {
  font-weight: 400;
  font-size: 17px;
  color: var(--j-p2);
}

.bd-tier__rate em {
  font-style: normal;
}

/* 1st-place gradient text (kit.css .kt-prism) inside rules that set a colour. */
.bd-tier__rate b.kt-prism,
.bd-spot__rate b.kt-prism,
.bd-special__rate b.kt-prism {
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(var(--j-p1-rgb), 0.3));
}

/* ---------- Spotlight ---------- */

.bd-spot__body {
  display: grid;
  gap: 18px;
  animation: j-fade 0.35s ease backwards;
}

.bd-spot__hero {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-top: 6px;
}

/* The spotlight crest: the Colosseum crest (crest.css) in prismatic light, the item whole in a square frame. */
.bd-crest {
  --crest-size: 132px;
  --crest-light-rgb: var(--j-prism-rgb);
  margin-bottom: 8px;
}

.bd-crest__frame {
  animation: bd-crest-in 0.6s var(--j-ease-pop) 0.15s backwards;
  transition: box-shadow var(--j-dur) var(--j-ease-out);
}

.bd-crest:hover .bd-crest__frame {
  box-shadow: 0 0 0 1px rgba(var(--j-ink-rgb), 0.85), 0 0 26px rgba(var(--j-prism-rgb), 0.5);
}

@keyframes bd-crest-in {
  from { opacity: 0; transform: scale(0.4); }
}

.bd-spot__body.is-swap .bd-crest__frame,
.bd-spot__body.is-swap .bd-spot__name,
.bd-spot__body.is-swap .bd-spot__count,
.bd-spot__body.is-swap .bd-spot__rates {
  animation: j-rise 0.5s var(--j-ease) backwards;
}

.bd-spot__body.is-swap .bd-crest__frame {
  animation: bd-crest-in 0.5s var(--j-ease-pop) backwards;
}

.bd-spot__name {
  margin: 0;
  font-family: var(--j-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: var(--j-track-title);
  color: var(--j-gold-50);
  text-decoration: none;
  text-shadow: 0 0 24px rgba(var(--j-gold-rgb), 0.25);
  transition: color var(--j-dur-fast) var(--j-ease-std);
}

a.bd-spot__name:hover {
  color: var(--j-gold-100);
}

.bd-spot__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.bd-spot__count b {
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--j-text);
}

.bd-spot__rates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.bd-spot__rate {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.bd-spot__rate b {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--j-p2);
}

.bd-spot__rate small {
  font-family: var(--j-sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bd-spot__sep {
  display: grid;
  place-items: center;
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, transparent, var(--j-line-mid), transparent);
}

.bd-spot__sep .j-diamond {
  width: 7px;
  height: 7px;
  background: var(--j-gold-300);
  box-shadow: 0 0 8px rgba(var(--j-gold-rgb), 0.6);
}

.bd-spot__picks {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--j-line-soft);
}

.bd-spot__pick {
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.bd-spot__pick:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.bd-spot__pick.is-active {
  opacity: 1;
  border-color: rgba(var(--j-gold-200-rgb), 0.75);
  background: rgba(var(--j-gold-rgb), 0.12);
  box-shadow: inset 0 -2px 0 var(--j-gold-300);
}

/* ---------- Figures (stat anvils) ---------- */

.bd-fig {
  display: grid;
  align-content: start;
  gap: 4px;
}

.bd-fig b {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.05;
  color: var(--j-text);
}

.bd-fig small {
  font-family: var(--j-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--j-dim);
}

.bd-fig.is-gold b {
  color: var(--j-gold-300);
  text-shadow: 0 0 14px rgba(var(--j-gold-rgb), 0.3);
}

/* Stat anvils: hairline-separated figures beside the anvil icon. */
.bd-anvils__grid {
  display: grid;
  grid-template-columns: 50px repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 0;
}

.bd-anvils__grid .bd-fig {
  min-width: 0;
  padding: 2px 12px;
  border-left: 1px solid var(--j-line-divider);
}

.bd-anvils__grid .bd-fig .j-label {
  font-size: 9.5px;
}

.bd-anvils__grid .bd-fig b {
  font-size: 22px;
}

.bd-anvils__icon {
  width: 42px;
  height: 42px;
  align-self: center;
  border: 1px solid rgba(var(--j-gold-rgb), 0.6);
}

/* ---------- Gold & anvils ---------- */

.bd-gold__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

/* Three columns split by hairlines; gold earned is the lit centre one. */
.bd-gold__col {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 6px 10px;
  text-align: center;
}

.bd-gold__col + .bd-gold__col {
  border-left: 1px solid var(--j-line-divider);
}

.bd-gold__col img {
  transition: transform var(--j-dur) var(--j-ease-out);
}

.bd-gold__col:hover img {
  transform: translateY(-3px) scale(1.06);
}

.bd-gold__col img {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 0;
  border: 1px solid rgba(var(--j-gold-rgb), 0.55);
}

.bd-gold__col b {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--j-text);
}

.bd-gold__col.is-main b {
  font-size: 34px;
  color: var(--j-gold-300);
  text-shadow: 0 0 22px rgba(var(--j-gold-rgb), 0.4);
}

.bd-gold__col.is-prism b {
  color: var(--j-prism-violet-light);
  text-shadow: 0 0 16px rgba(var(--j-prism-rgb), 0.35);
}

.bd-gold__col.is-prism img {
  border-color: rgba(var(--j-prism-rgb), 0.75);
  box-shadow: 0 0 12px rgba(var(--j-prism-rgb), 0.35), 0 4px 10px rgba(var(--j-shadow-rgb), 0.5);
}

.bd-gold__col small {
  font-family: var(--j-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--j-dim);
}

.bd-gold__col small em {
  font-style: normal;
  font-weight: 400;
  color: var(--j-text);
}

/* ---------- Special items ---------- */

.bd-special__list,
.bd-juice__list,
.bd-boots__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-special__list {
  display: grid;
  gap: 6px;
}

.bd-special__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 84px 84px;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--j-line-soft);
}

.bd-special__row:hover {
  border-color: rgba(var(--j-gold-rgb), 0.35);
}

.bd-special__name {
  display: grid;
  min-width: 0;
}

.bd-special__name a,
.bd-special__name b {
  overflow: hidden;
  font-weight: 400;
  font-size: 14px;
  color: var(--j-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bd-special__name small,
.bd-special__rate small {
  font-family: var(--j-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--j-dim);
}

.bd-special__rate {
  display: grid;
  justify-items: end;
}

.bd-special__rate b {
  font-weight: 400;
  font-size: 19px;
  color: var(--j-p2);
}

.bd-special__rate em {
  font-style: normal;
}

/* ---------- Juices ---------- */

.bd-juice__row {
  display: grid;
  grid-template-columns: 28px minmax(100px, auto) minmax(40px, 1fr) 46px;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}

.bd-juice__name {
  font-size: 13px;
  font-weight: 400;
  color: var(--j-text);
}

.bd-juice__track {
  height: 8px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(var(--j-shadow-rgb), 0.4);
  box-shadow: inset 0 1px 2px rgba(var(--j-shadow-rgb), 0.55);
}

.bd-juice__track span {
  display: block;
  height: 100%;
  border-radius: 0;
  background: var(--j-gloss), linear-gradient(90deg, var(--j-gold-600), var(--j-gold-300) 55%, var(--j-ember-200));
  box-shadow: 0 0 10px rgba(var(--j-ember-rgb), 0.35);
  transform-origin: left;
  animation: j-grow 0.9s var(--j-ease) backwards;
}

.bd-juice__row b {
  font-weight: 400;
  font-size: 15px;
  text-align: right;
  color: var(--j-gold-300);
}

/* ---------- Boots ---------- */

.bd-boots__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 14px;
  font-family: var(--j-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--j-muted);
}

.bd-boots__stats b {
  margin-left: 6px;
  font-weight: 400;
  font-size: 18px;
  color: var(--j-text);
}

.bd-boots__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.bd-boots__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 36px;
  grid-template-rows: auto 5px;
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background 0.2s, border-color 0.2s;
}

.bd-boots__row:hover {
  background: rgba(var(--j-white-rgb), 0.035);
}

.bd-boots__row .j-icon {
  grid-row: 1 / span 2;
}

.bd-boots__row.is-top {
  border-color: rgba(var(--j-gold-rgb), 0.45);
  background: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.12), rgba(var(--j-gold-rgb), 0) 70%);
}

.bd-boots__name {
  overflow: hidden;
  font-family: var(--j-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--j-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bd-boots__row b {
  font-weight: 400;
  font-size: 15px;
  text-align: right;
  color: var(--j-text);
}

.bd-boots__row small {
  font-size: 10px;
  text-align: right;
  color: var(--j-dim);
}

.bd-boots__track {
  grid-column: 2 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(var(--j-shadow-rgb), 0.4);
}

.bd-boots__track span {
  display: block;
  height: 100%;
  border-radius: 0;
  transform-origin: left;
  animation: j-grow 0.9s var(--j-ease) backwards;
}

.bd-boots__row.is-bare .bd-boots__name {
  color: var(--j-dim);
}

/* ---------- Responsive ---------- */

@media (max-width: 1500px) {
  .bd {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .bd-col--c {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .bd-col--c {
    grid-template-rows: auto 1fr;
  }
  .bd-col--c .bd-items {
    grid-row: span 2;
  }
  .bd-items .us-rows {
    flex: none;
    max-height: 560px;
  }
  .bd-anvils__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bd-anvils__icon {
    display: none;
  }
}

@media (max-width: 1000px) {
  .bd,
  .bd-col--c {
    grid-template-columns: minmax(0, 1fr);
  }
  .bd-usage .us-rows {
    flex: none;
    max-height: 460px;
  }
  .bd-col--c .bd-items {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .us-head,
  .us-row {
    grid-template-columns: 26px minmax(0, 1fr) 30px 46px 42px;
    column-gap: 7px;
  }
  .us-head--grade,
  .us-row--grade {
    grid-template-columns: 26px minmax(0, 1fr) 46px 42px;
  }
  .us-row__games,
  .us-row__rate {
    font-size: 13.5px;
  }
  .us-row .us-bar,
  .us-head > span:nth-child(2) {
    display: none;
  }
  .us-row .j-icon {
    --size: 26px !important;
    width: 26px;
    height: 26px;
  }
  .bd-tier {
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
  }
  .bd-tier__picks {
    display: none;
  }
  .bd-anvils__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bd-anvils__icon {
    display: none;
  }
  .bd-gold__col {
    padding: 4px 4px 2px;
  }
  .bd-gold__col b,
  .bd-gold__col.is-main b {
    font-size: 22px;
  }
  .bd-special__row {
    grid-template-columns: 34px minmax(0, 1fr) 64px 64px;
    gap: 8px;
  }
  .bd-boots__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .bd-boots__list {
    width: 100%;
  }
}

/* Boots: hovering a row lights its arc in the donut. */
.dn__svg.is-linked .dn__arc {
  opacity: 0.3;
}

.dn__svg.is-linked .dn__arc.is-hot {
  opacity: 1;
}

.bd-boots__name a,
.bd-special__name a {
  color: inherit;
  text-decoration: none;
  transition: color var(--j-dur-fast) var(--j-ease-std);
}

.bd-boots__name a:hover,
.bd-special__name a:hover {
  color: var(--j-gold-100);
}