/* ============================================================
   游戏角标 通用样式（公共组件）—— 折角标签皮肤
   结构：<span class="game-badge game-badge--档位">文案</span>
   档位 slug：hong 夯 / ding 顶级 / ren 人上人 / npc NPC / la 拉完了
   由 mobilepublic@game_corner_mark 片段按 corner_mark(1-5) 动态输出。

   位置：等级角标固定「左上」，会出血到卡片外(left:-6px)。
   ★ 卡片/图标容器需 position:relative; overflow:visible（.gcm-anchor 已给 relative；
     若该容器为裁封面而 overflow:hidden，请把 .gcm-anchor 放到裁剪层之外的父容器，否则角标被裁）。
   贴边微调：改 .game-badge 的 top/left 即可。
   ============================================================ */

/* 定位锚点：加在要相对定位的容器上 */
.gcm-anchor { position: relative; }

/* 角标包裹层：负责定位 + 承载折痕。本层【无 clip-path】，故折痕不会被裁掉。
   （.game-badge 有 clip-path，会连同其 ::before/::after 一起裁到多边形内，
     所以折痕必须挂在这一层，而不能挂在 .game-badge 上。） */
.gcm-badge-wrap{
  position:absolute; top:4px; left:-6px; z-index:2;
}
/* 回折三角（fold-back）：贴标签底边、直角在【靠卡片(内)一侧·上】、尖角甩向【外(出血)端】。
   顶边(0,0)-(10,0)紧贴标签底边；内端竖直下折(10,0)-(10,8)；斜边从外端尖角(0,0)收到内端底(10,8)。
   本层无 clip-path，故折痕不会被裁；取该档暗色 --fold，约 8px 深、10px 宽。 */
.gcm-badge-wrap::after{
  content:""; position:absolute; left:0; top:100%;
  width:4px; height:8px; background:var(--fold,#7a1010);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}
/* 各档「暗一档」折角取色 + 夯档辉光（方案5a·金属浮雕，5 slug → 3 视觉档）：
   L1 夯 hong；L2 顶级 ding = 人上人 ren（同款深金）；L3 NPC npc = 拉完了 la（同款石灰灰）。 */
/* 夯·外发光(金)：静态 drop-shadow。双金环/内高光/内暗压全部做在标签本体 box-shadow 上；无旋转、无描边环。 */
.gcm-badge-wrap--hong{ --fold:#8a0f0f; filter:drop-shadow(0 0 9px rgba(255,190,80,.85)); }
/* 夯·暖金旋转描边环：包裹层 ::before 同燕尾裁形，conic 暖金渐变(文档色 #fff1c4→#ffca55→#ff6b2d→#ff2d6b)；
   标签本体(z-index:1)盖住中心，露出的一圈即描边环。★环形固定不动，用 @property 动画渐变角度(--gcm-a)让「暖金在环内旋转」，
   而不是 transform 旋转带 clip-path 的元素本身(那样是整块燕尾在转、只会甩出杂色)。
   不支持 @property 的老机型退化为静态彩虹环(--gcm-a:0deg 兜底)。环 clip-path 只裁自身，不影响折角/星光。 */
@property --gcm-a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.gcm-badge-wrap--hong::before{
  content:""; position:absolute; inset:-2px; z-index:1; --gcm-a:0deg;   /* -3px：金环加宽为可见的 3px 光环（原 -1px 太细） */
  background:conic-gradient(from var(--gcm-a),#fff1c4,#ffca55,#ff6b2d,#ff2d6b,#ffca55,#fff1c4,#ff6b2d,#fff1c4);
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%);  /* 缺口随外扩略加深(7→9)，与本体燕尾对齐 */
  filter:drop-shadow(0 0 3px rgba(255,180,70,.5));                       /* 环自身微光，旋转时更抢眼 */
  animation:gcmSpin 3s linear infinite;
}
/* ★ 老机型兜底：iOS<16.4 / 不支持 @property 的 WebView 无法动画自定义角度，
   环退化为静止暖金彩虹圈（--gcm-a 固定 0deg）。功能不受影响，仅少旋转动感。
   若必须旋转，需在片段里给 ::before 补一个内层 <i> 用 transform 旋转放大的 conic 层。 */
.gcm-badge-wrap--ding,
.gcm-badge-wrap--ren { --fold:#9a6414; }
.gcm-badge-wrap--npc,
.gcm-badge-wrap--la  { --fold:#332a2f; }

/* 折角标签本体：裁形 + 底色；定位交给外层 .gcm-badge-wrap。position/z-index 让本体压在描边环之上 */
.game-badge{
  display:block; position:relative; z-index:1;
  font:800 12px/1 "PingFang SC","Microsoft YaHei",sans-serif;
  color:#fff; padding:6px 16px 6px 12px; white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%);
}

/* —— L1 夯：金红火焰渐变 + 双金环(外金环/暗分隔/内金环，均 inset 被 clip-path 裁到燕尾内) + 内高光 + 内暗压 —— */
.game-badge--hong{
  background:linear-gradient(120deg,#fff1c4,#ffca55 22%,#ff6b2d 55%,#c00f0f);
  color:#fff; font-weight:900; font-size:14px; padding:5px 15px 5px 12px;
  box-shadow:
    inset 0 0 0 1px #ffe9a8,               /* 外金环 */
    inset 0 0 0 1px rgba(120,55,0,.55),  /* 暗分隔线 */
    inset 0 -2px 4px rgba(140,10,0,.5);    /* 内暗压(浮雕) */
  text-shadow:0 1px 2px rgba(120,10,0,.7);
}
.game-badge--hong::after{                 /* 流光扫过（被本体 clip-path 裁到燕尾内） */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.9) 50%,transparent 68%);
  animation:badgeSweep 2.2s ease-in-out infinite;
}
/* 夯·星光 ✦：本体 ::before，靠上角闪烁(sparkA)；被 clip-path 裁在燕尾内、置于双金环之上。 */
.game-badge--hong::before{
  content:"✦"; position:absolute; top:0; left:5px; z-index:2;
  color:#fff6d0; font-size:11px; line-height:1;
  animation:sparkA 1.9s ease-in-out infinite;
}

/* —— L2 顶级 / 人上人：深金渐变 + 内金环 + 内高光 + 缓慢闪光 —— */
.game-badge--ding,
.game-badge--ren{
  background:linear-gradient(125deg,#c8842a,#e9a13b);
  color:#fff5dc; font-weight:800; font-size:13px;
  border:1.5px solid #ffe9a8;
  box-shadow:inset 0 0 0 1px rgba(180,120,40,.4),inset 0 1px 2px rgba(255,255,255,.5);
  text-shadow:0 1px 1px rgba(120,70,0,.5);
}
.game-badge--ding::after,
.game-badge--ren::after{                  /* 缓慢闪光 */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  animation:badgeSheen 3.4s ease-in-out infinite;
}

/* —— L3 NPC / 拉完了：石灰灰 + 极细描线 + 无动画 —— */
.game-badge--npc,
.game-badge--la{
  background:#5a4a52; color:#d8c4cd; font-weight:700; font-size:13px;
  border:1px solid rgba(255,255,255,.14);
}

/* ============================================================
   右上·向右出血变体（game-center 分类页等）：给角标的定位祖先加 class="gcm-tr"，
   整组翻转——角标改到右上、向右出血 6px，燕尾缺口在左，描边环/折角同步镜像。
   片段无需改动（仍输出 .gcm-badge-wrap > .game-badge），方向由 .gcm-tr 上下文决定。 */
.gcm-tr .gcm-badge-wrap{ left:auto; right:-6px; }
/* 缺口在左（默认 clip-path 的水平镜像）；缺口侧(左)多留白 */
.gcm-tr .game-badge{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,7px 50%);
  padding:6px 12px 6px 16px;
}
.gcm-tr .game-badge--hong{ padding:5px 12px 5px 15px; }
/* 夯·彩虹环镜像：缺口在左 */
.gcm-tr .gcm-badge-wrap--hong::before{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%);
}
/* 星光镜像到右上(出血侧)角 */
.gcm-tr .game-badge--hong::before{ left:auto; right:5px; }
/* 回折三角·右出血镜像：折痕贴右(出血侧)，直角在【靠卡片(内=左)一侧·上】，尖角甩向右(外)。 */
.gcm-tr .gcm-badge-wrap::after{
  left:auto; right:0;
  clip-path:polygon(0 0, 100% 0, 0 100%);
}

/* ============================================================
   小号变体 .gcm-sm / .gcm-xs（供更小 icon 使用）
   由片段 game_corner_mark 传 size="sm" / "xs" 输出到 .gcm-badge-wrap 上。
   用 transform 等比缩放：一处生效，折角/星光/描边环/流光/发光同步缩小，
   无需逐档改字号内距；文字为缩小(非放大)故不糊。
   缩放原点贴锚定角：默认左上出血→top left；右上出血(.gcm-tr)→top right。
   倍率可用 --gcm-scale 在具体场景内微调(不写则用下方默认)：
     .my-small-card .gcm-badge-wrap.gcm-sm { --gcm-scale:.66; top:4px; left:-3px; }
   注意：本变体只管「大小」，贴边位置仍由所在容器(top/left 或 .gcm-tr)控制。
   ============================================================ */
.gcm-badge-wrap.gcm-sm{ transform:scale(var(--gcm-scale, .78)); transform-origin:top left; }
.gcm-badge-wrap.gcm-xs{ transform:scale(var(--gcm-scale, .6));  transform-origin:top left; }
.gcm-tr .gcm-badge-wrap.gcm-sm,
.gcm-tr .gcm-badge-wrap.gcm-xs{ transform-origin:top right; }

@keyframes badgeSweep{
  0%{transform:translateX(-140%) skewX(-18deg)}
  55%,100%{transform:translateX(240%) skewX(-18deg)}
}
@keyframes badgeSheen{ 0%,100%{opacity:.3} 50%{opacity:.7} }
@keyframes sparkA{ 0%,100%{opacity:0;transform:scale(.4) rotate(0deg)} 45%{opacity:1;transform:scale(1) rotate(15deg)} }
@keyframes gcmSpin{ to{ --gcm-a:360deg; } }


/* ============================================================
   .gcm-cell：为「角标出血」新增的卡片外层网格项(position:relative 由 .gcm-anchor 提供，
   本身 overflow:visible 以便角标溢出显示)。
   ★ 必须 min-width:0 ★
   category_2 网格是 repeat(2,1fr)=minmax(auto,1fr)，auto 最小值取网格项 min-content；
   卡内 .cover 是 aspect-ratio 的 swiper，min-content 不定 → 轨道被撑爆 → swiper 尺寸失控(炸到 ~33M px)。
   原网格项 .game-item 因 overflow:hidden 自带 min-width:0 才没炸；换成 overflow:visible 的 .gcm-cell 后
   要显式补 min-width:0(顺带 min-height:0)，让 1fr 轨道回到「容器一半」的确定宽度，swiper 即可正常计算。 */
.category_2 .gcm-cell { min-width: 0; min-height: 0; }

/* 首帧抖动修复：swiper 未初始化时多张 .swiper-slide 竖直堆叠，会把 flex 子项 .cover 的
   min-content 撑高、盖过 aspect-ratio(封面偏高、左右卡不等高)。补 min-height:0 让 3/4 比例
   从首帧锁死高度，配合 .cover 原有 overflow:hidden 直接裁掉堆叠的多余幻灯，消除刷新时的抖动。 */
.category_2 .cover { min-height: 0; }


/* 分类标签（奶油胶囊）：右上 —— 可选，需要时启用 */
/*
.game-tag{
  position:absolute; top:8px; right:8px; z-index:2;
  background:#f8e8d8; color:#b0486e;
  font:700 11px/1 "PingFang SC","Microsoft YaHei",sans-serif;
  padding:3px 10px; border-radius:999px;
}
*/