/* A build card and its parts (build-parts.js), on the Builds page and the Collection page's Pandaahh builds.
   Tokens and components come from style.css (.panel, .chip, .parts and .part). */

/* A card: who and which config, how much of it you own, then its mods and arcanes. Its top edge tells the status. */
.build.panel {
  position: relative; display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); min-width: 0;
  transition: border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.build.panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--edge-tone), transparent 85%); opacity: 0.85;
}
.build.ready { --edge-tone: var(--ok); }
.build.close { --edge-tone: var(--warn); }
.build.short { --edge-tone: var(--danger); }
.build.panel:hover { border-color: var(--line-hover); }

.build-head { display: flex; align-items: flex-start; gap: var(--sp-2) var(--sp-3); }
.build-title { flex: 1; min-width: 0; }
.build-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; font: 400 var(--step-1)/1.2 var(--display); color: var(--ivory); overflow-wrap: anywhere; }
.build-config { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; margin: 0.3rem 0 0; color: var(--muted); font-size: var(--step--1); }
.build-config > span + span::before { content: "·"; margin-right: 0.5rem; color: var(--line); }
.build-custom { color: var(--gold-hi); font-weight: 500; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.build-forma { font-family: var(--num); }
/* A Kuva, Tenet or Coda weapon's bonus element and value, in the element's colour */
.build-valence { --element: var(--muted); display: inline-flex; align-items: baseline; gap: 0.3rem; color: var(--element); transition: color var(--mid) var(--ease); }
.build-valence b { font: 600 var(--step--1) var(--num); font-variant-numeric: tabular-nums; }
.build-valence[data-element="impact"] { --element: #b8c4d6; }
.build-valence[data-element="heat"] { --element: #f08a4b; }
.build-valence[data-element="cold"] { --element: #8fd3f4; }
.build-valence[data-element="electricity"] { --element: #b48cf2; }
.build-valence[data-element="toxin"] { --element: #8ed65a; }
.build-valence[data-element="magnetic"] { --element: #6fa8ff; }
.build-valence[data-element="radiation"] { --element: #e8d44e; }
.build-status { flex: none; font-family: var(--num); white-space: nowrap; }

/* Owned, to rank up and missing, as one bar */
.build-meter { display: flex; align-items: center; gap: var(--sp-2); }
.build-meter .bar { display: flex; flex: 1; height: 4px; overflow: hidden; border-radius: 999px; background: var(--line-soft); }
.build-meter .bar span { transition: width var(--mid) var(--ease); }
.build-meter .have { background: var(--ok); }
.build-meter .rank { background: var(--warn); }
.build-meter .missing { background: var(--danger); }
.meter-text { color: var(--muted); font: 500 var(--step--2) var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }

.build-section .eyebrow { margin-bottom: var(--sp-2); }
.build-section + .build-section { padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.exalted-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.exalted-head .eyebrow { margin-bottom: 0; }
.exalted-name { font-weight: 600; }
button.exalted-name {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-soft); text-underline-offset: 0.2em;
  transition: text-decoration-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
button.exalted-name:hover, button.exalted-name:focus-visible { color: var(--gold-hi); text-decoration-color: currentColor; }
.exalted .parts + .parts { margin-top: 0.35rem; }
.build .parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 0.35rem; margin: 0; }
.build .part {
  display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; padding: 0.35rem 0.6rem;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.build .part:hover { background: var(--surface-3); }
.build .part .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build .part .pr { font-size: var(--step--2); }
.build .part .pk { width: 0.9rem; text-align: center; font-family: var(--num); }

/* A build as the game's Upgrade screen (board in build-parts.js): aura, stance and Exilus slots then arcanes on top,
   mod slots in rows below. A slot's kind shows in its label's colour and top edge; ownership in its left edge. */
.board { display: grid; gap: 0.45rem; min-width: 0; }
.board-top, .board-mods { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.board-top { margin-bottom: 0.3rem; }
.board-special, .board-arcanes { display: contents; }
.board-arcanes > li[style] { grid-column: var(--col); grid-row: 1; }
.slot-aura { --slot: var(--gold); }
.slot-stance { --slot: #b48cf2; }
.slot-exilus { --slot: var(--void); }
.slot-arcane { --slot: #e8894a; }
.build .part.slot, .slot.vacant {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; min-width: 0; min-height: 3.4rem;
  padding: 0.35rem 0.5rem 0.3rem; overflow: hidden;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.slot[class*="slot-"]::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--slot, transparent), transparent 90%);
}
.slot.slot-arcane { border-radius: var(--r-ctl) 1.1rem var(--r-ctl) 1.1rem; }
.build .part.slot .pn {
  flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  max-height: 2.4em; white-space: normal; overflow-wrap: anywhere; line-height: 1.2;
}
.build .part.slot .pr, .build .part.slot .po { line-height: 1.2; }
.build .part.slot .pr { margin-top: auto; }
.build .part.slot { padding-right: 1.3rem; }
.build .part.slot .pk { position: absolute; top: 0.3rem; right: 0.35rem; }
.slot-label { color: var(--slot, var(--muted)); font: 600 0.62rem/1.2 var(--num); letter-spacing: 0.08em; text-transform: uppercase; cursor: help; }
.slot.vacant {
  justify-content: flex-start; border: 1px dashed var(--line-soft); border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--lapis-950) 30%, transparent);
}
.slot-empty { color: color-mix(in srgb, var(--muted) 60%, transparent); font-size: var(--step--2); font-style: italic; }
.riven-tile { border-left-color: var(--void); background: linear-gradient(100deg, color-mix(in srgb, var(--void) 12%, transparent), transparent 80%); }
.riven-tile-grade { align-self: flex-start; padding: 0 0.3rem; border-radius: 2px; background: color-mix(in srgb, var(--tier) 14%, var(--lapis-950)); color: var(--tier); font: 600 0.7rem/1.45 var(--num); }
.board-rivens { margin: 0.2rem 0 0; }
@media (max-width: 560px) {
  .board-top, .board-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-arcanes > li[style] { grid-column: auto; grid-row: auto; }
}

/* Owned mods fade back (.have from style.css); missing ones in red, lower-ranked ones in amber */
.part.missing { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.part.missing .pk { color: var(--danger); }
.part.rank { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.part.rank .po, .part.rank .pk { color: var(--warn); }

/* The Helminth ability takes a whole row: its name, the Warframe it is subsumed from and the slot it replaces */
.build .part.helminth { grid-column: 1 / -1; }
.build .part.helminth .pn { flex: 0 1 auto; }
.part.helminth .hf { flex: 1; min-width: 0; color: var(--muted); font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part.helminth .hf::before { content: "·"; margin-right: 0.45rem; color: var(--line); }
.part.helminth .po { margin-left: auto; color: var(--muted); font: 500 var(--step--2) var(--num); white-space: nowrap; }
.part.helminth.helminth, .part.helminth.unknown { border-left-color: var(--void); }

/* A Riven takes a whole row with its stats */
.build .part.riven {
  grid-column: 1 / -1; display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-left-color: var(--void);
  background: linear-gradient(100deg, color-mix(in srgb, var(--void) 12%, transparent), color-mix(in srgb, var(--lapis-950) 60%, transparent) 60%);
}
.riven-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.riven-top > div { flex: 1; min-width: 0; }
.build .part.riven .pn { display: block; white-space: normal; color: var(--ivory); font: 400 var(--step-0)/1.25 var(--display); }
.riven-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; margin-top: 0.15rem; color: var(--muted); font: 500 var(--step--2) var(--num); }
.riven-pol { text-transform: capitalize; }
.riven-pol::before { content: "·"; margin-right: 0.5rem; color: var(--line); }
.riven-veiled { margin: 0; color: var(--muted); font-size: var(--step--1); font-style: italic; }

/* Roll quality: S is gold, A cyan, B ivory, C amber, F red (as on the Rivens page) */
.tier-s { --tier: var(--gold-hi); }
.tier-a { --tier: var(--void); }
.tier-b { --tier: var(--ivory); }
.tier-c { --tier: var(--warn); }
.tier-f { --tier: var(--down); }
.tier-unknown { --tier: var(--muted); }
.riven-grade {
  display: flex; flex-direction: column; align-items: center; min-width: 2.8rem; padding: 0.2rem 0.4rem 0.25rem;
  border-radius: var(--r-ctl); background: color-mix(in srgb, var(--tier) 12%, var(--lapis-950));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 40%, transparent); line-height: 1; cursor: help;
}
.riven-grade b { color: var(--tier); font: 600 var(--step-1)/1 var(--num); }
.riven-grade small { margin-top: 0.2rem; color: var(--muted); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.riven-stats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.riven-stats li { display: inline-flex; align-items: center; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: var(--step--1); cursor: help; }
.riven-stats li::before { margin-right: 0.3rem; font-family: var(--num); font-weight: 600; }
.riven-stats li b {
  margin-left: 0.45rem; padding: 0 0.3rem; border-radius: 2px;
  background: color-mix(in srgb, var(--lapis-950) 60%, transparent); color: var(--tier); font: 600 0.7rem/1.45 var(--num);
}
.riven-stats .buff { background: var(--void-soft); color: var(--ivory); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--void) 25%, transparent); }
.riven-stats .buff::before { content: "+"; color: var(--void); }
.riven-stats .curse { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); }
.riven-stats .curse::before { content: "\2212"; }

/* Archon Shards: a gem in the shard's colour, brighter with a halo when Tauforged */
.shards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.shard {
  --shard: var(--muted);
  display: flex; align-items: center; gap: 0.55rem; min-width: 0; padding: 0.35rem 0.6rem;
  border: 1px solid var(--line-soft); border-left: 2px solid var(--shard); border-radius: var(--r-ctl);
  background: linear-gradient(100deg, color-mix(in srgb, var(--shard) 10%, transparent), color-mix(in srgb, var(--lapis-950) 60%, transparent) 70%);
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tone-red { --shard: #e0605a; }
.tone-blue { --shard: #5aa4e8; }
.tone-yellow { --shard: #e8bc4e; }
.tone-purple { --shard: #a979e6; }
.tone-orange { --shard: #e8894a; }
.tone-green { --shard: #5cc98a; }
.shard:hover { border-color: color-mix(in srgb, var(--shard) 45%, var(--line-soft)); }
.gem {
  flex: none; width: 0.7rem; height: 0.7rem; transform: rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--shard) 55%, white), var(--shard) 55%, color-mix(in srgb, var(--shard) 60%, black));
}
.tauforged .gem { box-shadow: 0 0 0 1px color-mix(in srgb, var(--shard) 70%, white), 0 0 6px color-mix(in srgb, var(--shard) 70%, transparent); }
.shard-text { display: grid; min-width: 0; line-height: 1.25; }
.shard-effect { font-size: var(--step--1); color: var(--ivory); overflow-wrap: anywhere; }
.shard-color { color: color-mix(in srgb, var(--shard) 75%, var(--muted)); font: 500 var(--step--2) var(--num); letter-spacing: 0.02em; }

@media (max-width: 560px) {
  .build-head { flex-wrap: wrap; }
  .build-status { white-space: normal; }
}

/* A mod's card while the pointer is over it (showCard in build-parts.js): it fades and rises in, its image fades in once loaded */
.mod-card {
  position: fixed; z-index: 20; display: grid; justify-items: center; gap: 0.3rem; width: 13rem; padding: 0.5rem 0.5rem 0.6rem;
  border: 1px solid var(--hairline); border-radius: var(--r-ctl); background: color-mix(in srgb, var(--lapis-950) 94%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(4px) scale(0.98);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), left 90ms ease-out, top 90ms ease-out, visibility 0s linear var(--fast);
}
.mod-card.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mod-card img { width: 12rem; height: 17.2rem; object-fit: contain; opacity: 0; transition: opacity var(--mid) var(--ease); }
.mod-card img.loaded { opacity: 1; }
.mod-card p { margin: 0; text-align: center; }
.mod-card-name { color: var(--gold-hi); font: 400 var(--step-0)/1.2 var(--display); }
.mod-card.arcane { width: 15rem; }
.mod-card.arcane img { width: 9rem; height: 9rem; }
.mod-card-effect { display: grid; gap: 0.15rem; padding-top: 0.35rem; border-top: 1px solid var(--hairline); color: var(--ivory); font-size: var(--step--1); line-height: 1.35; }
.mod-card-effect[hidden] { display: none; }
.mod-card-status { color: var(--muted); font: 500 var(--step--2) var(--num); }
.mod-card-status.missing { color: var(--danger); }
.mod-card-status.rank { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .mod-card { transform: none; } }