/* ============================================================================
   3D 立体功能图标（Fluent Emoji 3D）
   ----------------------------------------------------------------------------
   来源：https://github.com/microsoft/fluentui-emoji
         微软官方 emoji 图标库，**MIT 协议、可商用、无水印**
   本地：public/icons/3d/   89 张 256×256 透明 PNG（共约 2.8MB）

   🔴 为什么不写进 style.css：
      style.css 的**本地副本与生产本来就有既存差异**（生产 713c4257 / 本地 eeac7694）。
      动它会顺手把那份差异带上线 ⇒ 按项目铁律「改别人的样式别动 style.css，
      新建独立 css、排其后加载」。本文件必须在 style.css **之后**引入。

   回退：把 index.html 里的 `i3d` 类删掉、`<img>` 换回 `data-e` 里的 emoji 即可
        （原 emoji 全部留在 data-e 属性里，没有丢失）。
   ========================================================================== */

/* 容器：去掉原来的渐变底与底盘投影，让 3D 图标自己「立」在卡片上
   func-ico = 首页功能卡（54px）｜af-ico = 全部功能页（40px）｜tab-ico = 底部导航（44px） */
.func-ico.i3d,
.af-ico.i3d,
.tab-ico.i3d {
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* 图标本体：撑满容器
   ⚠️ 用的是 **裁剪版**（public/icons/3d-trim/）：去掉了 PNG 自带的透明边距，
      图标本体从 66%~88% 统一放大到 88% ⇒ 更大、立体细节看得清。

   `filter` 的作用（2026-10-03 老板两轮反馈后的最终取值）：
     第一轮「颜色不鲜艳、3D 效果不明显」⇒ 上过 saturate(1.6)+contrast(1.05)
     第二轮「反光、晃眼、看着不舒服」⇒ **压回柔和档**（就是下面这组）
     · saturate(1.18) —— 仍比原图(1.0)鲜一点，但不再刺眼
     · brightness(.97) —— 整体压一档亮度，削掉白色高光的「发光感」（晃眼的主因）
     · contrast(.97)   —— 轻微收对比，避免高光/暗部硬碰硬
     · drop-shadow     —— 影子减淡到 .10，图标四周不再有深色硬边
   ⚠️ 三档参照：1.18 柔和(当前) ｜ 1.30 中等 ｜ 1.6 过艳(导致晃眼，勿用)
   ⚠️ 都是 GPU 合成，188 个同时跑在手机上实测不卡；真要卡就先去掉 drop-shadow。 */
.func-ico.i3d > img,
.af-ico.i3d > img,
.tab-ico.i3d > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: saturate(1.18) brightness(.97) contrast(.97) drop-shadow(0 1px 1px rgba(70,45,20,.10));
  -webkit-user-drag: none;      /* 手机端长按别出现「拖图片」 */
  user-select: none;
}

/* 首页横排卡（.func-card.row）里的图标是 46px，同上规则已经覆盖；
   这里只补一条：别让 img 把行高撑变形 */
.func-card.row .func-ico.i3d { flex: 0 0 auto; }