/* =========================================================
 * 统一图标样式（配合 icons.js / inline SVG 使用）
 *   - 所有项目内 inline SVG 图标都应带 .icon 基础类 + 一个尺寸类
 *   - 颜色通过 currentColor 继承父级 color，因此放进按钮/链接里会自动跟随主题
 *
 * 回退：删本文件 + 移除 park.html 中的 <link>。
 * ========================================================= */

.icon {
  /* 基础几何 */
  display: inline-block;
  vertical-align: -0.2em;      /* 与中文文字基线对齐（中文偏低，-0.2em 视觉居中） */
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  /* 默认色：跟随当前 color */
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 过渡：颜色随主题平滑切换 */
  transition: color .15s ease, opacity .15s ease;
}

/* ========== 尺寸（绝对像素，不跟 font-size 缩放） ========== */
.icon-sm  { width: 14px; height: 14px; }
.icon-md  { width: 18px; height: 18px; }   /* 默认，按钮/tab/列表前缀 */
.icon-lg  { width: 22px; height: 22px; }   /* 中等强调（小卡片图标） */
.icon-xl  { width: 32px; height: 32px; }   /* 大卡片图标（模式卡 / feature 卡） */
.icon-2xl { width: 44px; height: 44px; }   /* 超大装饰（hero / 引导区） */
.icon-3xl { width: 64px; height: 64px; }   /* 仅极少数空状态插画使用 */

/* ========== 跟随 em 缩放（特殊场景） ========== */
.icon-em { width: 1em; height: 1em; vertical-align: -0.18em; }

/* ========== 颜色辅助类（语义状态） ========== */
.icon-muted   { color: var(--text-dim, #888); }
.icon-primary { color: var(--primary, #2d8a4e); }
.icon-gold    { color: var(--gold, #c79a3d); }
.icon-danger  { color: var(--danger, #d04444); }
.icon-warning { color: var(--warning, #d99027); }
.icon-success { color: var(--success, #1a9e1a); }

/* ========== 与 emoji 视觉对齐：在按钮里多给 4px 右边距 ========== */
.btn .icon,
.park-btn .icon,
.park-tab .icon {
  margin-right: 6px;
}
/* 但如果是"独占按钮"（aria-label 表示纯图标按钮），不要右边距 */
.btn[aria-label] > .icon:only-child,
.park-btn[aria-label] > .icon:only-child {
  margin-right: 0;
}

/* ========== 高亮态：父级 hover/active 时图标轻微变粗 ========== */
.park-tab:hover .icon,
.park-tab.active .icon {
  stroke-width: 2.2;
}

/* ========== 大模式卡 / feature 卡里的图标容器 ==========
 * 这些容器原本以 emoji 充当图标，仅给了 font-size。SVG 用 1em x 1em 跟随父级 font-size，
 * 视觉尺寸与原 emoji 完全一致（park-feature-icon=28px / park-mode-icon=38px / 
 * park-mode-big-icon=48px / park-dna-hero-icon=48px / park-tier-icon=42px / park-fit-icon=26px）。
 * 注意：在 HTML 里这些容器内的 <svg> 只加 .icon，不加 .icon-md/.icon-xl 之类的固定尺寸类。
 */
.park-mode-big-icon  > .icon,
.park-mode-icon       > .icon,
.park-feature-icon    > .icon,
.park-dna-hero-icon   > .icon,
.park-fit-icon        > .icon,
.park-tier-icon       > .icon,
.park-tier-strip-icon > .icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  /* 给 stroke 稍微加粗，大尺寸下视觉更扎实 */
  stroke-width: 1.8;
}

/* ========== 圆形 icon 容器内的 SVG 尺寸（第二批：功能型图标） ==========
 * 原本以字符 (✓ ✗ ✕) 充当 icon 的圆形容器，本批改为 SVG 后需要让 SVG 在父容器里正确居中：
 *   - .park-explain-icon     (26x26 圆，font-size:14px)：解析头的 ok/no 圆形 icon
 *   - .park-q-opt .opt-letter (36x36 圆，font-size:14px)：判断题选项里的"对/错"字母位置
 *   - .park-game-head-icobtn (32x32 圆角方)：游戏顶部"退出/关闭"按钮
 *   - .park-rush-buzz-btn    (大按钮，font-size:22px)：抢答主按钮
 * 这些容器都是 inline-flex + align-items:center 居中字符的，SVG 放进去会跟着居中。
 * SVG 颜色继承 currentColor，所以选项 .correct/.wrong 切换底色时 SVG 也自动变色。
 */
.park-explain-icon > .icon,
.park-q-opt .opt-letter > .icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  stroke-width: 2.4;   /* 圆形小尺寸里加粗一点，避免视觉太细 */
}
.park-game-head-icobtn > .icon {
  width: 18px;
  height: 18px;
  margin: 0;           /* 覆盖通用 .btn .icon 的 margin-right:6px（虽然这里不在 .btn 里，但保险） */
}
.park-rush-buzz-btn > .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  margin-right: 8px;
  stroke-width: 2.2;   /* 大按钮里加粗一点更醒目 */
}

/* ========== 加载/转圈动画 ==========
 * 用于 loader-2 等加载指示图标。配合 _icon('loader-2',{class:'icon-spin'}) 使用。
 * 1.2s 转一圈（不要太快，避免眩晕；用户视觉感受最舒适的区间是 1-1.5s）。
 */
.icon-spin {
  animation: icon-spin 1.2s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}