@charset "utf-8";
/*!
 * 极限合击 · 官网样式
 * 暗夜玄金 / Dark-Gold —— 零依赖、零 Web Font、无外部请求
 * 目录: 01 变量 02 基础 03 通用组件 04 头部 05 首屏 06 区块 07 卡片
 *       08 表格 09 时间轴 10 页签 11 侧边栏 12 页脚 13 内页 14 动效 15 响应式
 */

/* ============================ 01 变量 ============================ */
:root {
  /* 底色 —— 玄夜 */
  --bg-0: #04050a;
  --bg-1: #080a12;
  --bg-2: #0d1019;
  --bg-3: #131826;
  --bg-4: #1a2032;

  /* 主色 —— 玄金 */
  --gold-1: #fff6da;
  --gold-2: #f2dc9f;
  --gold-3: #dcb463;
  --gold-4: #b98c36;
  --gold-5: #7d5c1f;

  /* 辅色 —— 玄赤 / 玄青 */
  --red: #c53030;
  --red-d: #8b1a1a;
  --cyan: #4fb3c9;

  /* 文本 */
  --tx-1: #e8ebf3;
  --tx-2: #a8b0c2;
  --tx-3: #6e7688;

  /* 线 / 面 */
  --line: rgba(220, 180, 99, .16);
  --line-s: rgba(220, 180, 99, .34);
  --glass: rgba(13, 16, 25, .72);
  --panel: linear-gradient(180deg, rgba(26, 32, 50, .55) 0%, rgba(8, 10, 18, .72) 100%);

  /* 发光 */
  --glow-s: 0 0 12px rgba(220, 180, 99, .28);
  --glow-m: 0 0 28px rgba(220, 180, 99, .22);
  --glow-t: 0 0 40px rgba(220, 180, 99, .14);

  /* 排版 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-num: "Bahnschrift", "DIN Alternate", "Segoe UI", var(--font);

  /* 尺度 */
  --wrap: 1240px;
  --wrap-n: 940px;
  --r: 4px;
  --r-l: 8px;
  --sp: 62px;
}

/* ============================ 02 基础 ============================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--tx-1);
  background: var(--bg-0);
  /* clip 不会创建滚动容器，避免破坏页签吸顶；老浏览器退回 hidden */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 页面底噪 + 顶部氛围光，纯 CSS，零请求 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 460px at 50% -8%, rgba(120, 92, 200, .16), transparent 70%),
    radial-gradient(700px 400px at 92% 8%, rgba(220, 180, 99, .07), transparent 68%),
    radial-gradient(800px 500px at 4% 60%, rgba(79, 179, 201, .05), transparent 70%);
}

img, video { max-width: 100%; display: block; border: 0; }

/* 内联 SVG 默认跟随字号，避免无尺寸约束时被拉伸（flex 里也不参与收缩） */
svg { width: 1em; height: 1em; flex: 0 0 auto; }

a { color: inherit; text-decoration: none; transition: color .2s, opacity .2s; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: rgba(220, 180, 99, .3); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-4), var(--gold-5));
  border-radius: 6px;
  border: 2px solid var(--bg-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-3); }

:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 3px; }

/* ============================ 03 通用组件 ============================ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }

.gold-text {
  background: linear-gradient(180deg, #fffaf0 4%, var(--gold-2) 34%, var(--gold-3) 58%, var(--gold-4) 78%, var(--gold-5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* —— 四角描金边框 —— */

/* —— 面板 —— */

/* —— 按钮 —— */
.btn {
  --bh: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: var(--bh);
  padding: 0 30px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .22s cubic-bezier(.2, .9, .3, 1), box-shadow .22s, filter .22s;
}
.btn:active { transform: scale(.97); }

/* 主按钮 —— 玄金 */
.btn-gold {
  color: #241703;
  background: linear-gradient(180deg, #fff3cf 0%, var(--gold-2) 26%, var(--gold-3) 62%, #a9791f 100%);
  box-shadow: 0 6px 22px rgba(220, 180, 99, .26), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .72), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.btn-gold:hover { filter: brightness(1.07); box-shadow: 0 10px 30px rgba(220, 180, 99, .42), inset 0 1px 0 rgba(255, 255, 255, .8); transform: translateY(-2px); }
.btn-gold:hover::after { left: 130%; }

/* 次按钮 —— 描金 */
.btn-line {
  color: var(--gold-2);
  border: 1px solid var(--line-s);
  background: rgba(220, 180, 99, .05);
}
.btn-line:hover { color: #fff; border-color: var(--gold-3); background: rgba(220, 180, 99, .14); box-shadow: var(--glow-s); transform: translateY(-2px); }

/* 赤金按钮 —— 充值 */
.btn-red {
  color: #fff;
  background: linear-gradient(180deg, #e0533f 0%, var(--red) 45%, #7d1414 100%);
  box-shadow: 0 6px 22px rgba(197, 48, 48, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-red:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(197, 48, 48, .46); }

.btn-sm { --bh: 38px; padding: 0 20px; font-size: 13.5px; }
.btn-lg { --bh: 56px; padding: 0 42px; font-size: 16.5px; }
.btn svg { width: 1.2em; height: 1.2em; }

/* —— 标签 —— */
.tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 2px;
  line-height: 1;
}
.tag-gold { color: #2a1c04; background: linear-gradient(180deg, var(--gold-2), var(--gold-4)); }
.tag-red { color: #fff; background: linear-gradient(180deg, #d9453a, var(--red-d)); }
.tag-line { color: var(--gold-2); border: 1px solid var(--line-s); background: rgba(220, 180, 99, .08); }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* ============================ 05 首屏 ============================ */
/* 背景完全由 CSS 绘制：零图片请求、任意视口比例都不变形、不会与文字打架 */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(124% 78% at 50% -14%, rgba(128, 96, 216, .42) 0%, rgba(66, 48, 128, .18) 34%, transparent 68%),
    radial-gradient(66% 46% at 86% 20%, rgba(220, 180, 99, .10), transparent 66%),
    radial-gradient(84% 58% at 10% 80%, rgba(60, 120, 150, .10), transparent 70%),
    linear-gradient(180deg, #06070f 0%, #0b0e1d 38%, #080a14 76%, var(--bg-0) 100%);
}

/* 月轮 */
.hero-moon {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 4%;
  width: min(48vw, 540px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%,
      rgba(255, 246, 218, .30),
      rgba(180, 160, 235, .16) 42%,
      rgba(90, 74, 150, .07) 62%,
      transparent 72%);
  box-shadow: 0 0 130px 44px rgba(126, 92, 214, .17), inset 0 0 70px rgba(255, 246, 218, .12);
  animation: moonBreath 10s ease-in-out infinite;
  pointer-events: none;
}
.hero-moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(220, 180, 99, .16);
}
@keyframes moonBreath {
  0%, 100% { opacity: .82; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.035); }
}

/* 远山 / 城脊剪影（内联 SVG，约 0.6KB） */
.hero-ridge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  height: 34%;
  min-height: 200px;
  pointer-events: none;
  opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
  mask-image: linear-gradient(180deg, transparent, #000 42%);
  background:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 250 60 206 112 232 176 172 236 218 300 152 362 200 432 142 500 194 562 162 634 214 700 156 772 202 842 148 902 188 982 134 1052 184 1122 158 1192 206 1262 160 1332 202 1440 164 1440 320 0 320Z' fill='%230a0d18'/%3E%3Cpath d='M0 250 60 206 112 232 176 172 236 218 300 152 362 200 432 142 500 194 562 162 634 214 700 156 772 202 842 148 902 188 982 134 1052 184 1122 158 1192 206 1262 160 1332 202 1440 164' fill='none' stroke='%23dcb463' stroke-opacity='.1' stroke-width='1.2'/%3E%3Cpath d='M0 292 80 262 150 288 240 244 320 280 420 236 510 274 600 240 700 278 800 244 900 282 1000 250 1100 286 1200 254 1300 288 1440 258 1440 320 0 320Z' fill='%23060810'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat;
}

/* 金色浮尘：用可平铺的径向渐变做无缝飘移 */
.hero-dust {
  position: absolute;
  inset: -60px 0;
  z-index: -1;
  pointer-events: none;
  opacity: .7;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 14px, rgba(255, 244, 214, .8), transparent 62%),
    radial-gradient(1.2px 1.2px at 168px 38px, rgba(255, 244, 214, .55), transparent 62%),
    radial-gradient(1.8px 1.8px at 96px 52px, rgba(220, 180, 99, .7), transparent 62%),
    radial-gradient(1.1px 1.1px at 262px 22px, rgba(255, 244, 214, .45), transparent 62%),
    radial-gradient(1.4px 1.4px at 210px 6px, rgba(220, 180, 99, .5), transparent 62%);
  background-size: 320px 64px;
  background-repeat: repeat;
  animation: dustUp 34s linear infinite;
}
.hero-dust.b {
  background-size: 420px 96px;
  background-position: 120px 0;
  opacity: .45;
  animation-duration: 52s;
  animation-direction: reverse;
}
@keyframes dustUp {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-24px, -64px, 0); }
}

/* 可选氛围视频：强模糊，只贡献流动色块，不参与阅读 */
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg video {
  position: absolute;
  inset: -6%;
  width: 112%; height: 112%;
  object-fit: cover;
  filter: blur(26px) brightness(.5) saturate(1.25);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-bg video.is-on { opacity: .38; }

/* 遮罩：保证文字永远清晰 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 5, 10, .55) 0%, transparent 26%, rgba(4, 5, 10, .38) 68%, var(--bg-0) 98%),
    radial-gradient(120% 76% at 50% 42%, transparent 34%, rgba(4, 5, 10, .55) 100%);
}

.hero-in { width: 100%; padding: 44px 0 52px; position: relative; z-index: 2; }

/* 单屏首页：内容全部居中 */
.hero-center { text-align: center; }

/* 双栏首屏：左边品牌 + CTA，右边"So 今天几点开区" —— 第一屏就把核心信息给全 */

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--gold-2);
  border: 1px solid var(--line-s);
  border-radius: 40px;
  background: rgba(220, 180, 99, .07);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.hero-eyebrow b { color: #fff; font-weight: 700; }

.hero h1 {
  margin: 20px 0 0;
  font-size: clamp(46px, 7.4vw, 100px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: .03em;
  filter: drop-shadow(0 6px 30px rgba(120, 80, 220, .34)) drop-shadow(0 2px 4px rgba(0, 0, 0, .7));
}
.hero h1 em {
  display: block;
  font-style: normal;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 600;
  letter-spacing: .48em;
  text-indent: .48em;
  margin-top: 12px;
  color: var(--gold-3);
  -webkit-text-fill-color: var(--gold-3);
}

.hero-sub {
  margin: 20px auto 0;
  font-size: clamp(16px, 2.1vw, 24px);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tx-1);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}
.hero-sub i { color: var(--gold-3); font-style: normal; }

.hero-tag {
  margin-top: 9px;
  text-indent: 0;
  font-size: clamp(12.5px, 1.4vw, 14px);
  letter-spacing: .26em;
  color: var(--tx-2);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  max-width: 860px;
  margin: 38px auto 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(220, 180, 99, .05), transparent);
}
.hero-stats li {
  flex: 1 1 0;
  min-width: 130px;
  padding: 15px 10px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.hero-stats li:last-child { border-right: 0; }
.hero-stats strong {
  display: block;
  font-family: var(--font-num);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
}
.hero-stats span { font-size: 12px; color: var(--tx-3); letter-spacing: .1em; }

.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
/* 首屏按钮收窄一点，保证三个能排在一行 */
.hero-cta .btn { --bh: 50px; padding: 0 24px; font-size: 15.5px; letter-spacing: .04em; }
.hero-cta .btn svg { width: 1.1em; height: 1.1em; }

/* 向下提示 */
@keyframes scrollDown { 0% { top: -34px; } 60%, 100% { top: 34px; } }

/* ============================ 06 区块 ============================ */
.sec { position: relative; padding: var(--sp) 0; }
.sec-tight { padding: 34px 0; }

/* —— 游戏介绍：老站把它做成了烧死文字的图片，这里还原成真实可读文字 —— */
.intro-stage { position: relative; padding: 0 74px; }
/* 通栏单列：每条正好一行，左右对齐，不再忽长忽短；
   再收成居中窄栏，避免右侧空一大片 */
.intro-list { display: block; max-width: 880px; margin: 0 auto; }
.intro-list li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tx-2);
  border-bottom: 1px dashed rgba(220, 180, 99, .11);
}
.intro-list li:last-child { border-bottom: 0; }
/* 行首小菱形，替代原来重复的"★极限合击★" */
.intro-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 17px;
  width: 6px;
  height: 6px;
  background: var(--gold-4);
  transform: rotate(45deg);
}
.intro-list li em {
  font-family: var(--font-num);
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-1);
  margin: 0 2px;
}
/* 介绍区整体收紧凑 */
.intro .sec-head { margin-bottom: 18px; }
.intro .sec-desc { margin-top: 8px; }

/* 两侧竖排装饰字（呼应老站设计） */
.intro-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  letter-spacing: .3em;
  color: var(--tx-3);
  white-space: nowrap;
}
.intro-side.l { left: 4px; }
.intro-side.r { right: 4px; }
.intro-side span,
.intro-side i { writing-mode: vertical-rl; }
.intro-side i {
  font-family: var(--font-num);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .26em;
  color: var(--gold-5);
}

.sec-head { text-align: center; margin-bottom: 30px; }
.sec-eyebrow {
  display: block;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--gold-4);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sec-title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: .1em;
  text-indent: .1em;
  line-height: 1.2;
}
.sec-desc {
  max-width: 640px;
  margin: 16px auto 0;
  font-size: 14.5px;
  color: var(--tx-2);
}

/* ============================ 07 卡片 ============================ */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* —— 特色卡 —— */
.feat {
  position: relative;
  padding: 30px 26px 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .32s cubic-bezier(.2, .9, .3, 1), border-color .32s, box-shadow .32s;
}
.feat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
  opacity: 0;
  transition: opacity .32s;
}
.feat::after {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 180, 99, .13), transparent 68%);
  opacity: 0;
  transition: opacity .42s;
}
.feat:hover { transform: translateY(-6px); border-color: var(--line-s); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), var(--glow-t); }
.feat:hover::before, .feat:hover::after { opacity: 1; }

.feat-ico {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-s);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(220, 180, 99, .16), transparent);
  color: var(--gold-2);
  margin-bottom: 20px;
  transition: transform .32s, box-shadow .32s;
}
.feat:hover .feat-ico { transform: translateY(-2px) rotate(-3deg); box-shadow: var(--glow-s); }
.feat-ico svg { width: 26px; height: 26px; }

.feat h3 { font-size: 18px; font-weight: 800; letter-spacing: .04em; margin-bottom: 10px; }
.feat p { font-size: 14px; color: var(--tx-2); line-height: 1.85; }

/* —— 下载卡 —— */
.dl-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.dl-card:hover { transform: translateY(-4px); border-color: var(--line-s); box-shadow: var(--glow-t); }
.dl-ico {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-s);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(220, 180, 99, .16), transparent);
  color: var(--gold-2);
}
.dl-ico svg { width: 24px; height: 24px; }
.dl-body { flex: 1; min-width: 0; }
.dl-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.dl-top h3 { font-size: 16.5px; font-weight: 800; letter-spacing: .03em; }
.dl-body p { font-size: 13.5px; color: var(--tx-2); margin-bottom: 16px; }
.dl-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================ 08 表格 ============================ */
.tbl-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.tbl-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(220, 180, 99, .1), transparent 62%);
}
.tbl-cap h3 { font-size: 16.5px; font-weight: 800; letter-spacing: .05em; }
.tbl-cap p { font-size: 13px; color: var(--tx-3); }

.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tbl { font-size: 14px; min-width: 480px; }
.tbl th, .tbl td { padding: 13px 20px; text-align: left; border-bottom: 1px solid rgba(220, 180, 99, .08); }
.tbl thead th {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold-3);
  background: rgba(220, 180, 99, .06);
  white-space: nowrap;
}
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover { background: rgba(220, 180, 99, .055); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--font-num); font-weight: 800; letter-spacing: .02em; color: var(--gold-1); white-space: nowrap; }
.tbl .strong { color: var(--gold-2); font-weight: 700; }

/* 充值阶梯 */
.bonus {
  position: relative;
  padding: 24px 16px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.bonus:hover { transform: translateY(-5px); border-color: var(--line-s); box-shadow: var(--glow-t); }
.bonus::after {
  content: '';
  position: absolute;
  bottom: -40%; left: 50%;
  width: 150%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(220, 180, 99, .16), transparent 66%);
  pointer-events: none;
}
.bonus .b-pay { font-size: 12.5px; color: var(--tx-3); letter-spacing: .12em; }
.bonus .b-pay b { font-family: var(--font-num); font-size: 19px; color: var(--tx-1); font-weight: 800; margin: 0 2px; }
.bonus .b-get { margin-top: 8px; }
.bonus .b-get b {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff6da, var(--gold-3) 60%, var(--gold-5));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bonus .b-get span { font-size: 12.5px; color: var(--gold-4); }
.bonus.is-top { border-color: rgba(220, 180, 99, .5); }
.bonus .b-flag {
  position: absolute;
  top: 0; right: 0;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #2a1c04;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-4));
  border-bottom-left-radius: 4px;
}

/* ============================ 10 页签 ============================ */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }

/* 吸顶页签条：滑到哪都能直接切，不用滚回去。
   用 wrap 内负边距做到通栏——比 100vw 稳妥（vw 含滚动条宽度，会撑出横向溢出）。 */
.tabs-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -24px 26px;
  padding: 12px 24px;
  background: rgba(6, 8, 14, .93);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.tabs-sticky .tabs { margin-bottom: 0; justify-content: center; }
.tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--tx-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(13, 16, 25, .5);
  white-space: nowrap;
  transition: color .24s, border-color .24s, background .24s, box-shadow .24s;
}
.tab:hover { color: var(--gold-1); border-color: var(--line-s); }
.tab.is-on {
  color: #241703;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-4));
  border-color: var(--gold-3);
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(220, 180, 99, .24);
}
.tab-panel { display: none; }
.tab-panel.is-on { display: block; animation: fadeUp .4s ease both; }
.tab-hint {
  margin-top: 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--tx-3);
  letter-spacing: .06em;
}
.tab-hint a { color: var(--gold-3); }
.tab-hint a:hover { color: var(--gold-1); }

/* 正文排版 */
.prose { max-width: 860px; margin: 0 auto; }
/* 桌面双栏正文：长文不再拉出一长条，减少滚动 */
.prose-cols { max-width: 100%; column-count: 2; column-gap: 46px; }
.prose-cols > * { break-inside: avoid; }
.prose h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .05em;
  margin: 32px 0 14px;
}
.prose h3:first-child { margin-top: 0; }
.prose h3::before {
  content: '';
  flex: 0 0 3px;
  width: 3px; height: 17px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-4));
  box-shadow: var(--glow-s);
}
.prose p { font-size: 14.5px; color: var(--tx-2); margin: 11px 0; line-height: 1.95; }
.prose b, .prose strong { color: var(--gold-2); font-weight: 700; }
.prose ol { counter-reset: n; }
.prose ol li {
  position: relative;
  padding: 9px 0 9px 40px;
  font-size: 14.5px;
  color: var(--tx-2);
  border-bottom: 1px dashed rgba(220, 180, 99, .1);
  counter-increment: n;
}
.prose ol li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0; top: 10px;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-4);
}
.prose ul.dot li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 14.5px;
  color: var(--tx-2);
}
.prose ul.dot li::before {
  content: '';
  position: absolute;
  left: 2px; top: 16px;
  width: 6px; height: 6px;
  background: var(--gold-4);
  transform: rotate(45deg);
}

/* 被浏览器拦下自动播放时，提示"点哪儿都行" */
.bgm-hint {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 860;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-1);
  background: rgba(6, 8, 14, .95);
  border: 1px solid var(--line-s);
  border-radius: 40px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6), var(--glow-s);
  backdrop-filter: blur(10px);
  cursor: pointer;
  animation: bgmIn .45s ease both, bgmPulse 2.6s ease-in-out 1s infinite;
}
.bgm-hint svg { width: 17px; height: 17px; color: var(--gold-2); }
.bgm-hint:hover { color: #241703; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); border-color: var(--gold-2); }
.bgm-hint:hover svg { color: #241703; }
@keyframes bgmIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bgmPulse {
  0%, 100% { box-shadow: 0 12px 34px rgba(0, 0, 0, .6), 0 0 0 0 rgba(220, 180, 99, 0); }
  50% { box-shadow: 0 12px 34px rgba(0, 0, 0, .6), 0 0 0 6px rgba(220, 180, 99, .13); }
}

/* 移动端：抬到底部操作条上方 */
@media (max-width: 900px) {
  .bgm-hint { bottom: 74px; font-size: 12.5px; padding: 10px 16px; max-width: calc(100% - 32px); }
}

/* ============================ 11 侧边栏 ============================ */
.dock {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity .3s, transform .3s;
}
.dock-item {
  position: relative;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  color: var(--gold-2);
  background: rgba(8, 10, 18, .82);
  border: 1px solid var(--line);
  border-radius: 3px;
  backdrop-filter: blur(8px);
  transition: color .24s, border-color .24s, background .24s, transform .24s;
}
.dock-item svg { width: 21px; height: 21px; }
.dock-item:hover { color: #fff; border-color: var(--gold-3); background: rgba(220, 180, 99, .2); transform: translateX(-3px); }
/* 音乐正在播：按钮点亮 */
.dock-item.is-on {
  color: #241703;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-4));
  border-color: var(--gold-3);
}
.dock-item.is-on:hover { color: #241703; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); }
/* 想放但被浏览器拦住：轻微呼吸提示一下 */
.dock-item.is-want { border-color: var(--line-s); animation: musicHint 2.4s ease-in-out infinite; }
@keyframes musicHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 180, 99, 0); }
  50% { box-shadow: 0 0 0 5px rgba(220, 180, 99, .12), var(--glow-s); }
}
.dock-item .dock-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 7px 13px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--tx-1);
  background: rgba(6, 8, 14, .96);
  border: 1px solid var(--line-s);
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s, transform .24s, visibility .24s;
}
.dock-item:hover .dock-tip { opacity: 1; visibility: visible; transform: translateY(-50%); }

/* 移动端底部操作条 */
.mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 880;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(6, 8, 14, .96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-s);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 0 10px;
  font-size: 11.5px;
  color: var(--tx-2);
  border-right: 1px solid rgba(220, 180, 99, .1);
}
.mbar a:last-child { border-right: 0; }
.mbar a svg { width: 19px; height: 19px; }
.mbar a.is-key { color: var(--gold-2); background: linear-gradient(180deg, rgba(220, 180, 99, .14), transparent); }

/* 回到顶部 */
.totop {
  position: fixed;
  right: 18px; bottom: 22px;
  z-index: 800;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  color: var(--gold-2);
  background: rgba(8, 10, 18, .86);
  border: 1px solid var(--line-s);
  border-radius: 3px;
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s, background .24s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { color: #fff; background: rgba(220, 180, 99, .22); }
.totop svg { width: 20px; height: 20px; }

/* ============================ 12 页脚 ============================ */
/* 首页：hero + 页脚正好占满一屏，页脚不再被推到屏幕外 */
body[data-page="home"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
body[data-page="home"] main { flex: 1 0 auto; display: flex; flex-direction: column; }
body[data-page="home"] .hero { flex: 1 0 auto; }

.ft {
  position: relative;
  padding: 26px 0 18px;
  background: linear-gradient(180deg, var(--bg-0), #020306);
  border-top: 1px solid var(--line);
}
.ft::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(760px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-4), transparent);
}

.ft-health {
  margin-top: 16px;
  padding: 11px 16px;
  border: 1px solid rgba(220, 180, 99, .12);
  border-radius: var(--r);
  background: rgba(220, 180, 99, .03);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ft-health-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(120, 200, 140, .4);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #8fdcae;
  letter-spacing: .06em;
}
.ft-health-logo svg { width: 17px; height: 17px; }
.ft-health p { flex: 1; min-width: 240px; font-size: 12px; color: var(--tx-3); line-height: 1.7; }

.ft-bottom {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(220, 180, 99, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--tx-3);
}
.ft-bottom a { color: var(--tx-2); }
.ft-bottom a:hover { color: var(--gold-2); }
.ft-bottom .fb-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ============================ 13 内页 ============================ */
/* 内页头图同样用 CSS 绘制，避免老站主视觉里烧死的文字与标题重影 */
.page-hd {
  position: relative;
  padding: 44px 0 38px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(110% 76% at 50% -16%, rgba(128, 96, 216, .36) 0%, rgba(66, 48, 128, .14) 40%, transparent 70%),
    radial-gradient(58% 46% at 84% 8%, rgba(220, 180, 99, .09), transparent 70%),
    linear-gradient(180deg, #070911 0%, #0b0e1a 58%, var(--bg-0) 100%);
  border-bottom: 1px solid var(--line);
}
.page-hd::before {
  content: '';
  position: absolute;
  left: 50%; top: -46%;
  width: min(52vw, 560px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgba(255, 246, 218, .16), rgba(150, 130, 220, .09) 48%, transparent 70%);
  pointer-events: none;
}
.page-hd .wrap { position: relative; z-index: 2; }
.page-hd h1 {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 900;
  letter-spacing: .14em;
  text-indent: .14em;
  line-height: 1.2;
}
.page-hd p { margin-top: 14px; font-size: 14.5px; color: var(--tx-2); letter-spacing: .06em; }

.crumb { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; font-size: 13px; color: var(--tx-3); }
.crumb a:hover { color: var(--gold-2); }
.crumb i { color: var(--gold-5); font-style: normal; }

/* 提示条 */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 20px;
  border-radius: var(--r);
  border: 1px solid rgba(197, 48, 48, .32);
  background: linear-gradient(90deg, rgba(197, 48, 48, .13), rgba(197, 48, 48, .03));
  font-size: 13.5px;
  color: var(--tx-2);
  line-height: 1.85;
}
.notice svg { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 3px; color: #e0705f; }
.notice b { color: #ffb4a6; }

/* 支付通道 */
.pay-ch { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pay-ch div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 12px;
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--tx-2);
}
.pay-ch div::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5fe08f;
  box-shadow: 0 0 8px #5fe08f;
}

/* 线路按钮组 */
.pay-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 13px; }
.pay-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 54px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--gold-2);
  border: 1px solid var(--line-s);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(220, 180, 99, .1), rgba(13, 16, 25, .6));
  transition: color .24s, transform .24s, box-shadow .24s, background .24s, border-color .24s;
}
.pay-line svg { width: 18px; height: 18px; }
.pay-line:hover {
  color: #241703;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-4));
  border-color: var(--gold-2);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(220, 180, 99, .3);
}

/* ============================ 14 动效 ============================ */
/* 关键：入场动画只在 JS 正常时启用。JS 挂了 / 被拦截，内容依然完整可见 */
html.js [data-rv] { opacity: 0; transform: translateY(26px); }
html.js [data-rv].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .72s cubic-bezier(.2, .8, .3, 1), transform .72s cubic-bezier(.2, .8, .3, 1);
}
[data-rv][data-d="1"] { transition-delay: .07s; }
[data-rv][data-d="2"] { transition-delay: .14s; }
[data-rv][data-d="3"] { transition-delay: .21s; }
[data-rv][data-d="4"] { transition-delay: .28s; }
[data-rv][data-d="5"] { transition-delay: .35s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 重区块交给浏览器跳过离屏渲染，滚动更顺 */

/* 复制成功提示 */
.toast {
  position: fixed;
  left: 50%; bottom: 42px;
  transform: translate(-50%, 20px);
  z-index: 950;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-1);
  background: rgba(6, 8, 14, .97);
  border: 1px solid var(--line-s);
  border-radius: 3px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .7), var(--glow-s);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s, transform .3s, visibility .3s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ============================ 15 响应式 ============================ */
@media (max-width: 1180px) {
}

@media (max-width: 1024px) {
  :root { --sp: 50px; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .dock { display: none; }
  /* 首屏收成单栏：先品牌 CTA，再今日开区 */
  .hero-cta { justify-content: center; }
  .hero-in { padding-bottom: 44px; }
}

@media (max-width: 900px) {
  .hero-stats li:nth-child(2) { border-right: 0; }
  .hero-stats li { min-width: 50%; }
  .hero-stats { max-width: 520px; }
  .mbar { display: grid; }
  body { padding-bottom: 62px; }
  .totop { bottom: 76px; }
  .tabs-sticky { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .tabs-sticky .tabs { flex-wrap: nowrap; justify-content: flex-start; }
}

@media (max-width: 640px) {
  :root { --sp: 40px; }
  body { font-size: 14.5px; }
  .wrap { padding: 0 16px; }
  .g-2, .g-4 { grid-template-columns: 1fr; }
  .pay-lines { grid-template-columns: repeat(2, 1fr); }
  .pay-line { font-size: 13.5px; height: 48px; padding: 0 8px; }
  .hero-moon { top: 2%; width: 78vw; }
  .hero-ridge { height: 26%; min-height: 130px; }
  .hero-in { padding-top: 30px; padding-bottom: 36px; }
  .hero h1 { letter-spacing: .01em; font-size: clamp(40px, 13vw, 62px); }
  .hero h1 em { letter-spacing: .28em; text-indent: .28em; }
  .hero-eyebrow { height: auto; padding: 7px 13px; font-size: 11.5px; letter-spacing: .1em; white-space: normal; line-height: 1.5; text-align: center; }
  .hero-sub { letter-spacing: .03em; }
  .hero-tag { letter-spacing: .14em; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-stats { margin-top: 26px; }
  .hero-stats li { padding: 12px 8px; }
  .hero-stats strong { font-size: 20px; }
  .sec-head { margin-bottom: 22px; }
  .tabs-sticky { margin-left: -16px; margin-right: -16px; padding: 10px 16px; }
  .tab { padding: 9px 15px; font-size: 13.5px; }
  .feat { padding: 22px 18px 20px; }
  .tbl th, .tbl td { padding: 11px 14px; }
  .tbl-cap { padding: 15px 18px; }
  .ft { padding-top: 40px; }
  .ft-health { padding: 16px; }
  .ft-bottom { flex-direction: column; text-align: center; }
  .btn { padding: 0 22px; }
  .btn-lg { --bh: 52px; padding: 0 26px; font-size: 15.5px; }
}

@media (max-width: 380px) {
  .hero-stats li { min-width: 100%; border-right: 0; }
}

/* 尊重系统"减少动态效果" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js [data-rv] { opacity: 1; transform: none; }
}

/* 打印 */
@media print {
  body { background: #fff; color: #000; }
  html.js [data-rv] { opacity: 1; transform: none; }
}

/* —— 游戏介绍区响应式 —— */
@media (max-width: 1024px) {
  .intro-stage { padding: 0; }
  .intro-side { display: none; }
}

@media (max-width: 640px) {
  .intro-list li { padding: 9px 0 9px 18px; font-size: 13px; }
  .intro-list li::before { top: 16px; }
}