/* ui/shared/gear-card.css — the rich shared gear card (vault + mission debrief).
 * See src/ui/shared/gear-card.js for the markup contract. All classes are
 * prefixed `.gc-*`. The rarity tint comes from `--gc-rarity-color` set inline.
 */

.gc {
  --gc-rarity-color: var(--green, #33ff66);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--gc-rarity-color);
  border-left-width: 3px;
  background: rgba(8, 16, 22, .65);
  box-sizing: border-box;
  font-family: inherit;
  position: relative;
}

/* ── HEAD: badge tile · rarity tag · name · element ────────────────────── */
.gc-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Comic badge tile (DIM pass v2) — archetype silhouette on a rarity panel. */
.gc-badge {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.gc-rarity-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gc-rarity-color);
  opacity: .9;
  text-transform: uppercase;
}
.gc-name {
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--gc-rarity-color);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gc-elem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gc-elem-pip {
  width: 8px; height: 8px;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}
.gc-elem-ic { width: 15px; height: 15px; flex-shrink: 0; }
.gc-elem-name {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--green, #33ff66);
  opacity: .8;
}

/* ── META: slot · mode · range ─────────────────────────────────────────── */
.gc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.gc-meta-chip {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--amber, #ffb000);
  opacity: .85;
  padding: 2px 6px;
  border: 1px solid rgba(255, 176, 0, .25);
  background: rgba(255, 176, 0, .04);
}

/* ── BODY: stats grid + perk block ─────────────────────────────────────── */
.gc-body {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 1.8fr);
  gap: 14px;
  align-items: start;
}
/* Armor (no weapon-perk slot) — stats span full width instead of leaving an empty column. */
.gc-body.gc-body-stats-only {
  grid-template-columns: 1fr;
}

.gc-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}
.gc-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  border-bottom: 1px dashed rgba(51, 255, 102, .08);
  padding-bottom: 2px;
}
.gc-stat:last-child { border-bottom: none; }
.gc-stat-k {
  color: var(--amber, #ffb000);
  letter-spacing: 1px;
  opacity: .85;
  margin: 0;
}
.gc-stat-v {
  color: var(--green, #33ff66);
  font-weight: 700;
  letter-spacing: .5px;
  margin: 0;
}
/* DMG + RPM read as the headliners — slightly larger, brighter. */
.gc-stat-damage .gc-stat-v,
.gc-stat-rpm    .gc-stat-v {
  font-size: 13px;
  color: var(--gc-rarity-color);
}

.gc-perk {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--amber, #ffb000);
  background: rgba(255, 176, 0, .05);
  border-radius: 2px;
  min-height: 48px;
}
.gc-perk-tag {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--amber, #ffb000);
  opacity: .7;
}
.gc-perk-name {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--amber, #ffb000);
  font-weight: 700;
}
.gc-perk-desc {
  font-size: 10px;
  line-height: 1.35;
  color: var(--green, #33ff66);
  opacity: .85;
  margin: 0;
}
.gc-perk-none {
  border-color: rgba(51, 255, 102, .15);
  background: transparent;
}
.gc-perk-none .gc-perk-name {
  color: var(--green-dim, rgba(51, 255, 102, .45));
  font-style: italic;
  letter-spacing: 1.5px;
}

/* ── WOVEN (wave 3 — loot-vision.md §4/§10 L3) — shiny legendary, gold trim.
 * `.gc-woven` layers a gold glow on top of the normal rarity-color border
 * (which --gc-rarity-color already set to WOVEN_META.color in gear-card.js);
 * `--gc-woven-trim` is the lighter accent line used for the option chips. ── */
.gc.gc-woven {
  box-shadow: 0 0 14px -2px var(--gc-rarity-color), inset 0 0 0 1px rgba(255, 215, 106, .18);
}
.gc.gc-woven .gc-name {
  text-shadow: 0 0 8px rgba(255, 215, 106, .45);
}
/* Two stacked per-column option blocks, occupying the perk slot's grid column. */
/* Both rolled perks (feel + loop-role) stack in the body grid's perk column. */
.gc-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gc-woven-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gc-woven-col {
  border-color: var(--gc-woven-trim, #fff2c0);
  background: rgba(255, 215, 106, .05);
}
.gc-woven-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.gc-woven-option {
  padding: 4px 6px;
  border: 1px solid rgba(255, 215, 106, .2);
  border-radius: 2px;
  opacity: .6;
}
.gc-woven-option .gc-perk-name { font-size: 10px; }
.gc-woven-option .gc-perk-desc { font-size: 9px; }
.gc-woven-option-selected {
  opacity: 1;
  border-color: var(--gc-woven-trim, #fff2c0);
  background: rgba(255, 215, 106, .1);
}
.gc-woven-option-selected .gc-perk-name {
  color: var(--gc-woven-trim, #fff2c0);
}

/* ── Catalyst row (WF-1) — 2nd perk block, authored exotics only. Spans both
   .gc-body columns (below the stats/perk row) so it doesn't fight for width. ── */
.gc-catalyst {
  grid-column: 1 / -1;
}
.gc-catalyst-locked {
  border-color: rgba(51, 255, 102, .15);
  background: transparent;
}
.gc-catalyst-locked .gc-perk-name {
  color: var(--green-dim, rgba(51, 255, 102, .45));
  font-style: italic;
  letter-spacing: 1.5px;
}
.gc-catalyst-charging .gc-perk-name {
  color: var(--green, #33ff66);
}
.gc-catalyst-unlocked {
  border-color: var(--green, #33ff66);
  background: rgba(51, 255, 102, .05);
}
.gc-catalyst-unlocked .gc-perk-name {
  color: var(--green, #33ff66);
}

/* ── FOOT: badges (drop) or actions (vault) ────────────────────────────── */
.gc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.gc-badge {
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 3px 6px;
  font-weight: 700;
}
.gc-badge-new   { color: var(--green, #33ff66); border: 1px solid var(--green, #33ff66); }
.gc-badge-dupe  { color: var(--amber, #ffb000); border: 1px solid var(--amber, #ffb000); opacity: .85; }
.gc-badge-pity  { color: #ff7733; border: 1px solid #ff7733; }
.gc-equipped    { color: var(--green, #33ff66); font-size: 10px; letter-spacing: 1px; }
.gc-equip, .gc-fav {
  font-family: inherit;
  cursor: pointer;
}
.gc-equip {
  background: rgba(51, 255, 102, .08);
  border: 1px solid var(--green, #33ff66);
  color: var(--green, #33ff66);
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 6px 14px;
}
.gc-fav {
  background: none;
  border: 1px solid var(--green-dim, rgba(51, 255, 102, .25));
  color: var(--amber, #ffb000);
  font-size: 13px;
  width: 30px;
  height: 30px;
}

/* ── Dupe treatment: struck-through name, muted tone ───────────────────── */
.gc.gc-dupe .gc-name {
  text-decoration: line-through;
  opacity: .45;
}
.gc.gc-dupe { opacity: .85; }

/* ── Narrow viewports: collapse stats + perk into a stack ──────────────── */
@media (max-width: 560px) {
  .gc { padding: 10px 12px; }
  .gc-body {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .gc-name { font-size: 13px; }
}

/* ── Hero icon modifier (opts.heroIcon — drop cards only, see gear-card.js) ──
 * Mission-debrief feedback: "make the icon much bigger, up to the full
 * vertical height of the box." The badge tile becomes an absolutely
 * positioned SQUARE rail pinned to the card's left edge. The badge tile's
 * artwork (a 56×56 viewBox comic panel — see makeGearIcon in
 * ui/loadout/icons.js) is square, so the rail is sized `aspect-ratio: 1`
 * off a width budget (clamp/vw) and then capped by `max-height: 100%` so it
 * can never exceed the card's own height — on a tall card (long perk desc)
 * the rail reads as "full card height"; on a short one it stays square
 * instead of stretching the artwork into a distorted rectangle. Everything
 * else (head/meta/body/foot) reflows into the remaining width via a left
 * padding on `.gc` equal to the rail's width budget + gutter. Scoped
 * entirely to `.gc-hero-icon` so the Vault/loadout card (`.gc-vault`, no
 * `.gc-hero-icon`) keeps its inline 42px head tile untouched. The icon
 * itself is inline SVG (see ui/loadout/icons.js) — vector, so it stays
 * crisp at any size; no raster re-render needed.
 */
.gc.gc-hero-icon {
  position: relative;
  padding-left: calc(clamp(72px, 24vw, 148px) + 16px);
}
.gc.gc-hero-icon > .gc-head {
  grid-template-columns: auto 1fr auto;  /* rarity tag · name · element (badge removed from flow) */
}
/* NOTE: `.gc-badge` is reused for two unrelated things in this component — the
 * icon SVG tile (`.gc-head > svg.gc-badge`) AND the drop-mode footer text
 * badges (`.gc-foot > span.gc-badge.gc-badge-new/-dupe/-pity`). Scope this
 * rule to `.gc-head > .gc-badge` only so the footer badges are untouched. */
.gc.gc-hero-icon > .gc-head > .gc-badge {
  position: absolute;
  inset: 0 auto auto 0;
  width: clamp(72px, 24vw, 148px);
  height: auto;
  aspect-ratio: 1;
  max-height: 100%;
}

@media (max-width: 560px) {
  .gc.gc-hero-icon {
    padding-left: calc(clamp(60px, 28vw, 108px) + 12px);
  }
  .gc.gc-hero-icon > .gc-head > .gc-badge {
    width: clamp(60px, 28vw, 108px);
  }
}