/* ui/shared/card.css — THE unified Fate card (weapons · armor · abilities).
 * One format, reused on every surface (Vault, item-inspect, mission debrief,
 * EQUIPPED, LOADOUTS, ability picker). Markup contract in ui/shared/card.js.
 * Layout (design-locked with the user): TITLE (full width) / ICON | element+verb
 * stack | STATS (row) / PERKS (full width) / FOOTER (full width). Rarity drives
 * the color via `--fc-rc` set inline on the root (RARITY_META.color, or a verb
 * tint for abilities). Informed by Destiny 2 / Honkai: Star Rail / Everspace 2.
 * All classes prefixed `.fc-`. Loaded once from index.html.
 *
 * Density pass (card-sizing-adjustment): spatial footprint (padding, icon column,
 * gaps, bar height) trimmed ~30% for a denser card, with FONT sizes bumped up so
 * the text reads larger inside the tighter frame. Interactive footer targets
 * (fc-mini/fc-equip) keep ≥44px touch sizing — density comes from the chrome, not
 * the tap targets.
 */

.fc {
  --fc-rc: #9b9b9b;               /* rarity color — set inline per card */
  --fc-cream: #f4efe1;
  --fc-muted: #8f9ac4;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--fc-rc) 55%, #2a3350);
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 20, 38, .92), rgba(8, 12, 26, .95));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  box-sizing: border-box;
  font-family: inherit;
}
/* rarity spine down the left edge */
.fc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--fc-rc); }
.fc.fc-glow { box-shadow: 0 0 22px -6px var(--fc-rc), 0 2px 0 rgba(0, 0, 0, .4); }

/* consistent inner padding; extra on the left to clear the 4px spine */
.fc-title, .fc-body, .fc-perks, .fc-foot { padding-left: 13px; padding-right: 11px; }

/* ── TITLE (full width) ─────────────────────────────────────────────────── */
.fc-title { padding-top: 11px; }
.fc-eyebrow { font-size: 11.5px; letter-spacing: 2.2px; color: var(--fc-rc); opacity: .9; text-transform: uppercase; }
.fc-name {
  font-size: clamp(19px, 4.8vw, 23px); letter-spacing: 2px; font-weight: 700; line-height: 1.08;
  color: var(--fc-rc); margin: 3px 0 0; text-wrap: balance;
  overflow: hidden; text-overflow: ellipsis;
}
.fc.fc-glow .fc-name { text-shadow: 0 0 12px color-mix(in srgb, var(--fc-rc) 55%, transparent); }
.fc-rule { height: 1px; margin-top: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--fc-rc) 45%, transparent), transparent); }

/* ── ICON | ELEMENT+VERB STACK | STATS (row) ────────────────────────────── */
.fc-body { display: grid; grid-template-columns: clamp(63px, 16vw, 80px) auto 1fr; gap: 9px; align-items: stretch; padding-top: 9px; }

.fc-icon {
  position: relative; width: 100%; aspect-ratio: 1; align-self: start;
  border: 2px solid var(--fc-rc); border-radius: 8px;
  background: radial-gradient(115% 100% at 32% 22%, color-mix(in srgb, var(--fc-rc) 30%, transparent), rgba(5, 9, 22, .95) 78%);
  box-shadow: inset 0 0 0 4px rgba(6, 10, 26, .9), inset 0 0 26px rgba(0, 0, 0, .55);
  display: grid; place-items: center; overflow: hidden;
}
.fc-icon > svg { max-width: 82%; max-height: 72%; width: auto; height: auto; filter: drop-shadow(1.5px 2px 0 rgba(0, 0, 0, .55)); }
/* comic corner brackets */
.fc-icon .fc-corner { position: absolute; width: 11px; height: 11px; border: 2px solid var(--fc-rc); opacity: .9; }
.fc-icon .fc-corner:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.fc-icon .fc-corner:nth-child(2) { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.fc-icon .fc-corner:nth-child(3) { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.fc-icon .fc-corner:nth-child(4) { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

/* element + verb, stacked vertically, centered against the stats height */
.fc-glyphs { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 2px 2px; }
.fc-glyph { display: flex; flex-direction: column; align-items: center; gap: 3px; --fc-gc: var(--fc-muted); }
.fc-glyph > svg { width: 22px; height: 22px; filter: drop-shadow(1px 1.5px 0 rgba(0, 0, 0, .45)); }
.fc-glyph-role { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--fc-muted); }
.fc-glyph-val { font-size: 11px; letter-spacing: .3px; font-weight: 700; text-transform: uppercase; color: var(--fc-gc); line-height: 1; text-align: center; }

/* stats — label · bar · value (bars for numeric weapon stats; chips otherwise) */
.fc-stats { display: flex; flex-direction: column; gap: 6px; padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
/* key column stays wide enough for the longest label (RADIUS) at the bumped
 * font — density comes from height, not this horizontal track. */
.fc-stat { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 8px; }
.fc-stat-k { font-size: 12.5px; letter-spacing: 1.3px; color: var(--amber, #ffb000); opacity: .85; white-space: nowrap; }
.fc-bar { height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.fc-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--fc-rc) 55%, #2a3350), var(--fc-rc)); }
.fc-stat-v { font-size: 15.5px; font-weight: 700; color: var(--green, #33ff66); font-variant-numeric: tabular-nums; letter-spacing: .5px; white-space: nowrap; }
.fc-stat.fc-stat-hi .fc-stat-v { color: var(--fc-rc); font-size: 17.5px; }
.fc-stat.fc-stat-chip { grid-template-columns: 56px auto; }
.fc-stat.fc-stat-chip .fc-stat-v { color: var(--fc-cream); font-size: 13.5px; }

/* ── PERKS (full width) ─────────────────────────────────────────────────── */
.fc-perks { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.fc-perk {
  --fc-tc: var(--amber, #ffb000);
  border: 1px solid color-mix(in srgb, var(--fc-tc) 40%, transparent); border-left-width: 3px;
  background: color-mix(in srgb, var(--fc-tc) 6%, transparent);
  border-radius: 5px; padding: 7px 9px; display: flex; flex-direction: column; gap: 3px;
}
.fc-perk-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fc-tc); opacity: .9; }
.fc-perk-tag > svg { width: 12px; height: 12px; }
.fc-perk-name { font-size: 16px; letter-spacing: 1.1px; font-weight: 700; color: var(--fc-tc); }
.fc-perk-desc { font-size: 14.5px; line-height: 1.5; color: #cbd2ec; margin: 0; }
.fc-perk-none { --fc-tc: var(--fc-muted); font-style: italic; }
.fc-perk-none .fc-perk-name { letter-spacing: 1.5px; }

/* WOVEN — 3 selectable options per column (read-only display; loot.js selects) */
.fc-woven-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 3px; }
.fc-woven-opt { padding: 4px 5px; border: 1px solid rgba(255, 215, 106, .22); border-radius: 4px; opacity: .6; }
.fc-woven-opt .fc-perk-name { font-size: 13px; }
.fc-woven-opt .fc-perk-desc { font-size: 12px; }
.fc-woven-opt-sel { opacity: 1; border-color: #fff2c0; background: rgba(255, 215, 106, .1); }

/* catalyst — a 2nd perk block, authored exotics only */
.fc-perk-catalyst-locked { --fc-tc: var(--fc-muted); }
.fc-perk-catalyst-unlocked { --fc-tc: var(--green, #33ff66); }

/* ── FOOTER (full width) ────────────────────────────────────────────────── */
/* Interactive targets keep ≥44px touch sizing (KBM/touch parity); only the
 * surrounding padding tightens with the density pass. */
.fc-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 10px; padding-bottom: 11px; }
.fc-mini { width: 44px; min-height: 40px; border: 1px solid rgba(51, 255, 102, .3); background: rgba(51, 255, 102, .04); color: var(--amber, #ffb000); font-size: 17px; border-radius: 5px; cursor: pointer; font-family: inherit; }
.fc-equip { flex: 1; min-width: 120px; border: 1px solid var(--green, #33ff66); background: rgba(51, 255, 102, .1); color: var(--green, #33ff66); font-size: 15px; letter-spacing: 3px; font-weight: 700; padding: 12px; border-radius: 5px; cursor: pointer; font-family: inherit; }
.fc-equip:hover { background: rgba(51, 255, 102, .18); }
.fc-equipped { flex: 1; min-width: 120px; text-align: center; color: var(--green, #33ff66); font-size: 13px; letter-spacing: 2px; padding: 12px; border: 1px solid rgba(51, 255, 102, .35); border-radius: 5px; }
/* drop-mode badges reuse the footer */
.fc-badge { font-size: 10.5px; letter-spacing: 1.5px; padding: 4px 7px; font-weight: 700; border-radius: 3px; }
.fc-badge-new { color: var(--green, #33ff66); border: 1px solid var(--green, #33ff66); }
.fc-badge-dupe { color: var(--amber, #ffb000); border: 1px solid var(--amber, #ffb000); opacity: .85; }
.fc-badge-pity { color: #ff7733; border: 1px solid #ff7733; }

/* dupe treatment */
.fc.fc-dupe { opacity: .85; }
.fc.fc-dupe .fc-name { text-decoration: line-through; opacity: .5; }

/* ── Narrow viewports ───────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .fc-body { grid-template-columns: clamp(58px, 17vw, 72px) auto 1fr; gap: 7px; }
  .fc-stat { grid-template-columns: 50px 1fr auto; gap: 6px; }
  .fc-stat.fc-stat-chip { grid-template-columns: 50px auto; }
  .fc-stats { padding-left: 7px; }
  .fc-glyph > svg { width: 20px; height: 20px; }
}

/* ── COLLAPSED CARD (opts.collapsed — B1, menus-refit-spec.md) ──────────────
 * Names-first browsing density: title row + one horizontal band (icon | glyph
 * stack | compact "states" chips | perk NAME-only chips). No stats, no perk
 * prose, no catalyst block. `.fc`/`.fc-glow`/`.fc-dupe` still apply (rarity
 * spine + tint), this block only adds the compact row-2 band. Icon keeps the
 * NORMAL card's clamp size (`clamp(63px,16vw,80px)`, same as `.fc-body`'s
 * column) — host surfaces (e.g. EQUIPPED's `.lo-eq-compact`) override the size
 * themselves; don't shrink it here.
 */
.fc-collapsed .fc-title { padding-top: 10px; padding-bottom: 2px; }
.fc-collapsed .fc-name { font-size: clamp(16px, 3.8vw, 19px); }

.fc-collapsed-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding: 6px 11px 10px 13px;
}
.fc-collapsed .fc-icon { width: clamp(63px, 16vw, 80px); flex: 0 0 auto; }
.fc-collapsed .fc-glyphs { flex: 0 0 auto; gap: 7px; }

/* states cluster — eyebrow content demoted to small chips, plus NEW / any
 * host-supplied stateBadges (opts.stateBadges). */
.fc-states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 1 auto; }
.fc-state-chip {
  font-size: 10px; letter-spacing: 1.3px; font-weight: 600; text-transform: uppercase;
  color: var(--fc-muted); white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 3px;
  background: rgba(255, 255, 255, .05); padding: 3px 6px;
}
.fc-state-chip-new { color: var(--green, #33ff66); border-color: color-mix(in srgb, var(--green, #33ff66) 55%, transparent); }
.fc-state-chip-badge { color: var(--fc-rc); border-color: color-mix(in srgb, var(--fc-rc) 55%, transparent); }

/* perk NAME-only chips — the leaf detail (full desc) is the perk-tip's job */
.fc-perk-names { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; }
.fc-perk-name-chip {
  --fc-tc: var(--amber, #ffb000);
  font-size: 12.5px; letter-spacing: .8px; font-weight: 700; color: var(--fc-tc);
  border: 1px solid color-mix(in srgb, var(--fc-tc) 45%, transparent); border-left-width: 2px;
  border-radius: 4px; background: color-mix(in srgb, var(--fc-tc) 8%, transparent);
  padding: 4px 8px; white-space: nowrap;
}
.fc-perk-name-chip-none { --fc-tc: var(--fc-muted); font-style: italic; }

@media (max-width: 430px) {
  .fc-collapsed .fc-icon { width: clamp(50px, 16vw, 66px); }
  .fc-collapsed-band { gap: 7px; padding: 6px 9px 8px 11px; }
}

/* ── PERK TIP (opts.collapsed's popover — B2, menus-refit-spec.md) ──────────
 * Singleton fixed-position popover (ui/shared/perk-tip.js). Shows the full
 * name+desc a collapsed card's perk-name chip omits. z-index 33: above the
 * panel, below the item-sheet modal (34, item-sheet.css). Chamfered corners
 * mirror the fx.css notched-panel vocabulary without importing it (this
 * module stays dependency-free); dark panel + per-entry tint mirrors `.fc-perk`
 * blocks (tag row / bold name / regular desc).
 */
.perk-tip {
  position: fixed; z-index: 33; display: none; flex-direction: column; gap: 10px;
  width: min(280px, 78vw); max-height: 70vh; overflow-y: auto;
  padding: 12px 14px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(14, 20, 38, .97), rgba(8, 12, 26, .98));
  border: 1px solid rgba(255, 176, 0, .35);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .3);
  pointer-events: none; /* purely informational — never eats the hover/click it rides on */
}
.perk-tip-title {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber, #ffb000);
  opacity: .85; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.perk-tip-entry {
  --pt-tc: var(--amber, #ffb000);
  display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--pt-tc); padding-left: 10px;
}
.perk-tip-entry + .perk-tip-entry { padding-top: 2px; }
.perk-tip-tag { font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pt-tc); opacity: .9; }
.perk-tip-name { font-size: 13.5px; letter-spacing: .8px; font-weight: 700; color: var(--pt-tc); }
.perk-tip-desc { font-size: 12.5px; line-height: 1.5; color: #cbd2ec; margin: 0; }