/* ============================================
 * 图标系统样式
 * CSS Mask方案：background-color控制颜色，mask-image控制形状
 * ============================================ */

/* ---- 图标基础（CSS Mask） ---- */
.gi {
  display: inline-block;
  flex-shrink: 0;
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask: var(--gi-src) no-repeat center / contain;
  mask: var(--gi-src) no-repeat center / contain;
}

/* ---- 图标尺寸 ---- */
.gi-xs { width: 16px; height: 16px; }
.gi-sm { width: 20px; height: 20px; }
.gi-md { width: 24px; height: 24px; }
.gi-lg { width: 32px; height: 32px; }
.gi-xl { width: 48px; height: 48px; }

/* ---- 图标颜色 ---- */
.gi-dim    { color: var(--text-dim); }
.gi-muted  { color: var(--text-secondary); }
.gi-light  { color: var(--text-primary); }
.gi-accent { color: var(--primary); }

/* ---- 品质色图标 ---- */
.gi-q-common    { color: var(--q-common); }
.gi-q-magic     { color: var(--q-magic); }
.gi-q-rare      { color: var(--q-rare); }
.gi-q-legendary { color: var(--q-legendary); }
.gi-q-unique    { color: var(--q-unique); }
.gi-q-set       { color: var(--q-set); }

/* ---- 装备部位图标 ---- */
.gi-equip-wuqi     { --gi-src: url("../assets/svg/equip/wuqi.svg"); }
.gi-equip-toukui   { --gi-src: url("../assets/svg/equip/toukui.svg"); }
.gi-equip-yifu     { --gi-src: url("../assets/svg/equip/yifu.svg"); }
.gi-equip-xianglian { --gi-src: url("../assets/svg/equip/xianglian.svg"); }
.gi-equip-hufu     { --gi-src: url("../assets/svg/equip/hufu.svg"); }
.gi-equip-shoutao  { --gi-src: url("../assets/svg/equip/shoutao.svg"); }
.gi-equip-yaodai   { --gi-src: url("../assets/svg/equip/yaodai.svg"); }
.gi-equip-xiezi    { --gi-src: url("../assets/svg/equip/xiezi.svg"); }
.gi-equip-jiezhi-l { --gi-src: url("../assets/svg/equip/jiezhi-l.svg"); }
.gi-equip-jiezhi-r { --gi-src: url("../assets/svg/equip/jiezhi-r.svg"); }

/* ---- 功能图标 ---- */
.gi-func-zhandou     { --gi-src: url("../assets/svg/func/zhandou.svg"); }
.gi-func-beibao      { --gi-src: url("../assets/svg/func/beibao.svg"); }
.gi-func-jingjichang { --gi-src: url("../assets/svg/func/jingjichang.svg"); }
.gi-func-shangdian   { --gi-src: url("../assets/svg/func/shangdian.svg"); }
.gi-func-renwu       { --gi-src: url("../assets/svg/func/renwu.svg"); }
.gi-func-gonghui     { --gi-src: url("../assets/svg/func/gonghui.svg"); }
.gi-func-shezhi      { --gi-src: url("../assets/svg/func/shezhi.svg"); }
.gi-func-youjian     { --gi-src: url("../assets/svg/func/youjian.svg"); }
.gi-func-haoyou      { --gi-src: url("../assets/svg/func/haoyou.svg"); }
.gi-func-paihang     { --gi-src: url("../assets/svg/func/paihang.svg"); }

/* ---- 技能图标 ---- */
.gi-skill-gongji { --gi-src: url("../assets/svg/skill/gongji.svg"); }
.gi-skill-fangyu { --gi-src: url("../assets/svg/skill/fangyu.svg"); }
.gi-skill-zhiliao { --gi-src: url("../assets/svg/skill/zhiliao.svg"); }
.gi-skill-shanbi { --gi-src: url("../assets/svg/skill/shanbi.svg"); }
.gi-skill-dazhao { --gi-src: url("../assets/svg/skill/dazhao.svg"); }

/* ---- 物品图标 ---- */
.gi-item-yaoshui { --gi-src: url("../assets/svg/item/yaoshui.svg"); }
.gi-item-juanzhou { --gi-src: url("../assets/svg/item/juanzhou.svg"); }
.gi-item-baoshi  { --gi-src: url("../assets/svg/item/baoshi.svg"); }
.gi-item-cailiao { --gi-src: url("../assets/svg/item/cailiao.svg"); }
.gi-item-baoxiang { --gi-src: url("../assets/svg/item/baoxiang.svg"); }

/* ---- 头像图标 ---- */
.gi-avatar-default { --gi-src: url("../assets/svg/avatar/default.svg"); }

/* ---- 货币图标（用简单形状） ---- */
.gi-currency-gold { --gi-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.gi-currency-gem  { --gi-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7h7l-5.5 4L18 21l-6-4-6 4 1.5-7.5L2 9h7z'/%3E%3C/svg%3E"); }

/* ---- 图标展示网格 ---- */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}

.icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  background: var(--bg-dark);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.icon-cell:hover {
  border-color: var(--border-primary);
}

.icon-cell-icon {
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  color: var(--text-primary);
}

.icon-cell-name {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.3;
}

/* ---- 品质色图标展示 ---- */
.icon-quality-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.icon-quality-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.icon-quality-icon {
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
}

.icon-quality-label {
  font-size: 10px;
  color: var(--text-dim);
}