/* ============================================================================
   产品卡片 · 让每张卡有自己的颜色气质
   ============================================================================
   现状
   ----------------------------------------------------------------------------
   每张产品卡已经在行内设了 --accent / --accent2：
       星际维和  #4C8DFF / #FF7A45
       CAPE BEAT #FF4FD8 / #2BF5D0
       启明AI    #FFC53D / #FFE9A8
       CQLE      #2E9BFF / #8B5CF6

   但这套色【只用在 hover 的光晕上】—— 静止时四张卡长得一模一样，
   只有标题文字不同。所以整个区块看着平。

   做法
   ----------------------------------------------------------------------------
   把已有的 --accent 用起来，做三件事：

     ① 卡片底色带一点自己的色调（极淡，8% 左右）
        —— 四张卡并排时能看出"这是四个不同的东西"
     ② 顶部一条强调线
        —— 给它一个"标签页"的感觉，视线扫过时能定位
     ③ 图标瓦片用同色描边 + 微光
        —— 卡片里最该跳出来的元素

   ⚠️ 克制原则
   ----------------------------------------------------------------------------
   卡片里装的是产品说明文字，底色一浓就影响读数。
   所以：色调压在 8% 以内、强调线 2px、描边半透明。
   目标是"看得出区别"而不是"花花绿绿"。
   ============================================================================ */

/* ---------- ① 底色带自己的色调 ---------- */
.pcard{
  position:relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 8%, var(--surface)) 0%,
      var(--surface) 62%) !important;
  border-color:color-mix(in srgb, var(--accent) 18%, var(--sep)) !important;
  overflow:hidden}

/* ---------- ② 顶部强调线 ---------- */
.pcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,
    var(--accent),
    color-mix(in srgb, var(--accent2, var(--accent)) 70%, var(--accent)) 55%,
    transparent);
  opacity:.85;
  pointer-events:none}

/* 注意：tactical.css 里给所有 .card 加了左上角的 L 形角标，
   产品卡已经有顶线了，角标会打架 —— 这里去掉。 */
.pcard::after{display:none !important}

/* ---------- ③ 图标瓦片用同色 ---------- */
.pcard .logo-tile{
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset,
    0 6px 20px -10px color-mix(in srgb, var(--accent) 65%, transparent)}

/* ---------- 标签也用自己的色 ---------- */
.pcard .tag{color:color-mix(in srgb, var(--accent) 82%, #fff) !important}

/* ---------- 标题下方一道短横线，收住视线 ---------- */
.pcard h3{position:relative;padding-bottom:9px}
.pcard h3::after{
  content:'';position:absolute;left:0;bottom:0;width:22px;height:2px;
  background:color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius:1px}

/* ---------- 悬停：抬得更高一点，光晕更实 ---------- */
.pcard:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--accent) 42%, var(--sep)) !important;
  box-shadow:0 26px 60px -24px color-mix(in srgb, var(--accent) 62%, transparent)}
.pcard:hover::before{opacity:1}

/* ---------- "查看详情"的箭头滑一下 ---------- */
.pcard .go{display:inline-flex;align-items:center;gap:5px}
.pcard:hover .go{gap:9px}

/* ============================================================================
   顺带：区块标题的视觉重量
   ----------------------------------------------------------------------------
   现在区块标题（"挑个游戏"、"快速下单"）跟正文比只大一号，扫读时不够醒目。
   加一点重量，但不加字号 —— 加字号会把版面撑开。
   ============================================================================ */
.sect h2,.sect-plain h2{
  letter-spacing:-.018em;
  /* 标题下面一条极淡的横线，把区块切开 */
  padding-bottom:11px;
  border-bottom:1px solid var(--sep)}
.sect .note,.sect-plain .note{
  /* 副标题往右挪一点，跟标题拉开 */
  margin-left:2px}

/* ============================================================================
   顺带：数据条里的数字更有"读数感"
   ============================================================================ */
.live-item b{
  /* 数字和标签之间多一点呼吸 */
  margin-bottom:3px}

/* ============================================================================
   移动端：卡片色调用弱一点
   ----------------------------------------------------------------------------
   小屏上四张卡竖排，每张都带色会显得花。
   ============================================================================ */
@media (max-width:680px){
  .pcard{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 5%, var(--surface)) 0%,
        var(--surface) 55%) !important}
  .pcard h3{padding-bottom:7px}
}

/* 系统设了"减弱动效"就把位移去掉 */
@media (prefers-reduced-motion:reduce){
  .pcard:hover{transform:none}
}