/* ============================================================
   首页卡片 · 类型图标（彩色描边徽章 · 5 列 · 竖向拉长）
   ------------------------------------------------------------
   要点：
   1. 卡片保持 5 列（不横向拉宽）
   2. 图标比原来大：20px 裸图标 → 26px 徽章里 19px 图标
   3. 图标允许换到第二行，卡片因此上下变高（不再被 overflow 裁掉）
   4. 按类型分色，配套 data-g 属性由 index.php / api.php 输出
   5. 去掉每个图标一个 drop-shadow，减轻栅格化开销
   ============================================================ */

/* ---------- 1. 图标行：允许换行 ---------- */
.zhuige-list-text .zg-genre-icons {
  gap: 6px;
  display: flex;
  flex-wrap: wrap;          /* 原来 nowrap + overflow:hidden 会裁掉半截 */
  overflow: visible;
  align-items: center;
}

/* ---------- 2. 图标徽章 ---------- */
.zhuige-list-container .zg-genre-icons .gi {
  --gi: #e9c46a;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gi);
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--gi) 8%, transparent), transparent 55%),
    linear-gradient(to bottom, #323d4d, #161d26);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .35);
  filter: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* 19px 图标（原来裸图标是 20px，现在是「26px 的框 + 19px 的图」） */
.zhuige-list-container .zg-genre-icons .gi > svg {
  width: 19px;
  height: 19px;
}

/* 悬停：抬起 + 描边发光 */
.zhuige-list-container .zg-genre-icons .gi:hover {
  transform: translateY(-2px) scale(1.05);
  /* 必须显式写回 color：theme 里 .gi:hover{color:#ffd98a} 会把类型色冲掉 */
  color: var(--gi);
  border-color: color-mix(in srgb, var(--gi) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 10px color-mix(in srgb, var(--gi) 35%, transparent);
}

/* ---------- 3. 最多两行（8 个），再多的不显示，避免卡片过高 ---------- */
.zhuige-list-container .zg-genre-icons .gi:nth-child(n+9) { display: none; }

/* ---------- 4. 1201~1400px 区间卡片最窄（约 133px），徽章缩一号 ---------- */
@media (min-width: 1201px) and (max-width: 1400px) {
  .zhuige-list-container .zg-genre-icons .gi {
    width: 22px; height: 22px; min-width: 22px; border-radius: 6px;
  }
  .zhuige-list-container .zg-genre-icons .gi > svg {
    width: 16px; height: 16px;
  }
}

/* ---------- 5. 按图标名分配色相（语义分组） ---------- */

/* 战斗 / 血腥 / 格斗 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="sword"], [data-g="slasher"], [data-g="combat"], [data-g="impact"],
  [data-g="blooddrop"], [data-g="skull"], [data-g="glove"], [data-g="slash"]
) { --gi: #ff8a7a; }

/* 竞速 / 载具 / 海空 / 机甲 / 体育 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="flag"], [data-g="jet"], [data-g="anchor"], [data-g="robot"],
  [data-g="ball"], [data-g="rocket"]
) { --gi: #ffb066; }

/* 射击 / 博弈 / 抽卡 / 塔防 / 篝火 / 金币 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="crosshair"], [data-g="key"], [data-g="dice"], [data-g="cards"],
  [data-g="castle"], [data-g="tactical"], [data-g="bonfire"], [data-g="coins"]
) { --gi: #ffcf6b; }

/* 抽象 / 极简 / 物理 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="physics"], [data-g="minimal"], [data-g="linear"], [data-g="flat"], [data-g="grid"]
) { --gi: #d6e86b; }

/* 恐怖 / 生存 / 潜行 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="ghost"], [data-g="tent"], [data-g="apocalypse"], [data-g="footprint"],
  [data-g="respawn"], [data-g="dungeon"]
) { --gi: #8ff0a0; }

/* 世界 / 探索 / 建造 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="map"], [data-g="globe"], [data-g="cube"], [data-g="house"],
  [data-g="foundation"], [data-g="crafting"], [data-g="lock"], [data-g="pirate"]
) { --gi: #6fe6cc; }

/* 视角 / 操作维度 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="stairs"], [data-g="swipe"], [data-g="stereo"], [data-g="layer"],
  [data-g="topdown"], [data-g="eye"], [data-g="person"], [data-g="future"]
) { --gi: #6fd0f5; }

/* 团队 / 对战 / 策略角色 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="shield"], [data-g="pawn"], [data-g="users"], [data-g="solo"],
  [data-g="coop"], [data-g="onlinecoop"], [data-g="mmo"], [data-g="pvp"],
  [data-g="custom"], [data-g="gamepad"]
) { --gi: #a8bdff; }

/* 叙事 / 世界观 / 魔法 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="book"], [data-g="dialogue"], [data-g="branch"], [data-g="left-right"],
  [data-g="magic"], [data-g="star"], [data-g="crescent"], [data-g="scroll"],
  [data-g="medieval"], [data-g="space"], [data-g="cinematic"], [data-g="emotion"]
) { --gi: #c09bff; }

/* 风格 / 美术 / 音乐 / 治愈 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="bulb"], [data-g="camera"], [data-g="sparkle"], [data-g="music"],
  [data-g="venus"], [data-g="smile"], [data-g="cute"], [data-g="cartoon"],
  [data-g="handdrawn"], [data-g="stylized"], [data-g="colorful"], [data-g="retro"]
) { --gi: #ffa8d2; }

/* 情感 / 影视化 / 赛博 */
.zhuige-list-container .zg-genre-icons .gi:is(
  [data-g="dating"], [data-g="fmv"], [data-g="comedy"], [data-g="funny"],
  [data-g="family"], [data-g="relax"], [data-g="healing"], [data-g="atmospheric"],
  [data-g="cyberpunk"], [data-g="steampunk"], [data-g="earlyaccess"], [data-g="love"]
) { --gi: #ff85b0; }

/* ============================================================
   6. 单枚图标悬停：按类型播放对应动作
   ------------------------------------------------------------
   「默认开启，只在明确检测到 reduce 时才关闭」——这是 fail-open 写法：
   老浏览器不认识 prefers-reduced-motion 特性，如果反过来写
   @media (prefers-reduced-motion: no-preference) ，那些浏览器会把整块
   规则判为不匹配而全部跳过，动画就没了。
   真正的关闭规则在文件末尾。
   ============================================================ */

  /* 默认：轻弹一下（没有专门动作的类型走这条） */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover {
    animation: lyw-act-pop .42s cubic-bezier(.3, .7, .4, 1);
    animation-delay: 0s;
  }

  /* 挥砍：动作 / 砍杀 / 格斗 / 血腥 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="sword"], [data-g="slasher"], [data-g="combat"], [data-g="impact"],
    [data-g="blooddrop"], [data-g="glove"], [data-g="slash"], [data-g="skull"]
  ) { animation: lyw-act-slash .5s ease-in-out; animation-delay: 0s; }

  /* 瞄准收缩：射击 / 第一人称 / 第三人称 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="crosshair"], [data-g="eye"], [data-g="person"]
  ) { animation: lyw-act-aim .46s ease-in-out; animation-delay: 0s; }

  /* 转一圈：开放世界 / 沙盒 / 视角 / 抽象 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="globe"], [data-g="cube"], [data-g="layer"], [data-g="stereo"],
    [data-g="topdown"], [data-g="grid"], [data-g="flat"], [data-g="minimal"],
    [data-g="physics"], [data-g="linear"]
  ) { animation: lyw-act-spin .6s cubic-bezier(.4, 0, .2, 1); animation-delay: 0s; }

  /* 漂浮摇晃：恐怖 / 生存 / 潜行 / 探索 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="ghost"], [data-g="tent"], [data-g="apocalypse"], [data-g="footprint"],
    [data-g="respawn"], [data-g="dungeon"], [data-g="map"], [data-g="pirate"]
  ) { animation: lyw-act-float .6s ease-in-out; animation-delay: 0s; }

  /* 左右冲刺：竞速 / 载具 / 海空 / 机甲 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="flag"], [data-g="jet"], [data-g="rocket"], [data-g="anchor"],
    [data-g="robot"], [data-g="ball"]
  ) { animation: lyw-act-drive .5s ease-in-out; animation-delay: 0s; }

  /* 弹起：团队 / 对战 / 建造 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="shield"], [data-g="pawn"], [data-g="users"], [data-g="solo"],
    [data-g="coop"], [data-g="onlinecoop"], [data-g="mmo"], [data-g="pvp"],
    [data-g="custom"], [data-g="gamepad"], [data-g="castle"], [data-g="tactical"],
    [data-g="house"], [data-g="foundation"], [data-g="crafting"]
  ) { animation: lyw-act-bounce .5s cubic-bezier(.3, .7, .4, 1); animation-delay: 0s; }

  /* 绽放放大：魔法 / 星象 / 叙事 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="magic"], [data-g="star"], [data-g="crescent"], [data-g="sparkle"],
    [data-g="book"], [data-g="dialogue"], [data-g="scroll"], [data-g="branch"],
    [data-g="left-right"], [data-g="space"], [data-g="medieval"]
  ) { animation: lyw-act-bloom .52s ease-out; animation-delay: 0s; }

  /* 闪烁：美术 / 音乐 / 风格 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="bulb"], [data-g="camera"], [data-g="music"], [data-g="cute"],
    [data-g="colorful"], [data-g="cartoon"], [data-g="retro"], [data-g="stylized"],
    [data-g="handdrawn"]
  ) { animation: lyw-act-flash .55s ease-in-out; animation-delay: 0s; }

  /* 心跳：情感 / 治愈 / 影视化 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:hover:is(
    [data-g="dating"], [data-g="love"], [data-g="family"], [data-g="smile"],
    [data-g="comedy"], [data-g="funny"], [data-g="healing"], [data-g="relax"],
    [data-g="atmospheric"], [data-g="cinematic"], [data-g="emotion"],
    [data-g="fmv"], [data-g="earlyaccess"], [data-g="cyberpunk"], [data-g="steampunk"]
  ) { animation: lyw-act-beat .62s ease-in-out; animation-delay: 0s; }

/* ---------- 仅当用户明确要求「减少动态效果」时才关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
  .zhuige-list-container .zg-genre-icons .gi,
  .zhuige-list-container .zg-genre-icons .gi:hover {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 动作关键帧 ---------- */
@keyframes lyw-act-pop {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-3px) scale(1.12); }
}
@keyframes lyw-act-slash {
  0%, 100% { transform: rotate(0) scale(1); }
  25%      { transform: rotate(-22deg) scale(1.12); }
  55%      { transform: rotate(14deg) scale(1.12); }
  80%      { transform: rotate(-6deg) scale(1); }
}
@keyframes lyw-act-aim {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(.82); }
  70%      { transform: scale(1.14); }
}
@keyframes lyw-act-spin {
  0%   { transform: rotate(0) scale(1); }
  20%  { transform: rotate(-16deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes lyw-act-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-5px) rotate(-7deg); }
  60%      { transform: translateY(-2px) rotate(7deg); }
  85%      { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes lyw-act-drive {
  0%, 100% { transform: translateX(0) rotate(0); }
  30%      { transform: translateX(-5px) rotate(-6deg); }
  65%      { transform: translateX(5px) rotate(5deg); }
}
@keyframes lyw-act-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-7px) scale(1.06); }
  65%      { transform: translateY(1px) scale(.98); }
}
@keyframes lyw-act-bloom {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.22); }
  70%      { transform: scale(.96); }
}
@keyframes lyw-act-flash {
  0%, 100% { opacity: 1; transform: scale(1); }
  20%      { opacity: .45; transform: scale(1); }
  45%      { opacity: 1; transform: scale(1.12); }
  65%      { opacity: .6; transform: scale(1.06); }
}
@keyframes lyw-act-beat {
  0%, 100% { transform: scale(1); }
  18%      { transform: scale(1.16); }
  36%      { transform: scale(1); }
  54%      { transform: scale(1.1); }
}