/* Shared card visuals for Teyvat Toolkit tools that load shared/data/ at
 * runtime (currently: Tier Maker). Seeded verbatim from Party Maker's own
 * card-related rules (tools/party-maker/party-maker.html ~lines 723–826:
 * .char, .avatar, .avatar-img, .avatar-initials, .el-badge, .el-ico, .c-name)
 * so a card rendered by shared/js/card.js looks identical to Party Maker's
 * roster card. Party Maker keeps its own embedded copy of these rules
 * unchanged — this file is NEW, not an extraction (see README "Artifact vs.
 * hosted"). Skipped on purpose: party-maker's `.slot .avatar …` badge-scaling
 * overrides (team-only, sized for the larger team-slot avatar) and
 * `.char.in-party` (team-only "already placed" dimming — no equivalent concept
 * in Tier Maker's roster).
 *
 * Every color read here uses `var(--el-color, var(--rarity-color))`: card.js
 * sets exactly one of the two custom properties per card. The rarity-gradient
 * branch, reserved since Fase 1, is now reachable as of Fase 2 for weapon
 * items (no element); artifact items (Fase 3) will reach it the same way.
 */

.char {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--el-color, var(--rarity-color)) 30%, var(--hairline));
  border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--el-color, var(--rarity-color)) 24%, var(--surface)) 0%, var(--surface) 82%);
  padding: 0.7rem 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.char:hover {
  transform: translateY(-3px);
  border-color: var(--el-color, var(--rarity-color));
  box-shadow: 0 14px 26px -18px color-mix(in srgb, var(--el-color, var(--rarity-color)) 60%, transparent);
}
.char:active { cursor: grabbing; }
.char.dragging { opacity: 0.4; }
/* Picked via tap-to-place: same highlight idiom as a selected drop-zone cell. */
.char.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink), 0 12px 24px -16px color-mix(in srgb, var(--ink) 60%, transparent);
  transform: translateY(-3px);
}
.c-name {
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  min-height: 2.3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-items: center;
}

/* ---------- Avatar ---------- */
.avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 35% 22%, color-mix(in srgb, var(--el-color, var(--rarity-color)) 55%, var(--surface)), color-mix(in srgb, var(--el-color, var(--rarity-color)) 82%, #000) 125%);
  border: 2px solid color-mix(in srgb, var(--el-color, var(--rarity-color)) 82%, #000);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--el-color, var(--rarity-color)) 70%, transparent);
  flex-shrink: 0;
}
.avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}
.avatar-initials {
  color: #fff;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.avatar .el-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface);
  display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.avatar .el-badge svg { width: 11px; height: 11px; color: var(--el-color, var(--rarity-color)); }
.avatar .el-badge .el-ico { width: 12px; height: 12px; }

/* Colored element icon via CSS mask */
.el-ico {
  display: block;
  background-color: var(--el-color, var(--rarity-color));
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

/* Plaint (untinted) weapon-type icon (Fase 2) — a plain <img>, never masked/
 * tinted like .el-ico, since the source icons are already colorless. Matches
 * .avatar .el-badge .el-ico's 12px footprint so the badge is the same size
 * for both card types. */
.avatar .el-badge .badge-img { width: 12px; height: 12px; object-fit: contain; display: block; }

/* Level badge (constellation/refinement, opt-in via createCard's
 * opts.showLevel — see card.js). Mirrors party-maker.html's own .cons-badge
 * (~line 642): a small pill in the avatar's bottom-left corner, mirroring the
 * element badge at bottom-right, --surface fill with --ink text. Same idiom for
 * both C{n} (character) and R{n} (weapon). */
.avatar .cons-badge {
  position: absolute;
  bottom: -3px; left: -3px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--surface);
  display: grid; place-items: center;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}