/* ============================================================
   yg-theme.css — YG 视觉适配层（所有页面最后加载）
   依据：yg_button.png（黄绿→青绿渐变按钮）+ App 参考稿
   （金色渐变大标题 / 绿色 CTA / 深色文字 / 加粗展示标题）
   变量用 !important 以盖过 light.css 的同名 !important 覆盖
   ============================================================ */

/* ---------- 1. CTA 配色：绿色渐变体系 ---------- */
:root {
  --primary: #0fb981 !important;
  --grad: linear-gradient(135deg, #c9f542 0%, #5fe39c 52%, #17d6a4 100%) !important;
  --grad-deep: linear-gradient(135deg, #12b886 0%, #0b8f6b 100%) !important;
  --on-cta: #062719 !important;
  --glow: rgba(23, 214, 148, .32) !important;
  --glow-soft: rgba(23, 214, 148, .12) !important;
  /* 金色体系（白底金边方案） */
  --gold: #d4af37 !important;
  --gold-grad: linear-gradient(135deg, #c9961f 0%, #d4af37 50%, #8a5a00 100%) !important;
  --gold-bright: linear-gradient(135deg, #ffd76a 0%, #e3b53a 55%, #a9760a 100%) !important;
  --gold-soft: rgba(212, 175, 55, .16) !important;
  --ink: #14181f !important;
}

/* ---------- 2. 展示字体 + 标题金色渐变 ---------- */
h1, h2, h3,
.hero h1, .sec-title h2, .sec-head h2, .cta-band h2, .page-hero h1,
.ticker-head h2, .bonus-body h2 {
  font-family: "Montserrat", "Segoe UI", system-ui, -apple-system,
    "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif !important;
  letter-spacing: -.015em;
  background: var(--gold-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
/* 阿语标题：阿文字母必须保持连贯，禁止负字距 */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0 !important; }

/* 普通正文：黑色（覆盖浅色主题默认蓝灰文字） */
body { color: var(--ink) !important; }
p, li, dd, dt, .lead, .hero p, .page-hero p, .sec-title p, .bonus-body p, .text, blockquote {
  color: #1b2027 !important;
}

/* 小标签 / kicker / badge：改为金色（保留 pill 背景，用实色而非渐变裁切） */
.kicker, .badge, .tag, .eyebrow, .sec-title .label, .label-gold {
  color: #b8860b !important;
  font-weight: 800 !important;
}

/* hero / 子页 hero 的强调金色词（更亮一档） */
.hero h1 .grad,
.page-hero h1 .grad {
  background: var(--gold-bright) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ---------- 3. 主按钮：yg 渐变 + 深色文字 ---------- */
.btn-primary,
.home-redesign .btn-primary {
  background: var(--grad) !important;
  color: #062719 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 26px rgba(23, 214, 148, .35) !important;
}
.btn-primary:hover,
.home-redesign .btn-primary:hover {
  background: var(--grad) !important;
  filter: brightness(1.06);
  box-shadow: 0 16px 34px rgba(23, 214, 148, .45) !important;
}

/* ghost 悬停联动绿色（不加 !important，让 cta-band 上的白色悬停保持原样） */
.btn-ghost:hover {
  border-color: var(--primary);
  color: #0c9f77;
}

/* 游戏卡 hover 的 Play 标签 */
.play-btn { color: #062719 !important; }
.home-redesign .play-btn,
.home-redesign .game-card:hover .play-btn {
  background: #e2faf0 !important;
  color: #0c9f77 !important;
}

/* ---------- 4. 游戏弹窗品牌点缀同步 ---------- */
.game-launch-dialog .gm-brand { color: #0c9f77 !important; }
.game-launch-dialog .gm-icon {
  background: linear-gradient(135deg, #eafbe9, #e2faf6 65%, #fff) !important;
}

/* ============================================================
   4.5 金色渐变框线 / 装饰美化（白底金边方案）
   ============================================================ */

/* 通用：金色渐变描边（自适应圆角，不遮挡内容）
   原理：用伪元素铺一层金渐变，再用 mask 只留 1.5px 边圈 */
.yg-gold-frame,
.game-card,
.cta-band,
.activity-item,
.contact-stack .cc-card,
.tg-reco,
.home-redesign .qr-card {
  position: relative;
}
.yg-gold-frame::after,
.game-card::after,
.cta-band::after,
.activity-item::after,
.contact-stack .cc-card::after,
.tg-reco::after,
.home-redesign .qr-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px;
  background: var(--gold-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* 区块标题下的金色装饰短线 */
.sec-title h2::after,
.page-hero h1::after {
  content: ""; display: block; width: 64px; height: 3px; margin: 12px 0 0;
  background: var(--gold-grad); border-radius: 3px;
}

/* Telegram 提示条：改为暖金底，呼应金色主题 */
.tg-reco {
  background: linear-gradient(135deg, #fff7e0, #fdeec0) !important;
  border: 1px solid rgba(212, 175, 55, .5) !important;
  color: #6b4e00 !important;
  box-shadow: 0 10px 26px rgba(212, 175, 55, .22) !important;
}

/* ============================================================
   4.6 活动图库（Promotions 页 activity_1~10）
   ============================================================ */
.activity-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.activity-item {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 27, 45, .10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.activity-item img { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .activity-item:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 14px 34px rgba(15, 27, 45, .16); }
}
@media (max-width: 760px) {
  .activity-gallery { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   5. 动态效果层：扫光 / 缩放 / 入场 / 过场
   全部包在 no-preference 媒体下；reduce 时降级（见底部）
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ---- 5.1 页面整体淡入（每个页面加载即「过场」） ---- */
  body { animation: yg-body-in .5s ease both; }
  @keyframes yg-body-in { from { opacity: 0 } to { opacity: 1 } }

  /* ---- 5.2 按钮扫光（yg 绿按钮上有一道流动的高光） ---- */
  .btn-primary { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .25s ease, filter .25s ease; }
  .btn-primary::after {
    content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    transform: translateX(-130%) skewX(-18deg);
    animation: yg-shimmer 3.4s ease-in-out infinite;
    pointer-events: none; mix-blend-mode: overlay;
  }
  .btn-primary:hover::after { animation-duration: 1.7s; }
  @keyframes yg-shimmer {
    0%   { transform: translateX(-130%) skewX(-18deg); }
    60%  { transform: translateX(230%) skewX(-18deg); }
    100% { transform: translateX(230%) skewX(-18deg); }
  }

  /* ---- 5.3 金色标题流光（让 banner 式金标「呼吸」） ---- */
  .hero h1 .grad, .page-hero h1 .grad {
    background-size: 200% auto !important;
    animation: yg-gold-sheen 4.6s ease-in-out infinite;
  }
  @keyframes yg-gold-sheen {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  /* ---- 5.4 hover 缩放（重点按钮 / 游戏卡） ---- */
  .btn-primary:hover { transform: translateY(-2px) scale(1.04); }
  .btn-ghost { transition: transform .18s ease, border-color .2s ease, color .2s ease, background .2s ease; }
  .btn-ghost:hover { transform: translateY(-2px) scale(1.03); }
  .game-card { transition: transform .25s ease, box-shadow .25s ease; }
  .game-card:hover { transform: translateY(-5px) scale(1.03); }

  /* ---- 5.5 hero / 子页 hero 入场（上滑淡入，错峰） ---- */
  .hero h1, .hero p, .home-phone-stage,
  .page-hero h1, .page-hero p {
    animation: yg-fade-up .7s cubic-bezier(.22, .61, .36, 1) both;
  }
  .hero h1 { animation-delay: .04s; }
  .hero p  { animation-delay: .14s; }
  .home-phone-stage { animation-delay: .22s; }
  .page-hero h1 { animation-delay: .05s; }
  .page-hero p  { animation-delay: .13s; }
  @keyframes yg-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- 5.6 滚动入场（JS 给区块加 .in-view 触发） ---- */
  .yg-motion .yg-reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
  }
  .yg-motion .yg-reveal.in-view { opacity: 1; transform: none; }

  /* ---- 5.7 Telegram 提示条轻微呼吸，引导点击 ---- */
  .tg-reco { animation: yg-pulse 2.8s ease-in-out infinite; }
  @keyframes yg-pulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(212, 175, 55, .20); }
    50%      { box-shadow: 0 10px 30px rgba(212, 175, 55, .38); }
  }
}

/* ============================================================
   6. 页面切换过场：顶部细进度条（不遮挡内容，NProgress 风格）
   ============================================================ */
#yg-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, #c9f542 0%, #5fe39c 52%, #17d6a4 100%);
  box-shadow: 0 0 10px rgba(23, 214, 148, .55);
  opacity: 0; transition: opacity .25s ease, width .3s ease;
}
#yg-progress.active { opacity: 1; }

/* ============================================================
   7. 降级：用户开启「减少动态效果」时关闭动画
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
  .btn-primary::after { display: none !important; }
  .hero h1, .hero p, .home-phone-stage, .page-hero h1, .page-hero p { animation: none !important; }
  .hero h1 .grad, .page-hero h1 .grad { animation: none !important; background-size: 100% 100% !important; }
  .tg-reco { animation: none !important; }
  .yg-motion .yg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  #yg-progress { display: none !important; }
}