/* ============================================================
   download.css — Download 落地页
   单列、图片主导的窄屏版式；两个下载按钮按设计稿导出值实现。
   ============================================================ */

/* ============================================================
   落地页自带的页头 / 页脚
   本页不使用站点通用 header/footer：落地页是独立入口，
   带全站导航反而会把用户从转化流程里带走。
   ============================================================ */
/* 尺寸取自设计稿：栏高 80px、logo 图 32.84px、
   工具区距右 19.99px、图标 20.77px、间距 3.9px */
.lp-header {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  height: 80px;
  padding-inline: 4.8% 19.99px;
  background:
    radial-gradient(120% 160% at 12% 40%, rgba(150, 24, 40, .55) 0%, rgba(58, 10, 20, 0) 62%),
    linear-gradient(90deg, #4A0E1B 0%, #2A070F 55%, #20050C 100%);
  border-bottom: 1px solid #722B37;
}
.lp-header__logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp-header__logo img { display: block; height: 32.84px; width: auto; }
.lp-header__name { display: grid; line-height: 1.12; min-width: 0; }
.lp-header__name b {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(1.3rem, 6.2vw, 1.75rem); letter-spacing: .5px;
  color: #FFFFFF; white-space: nowrap;
}
.lp-header__name small {
  font-size: var(--text-xs); color: #AEA9AA; white-space: nowrap;
}
.lp-header__tools {
  display: flex; align-items: center; gap: 3.9px; flex: 0 0 auto;
}
.lp-header__tools a,
.lp-header__tools .lp-header__lang { display: block; line-height: 0; }
.lp-header__tools img {
  display: block; width: 20.77px; height: 20.77px;
  transition: transform var(--duration) var(--ease-out);
}
.lp-header__tools a:hover img { transform: translateY(-1px) scale(1.06); }

/* --- 语言切换下拉 --- */
.lp-lang { position: relative; }
.lp-lang__btn {
  display: block; line-height: 0;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.lp-lang__btn img {
  display: block; width: 20.77px; height: 20.77px;
  transition: transform var(--duration) var(--ease-out);
}
.lp-lang__btn:hover img { transform: translateY(-1px) scale(1.06); }
.lp-lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 140px;
  display: grid;
  padding: 4px;
  background: #2A070F;
  border: 1px solid #722B37;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.lp-lang__menu[hidden] { display: none; }
.lp-lang__menu button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; padding: 9px 12px;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--text-sm); color: var(--clr-text-primary);
  text-align: left;
}
.lp-lang__menu button:hover { background: rgba(247, 212, 98, .12); }
.lp-lang__menu button[aria-current="true"] { color: #F7D462; }
.lp-lang__menu button[aria-current="true"]::after { content: '✓'; font-size: var(--text-sm); }

/* 印地语是天城文：Inter 不含该字集，必须换字体栈，否则退成系统默认甚至豆腐块。
   ★ 必须覆盖【CSS 变量本身】而不是给 body 设 font-family ——
     .dl-lp__welcome / .dl-cta__label 等元素都显式写了 font-family: var(--font-body)，
     优先级高于 body 的继承，只改 body 它们拿不到(实测踩过)。
   Rajdhani 自带 devanagari 子集，是本地唯一能渲染天城文的自托管字体。 */
:root[data-lang="hi"] {
  --font-body: 'Rajdhani', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif;
  --font-display: 'Rajdhani', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif;
}
[lang="hi"] { font-family: 'Rajdhani', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif; }

.lp-foot {
  padding: var(--space-6) var(--space-4) var(--space-8);
  background: #20050C;
  text-align: center;
  font-size: var(--text-xs); color: var(--clr-text-muted);
}
.lp-foot p { margin: 0 0 var(--space-2); }
.lp-foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.lp-foot a { color: var(--clr-text-muted); }
.lp-foot a:hover { color: var(--dl-cta-line, #F7D462); }

/* --- 页面容器：窄列居中，与落地页 430px 画框一致
   底色用设计稿的深酒红：三张主视觉都是透明底、按该底色绘制的，
   放到站点默认的深蓝黑上会发闷。只作用于本区块，不影响页头页脚。 --- */
.dl-lp {
  --lp-bg: #20050C;
  --lp-line: #722B37;
  background: var(--lp-bg);
  padding-block: var(--space-4) var(--space-8);
}
.dl-lp__inner {
  width: 100%; max-width: 430px;
  margin-inline: auto;
  padding-inline: var(--space-3);
  display: grid; gap: var(--space-4);
}
.dl-lp .breadcrumb { margin-bottom: 0; }

/* --- 顶部主视觉 --- */
.dl-lp__welcome {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-style: italic; font-weight: 700;
  font-size: clamp(1.25rem, 6vw, 1.6rem); line-height: 1.25;
  text-align: center; color: #FFFFFF;
}
.dl-lp__hero img { display: block; width: 100%; height: auto; }

/* --- 下载面板 --- */
.dl-lp__panel {
  padding: var(--space-6) var(--space-3) var(--space-4);
  border: 1px solid var(--lp-line);
  border-radius: 13.25px;
  display: grid; justify-items: center;
}
.dl-apk {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-2);
  color: var(--clr-accent-gold);
  font-family: var(--font-display); font-weight: 600;
}
.dl-apk:hover { text-decoration: underline; }

/* --- 下载 CTA：App Store / Google Play 两个胶囊横条
   尺寸/圆角/描边/字号均取自设计稿导出值；图标与箭头用绝对定位，
   使标签左边界严格落在 68.8px（设计稿的 padding-left）。 --- */
.dl-cta {
  --dl-cta-line: #F7D462;      /* 描边（设计稿指定，比站点 --clr-accent-gold 更浅） */
  --dl-cta-text: #EDD8D7;
  --dl-cta-note: #AEA9AA;
  display: grid; gap: 10.9px;
  width: 100%; max-width: 395px;
}
.dl-cta__btn {
  position: relative;
  display: flex; align-items: center;
  min-height: 58.28px;
  padding: 18.64px 26px 18.64px 68.8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--dl-cta-line);
  border-radius: 48px;
  color: var(--dl-cta-text);
  transition: background-color var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}
.dl-cta__btn:hover,
.dl-cta__btn:focus-visible {
  background: rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(247, 212, 98, 0.28);
}
.dl-cta__icon {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px;
}
.dl-cta__icon img { display: block; width: auto; height: 26px; }
.dl-cta__icon--apple img { height: 24px; }
.dl-cta__label {
  flex: 1 1 auto;
  font-family: var(--font-body); font-weight: 400;
  font-size: 16px; line-height: 19px;
}
.dl-cta__chev {
  flex: 0 0 auto; width: 8px; height: 8px;
  border-top: 2px solid var(--dl-cta-line);
  border-right: 2px solid var(--dl-cta-line);
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease-out);
}
.dl-cta__btn:hover .dl-cta__chev { transform: rotate(45deg) translate(2px, -2px); }
/* --- 四项优势 / 热门游戏：均为整图，容器只负责定宽 --- */
.dl-lp__adv img,
.dl-lp__games img { display: block; width: 100%; height: auto; }
.dl-lp__games {
  padding: var(--space-3);
  border: 1px solid var(--lp-line);
  border-radius: 13.25px;
}

@media (max-width: 420px) {
  .dl-cta__btn { padding-left: 60px; padding-right: 20px; }
  .dl-cta__icon { left: 18px; }
}