/* 2026-11-12 全站手感(站长:「看看网站哪些地方可以优化,包括界面和动画」→「按照你的想法做」)
   体检量到:全站 :hover 规则约 380 条,:active 只有约 23 条,主要卡片 / 按钮一条按下效果都没有,手机上点下去没反应;
   几类卡片悬停会换底色,但过渡只写在边框上,底色是瞬间跳。
   这里只补「按下反馈」和「过渡补齐」,不改任何颜色、圆角、布局。回退:删 layouts/app.blade.php 里引用本文件的那一行。
   用独立的 scale 属性而不是 transform:不会顶掉元素自己已有的 transform(悬停上浮、居中定位等)。 */

/* ===== 1. 过渡补齐 =====
   只列过渡写得不全的几类卡片(普查结果:只写了 border-color / background / transform 之一)。
   已经是 transition: all 的(.bl-card .gh-c__main .cat-pill .se a .cx-jump a .pwa-tabbar a 头部按钮)不动;
   市场卡片 .um-card 整块不是一个点击区,也不动。 */
html .hp2-card,
html .hc-card,
html .gk-card,
html .sx-card,
html .cx-tile,
html .product-card-grid,
html .product-card-list,
html .ad-row {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease, scale .12s ease, filter .12s ease;
}
/* 卡券品牌块:自己没有过渡(悬停上浮写在里面的图上),只给缩放加一个 */
html .cd-tile { transition: scale .12s ease; }

/* 有了自己的按下反馈,就不要手机浏览器默认的那层灰色闪烁 */
html .hp2-card, html .hc-card, html .gk-card, html .bl-card, html .sx-card, html .gh-c__main, html .cx-tile, html .cd-tile,
html .product-card-grid, html .product-card-list, html .ad-row, html .cat-pill, html .se a, html .cx-jump a, html .cx-jump__all,
html .btn, html .pwa-tabbar a, html .header-v2__search-btn, html .header-v2__category-btn {
  -webkit-tap-highlight-color: transparent;
}

/* ===== 2. 按下反馈 ===== */
/* 小卡片:轻轻缩一点 */
html .hp2-card:active,
html .hc-card:active,
html .cd-tile:active,
html .gk-card:active,
html .bl-card:active,
html .sx-card:active,
html .gh-c__main:active,
html .cx-tile:active,
html .product-card-grid:active,
html .se a:active,
html .cat-pill:active,
html .cx-jump a:active,
html .cx-jump__all:active { scale: .98; }

/* 整行的列表:缩放会晃,改成略微压暗 */
html .product-card-list:active,
html .ad-row:active { filter: brightness(.97); }

/* 按钮、头部按钮、底栏。购买弹窗的 .pmc__btn 自己有按下效果,不叠加。
   按钮平时的过渡各处写法不一(有的带自己的动效),不去改;只在按下的这一刻把缩放加进过渡里。 */
html .btn:not(.pmc__btn):active {
  scale: .97;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, scale .1s ease;
}
html .header-v2__search-btn:active,
html .header-v2__category-btn:active { scale: .97; }
html .pwa-tabbar a:active { scale: .94; }

/* 卡片里面的按钮被按下时,只有按钮有反馈,外面的卡片 / 行不跟着动(不支持 :has 的旧浏览器跳过这一条,无害) */
html .product-card-list:has(.btn:active, button:active),
html .product-card-grid:has(.btn:active, button:active),
html .ad-row:has(.btn:active, button:active),
html .sx-card:has(button:active) { scale: 1; filter: none; }

/* ===== 3. 悬浮「+」收起 / 出现时滑一下 =====
   收起的时机在 layouts/app.blade.php 的脚本里(往下滑收起,往上滑 / 到顶 / 到底出现,给 .fab-group 加 scroll-hidden)。
   组件自己的样式只给 bottom 写了过渡,把布局里写的 transform / opacity 过渡盖掉了,收起和出现是瞬间跳的,这里补上。 */
html .fab-dock-wrapper .fab-group {
  transition: bottom .3s cubic-bezier(.4, 0, .2, 1), transform .22s ease, opacity .18s ease;
}

/* ===== 4. 游戏账号列表:页面刚打开、列表还没开始取的那一下,先占住一屏高度 =====
   以前这时列表高度是 0,下面的「常见问题」贴在上面,列表一出来就被推下去(Steam 页电脑端跳动 0.136)。
   只在「列表是空的、而且下面的提示没显示」时生效:筛选没结果 / 取不到时提示会显示,不留空白。 */
.sx-list .sx-grid:empty:has(+ .sxl-state[hidden]) { min-height: 100vh; }

/* ===== 5. 系统开了「减少动效」:不缩放、不滑动,页面切换也不做淡入淡出 ===== */
@media (prefers-reduced-motion: reduce) {
  html .hp2-card:active, html .hc-card:active, html .cd-tile:active, html .gk-card:active, html .bl-card:active, html .sx-card:active,
  html .gh-c__main:active, html .cx-tile:active, html .product-card-grid:active, html .se a:active, html .cat-pill:active,
  html .cx-jump a:active, html .cx-jump__all:active, html .btn:not(.pmc__btn):active, html .pwa-tabbar a:active,
  html .header-v2__search-btn:active, html .header-v2__category-btn:active { scale: 1; }
  html .fab-dock-wrapper .fab-group { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}